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
This commit is contained in:
parent
1c495aec2f
commit
922e111dd5
|
@ -102,7 +102,7 @@
|
||||||
"@babel/core": "7.4.5",
|
"@babel/core": "7.4.5",
|
||||||
"@babel/polyfill": "7.4.4",
|
"@babel/polyfill": "7.4.4",
|
||||||
"@babel/register": "7.4.4",
|
"@babel/register": "7.4.4",
|
||||||
"@elastic/charts": "^4.2.6",
|
"@elastic/charts": "^6.0.1",
|
||||||
"@elastic/datemath": "5.0.2",
|
"@elastic/datemath": "5.0.2",
|
||||||
"@elastic/eui": "11.3.2",
|
"@elastic/eui": "11.3.2",
|
||||||
"@elastic/filesaver": "1.1.2",
|
"@elastic/filesaver": "1.1.2",
|
||||||
|
@ -441,4 +441,4 @@
|
||||||
"node": "10.15.2",
|
"node": "10.15.2",
|
||||||
"yarn": "^1.10.1"
|
"yarn": "^1.10.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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/@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/@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 };
|
const translationsCache = { translations: null, hash: null };
|
||||||
server.route({
|
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/@elastic/eui/dist/eui_theme_dark.css`,
|
||||||
`${basePath}/node_modules/@kbn/ui-framework/dist/kui_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/@elastic/eui/dist/eui_theme_light.css`,
|
||||||
`${basePath}/node_modules/@kbn/ui-framework/dist/kui_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`,
|
`${regularBundlePath}/${darkMode ? 'dark' : 'light'}_theme.style.css`,
|
||||||
|
|
|
@ -8,7 +8,6 @@ import React, { useCallback } from 'react';
|
||||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||||
import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||||
import { Chart, Axis, Position, timeFormatter, getAxisId, Settings } from '@elastic/charts';
|
import { Chart, Axis, Position, timeFormatter, getAxisId, Settings } from '@elastic/charts';
|
||||||
import '@elastic/charts/dist/style.css';
|
|
||||||
import { first } from 'lodash';
|
import { first } from 'lodash';
|
||||||
import { niceTimeFormatByDay } from '@elastic/charts/dist/utils/data/formatters';
|
import { niceTimeFormatByDay } from '@elastic/charts/dist/utils/data/formatters';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
@ -24,6 +23,7 @@ import { MetricsExplorerChartContextMenu } from './chart_context_menu';
|
||||||
import { SourceQuery } from '../../graphql/types';
|
import { SourceQuery } from '../../graphql/types';
|
||||||
import { MetricsExplorerEmptyChart } from './empty_chart';
|
import { MetricsExplorerEmptyChart } from './empty_chart';
|
||||||
import { MetricsExplorerNoMetrics } from './no_metrics';
|
import { MetricsExplorerNoMetrics } from './no_metrics';
|
||||||
|
import { getChartTheme } from './helpers/get_chart_theme';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
intl: InjectedIntl;
|
intl: InjectedIntl;
|
||||||
|
@ -103,7 +103,7 @@ export const MetricsExplorerChart = injectI18n(
|
||||||
tickFormat={dateFormatter}
|
tickFormat={dateFormatter}
|
||||||
/>
|
/>
|
||||||
<Axis id={getAxisId('values')} position={Position.Left} tickFormat={yAxisFormater} />
|
<Axis id={getAxisId('values')} position={Position.Left} tickFormat={yAxisFormater} />
|
||||||
<Settings onBrushEnd={handleTimeChange} />
|
<Settings onBrushEnd={handleTimeChange} theme={getChartTheme()} />
|
||||||
</Chart>
|
</Chart>
|
||||||
) : options.metrics.length > 0 ? (
|
) : options.metrics.length > 0 ? (
|
||||||
<MetricsExplorerEmptyChart />
|
<MetricsExplorerEmptyChart />
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -12,7 +12,6 @@ import {
|
||||||
DataSeriesColorsValues,
|
DataSeriesColorsValues,
|
||||||
CustomSeriesColorsMap,
|
CustomSeriesColorsMap,
|
||||||
} from '@elastic/charts';
|
} from '@elastic/charts';
|
||||||
import '@elastic/charts/dist/style.css';
|
|
||||||
import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
|
import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types';
|
||||||
import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette';
|
import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette';
|
||||||
import { createMetricLabel } from './helpers/create_metric_label';
|
import { createMetricLabel } from './helpers/create_metric_label';
|
||||||
|
|
|
@ -15,7 +15,6 @@ import {
|
||||||
ScaleType,
|
ScaleType,
|
||||||
Settings,
|
Settings,
|
||||||
} from '@elastic/charts';
|
} from '@elastic/charts';
|
||||||
import '@elastic/charts/dist/style.css';
|
|
||||||
import {
|
import {
|
||||||
ChartConfigsData,
|
ChartConfigsData,
|
||||||
ChartHolder,
|
ChartHolder,
|
||||||
|
|
|
@ -12,8 +12,11 @@ import {
|
||||||
getSpecId,
|
getSpecId,
|
||||||
mergeWithDefaultTheme,
|
mergeWithDefaultTheme,
|
||||||
PartialTheme,
|
PartialTheme,
|
||||||
|
LIGHT_THEME,
|
||||||
|
DARK_THEME,
|
||||||
} from '@elastic/charts';
|
} from '@elastic/charts';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
|
import chrome from 'ui/chrome';
|
||||||
|
|
||||||
const chartHeight = 74;
|
const chartHeight = 74;
|
||||||
const FlexGroup = styled(EuiFlexGroup)`
|
const FlexGroup = styled(EuiFlexGroup)`
|
||||||
|
@ -102,5 +105,7 @@ export const getTheme = () => {
|
||||||
barsPadding: 0.5,
|
barsPadding: 0.5,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
return mergeWithDefaultTheme(theme);
|
const isDarkMode = chrome.getUiSettingsClient().get('theme:darkMode');
|
||||||
|
const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
|
||||||
|
return mergeWithDefaultTheme(theme, defaultTheme);
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,6 +14,8 @@ chrome.getUiSettingsClient().get.mockImplementation((key: string) => {
|
||||||
return { pause: false, value: 0 };
|
return { pause: false, value: 0 };
|
||||||
case 'siem:defaultIndex':
|
case 'siem:defaultIndex':
|
||||||
return ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'];
|
return ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'];
|
||||||
|
case 'theme:darkMode':
|
||||||
|
return false;
|
||||||
default:
|
default:
|
||||||
throw new Error(`Unexpected config key: ${key}`);
|
throw new Error(`Unexpected config key: ${key}`);
|
||||||
}
|
}
|
||||||
|
|
16
yarn.lock
16
yarn.lock
|
@ -1546,10 +1546,10 @@
|
||||||
lodash "^4.17.11"
|
lodash "^4.17.11"
|
||||||
to-fast-properties "^2.0.0"
|
to-fast-properties "^2.0.0"
|
||||||
|
|
||||||
"@elastic/charts@^4.2.6":
|
"@elastic/charts@^6.0.1":
|
||||||
version "4.2.6"
|
version "6.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-4.2.6.tgz#19b8fa79758f58ebae6eeba750bea6a418b15659"
|
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-6.0.1.tgz#dd3fd512946870d941baf16402ec82741d680ae9"
|
||||||
integrity sha512-ROsv3YwSCDsp09ObeVkAL9YsiNJsAY2kAtBwovRaNCcotI9ybNSQcqbTLlC9vZkduyQSsHBvRL/RAwY8btXE8g==
|
integrity sha512-31n/ceU5b0USc2Mfbli+/xBadjWCbakP2Nr/KjIWaJCMIljY/VXkeSWL//CK+wA3T19utyxQWlP+s2B9Ol0isA==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/d3-shape" "^1.3.1"
|
"@types/d3-shape" "^1.3.1"
|
||||||
"@types/luxon" "^1.11.1"
|
"@types/luxon" "^1.11.1"
|
||||||
|
@ -1560,7 +1560,6 @@
|
||||||
d3-shape "^1.3.4"
|
d3-shape "^1.3.4"
|
||||||
fp-ts "^1.14.2"
|
fp-ts "^1.14.2"
|
||||||
konva "^2.6.0"
|
konva "^2.6.0"
|
||||||
lodash "^4.17.11"
|
|
||||||
luxon "^1.11.3"
|
luxon "^1.11.3"
|
||||||
mobx "^4.9.2"
|
mobx "^4.9.2"
|
||||||
mobx-react "^5.4.3"
|
mobx-react "^5.4.3"
|
||||||
|
@ -1571,6 +1570,8 @@
|
||||||
react-konva "16.8.3"
|
react-konva "16.8.3"
|
||||||
react-spring "^8.0.8"
|
react-spring "^8.0.8"
|
||||||
resize-observer-polyfill "^1.5.1"
|
resize-observer-polyfill "^1.5.1"
|
||||||
|
ts-debounce "^1.0.0"
|
||||||
|
uuid "^3.3.2"
|
||||||
|
|
||||||
"@elastic/elasticsearch@^7.0.0-rc.2":
|
"@elastic/elasticsearch@^7.0.0-rc.2":
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/trunc-text/-/trunc-text-1.0.2.tgz#b582bb3ddea9c9adc25017d737c48ebdd2157406"
|
||||||
integrity sha1-tYK7Pd6pya3CUBfXN8SOvdIVdAY=
|
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:
|
ts-invariant@^0.2.1:
|
||||||
version "0.2.1"
|
version "0.2.1"
|
||||||
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.2.1.tgz#3d587f9d6e3bded97bf9ec17951dd9814d5a9d3f"
|
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.2.1.tgz#3d587f9d6e3bded97bf9ec17951dd9814d5a9d3f"
|
||||||
|
|
Loading…
Reference in a new issue