ref(charts): Convert charts from class to func (#32566)

docs-ui/stories/components/areaChart.stories.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import AreaChart from 'sentry/components/charts/areaChart';
+import {AreaChart} from 'sentry/components/charts/areaChart';
 import space from 'sentry/styles/space';
 
 export default {

docs-ui/stories/components/barChart.stories.js

@@ -1,4 +1,4 @@
-import BarChart from 'sentry/components/charts/barChart';
+import {BarChart} from 'sentry/components/charts/barChart';
 
 export default {
   title: 'Components/Data Visualization/Charts/Bar Chart',

docs-ui/stories/components/chart-utilities.stories.js

@@ -1,7 +1,7 @@
 import {action} from '@storybook/addon-actions';
 
 import ChartZoom from 'sentry/components/charts/chartZoom';
-import LineChart from 'sentry/components/charts/lineChart';
+import {LineChart} from 'sentry/components/charts/lineChart';
 
 export default {
   title: 'Components/Data Visualization/Charts/Utilities/Chart Zoom',

docs-ui/stories/components/charts.stories.js

@@ -1,5 +1,5 @@
-import BarChart from 'sentry/components/charts/barChart';
-import LineChart from 'sentry/components/charts/lineChart';
+import {BarChart} from 'sentry/components/charts/barChart';
+import {LineChart} from 'sentry/components/charts/lineChart';
 
 export default {
   title: 'Components/Data Visualization/Charts/Playground',

docs-ui/stories/components/lineChart.stories.js

@@ -1,4 +1,4 @@
-import LineChart from 'sentry/components/charts/lineChart';
+import {LineChart} from 'sentry/components/charts/lineChart';
 
 export default {
   title: 'Components/Data Visualization/Charts/Line Chart',

static/app/components/charts/areaChart.tsx

@@ -10,42 +10,37 @@ type ChartProps = Omit<React.ComponentProps<typeof BaseChart>, 'css'>;
 
 export type AreaChartSeries = Series & Omit<LineSeriesOption, 'data' | 'name'>;
 
-type Props = Omit<ChartProps, 'series'> & {
+export interface AreaChartProps extends Omit<ChartProps, 'series'> {
   series: AreaChartSeries[];
   stacked?: boolean;
-};
-
-class AreaChart extends React.Component<Props> {
-  render() {
-    const {series, stacked, colors, ...props} = this.props;
-
-    return (
-      <BaseChart
-        {...props}
-        colors={colors}
-        series={series.map(({seriesName, data, ...otherSeriesProps}, i) =>
-          AreaSeries({
-            stack: stacked ? 'area' : undefined,
-            name: seriesName,
-            data: data.map(({name, value}) => [name, value]),
-            lineStyle: {
-              color: colors?.[i],
-              opacity: 1,
-              width: 0.4,
-            },
-            areaStyle: {
-              color: colors?.[i],
-              opacity: 1.0,
-            },
-            animation: false,
-            animationThreshold: 1,
-            animationDuration: 0,
-            ...otherSeriesProps,
-          })
-        )}
-      />
-    );
-  }
 }
 
-export default AreaChart;
+export function AreaChart({series, stacked, colors, ...props}: AreaChartProps) {
+  return (
+    <BaseChart
+      {...props}
+      data-test-id="area-chart"
+      colors={colors}
+      series={series.map(({seriesName, data, ...otherSeriesProps}, i) =>
+        AreaSeries({
+          stack: stacked ? 'area' : undefined,
+          name: seriesName,
+          data: data.map(({name, value}) => [name, value]),
+          lineStyle: {
+            color: colors?.[i],
+            opacity: 1,
+            width: 0.4,
+          },
+          areaStyle: {
+            color: colors?.[i],
+            opacity: 1.0,
+          },
+          animation: false,
+          animationThreshold: 1,
+          animationDuration: 0,
+          ...otherSeriesProps,
+        })
+      )}
+    />
+  );
+}

static/app/components/charts/barChart.tsx

@@ -10,37 +10,31 @@ type ChartProps = Omit<React.ComponentProps<typeof BaseChart>, 'css'>;
 
 export type BarChartSeries = Series & Omit<BarSeriesOption, 'data' | 'name'>;
 
-type Props = Omit<ChartProps, 'series'> & {
+export interface BarChartProps extends Omit<ChartProps, 'series'> {
   series: BarChartSeries[];
   animation?: boolean;
   stacked?: boolean;
-};
-
-class BarChart extends React.Component<Props> {
-  render() {
-    const {series, stacked, xAxis, animation, ...props} = this.props;
-
-    return (
-      <BaseChart
-        {...props}
-        xAxis={xAxis !== null ? {...(xAxis || {}), boundaryGap: true} : null}
-        series={series.map(({seriesName, data, ...options}) =>
-          BarSeries({
-            name: seriesName,
-            stack: stacked ? 'stack1' : undefined,
-            data: data.map(({value, name, itemStyle}) => {
-              if (itemStyle === undefined) {
-                return [name, value];
-              }
-              return {value: [name, value], itemStyle};
-            }),
-            animation,
-            ...options,
-          })
-        )}
-      />
-    );
-  }
 }
 
-export default BarChart;
+export function BarChart({series, stacked, xAxis, animation, ...props}: BarChartProps) {
+  return (
+    <BaseChart
+      {...props}
+      xAxis={xAxis !== null ? {...(xAxis || {}), boundaryGap: true} : null}
+      series={series.map(({seriesName, data, ...options}) =>
+        BarSeries({
+          name: seriesName,
+          stack: stacked ? 'stack1' : undefined,
+          data: data.map(({value, name, itemStyle}) => {
+            if (itemStyle === undefined) {
+              return [name, value];
+            }
+            return {value: [name, value], itemStyle};
+          }),
+          animation,
+          ...options,
+        })
+      )}
+    />
+  );
+}

static/app/components/charts/baseChart.tsx

@@ -129,6 +129,7 @@ type Props = {
    * provided with the current theme
    */
   colors?: string[] | ((theme: Theme) => string[]);
+  'data-test-id'?: string;
   /**
    * DataZoom (allows for zooming of chart)
    */
@@ -275,6 +276,7 @@ type Props = {
    * Additionally a `truncate` option
    */
   xAxis?: (XAXisComponentOption & Truncateable) | null;
+
   /**
    * Pass `true` to have 2 y-axes with default properties. Can pass an array of
    * objects to customize yAxis properties
@@ -338,6 +340,7 @@ function BaseChartUnwrapped({
   transformSinglePointToBar = false,
   transformSinglePointToLine = false,
   onChartReady = () => {},
+  'data-test-id': dataTestId,
 }: Props) {
   const theme = useTheme();
 
@@ -520,7 +523,7 @@ function BaseChartUnwrapped({
   );
 
   return (
-    <ChartContainer autoHeightResize={autoHeightResize}>
+    <ChartContainer autoHeightResize={autoHeightResize} data-test-id={dataTestId}>
       <ReactEchartsCore
         ref={forwardedRef}
         echarts={echarts}

static/app/components/charts/eventsChart.tsx

@@ -11,11 +11,11 @@ import {Query} from 'history';
 import isEqual from 'lodash/isEqual';
 
 import {Client} from 'sentry/api';
-import AreaChart from 'sentry/components/charts/areaChart';
-import BarChart from 'sentry/components/charts/barChart';
+import {AreaChart, AreaChartProps} from 'sentry/components/charts/areaChart';
+import {BarChart, BarChartProps} from 'sentry/components/charts/barChart';
 import ChartZoom, {ZoomRenderProps} from 'sentry/components/charts/chartZoom';
 import ErrorPanel from 'sentry/components/charts/errorPanel';
-import LineChart from 'sentry/components/charts/lineChart';
+import {LineChart, LineChartProps} from 'sentry/components/charts/lineChart';
 import ReleaseSeries from 'sentry/components/charts/releaseSeries';
 import TransitionChart from 'sentry/components/charts/transitionChart';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
@@ -24,7 +24,7 @@ import {
   processTableResults,
   RELEASE_LINES_THRESHOLD,
 } from 'sentry/components/charts/utils';
-import WorldMapChart from 'sentry/components/charts/worldMapChart';
+import {WorldMapChart, WorldMapChartProps} from 'sentry/components/charts/worldMapChart';
 import {IconWarning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {DateString, OrganizationSummary} from 'sentry/types';
@@ -44,10 +44,10 @@ import EventsGeoRequest from './eventsGeoRequest';
 import EventsRequest from './eventsRequest';
 
 type ChartComponent =
-  | React.ComponentType<BarChart['props']>
-  | React.ComponentType<AreaChart['props']>
-  | React.ComponentType<React.ComponentProps<typeof LineChart>>
-  | React.ComponentType<React.ComponentProps<typeof WorldMapChart>>;
+  | React.ComponentType<BarChartProps>
+  | React.ComponentType<AreaChartProps>
+  | React.ComponentType<LineChartProps>
+  | React.ComponentType<WorldMapChartProps>;
 
 type ChartProps = {
   currentSeriesNames: string[];
@@ -129,6 +129,7 @@ class Chart extends React.Component<ChartProps, State> {
 
   getChartComponent(): ChartComponent {
     const {showDaily, timeseriesData, yAxis, chartComponent} = this.props;
+
     if (defined(chartComponent)) {
       return chartComponent;
     }
@@ -136,6 +137,7 @@ class Chart extends React.Component<ChartProps, State> {
     if (showDaily) {
       return BarChart;
     }
+
     if (timeseriesData.length > 1) {
       switch (aggregateMultiPlotType(yAxis)) {
         case 'line':
@@ -146,6 +148,7 @@ class Chart extends React.Component<ChartProps, State> {
           throw new Error(`Unknown multi plot type for ${yAxis}`);
       }
     }
+
     return AreaChart;
   }
 
@@ -168,18 +171,6 @@ class Chart extends React.Component<ChartProps, State> {
     );
   };
 
-  renderWorldMap() {
-    const {tableData, fromDiscover} = this.props;
-    const {data, title} = processTableResults(tableData);
-    const tableSeries = [
-      {
-        seriesName: title,
-        data,
-      },
-    ];
-    return <WorldMapChart series={tableSeries} fromDiscover={fromDiscover} />;
-  }
-
   render() {
     const {
       theme,
@@ -201,18 +192,28 @@ class Chart extends React.Component<ChartProps, State> {
       height,
       timeframe,
       topEvents,
+      tableData,
+      fromDiscover,
       ...props
     } = this.props;
     const {seriesSelection} = this.state;
 
     let Component = this.getChartComponent();
 
-    if (typeof Component === typeof WorldMapChart) {
-      return this.renderWorldMap();
+    if (Component === WorldMapChart) {
+      const {data, title} = processTableResults(tableData);
+      const tableSeries = [
+        {
+          seriesName: title,
+          data,
+        },
+      ];
+      return <WorldMapChart series={tableSeries} fromDiscover={fromDiscover} />;
     }
+
     Component = Component as Exclude<
       ChartComponent,
-      React.ComponentType<React.ComponentProps<typeof WorldMapChart>>
+      React.ComponentType<WorldMapChartProps>
     >;
 
     const data = [

static/app/components/charts/lineChart.tsx

@@ -13,12 +13,12 @@ export type LineChartSeries = Series &
     dataArray?: LineSeriesOption['data'];
   };
 
-type Props = Omit<ChartProps, 'series'> & {
+export interface LineChartProps extends Omit<ChartProps, 'series'> {
   series: LineChartSeries[];
   seriesOptions?: LineSeriesOption;
-};
+}
 
-function LineChart({series, seriesOptions, ...props}: Props) {
+export function LineChart({series, seriesOptions, ...props}: LineChartProps) {
   return (
     <BaseChart
       {...props}
@@ -36,5 +36,3 @@ function LineChart({series, seriesOptions, ...props}: Props) {
     />
   );
 }
-
-export default LineChart;