[ML] Enable Index data visualizer document count chart to update time range query (#106438)

* Add brush listener

* Fix back button not working

* [ML] Remove api names in apidoc.json

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx

@@ -5,19 +5,24 @@
  * 2.0.
  */
 
-import React, { FC, useMemo } from 'react';
+import React, { FC, useCallback, useMemo } from 'react';
 
 import { i18n } from '@kbn/i18n';
 
 import {
   Axis,
   BarSeries,
+  BrushEndListener,
   Chart,
+  ElementClickListener,
   niceTimeFormatter,
   Position,
   ScaleType,
   Settings,
+  XYChartElementEvent,
 } from '@elastic/charts';
+import moment from 'moment';
+import { useDataVisualizerKibana } from '../../../../kibana_context';
 
 export interface DocumentCountChartPoint {
   time: number | string;
@@ -41,6 +46,10 @@ export const DocumentCountChart: FC<Props> = ({
   timeRangeLatest,
   interval,
 }) => {
+  const {
+    services: { data },
+  } = useDataVisualizerKibana();
+
   const seriesName = i18n.translate(
     'xpack.dataVisualizer.dataGrid.field.documentCountChart.seriesLabel',
     {
@@ -71,6 +80,35 @@ export const DocumentCountChart: FC<Props> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartPoints, timeRangeEarliest, timeRangeLatest, interval]);
 
+  const timefilterUpdateHandler = useCallback(
+    (ranges: { from: number; to: number }) => {
+      data.query.timefilter.timefilter.setTime({
+        from: moment(ranges.from).toISOString(),
+        to: moment(ranges.to).toISOString(),
+        mode: 'absolute',
+      });
+    },
+    [data]
+  );
+
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [from, to] = x;
+    timefilterUpdateHandler({ from, to });
+  };
+
+  const onElementClick: ElementClickListener = ([elementData]) => {
+    const startRange = (elementData as XYChartElementEvent)[0].x;
+
+    const range = {
+      from: startRange,
+      to: startRange + interval,
+    };
+    timefilterUpdateHandler(range);
+  };
+
   return (
     <div style={{ width: width ?? '100%' }} data-test-subj="dataVisualizerDocumentCountChart">
       <Chart
@@ -79,7 +117,7 @@ export const DocumentCountChart: FC<Props> = ({
           height: 120,
         }}
       >
-        <Settings xDomain={xDomain} />
+        <Settings xDomain={xDomain} onBrushEnd={onBrushEnd} onElementClick={onElementClick} />
         <Axis
           id="bottom"
           position={Position.Bottom}

x-pack/plugins/data_visualizer/public/application/index_data_visualizer/components/index_data_visualizer_view/index_data_visualizer_view.tsx

@@ -174,12 +174,14 @@ export const IndexDataVisualizerView: FC<IndexDataVisualizerViewProps> = (dataVi
         from: globalState.time.from,
         to: globalState.time.to,
       });
+      setLastRefresh(Date.now());
     }
   }, [globalState, timefilter]);
 
   useEffect(() => {
     if (globalState?.refreshInterval !== undefined) {
       timefilter.setRefreshInterval(globalState.refreshInterval);
+      setLastRefresh(Date.now());
     }
   }, [globalState, timefilter]);
 

x-pack/plugins/ml/server/routes/apidoc.json

@@ -22,8 +22,6 @@
     "ValidateDataFrameAnalytics",
 
     "DataVisualizer",
-    "GetOverallStats",
-    "GetStatsForFields",
     "GetHistogramsForFields",
 
     "AnomalyDetectors",