[Docs] Convert all Elastic Charts docs pages to Typescript

src-docs/src/views/elastic_charts/accessibility_bullet.js → src-docs/src/views/elastic_charts/accessibility_bullet.tsx

@@ -34,14 +34,14 @@ export default () => {
     spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse();
   }
 
-  const colorMap = {
-    '0': spectrum[0],
-    '100': spectrum[1],
-    '125': spectrum[2],
-    '150': spectrum[3],
-    '250': spectrum[4],
+  const colorMap: Record<number, string> = {
+    0: spectrum[0],
+    100: spectrum[1],
+    125: spectrum[2],
+    150: spectrum[3],
+    250: spectrum[4],
   };
-  const bandFillColor = (x) => colorMap[x];
+  const bandFillColor = (x: number) => colorMap[x];
   return (
     <>
       <EuiTitle size="xs" className="eui-textCenter">

src-docs/src/views/elastic_charts/accessibility_example.js

@@ -209,7 +209,7 @@ export const ElasticChartsAccessibilityExample = {
 </Chart>`,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: SunburstSource,
         },
       ],
@@ -283,7 +283,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <TextureMultiSeriesChart />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: TextureMultiSeriesChartSource,
         },
       ],
@@ -327,7 +327,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <AccessibilityBullet />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: BulletChartSource,
         },
       ],

src-docs/src/views/elastic_charts/accessibility_sunburst.js → src-docs/src/views/elastic_charts/accessibility_sunburst.tsx

@@ -19,9 +19,10 @@ export default () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const { vizColors } = euiChartTheme.theme.colors;
+  const { vizColors } = euiChartTheme.theme.colors!;
 
-  const data = [
+  type Data = { fruit: string; count: number };
+  const data: Data[] = [
     { fruit: 'Apple', count: 100 },
     { fruit: 'Banana', count: 50 },
     { fruit: 'Tomato', count: 25 },
@@ -54,15 +55,16 @@ export default () => {
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
         />
         <Partition
+          id="partitionId"
           data={data}
           layout={PartitionLayout.sunburst}
           valueAccessor={({ count }) => count}
           layers={[
             {
-              groupByRollup: ({ fruit }) => fruit,
+              groupByRollup: ({ fruit }: Data) => fruit,
               shape: {
-                fillColor: (key, sortIndex) =>
-                  vizColors[sortIndex % vizColors.length],
+                fillColor: (_, sortIndex) =>
+                  vizColors![sortIndex % vizColors!.length],
               },
             },
           ]}

src-docs/src/views/elastic_charts/category_chart.js → src-docs/src/views/elastic_charts/category_chart.tsx

@@ -27,6 +27,7 @@ import {
   ChartTypeCard,
   MultiChartCard,
   CHART_COMPONENTS,
+  type ChartType,
   ChartCard,
 } from './shared';
 
@@ -38,33 +39,8 @@ export default () => {
   const [rotated, setRotated] = useState(true);
   const [ordered, setOrdered] = useState(true);
   const [formatted, setFormatted] = useState(false);
-  const [chartType, setChartType] = useState('BarSeries');
+  const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
-  const onMultiChange = (multiObject) => {
-    const { multi, stacked } = multiObject;
-    setMulti(multi);
-    setStacked(stacked);
-  };
-
-  const onRotatedChange = (e) => {
-    setRotated(e.target.checked);
-  };
-
-  const onOrderedChange = (e) => {
-    setOrdered(e.target.checked);
-  };
-
-  const onFormatChange = (e) => {
-    setFormatted(e.target.checked);
-  };
-
-  const onChartTypeChange = (chartType) => {
-    setChartType(chartType);
-  };
-
-  const onValueLabelsChange = (e) => {
-    setValueLabels(e.target.checked);
-  };
 
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
@@ -83,23 +59,23 @@ export default () => {
     ...theme,
     barSeriesStyle: {
       displayValue: {
-        ...theme.barSeriesStyle.displayValue,
+        ...theme.barSeriesStyle?.displayValue,
         offsetX: rotated ? 4 : 0,
         offsetY: rotated ? 0 : -4,
         ...(multi && stacked
           ? {
               alignment: {
                 vertical: 'middle',
                 horizontal: 'center',
-              },
+              } as const,
             }
           : {
               alignment: rotated
                 ? {
-                    vertical: 'middle',
+                    vertical: 'middle' as const,
                   }
                 : {
-                    horizontal: 'center',
+                    horizontal: 'center' as const,
                   },
             }),
       },
@@ -169,7 +145,7 @@ const customTheme = {
   <Axis
     id="bottom-axis"
     position={${rotated ? '"left"' : '"bottom"'}}
-    showGridLines={false}
+    gridLine={{ visible: false }}
   />
   <Axis
     id="left-axis"
@@ -178,7 +154,8 @@ const customTheme = {
   />
 </Chart>`;
 
-  const removeEmptyLines = (string) => string.replace(/(^[ \t]*\n)/gm, '');
+  const removeEmptyLines = (string: string) =>
+    string.replace(/(^[ \t]*\n)/gm, '');
 
   const textToCopy = valueLabels
     ? `${chartVariablesForValueLabels}
@@ -216,12 +193,12 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
           yAccessors={['count']}
           splitSeriesAccessors={multi ? ['issueType'] : undefined}
           stackAccessors={stacked ? ['issueType'] : undefined}
-          displayValueSettings={valueLabels && displayValueSettings}
+          displayValueSettings={valueLabels ? displayValueSettings : undefined}
         />
         <Axis
           id="bottom-axis"
           position={rotated ? 'left' : 'bottom'}
-          showGridLines={false}
+          gridLine={{ visible: false }}
         />
         <Axis
           id="left-axis"
@@ -250,13 +227,13 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Order by count descending"
               checked={ordered}
-              onChange={onOrderedChange}
+              onChange={(e) => setOrdered(e.target.checked)}
             />
             <EuiSpacer size="s" />
             <EuiSwitch
               label="Rotate 90deg"
               checked={rotated}
-              onChange={onRotatedChange}
+              onChange={(e) => setRotated(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
@@ -271,21 +248,26 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Simulate thousands formatting"
               checked={formatted}
-              onChange={onFormatChange}
+              onChange={(e) => setFormatted(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartTypeCard
+          <ChartTypeCard<{ mixed: false }>
             type="Although we recommend only bar charts, categorical"
-            onChange={onChartTypeChange}
+            onChange={(chartType) => setChartType(chartType)}
             disabled
           />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <MultiChartCard onChange={onMultiChange} />
+          <MultiChartCard
+            onChange={({ multi, stacked }) => {
+              setMulti(multi);
+              setStacked(stacked);
+            }}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
@@ -297,7 +279,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Show value labels"
               checked={valueLabels}
-              onChange={onValueLabelsChange}
+              onChange={(e) => setValueLabels(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>

src-docs/src/views/elastic_charts/goal.js → src-docs/src/views/elastic_charts/goal.tsx

@@ -1,35 +1,34 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Chart, Settings, Goal } from '@elastic/charts';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import {
   htmlIdGenerator,
+  useEuiTheme,
   useIsWithinBreakpoints,
   euiPalettePositive,
 } from '../../../../src/services';
 import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
-import { ThemeContext } from '../../components';
 
 import {
   EUI_CHARTS_THEME_DARK,
   EUI_CHARTS_THEME_LIGHT,
 } from '../../../../src/themes/charts/themes';
 
 export const GoalChart = () => {
+  const { colorMode } = useEuiTheme();
   const id = htmlIdGenerator('goal')();
-  const themeContext = useContext(ThemeContext);
-  const isDarkTheme = themeContext.theme.includes('dark');
+
+  const isDarkTheme = colorMode === 'DARK';
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
-  const euiGoalConfig = euiChartTheme.euiGoalConfig;
-
   const isDesktop = useIsWithinBreakpoints(['l', 'xl']);
   const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot'];
   const bands = [-10, 0, 15, 25, 40];
 
   const spectrum = euiPalettePositive(5);
-  const opacityMapHex = {
+  const opacityMapHex: Record<number, string> = {
     '-10': spectrum[0],
     '0': spectrum[1],
     '15': spectrum[2],
@@ -40,9 +39,9 @@ export const GoalChart = () => {
   const colorMapTheme = bands.reduce((acc, band) => {
     acc[band] = opacityMapHex[band];
     return acc;
-  }, {});
+  }, {} as Record<number, string>);
 
-  const bandFillColor = (x) => colorMapTheme[x];
+  const bandFillColor = (x: number) => colorMapTheme[x];
   return (
     <EuiFlexGrid direction={isDesktop ? 'row' : 'column'} columns={2}>
       <EuiFlexItem>
@@ -55,9 +54,11 @@ export const GoalChart = () => {
             ariaLabelledBy={id}
             ariaDescription="This goal chart has a target of 22."
             ariaUseDefaultSummary={false}
-            theme={euiChartTheme}
+            theme={euiChartTheme.theme}
           />
           <Goal
+            id="goalId"
+            subtype="goal"
             base={-10}
             target={22}
             actual={12}
@@ -70,7 +71,8 @@ export const GoalChart = () => {
             labelMinor="Celsius"
             centralMajor="12"
             centralMinor=""
-            config={{ ...euiGoalConfig, angleStart: Math.PI, angleEnd: 0 }}
+            angleStart={Math.PI}
+            angleEnd={0}
             bandLabels={bandLabels}
           />
         </Chart>

src-docs/src/views/elastic_charts/metric/metric_chart_example.js

@@ -465,9 +465,11 @@ export const MetricChartExample = {
     {
       title: 'No Data',
       text: (
-        <p>
-          Various situations could lead to an uncertain state. We designed two{' '}
-          <strong>empty states</strong> that should cover most of those cases:
+        <>
+          <p>
+            Various situations could lead to an uncertain state. We designed two{' '}
+            <strong>empty states</strong> that should cover most of those cases:
+          </p>
           <ul>
             <li>
               When an applied filter makes the metric uncomputable (missing
@@ -483,7 +485,7 @@ export const MetricChartExample = {
               component won&apos;t be rendered, and an empty box is rendered.
             </li>
           </ul>
-        </p>
+        </>
       ),
       demo: <NoData />,
     },

src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx

@@ -149,7 +149,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 800 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[800, 300]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric id="1" data={DATA} />

src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx

@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 400]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx

@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 600 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[600, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric

src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx

@@ -32,7 +32,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">No Data</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 baseTheme={chartBaseTheme}
@@ -64,7 +63,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">Filtered Out</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 theme={euiChartTheme.theme}

src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx

@@ -26,7 +26,6 @@ export default () => {
   }));
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings theme={euiChartTheme.theme} baseTheme={chartBaseTheme} />
         <Metric