feat(dashboards): Pass LineChart series meta alongside the data (#82047)

Instead of a separate `meta` prop, just pass the meta alongside the
data. This is easier and it matches how the server returns data.

Author: gggritso

static/app/views/dashboards/contexts/widgetSyncContext.stories.tsx

@@ -35,29 +35,13 @@ export default storyBook('WidgetSyncContext', story => {
               <LineChartWidget
                 title="span.duration"
                 timeseries={[sampleDurationTimeSeries]}
-                meta={{
-                  fields: {
-                    'span.duration': 'duration',
-                  },
-                  units: {
-                    'span.duration': 'millisecond',
-                  },
-                }}
               />
             </MediumWidget>
             {visible && (
               <MediumWidget>
                 <LineChartWidget
                   title="span.duration"
                   timeseries={[sampleThroughputTimeSeries]}
-                  meta={{
-                    fields: {
-                      'spm()': 'rate',
-                    },
-                    units: {
-                      'spm()': '1/minute',
-                    },
-                  }}
                 />
               </MediumWidget>
             )}

static/app/views/dashboards/widgets/common/types.tsx

@@ -17,6 +17,7 @@ export type TimeseriesData = {
   data: TimeSeriesItem[];
   field: string;
   color?: string;
+  meta?: Meta;
 };
 
 export type ErrorProp = Error | string;

static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.spec.tsx

@@ -11,14 +11,6 @@ describe('LineChartWidget', () => {
           title="eps()"
           description="Number of events per second"
           timeseries={[sampleDurationTimeSeries]}
-          meta={{
-            fields: {
-              'eps()': 'rate',
-            },
-            units: {
-              'eps()': '1/second',
-            },
-          }}
         />
       );
     });

static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.stories.tsx

@@ -26,6 +26,14 @@ const sampleDurationTimeSeries2 = {
       value: datum.value * 0.3 + 30 * Math.random(),
     };
   }),
+  meta: {
+    fields: {
+      'p50(span.duration)': 'duration',
+    },
+    units: {
+      'p50(span.duration)': 'millisecond',
+    },
+  },
 };
 
 export default storyBook(LineChartWidget, story => {
@@ -76,14 +84,6 @@ export default storyBook(LineChartWidget, story => {
             title="eps()"
             description="Number of events per second"
             timeseries={[throughputTimeSeries]}
-            meta={{
-              fields: {
-                'eps()': 'rate',
-              },
-              units: {
-                'eps()': '1/second',
-              },
-            }}
           />
         </SmallSizingWindow>
 
@@ -103,16 +103,6 @@ export default storyBook(LineChartWidget, story => {
                 shiftTimeserieToNow(durationTimeSeries1),
                 shiftTimeserieToNow(durationTimeSeries2),
               ]}
-              meta={{
-                fields: {
-                  'p99(span.duration)': 'duration',
-                  'p50(span.duration)': 'duration',
-                },
-                units: {
-                  'p99(span.duration)': 'millisecond',
-                  'p50(span.duration)': 'millisecond',
-                },
-              }}
             />
           </MediumWidget>
         </SideBySide>
@@ -172,17 +162,17 @@ export default storyBook(LineChartWidget, story => {
               {
                 ...sampleThroughputTimeSeries,
                 field: 'error_rate()',
+                meta: {
+                  fields: {
+                    'error_rate()': 'rate',
+                  },
+                  units: {
+                    'error_rate()': '1/second',
+                  },
+                },
                 color: theme.error,
               } as unknown as TimeseriesData,
             ]}
-            meta={{
-              fields: {
-                'error_rate()': 'rate',
-              },
-              units: {
-                'error_rate()': '1/second',
-              },
-            }}
           />
         </MediumWidget>
       </Fragment>
@@ -216,17 +206,17 @@ export default storyBook(LineChartWidget, story => {
               {
                 ...sampleThroughputTimeSeries,
                 field: 'error_rate()',
+                meta: {
+                  fields: {
+                    'error_rate()': 'rate',
+                  },
+                  units: {
+                    'error_rate()': '1/second',
+                  },
+                },
               } as unknown as TimeseriesData,
             ]}
             releases={releases}
-            meta={{
-              fields: {
-                'error_rate()': 'rate',
-              },
-              units: {
-                'error_rate()': '1/second',
-              },
-            }}
           />
         </MediumWidget>
       </Fragment>

static/app/views/dashboards/widgets/lineChartWidget/lineChartWidget.tsx

@@ -60,7 +60,6 @@ export function LineChartWidget(props: LineChartWidgetProps) {
           <LineChartWidgetVisualization
             timeseries={timeseries}
             releases={props.releases}
-            meta={props.meta}
             dataCompletenessDelay={props.dataCompletenessDelay}
           />
         </LineChartWrapper>

static/app/views/dashboards/widgets/lineChartWidget/lineChartWidgetVisualization.tsx

@@ -22,14 +22,13 @@ import {useWidgetSyncContext} from '../../contexts/widgetSyncContext';
 import {formatTooltipValue} from '../common/formatTooltipValue';
 import {formatYAxisValue} from '../common/formatYAxisValue';
 import {ReleaseSeries} from '../common/releaseSeries';
-import type {Meta, Release, TimeseriesData} from '../common/types';
+import type {Release, TimeseriesData} from '../common/types';
 
 import {splitSeriesIntoCompleteAndIncomplete} from './splitSeriesIntoCompleteAndIncomplete';
 
 export interface LineChartWidgetVisualizationProps {
   timeseries: TimeseriesData[];
   dataCompletenessDelay?: number;
-  meta?: Meta;
   releases?: Release[];
 }
 
@@ -39,7 +38,6 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
 
   const pageFilters = usePageFilters();
   const {start, end, period, utc} = pageFilters.selection.datetime;
-  const {meta} = props;
 
   const dataCompletenessDelay = props.dataCompletenessDelay ?? 0;
 
@@ -95,8 +93,8 @@ export function LineChartWidgetVisualization(props: LineChartWidgetVisualization
 
   // TODO: Raise error if attempting to plot series of different types or units
   const firstSeriesField = firstSeries?.field;
-  const type = meta?.fields?.[firstSeriesField] ?? 'number';
-  const unit = meta?.units?.[firstSeriesField] ?? undefined;
+  const type = firstSeries?.meta?.fields?.[firstSeriesField] ?? 'number';
+  const unit = firstSeries?.meta?.units?.[firstSeriesField] ?? undefined;
 
   const formatter: TooltipFormatterCallback<TopLevelFormatterParams> = (
     params,

static/app/views/dashboards/widgets/lineChartWidget/sampleDurationTimeSeries.json

@@ -1,5 +1,13 @@
 {
   "field": "p99(span.duration)",
+  "meta": {
+    "fields": {
+      "p99(span.duration)": "duration"
+    },
+    "units": {
+      "p99(span.duration)": "millisecond"
+    }
+  },
   "data": [
     {
       "value": 163.26759544018776,

static/app/views/dashboards/widgets/lineChartWidget/sampleThroughputTimeSeries.json

@@ -1,5 +1,13 @@
 {
   "field": "eps()",
+  "meta": {
+    "fields": {
+      "eps()": "rate"
+    },
+    "units": {
+      "eps()": "1/second"
+    }
+  },
   "data": [
     {
       "value": 7456.966666666666,