From 42cfb999cd5a671432a59f14b3cb34187d65c3d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien?= <dolor_sit_amet@protonmail.ch>
Date: Wed, 30 Aug 2023 13:36:50 -0400
Subject: [PATCH] Added brush to time-chart (#14929)

---
 .../modules/time-chart-echarts-module.ts      | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 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
index 690d1c1f9e1..b4846648fdc 100644
--- 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,6 +194,28 @@ 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(
           {
@@ -194,6 +223,7 @@ export default typedVisualModule({
               dimensions: ['time'].concat(vs || ['met']),
               source: sourceData,
             },
+            animation: false,
             legend: effectiveVs
               ? {
                   data: effectiveVs,