Update dependency @elastic/charts to v45 (main) (#126729)

* Fix chart breaking changes in Heatmap and small stylistic fixes
* Ping every team with non EUI themed chart
* Update charts to 45.0.1
* Updated donut chart snapshot
* Fix swimlane functional tests
* Fix new swimlane height and test x offset
* Add link to EUI theme README.md

Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>

package.json

@@ -105,7 +105,7 @@
     "@elastic/apm-rum": "^5.10.2",
     "@elastic/apm-rum-react": "^1.3.4",
     "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace",
-    "@elastic/charts": "43.1.1",
+    "@elastic/charts": "45.0.1",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.2.0-canary.1",
     "@elastic/ems-client": "8.1.0",

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/cloud_posture_score_chart.tsx

@@ -44,6 +44,7 @@ const ScoreChart = ({
   return (
     <Chart size={{ height: 90, width: 90 }}>
       <Settings
+        // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
         theme={{
           partition: {
             linkLabel: { maximumSection: Infinity, maxCount: 0 },

x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_trend_chart.tsx

@@ -17,7 +17,11 @@ import {
 
 export const ComplianceTrendChart = () => (
   <Chart size={{ height: 200 }}>
-    <Settings showLegend={false} legendPosition="right" />
+    <Settings
+      showLegend={false}
+      legendPosition="right"
+      // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+    />
     <AreaSeries
       id="compliance_score"
       // TODO: no api for this chart yet, using empty state for now. needs BE

x-pack/plugins/infra/public/alerting/common/criterion_preview_chart/criterion_preview_chart.tsx

@@ -8,11 +8,11 @@
 import React, { useMemo } from 'react';
 import { niceTimeFormatter, TooltipValue } from '@elastic/charts';
 import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts';
-import { sum, min as getMin, max as getMax } from 'lodash';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { sum, min as getMin, max as getMax } from 'lodash';
 import { formatNumber } from '../../../../common/formatters/number';
 import { GetLogAlertsChartPreviewDataSuccessResponsePayload } from '../../../../common/http_api';
 
@@ -72,6 +72,7 @@ export const getDomain = (series: Series, stacked: boolean = false) => {
   return { yMin: min || 0, yMax: max || 0, xMin: minTimestamp, xMax: maxTimestamp };
 };
 
+// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
 export const getChartTheme = (isDarkMode: boolean): Theme => {
   return isDarkMode ? DARK_THEME : LIGHT_THEME;
 };

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/get_chart_theme.ts

@@ -13,6 +13,7 @@ import {
   mergeWithDefaultTheme,
 } from '@elastic/charts';
 
+// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
 export function getChartTheme(isDarkMode: boolean): Theme {
   return isDarkMode ? DARK_THEME : LIGHT_THEME;
 }

x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss

@@ -9,6 +9,7 @@
 
   &__list {
     margin: $euiSizeXS;
+    padding-bottom: $euiSizeXS;
   }
 
   &__header {

x-pack/plugins/ml/public/application/components/data_grid/column_chart.tsx

@@ -55,7 +55,10 @@ export const ColumnChart: FC<Props> = ({
       {!isUnsupportedChartData(chartData) && data.length > 0 && (
         <div className="mlDataGridChart__histogram" data-test-subj={`${dataTestSubj}-histogram`}>
           <Chart>
-            <Settings theme={columnChartTheme} />
+            <Settings
+              // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+              theme={columnChartTheme}
+            />
             <BarSeries
               id="histogram"
               name="count"

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx

@@ -132,7 +132,11 @@ export const DecisionPathChart = ({
       <Chart
         size={{ height: DECISION_PATH_MARGIN + decisionPathData.length * DECISION_PATH_ROW_HEIGHT }}
       >
-        <Settings theme={theme} rotation={90} />
+        <Settings
+          // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+          theme={theme}
+          rotation={90}
+        />
         {regressionBaselineData && (
           <LineAnnotation
             id="xpack.ml.dataframe.analytics.explorationResults.decisionPathBaseline"

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx

@@ -287,7 +287,12 @@ export const FeatureImportanceSummaryPanel: FC<FeatureImportanceSummaryPanelProp
                   height: chartHeight,
                 }}
               >
-                <Settings rotation={90} theme={theme} showLegend={showLegend} />
+                <Settings
+                  rotation={90}
+                  // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+                  theme={theme}
+                  showLegend={showLegend}
+                />
 
                 <Axis
                   id="x-axis"

x-pack/plugins/ml/public/application/explorer/swimlane_annotation_container.tsx

@@ -14,7 +14,6 @@ import { AnnotationsTable } from '../../../common/types/annotations';
 import { ChartTooltipService } from '../components/chart_tooltip';
 import { useCurrentEuiTheme } from '../components/color_range_legend';
 
-export const X_AXIS_RIGHT_OVERFLOW = 50;
 export const Y_AXIS_LABEL_WIDTH = 170;
 export const Y_AXIS_LABEL_PADDING = 8;
 const ANNOTATION_CONTAINER_HEIGHT = 12;
@@ -47,8 +46,8 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
 
       const dimensions = canvasRef.current.getBoundingClientRect();
 
-      const startingXPos = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
-      const endingXPos = dimensions.width - X_AXIS_RIGHT_OVERFLOW;
+      const startingXPos = Y_AXIS_LABEL_WIDTH;
+      const endingXPos = dimensions.width;
 
       const svg = chartElement
         .append('svg')
@@ -67,8 +66,9 @@ export const SwimlaneAnnotationContainer: FC<SwimlaneAnnotationContainerProps> =
             defaultMessage: 'Annotations',
           })
         )
-        .attr('x', Y_AXIS_LABEL_WIDTH + Y_AXIS_LABEL_PADDING)
-        .attr('y', ANNOTATION_CONTAINER_HEIGHT)
+        .attr('x', Y_AXIS_LABEL_WIDTH - Y_AXIS_LABEL_PADDING)
+        .attr('y', ANNOTATION_CONTAINER_HEIGHT / 2)
+        .attr('alignment-baseline', 'middle')
         .style('fill', euiTheme.euiTextSubduedColor)
         .style('font-size', euiTheme.euiFontSizeXS);
 

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -45,11 +45,7 @@ import { formatHumanReadableDateTime } from '../../../common/util/date_utils';
 import './_explorer.scss';
 import { EMPTY_FIELD_VALUE_LABEL } from '../timeseriesexplorer/components/entity_control/entity_control';
 import { useUiSettings } from '../contexts/kibana';
-import {
-  Y_AXIS_LABEL_WIDTH,
-  Y_AXIS_LABEL_PADDING,
-  X_AXIS_RIGHT_OVERFLOW,
-} from './swimlane_annotation_container';
+import { Y_AXIS_LABEL_WIDTH, Y_AXIS_LABEL_PADDING } from './swimlane_annotation_container';
 import { useCurrentEuiTheme } from '../components/color_range_legend';
 
 declare global {
@@ -68,10 +64,10 @@ function getFormattedSeverityScore(score: number): string {
  * Ignore insignificant resize, e.g. browser scrollbar appearance.
  */
 const RESIZE_THROTTLE_TIME_MS = 500;
+const BORDER_WIDTH = 1;
 const CELL_HEIGHT = 30;
 const LEGEND_HEIGHT = 34;
-
-const Y_AXIS_HEIGHT = 24;
+const X_AXIS_HEIGHT = 24;
 
 export const SWIM_LANE_LABEL_WIDTH = Y_AXIS_LABEL_WIDTH + 2 * Y_AXIS_LABEL_PADDING;
 
@@ -248,9 +244,9 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
     return isLoading
       ? containerHeightRef.current
       : // TODO update when elastic charts X label will be fixed
-        rowsCount * CELL_HEIGHT +
+        rowsCount * (CELL_HEIGHT + BORDER_WIDTH * 2) +
           (showLegend ? LEGEND_HEIGHT : 0) +
-          (showYAxis ? Y_AXIS_HEIGHT : 0);
+          (showTimeline ? X_AXIS_HEIGHT : 0);
   }, [isLoading, rowsCount]);
 
   useEffect(() => {
@@ -288,7 +284,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
             max: CELL_HEIGHT,
           },
           stroke: {
-            width: 1,
+            width: BORDER_WIDTH,
             color: euiTheme.euiBorderColor,
           },
         },
@@ -314,8 +310,6 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
           visible: showTimeline,
           textColor: euiTheme.euiTextSubduedColor,
           fontSize: parseInt(euiTheme.euiFontSizeXS, 10),
-          // Required to calculate where the swimlane ends
-          width: X_AXIS_RIGHT_OVERFLOW * 2,
         },
         brushMask: {
           visible: showBrush,
@@ -421,6 +415,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                   {showSwimlane && !isLoading && (
                     <Chart className={'mlSwimLaneContainer'}>
                       <Settings
+                        // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
                         theme={themeOverrides}
                         onElementClick={onElementClick}
                         showLegend={showLegend}

x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx

@@ -323,6 +323,7 @@ export const DatafeedChartFlyout: FC<DatafeedChartFlyoutProps> = ({ jobId, end,
                         <Settings
                           showLegend
                           legendPosition={Position.Bottom}
+                          // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
                           theme={{
                             lineSeriesStyle: {
                               point: {

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx

@@ -47,7 +47,11 @@ export const AnomalyChart: FC<Props> = ({
     <div style={{ width, height }} data-test-subj={`mlAnomalyChart ${CHART_TYPE[chartType]}`}>
       <LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
         <Chart>
-          <Settings xDomain={xDomain} tooltip={TooltipType.None} />
+          <Settings
+            // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+            xDomain={xDomain}
+            tooltip={TooltipType.None}
+          />
           <Axes chartData={data} />
           <Anomalies anomalyData={anomalyData} />
           <ModelBounds modelData={modelData} />

x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx

@@ -66,8 +66,12 @@ export const EventRateChart: FC<Props> = ({
       <LoadingWrapper height={height} hasData={eventRateChartData.length > 0} loading={loading}>
         <Chart>
           {showAxis === true && <Axes />}
-
-          <Settings tooltip={TooltipType.None} onBrushEnd={onBrushEnd} theme={theme} />
+          <Settings
+            tooltip={TooltipType.None}
+            onBrushEnd={onBrushEnd}
+            // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
+            theme={theme}
+          />
 
           {overlayRanges &&
             overlayRanges.map((range, i) => (

x-pack/plugins/ml/public/application/trained_models/nodes_overview/memory_preview_chart.tsx

@@ -109,6 +109,7 @@ export const MemoryPreviewChart: FC<MemoryPreviewChartProps> = ({ memoryOverview
   return (
     <Chart size={['100%', 50]}>
       <Settings
+        // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
         rotation={90}
         tooltip={{
           headerFormatter: ({ value }) =>

x-pack/plugins/security_solution/public/common/components/charts/common.tsx

@@ -104,6 +104,7 @@ const theme: PartialTheme = {
 };
 export const useTheme = () => {
   const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
+  // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
   const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const themeValue = useMemo(() => mergeWithDefaultTheme(theme, defaultTheme), []);

x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx

@@ -105,6 +105,7 @@ export const ExecutionDurationChart: React.FunctionComponent<ComponentOpts> = ({
           <>
             <Chart data-test-subj="executionDurationChart" size={{ height: 80 }}>
               <Settings
+                // TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
                 theme={{
                   lineSeriesStyle: {
                     point: { visible: false },

x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap

@@ -201,16 +201,16 @@ exports[`DonutChart component passes correct props without errors for valid prop
             "colors": Object {
               "defaultVizColor": "red",
               "vizColors": Array [
-                "#1EA593",
-                "#2B70F7",
-                "#CE0060",
-                "#38007E",
-                "#FCA5D3",
-                "#F37020",
-                "#E49E29",
-                "#B0916F",
-                "#7B000B",
-                "#34130C",
+                "#54B399",
+                "#6092C0",
+                "#D36086",
+                "#9170B8",
+                "#CA8EAE",
+                "#D6BF57",
+                "#B9A888",
+                "#DA8B45",
+                "#AA6556",
+                "#E7664C",
               ],
             },
             "crosshair": Object {
@@ -323,8 +323,6 @@ exports[`DonutChart component passes correct props without errors for valid prop
               "maxColumnWidth": 30,
               "maxRowHeight": 30,
               "xAxisLabel": Object {
-                "align": "center",
-                "baseline": "middle",
                 "fontFamily": "Sans-Serif",
                 "fontSize": 12,
                 "fontStyle": "normal",
@@ -336,12 +334,11 @@ exports[`DonutChart component passes correct props without errors for valid prop
                   "right": 5,
                   "top": 5,
                 },
+                "rotation": 0,
                 "textColor": "black",
                 "visible": true,
-                "width": "auto",
               },
               "yAxisLabel": Object {
-                "baseline": "middle",
                 "fontFamily": "Sans-Serif",
                 "fontSize": 12,
                 "fontStyle": "normal",

x-pack/test/functional/apps/ml/anomaly_detection/anomaly_explorer.ts

@@ -144,11 +144,8 @@ export default function ({ getService }: FtrProviderContext) {
 
         it('renders Overall swim lane', async () => {
           await ml.testExecution.logTestStep('has correct axes labels');
-          await ml.swimLane.assertAxisLabels(overallSwimLaneTestSubj, 'x', [
-            '2016-02-07 00:00',
-            '2016-02-09 00:00',
-            '2016-02-11 00:00',
-          ]);
+          // The showTimeline prop is set to false and no axis labels are rendered
+          await ml.swimLane.assertAxisLabels(overallSwimLaneTestSubj, 'x', []);
           await ml.swimLane.assertAxisLabels(overallSwimLaneTestSubj, 'y', ['Overall']);
         });
 
@@ -156,8 +153,11 @@ export default function ({ getService }: FtrProviderContext) {
           await ml.testExecution.logTestStep('has correct axes labels');
           await ml.swimLane.assertAxisLabels(viewBySwimLaneTestSubj, 'x', [
             '2016-02-07 00:00',
-            '2016-02-09 00:00',
-            '2016-02-11 00:00',
+            '2016-02-07 20:00',
+            '2016-02-08 16:00',
+            '2016-02-09 12:00',
+            '2016-02-10 08:00',
+            '2016-02-11 04:00',
           ]);
           await ml.swimLane.assertAxisLabels(viewBySwimLaneTestSubj, 'y', [
             'AAL',

x-pack/test/functional/services/ml/swim_lane.ts

@@ -22,7 +22,7 @@ export function SwimLaneProvider({ getService }: FtrProviderContext) {
   /**
    * Y axis labels width + padding
    */
-  const xOffset = 185;
+  const xOffset = 170;
 
   /**
    * Get coordinates relative to the left top corner of the canvas

yarn.lock

@@ -1431,10 +1431,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@43.1.1":
-  version "43.1.1"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.1.1.tgz#2a9cd4bbde9397b86a45d8aa604a1950ae0997c0"
-  integrity sha512-lYTdwpARIDXD15iC4cujKplBhGXb3zriBATp0wFsqgT9XE9TMOzlQ9dgylWQ+2x6OlataZLrOMnWXiFQ3uJqqQ==
+"@elastic/charts@45.0.1":
+  version "45.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-45.0.1.tgz#02362d6345641788f878c99d9943b91923fbb221"
+  integrity sha512-CrMStOCZzTSO4SxU5FTL75JgG5AshFILVtWqiq2r7+cwwo9oekEPoUuBzqKFCfHkt/yeq1sTdEK19oZsQ0He6w==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"