From 922e111dd504cb0a5f4850042bdbd68fc859ec52 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 17 Jun 2019 15:45:53 +0200 Subject: [PATCH] Upgrade @elastic/charts to 6.0.1 (#38783) * Upgrade @elastic/charts to 5.2.0 * Upgrade @elastic/charts to 6.0.1 * Add darkMode theme mock --- package.json | 4 ++-- src/legacy/ui/ui_render/ui_render_mixin.js | 3 +++ .../public/components/metrics_explorer/chart.tsx | 4 ++-- .../metrics_explorer/helpers/get_chart_theme.ts | 13 +++++++++++++ .../components/metrics_explorer/line_series.tsx | 1 - .../siem/public/components/charts/areachart.tsx | 1 - .../siem/public/components/charts/common.tsx | 7 ++++++- x-pack/plugins/siem/public/mock/ui_settings.ts | 2 ++ yarn.lock | 16 +++++++++++----- 9 files changed, 39 insertions(+), 12 deletions(-) create mode 100644 x-pack/plugins/infra/public/components/metrics_explorer/helpers/get_chart_theme.ts diff --git a/package.json b/package.json index 5ae8763ffd18..b9cee916718a 100644 --- a/package.json +++ b/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", @@ -441,4 +441,4 @@ "node": "10.15.2", "yarn": "^1.10.1" } -} +} \ No newline at end of file diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js index 597fbc422e6b..128a0bac6e32 100644 --- a/src/legacy/ui/ui_render/ui_render_mixin.js +++ b/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`, diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx index dfeb88553f20..8d86458ca355 100644 --- a/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx +++ b/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} /> - + ) : options.metrics.length > 0 ? ( diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/helpers/get_chart_theme.ts b/x-pack/plugins/infra/public/components/metrics_explorer/helpers/get_chart_theme.ts new file mode 100644 index 000000000000..7be2e54d47d7 --- /dev/null +++ b/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; +} diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/line_series.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/line_series.tsx index 3c0924c4ca2c..6e29d9436279 100644 --- a/x-pack/plugins/infra/public/components/metrics_explorer/line_series.tsx +++ b/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'; diff --git a/x-pack/plugins/siem/public/components/charts/areachart.tsx b/x-pack/plugins/siem/public/components/charts/areachart.tsx index 0e2c74509f2c..67cd9f730a0d 100644 --- a/x-pack/plugins/siem/public/components/charts/areachart.tsx +++ b/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, diff --git a/x-pack/plugins/siem/public/components/charts/common.tsx b/x-pack/plugins/siem/public/components/charts/common.tsx index cbae797cd977..1d3b0ed3531d 100644 --- a/x-pack/plugins/siem/public/components/charts/common.tsx +++ b/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); }; diff --git a/x-pack/plugins/siem/public/mock/ui_settings.ts b/x-pack/plugins/siem/public/mock/ui_settings.ts index c6d72de77282..07c14631cd96 100644 --- a/x-pack/plugins/siem/public/mock/ui_settings.ts +++ b/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}`); } diff --git a/yarn.lock b/yarn.lock index 3ef8ec04ba89..35a11f7d1d51 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1546,10 +1546,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" @@ -1560,7 +1560,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" @@ -1571,6 +1570,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" @@ -26779,6 +26780,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"