Update elastic-charts to v41.0.1

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 - Fixed a `EuiDataGrid` sizing bug which didn't account for a horizontal scrollbar ([#5478](https://github.com/elastic/eui/pull/5478))
 
+**Breaking changes**
+
+- Upgraded to `@elastic/charts@^41.0.0` which removed partition config in favor of inclusion in Charts theme config ([#5492](https://github.com/elastic/eui/pull/5492))
+
 ## [`43.1.1`](https://github.com/elastic/eui/tree/v43.1.1)
 
 **Bug fixes**

package.json

@@ -110,7 +110,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^38.1.1",
+    "@elastic/charts": "^41.0.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.0.0",

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../components';
-import { Chart, Partition, Settings } from '@elastic/charts';
+import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -20,7 +20,6 @@ export const AccessibilitySunburst = () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const euiPartitionConfig = euiChartTheme.partition;
   const { vizColors } = euiChartTheme.theme.colors;
 
   const data = [
@@ -50,12 +49,14 @@ export const AccessibilitySunburst = () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
+          theme={euiChartTheme.theme}
           ariaLabelledBy={id}
           ariaDescription="There is a great variety of reported favorite fruit"
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
         />
         <Partition
           data={data}
+          layout={PartitionLayout.sunburst}
           valueAccessor={({ count }) => count}
           layers={[
             {
@@ -66,11 +67,7 @@ export const AccessibilitySunburst = () => {
               },
             },
           ]}
-          config={{
-            ...euiPartitionConfig,
-            clockwiseSectors: false,
-            partitionLayout: 'sunburst',
-          }}
+          clockwiseSectors={false}
         />
       </Chart>
     </>
@@ -82,13 +79,15 @@ export const AccessibilitySunburst = () => {
       <EuiSpacer />
       <Chart size={{ height: 200 }}>
         <Settings
+          theme={euiChartTheme.theme}
           ariaLabelledBy={id}
           ariaDescription="There is a great variety of reported favorite fruit"
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
         />
         <Partition
           data={data}
           valueAccessor={({ count }) => count}
+          layout={PartitionLayout.sunburst}
           layers={[
             {
               groupByRollup: ({ fruit }) => fruit,
@@ -98,14 +97,7 @@ export const AccessibilitySunburst = () => {
               },
             },
           ]}
-          config={{
-            ...euiPartitionConfig,
-            ...(isDarkTheme
-              ? EUI_CHARTS_THEME_DARK.partition
-              : EUI_CHARTS_THEME_LIGHT.partition),
-            clockwiseSectors: false,
-            partitionLayout: 'sunburst',
-          }}
+          clockwiseSectors={false}
         />
       </Chart>
     </>

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

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { ThemeContext } from '../../components';
-import { Chart, Partition, Settings } from '@elastic/charts';
+import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -27,7 +27,6 @@ export default () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const euiPartitionConfig = euiChartTheme.partition;
 
   return (
     <div>
@@ -38,7 +37,7 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
-            <Settings ariaLabelledBy={exampleOne} />
+            <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleOne} />
             <Partition
               id="pieByPR"
               data={[
@@ -51,6 +50,7 @@ export default () => {
                   count: 319,
                 },
               ]}
+              layout={PartitionLayout.sunburst}
               valueAccessor={(d) => d.count}
               layers={[
                 {
@@ -61,10 +61,7 @@ export default () => {
                   },
                 },
               ]}
-              config={{
-                ...euiPartitionConfig,
-                clockwiseSectors: false,
-              }}
+              clockwiseSectors={false}
             />
           </Chart>
         </EuiFlexItem>
@@ -74,7 +71,7 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
-            <Settings ariaLabelledBy={exampleTwo} />
+            <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleTwo} />
             <Partition
               id="donutByLanguage"
               data={[
@@ -91,6 +88,7 @@ export default () => {
                   percent: 8.7,
                 },
               ]}
+              layout={PartitionLayout.sunburst}
               valueAccessor={(d) => Number(d.percent)}
               valueFormatter={() => ''}
               layers={[
@@ -102,11 +100,8 @@ export default () => {
                   },
                 },
               ]}
-              config={{
-                ...euiPartitionConfig,
-                emptySizeRatio: 0.4,
-                clockwiseSectors: false,
-              }}
+              emptySizeRatio={0.4}
+              clockwiseSectors={false}
             />
           </Chart>
         </EuiFlexItem>

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

@@ -13,8 +13,6 @@ import {
   EuiLink,
   EuiIconTip,
   EuiToolTip,
-  EuiCallOut,
-  EuiCode,
   EuiImage,
 } from '../../../../src/components';
 
@@ -197,40 +195,15 @@ export const ElasticChartsPieExample = {
             />
             .
           </p>
-          <EuiCallOut
-            color="warning"
-            title={
-              <>
-                Elastic Charts&apos;{' '}
-                <EuiLink href="https://github.com/elastic/elastic-charts/issues/518">
-                  partition charts do not currently support theming
-                </EuiLink>{' '}
-                through the <EuiCode>{'<Settings />'}</EuiCode> component.
-              </>
-            }
-          >
-            <p>
-              {' '}
-              EUI provides a separate key for use with
-              <EuiCode language="ts">
-                {'Partition.config={{...EUI_CHARTS_THEME_LIGHT.partition}}'}
-              </EuiCode>
-              . The chart colors also need to be passed a different way via{' '}
-              <EuiCode language="ts">
-                {'Partition.layers.shape.fillColor'}
-              </EuiCode>
-              . See the snippet for full details.
-            </p>
-          </EuiCallOut>
         </>
       ),
       demo: <PieChart />,
       snippet: `import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 
 const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIGHT;
-const euiPartitionConfig = euiChartTheme.partition;
 
-<Chart size={{height: 200}}>
+<Chart size={{ height: 200 }}>
+  <Settings theme={euiChartTheme.theme} />
   <Partition
     data={[
       {
@@ -248,11 +221,8 @@ const euiPartitionConfig = euiChartTheme.partition;
         },
       },
     ]}
-    config={{
-      ...euiPartitionConfig,
-      emptySizeRatio: 0.4, // To create a donut chart
-      clockwiseSectors: false, // For correct slice order
-    }}
+    emptySizeRatio={0.4} // To create a donut chart
+    clockwiseSectors={false} // For correct slice order
   />
 </Chart>`,
     },

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
 import React, { Fragment, useState, useContext } from 'react';
-import { Chart, Partition, Settings } from '@elastic/charts';
+import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
 import { ThemeContext } from '../../components';
 
 import {
@@ -34,7 +34,6 @@ export default () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const euiPartitionConfig = euiChartTheme.partition;
 
   const sliceOrderRadiosIdPrefix = 'colorType';
   const sliceOrderRadios = [
@@ -71,7 +70,7 @@ export default () => {
     clockwiseSectors: false,
   });
   const [sliceOrderConfigText, setSliceOrderConfigText] = useState(
-    'clockwiseSectors: false,'
+    'clockwiseSectors={false}'
   );
 
   const [pieTypeIdSelected, setPieTypeIdSelected] = useState(
@@ -93,10 +92,10 @@ export default () => {
       .label;
     if (sliceOrderLabel.includes('Counter')) {
       setSliceOrderConfig({ clockwiseSectors: false });
-      setSliceOrderConfigText('clockwiseSectors: false,');
+      setSliceOrderConfigText('clockwiseSectors={false}');
     } else if (sliceOrderLabel.includes('Clockwise')) {
       setSliceOrderConfig({ specialFirstInnermostSector: false });
-      setSliceOrderConfigText('specialFirstInnermostSector: false,');
+      setSliceOrderConfigText('specialFirstInnermostSector={false}');
     } else if (sliceOrderLabel.includes('natural')) {
       setSliceOrderConfig({});
       setSliceOrderConfigText('');
@@ -140,15 +139,26 @@ export default () => {
     }
   };
 
+  const themeOverrides = {
+    partition: {
+      emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4,
+    },
+  };
+
   return (
     <Fragment>
       {customTitle}
       <div style={{ position: 'relative' }}>
         <Chart size={{ height: 200 }}>
-          <Settings showLegend={showLegend} showLegendExtra />
+          <Settings
+            theme={[themeOverrides, euiChartTheme.theme]}
+            showLegend={showLegend}
+            showLegendExtra
+          />
           <Partition
             id="donutByLanguage"
             data={pieData()}
+            layout={PartitionLayout.sunburst}
             valueAccessor={(d) => Number(d.percent)}
             valueFormatter={showValues ? undefined : () => ''}
             valueGetter={showValues ? 'percent' : undefined}
@@ -161,11 +171,7 @@ export default () => {
                 },
               },
             ]}
-            config={{
-              ...euiPartitionConfig,
-              emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4,
-              ...sliceOrderConfig,
-            }}
+            {...sliceOrderConfig}
           />
         </Chart>
       </div>
@@ -273,8 +279,10 @@ export default () => {
           textToCopy={`<EuiTitle size="xxs">
   <h4>Distribution of the top ${numSlices} browsers from 2019</h4>
 </EuiTitle>
-<Chart size={{height: 200}}>
-  ${showLegend ? '<Settings showLegend />' : ''}
+<Chart size={{ height: 200 }}>
+  <Settings${showLegend ? '\nshowLegend' : ''}
+    theme={[themeOverrides, euiChartTheme.theme]}
+  />
   <Partition
     id={chartID}
     data={[
@@ -303,11 +311,8 @@ export default () => {
         },
       },
     ]}
-    config={{
-      ...euiPartitionConfig,
-      ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio: 0.4,' : ''}
-      ${sliceOrderConfigText}
-    }}
+    ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio={0.4}' : ''}
+    ${sliceOrderConfigText}
   />
 </Chart>`}
         >