From 1db0ace5e7ff9c536604cec8a7d26f1fe6b001a0 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Wed, 21 Jun 2023 13:10:25 -0500 Subject: [PATCH] Viz: get UPlotChart out of the timeRange business (#70412) --- .betterer.results | 4 +-- .../src/components/GraphNG/GraphNG.tsx | 3 +- .../src/components/Sparkline/Sparkline.tsx | 6 ++-- .../src/components/uPlot/Plot.test.tsx | 35 +++++-------------- .../grafana-ui/src/components/uPlot/Plot.tsx | 15 -------- .../grafana-ui/src/components/uPlot/types.ts | 3 -- .../plugins/panel/heatmap/HeatmapPanel.tsx | 2 +- .../app/plugins/panel/histogram/Histogram.tsx | 8 +---- .../app/plugins/panel/xychart/TooltipView.tsx | 12 +------ .../plugins/panel/xychart/XYChartPanel2.tsx | 3 +- 10 files changed, 16 insertions(+), 75 deletions(-) diff --git a/.betterer.results b/.betterer.results index 85dcb08e9ac..ef98b4f852d 100644 --- a/.betterer.results +++ b/.betterer.results @@ -5303,9 +5303,7 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"], - [0, 0, 0, "Unexpected any. Specify a different type.", "5"] + [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], "public/app/plugins/panel/live/LiveChannelEditor.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index 09cbf6783ea..a9e3a22a265 100644 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx @@ -248,7 +248,7 @@ export class GraphNG extends Component { } 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 { data={alignedData!} width={vizWidth} height={vizHeight} - timeRange={timeRange} plotRef={(u) => ((this.plotInstance as React.MutableRefObject).current = u)} > {children ? children(config, alignedFrame) : null} diff --git a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx index 3604a975b4a..288aa4077b3 100644 --- a/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx +++ b/packages/grafana-ui/src/components/Sparkline/Sparkline.tsx @@ -202,9 +202,7 @@ export class Sparkline extends PureComponent { render() { const { data, configBuilder } = this.state; - const { width, height, sparkline } = this.props; - return ( - - ); + const { width, height } = this.props; + return ; } } diff --git a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx b/packages/grafana-ui/src/components/uPlot/Plot.test.tsx index e1a95e69a38..5dd3ae544f7 100644 --- a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx +++ b/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, }); - 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( @@ -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( @@ -112,7 +104,6 @@ describe('UPlotChart', () => { @@ -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( - + ); 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( @@ -161,7 +145,6 @@ describe('UPlotChart', () => { @@ -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( @@ -189,7 +171,6 @@ describe('UPlotChart', () => { diff --git a/packages/grafana-ui/src/components/uPlot/Plot.tsx b/packages/grafana-ui/src/components/uPlot/Plot.tsx index d27276ef2d6..2bd4bdde244 100644 --- a/packages/grafana-ui/src/components/uPlot/Plot.tsx +++ b/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 { 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(), - }); } } diff --git a/packages/grafana-ui/src/components/uPlot/types.ts b/packages/grafana-ui/src/components/uPlot/types.ts index 89646a5bfc6..959787608d7 100644 --- a/packages/grafana-ui/src/components/uPlot/types.ts +++ b/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; diff --git a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx index 594b013c800..89c819d13df 100644 --- a/public/app/plugins/panel/heatmap/HeatmapPanel.tsx +++ b/public/app/plugins/panel/heatmap/HeatmapPanel.tsx @@ -192,7 +192,7 @@ export const HeatmapPanel = ({ <> {(vizWidth: number, vizHeight: number) => ( - + {/*children ? children(config, alignedFrame) : null*/} )} diff --git a/public/app/plugins/panel/histogram/Histogram.tsx b/public/app/plugins/panel/histogram/Histogram.tsx index 650d34e857d..58ec3eab141 100644 --- a/public/app/plugins/panel/histogram/Histogram.tsx +++ b/public/app/plugins/panel/histogram/Histogram.tsx @@ -323,13 +323,7 @@ export class Histogram extends React.Component { return ( {(vizWidth: number, vizHeight: number) => ( - + {children ? children(config, alignedFrame) : null} )} diff --git a/public/app/plugins/panel/xychart/TooltipView.tsx b/public/app/plugins/panel/xychart/TooltipView.tsx index 33906bf704b..d442036c911 100644 --- a/public/app/plugins/panel/xychart/TooltipView.tsx +++ b/public/app/plugins/panel/xychart/TooltipView.tsx @@ -1,15 +1,7 @@ import { css } from '@emotion/css'; import React from 'react'; -import { - DataFrame, - Field, - formattedValueToString, - getFieldDisplayName, - GrafanaTheme2, - LinkModel, - TimeRange, -} from '@grafana/data'; +import { DataFrame, Field, formattedValueToString, getFieldDisplayName, GrafanaTheme2, LinkModel } from '@grafana/data'; import { LinkButton, useStyles2, VerticalGroup, VizTooltipOptions } from '@grafana/ui'; import { findField } from 'app/features/dimensions'; import { getTitleFromHref } from 'app/features/explore/utils/links'; @@ -39,7 +31,6 @@ export interface Props { seriesMapping: SeriesMapping; hoveredPointIndex: number; // the hovered point options: VizTooltipOptions; - range: TimeRange; } export const TooltipView = ({ @@ -50,7 +41,6 @@ export const TooltipView = ({ rowIndex, hoveredPointIndex, options, - range, }: Props) => { const style = useStyles2(getStyles); diff --git a/public/app/plugins/panel/xychart/XYChartPanel2.tsx b/public/app/plugins/panel/xychart/XYChartPanel2.tsx index fc24ff45163..359d7a0e769 100644 --- a/public/app/plugins/panel/xychart/XYChartPanel2.tsx +++ b/public/app/plugins/panel/xychart/XYChartPanel2.tsx @@ -215,7 +215,7 @@ export const XYChartPanel2 = (props: Props) => { <> {(vizWidth: number, vizHeight: number) => ( - + )} @@ -252,7 +252,6 @@ export const XYChartPanel2 = (props: Props) => { rowIndex={hover.xIndex} hoveredPointIndex={hover.scatterIndex} data={props.data.series} - range={props.timeRange} /> )}