Skip to content
OverviewSolutions
32
Comments
3
James English
@anglicus

All comments

  • James English•620
    @anglicusPosted over 2 years ago

    On my solution, I used the SVGs as background images in my CSS using the background-image property rather than including them directly in the HTML. That keeps them contained, although you might also be able to achieve the same result by using overflow: hidden if you want to keep them in the HTML.

    As far as having a pre-selected button, I think you could select the button you want to be pressed in your JS and .click() it when the page first loads, like this:document.getElementById("weekly").click().

    In my own solution, rather than switching the inner HTML of the elements when the button is clicked, I actually have separate daily, weekly and monthly elements displaying the data, and then use classes to determine which set of elements is visible. Then I have weekly show by default by applying those classes in the original HTML.

    Marked as helpful
    1
  • Bence Zámbó•510
    @zambobenceSubmitted over 2 years ago

    Dear All, I would be grateful for any kind of recommendation and feedback.

    I have thought that the column with the greatest value could be formatted in Javascript and be dynamic although could not figure it out how.

    Thank you Bence

    Expense chart component with Flexbox

    3
    James English•620
    @anglicusPosted over 2 years ago

    Yes, you can format the column with the greatest value dynamically. You just have to include some way of finding the maximum value in your JS and then mark that column by adding a class to it. Looking at your code, you could modify your getData() function to look something like this (there may be a more elegant way to do it, but this should at least give you the basic idea):

    getData().then(column => {
  console.log(column);
  let max = 0; // will store the largest value of amount
  let max_index = -1; // will set the index where the largest value is found
  let htmlArray = column.map((element, index) => {
    // check if the amount exceeds the largest found so far
    if (element.amount > max) {
      // if so, set the max and max_index
      max = element.amount;
      max_index = index;
    }
    return setHtml(element);
  });
  const columnContainer = document.getElementById('column_container');
  columnContainer.innerHTML = htmlArray.join('');
  // add .highlight to the column that had the greatest amount
  columnContainer.querySelector(`:nth-child(${max_index + 1})`).classList.add("highlight");
})

    After that, just add a bit to your CSS to recolor the column where the maximum occurred:

    .highlight > .col {
  background-color: var(--cyan);
}
    Marked as helpful
    1
  • James English•620
    @anglicusPosted almost 4 years ago

    I'm sure there is more than one way to deal with the backgrounds, but here is something I tried using calc. I set the image sizes to 1024px, and then positioned like this:

    For the top circle: left: calc(50% - 1024px); top: calc(50% - 1024px);

    For the bottom circle: right: calc(50% - 1024px); bottom: calc(50% - 1024px);

    Basically this makes it so that as the window gets smaller more of the circle gets pushed off screen, and the edges of the circles will stay in the same relative position to the card as you change the size of the window.

    You can change the 1024 to different values if you want the circles to be closer or farther. Changing the 50% value will also make it so they move a little with respect to the card as you resize the window (I set mine to 55% and 45% instead of 50% just so it felt a little more "alive").

    1