feat(dashboards): Pass AreaChart series meta alongside the data (#82653)

Exactly the same thing as #82047
but for `AreaChartWidget`

Author: gggritso

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

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

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

@@ -66,16 +66,6 @@ export default storyBook(AreaChartWidget, story => {
             title="Duration Breakdown"
             description="Explains what proportion of total duration is taken up by latency vs. span duration"
             timeseries={[latencyTimeSeries, spanDurationTimeSeries]}
-            meta={{
-              fields: {
-                'avg(latency)': 'duration',
-                'avg(span.duration)': 'duration',
-              },
-              units: {
-                'avg(latency)': 'millisecond',
-                'avg(span.duration)': 'millisecond',
-              },
-            }}
           />
         </SmallSizingWindow>
       </Fragment>
@@ -135,16 +125,6 @@ export default storyBook(AreaChartWidget, story => {
 
               {...sampleSpanDurationTimeSeries, color: theme.warning},
             ]}
-            meta={{
-              fields: {
-                'avg(latency)': 'duration',
-                'avg(span.duration)': 'duration',
-              },
-              units: {
-                'avg(latency)': 'millisecond',
-                'avg(span.duration)': 'millisecond',
-              },
-            }}
           />
         </MediumWidget>
       </Fragment>
@@ -175,16 +155,6 @@ export default storyBook(AreaChartWidget, story => {
           <AreaChartWidget
             title="error_rate()"
             timeseries={[sampleLatencyTimeSeries, sampleSpanDurationTimeSeries]}
-            meta={{
-              fields: {
-                'avg(latency)': 'duration',
-                'avg(span.duration)': 'duration',
-              },
-              units: {
-                'avg(latency)': 'millisecond',
-                'avg(span.duration)': 'millisecond',
-              },
-            }}
             releases={releases}
           />
         </MediumWidget>

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

@@ -55,7 +55,6 @@ export function AreaChartWidget(props: AreaChartWidgetProps) {
           <AreaChartWidgetVisualization
             timeseries={timeseries}
             releases={props.releases}
-            meta={props.meta}
           />
         </AreaChartWrapper>
       )}

static/app/views/dashboards/widgets/areaChartWidget/areaChartWidgetVisualization.tsx

@@ -23,11 +23,10 @@ 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';
 
 export interface AreaChartWidgetVisualizationProps {
   timeseries: TimeseriesData[];
-  meta?: Meta;
   releases?: Release[];
 }
 
@@ -37,7 +36,6 @@ export function AreaChartWidgetVisualization(props: AreaChartWidgetVisualization
 
   const pageFilters = usePageFilters();
   const {start, end, period, utc} = pageFilters.selection.datetime;
-  const {meta} = props;
 
   const theme = useTheme();
   const organization = useOrganization();
@@ -69,8 +67,8 @@ export function AreaChartWidgetVisualization(props: AreaChartWidgetVisualization
 
   // 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/areaChartWidget/sampleLatencyTimeSeries.json

@@ -1,5 +1,13 @@
 {
   "field": "avg(latency)",
+  "meta": {
+    "fields": {
+      "avg(latency)": "duration"
+    },
+    "units": {
+      "avg(latency)": "millisecond"
+    }
+  },
   "data": [
     {
       "timestamp": "2024-12-09T22:00:00Z",

static/app/views/dashboards/widgets/areaChartWidget/sampleSpanDurationTimeSeries.json

@@ -1,5 +1,13 @@
 {
   "field": "avg(span.duration)",
+  "meta": {
+    "fields": {
+      "avg(span.duration)": "duration"
+    },
+    "units": {
+      "avg(span.duration)": "millisecond"
+    }
+  },
   "data": [
     {
       "timestamp": "2024-12-09T22:00:00Z",