Update dependency @elastic/charts to v37 (master)

api_docs/charts.json

@@ -229,7 +229,7 @@
           ", xAccessor: string | number | ",
           "AccessorFn",
           ") => ({ x: selectedRange }: ",
-          "XYBrushArea",
+          "XYBrushEvent",
           ") => ",
           {
             "pluginId": "charts",
@@ -4266,4 +4266,4 @@
       }
     ]
   }
-}
+}

package.json

@@ -99,7 +99,7 @@
     "@elastic/apm-generator": "link:bazel-bin/packages/elastic-apm-generator",
     "@elastic/apm-rum": "^5.9.1",
     "@elastic/apm-rum-react": "^1.3.1",
-    "@elastic/charts": "34.2.1",
+    "@elastic/charts": "37.0.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.21",
     "@elastic/ems-client": "7.15.0",

src/plugins/charts/public/static/utils/transform_click_event.ts

@@ -9,7 +9,7 @@
 import {
   XYChartSeriesIdentifier,
   GeometryValue,
-  XYBrushArea,
+  XYBrushEvent,
   Accessor,
   AccessorFn,
   Datum,
@@ -261,7 +261,7 @@ export const getFilterFromSeriesFn =
  */
 export const getBrushFromChartBrushEventFn =
   (table: Datatable, xAccessor: Accessor | AccessorFn) =>
-  ({ x: selectedRange }: XYBrushArea): BrushTriggerEvent => {
+  ({ x: selectedRange }: XYBrushEvent): BrushTriggerEvent => {
     const [start, end] = selectedRange ?? [0, 0];
     const range: [number, number] = [start, end];
     const column = table.columns.findIndex(({ id }) => validateAccessorId(id, xAccessor));

src/plugins/discover/public/application/apps/main/components/chart/histogram.tsx

@@ -14,6 +14,7 @@ import dateMath from '@elastic/datemath';
 import {
   Axis,
   BrushEndListener,
+  XYBrushEvent,
   Chart,
   ElementClickListener,
   HistogramBarSeries,
@@ -65,8 +66,8 @@ export function DiscoverHistogram({
   const timeZone = getTimezone(uiSettings);
   const { chartData, fetchStatus } = dataState;
 
-  const onBrushEnd: BrushEndListener = useCallback(
-    ({ x }) => {
+  const onBrushEnd = useCallback(
+    ({ x }: XYBrushEvent) => {
       if (!x) {
         return;
       }
@@ -184,7 +185,7 @@ export function DiscoverHistogram({
         <Chart size="100%">
           <Settings
             xDomain={xDomain}
-            onBrushEnd={onBrushEnd}
+            onBrushEnd={onBrushEnd as BrushEndListener}
             onElementClick={onElementClick(xInterval)}
             tooltip={tooltipProps}
             theme={chartTheme}

src/plugins/vis_types/pie/public/utils/get_layers.ts

@@ -133,7 +133,6 @@ export const getLayers = (
   syncColors: boolean
 ): PartitionLayer[] => {
   const fillLabel: Partial<PartitionFillLabel> = {
-    textInvertible: true,
     valueFont: {
       fontWeight: 700,
     },

src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx

@@ -64,6 +64,8 @@ const DefaultYAxis = () => (
     id="left"
     domain={withStaticPadding({
       fit: false,
+      min: NaN,
+      max: NaN,
     })}
     position={Position.Left}
     groupId={`${MAIN_GROUP_ID}`}

src/plugins/vis_types/timelion/public/helpers/panel_utils.ts

@@ -88,8 +88,8 @@ const adaptYaxisParams = (yaxis: IAxis) => {
     tickFormat: y.tickFormatter,
     domain: withStaticPadding({
       fit: y.min === undefined && y.max === undefined,
-      min: y.min,
-      max: y.max,
+      min: y.min ?? NaN,
+      max: y.max ?? NaN,
     }),
   };
 };
@@ -118,6 +118,8 @@ export const extractAllYAxis = (series: Series[]) => {
         groupId,
         domain: withStaticPadding({
           fit: false,
+          min: NaN,
+          max: NaN,
         }),
         id: (yaxis?.position || Position.Left) + index,
         position: Position.Left,

src/plugins/vis_types/xy/public/components/xy_settings.tsx

@@ -71,7 +71,6 @@ function getValueLabelsStyling() {
   return {
     displayValue: {
       fontSize: { min: VALUE_LABELS_MIN_FONTSIZE, max: VALUE_LABELS_MAX_FONTSIZE },
-      fill: { textInverted: false, textContrast: true },
       alignment: { horizontal: HorizontalAlignment.Center, vertical: VerticalAlignment.Middle },
     },
   };

src/plugins/vis_types/xy/public/config/get_axis.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { identity, isNil } from 'lodash';
+import { identity } from 'lodash';
 
 import { AxisSpec, TickFormatter, YDomainRange, ScaleType as ECScaleType } from '@elastic/charts';
 
@@ -171,17 +171,5 @@ function getAxisDomain<S extends XScaleType | YScaleType>(
   const fit = defaultYExtents;
   const padding = boundsMargin || undefined;
 
-  if (!isNil(min) && !isNil(max)) {
-    return { fit, padding, min, max };
-  }
-
-  if (!isNil(min)) {
-    return { fit, padding, min };
-  }
-
-  if (!isNil(max)) {
-    return { fit, padding, max };
-  }
-
-  return { fit, padding };
+  return { fit, padding, min: min ?? NaN, max: max ?? NaN };
 }

src/plugins/vis_types/xy/public/utils/domain.ts

@@ -33,6 +33,8 @@ export const getXDomain = (params: Aspect['params']): DomainRange => {
 
   return {
     minInterval,
+    min: NaN,
+    max: NaN,
   };
 };
 
@@ -74,9 +76,9 @@ export const getAdjustedDomain = (
     };
   }
 
-  return 'interval' in params
-    ? {
-        minInterval: params.interval,
-      }
-    : {};
+  return {
+    minInterval: 'interval' in params ? params.interval : undefined,
+    min: NaN,
+    max: NaN,
+  };
 };

src/plugins/vis_types/xy/public/utils/render_all_series.test.mocks.ts

@@ -112,7 +112,10 @@ export const getVisConfig = (): VisConfig => {
           mode: AxisMode.Normal,
           type: 'linear',
         },
-        domain: {},
+        domain: {
+          min: NaN,
+          max: NaN,
+        },
         integersOnly: false,
       },
     ],
@@ -246,7 +249,10 @@ export const getVisConfigMutipleYaxis = (): VisConfig => {
           mode: AxisMode.Normal,
           type: 'linear',
         },
-        domain: {},
+        domain: {
+          min: NaN,
+          max: NaN,
+        },
         integersOnly: false,
       },
     ],
@@ -435,7 +441,10 @@ export const getVisConfigPercentiles = (): VisConfig => {
           mode: AxisMode.Normal,
           type: 'linear',
         },
-        domain: {},
+        domain: {
+          min: NaN,
+          max: NaN,
+        },
         integersOnly: false,
       },
     ],

src/plugins/vis_types/xy/public/vis_component.tsx

@@ -19,6 +19,7 @@ import {
   ScaleType,
   AccessorFn,
   Accessor,
+  XYBrushEvent,
 } from '@elastic/charts';
 
 import { compact } from 'lodash';
@@ -131,7 +132,10 @@ const VisComponent = (props: VisComponentProps) => {
     ): BrushEndListener | undefined => {
       if (xAccessor !== null && isInterval) {
         return (brushArea) => {
-          const event = getBrushFromChartBrushEventFn(visData, xAccessor)(brushArea);
+          const event = getBrushFromChartBrushEventFn(
+            visData,
+            xAccessor
+          )(brushArea as XYBrushEvent);
           props.fireEvent(event);
         };
       }

test/functional/apps/dashboard/dashboard_state.ts

@@ -7,6 +7,7 @@
  */
 
 import expect from '@kbn/expect';
+import chroma from 'chroma-js';
 
 import { PIE_CHART_VIS_NAME, AREA_CHART_VIS_NAME } from '../../page_objects/dashboard_page';
 import { DEFAULT_PANEL_WIDTH } from '../../../../src/plugins/dashboard/public/application/embeddable/dashboard_constants';
@@ -264,14 +265,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           await PageObjects.header.waitUntilLoadingHasFinished();
 
           await retry.try(async () => {
-            const allPieSlicesColor = await pieChart.getAllPieSliceStyles('80,000');
-            let whitePieSliceCounts = 0;
-            allPieSlicesColor.forEach((style) => {
-              if (style.indexOf('rgb(255, 255, 255)') > -1) {
-                whitePieSliceCounts++;
-              }
-            });
-
+            const allPieSlicesColor = await pieChart.getAllPieSliceColor('80,000');
+            const whitePieSliceCounts = allPieSlicesColor.reduce((count, color) => {
+              // converting the color to a common format, testing the color, not the string format
+              return chroma(color).hex().toUpperCase() === '#FFFFFF' ? count + 1 : count;
+            }, 0);
             expect(whitePieSliceCounts).to.be(1);
           });
         });

test/functional/page_objects/visualize_chart_page.ts

@@ -7,7 +7,7 @@
  */
 
 import { Position } from '@elastic/charts';
-import Color from 'color';
+import chroma from 'chroma-js';
 
 import { FtrService } from '../ftr_provider_context';
 
@@ -181,17 +181,17 @@ export class VisualizeChartPageObject extends FtrService {
     return items.some(({ color: c }) => c === color);
   }
 
-  public async doesSelectedLegendColorExistForPie(color: string) {
+  public async doesSelectedLegendColorExistForPie(matchingColor: string) {
     if (await this.isNewLibraryChart(pieChartSelector)) {
+      const hexMatchingColor = chroma(matchingColor).hex().toUpperCase();
       const slices =
         (await this.getEsChartDebugState(pieChartSelector))?.partition?.[0]?.partitions ?? [];
-      return slices.some(({ color: c }) => {
-        const rgbColor = new Color(color).rgb().toString();
-        return c === rgbColor;
+      return slices.some(({ color }) => {
+        return hexMatchingColor === chroma(color).hex().toUpperCase();
       });
     }
 
-    return await this.testSubjects.exists(`legendSelectedColor-${color}`);
+    return await this.testSubjects.exists(`legendSelectedColor-${matchingColor}`);
   }
 
   public async expectError() {

test/functional/services/visualizations/pie_chart.ts

@@ -7,6 +7,7 @@
  */
 
 import expect from '@kbn/expect';
+import { isNil } from 'lodash';
 import { FtrService } from '../../ftr_provider_context';
 
 const pieChartSelector = 'visTypePieChart';
@@ -100,8 +101,8 @@ export class PieChartService extends FtrService {
     return await pieSlice.getAttribute('style');
   }
 
-  async getAllPieSliceStyles(name: string) {
-    this.log.debug(`VisualizePage.getAllPieSliceStyles(${name})`);
+  async getAllPieSliceColor(name: string) {
+    this.log.debug(`VisualizePage.getAllPieSliceColor(${name})`);
     if (await this.visChart.isNewLibraryChart(pieChartSelector)) {
       const slices =
         (await this.visChart.getEsChartDebugState(pieChartSelector))?.partition?.[0]?.partitions ??
@@ -112,9 +113,22 @@ export class PieChartService extends FtrService {
       return selectedSlice.map((slice) => slice.color);
     }
     const pieSlices = await this.getAllPieSlices(name);
-    return await Promise.all(
+    const slicesStyles = await Promise.all(
       pieSlices.map(async (pieSlice) => await pieSlice.getAttribute('style'))
     );
+    return slicesStyles
+      .map(
+        (styles) =>
+          styles.split(';').reduce<Record<string, string>>((styleAsObj, style) => {
+            const stylePair = style.split(':');
+            if (stylePair.length !== 2) {
+              return styleAsObj;
+            }
+            styleAsObj[stylePair[0].trim()] = stylePair[1].trim();
+            return styleAsObj;
+          }, {}).fill // in vislib the color is available on the `fill` style prop
+      )
+      .filter((d) => !isNil(d));
   }
 
   async getPieChartData() {

x-pack/plugins/apm/public/components/alerting/chart_preview/index.tsx

@@ -96,7 +96,7 @@ export function ChartPreview({
           position={Position.Left}
           tickFormat={yTickFormat}
           ticks={5}
-          domain={{ max: yMax }}
+          domain={{ max: yMax, min: NaN }}
         />
         <BarSeries
           color={theme.eui.euiColorVis1}

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx

@@ -10,6 +10,7 @@ import numeral from '@elastic/numeral';
 import {
   Axis,
   BrushEndListener,
+  XYBrushEvent,
   Chart,
   CurveType,
   LineSeries,
@@ -64,7 +65,7 @@ export function PageLoadDistChart({
   percentileRange,
 }: Props) {
   const [breakdownLoading, setBreakdownLoading] = useState(false);
-  const onBrushEnd: BrushEndListener = ({ x }) => {
+  const onBrushEnd = ({ x }: XYBrushEvent) => {
     if (!x) {
       return;
     }
@@ -99,7 +100,7 @@ export function PageLoadDistChart({
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
             theme={euiChartTheme.theme}
-            onBrushEnd={onBrushEnd}
+            onBrushEnd={onBrushEnd as BrushEndListener}
             tooltip={tooltipProps}
             showLegend
           />