feat(dashboards): Add timeseries selection state to timeseries widgets (

#83492) 2EZ. Pretty close to how we currently implement it, with a simple key-value lookup.
getsentry · Jan 15, 2025 · 63b8a44 · 63b8a44
1 parent e034c1d
commit 63b8a44
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/static/app/views/dashboards/widgets/common/types.tsx b/static/app/views/dashboards/widgets/common/types.tsx
@@ -36,3 +36,5 @@ export type Release = {
 };
 
 export type Aliases = Record<string, string>;
+
+export type TimeseriesSelection = {[key: string]: boolean};
diff --git a/static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.stories.tsx b/static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.stories.tsx
@@ -1,16 +1,17 @@
-import {Fragment} from 'react';
+import {Fragment, useState} from 'react';
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
+import {Button} from 'sentry/components/button';
 import JSXNode from 'sentry/components/stories/jsxNode';
 import SideBySide from 'sentry/components/stories/sideBySide';
 import SizingWindow from 'sentry/components/stories/sizingWindow';
 import storyBook from 'sentry/stories/storyBook';
 import type {DateString} from 'sentry/types/core';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
-import type {Release, TimeseriesData} from '../common/types';
+import type {Release, TimeseriesData, TimeseriesSelection} from '../common/types';
 import {shiftTimeserieToNow} from '../timeSeriesWidget/shiftTimeserieToNow';
 
 import {LineChartWidget} from './lineChartWidget';
@@ -54,6 +55,15 @@ export default storyBook(LineChartWidget, story => {
     const {datetime} = selection;
     const {start, end} = datetime;
 
+    const [timeseriesSelection, setTimeseriesSelection] = useState<TimeseriesSelection>({
+      'p50(span.duration)': true,
+      'p99(span.duration)': true,
+    });
+
+    const toggleTimeseriesSelection = (seriesName: string): void => {
+      setTimeseriesSelection(s => ({...s, [seriesName]: !s[seriesName]}));
+    };
+
     const throughputTimeSeries = toTimeSeriesSelection(
       sampleThroughputTimeSeries as unknown as TimeseriesData,
       start,
@@ -94,6 +104,12 @@ export default storyBook(LineChartWidget, story => {
           a dotted line. By default the delay is <code>0</code>.
         </p>
 
+        <p>
+          To control the timeseries selection, you can use the{' '}
+          <code>timeseriesSelection</code> and <code>onTimeseriesSelectionChange</code>{' '}
+          props.
+        </p>
+
         <SideBySide>
           <MediumWidget>
             <LineChartWidget
@@ -107,8 +123,28 @@ export default storyBook(LineChartWidget, story => {
                 'p50(span.duration)': '50th Percentile',
                 'p99(span.duration)': '99th Percentile',
               }}
+              timeseriesSelection={timeseriesSelection}
+              onTimeseriesSelectionChange={newSelection => {
+                setTimeseriesSelection(newSelection);
+              }}
             />
           </MediumWidget>
+
+          <Button
+            onClick={() => {
+              toggleTimeseriesSelection('p50(span.duration)');
+            }}
+          >
+            Toggle 50th Percentile
+          </Button>
+
+          <Button
+            onClick={() => {
+              toggleTimeseriesSelection('p99(span.duration)');
+            }}
+          >
+            Toggle 99th Percentile
+          </Button>
         </SideBySide>
       </Fragment>
     );

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidget.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidget.tsx
@@ -63,6 +63,8 @@ export function TimeSeriesWidget(props: TimeSeriesWidgetProps) {
             aliases={props.aliases}
             dataCompletenessDelay={props.dataCompletenessDelay}
             SeriesConstructor={props.SeriesConstructor}
+            timeseriesSelection={props.timeseriesSelection}
+            onTimeseriesSelectionChange={props.onTimeseriesSelectionChange}
           />
         </TimeSeriesWrapper>
       )}

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/timeSeriesWidgetVisualization.tsx
@@ -20,7 +20,12 @@ import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 
 import {useWidgetSyncContext} from '../../contexts/widgetSyncContext';
-import type {Aliases, Release, TimeseriesData} from '../common/types';
+import type {
+  Aliases,
+  Release,
+  TimeseriesData,
+  TimeseriesSelection,
+} from '../common/types';
 
 import {formatTooltipValue} from './formatTooltipValue';
 import {formatYAxisValue} from './formatYAxisValue';
@@ -32,7 +37,9 @@ export interface TimeSeriesWidgetVisualizationProps {
   timeseries: TimeseriesData[];
   aliases?: Aliases;
   dataCompletenessDelay?: number;
+  onTimeseriesSelectionChange?: (TimeseriesSelection) => void;
   releases?: Release[];
+  timeseriesSelection?: TimeseriesSelection;
 }
 
 export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizationProps) {
@@ -195,9 +202,13 @@ export function TimeSeriesWidgetVisualization(props: TimeSeriesWidgetVisualizati
               formatter(name: string) {
                 return props.aliases?.[name] ?? formatSeriesName(name);
               },
+              selected: props.timeseriesSelection,
             }
           : undefined
       }
+      onLegendSelectChanged={event => {
+        props?.onTimeseriesSelectionChange?.(event.selected);
+      }}
       tooltip={{
         trigger: 'axis',
         axisPointer: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -36,3 +36,5 @@ export type Release = {
		};

		export type Aliases = Record<string, string>;

		export type TimeseriesSelection = {[key: string]: boolean};