poky/scripts/lib/build_perf/html/measurement_chart.html

<script type="module">
  // Get raw data
  const rawData = [
    {% for sample in measurement.samples %}
      [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}],
    {% endfor %}
  ];

  const convertToMinute = (time) => {
    return time[0]*60 + time[1] + time[2]/60 + time[3]/3600;
  }

  // Convert raw data to the format: [time, value]
  const data = rawData.map(([commit, value, time]) => {
    return [
      new Date(time * 1000).getTime(), // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
      Array.isArray(value) ? convertToMinute(value) : value // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
    ]
  });

  // Set chart options
  const option = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      },
      valueFormatter: (value) => value.toFixed(2)
    },
    xAxis: {
      type: 'time',
    },
    yAxis: {
      name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration (minutes)' : 'Disk size (MB)',
      type: 'value',
      min: function(value) {
        return Math.round(value.min - 0.5);
      },
      max: function(value) {
        return Math.round(value.max + 0.5);
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '{{ measurement.value_type.quantity }}',
        type: 'line',
        smooth: true,
        symbol: 'none',
        data: data
      }
    ]
  };

  // Draw chart
  const chart_div = document.getElementById('{{ chart_elem_id }}');
  const measurement_chart= echarts.init(chart_div, null, {
    height: 320
  });
  // Change chart size with browser resize
  window.addEventListener('resize', function() {
    measurement_chart.resize();
  });
  measurement_chart.setOption(option);
</script>