Viz: get UPlotChart out of the timeRange business (#70412)

packages/grafana-ui/src/components/GraphNG/GraphNG.tsx

@@ -248,7 +248,7 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
   }
 
   render() {
-    const { width, height, children, timeRange, renderLegend } = this.props;
+    const { width, height, children, renderLegend } = this.props;
     const { config, alignedFrame, alignedData } = this.state;
 
     if (!config) {
@@ -263,7 +263,6 @@ export class GraphNG extends Component<GraphNGProps, GraphNGState> {
             data={alignedData!}
             width={vizWidth}
             height={vizHeight}
-            timeRange={timeRange}
             plotRef={(u) => ((this.plotInstance as React.MutableRefObject<uPlot>).current = u)}
           >
             {children ? children(config, alignedFrame) : null}

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -202,9 +202,7 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
 
   render() {
     const { data, configBuilder } = this.state;
-    const { width, height, sparkline } = this.props;
-    return (
-      <UPlotChart data={data} config={configBuilder} width={width} height={height} timeRange={sparkline.timeRange!} />
-    );
+    const { width, height } = this.props;
+    return <UPlotChart data={data} config={configBuilder} width={width} height={height} />;
   }
 }

packages/grafana-ui/src/components/uPlot/Plot.test.tsx

@@ -3,7 +3,7 @@ import createMockRaf from 'mock-raf';
 import React from 'react';
 import uPlot from 'uplot';
 
-import { dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
+import { FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
 import { GraphFieldConfig, GraphDrawStyle } from '@grafana/schema';
 
 import { UPlotChart } from './Plot';
@@ -49,15 +49,9 @@ const mockData = () => {
     } as FieldConfig<GraphFieldConfig>,
   });
 
-  const timeRange = {
-    from: dateTime(1602673200000),
-    to: dateTime(1602680400000),
-    raw: { from: '1602673200000', to: '1602680400000' },
-  };
-
   const config = new UPlotConfigBuilder();
   config.addSeries({} as SeriesProps);
-  return { data: data, timeRange, config };
+  return { data: data, config };
 };
 
 describe('UPlotChart', () => {
@@ -73,13 +67,12 @@ describe('UPlotChart', () => {
   });
 
   it('destroys uPlot instance when component unmounts', () => {
-    const { data, timeRange, config } = mockData();
+    const { data, config } = mockData();
 
     const { unmount } = render(
       <UPlotChart
         data={preparePlotData2(data, getStackingGroups(data))} // mock
         config={config}
-        timeRange={timeRange}
         width={100}
         height={100}
       />
@@ -92,13 +85,12 @@ describe('UPlotChart', () => {
 
   describe('data update', () => {
     it('skips uPlot reinitialization when there are no field config changes', () => {
-      const { data, timeRange, config } = mockData();
+      const { data, config } = mockData();
 
       const { rerender } = render(
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))} // mock
           config={config}
-          timeRange={timeRange}
           width={100}
           height={100}
         />
@@ -112,7 +104,6 @@ describe('UPlotChart', () => {
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))} // changed
           config={config}
-          timeRange={timeRange}
           width={100}
           height={100}
         />
@@ -124,15 +115,9 @@ describe('UPlotChart', () => {
 
   describe('config update', () => {
     it('skips uPlot intialization for width and height equal 0', async () => {
-      const { data, timeRange, config } = mockData();
+      const { data, config } = mockData();
       const { queryAllByTestId } = render(
-        <UPlotChart
-          data={preparePlotData2(data, getStackingGroups(data))}
-          config={config}
-          timeRange={timeRange}
-          width={0}
-          height={0}
-        />
+        <UPlotChart data={preparePlotData2(data, getStackingGroups(data))} config={config} width={0} height={0} />
       );
 
       expect(queryAllByTestId('uplot-main-div')).toHaveLength(1);
@@ -140,13 +125,12 @@ describe('UPlotChart', () => {
     });
 
     it('reinitializes uPlot when config changes', () => {
-      const { data, timeRange, config } = mockData();
+      const { data, config } = mockData();
 
       const { rerender } = render(
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))} // frame
           config={config}
-          timeRange={timeRange}
           width={100}
           height={100}
         />
@@ -161,7 +145,6 @@ describe('UPlotChart', () => {
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))}
           config={nextConfig}
-          timeRange={timeRange}
           width={100}
           height={100}
         />
@@ -172,13 +155,12 @@ describe('UPlotChart', () => {
     });
 
     it('skips uPlot reinitialization when only dimensions change', () => {
-      const { data, timeRange, config } = mockData();
+      const { data, config } = mockData();
 
       const { rerender } = render(
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))} // frame
           config={config}
-          timeRange={timeRange}
           width={100}
           height={100}
         />
@@ -189,7 +171,6 @@ describe('UPlotChart', () => {
         <UPlotChart
           data={preparePlotData2(data, getStackingGroups(data))} // frame
           config={config}
-          timeRange={timeRange}
           width={200}
           height={200}
         />

packages/grafana-ui/src/components/uPlot/Plot.tsx

@@ -16,16 +16,6 @@ function sameConfig(prevProps: PlotProps, nextProps: PlotProps) {
   return nextProps.config === prevProps.config;
 }
 
-function sameTimeRange(prevProps: PlotProps, nextProps: PlotProps) {
-  let prevTime = prevProps.timeRange;
-  let nextTime = nextProps.timeRange;
-
-  return (
-    prevTime === nextTime ||
-    (nextTime.from.valueOf() === prevTime.from.valueOf() && nextTime.to.valueOf() === prevTime.to.valueOf())
-  );
-}
-
 type UPlotChartState = {
   plot: uPlot | null;
 };
@@ -100,11 +90,6 @@ export class UPlotChart extends Component<PlotProps, UPlotChartState> {
       this.reinitPlot();
     } else if (!sameData(prevProps, this.props)) {
       plot?.setData(this.props.data as AlignedData);
-    } else if (!sameTimeRange(prevProps, this.props)) {
-      plot?.setScale('x', {
-        min: this.props.timeRange.from.valueOf(),
-        max: this.props.timeRange.to.valueOf(),
-      });
     }
   }
 

packages/grafana-ui/src/components/uPlot/types.ts

@@ -1,8 +1,6 @@
 import React from 'react';
 import uPlot, { Options, AlignedData } from 'uplot';
 
-import { TimeRange } from '@grafana/data';
-
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
 
 export type PlotConfig = Pick<
@@ -23,7 +21,6 @@ export interface PlotProps {
   width: number;
   height: number;
   config: UPlotConfigBuilder;
-  timeRange: TimeRange;
   children?: React.ReactNode;
   // Reference to uPlot instance
   plotRef?: (u: uPlot) => void;