Upgrade elastic charts v43.1.1

package.json

@@ -103,7 +103,7 @@
     "@elastic/apm-rum": "^5.10.1",
     "@elastic/apm-rum-react": "^1.3.3",
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
-    "@elastic/charts": "40.2.0",
+    "@elastic/charts": "43.0.1",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.0.0",

packages/kbn-test/src/jest/setup/polyfills.js

@@ -18,3 +18,5 @@ if (!global.URL.hasOwnProperty('createObjectURL')) {
 // Will be replaced with a better solution in EUI
 // https://github.com/elastic/eui/issues/3713
 global._isJest = true;
+
+global.ResizeObserver = require('resize-observer-polyfill');

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

@@ -20,6 +20,7 @@ import {
   TooltipProps,
   ESFixedIntervalUnit,
   ESCalendarIntervalUnit,
+  PartialTheme,
 } from '@elastic/charts';
 import type { CustomPaletteState } from '../../../../charts/public';
 import { search } from '../../../../data/public';
@@ -379,62 +380,61 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
       }
     };
 
-    const config: HeatmapSpec['config'] = {
-      grid: {
-        stroke: {
-          width:
-            args.gridConfig.strokeWidth ?? chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? 1,
-          color:
-            args.gridConfig.strokeColor ??
-            chartTheme.axes?.gridLine?.horizontal?.stroke ??
-            '#D3DAE6',
-        },
-        cellHeight: {
-          max: 'fill',
-          min: 1,
+    const themeOverrides: PartialTheme = {
+      legend: {
+        labelOptions: {
+          maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0,
         },
       },
-      cell: {
-        maxWidth: 'fill',
-        maxHeight: 'fill',
-        label: {
-          visible: args.gridConfig.isCellLabelVisible ?? false,
-          minFontSize: 8,
-          maxFontSize: 18,
-          useGlobalMinFontSize: true, // override the min if there's a different directive upstream
+      heatmap: {
+        grid: {
+          stroke: {
+            width:
+              args.gridConfig.strokeWidth ??
+              chartTheme.axes?.gridLine?.horizontal?.strokeWidth ??
+              1,
+            color:
+              args.gridConfig.strokeColor ??
+              chartTheme.axes?.gridLine?.horizontal?.stroke ??
+              '#D3DAE6',
+          },
+          cellHeight: {
+            max: 'fill',
+            min: 1,
+          },
         },
-        border: {
-          strokeWidth: 0,
+        cell: {
+          maxWidth: 'fill',
+          maxHeight: 'fill',
+          label: {
+            visible: args.gridConfig.isCellLabelVisible ?? false,
+            minFontSize: 8,
+            maxFontSize: 18,
+            useGlobalMinFontSize: true, // override the min if there's a different directive upstream
+          },
+          border: {
+            strokeWidth: 0,
+          },
+        },
+        yAxisLabel: {
+          visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible,
+          // eui color subdued
+          textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d',
+          padding: yAxisColumn?.name ? 8 : 0,
+        },
+        xAxisLabel: {
+          visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn),
+          // eui color subdued
+          textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`,
+          padding: xAxisColumn?.name ? 8 : 0,
+        },
+        brushMask: {
+          fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)',
+        },
+        brushArea: {
+          stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)',
         },
       },
-      yAxisLabel: {
-        visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible,
-        // eui color subdued
-        textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d',
-        padding: yAxisColumn?.name ? 8 : 0,
-        name: yAxisColumn?.name ?? '',
-        ...(yAxisColumn
-          ? {
-              formatter: (v: number | string) =>
-                `${formatFactory(yAxisColumn.meta.params).convert(v) ?? ''}`,
-            }
-          : {}),
-      },
-      xAxisLabel: {
-        visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn),
-        // eui color subdued
-        textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`,
-        padding: xAxisColumn?.name ? 8 : 0,
-        formatter: (v: number | string) => `${xValuesFormatter.convert(v) ?? ''}`,
-        name: xAxisColumn?.name ?? '',
-      },
-      brushMask: {
-        fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)',
-      },
-      brushArea: {
-        stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)',
-      },
-      timeZone,
     };
 
     return (
@@ -454,14 +454,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
             legendColorPicker={uiState ? legendColorPicker : undefined}
             debugState={window._echDebugStateFlag ?? false}
             tooltip={tooltip}
-            theme={{
-              ...chartTheme,
-              legend: {
-                labelOptions: {
-                  maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0,
-                },
-              },
-            }}
+            theme={[themeOverrides, chartTheme]}
             xDomain={{
               min:
                 dateHistogramMeta && dateHistogramMeta.timeRange
@@ -481,15 +474,23 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
               type: 'bands',
               bands,
             }}
+            timeZone={timeZone}
             data={chartData}
             xAccessor={xAccessor}
             yAccessor={yAccessor || 'unifiedY'}
             valueAccessor={valueAccessor}
             valueFormatter={valueFormatter}
             xScale={xScale}
             ySortPredicate={yAxisColumn ? getSortPredicate(yAxisColumn) : 'dataIndex'}
-            config={config}
             xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'}
+            xAxisLabelName={xAxisColumn?.name}
+            yAxisLabelName={yAxisColumn?.name}
+            xAxisLabelFormatter={(v) => `${xValuesFormatter.convert(v) ?? ''}`}
+            yAxisLabelFormatter={
+              yAxisColumn
+                ? (v) => `${formatFactory(yAxisColumn.meta.params).convert(v) ?? ''}`
+                : undefined
+            }
           />
         </Chart>
       </>

src/plugins/chart_expressions/expression_pie/public/components/pie_vis_component.tsx

@@ -18,6 +18,7 @@ import {
   TooltipProps,
   TooltipType,
   SeriesIdentifier,
+  PartitionLayout,
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
 import {
@@ -47,7 +48,7 @@ import {
   canFilter,
   getFilterClickData,
   getFilterEventData,
-  getConfig,
+  getPartitionTheme,
   getColumns,
   getSplitDimensionAccessor,
   getColumnByAccessor,
@@ -251,8 +252,8 @@ const PieComponent = (props: PieComponentProps) => {
     return 1;
   }, [visData.rows, metricColumn]);
 
-  const config = useMemo(
-    () => getConfig(visParams, chartTheme, dimensions, rescaleFactor),
+  const themeOverrides = useMemo(
+    () => getPartitionTheme(visParams, chartTheme, dimensions, rescaleFactor),
     [chartTheme, visParams, dimensions, rescaleFactor]
   );
   const tooltip: TooltipProps = {
@@ -369,7 +370,9 @@ const PieComponent = (props: PieComponentProps) => {
               )}
               theme={[
                 // Chart background should be transparent for the usage at Canvas.
-                { ...chartTheme, background: { color: 'transparent' } },
+                { background: { color: 'transparent' } },
+                themeOverrides,
+                chartTheme,
                 {
                   legend: {
                     labelOptions: {
@@ -385,6 +388,8 @@ const PieComponent = (props: PieComponentProps) => {
               id="pie"
               smallMultiples={SMALL_MULTIPLES_ID}
               data={visData.rows}
+              layout={PartitionLayout.sunburst}
+              specialFirstInnermostSector={false}
               valueAccessor={(d: Datum) => getSliceValue(d, metricColumn)}
               percentFormatter={(d: number) => percentFormatter.convert(d / 100)}
               valueGetter={
@@ -400,7 +405,6 @@ const PieComponent = (props: PieComponentProps) => {
                   : metricFieldFormatter.convert(d)
               }
               layers={layers}
-              config={config}
               topGroove={!visParams.labels.show ? 0 : undefined}
             />
           </Chart>

src/plugins/chart_expressions/expression_pie/public/utils/get_layers.ts

@@ -6,13 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  Datum,
-  PartitionFillLabel,
-  PartitionLayer,
-  ShapeTreeNode,
-  ArrayEntry,
-} from '@elastic/charts';
+import { Datum, PartitionLayer, ShapeTreeNode, ArrayEntry } from '@elastic/charts';
 import { isEqual } from 'lodash';
 import type { FieldFormatsStart } from 'src/plugins/field_formats/public';
 import { SeriesLayer, PaletteRegistry, lightenColor } from '../../../../charts/public';
@@ -137,7 +131,7 @@ export const getLayers = (
   formatter: FieldFormatsStart,
   syncColors: boolean
 ): PartitionLayer[] => {
-  const fillLabel: Partial<PartitionFillLabel> = {
+  const fillLabel: PartitionLayer['fillLabel'] = {
     valueFont: {
       fontWeight: 700,
     },