Update dependency @elastic/charts to v18.1.0 (#60578) (#60775)

elastic · Mar 20, 2020 · c96faa6 · c96faa6
1 parent 394abed
commit c96faa6
Show file tree

Hide file tree

Showing 39 changed files with 244 additions and 174 deletions.
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
   "dependencies": {
     "@babel/core": "^7.5.5",
     "@babel/register": "^7.7.0",
-    "@elastic/charts": "^17.1.1",
+    "@elastic/charts": "^18.1.0",
     "@elastic/datemath": "5.0.2",
     "@elastic/ems-client": "7.7.0",
     "@elastic/eui": "20.0.2",

diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -12,7 +12,7 @@
     "abortcontroller-polyfill": "^1.4.0",
     "@elastic/eui": "20.0.2",
     "@kbn/babel-preset": "1.0.0",
-    "@elastic/charts": "^17.1.1",
+    "@elastic/charts": "^18.1.0",
     "@kbn/dev-utils": "1.0.0",
     "@kbn/i18n": "1.0.0",
     "@yarnpkg/lockfile": "^1.1.0",

diff --git a/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx b/src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx
@@ -38,6 +38,7 @@ import {
   TooltipValue,
   TooltipType,
   ElementClickListener,
+  XYChartElementEvent,
 } from '@elastic/charts';
 
 import { i18n } from '@kbn/i18n';
@@ -140,7 +141,7 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
   };
 
   public onElementClick = (xInterval: number): ElementClickListener => ([elementData]) => {
-    const startRange = elementData[0].x;
+    const startRange = (elementData as XYChartElementEvent)[0].x;
 
     const range = {
       from: startRange,

diff --git a/...blic/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/...blic/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap
diff --git a/...ublic/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/...ublic/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap
diff --git a/...s/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js b/...s/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js
@@ -43,15 +43,14 @@ export function AreaSeriesDecorator({
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
-  const customSeriesColors = [color];
   const areaSeriesStyle = getAreaStyles({ points, lines, color });
 
   const seriesSettings = {
     id,
     name,
     groupId,
     data,
-    customSeriesColors,
+    color,
     hideInLegend,
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,

diff --git a/...ns/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js b/...ns/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js
@@ -42,15 +42,14 @@ export function BarSeriesDecorator({
 }) {
   const id = seriesId;
   const groupId = seriesGroupId;
-  const customSeriesColors = [color];
   const barSeriesStyle = getBarStyles(bars, color);
 
   const seriesSettings = {
     id,
     name,
     groupId,
     data,
-    customSeriesColors,
+    color,
     hideInLegend,
     xAccessor: X_ACCESSOR_INDEX,
     yAccessors: Y_ACCESSOR_INDEXES,

diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js
@@ -99,6 +99,7 @@ export const TimeSeries = ({
     <Chart ref={chartRef} renderer="canvas" className={classes}>
       <Settings
         showLegend={legend}
+        showLegendExtra={true}
         legendPosition={legendPosition}
         onBrushEnd={onBrush}
         animateData={false}

diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
@@ -305,9 +305,9 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
 
     public async getRhythmChartLegendValue(nth = 0) {
       await PageObjects.visChart.waitForVisualizationRenderingStabilized();
-      const metricValue = (
-        await find.allByCssSelector(`.echLegendItem .echLegendItem__displayValue`)
-      )[nth];
+      const metricValue = (await find.allByCssSelector(`.echLegendItem .echLegendItem__extra`))[
+        nth
+      ];
       await metricValue.moveMouseTo();
       return await metricValue.getVisibleText();
     }

diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap b/x-pack/legacy/plugins/lens/public/xy_visualization/__snapshots__/xy_expression.test.tsx.snap
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.test.tsx
@@ -4,8 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Axis } from '@elastic/charts';
-import { AreaSeries, BarSeries, Position, LineSeries, Settings, ScaleType } from '@elastic/charts';
+import {
+  AreaSeries,
+  Axis,
+  BarSeries,
+  Position,
+  LineSeries,
+  Settings,
+  ScaleType,
+} from '@elastic/charts';
 import { xyChart, XYChart } from './xy_expression';
 import { LensMultiTable } from '../types';
 import React from 'react';

diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx
@@ -191,7 +191,7 @@ export function XYChart({ data, args, formatFactory, timeZone, chartTheme }: XYC
       <Settings
         showLegend={legend.isVisible ? chartHasMoreThanOneSeries : legend.isVisible}
         legendPosition={legend.position}
-        showLegendDisplayValue={false}
+        showLegendExtra={false}
         theme={chartTheme}
         rotation={shouldRotate ? 90 : 0}
         xDomain={

diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx
@@ -100,7 +100,7 @@ export const AreaChartBaseComponent = ({
               xAccessor="x"
               yAccessors={['y']}
               areaSeriesStyle={getSeriesLineStyle()}
-              customSeriesColors={series.color ? [series.color] : undefined}
+              color={series.color ? series.color : undefined}
             />
           ) : null;
         })}

diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx
@@ -75,7 +75,7 @@ export const BarChartBaseComponent = ({
             splitSeriesAccessors={['g']}
             data={series.value!}
             stackAccessors={get('configs.series.stackAccessors', chartConfigs)}
-            customSeriesColors={series.color ? [series.color] : undefined}
+            color={series.color ? series.color : undefined}
           />
         ) : null;
       })}

diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx
@@ -38,7 +38,7 @@ export interface ChartData {
 
 export interface ChartSeriesConfigs {
   customHeight?: number;
-  customSeriesColors?: string[];
+  color?: string[];
   series?: {
     xScaleType?: ScaleType | undefined;
     yScaleType?: ScaleType | undefined;
@@ -110,7 +110,7 @@ export const chartDefaultSettings = {
   rendering: chartDefaultRendering,
   animatedData: false,
   showLegend: false,
-  showLegendDisplayValue: false,
+  showLegendExtra: false,
   debug: false,
   legendPosition: Position.Bottom,
 };

diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx
@@ -17,7 +17,7 @@ import { BarChart } from '../charts/barchart';
 import { HeaderSection } from '../header_section';
 import { MatrixLoader } from './matrix_loader';
 import { Panel } from '../panel';
-import { getBarchartConfigs, getCustomChartData } from '../../components/matrix_histogram/utils';
+import { getBarchartConfigs, getCustomChartData } from './utils';
 import { useQuery } from '../../containers/matrix_histogram';
 import {
   MatrixHistogramProps,

diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts
@@ -109,6 +109,7 @@ export interface BarchartConfigs {
     legendPosition: Position;
     onBrushEnd: UpdateDateRange;
     showLegend: boolean;
+    showLegendExtra: boolean;
     theme: {
       scales: {
         barsPadding: number;

diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts
@@ -47,6 +47,7 @@ export const getBarchartConfigs = ({
     legendPosition: legendPosition ?? Position.Right,
     onBrushEnd,
     showLegend: showLegend ?? true,
+    showLegendExtra: true,
     theme: {
       scales: {
         barsPadding: 0.08,

diff --git a/...em/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx b/...em/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx
@@ -7,8 +7,6 @@
 import {
   Axis,
   Chart,
-  getAxisId,
-  getSpecId,
   HistogramBarSeries,
   Position,
   Settings,
@@ -46,9 +44,9 @@ export const SignalsHistogram = React.memo<HistogramSignalsProps>(
     const theme = useTheme();
 
     const chartSize: ChartSizeArray = useMemo(() => ['100%', chartHeight], [chartHeight]);
-    const xAxisId = useMemo(() => getAxisId('signalsHistogramAxisX'), []);
-    const yAxisId = useMemo(() => getAxisId('signalsHistogramAxisY'), []);
-    const id = useMemo(() => getSpecId('signalsHistogram'), []);
+    const xAxisId = 'signalsHistogramAxisX';
+    const yAxisId = 'signalsHistogramAxisY';
+    const id = 'signalsHistogram';
     const yAccessors = useMemo(() => ['y'], []);
     const splitSeriesAccessors = useMemo(() => ['g'], []);
     const tickFormat = useMemo(() => histogramDateTimeFormatter([from, to]), [from, to]);
@@ -69,6 +67,7 @@ export const SignalsHistogram = React.memo<HistogramSignalsProps>(
             legendPosition={legendPosition}
             onBrushEnd={updateDateRange}
             showLegend
+            showLegendExtra
             theme={theme}
           />
 

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx
@@ -65,7 +65,8 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat
             <Chart>
               <Settings
                 xDomain={{ min, max }}
-                showLegend={true}
+                showLegend
+                showLegendExtra
                 legendPosition={Position.Bottom}
                 onBrushEnd={onBrushEnd}
               />

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx
@@ -68,7 +68,7 @@ export const MonitorBarSeries = ({ dangerColor, histogramSeries }: MonitorBarSer
         />
         <BarSeries
           id={id}
-          customSeriesColors={[dangerColor]}
+          color={dangerColor}
           data={(histogramSeries || []).map(({ timestamp, down }) => [timestamp, down])}
           name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', {
             defaultMessage: 'Down checks',

diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx
@@ -122,7 +122,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
           />
 
           <BarSeries
-            customSeriesColors={[danger]}
+            color={danger}
             data={histogram.map(({ x, downCount }) => [x, downCount || 0])}
             id={downSpecId}
             name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', {
@@ -136,7 +136,7 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
             yScaleType="linear"
           />
           <BarSeries
-            customSeriesColors={[gray]}
+            color={gray}
             data={histogram.map(({ x, upCount }) => [x, upCount || 0])}
             id={upMonitorsId}
             name={upMonitorsId}

diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx
@@ -66,7 +66,7 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr
       data={series.rows}
       stackAccessors={stack ? ['timestamp'] : void 0}
       areaSeriesStyle={seriesAreaStyle}
-      customSeriesColors={[color]}
+      color={color}
     />
   );
 };
@@ -101,7 +101,7 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) =>
       data={series.rows}
       stackAccessors={stack ? ['timestamp'] : void 0}
       barSeriesStyle={seriesBarStyle}
-      customSeriesColors={[color]}
+      color={color}
     />
   );
 };
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx
@@ -85,6 +85,7 @@ export const LogEntryRateBarChart: React.FunctionComponent<{
           tooltip={tooltipProps}
           theme={isDarkMode ? DARK_THEME : LIGHT_THEME}
           showLegend
+          showLegendExtra
           legendPosition="right"
           xDomain={{ min: timeRange.startTime, max: timeRange.endTime }}
         />

diff --git a/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx
@@ -120,7 +120,8 @@ export const ChartSectionVis = ({
             tooltip={tooltipProps}
             onBrushEnd={handleTimeChange}
             theme={getChartTheme(isDarkMode)}
-            showLegend={true}
+            showLegend
+            showLegendExtra
             legendPosition="right"
           />
         </Chart>

diff --git a/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx b/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx
@@ -53,7 +53,7 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
       yAccessors={['value']}
       data={series.data}
       areaSeriesStyle={style}
-      customSeriesColors={color ? [color] : void 0}
+      color={color ? color : void 0}
       stackAccessors={stack ? ['timestamp'] : void 0}
     />
   );
@@ -80,7 +80,7 @@ export const BarChart = ({ id, color, series, name, type, stack }: Props) => {
       yAccessors={['value']}
       data={series.data}
       barSeriesStyle={style}
-      customSeriesColors={color ? [color] : void 0}
+      color={color ? color : void 0}
       stackAccessors={stack ? ['timestamp'] : void 0}
     />
   );