From 34cd64ec06d89a2cca463419d35ae665564285fc Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 2 Aug 2019 14:44:08 +0200 Subject: [PATCH 1/3] Upgrade elastic/charts to 8.1.4 --- package.json | 2 +- .../metrics/sections/series_chart.tsx | 21 ++------ .../metrics_explorer/series_chart.tsx | 12 ++--- .../components/charts/common/settings.ts | 4 -- .../public/components/charts/areachart.tsx | 48 ++++++++----------- yarn.lock | 8 ++-- 6 files changed, 33 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 2d4259d5d185..244250318a7c 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/core": "7.4.5", "@babel/polyfill": "7.4.4", "@babel/register": "7.4.4", - "@elastic/charts": "^7.2.1", + "@elastic/charts": "^8.1.4", "@elastic/datemath": "5.0.2", "@elastic/eui": "13.0.0", "@elastic/filesaver": "1.1.2", diff --git a/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx b/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx index 10d05885cbd1..ce359eed05a0 100644 --- a/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx +++ b/x-pack/legacy/plugins/infra/public/components/metrics/sections/series_chart.tsx @@ -12,6 +12,9 @@ import { getSpecId, DataSeriesColorsValues, CustomSeriesColorsMap, + RecursivePartial, + BarSeriesStyle, + AreaSeriesStyle, } from '@elastic/charts'; import { InfraMetricLayoutVisualizationType } from '../../../pages/metrics/layouts/types'; import { InfraDataSeries } from '../../../graphql/types'; @@ -33,26 +36,18 @@ export const SeriesChart = (props: Props) => { }; export const AreaChart = ({ id, color, series, name, type, stack }: Props) => { - const style = { + const style: RecursivePartial = { area: { - fill: color, opacity: 1, visible: InfraMetricLayoutVisualizationType.area === type, }, line: { - stroke: color, strokeWidth: InfraMetricLayoutVisualizationType.area === type ? 1 : 2, visible: true, }, - border: { - visible: false, - strokeWidth: 2, - stroke: color, - }, point: { visible: false, radius: 0.2, - stroke: color, strokeWidth: 2, opacity: 1, }, @@ -80,19 +75,13 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => { }; export const BarChart = ({ id, color, series, name, type, stack }: Props) => { - const style = { + const style: RecursivePartial = { rectBorder: { stroke: color, strokeWidth: 1, visible: true, }, - border: { - visible: false, - strokeWidth: 2, - stroke: color, - }, rect: { - fill: color, opacity: 1, }, }; diff --git a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/series_chart.tsx b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/series_chart.tsx index b077d7c17a0f..74faf10b7a6d 100644 --- a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/series_chart.tsx +++ b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/series_chart.tsx @@ -11,6 +11,8 @@ import { DataSeriesColorsValues, CustomSeriesColorsMap, AreaSeries, + RecursivePartial, + AreaSeriesStyle, } from '@elastic/charts'; import { MetricsExplorerSeries } from '../../../server/routes/metrics_explorer/types'; import { colorTransformer, MetricsExplorerColor } from '../../../common/color_palette'; @@ -43,26 +45,18 @@ export const MetricExplorerSeriesChart = ({ metric, id, series, type, stack }: P customColors.set(colors, color); const chartId = `series-${series.id}-${yAccessor}`; - const seriesAreaStyle = { + const seriesAreaStyle: RecursivePartial = { line: { - stroke: color, strokeWidth: 2, visible: true, }, area: { - fill: color, opacity: 0.5, visible: type === MetricsExplorerChartType.area, }, - border: { - visible: false, - strokeWidth: 2, - stroke: color, - }, point: { visible: false, radius: 0.2, - stroke: color, strokeWidth: 2, opacity: 1, }, diff --git a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/settings.ts b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/settings.ts index 6543466bfd25..8c56edc1dc2c 100644 --- a/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/settings.ts +++ b/x-pack/legacy/plugins/ml/public/jobs/new_job_new/pages/components/charts/common/settings.ts @@ -31,7 +31,6 @@ export const defaultChartSettings: ChartSettings = { export const seriesStyle = { line: { - stroke: '', strokeWidth: 2, visible: true, opacity: 1, @@ -39,17 +38,14 @@ export const seriesStyle = { border: { visible: false, strokeWidth: 0, - stroke: '', }, point: { visible: false, radius: 2, - stroke: '', strokeWidth: 4, opacity: 0.5, }, area: { - fill: '', opacity: 0.25, visible: false, }, diff --git a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx index 4784e3dc45d1..23d958d1a8d4 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/areachart.tsx @@ -14,6 +14,8 @@ import { Position, ScaleType, Settings, + AreaSeriesStyle, + RecursivePartial, } from '@elastic/charts'; import { getOr, get } from 'lodash/fp'; import { @@ -28,33 +30,23 @@ import { import { AutoSizer } from '../auto_sizer'; // custom series styles: https://ela.st/areachart-styling -const getSeriesLineStyle = (color: string | undefined) => { - return color - ? { - area: { - fill: color, - opacity: 0.04, - visible: true, - }, - line: { - stroke: color, - strokeWidth: 1, - visible: true, - }, - border: { - visible: false, - strokeWidth: 1, - stroke: color, - }, - point: { - visible: false, - radius: 0.2, - stroke: color, - strokeWidth: 1, - opacity: 1, - }, - } - : undefined; +const getSeriesLineStyle = (): RecursivePartial => { + return { + area: { + opacity: 0.04, + visible: true, + }, + line: { + strokeWidth: 1, + visible: true, + }, + point: { + visible: false, + radius: 0.2, + strokeWidth: 1, + opacity: 1, + }, + }; }; // https://ela.st/multi-areaseries @@ -87,7 +79,7 @@ export const AreaChartBaseComponent = React.memo<{ timeZone={browserTimezone} xAccessor="x" yAccessors={['y']} - areaSeriesStyle={getSeriesLineStyle(series.color)} + areaSeriesStyle={getSeriesLineStyle()} customSeriesColors={getSeriesStyle(seriesKey, series.color)} /> ) : null; diff --git a/yarn.lock b/yarn.lock index 15b0b911e8c6..3a74ab84294b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1584,10 +1584,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^7.2.1": - version "7.2.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-7.2.1.tgz#75e6ed23ebb4014ea1df8ee232905352525ddfca" - integrity sha512-cRvuRkZkMIYFjEJ3igPb3Uqv+aYJnoC+ZYkPdoCHHoiw4Dlwdl3xQVuzJECWoE1oZDcFq/MKjOFFTtFDjm57Ug== +"@elastic/charts@^8.1.4": + version "8.1.4" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.4.tgz#61e368bea6c4e562bce7683e0b3ac010bcca6b15" + integrity sha512-T++Z+m52vclyyPWjqbytr0CEWKcn6D8RU80K/it+Qwc2cbeg/wfirMUV6AFHj3C9E4HADZOWC4ryH2gc6n6TVg== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1" From 53d7a5ac04c16fa8261515682ce389598fc28e9c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 5 Aug 2019 15:24:01 +0200 Subject: [PATCH 2/3] Fix wrong imports --- x-pack/legacy/plugins/siem/public/components/charts/common.tsx | 2 +- .../public/components/functional/charts/get_colors_map.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index c8646900e525..2540723a029f 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -15,9 +15,9 @@ import { LIGHT_THEME, DARK_THEME, ScaleType, + TickFormatter, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { TickFormatter } from '@elastic/charts/dist/lib/series/specs'; import chrome from 'ui/chrome'; import moment from 'moment-timezone'; diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts b/x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts index 47f0723ef07a..83d181d91f8d 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/get_colors_map.ts @@ -4,8 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { DataSeriesColorsValues } from '@elastic/charts'; -import { SpecId } from '@elastic/charts/dist/lib/utils/ids'; +import { DataSeriesColorsValues, SpecId } from '@elastic/charts'; /** * This is a helper function used to more easily define a basic map From 4391d40e0a82c60508303075c85df6761751777c Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 5 Aug 2019 16:03:42 +0200 Subject: [PATCH 3/3] Update to 8.1.6 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 5ca6d817aa1e..cf38c4714d58 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/core": "7.4.5", "@babel/polyfill": "7.4.4", "@babel/register": "7.4.4", - "@elastic/charts": "^8.1.4", + "@elastic/charts": "^8.1.6", "@elastic/datemath": "5.0.2", "@elastic/eui": "13.1.1", "@elastic/filesaver": "1.1.2", diff --git a/yarn.lock b/yarn.lock index 3f01816ac4ee..c978072df12a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1584,10 +1584,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^8.1.4": - version "8.1.4" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.4.tgz#61e368bea6c4e562bce7683e0b3ac010bcca6b15" - integrity sha512-T++Z+m52vclyyPWjqbytr0CEWKcn6D8RU80K/it+Qwc2cbeg/wfirMUV6AFHj3C9E4HADZOWC4ryH2gc6n6TVg== +"@elastic/charts@^8.1.6": + version "8.1.6" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.6.tgz#d8d0d2c16f21126293dd35979f6405de2ba2d95f" + integrity sha512-1Kd3GlIlwK39tbkgZe+Wtk4FWJjMBV5cnlClgmUfgzTUxF6we8syTLh6vqZQJ8eyGKZamfyLr23wtdt9MCx1HA== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1"