Expense chart component with Flexbox

Community feedback

• 

  Prantik•660

  @prantiknoor

  Posted almost 3 years ago

  Hey @benceturbulence. You used this to measure the height height: ${data.amount*2.5}px. But if the data will be big, then the chart will also be big.

  So you can use a limit. const maxHeight = 200;. And you can find the max amount by this: const maxAmount = Math.max(...column.map((el) => el.amount));

  By these two values, you can measure the height of every column. const height = (element.amount / maxAmount) * maxHeight;

  getData().then((column) => {
      // No matter how big the amount, the size of bar will be under maxHeight
    const maxHeight = 200;
  
    const maxAmount = Math.max(...column.map((el) => el.amount));
  
    let htmlArray = column
      .map((element) => {
        const height = (element.amount / maxAmount) * maxHeight;
        return setHtml(element.day, height);
      })
      .join("");
    document.getElementById("column_container").innerHTML = htmlArray;
  });
  
  function setHtml(day, height) {
    return `
      <div class="column">
      <span class="col" style ="width: 100%; height: ${height}px"></span>
      <p class = "days accent">${day}</p>
      </div>
      `;
  }
  

  10

  Marked as helpful
• 

  James English•620

  @anglicus

  Posted almost 3 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);
  }
  

  10

  Marked as helpful
• 

  Bence Zámbó•510

  @zambobence

  Posted almost 3 years ago

  Thank you very much for your valuable feedback, I really appreciate it.

  01