Factor out reusable flame graph component (#3676)

The flame graph component used to display build instrumentation data can
be reused to display a flame graph of tests using the test start time
added in #3450. This PR factors our
a common component which can be shared between these two use cases. In
addition, I organized all of the shared chart components into a common
directory in anticipation of further improvements.

Author: williamjallen

resources/js/vue/components/BuildInstrumentationPage.vue

@@ -16,7 +16,7 @@
         />
 
         <loading-indicator :is-loading="!allCommands">
-          <CommandGanttChart :commands="formattedChartCommands" />
+          <CommandFlameChart :commands="formattedChartCommands" />
         </loading-indicator>
       </div>
 
@@ -46,14 +46,14 @@ import LoadingIndicator from './shared/LoadingIndicator.vue';
 import BuildSidebar from './shared/BuildSidebar.vue';
 import gql from 'graphql-tag';
 import FilterBuilder from './shared/FilterBuilder.vue';
-import CommandGanttChart from './shared/CommandGanttChart.vue';
+import CommandFlameChart from './shared/CommandFlameChart.vue';
 import { DateTime, Duration } from 'luxon';
-import LineChart from './shared/LineChart.vue';
+import LineChart from './shared/Charts/LineChart.vue';
 
 export default {
   components: {
     LineChart,
-    CommandGanttChart,
+    CommandFlameChart,
     FilterBuilder,
     LoadingIndicator,
     BuildSummaryCard,

resources/js/vue/components/BuildTargetsPage.vue

@@ -16,7 +16,7 @@
 
       <loading-indicator :is-loading="!build || !targets">
         <div class="tw-w-full tw-bg-base-100 tw-flex tw-flex-col tw-rounded-lg tw-border tw-border-gray-200 tw-p-4">
-          <CommandGanttChart :commands="formattedCommands" />
+          <CommandFlameChart :commands="formattedCommands" />
         </div>
       </loading-indicator>
 
@@ -61,13 +61,13 @@ import LoadingIndicator from './shared/LoadingIndicator.vue';
 import BuildSidebar from './shared/BuildSidebar.vue';
 import gql from 'graphql-tag';
 import FilterBuilder from './shared/FilterBuilder.vue';
-import CommandGanttChart from './shared/CommandGanttChart.vue';
+import CommandFlameChart from './shared/CommandFlameChart.vue';
 import { DateTime, Duration } from 'luxon';
 import Utils from './shared/Utils';
 
 export default {
   components: {
-    CommandGanttChart,
+    CommandFlameChart,
     FilterBuilder,
     LoadingIndicator,
     DataTable,

resources/js/vue/components/shared/Charts/FlameChart.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-chart
+    class="tw-w-full"
+    :option="chartOptions"
+    :style="{ height: height + 'px' }"
+    autoresize
+    @click="$emit('click', $event)"
+  />
+</template>
+
+<script>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { CustomChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+} from 'echarts/components';
+import VChart from 'vue-echarts';
+import Utils from '../Utils';
+
+use([
+  CanvasRenderer,
+  CustomChart,
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+]);
+
+export default {
+  name: 'FlameChart',
+  components: {
+    VChart,
+  },
+  props: {
+    data: {
+      type: Array,
+      required: true,
+    },
+    tracks: {
+      type: Array,
+      required: true,
+    },
+    overallStartTime: {
+      type: Number,
+      required: true,
+    },
+    overallEndTime: {
+      type: Number,
+      required: true,
+    },
+    height: {
+      type: Number,
+      required: true,
+    },
+    tooltipFormatter: {
+      type: Function,
+      required: true,
+    },
+    renderItem: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ['click'],
+  computed: {
+    chartOptions() {
+      return {
+        tooltip: {
+          confine: true,
+          trigger: 'item',
+          extraCssText: 'max-width: 500px; white-space: normal;',
+          formatter: this.tooltipFormatter,
+        },
+        grid: {
+          top: '0px',
+          left: '10px',
+          right: '10px',
+          bottom: '50px',
+        },
+        xAxis: {
+          max: this.overallEndTime,
+          type: 'time',
+          axisLabel: {
+            formatter: val => {
+              const relativeTime = val - this.overallStartTime;
+              return Utils.formatDuration(relativeTime);
+            },
+          },
+        },
+        yAxis: {
+          show: false,
+          type: 'category',
+          data: this.tracks,
+          inverse: true,
+        },
+        dataZoom: [
+          {
+            type: 'slider',
+            filterMode: 'weakFilter',
+            showDataShadow: false,
+            bottom: 5,
+            height: 15,
+          },
+          {
+            type: 'inside',
+            filterMode: 'weakFilter',
+          },
+        ],
+        series: [{
+          type: 'custom',
+          coordinateSystem: 'cartesian2d',
+          data: this.data,
+          large: true,
+          progressive: 400,
+          renderItem: this.renderItem,
+          encode: {
+            x: [1, 2],
+            y: 0,
+          },
+        }],
+      };
+    },
+  },
+};
+</script>

…s/js/vue/components/shared/LineChart.vue …e/components/shared/Charts/LineChart.vueresources/js/vue/components/shared/LineChart.vue renamed to resources/js/vue/components/shared/Charts/LineChart.vue resources/js/vue/components/shared/LineChart.vue renamed to resources/js/vue/components/shared/Charts/LineChart.vue

@@ -7,8 +7,24 @@
 </template>
 
 <script>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { LineChart } from 'echarts/charts';
+import {
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+} from 'echarts/components';
 import VChart from 'vue-echarts';
-import Utils from './Utils';
+import Utils from '../Utils';
+
+use([
+  CanvasRenderer,
+  LineChart,
+  GridComponent,
+  TooltipComponent,
+  DataZoomComponent,
+]);
 
 export default {
   name: 'LineChart',