ref(ui): Use exported chart props with some charts (#33235)

static/app/components/charts/heatMapChart.tsx

@@ -10,13 +10,13 @@ import BaseChart from './baseChart';
 
 type ChartProps = Omit<React.ComponentProps<typeof BaseChart>, 'css'>;
 
-export type LineChartSeries = Series &
+export type HeatmapSeries = Series &
   Omit<HeatmapSeriesOption, 'data' | 'name'> & {
     dataArray?: HeatmapSeriesOption['data'];
   };
 
 type Props = Omit<ChartProps, 'series'> & {
-  series: LineChartSeries[];
+  series: HeatmapSeries[];
   visualMaps: VisualMapComponentOption[];
   seriesOptions?: HeatmapSeriesOption;
 };

static/app/components/charts/miniBarChart.tsx

@@ -189,9 +189,9 @@ function MiniBarChart({
         },
       };
 
-  const chartOptions = {
+  const chartOptions: Omit<BarChartProps, 'series'> = {
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       hideDelay,
       valueFormatter: tooltipFormatter
         ? (value: number) => tooltipFormatter(value)

static/app/views/performance/transactionSummary/transactionAnomalies/anomalyChart.tsx

@@ -2,7 +2,7 @@ import {InjectedRouter, withRouter} from 'react-router';
 import {Location} from 'history';
 
 import ChartZoom from 'sentry/components/charts/chartZoom';
-import {LineChart} from 'sentry/components/charts/lineChart';
+import {LineChart, LineChartProps} from 'sentry/components/charts/lineChart';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
 import {t} from 'sentry/locale';
 import {DateString} from 'sentry/types';
@@ -35,19 +35,18 @@ const _AnomalyChart = (props: Props) => {
   const end = propsEnd ? getUtcToLocalDateObject(propsEnd) : null;
   const {utc} = normalizeDateTimeParams(location.query);
 
-  const legend = {
-    right: 10,
-    top: 5,
-    data: [t('High Confidence'), t('Low Confidence')],
-  };
-
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
+    legend: {
+      right: 10,
+      top: 5,
+      data: [t('High Confidence'), t('Low Confidence')],
+    },
     seriesOptions: {
       showSymbol: false,
     },
     height,
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       valueFormatter: tooltipFormatter,
     },
     xAxis: undefined,
@@ -68,7 +67,7 @@ const _AnomalyChart = (props: Props) => {
       utc={utc === 'true'}
     >
       {zoomRenderProps => (
-        <LineChart {...zoomRenderProps} series={data} legend={legend} {...chartOptions} />
+        <LineChart {...zoomRenderProps} series={data} {...chartOptions} />
       )}
     </ChartZoom>
   );

static/app/views/performance/transactionSummary/transactionOverview/sidebarCharts.tsx

@@ -53,7 +53,7 @@ type ContainerProps = WithRouterProps & {
 
 type Props = Pick<ContainerProps, 'organization' | 'isLoading' | 'error' | 'totals'> & {
   chartData: {
-    chartOptions: Record<string, any>;
+    chartOptions: Omit<LineChartProps, 'series'>;
     errored: boolean;
     loading: boolean;
     reloading: boolean;
@@ -252,7 +252,7 @@ function SidebarChartsContainer({
     },
   };
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     height: 480,
     grid: [
       {
@@ -280,7 +280,7 @@ function SidebarChartsContainer({
     },
     xAxes: Array.from(new Array(3)).map((_i, index) => ({
       gridIndex: index,
-      type: 'time' as const,
+      type: 'time',
       show: false,
     })),
     yAxes: [
@@ -289,7 +289,7 @@ function SidebarChartsContainer({
         gridIndex: 0,
         interval: 0.2,
         axisLabel: {
-          formatter: (value: number) => formatFloat(value, 1),
+          formatter: (value: number) => `${formatFloat(value, 1)}`,
           color: theme.chartLabel,
         },
         ...axisLineConfig,
@@ -320,9 +320,9 @@ function SidebarChartsContainer({
     utc,
     isGroupedByDate: true,
     showTimeInTooltip: true,
-    colors: [colors[0], colors[1], colors[2]] as string[],
+    colors: [colors[0], colors[1], colors[2]],
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       truncate: 80,
       valueFormatter: tooltipFormatter,
       nameFormatter(value: string) {

static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx

@@ -58,7 +58,7 @@ function Content({
     );
   }
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     grid: {
       left: '10px',
       right: '10px',
@@ -69,7 +69,7 @@ function Content({
       showSymbol: false,
     },
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       valueFormatter: (value: number | null) => tooltipFormatter(value, 'p50()'),
     },
     xAxis: timeFrame

static/app/views/performance/transactionSummary/transactionOverview/vitalsChart/content.tsx

@@ -56,7 +56,7 @@ function Content({
     );
   }
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     grid: {
       left: '10px',
       right: '10px',
@@ -67,7 +67,7 @@ function Content({
       showSymbol: false,
     },
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       valueFormatter: tooltipFormatter,
     },
     xAxis: timeFrame

static/app/views/performance/trends/chart.tsx

@@ -313,7 +313,7 @@ export function Chart({
   const yDiff = yMax - yMin;
   const yMargin = yDiff * 0.1;
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     tooltip: {
       valueFormatter: (value, seriesName) => {
         return tooltipFormatter(value, seriesName);

static/app/views/performance/vitalDetail/utils.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import {Location, Query} from 'history';
 
 import MarkLine from 'sentry/components/charts/components/markLine';
+import {LineChartProps} from 'sentry/components/charts/lineChart';
 import {getSeriesSelection} from 'sentry/components/charts/utils';
 import {IconHappy, IconMeh, IconSad} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -194,7 +195,7 @@ export function getVitalChartDefinitions({
     selected: getSeriesSelection(location),
   };
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     grid: {
       left: '5px',
       right: '10px',
@@ -205,7 +206,7 @@ export function getVitalChartDefinitions({
       showSymbol: false,
     },
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       valueFormatter: (value: number, seriesName?: string) =>
         tooltipFormatter(value, vital === WebVital.CLS ? seriesName : yAxis),
     },

static/app/views/performance/vitalDetail/vitalChart.tsx

@@ -140,7 +140,7 @@ function VitalChart({
 
                 const seriesMax = getMaxOfSeries(smoothedSeries);
                 const yAxisMax = Math.max(seriesMax, vitalPoor);
-                chartOptions.yAxis.max = yAxisMax * 1.1;
+                chartOptions.yAxis!.max = yAxisMax * 1.1;
 
                 return (
                   <ReleaseSeries
@@ -230,13 +230,13 @@ export function _VitalChart(props: _VitalChartProps) {
   }
   const theme = useTheme();
 
-  const chartOptions = {
+  const chartOptions: Omit<LineChartProps, 'series'> = {
     grid,
     seriesOptions: {
       showSymbol: false,
     },
     tooltip: {
-      trigger: 'axis' as const,
+      trigger: 'axis',
       valueFormatter: (value: number, seriesName?: string) => {
         return tooltipFormatter(
           value,

static/app/views/performance/vitalDetail/vitalChartMetrics.tsx

@@ -125,7 +125,7 @@ function VitalChartMetrics({
 
             const seriesMax = getMaxOfSeries(smoothedSeries);
             const yAxisMax = Math.max(seriesMax, vitalPoor);
-            chartOptions.yAxis.max = yAxisMax * 1.1;
+            chartOptions.yAxis!.max = yAxisMax * 1.1;
 
             return (
               <ReleaseSeries