amountOf.js

import Chart from 'chart.js/auto'

const colors = [
  "rgb(255, 99, 132)",
  "rgb(54, 162, 235)",
  "rgb(255, 206, 86)",
  "rgb(75, 192, 192)",
  "rgb(153, 102, 255)",
  "rgb(255, 159, 64)"
];

(function () {
  const data = {"v7":[{"size":1632,"cpu":6398297,"mem":21452},{"size":1672,"cpu":7089448,"mem":24456},{"size":1864,"cpu":8936968,"mem":29614}],"v8":[{"size":1704,"cpu":4804309,"mem":21452},{"size":1744,"cpu":5093976,"mem":24456},{"size":1936,"cpu":6645776,"mem":29614}],"v9":[{"size":1584,"cpu":4404309,"mem":18952},{"size":1624,"cpu":4677976,"mem":21856},{"size":1816,"cpu":6197776,"mem":26814}]};

  new Chart(
    document.getElementById('amount-of-size'),
    {
      type: 'bar',
      data: {
        labels: Object.keys(data),
        datasets: [
          {
            label: "size",
            data: Object.keys(data)
            .map(version => data[version][0].size),
          }
        ]
      }
    }
  );
  new Chart(
    document.getElementById('amount-of-cpu'),
    {
      type: 'line',
      data: {
        labels: new Array(data.v7.length).fill(0).map((_, i) => i),
        datasets: Object.keys(data).map((version, i) => ({
          label: version,
          data: data[version]
          .slice(0, data.v7.length)
          .map(row => row.cpu),
          fill: false,
          borderColor: colors[i]
        }))
      }
    }
  );
  new Chart(
    document.getElementById('amount-of-mem'),
    {
      type: 'line',
      data: {
        labels: new Array(data.v7.length).fill(0).map((_, i) => i),
        datasets: Object.keys(data).map((version, i) => ({
          label: version,
          data: data[version]
          .map(row => row.mem),
          fill: false,
          borderColor: colors[i]
        }))
      }
    }
  );
})();