Added brush to time-chart (#14929)

apache · Aug 30, 2023 · 42cfb99 · 42cfb99
1 parent d295b91
commit 42cfb99
Showing 1 changed file with 31 additions and 1 deletion.
diff --git a/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts b/web-console/src/views/explore-view/modules/time-chart-echarts-module.ts
@@ -93,7 +93,7 @@ export default typedVisualModule({
       },
     },
   },
-  module: ({ container, host }) => {
+  module: ({ container, host, updateWhere }) => {
     const myChart = echarts.init(container, 'dark');
 
     myChart.setOption({
@@ -103,6 +103,7 @@ export default typedVisualModule({
       },
       tooltip: {
         trigger: 'axis',
+        transitionDuration: 0,
         axisPointer: {
           type: 'cross',
           label: {
@@ -118,6 +119,10 @@ export default typedVisualModule({
           saveAsImage: {},
         },
       },
+      brush: {
+        toolbox: ['lineX'],
+        xAxisIndex: 0,
+      },
       grid: {
         left: '3%',
         right: '4%',
@@ -148,6 +153,8 @@ export default typedVisualModule({
       async update({ table, where, parameterValues }) {
         const { splitColumn, metric, numberToStack, showOthers, timeGranularity } = parameterValues;
 
+        myChart.off('brushend');
+
         const vs = splitColumn
           ? (
               await host.sqlQuery(
@@ -187,13 +194,36 @@ export default typedVisualModule({
         const effectiveVs = vs && showOthers ? vs.concat(OTHERS_VALUE) : vs;
         const sourceData = effectiveVs ? transformData(dataset, effectiveVs) : dataset;
 
+        myChart.on('brushend', (params: any) => {
+          if (!params.areas.length) return;
+
+          const [start, end] = params.areas[0].coordRange;
+
+          updateWhere(
+            where.changeClauseInWhere(
+              SqlExpression.parse(
+                `TIME_IN_INTERVAL(${C('__time')}, '${new Date(start).toISOString()}/${new Date(
+                  end,
+                ).toISOString()}')`,
+              ),
+            ),
+          );
+
+          myChart.dispatchAction({
+            type: 'brush',
+            command: 'clear',
+            areas: [],
+          });
+        });
+
         const showSymbol = sourceData.length < 2;
         myChart.setOption(
           {
             dataset: {
               dimensions: ['time'].concat(vs || ['met']),
               source: sourceData,
             },
+            animation: false,
             legend: effectiveVs
               ? {
                   data: effectiveVs,