Upgrade @elastic/charts to 6.0.1 (#38783) (#39077)

* Upgrade @elastic/charts to 5.2.0

* Upgrade @elastic/charts to 6.0.1

* Add darkMode theme mock

package.json

@@ -102,7 +102,7 @@
     "@babel/core": "7.4.5",
     "@babel/polyfill": "7.4.4",
     "@babel/register": "7.4.4",
-    "@elastic/charts": "^4.2.6",
+    "@elastic/charts": "^6.0.1",
     "@elastic/datemath": "5.0.2",
     "@elastic/eui": "11.3.2",
     "@elastic/filesaver": "1.1.2",
@@ -440,4 +440,4 @@
     "node": "10.15.2",
     "yarn": "^1.10.1"
   }
-}
+}

src/legacy/ui/ui_render/ui_render_mixin.js

@@ -56,6 +56,7 @@ export function uiRenderMixin(kbnServer, server, config) {
 
   server.exposeStaticDir('/node_modules/@elastic/eui/dist/{path*}', fromRoot('node_modules/@elastic/eui/dist'));
   server.exposeStaticDir('/node_modules/@kbn/ui-framework/dist/{path*}', fromRoot('node_modules/@kbn/ui-framework/dist'));
+  server.exposeStaticDir('/node_modules/@elastic/charts/dist/{path*}', fromRoot('node_modules/@elastic/charts/dist'));
 
   const translationsCache = { translations: null, hash: null };
   server.route({
@@ -120,9 +121,11 @@ export function uiRenderMixin(kbnServer, server, config) {
               [
                 `${basePath}/node_modules/@elastic/eui/dist/eui_theme_dark.css`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_dark.css`,
+                `${basePath}/node_modules/@elastic/charts/dist/theme_only_dark.css`,
               ] : [
                 `${basePath}/node_modules/@elastic/eui/dist/eui_theme_light.css`,
                 `${basePath}/node_modules/@kbn/ui-framework/dist/kui_light.css`,
+                `${basePath}/node_modules/@elastic/charts/dist/theme_only_light.css`,
               ]
           ),
           `${regularBundlePath}/${darkMode ? 'dark' : 'light'}_theme.style.css`,

x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx

@@ -8,7 +8,6 @@ import React, { useCallback } from 'react';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { Chart, Axis, Position, timeFormatter, getAxisId, Settings } from '@elastic/charts';
-import '@elastic/charts/dist/style.css';
 import { first } from 'lodash';
 import { niceTimeFormatByDay } from '@elastic/charts/dist/utils/data/formatters';
 import moment from 'moment';
@@ -24,6 +23,7 @@ import { MetricsExplorerChartContextMenu } from './chart_context_menu';
 import { SourceQuery } from '../../graphql/types';
 import { MetricsExplorerEmptyChart } from './empty_chart';
 import { MetricsExplorerNoMetrics } from './no_metrics';
+import { getChartTheme } from './helpers/get_chart_theme';
 
 interface Props {
   intl: InjectedIntl;
@@ -103,7 +103,7 @@ export const MetricsExplorerChart = injectI18n(
                 tickFormat={dateFormatter}
               />
               <Axis id={getAxisId('values')} position={Position.Left} tickFormat={yAxisFormater} />
-              <Settings onBrushEnd={handleTimeChange} />
+              <Settings onBrushEnd={handleTimeChange} theme={getChartTheme()} />
             </Chart>
           ) : options.metrics.length > 0 ? (
             <MetricsExplorerEmptyChart />

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

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import chrome from 'ui/chrome';
+import { Theme, LIGHT_THEME, DARK_THEME } from '@elastic/charts';
+
+export function getChartTheme(): Theme {
+  const isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode');
+  return isDarkMode ? DARK_THEME : LIGHT_THEME;
+}

x-pack/plugins/infra/public/components/metrics_explorer/line_series.tsx

@@ -12,7 +12,6 @@ import {
   DataSeriesColorsValues,
   CustomSeriesColorsMap,
 } from '@elastic/charts';
-import '@elastic/charts/dist/style.css';
 import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
 import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette';
 import { createMetricLabel } from './helpers/create_metric_label';

x-pack/plugins/siem/public/components/charts/areachart.tsx

@@ -15,7 +15,6 @@ import {
   ScaleType,
   Settings,
 } from '@elastic/charts';
-import '@elastic/charts/dist/style.css';
 import {
   ChartConfigsData,
   ChartHolder,

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

@@ -12,8 +12,11 @@ import {
   getSpecId,
   mergeWithDefaultTheme,
   PartialTheme,
+  LIGHT_THEME,
+  DARK_THEME,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
+import chrome from 'ui/chrome';
 
 const chartHeight = 74;
 const FlexGroup = styled(EuiFlexGroup)`
@@ -102,5 +105,7 @@ export const getTheme = () => {
       barsPadding: 0.5,
     },
   };
-  return mergeWithDefaultTheme(theme);
+  const isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode');
+  const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
+  return mergeWithDefaultTheme(theme, defaultTheme);
 };

x-pack/plugins/siem/public/mock/ui_settings.ts

@@ -14,6 +14,8 @@ chrome.getUiSettingsClient().get.mockImplementation((key: string) => {
       return { pause: false, value: 0 };
     case 'siem:defaultIndex':
       return ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'];
+    case 'theme:darkMode':
+      return false;
     default:
       throw new Error(`Unexpected config key: ${key}`);
   }

yarn.lock

@@ -1531,10 +1531,10 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
-"@elastic/charts@^4.2.6":
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-4.2.6.tgz#19b8fa79758f58ebae6eeba750bea6a418b15659"
-  integrity sha512-ROsv3YwSCDsp09ObeVkAL9YsiNJsAY2kAtBwovRaNCcotI9ybNSQcqbTLlC9vZkduyQSsHBvRL/RAwY8btXE8g==
+"@elastic/charts@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-6.0.1.tgz#dd3fd512946870d941baf16402ec82741d680ae9"
+  integrity sha512-31n/ceU5b0USc2Mfbli+/xBadjWCbakP2Nr/KjIWaJCMIljY/VXkeSWL//CK+wA3T19utyxQWlP+s2B9Ol0isA==
   dependencies:
     "@types/d3-shape" "^1.3.1"
     "@types/luxon" "^1.11.1"
@@ -1545,7 +1545,6 @@
     d3-shape "^1.3.4"
     fp-ts "^1.14.2"
     konva "^2.6.0"
-    lodash "^4.17.11"
     luxon "^1.11.3"
     mobx "^4.9.2"
     mobx-react "^5.4.3"
@@ -1556,6 +1555,8 @@
     react-konva "16.8.3"
     react-spring "^8.0.8"
     resize-observer-polyfill "^1.5.1"
+    ts-debounce "^1.0.0"
+    uuid "^3.3.2"
 
 "@elastic/elasticsearch@^7.0.0-rc.2":
   version "7.0.0-rc.2"
@@ -26722,6 +26723,11 @@ trunc-text@1.0.2:
   resolved "https://registry.yarnpkg.com/trunc-text/-/trunc-text-1.0.2.tgz#b582bb3ddea9c9adc25017d737c48ebdd2157406"
   integrity sha1-tYK7Pd6pya3CUBfXN8SOvdIVdAY=
 
+ts-debounce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/ts-debounce/-/ts-debounce-1.0.0.tgz#e433301744ba75fe25466f7f23e1382c646aae6a"
+  integrity sha512-V+IzWj418IoqqxVJD6I0zjPtgIyvAJ8VyViqzcxZ0JRiJXsi5mCmy1yUKkWd2gUygT28a8JsVFCgqdrf2pLUHQ==
+
 ts-invariant@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.2.1.tgz#3d587f9d6e3bded97bf9ec17951dd9814d5a9d3f"