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 [
      // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
      new Date(time * 1000).getTime(),
      // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
      Array.isArray(value) ? convertToMinute(value) : value
    ]
  });

  // Set chart options
  const option = {
    tooltip: {
      trigger: 'axis',
      valueFormatter: (value) => {
        const hours = Math.floor(value/60)
        const minutes = Math.floor(value % 60)
        const seconds = Math.floor((value * 60) % 60)
        return hours + ':' + minutes + ':' + seconds
      }
    },
    xAxis: {
      type: 'time',
    },
    yAxis: {
      name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in 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: 'slider',
        xAxisIndex: 0,
        filterMode: 'none'
      },
    ],
    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>