Update dependency @elastic/charts to v34 (master) (#108766)

* Update dependency @elastic/charts to v34 * tentative fix for heatmap legend items, to be fixed in patch before `7.15` Co-authored-by: Renovate Bot <bot@renovateapp.com> Co-authored-by: Marco Vettorello <vettorello.marco@gmail.com> Co-authored-by: nickofthyme <nick.ryan.partridge@gmail.com>
2025-04-23 09:19:04 -04:00 · 2021-08-17 21:05:23 -05:00 · 2021-08-17 21:05:23 -05:00 · f21115f821
commit f21115f821
parent b1253db197
9 changed files with 52 additions and 47 deletions
--- a/package.json
+++ b/package.json
@ -95,7 +95,7 @@
  "dependencies": {
    "@elastic/apm-rum": "^5.8.0",
    "@elastic/apm-rum-react": "^1.2.11",
-    "@elastic/charts": "33.2.2",
+    "@elastic/charts": "34.0.0",
    "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
    "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.17",
    "@elastic/ems-client": "7.15.0",
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
@ -22,6 +22,7 @@ import {
  RecursivePartial,
  ScaleType,
  Settings,
+  LineAnnotationStyle,
 } from '@elastic/charts';

 import euiVars from '@elastic/eui/dist/eui_theme_light.json';
@ -91,7 +92,7 @@ interface CorrelationsChartProps {
  selection?: [number, number];
 }

-const getAnnotationsStyle = (color = 'gray') => ({
+const getAnnotationsStyle = (color = 'gray'): LineAnnotationStyle => ({
  line: {
    strokeWidth: 1,
    stroke: color,
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts
@ -10,7 +10,7 @@ import { useMemo } from 'react';
 import { useCurrentEuiTheme } from './use_color_range';
 export const useDataVizChartTheme = (): PartialTheme => {
  const { euiTheme } = useCurrentEuiTheme();
-  const chartTheme = useMemo(() => {
+  const chartTheme = useMemo<PartialTheme>(() => {
    const AREA_SERIES_COLOR = euiTheme.euiColorVis0;
    return {
      axes: {
--- a/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx
+++ b/x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx
@ -285,7 +285,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
    yAxisLabel: {
      visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible,
      // eui color subdued
-      fill: chartTheme.axes?.tickLabel?.fill ?? '#6a717d',
+      textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d',
      padding: yAxisColumn?.name ? 8 : 0,
      name: yAxisColumn?.name ?? '',
      ...(yAxisColumn
@ -297,7 +297,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
    xAxisLabel: {
      visible: args.gridConfig.isXAxisLabelVisible,
      // eui color subdued
-      fill: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`,
+      textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`,
      formatter: (v: number | string) => xValuesFormatter.convert(v),
      name: xAxisColumn.name,
    },
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
@ -43,7 +43,6 @@ const baselineStyle: LineAnnotationStyle = {
  details: {
    fontFamily: 'Arial',
    fontSize: 10,
-    fontStyle: 'bold',
    fill: euiColorMediumShade,
    padding: 0,
  },
--- a/x-pack/plugins/uptime/public/components/common/charts/snapshots/donut_chart.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/common/charts/snapshots/donut_chart.test.tsx.snap
@ -53,7 +53,6 @@ exports[`DonutChart component passes correct props without errors for valid prop
              "fill": "#333",
              "fontFamily": "sans-serif",
              "fontSize": 10,
-              "fontStyle": "bold",
              "padding": Object {
                "inner": 8,
                "outer": 0,
@ -64,7 +63,6 @@ exports[`DonutChart component passes correct props without errors for valid prop
              "fill": "#333",
              "fontFamily": "sans-serif",
              "fontSize": 12,
-              "fontStyle": "bold",
              "padding": Object {
                "inner": 8,
                "outer": 0,
--- a/x-pack/test/functional/apps/lens/chart_data.ts
+++ b/x-pack/test/functional/apps/lens/chart_data.ts
@ -125,11 +125,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend
      expect(debugState.legend!.items).to.eql([
-        { key: '5722.77', name: '> 5,722.77', color: '#6092c0' },
-        { key: '8529.22', name: '> 8,529.22', color: '#a8bfda' },
-        { key: '11335.66', name: '> 11,335.66', color: '#ebeff5' },
-        { key: '14142.11', name: '> 14,142.11', color: '#ecb385' },
-        { key: '16948.55', name: '> 16,948.55', color: '#e7664c' },
+        { color: '#6092c0', key: '≥ 5,722.775', name: '≥ 5,722.775' },
+        { color: '#6092c0', key: '≥ 5,722.77', name: '≥ 5,722.77' },
+        { color: '#a8bfda', key: '≥ 8,529.22', name: '≥ 8,529.22' },
+        { color: '#ebeff5', key: '≥ 11,335.66', name: '≥ 11,335.66' },
+        { color: '#ecb385', key: '≥ 14,142.11', name: '≥ 14,142.11' },
+        { color: '#e7664c', key: '≥ 16,948.55', name: '≥ 16,948.55' },
      ]);
    });

--- a/x-pack/test/functional/apps/lens/heatmap.ts
+++ b/x-pack/test/functional/apps/lens/heatmap.ts
@ -60,11 +60,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend
      expect(debugState.legend!.items).to.eql([
-        { key: '5722.77', name: '> 5,722.77', color: '#6092c0' },
-        { key: '8529.22', name: '> 8,529.22', color: '#a8bfda' },
-        { key: '11335.66', name: '> 11,335.66', color: '#ebeff5' },
-        { key: '14142.11', name: '> 14,142.11', color: '#ecb385' },
-        { key: '16948.55', name: '> 16,948.55', color: '#e7664c' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
+        { key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#6092c0' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
      ]);
    });

@ -84,11 +85,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend has changed
      expect(debugState.legend!.items).to.eql([
-        { key: '7126', name: '> 7,126', color: '#6092c0' },
-        { key: '8529.22', name: '> 8,529.22', color: '#a8bfda' },
-        { key: '11335.66', name: '> 11,335.66', color: '#ebeff5' },
-        { key: '14142.11', name: '> 14,142.11', color: '#ecb385' },
-        { key: '16948.55', name: '> 16,948.55', color: '#e7664c' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
+        { key: '≥ 7,126', name: '≥ 7,126', color: '#6092c0' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
      ]);
    });

@ -104,11 +106,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend has changed
      expect(debugState.legend!.items).to.eql([
-        { key: '7126', name: '> 7,126', color: '#6092c0' },
-        { key: '8529.22', name: '> 8,529.22', color: '#a8bfda' },
-        { key: '11335.66', name: '> 11,335.66', color: '#ebeff5' },
-        { key: '14142.11', name: '> 14,142.11', color: '#ecb385' },
-        { key: '16948.55', name: '> 16,948.55', color: '#e7664c' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
+        { key: '≥ 7,126', name: '≥ 7,126', color: '#6092c0' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
      ]);
    });

@ -126,11 +129,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend has changed
      expect(debugState.legend!.items).to.eql([
-        { key: '0', name: '> 0', color: '#6092c0' },
-        { key: '8529.22', name: '> 8,529.22', color: '#a8bfda' },
-        { key: '11335.66', name: '> 11,335.66', color: '#ebeff5' },
-        { key: '14142.11', name: '> 14,142.11', color: '#ecb385' },
-        { key: '16948.55', name: '> 16,948.55', color: '#e7664c' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#6092c0' },
+        { key: '≥ 0', name: '≥ 0', color: '#6092c0' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#a8bfda' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#ebeff5' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#ecb385' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#e7664c' },
      ]);
    });

@ -146,11 +150,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend has changed
      expect(debugState.legend!.items).to.eql([
-        { key: '5722.77', name: '> 5,722.77', color: '#209280' },
-        { key: '8529.22', name: '> 8,529.22', color: '#54b399' },
-        { key: '11335.66', name: '> 11,335.66', color: '#d6bf57' },
-        { key: '14142.11', name: '> 14,142.11', color: '#e7664c' },
-        { key: '16948.55', name: '> 16,948.55', color: '#cc5642' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#209280' },
+        { key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#209280' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#54b399' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#d6bf57' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#e7664c' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' },
      ]);
    });

@ -166,11 +171,12 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {

      // assert legend has not changed
      expect(debugState.legend!.items).to.eql([
-        { key: '5722.77', name: '> 5,722.77', color: '#209280' },
-        { key: '8529.22', name: '> 8,529.22', color: '#54b399' },
-        { key: '11335.66', name: '> 11,335.66', color: '#d6bf57' },
-        { key: '14142.11', name: '> 14,142.11', color: '#e7664c' },
-        { key: '16948.55', name: '> 16,948.55', color: '#cc5642' },
+        { key: '≥ 5,722.775', name: '≥ 5,722.775', color: '#209280' },
+        { key: '≥ 5,722.77', name: '≥ 5,722.77', color: '#209280' },
+        { key: '≥ 8,529.22', name: '≥ 8,529.22', color: '#54b399' },
+        { key: '≥ 11,335.66', name: '≥ 11,335.66', color: '#d6bf57' },
+        { key: '≥ 14,142.11', name: '≥ 14,142.11', color: '#e7664c' },
+        { key: '≥ 16,948.55', name: '≥ 16,948.55', color: '#cc5642' },
      ]);
    });
  });
--- a/yarn.lock
+++ b/yarn.lock
@ -1389,10 +1389,10 @@
  dependencies:
    object-hash "^1.3.0"

-"@elastic/charts@33.2.2":
-  version "33.2.2"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-33.2.2.tgz#403c46eebe71f4ca7e5c9c1a135eec66869961cc"
-  integrity sha512-g+z1T8s6m7eySaxcY7R6yqUHUstUtEIH0P4FineKWdZ5L6IkxBNrhM7r0FaddIurNxvBy/SGQorhmFZAksWhiQ==
+"@elastic/charts@34.0.0":
+  version "34.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-34.0.0.tgz#42288a6b3a303ccc61385b786f2ccf3549c3b43a"
+  integrity sha512-gXekMH6iWIo5DaUzPJLjbn02CuPaxwGIOOF2cz/UH9zRY2A5UZ8CDICysDgriK1PcJfKPCa7Yk5cntn590coyg==
  dependencies:
    "@popperjs/core" "^2.4.0"
    chroma-js "^2.1.0"