From 2b95c18e1c506d9f489b3dc0b167c25e8d474a34 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sat, 18 Dec 2021 14:16:27 -0600 Subject: [PATCH 01/23] bump version --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index db930da7b6968..3437c07f035ef 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.0", "@elastic/apm-rum-react": "^1.3.2", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "40.2.0", + "@elastic/charts": "41.0.0", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35", "@elastic/ems-client": "8.0.0", diff --git a/yarn.lock b/yarn.lock index 75d44983648ab..34549a94937d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1527,10 +1527,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@40.2.0": - version "40.2.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-40.2.0.tgz#2e329ce4f495731f478cbaf2f8f3b89b5167a65b" - integrity sha512-N0t7YK58Kce/s9LEgaocrD75NYuFMwrcI1QNIPcwZ9IAOHY8/9yRHD5Ipoz0caGibAgOE8OunGkpyPY/NHKB5Q== +"@elastic/charts@41.0.0": + version "41.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.0.tgz#fcc83b86d72aa3f2787b2652e5d72076ad756cec" + integrity sha512-8MhmoYfoBGrQWDxF+XW/QCfrJv0Oyd0HekYFW7I6Q/C9KdtAyhHloQ4u4NC2NSCOz6yQgoFwCml0hI+shrPSCA== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" @@ -10455,7 +10455,7 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.9: resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2" integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A== -core-js@^3.19.3, core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2, core-js@^3.8.3: +core-js@^3.0.4, core-js@^3.19.3, core-js@^3.6.5, core-js@^3.8.2, core-js@^3.8.3: version "3.19.3" resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.3.tgz#6df8142a996337503019ff3235a7022d7cdf4559" integrity sha512-LeLBMgEGSsG7giquSzvgBrTS7V5UL6ks3eQlUSbN8dJStlLFiRzUm5iqsRyzUB8carhfKjkJ2vzKqE6z1Vga9g== From ab6094142e5e18a60db7c461a4211d50575923c5 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sat, 18 Dec 2021 14:20:25 -0600 Subject: [PATCH 02/23] fix breaking changes in partition charts --- .../vis_types/pie/public/pie_component.tsx | 11 ++- .../vis_types/pie/public/utils/get_config.ts | 80 ----------------- ...ig.test.ts => get_partition_theme.test.ts} | 16 ++-- .../pie/public/utils/get_partition_theme.ts | 85 +++++++++++++++++++ .../vis_types/pie/public/utils/index.ts | 2 +- .../Charts/VisitorBreakdownChart.tsx | 16 ++-- .../service_profiling_flamegraph.tsx | 30 ++++--- .../pie_visualization/render_function.tsx | 81 +++++++++--------- .../components/common/charts/donut_chart.tsx | 29 ++++--- 9 files changed, 184 insertions(+), 166 deletions(-) delete mode 100644 src/plugins/vis_types/pie/public/utils/get_config.ts rename src/plugins/vis_types/pie/public/utils/{get_config.test.ts => get_partition_theme.test.ts} (79%) create mode 100644 src/plugins/vis_types/pie/public/utils/get_partition_theme.ts diff --git a/src/plugins/vis_types/pie/public/pie_component.tsx b/src/plugins/vis_types/pie/public/pie_component.tsx index 053d06bb84e29..d9754e6647f67 100644 --- a/src/plugins/vis_types/pie/public/pie_component.tsx +++ b/src/plugins/vis_types/pie/public/pie_component.tsx @@ -19,6 +19,7 @@ import { TooltipProps, TooltipType, SeriesIdentifier, + PartitionLayout, } from '@elastic/charts'; import { LegendToggle, @@ -43,7 +44,7 @@ import { canFilter, getFilterClickData, getFilterEventData, - getConfig, + getPartitionTheme, getColumns, getSplitDimensionAccessor, } from './utils'; @@ -246,8 +247,8 @@ const PieComponent = (props: PieComponentProps) => { return 1; }, [visData.rows, metricColumn]); - const config = useMemo( - () => getConfig(visParams, chartTheme, dimensions, rescaleFactor), + const themeOverrides = useMemo( + () => getPartitionTheme(visParams, chartTheme, dimensions, rescaleFactor), [chartTheme, visParams, dimensions, rescaleFactor] ); const tooltip: TooltipProps = { @@ -363,6 +364,7 @@ const PieComponent = (props: PieComponentProps) => { services.fieldFormats )} theme={[ + themeOverrides, chartTheme, { legend: { @@ -379,6 +381,8 @@ const PieComponent = (props: PieComponentProps) => { id="pie" smallMultiples={SMALL_MULTIPLES_ID} data={visData.rows} + layout={PartitionLayout.sunburst} + specialFirstInnermostSector={false} valueAccessor={(d: Datum) => getSliceValue(d, metricColumn)} percentFormatter={(d: number) => percentFormatter.convert(d / 100)} valueGetter={ @@ -394,7 +398,6 @@ const PieComponent = (props: PieComponentProps) => { : metricFieldFormatter.convert(d) } layers={layers} - config={config} topGroove={!visParams.labels.show ? 0 : undefined} /> diff --git a/src/plugins/vis_types/pie/public/utils/get_config.ts b/src/plugins/vis_types/pie/public/utils/get_config.ts deleted file mode 100644 index 9f67155145820..0000000000000 --- a/src/plugins/vis_types/pie/public/utils/get_config.ts +++ /dev/null @@ -1,80 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import { PartitionConfig, PartitionLayout, RecursivePartial, Theme } from '@elastic/charts'; -import { LabelPositions, PieVisParams, PieContainerDimensions } from '../types'; -const MAX_SIZE = 1000; - -export const getConfig = ( - visParams: PieVisParams, - chartTheme: RecursivePartial, - dimensions?: PieContainerDimensions, - rescaleFactor: number = 1 -): RecursivePartial => { - // On small multiples we want the labels to only appear inside - const isSplitChart = Boolean(visParams.dimensions.splitColumn || visParams.dimensions.splitRow); - const usingMargin = - dimensions && !isSplitChart - ? { - margin: { - top: (1 - Math.min(1, MAX_SIZE / dimensions?.height)) / 2, - bottom: (1 - Math.min(1, MAX_SIZE / dimensions?.height)) / 2, - left: (1 - Math.min(1, MAX_SIZE / dimensions?.width)) / 2, - right: (1 - Math.min(1, MAX_SIZE / dimensions?.width)) / 2, - }, - } - : null; - - const usingOuterSizeRatio = - dimensions && !isSplitChart - ? { - outerSizeRatio: - // Cap the ratio to 1 and then rescale - rescaleFactor * Math.min(MAX_SIZE / Math.min(dimensions?.width, dimensions?.height), 1), - } - : null; - const config: RecursivePartial = { - partitionLayout: PartitionLayout.sunburst, - fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily, - ...usingOuterSizeRatio, - specialFirstInnermostSector: false, - minFontSize: 10, - maxFontSize: 16, - linkLabel: { - maxCount: 5, - fontSize: 11, - textColor: chartTheme.axes?.axisTitle?.fill, - maxTextLength: visParams.labels.truncate ?? undefined, - }, - sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, - sectorLineWidth: 1.5, - circlePadding: 4, - emptySizeRatio: visParams.isDonut ? 0.3 : 0, - ...usingMargin, - }; - if (!visParams.labels.show) { - // Force all labels to be linked, then prevent links from showing - config.linkLabel = { maxCount: 0, maximumSection: Number.POSITIVE_INFINITY }; - } - - if (visParams.labels.last_level && visParams.labels.show) { - config.linkLabel = { - maxCount: Number.POSITIVE_INFINITY, - maximumSection: Number.POSITIVE_INFINITY, - maxTextLength: visParams.labels.truncate ?? undefined, - }; - } - - if ( - (visParams.labels.position === LabelPositions.INSIDE || isSplitChart) && - visParams.labels.show - ) { - config.linkLabel = { maxCount: 0 }; - } - return config; -}; diff --git a/src/plugins/vis_types/pie/public/utils/get_config.test.ts b/src/plugins/vis_types/pie/public/utils/get_partition_theme.test.ts similarity index 79% rename from src/plugins/vis_types/pie/public/utils/get_config.test.ts rename to src/plugins/vis_types/pie/public/utils/get_partition_theme.test.ts index 82907002a19d5..7b6ab345766fd 100644 --- a/src/plugins/vis_types/pie/public/utils/get_config.test.ts +++ b/src/plugins/vis_types/pie/public/utils/get_partition_theme.test.ts @@ -6,19 +6,21 @@ * Side Public License, v 1. */ -import { getConfig } from './get_config'; +import { getPartitionTheme } from './get_partition_theme'; import { createMockPieParams } from '../mocks'; const visParams = createMockPieParams(); describe('getConfig', () => { it('should cap the outerSizeRatio to 1', () => { - expect(getConfig(visParams, {}, { width: 400, height: 400 }).outerSizeRatio).toBe(1); + expect( + getPartitionTheme(visParams, {}, { width: 400, height: 400 }).partition?.outerSizeRatio + ).toBe(1); }); it('should not have outerSizeRatio for split chart', () => { expect( - getConfig( + getPartitionTheme( { ...visParams, dimensions: { @@ -35,11 +37,11 @@ describe('getConfig', () => { }, {}, { width: 400, height: 400 } - ).outerSizeRatio + ).partition?.outerSizeRatio ).toBeUndefined(); expect( - getConfig( + getPartitionTheme( { ...visParams, dimensions: { @@ -56,11 +58,11 @@ describe('getConfig', () => { }, {}, { width: 400, height: 400 } - ).outerSizeRatio + ).partition?.outerSizeRatio ).toBeUndefined(); }); it('should not set outerSizeRatio if dimensions are not defined', () => { - expect(getConfig(visParams, {}).outerSizeRatio).toBeUndefined(); + expect(getPartitionTheme(visParams, {}).partition?.outerSizeRatio).toBeUndefined(); }); }); diff --git a/src/plugins/vis_types/pie/public/utils/get_partition_theme.ts b/src/plugins/vis_types/pie/public/utils/get_partition_theme.ts new file mode 100644 index 0000000000000..d8a7a7ec20a0e --- /dev/null +++ b/src/plugins/vis_types/pie/public/utils/get_partition_theme.ts @@ -0,0 +1,85 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { PartialTheme } from '@elastic/charts'; +import { Required } from '@kbn/utility-types'; +import { LabelPositions, PieVisParams, PieContainerDimensions } from '../types'; + +const MAX_SIZE = 1000; + +export const getPartitionTheme = ( + visParams: PieVisParams, + chartTheme: PartialTheme, + dimensions?: PieContainerDimensions, + rescaleFactor: number = 1 +): PartialTheme => { + // On small multiples we want the labels to only appear inside + const isSplitChart = Boolean(visParams.dimensions.splitColumn || visParams.dimensions.splitRow); + const paddingProps: PartialTheme | null = + dimensions && !isSplitChart + ? { + chartPaddings: { + // TODO: simplify ratio logic to be static px units + top: ((1 - Math.min(1, MAX_SIZE / dimensions?.height)) / 2) * dimensions?.height, + bottom: ((1 - Math.min(1, MAX_SIZE / dimensions?.height)) / 2) * dimensions?.height, + left: ((1 - Math.min(1, MAX_SIZE / dimensions?.width)) / 2) * dimensions?.height, + right: ((1 - Math.min(1, MAX_SIZE / dimensions?.width)) / 2) * dimensions?.height, + }, + } + : null; + + const outerSizeRatio: PartialTheme['partition'] | null = + dimensions && !isSplitChart + ? { + outerSizeRatio: + // Cap the ratio to 1 and then rescale + rescaleFactor * Math.min(MAX_SIZE / Math.min(dimensions?.width, dimensions?.height), 1), + } + : null; + const theme: Required = { + chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, + ...paddingProps, + partition: { + fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily, + ...outerSizeRatio, + minFontSize: 10, + maxFontSize: 16, + linkLabel: { + maxCount: 5, + fontSize: 11, + textColor: chartTheme.axes?.axisTitle?.fill, + maxTextLength: visParams.labels.truncate ?? undefined, + }, + sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, + sectorLineWidth: 1.5, + circlePadding: 4, + emptySizeRatio: visParams.isDonut ? 0.3 : 0, + }, + }; + if (!visParams.labels.show) { + // Force all labels to be linked, then prevent links from showing + theme.partition.linkLabel = { maxCount: 0, maximumSection: Number.POSITIVE_INFINITY }; + } + + if (visParams.labels.last_level && visParams.labels.show) { + theme.partition.linkLabel = { + maxCount: Number.POSITIVE_INFINITY, + maximumSection: Number.POSITIVE_INFINITY, + maxTextLength: visParams.labels.truncate ?? undefined, + }; + } + + if ( + (visParams.labels.position === LabelPositions.INSIDE || isSplitChart) && + visParams.labels.show + ) { + theme.partition.linkLabel = { maxCount: 0 }; + } + + return theme; +}; diff --git a/src/plugins/vis_types/pie/public/utils/index.ts b/src/plugins/vis_types/pie/public/utils/index.ts index 0cf4292ad565a..7c9612d352b88 100644 --- a/src/plugins/vis_types/pie/public/utils/index.ts +++ b/src/plugins/vis_types/pie/public/utils/index.ts @@ -10,7 +10,7 @@ export { getLayers } from './get_layers'; export { getColorPicker } from './get_color_picker'; export { getLegendActions } from './get_legend_actions'; export { canFilter, getFilterClickData, getFilterEventData } from './filter_helpers'; -export { getConfig } from './get_config'; +export { getPartitionTheme } from './get_partition_theme'; export { getColumns } from './get_columns'; export { getSplitDimensionAccessor } from './get_split_dimension_accessor'; export { getDistinctSeries } from './get_distinct_series'; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx index 149e9b8ee763a..9cf66511087b7 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/VisitorBreakdownChart.tsx @@ -38,9 +38,15 @@ interface Props { } const theme: PartialTheme = { + chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, legend: { verticalWidth: 100, }, + partition: { + linkLabel: { maximumSection: Infinity, maxCount: 0 }, + outerSizeRatio: 1, // - 0.5 * Math.random(), + circlePadding: 4, + }, }; export function VisitorBreakdownChart({ loading, options }: Props) { @@ -64,6 +70,8 @@ export function VisitorBreakdownChart({ loading, options }: Props) { data={ options?.length ? options : [{ count: 1, name: I18LABELS.noData }] } + layout={PartitionLayout.sunburst} + clockwiseSectors={false} valueAccessor={(d: Datum) => d.count as number} valueGetter="percent" percentFormatter={(d: number) => @@ -78,14 +86,6 @@ export function VisitorBreakdownChart({ loading, options }: Props) { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { maximumSection: Infinity, maxCount: 0 }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - outerSizeRatio: 1, // - 0.5 * Math.random(), - circlePadding: 4, - clockwiseSectors: false, - }} /> diff --git a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx index 8626c4a3b061c..a8594ba8d01d4 100644 --- a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx +++ b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx @@ -12,6 +12,7 @@ import { PrimitiveValue, Settings, TooltipInfo, + PartialTheme, } from '@elastic/charts'; import { EuiCheckbox, @@ -285,6 +286,18 @@ export function ServiceProfilingFlamegraph({ }, [points, highlightFilter, data]); const chartTheme = useChartTheme(); + const themeOverrides: PartialTheme = { + chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, + partition: { + fillLabel: { + fontFamily: theme.eui.euiCodeFontFamily, + clipText: true, + }, + fontFamily: theme.eui.euiCodeFontFamily, + minFontSize: 9, + maxFontSize: 9, + }, + }; const chartSize = { height: layers.length * 20, @@ -304,7 +317,7 @@ export function ServiceProfilingFlamegraph({ ( d.value as number} valueFormatter={() => ''} - config={{ - fillLabel: { - fontFamily: theme.eui.euiCodeFontFamily, - clipText: true, - }, - drilldown: true, - fontFamily: theme.eui.euiCodeFontFamily, - minFontSize: 9, - maxFontSize: 9, - maxRowCount: 1, - partitionLayout: PartitionLayout.icicle, - }} /> diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx index 4bf7fcf9f8925..73bfbca49d05d 100644 --- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx @@ -8,19 +8,18 @@ import { uniq } from 'lodash'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; +import { Required } from '@kbn/utility-types'; import { EuiText } from '@elastic/eui'; import { Chart, Datum, LayerValue, Partition, - PartitionConfig, PartitionLayer, - PartitionFillLabel, - RecursivePartial, Position, Settings, ElementClickListener, + PartialTheme, } from '@elastic/charts'; import { RenderMode } from 'src/plugins/expressions'; import type { LensFilterEvent } from '../types'; @@ -98,7 +97,7 @@ export function PieComponent( }); } - const fillLabel: Partial = { + const fillLabel: PartitionLayer['fillLabel'] = { valueFont: { fontWeight: 700, }, @@ -201,42 +200,52 @@ export function PieComponent( }; }); - const { legend, partitionType: partitionLayout, label: chartType } = PartitionChartsMeta[shape]; + const { legend, partitionType, label: chartType } = PartitionChartsMeta[shape]; - const config: RecursivePartial = { - partitionLayout, - fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily, - outerSizeRatio: 1, - specialFirstInnermostSector: true, - minFontSize: 10, - maxFontSize: 16, - // Labels are added outside the outer ring when the slice is too small - linkLabel: { - maxCount: 5, - fontSize: 11, - // Dashboard background color is affected by dark mode, which we need - // to account for in outer labels - // This does not handle non-dashboard embeddables, which are allowed to - // have different backgrounds. - textColor: chartTheme.axes?.axisTitle?.fill, + const themeOverrides: Required = { + chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, + background: { + color: undefined, // removes background for embeddables + }, + legend: { + labelOptions: { maxLines: truncateLegend ? legendMaxLines ?? 1 : 0 }, + }, + partition: { + fontFamily: chartTheme.barSeriesStyle?.displayValue?.fontFamily, + outerSizeRatio: 1, + minFontSize: 10, + maxFontSize: 16, + // Labels are added outside the outer ring when the slice is too small + linkLabel: { + maxCount: 5, + fontSize: 11, + // Dashboard background color is affected by dark mode, which we need + // to account for in outer labels + // This does not handle non-dashboard embeddables, which are allowed to + // have different backgrounds. + textColor: chartTheme.axes?.axisTitle?.fill, + }, + sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, + sectorLineWidth: 1.5, + circlePadding: 4, }, - sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, - sectorLineWidth: 1.5, - circlePadding: 4, }; if (isTreemapOrMosaicShape(shape)) { if (hideLabels || categoryDisplay === 'hide') { - config.fillLabel = { textColor: 'rgba(0,0,0,0)' }; + themeOverrides.partition.fillLabel = { textColor: 'rgba(0,0,0,0)' }; } } else { - config.emptySizeRatio = shape === 'donut' ? 0.3 : 0; + themeOverrides.partition.emptySizeRatio = shape === 'donut' ? 0.3 : 0; if (hideLabels || categoryDisplay === 'hide') { // Force all labels to be linked, then prevent links from showing - config.linkLabel = { maxCount: 0, maximumSection: Number.POSITIVE_INFINITY }; + themeOverrides.partition.linkLabel = { + maxCount: 0, + maximumSection: Number.POSITIVE_INFINITY, + }; } else if (categoryDisplay === 'inside') { // Prevent links from showing - config.linkLabel = { maxCount: 0 }; + themeOverrides.partition.linkLabel = { maxCount: 0 }; } else { // if it contains any slice below 2% reduce the ratio // first step: sum it up the overall sum @@ -245,7 +254,7 @@ export function PieComponent( const smallSlices = slices.filter((value) => value < 0.02).length; if (smallSlices) { // shrink up to 20% to give some room for the linked values - config.outerSizeRatio = 1 / (1 + Math.min(smallSlices * 0.05, 0.2)); + themeOverrides.partition.outerSizeRatio = 1 / (1 + Math.min(smallSlices * 0.05, 0.2)); } } } @@ -321,27 +330,19 @@ export function PieComponent( legendMaxDepth={nestedLegend ? undefined : 1 /* Color is based only on first layer */} onElementClick={props.interactive ?? true ? onElementClickHandler : undefined} legendAction={props.interactive ? getLegendAction(firstTable, onClickValue) : undefined} - theme={{ - ...chartTheme, - background: { - ...chartTheme.background, - color: undefined, // removes background for embeddables - }, - legend: { - labelOptions: { maxLines: truncateLegend ? legendMaxLines ?? 1 : 0 }, - }, - }} + theme={[themeOverrides, chartTheme]} baseTheme={chartBaseTheme} /> getSliceValue(d, metricColumn)} percentFormatter={(d: number) => percentFormatter.convert(d / 100)} valueGetter={hideLabels || numberDisplay === 'value' ? undefined : 'percent'} valueFormatter={(d: number) => (hideLabels ? '' : formatters[metricColumn.id].convert(d))} layers={layers} - config={config} topGroove={hideLabels || categoryDisplay === 'hide' ? 0 : undefined} /> diff --git a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx index 007ec8f737852..e7a97227aab6b 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx @@ -9,7 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; import React, { useContext } from 'react'; import { i18n } from '@kbn/i18n'; import styled from 'styled-components'; -import { Chart, Datum, Partition, Settings, PartitionLayout } from '@elastic/charts'; +import { Chart, Datum, Partition, Settings, PartitionLayout, PartialTheme } from '@elastic/charts'; import { DonutChartLegend } from './donut_chart_legend'; import { UptimeThemeContext } from '../../../contexts'; @@ -28,6 +28,19 @@ export const GreenCheckIcon = styled(EuiIcon)` position: absolute; `; +const themeOverrides: PartialTheme = { + chartMargins: { top: 0, bottom: 0, left: 0, right: 0 }, + partition: { + linkLabel: { + maximumSection: Infinity, + }, + idealFontSizeJump: 1.1, + outerSizeRatio: 0.9, + emptySizeRatio: 0.4, + circlePadding: 4, + }, +}; + export const DonutChart = ({ height, down, up }: DonutChartProps) => { const { colors: { danger, gray }, @@ -46,13 +59,14 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => { })} {...chartTheme} > - + d.value as number} layers={[ { @@ -65,17 +79,6 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => { }, }, ]} - config={{ - partitionLayout: PartitionLayout.sunburst, - linkLabel: { - maximumSection: Infinity, - }, - margin: { top: 0, bottom: 0, left: 0, right: 0 }, - idealFontSizeJump: 1.1, - outerSizeRatio: 0.9, - emptySizeRatio: 0.4, - circlePadding: 4, - }} /> {down === 0 && } From 40c513dd973c2584e7236d1f7580fb1156cbcf68 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sat, 18 Dec 2021 14:36:35 -0600 Subject: [PATCH 03/23] fix breaking changes in heatmap charts --- .../public/components/heatmap_component.tsx | 118 +++++++++--------- .../explorer/swimlane_container.tsx | 103 +++++++-------- 2 files changed, 112 insertions(+), 109 deletions(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index 9f99c5f6d44bc..55c1db770c281 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -20,6 +20,7 @@ import { TooltipProps, ESFixedIntervalUnit, ESCalendarIntervalUnit, + PartialTheme, } from '@elastic/charts'; import type { CustomPaletteState } from '../../../../charts/public'; import { search } from '../../../../data/public'; @@ -379,61 +380,61 @@ export const HeatmapComponent: FC = memo( } }; - const config: HeatmapSpec['config'] = { - grid: { - stroke: { - width: - args.gridConfig.strokeWidth ?? chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? 1, - color: - args.gridConfig.strokeColor ?? - chartTheme.axes?.gridLine?.horizontal?.stroke ?? - '#D3DAE6', - }, - cellHeight: { - max: 'fill', - min: 1, + const themeOverrides: PartialTheme = { + legend: { + labelOptions: { + maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0, }, }, - cell: { - maxWidth: 'fill', - maxHeight: 'fill', - label: { - visible: args.gridConfig.isCellLabelVisible ?? false, - minFontSize: 8, - maxFontSize: 18, - useGlobalMinFontSize: true, // override the min if there's a different directive upstream + heatmap: { + grid: { + stroke: { + width: + args.gridConfig.strokeWidth ?? + chartTheme.axes?.gridLine?.horizontal?.strokeWidth ?? + 1, + color: + args.gridConfig.strokeColor ?? + chartTheme.axes?.gridLine?.horizontal?.stroke ?? + '#D3DAE6', + }, + cellHeight: { + max: 'fill', + min: 1, + }, }, - border: { - strokeWidth: 0, + cell: { + maxWidth: 'fill', + maxHeight: 'fill', + label: { + visible: args.gridConfig.isCellLabelVisible ?? false, + minFontSize: 8, + maxFontSize: 18, + useGlobalMinFontSize: true, // override the min if there's a different directive upstream + }, + border: { + strokeWidth: 0, + }, + }, + yAxisLabel: { + visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible, + // eui color subdued + textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d', + padding: yAxisColumn?.name ? 8 : 0, + }, + xAxisLabel: { + visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn), + // eui color subdued + textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`, + padding: xAxisColumn?.name ? 8 : 0, + }, + brushMask: { + fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', + }, + brushArea: { + stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', }, }, - yAxisLabel: { - visible: !!yAxisColumn && args.gridConfig.isYAxisLabelVisible, - // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? '#6a717d', - padding: yAxisColumn?.name ? 8 : 0, - name: yAxisColumn?.name ?? '', - ...(yAxisColumn - ? { - formatter: (v: number | string) => formatFactory(yAxisColumn.meta.params).convert(v), - } - : {}), - }, - xAxisLabel: { - visible: Boolean(args.gridConfig.isXAxisLabelVisible && xAxisColumn), - // eui color subdued - textColor: chartTheme.axes?.tickLabel?.fill ?? `#6a717d`, - padding: xAxisColumn?.name ? 8 : 0, - formatter: (v: number | string) => xValuesFormatter.convert(v), - name: xAxisColumn?.name ?? '', - }, - brushMask: { - fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', - }, - brushArea: { - stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', - }, - timeZone, }; return ( @@ -453,14 +454,7 @@ export const HeatmapComponent: FC = memo( legendColorPicker={uiState ? legendColorPicker : undefined} debugState={window._echDebugStateFlag ?? false} tooltip={tooltip} - theme={{ - ...chartTheme, - legend: { - labelOptions: { - maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0, - }, - }, - }} + theme={[themeOverrides, chartTheme]} xDomain={{ min: dateHistogramMeta && dateHistogramMeta.timeRange @@ -480,6 +474,7 @@ export const HeatmapComponent: FC = memo( type: 'bands', bands, }} + timeZone={timeZone} data={chartData} xAccessor={xAccessor} yAccessor={yAccessor || 'unifiedY'} @@ -487,8 +482,13 @@ export const HeatmapComponent: FC = memo( valueFormatter={valueFormatter} xScale={xScale} ySortPredicate={yAxisColumn ? getSortPredicate(yAxisColumn) : 'dataIndex'} - config={config} xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'} + xAxisLabelName={xAxisColumn?.name} + yAxisLabelName={yAxisColumn?.name} + xAxisLabelFormatter={xValuesFormatter.convert} + yAxisLabelFormatter={ + yAxisColumn ? formatFactory(yAxisColumn.meta.params).convert : undefined + } /> diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index cea68c3527ca3..618a70435d0e2 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx @@ -28,6 +28,7 @@ import { HeatmapBrushEvent, Position, ScaleType, + PartialTheme, } from '@elastic/charts'; import moment from 'moment'; @@ -276,66 +277,59 @@ export const SwimlaneContainer: FC = ({ const showBrush = !!onCellsSelection; - const swimLaneConfig = useMemo(() => { + const themeOverrides = useMemo(() => { if (!showSwimlane) return {}; - const config: HeatmapSpec['config'] = { - grid: { - cellHeight: { - min: CELL_HEIGHT, - max: CELL_HEIGHT, + const theme: PartialTheme = { + heatmap: { + grid: { + cellHeight: { + min: CELL_HEIGHT, + max: CELL_HEIGHT, + }, + stroke: { + width: 1, + color: euiTheme.euiBorderColor, + }, }, - stroke: { - width: 1, - color: euiTheme.euiBorderColor, + cell: { + maxWidth: 'fill', + maxHeight: 'fill', + label: { + visible: false, + }, + border: { + stroke: euiTheme.euiBorderColor, + strokeWidth: 0, + }, }, - }, - cell: { - maxWidth: 'fill', - maxHeight: 'fill', - label: { - visible: false, + yAxisLabel: { + visible: showYAxis, + width: Y_AXIS_LABEL_WIDTH, + textColor: euiTheme.euiTextSubduedColor, + padding: Y_AXIS_LABEL_PADDING, + fontSize: parseInt(euiTheme.euiFontSizeXS, 10), }, - border: { - stroke: euiTheme.euiBorderColor, - strokeWidth: 0, + xAxisLabel: { + visible: showTimeline, + textColor: euiTheme.euiTextSubduedColor, + fontSize: parseInt(euiTheme.euiFontSizeXS, 10), + // Required to calculate where the swimlane ends + width: X_AXIS_RIGHT_OVERFLOW * 2, }, - }, - yAxisLabel: { - visible: showYAxis, - width: Y_AXIS_LABEL_WIDTH, - textColor: euiTheme.euiTextSubduedColor, - padding: Y_AXIS_LABEL_PADDING, - formatter: (laneLabel: string) => { - return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : laneLabel; + brushMask: { + visible: showBrush, + fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', }, - fontSize: parseInt(euiTheme.euiFontSizeXS, 10), - }, - xAxisLabel: { - visible: showTimeline, - textColor: euiTheme.euiTextSubduedColor, - formatter: (v: number) => { - timeBuckets.setInterval(`${swimlaneData.interval}s`); - const scaledDateFormat = timeBuckets.getScaledDateFormat(); - return moment(v).format(scaledDateFormat); + brushArea: { + visible: showBrush, + stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', }, - fontSize: parseInt(euiTheme.euiFontSizeXS, 10), - // Required to calculate where the swimlane ends - width: X_AXIS_RIGHT_OVERFLOW * 2, - }, - brushMask: { - visible: showBrush, - fill: isDarkTheme ? 'rgb(30,31,35,80%)' : 'rgb(247,247,247,50%)', - }, - brushArea: { - visible: showBrush, - stroke: isDarkTheme ? 'rgb(255, 255, 255)' : 'rgb(105, 112, 125)', + ...(showLegend ? { maxLegendHeight: LEGEND_HEIGHT } : {}), }, - ...(showLegend ? { maxLegendHeight: LEGEND_HEIGHT } : {}), - timeZone: 'UTC', }; - return config; + return theme; }, [ showSwimlane, swimlaneType, @@ -427,6 +421,7 @@ export const SwimlaneContainer: FC = ({ {showSwimlane && !isLoading && ( = ({ = ({ }, }} ySortPredicate="dataIndex" - config={swimLaneConfig} + yAxisLabelFormatter={(laneLabel) => { + return laneLabel === '' ? EMPTY_FIELD_VALUE_LABEL : String(laneLabel); + }} + xAxisLabelFormatter={(v) => { + timeBuckets.setInterval(`${swimlaneData.interval}s`); + const scaledDateFormat = timeBuckets.getScaledDateFormat(); + return moment(v).format(scaledDateFormat); + }} /> )} From d6e4973e6328664063930db48ab7f78d2b7110c5 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Sat, 18 Dec 2021 15:12:49 -0600 Subject: [PATCH 04/23] fix more type errors --- src/plugins/vis_types/pie/public/utils/get_layers.ts | 10 ++-------- .../public/pie_visualization/render_function.test.tsx | 9 +++++++-- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/plugins/vis_types/pie/public/utils/get_layers.ts b/src/plugins/vis_types/pie/public/utils/get_layers.ts index c9d8da15b78f6..b81b3dac5d227 100644 --- a/src/plugins/vis_types/pie/public/utils/get_layers.ts +++ b/src/plugins/vis_types/pie/public/utils/get_layers.ts @@ -6,13 +6,7 @@ * Side Public License, v 1. */ -import { - Datum, - PartitionFillLabel, - PartitionLayer, - ShapeTreeNode, - ArrayEntry, -} from '@elastic/charts'; +import { Datum, PartitionLayer, ShapeTreeNode, ArrayEntry } from '@elastic/charts'; import { isEqual } from 'lodash'; import { SeriesLayer, PaletteRegistry, lightenColor } from '../../../../charts/public'; import type { DataPublicPluginStart } from '../../../../data/public'; @@ -132,7 +126,7 @@ export const getLayers = ( formatter: DataPublicPluginStart['fieldFormats'], syncColors: boolean ): PartitionLayer[] => { - const fillLabel: Partial = { + const fillLabel: PartitionLayer['fillLabel'] = { valueFont: { fontWeight: 700, }, diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx index ef160b1dd682b..79dc28f267e5b 100644 --- a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx @@ -14,6 +14,7 @@ import { ShapeTreeNode, HierarchyOfArrays, Chart, + PartialTheme, } from '@elastic/charts'; import { shallow } from 'enzyme'; import type { LensMultiTable } from '../../common'; @@ -395,7 +396,9 @@ describe('PieVisualization component', () => { const component = shallow( ); - expect(component.find(Partition).prop('config')?.outerSizeRatio).toBeCloseTo(1 / 1.05); + expect( + component.find(Settings).prop('theme')[0].partition?.outerSizeRatio + ).toBeCloseTo(1 / 1.05); }); test('it should bound the shrink the chart area to ~20% when some small slices are detected', () => { @@ -419,7 +422,9 @@ describe('PieVisualization component', () => { const component = shallow( ); - expect(component.find(Partition).prop('config')?.outerSizeRatio).toBeCloseTo(1 / 1.2); + expect( + component.find(Settings).prop('theme')[0].partition?.outerSizeRatio + ).toBeCloseTo(1 / 1.2); }); }); }); From b9071a4b0c61e2701df688c1f8332c266cb47792 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 4 Jan 2022 16:33:37 -0600 Subject: [PATCH 05/23] use workaround for eui blocking changes --- package.json | 2 +- .../charts/public/services/theme/theme.ts | 10 +++-- .../public/hooks/use_chart_theme.tsx | 42 +++++++++---------- yarn.lock | 8 ++-- 4 files changed, 33 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index da20836f7b470..aac2ed95342de 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@elastic/apm-rum": "^5.10.0", "@elastic/apm-rum-react": "^1.3.2", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "41.0.0", + "@elastic/charts": "41.0.1", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index 1aad4f0ab6328..3e7c4dd510296 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,6 +10,7 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup } from 'kibana/public'; +import { merge } from '@kbn/std'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; @@ -89,9 +90,12 @@ export class ThemeService { public init(uiSettings: CoreSetup['uiSettings']) { this._uiSettingsDarkMode$ = uiSettings.get$('theme:darkMode'); this._uiSettingsDarkMode$.subscribe((darkMode) => { - this._chartsTheme$.next( - darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme - ); + const theme = darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; + // TODO: Remove partition when deprecated in next eui release + const partition = darkMode + ? EUI_CHARTS_THEME_DARK.partition + : EUI_CHARTS_THEME_LIGHT.partition; + this._chartsTheme$.next(merge(theme, { partition })); this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); }); } diff --git a/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx index 02fc0ef32dde9..42ff021679ce0 100644 --- a/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability/public/hooks/use_chart_theme.tsx @@ -5,34 +5,34 @@ * 2.0. */ +import { PartialTheme } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; import { useTheme } from './use_theme'; -export function useChartTheme() { +export function useChartTheme(): PartialTheme[] { const theme = useTheme(); const baseChartTheme = theme.darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - return { - ...baseChartTheme, - chartMargins: { - left: 10, - right: 10, - top: 10, - bottom: 10, + return [ + { + chartMargins: { + left: 10, + right: 10, + top: 10, + bottom: 10, + }, + background: { + color: 'transparent', + }, + lineSeriesStyle: { + point: { visible: false }, + }, + areaSeriesStyle: { + point: { visible: false }, + }, }, - background: { - ...baseChartTheme.background, - color: 'transparent', - }, - lineSeriesStyle: { - ...baseChartTheme.lineSeriesStyle, - point: { visible: false }, - }, - areaSeriesStyle: { - ...baseChartTheme.areaSeriesStyle, - point: { visible: false }, - }, - }; + baseChartTheme, + ]; } diff --git a/yarn.lock b/yarn.lock index b7e733b157d97..09e550cb133d3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1559,10 +1559,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@41.0.0": - version "41.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.0.tgz#fcc83b86d72aa3f2787b2652e5d72076ad756cec" - integrity sha512-8MhmoYfoBGrQWDxF+XW/QCfrJv0Oyd0HekYFW7I6Q/C9KdtAyhHloQ4u4NC2NSCOz6yQgoFwCml0hI+shrPSCA== +"@elastic/charts@41.0.1": + version "41.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.1.tgz#28bd722d86366f799668e1e79c36b3977c1a9710" + integrity sha512-oqNcWG6qkJCsSk+DcXWIOgvz7SpfY4AsOG6moTD/i5LnON9mteVsMdRm1Tw4PZV6JWDgGQnSH3gmQhQrb0wONQ== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" From da31c8ed2d9a7dffb9a46b31ebe48a00d48b395c Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 5 Jan 2022 13:16:53 -0600 Subject: [PATCH 06/23] fix pr check errors --- .../public/services/theme/theme.test.tsx | 18 +- .../charts/public/services/theme/theme.ts | 16 +- .../transaction_distribution_chart/index.tsx | 37 +++-- .../render_function.test.tsx | 2 +- .../__snapshots__/donut_chart.test.tsx.snap | 156 ++++++++++++++++-- 5 files changed, 181 insertions(+), 48 deletions(-) diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index 079acbb5fefbc..5def9312f92c0 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/src/plugins/charts/public/services/theme/theme.test.tsx @@ -12,9 +12,7 @@ import { take } from 'rxjs/operators'; import { renderHook, act } from '@testing-library/react-hooks'; import { render, act as renderAct } from '@testing-library/react'; -import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; - -import { ThemeService } from './theme'; +import { ThemeService, mergedLightTheme, mergedDarkTheme } from './theme'; import { coreMock } from '../../../../../core/public/mocks'; import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; @@ -50,9 +48,7 @@ describe('ThemeService', () => { const themeService = new ThemeService(); themeService.init(setupMockUiSettings); - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_LIGHT.theme - ); + expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(mergedLightTheme); }); describe('in dark mode', () => { @@ -62,9 +58,7 @@ describe('ThemeService', () => { const themeService = new ThemeService(); themeService.init(setupMockUiSettings); - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( - EUI_CHARTS_THEME_DARK.theme - ); + expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(mergedDarkTheme); }); }); }); @@ -100,12 +94,12 @@ describe('ThemeService', () => { const { useChartsTheme } = themeService; const { result } = renderHook(() => useChartsTheme()); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); + expect(result.current).toBe(mergedLightTheme); act(() => darkMode$.next(true)); - expect(result.current).toBe(EUI_CHARTS_THEME_DARK.theme); + expect(result.current).toBe(mergedDarkTheme); act(() => darkMode$.next(false)); - expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); + expect(result.current).toBe(mergedLightTheme); }); it('should not rerender when emitting the same value', () => { diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index 3e7c4dd510296..34748edbbdd36 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -14,6 +14,14 @@ import { merge } from '@kbn/std'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; +// TODO: Remove this when upgrading eui to v44.0.0 +export const mergedLightTheme = merge(EUI_CHARTS_THEME_LIGHT.theme, { + partition: EUI_CHARTS_THEME_LIGHT.partition, +}); +export const mergedDarkTheme = merge(EUI_CHARTS_THEME_DARK.theme, { + partition: EUI_CHARTS_THEME_DARK.partition, +}); + export class ThemeService { /** Returns default charts theme */ public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme; @@ -90,12 +98,8 @@ export class ThemeService { public init(uiSettings: CoreSetup['uiSettings']) { this._uiSettingsDarkMode$ = uiSettings.get$('theme:darkMode'); this._uiSettingsDarkMode$.subscribe((darkMode) => { - const theme = darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; - // TODO: Remove partition when deprecated in next eui release - const partition = darkMode - ? EUI_CHARTS_THEME_DARK.partition - : EUI_CHARTS_THEME_LIGHT.partition; - this._chartsTheme$.next(merge(theme, { partition })); + const theme = darkMode ? mergedDarkTheme : mergedLightTheme; + this._chartsTheme$.next(theme); this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); }); } diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx index b33f152a63016..9b3016ad4756a 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx @@ -156,28 +156,29 @@ export function TransactionDistributionChart({ { test('it sets the correct lines per legend item', () => { const component = shallow(); - expect(component.find(Settings).prop('theme')).toEqual({ + expect(component.find(Settings).prop('theme')[0]).toMatchObject({ background: { color: undefined, }, diff --git a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 0da5df84d309d..707446ce37b38 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -153,6 +153,7 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "background": Object { "color": "transparent", + "fallbackColor": "white", }, "barSeriesStyle": Object { "displayValue": Object { @@ -266,6 +267,83 @@ exports[`DonutChart component passes correct props without errors for valid prop "stroke": "darkgrey", }, }, + "heatmap": Object { + "brushArea": Object { + "stroke": "#69707D", + "strokeWidth": 2, + "visible": true, + }, + "brushMask": Object { + "fill": "#73737380", + "visible": true, + }, + "brushTool": Object { + "fill": "gray", + "visible": false, + }, + "cell": Object { + "align": "center", + "border": Object { + "stroke": "gray", + "strokeWidth": 1, + }, + "label": Object { + "fontFamily": "Sans-Serif", + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": "normal", + "maxFontSize": 12, + "maxWidth": "fill", + "minFontSize": 8, + "textColor": "black", + "useGlobalMinFontSize": true, + "visible": true, + }, + "maxHeight": "fill", + "maxWidth": "fill", + }, + "grid": Object { + "cellHeight": Object { + "max": 30, + "min": 12, + }, + "cellWidth": Object { + "max": 30, + "min": 0, + }, + "stroke": Object { + "color": "gray", + "width": 1, + }, + }, + "maxColumnWidth": 30, + "maxRowHeight": 30, + "xAxisLabel": Object { + "align": "center", + "baseline": "middle", + "fontFamily": "Sans-Serif", + "fontSize": 12, + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": "normal", + "padding": 6, + "textColor": "black", + "visible": true, + "width": "auto", + }, + "yAxisLabel": Object { + "baseline": "middle", + "fontFamily": "Sans-Serif", + "fontSize": 12, + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": "normal", + "padding": 5, + "textColor": "black", + "visible": true, + "width": "auto", + }, + }, "legend": Object { "horizontalHeight": 64, "labelOptions": Object { @@ -300,6 +378,59 @@ exports[`DonutChart component passes correct props without errors for valid prop "visible": true, }, }, + "partition": Object { + "circlePadding": 2, + "emptySizeRatio": 0, + "fillLabel": Object { + "clipText": false, + "fontFamily": "Sans-Serif", + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": 400, + "padding": 2, + "textColor": "__use__adaptive__color__", + "valueFont": Object { + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": 400, + }, + }, + "fontFamily": "Sans-Serif", + "horizontalTextAngleThreshold": 0.5235987755982988, + "horizontalTextEnforcer": 1, + "idealFontSizeJump": 1.05, + "linkLabel": Object { + "fontFamily": "Sans-Serif", + "fontSize": 12, + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": 400, + "gap": 10, + "horizontalStemLength": 10, + "lineWidth": 1, + "maxCount": 36, + "maxTextLength": 100, + "maximumSection": 10, + "minimumStemLength": 0, + "padding": 0, + "radiusPadding": 10, + "spacing": 2, + "stemAngle": 0.7853981633974483, + "textColor": "__use__adaptive__color__", + "valueFont": Object { + "fontStyle": "normal", + "fontVariant": "normal", + "fontWeight": 400, + }, + }, + "maxFontSize": 64, + "maximizeFontSize": false, + "minFontSize": 8, + "outerSizeRatio": 0.6180469715698392, + "radialPadding": 0.017453292519943295, + "sectorLineStroke": "white", + "sectorLineWidth": 1, + }, "scales": Object { "barsPadding": 0.25, "histogramPadding": 0.05, @@ -499,26 +630,28 @@ exports[`DonutChart component passes correct props without errors for valid prop } } > - + From 1d1ac03239fefc817ec69c78244bced8e9504a6e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 5 Jan 2022 14:29:49 -0600 Subject: [PATCH 07/23] fix pr check errors --- .../service_profiling/service_profiling_flamegraph.tsx | 2 +- .../public/components/shared/charts/spark_plot/index.tsx | 8 ++++---- .../shared/time_comparison/get_time_range_comparison.ts | 3 ++- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx index a8594ba8d01d4..95f4922bb3804 100644 --- a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx +++ b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_flamegraph.tsx @@ -317,7 +317,7 @@ export function ServiceProfilingFlamegraph({ ( diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts b/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts index 547be69ff6298..97c38040c5d96 100644 --- a/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts +++ b/x-pack/plugins/apm/public/components/shared/time_comparison/get_time_range_comparison.ts @@ -5,6 +5,7 @@ * 2.0. */ +import { PartialTheme } from '@elastic/charts'; import moment from 'moment'; import { EuiTheme } from 'src/plugins/kibana_react/common'; import { @@ -13,7 +14,7 @@ import { } from '../../../../common/runtime_types/comparison_type_rt'; import { getDateDifference } from '../../../../common/utils/formatters'; -export function getComparisonChartTheme(theme: EuiTheme) { +export function getComparisonChartTheme(theme: EuiTheme): PartialTheme { return { areaSeriesStyle: { area: { From 68f6d6903b846f47234197285a24b77c3e17540b Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 5 Jan 2022 18:43:03 -0600 Subject: [PATCH 08/23] attempt fn test failure --- test/functional/page_objects/visualize_chart_page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index dc36197034691..a3fbd631722f5 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -255,7 +255,7 @@ export class VisualizeChartPageObject extends FtrService { if (isVisTypeHeatmapChart) { const legendItems = - (await this.getEsChartDebugState(heatmapChartSelector))?.legend!.items ?? []; + (await this.getEsChartDebugState(heatmapChartSelector))?.legend?.items ?? []; return legendItems.map(({ name }) => name); } From f02912f81d06d12581c9c39496675e9906401eb3 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Thu, 6 Jan 2022 14:54:56 -0600 Subject: [PATCH 09/23] fix failed binding on heatmap convert formatter --- .../expression_heatmap/public/components/heatmap_component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index 55c1db770c281..72beb9fdeb18c 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -485,7 +485,7 @@ export const HeatmapComponent: FC = memo( xSortPredicate={xAxisColumn ? getSortPredicate(xAxisColumn) : 'dataIndex'} xAxisLabelName={xAxisColumn?.name} yAxisLabelName={yAxisColumn?.name} - xAxisLabelFormatter={xValuesFormatter.convert} + xAxisLabelFormatter={(v) => xValuesFormatter.convert(v)} // requires binding yAxisLabelFormatter={ yAxisColumn ? formatFactory(yAxisColumn.meta.params).convert : undefined } From 74b111890ece5705aa186102c0334484402b109e Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Tue, 11 Jan 2022 09:46:51 -0600 Subject: [PATCH 10/23] fix breaking type changes from 42.0.0 --- package.json | 2 +- .../static/utils/transform_click_event.ts | 17 ++++--- .../public/components/series/area.tsx | 51 ++++++++++--------- .../xy/public/components/xy_settings.tsx | 4 +- .../RumDashboard/Charts/PageLoadDistChart.tsx | 2 + .../PageLoadDistribution/BreakdownSeries.tsx | 2 + .../service_profiling_timeline.tsx | 1 + .../shared/charts/breakdown_chart/index.tsx | 7 ++- .../metric_distribution_chart.tsx | 4 +- .../public/xy_visualization/expression.tsx | 8 +-- .../feature_importance_summary.tsx | 23 +++++---- .../common/components/charts/common.tsx | 4 +- yarn.lock | 8 +-- 13 files changed, 79 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index 21933b17daa34..dae3df48490a0 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.0", "@elastic/apm-rum-react": "^1.3.2", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "41.0.1", + "@elastic/charts": "42.1.0", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", diff --git a/src/plugins/charts/public/static/utils/transform_click_event.ts b/src/plugins/charts/public/static/utils/transform_click_event.ts index d175046b20ebb..ae255455b39b1 100644 --- a/src/plugins/charts/public/static/utils/transform_click_event.ts +++ b/src/plugins/charts/public/static/utils/transform_click_event.ts @@ -28,19 +28,21 @@ export interface BrushTriggerEvent { data: RangeSelectContext['data']; } -type AllSeriesAccessors = Array<[accessor: Accessor | AccessorFn, value: string | number]>; +type AllSeriesAccessors = Array< + [accessor: Accessor | AccessorFn, value: string | number] +>; /** * returns accessor value from string or function accessor * @param datum * @param accessor */ -function getAccessorValue(datum: Datum, accessor: Accessor | AccessorFn) { +function getAccessorValue(datum: D, accessor: Accessor | AccessorFn) { if (typeof accessor === 'function') { return accessor(datum); } - return datum[accessor]; + return (datum as Datum)[accessor]; } /** @@ -259,9 +261,11 @@ export const getFilterFromSeriesFn = /** * Helper function to transform `@elastic/charts` brush event into brush action event */ -export const getBrushFromChartBrushEventFn = - (table: Datatable, xAccessor: Accessor | AccessorFn) => - ({ x: selectedRange }: XYBrushEvent): BrushTriggerEvent => { +export function getBrushFromChartBrushEventFn( + table: Datatable, + xAccessor: Accessor | AccessorFn +) { + return ({ x: selectedRange }: XYBrushEvent): BrushTriggerEvent => { const [start, end] = selectedRange ?? [0, 0]; const range: [number, number] = [start, end]; const column = table.columns.findIndex(({ id }) => validateAccessorId(id, xAccessor)); @@ -275,3 +279,4 @@ export const getBrushFromChartBrushEventFn = name: 'brush', }; }; +} diff --git a/src/plugins/vis_types/timelion/public/components/series/area.tsx b/src/plugins/vis_types/timelion/public/components/series/area.tsx index d149d675d63d7..50c52f69de5bb 100644 --- a/src/plugins/vis_types/timelion/public/components/series/area.tsx +++ b/src/plugins/vis_types/timelion/public/components/series/area.tsx @@ -38,30 +38,32 @@ const getPointFillColor = (points: VisSeries['points'], color: string | undefine ); }; -const getAreaSeriesStyle = ({ color, lines, points }: AreaSeriesComponentProps['visData']) => - ({ - line: { - opacity: isShowLines(lines, points) ? 1 : 0, - stroke: color, - strokeWidth: lines?.lineWidth !== undefined ? Number(lines.lineWidth) : 3, - visible: isShowLines(lines, points), - }, - area: { - fill: color, - opacity: lines?.fill ?? 0, - visible: lines?.show ?? points?.show ?? true, - }, - point: { - fill: getPointFillColor(points, color), - opacity: 1, - radius: points?.radius ?? 3, - stroke: color, - strokeWidth: points?.lineWidth ?? 2, - visible: points?.show ?? false, - shape: points?.symbol === 'cross' ? PointShape.X : points?.symbol, - }, - curve: lines?.steps ? CurveType.CURVE_STEP : CurveType.LINEAR, - } as RecursivePartial); +const getAreaSeriesStyle = ({ + color, + lines, + points, +}: AreaSeriesComponentProps['visData']): RecursivePartial => ({ + line: { + opacity: isShowLines(lines, points) ? 1 : 0, + stroke: color, + strokeWidth: lines?.lineWidth !== undefined ? Number(lines.lineWidth) : 3, + visible: isShowLines(lines, points), + }, + area: { + fill: color, + opacity: lines?.fill ?? 0, + visible: lines?.show ?? points?.show ?? true, + }, + point: { + fill: getPointFillColor(points, color), + opacity: 1, + radius: points?.radius ?? 3, + stroke: color, + strokeWidth: points?.lineWidth ?? 2, + visible: points?.show ?? false, + shape: points?.symbol === 'cross' ? PointShape.X : points?.symbol, + }, +}); export const AreaSeriesComponent = ({ index, groupId, visData }: AreaSeriesComponentProps) => ( diff --git a/src/plugins/vis_types/xy/public/components/xy_settings.tsx b/src/plugins/vis_types/xy/public/components/xy_settings.tsx index 304b0756c30b6..1393fc252fcf6 100644 --- a/src/plugins/vis_types/xy/public/components/xy_settings.tsx +++ b/src/plugins/vis_types/xy/public/components/xy_settings.tsx @@ -11,7 +11,7 @@ import React, { FC } from 'react'; import { Direction, Settings, - SettingsSpecProps, + SettingsProps, DomainRange, Position, PartialTheme, @@ -50,7 +50,7 @@ type XYSettingsProps = Pick< | 'xAxis' | 'orderBucketsBySum' > & { - onPointerUpdate: SettingsSpecProps['onPointerUpdate']; + onPointerUpdate: SettingsProps['onPointerUpdate']; xDomain?: DomainRange; adjustedXDomain?: DomainRange; showLegend: boolean; diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx index 51349ff22a962..f27e5de71849a 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx @@ -121,6 +121,8 @@ export function PageLoadDistChart({ fit={Fit.Linear} id={'PagesPercentage'} name={I18LABELS.overall} + xAccessor="x" + yAccessors={['y']} xScaleType={ScaleType.Linear} yScaleType={ScaleType.Linear} data={data?.pageLoadDistribution ?? []} diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx index db5932a96fb12..5e98f36cc0798 100644 --- a/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx +++ b/x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx @@ -54,6 +54,8 @@ export function BreakdownSeries({ id={`${field}-${value}-${name}`} key={`${field}-${value}-${name}`} name={name} + xAccessor="x" + yAccessors={['y']} xScaleType={ScaleType.Linear} yScaleType={ScaleType.Linear} curve={CurveType.CURVE_CATMULL_ROM} diff --git a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_timeline.tsx b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_timeline.tsx index d5dc2f5d56afc..a625d87f05d9c 100644 --- a/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_timeline.tsx +++ b/x-pack/plugins/apm/public/components/app/service_profiling/service_profiling_timeline.tsx @@ -98,6 +98,7 @@ export function ServiceProfilingTimeline({ xScaleType={ScaleType.Time} yScaleType={ScaleType.Linear} xAccessor="x" + yAccessors={['y']} stackAccessors={['x']} /> ))} diff --git a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx index 78bfd8911c351..a6989897641bd 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx @@ -171,7 +171,12 @@ export function BreakdownChart({ }) ) : ( // When timeseries is empty, loads an AreaSeries chart to show the default empty message. - + )} diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx index 627c206e87fb0..dad53496c1e90 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx @@ -102,7 +102,9 @@ export const MetricDistributionChart: FC = ({ yScaleType={ScaleType.Linear} xAccessor="x" yAccessors={['y']} - data={chartData.length > 0 ? chartData : [{ x: 0, y: 0 }]} + data={ + chartData.length > 0 ? chartData : [{ x: 0, y: 0, dataMin: 0, dataMax: 0, percent: 0 }] + } curve={CurveType.CURVE_STEP_AFTER} /> diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index 9c4c56281dae0..b1c751a2c096d 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -33,6 +33,9 @@ import { RecursivePartial, AxisStyle, ScaleType, + AreaSeriesProps, + BarSeriesProps, + LineSeriesProps, } from '@elastic/charts'; import { I18nProvider } from '@kbn/i18n-react'; import type { @@ -83,10 +86,7 @@ declare global { } } -type InferPropType = T extends React.FunctionComponent ? P : T; -type SeriesSpec = InferPropType & - InferPropType & - InferPropType; +type SeriesSpec = LineSeriesProps & BarSeriesProps & AreaSeriesProps; export type XYChartRenderProps = XYChartProps & { chartsThemeService: ChartsPluginSetup['theme']; diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx index 534459dd074f0..5a8c33618396f 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/total_feature_importance_summary/feature_importance_summary.tsx @@ -18,7 +18,7 @@ import { RecursivePartial, AxisStyle, PartialTheme, - BarSeriesSpec, + BarSeriesProps, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { euiLightVars as euiVars } from '@kbn/ui-shared-deps-src/theme'; @@ -100,13 +100,18 @@ export const FeatureImportanceSummaryPanel: FC { - let sortedData: Array<{ - featureName: string; - meanImportance: number; - className?: FeatureImportanceClassName; - }> = []; - let _barSeriesSpec: Partial = { + interface Datum { + featureName: string; + meanImportance: number; + className?: FeatureImportanceClassName; + } + type PlotData = Datum[]; + type SeriesProps = Omit; + const [plotData, barSeriesSpec, showLegend, chartHeight] = useMemo< + [plotData: PlotData, barSeriesSpec: SeriesProps, showLegend?: boolean, chartHeight?: number] + >(() => { + let sortedData: PlotData = []; + let _barSeriesSpec: SeriesProps = { xAccessor: 'featureName', yAccessors: ['meanImportance'], name: i18n.translate( @@ -122,7 +127,7 @@ export const FeatureImportanceSummaryPanel: FC; + settings?: SettingsProps; } export interface ChartSeriesData { diff --git a/yarn.lock b/yarn.lock index f4f8761c37a75..87327bb0ef01e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1559,10 +1559,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@41.0.1": - version "41.0.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-41.0.1.tgz#28bd722d86366f799668e1e79c36b3977c1a9710" - integrity sha512-oqNcWG6qkJCsSk+DcXWIOgvz7SpfY4AsOG6moTD/i5LnON9mteVsMdRm1Tw4PZV6JWDgGQnSH3gmQhQrb0wONQ== +"@elastic/charts@42.1.0": + version "42.1.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-42.1.0.tgz#b264191bbf2fa28323ffb8f399099d0a9c61cf63" + integrity sha512-KTNoYnXDw8Zhqfl0J8NdG72hFkTLz27ckoS1SImSEGJ5jiE1Gaf9oAD1C9pJrshd8SP5mr6dkaPYbH5Q+K+3zA== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" From bf4d5acc533ae7c902b9ca16243e9bfcb58df853 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Wed, 12 Jan 2022 11:23:44 -0600 Subject: [PATCH 11/23] update jest snapshot from spec component changes --- .../gauge_component.test.tsx.snap | 4 +- .../__snapshots__/area_decorator.test.js.snap | 2 +- .../__snapshots__/bar_decorator.test.js.snap | 2 +- .../__snapshots__/expression.test.tsx.snap | 70 +++++++++---------- 4 files changed, 39 insertions(+), 39 deletions(-) diff --git a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap index b588c1d341a75..bd39344807643 100644 --- a/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_gauge/public/components/__snapshots__/gauge_component.test.tsx.snap @@ -4,11 +4,11 @@ exports[`GaugeComponent renders the chart 1`] = ` - - should render and match a snapshot 1`] = ` - should render and match a snapshot 1`] = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Date: Wed, 12 Jan 2022 13:27:40 -0600 Subject: [PATCH 12/23] fix failing jest snapshots --- .../__snapshots__/donut_chart.test.tsx.snap | 38 +++++++------------ 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 0b917afb94d54..6e24d2a13da78 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -326,7 +326,12 @@ exports[`DonutChart component passes correct props without errors for valid prop "fontStyle": "normal", "fontVariant": "normal", "fontWeight": "normal", - "padding": 6, + "padding": Object { + "bottom": 5, + "left": 5, + "right": 5, + "top": 5, + }, "textColor": "black", "visible": true, "width": "auto", @@ -338,7 +343,12 @@ exports[`DonutChart component passes correct props without errors for valid prop "fontStyle": "normal", "fontVariant": "normal", "fontWeight": "normal", - "padding": 5, + "padding": Object { + "bottom": 5, + "left": 5, + "right": 5, + "top": 5, + }, "textColor": "black", "visible": true, "width": "auto", @@ -623,26 +633,6 @@ exports[`DonutChart component passes correct props without errors for valid prop "strokeWidth": 2, }, }, - "partition": Object { - "circlePadding": 4, - "fillLabel": Object { - "valueFont": Object { - "fontWeight": 700, - }, - }, - "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", - "linkLabel": Object { - "fontSize": 11, - "maxCount": 5, - "textColor": "rgba(52, 55, 65, 1)", - }, - "maxFontSize": 16, - "minFontSize": 8, - "outerSizeRatio": 1, - "sectorLineStroke": "rgba(255, 255, 255, 1)", - "sectorLineWidth": 1.5, - }, "scales": Object { "barsPadding": 0.25, "histogramPadding": 0.05, @@ -650,7 +640,7 @@ exports[`DonutChart component passes correct props without errors for valid prop } } > - - Date: Thu, 13 Jan 2022 09:34:02 -0600 Subject: [PATCH 13/23] fix another jest snapshot --- .../__snapshots__/donut_chart.test.tsx.snap | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 6e24d2a13da78..a25df66d31af1 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -633,6 +633,26 @@ exports[`DonutChart component passes correct props without errors for valid prop "strokeWidth": 2, }, }, + "partition": Object { + "circlePadding": 4, + "fillLabel": Object { + "valueFont": Object { + "fontWeight": 700, + }, + }, + "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "linkLabel": Object { + "fontSize": 11, + "maxCount": 5, + "textColor": "rgba(52, 55, 65, 1)", + }, + "maxFontSize": 16, + "minFontSize": 8, + "outerSizeRatio": 1, + "sectorLineStroke": "rgba(255, 255, 255, 1)", + "sectorLineWidth": 1.5, + }, "scales": Object { "barsPadding": 0.25, "histogramPadding": 0.05, From 3e8e1e135d4b684e2d5d55d2d1ededfa449f825a Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 14 Jan 2022 13:06:23 +0100 Subject: [PATCH 14/23] Fix partition inner size --- .../expression_pie/public/utils/get_partition_theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/chart_expressions/expression_pie/public/utils/get_partition_theme.ts b/src/plugins/chart_expressions/expression_pie/public/utils/get_partition_theme.ts index 814337c63a534..4daaf835fa782 100644 --- a/src/plugins/chart_expressions/expression_pie/public/utils/get_partition_theme.ts +++ b/src/plugins/chart_expressions/expression_pie/public/utils/get_partition_theme.ts @@ -58,7 +58,7 @@ export const getPartitionTheme = ( sectorLineStroke: chartTheme.lineSeriesStyle?.point?.fill, sectorLineWidth: 1.5, circlePadding: 4, - emptySizeRatio: visParams.isDonut ? 0.3 : 0, + emptySizeRatio: visParams.isDonut ? visParams.emptySizeRatio : 0, }, }; if (!visParams.labels.show) { From 62b7a02b3247d3ad372c441e1eec1901a3adf651 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 14 Jan 2022 08:44:23 -0600 Subject: [PATCH 15/23] upgrade charts to fix heatmap issues --- package.json | 4 ++-- yarn.lock | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 57f55796a38ee..3e5ad605e734c 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.1", "@elastic/apm-rum-react": "^1.3.3", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "42.1.0", + "@elastic/charts": "43.0.0", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", @@ -886,4 +886,4 @@ "yargs": "^15.4.1", "zlib": "^1.0.5" } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index e9df97f336dba..7a224f72bc03e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1431,10 +1431,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@42.1.0": - version "42.1.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-42.1.0.tgz#b264191bbf2fa28323ffb8f399099d0a9c61cf63" - integrity sha512-KTNoYnXDw8Zhqfl0J8NdG72hFkTLz27ckoS1SImSEGJ5jiE1Gaf9oAD1C9pJrshd8SP5mr6dkaPYbH5Q+K+3zA== +"@elastic/charts@43.0.0": + version "43.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.0.0.tgz#95b745e3dfbfbac3222a91fe1031b49d109ec628" + integrity sha512-Ju7uWHoio5aqt67oQOAkGQFqOVfTyNWSZbnieXwa7m9O6DYFLnNLmL5chYpRyxwYLw5qqjBywoNQSMJeq6U7Eg== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" From 2ad9966aa9835b4ff7a4f40c52c9c18d162210ec Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 14 Jan 2022 08:54:37 -0600 Subject: [PATCH 16/23] fix package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 95ac739c37413..8915239edde79 100644 --- a/package.json +++ b/package.json @@ -886,4 +886,4 @@ "yargs": "^15.4.1", "zlib": "^1.0.5" } -} +} \ No newline at end of file From b1406f5531b56b133712960df5252efc8a4f96c4 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Mon, 17 Jan 2022 16:19:11 -0600 Subject: [PATCH 17/23] fix changes apm chart styles --- .../public/services/theme/theme.test.tsx | 20 ++++++++++++------- .../charts/public/services/theme/theme.ts | 11 +--------- .../shared/charts/timeseries_chart.tsx | 14 +++++++------ .../transaction_distribution_chart/index.tsx | 2 ++ .../components/common/charts/donut_chart.tsx | 6 ++++-- 5 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/plugins/charts/public/services/theme/theme.test.tsx b/src/plugins/charts/public/services/theme/theme.test.tsx index 5def9312f92c0..5154c1ce5ad63 100644 --- a/src/plugins/charts/public/services/theme/theme.test.tsx +++ b/src/plugins/charts/public/services/theme/theme.test.tsx @@ -12,9 +12,11 @@ import { take } from 'rxjs/operators'; import { renderHook, act } from '@testing-library/react-hooks'; import { render, act as renderAct } from '@testing-library/react'; -import { ThemeService, mergedLightTheme, mergedDarkTheme } from './theme'; -import { coreMock } from '../../../../../core/public/mocks'; import { LIGHT_THEME, DARK_THEME } from '@elastic/charts'; +import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; + +import { ThemeService } from './theme'; +import { coreMock } from '../../../../../core/public/mocks'; const { uiSettings: setupMockUiSettings } = coreMock.createSetup(); @@ -48,7 +50,9 @@ describe('ThemeService', () => { const themeService = new ThemeService(); themeService.init(setupMockUiSettings); - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(mergedLightTheme); + expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( + EUI_CHARTS_THEME_LIGHT.theme + ); }); describe('in dark mode', () => { @@ -58,7 +62,9 @@ describe('ThemeService', () => { const themeService = new ThemeService(); themeService.init(setupMockUiSettings); - expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual(mergedDarkTheme); + expect(await themeService.chartsTheme$.pipe(take(1)).toPromise()).toEqual( + EUI_CHARTS_THEME_DARK.theme + ); }); }); }); @@ -94,12 +100,12 @@ describe('ThemeService', () => { const { useChartsTheme } = themeService; const { result } = renderHook(() => useChartsTheme()); - expect(result.current).toBe(mergedLightTheme); + expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); act(() => darkMode$.next(true)); - expect(result.current).toBe(mergedDarkTheme); + expect(result.current).toBe(EUI_CHARTS_THEME_DARK.theme); act(() => darkMode$.next(false)); - expect(result.current).toBe(mergedLightTheme); + expect(result.current).toBe(EUI_CHARTS_THEME_LIGHT.theme); }); it('should not rerender when emitting the same value', () => { diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index 34748edbbdd36..4397084d890ae 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -10,18 +10,9 @@ import { useEffect, useRef, useState } from 'react'; import { Observable, BehaviorSubject } from 'rxjs'; import { CoreSetup } from 'kibana/public'; -import { merge } from '@kbn/std'; import { DARK_THEME, LIGHT_THEME, PartialTheme, Theme } from '@elastic/charts'; import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme'; -// TODO: Remove this when upgrading eui to v44.0.0 -export const mergedLightTheme = merge(EUI_CHARTS_THEME_LIGHT.theme, { - partition: EUI_CHARTS_THEME_LIGHT.partition, -}); -export const mergedDarkTheme = merge(EUI_CHARTS_THEME_DARK.theme, { - partition: EUI_CHARTS_THEME_DARK.partition, -}); - export class ThemeService { /** Returns default charts theme */ public readonly chartsDefaultTheme = EUI_CHARTS_THEME_LIGHT.theme; @@ -98,7 +89,7 @@ export class ThemeService { public init(uiSettings: CoreSetup['uiSettings']) { this._uiSettingsDarkMode$ = uiSettings.get$('theme:darkMode'); this._uiSettingsDarkMode$.subscribe((darkMode) => { - const theme = darkMode ? mergedDarkTheme : mergedLightTheme; + const theme = darkMode ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme; this._chartsTheme$.next(theme); this._chartsBaseTheme$.next(darkMode ? DARK_THEME : LIGHT_THEME); }); diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx index 1cb8a4facfd69..64c070c25f94b 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx @@ -126,13 +126,15 @@ export function TimeseriesChart({ onBrushEnd={(event) => onBrushEnd({ x: (event as XYBrushEvent).x, history }) } - theme={{ - ...chartTheme, - areaSeriesStyle: { - line: { visible: false }, + theme={[ + customTheme, + { + areaSeriesStyle: { + line: { visible: false }, + }, }, - ...customTheme, - }} + ...chartTheme, + ]} onPointerUpdate={setPointerEvent} externalPointerEvents={{ tooltip: { visible: true }, diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx index 9b3016ad4756a..91d3c0a727877 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx @@ -168,7 +168,9 @@ export function TransactionDistributionChart({ }, axes: { tickLine: { + visible: true, size: 5, + padding: 10, }, tickLabel: { fontSize: 10, diff --git a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx index e7a97227aab6b..3638b52e39783 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx +++ b/x-pack/plugins/uptime/public/components/common/charts/donut_chart.tsx @@ -57,9 +57,11 @@ export const DonutChart = ({ height, down, up }: DonutChartProps) => { 'Pie chart showing the current status. {down} of {total} monitors are down.', values: { down, total: up + down }, })} - {...chartTheme} > - + Date: Tue, 18 Jan 2022 08:59:30 -0600 Subject: [PATCH 18/23] update new change on snapshots --- .../__snapshots__/donut_chart.test.tsx.snap | 1188 ++++++++--------- 1 file changed, 594 insertions(+), 594 deletions(-) diff --git a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index a25df66d31af1..c90283a8386f4 100644 --- a/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/uptime/public/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -15,670 +15,670 @@ exports[`DonutChart component passes correct props without errors for valid prop > + - Date: Thu, 20 Jan 2022 15:07:48 -0600 Subject: [PATCH 19/23] fix issue with heatmap axes and legend labels --- package.json | 2 +- yarn.lock | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 178ce62afb4c8..f02b9d874aed3 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.1", "@elastic/apm-rum-react": "^1.3.3", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "43.0.0", + "@elastic/charts": "43.0.1", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", diff --git a/yarn.lock b/yarn.lock index 18ecf8ad7f15c..a2424619ae931 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1431,10 +1431,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@43.0.0": - version "43.0.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.0.0.tgz#95b745e3dfbfbac3222a91fe1031b49d109ec628" - integrity sha512-Ju7uWHoio5aqt67oQOAkGQFqOVfTyNWSZbnieXwa7m9O6DYFLnNLmL5chYpRyxwYLw5qqjBywoNQSMJeq6U7Eg== +"@elastic/charts@43.0.1": + version "43.0.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.0.1.tgz#ef7d821e80514584e00334daff20ac3176bbe6f1" + integrity sha512-FSWvuhygmjW9YI/+8Vyvz/4e/MTOW7+HdyDjtXQHddVaToPh1UIbhoTUeV/RdCBHaKhOVoHGyG4hUyh1xgV1Vw== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" @@ -1451,7 +1451,6 @@ react-redux "^7.1.0" redux "^4.0.4" reselect "^4.0.0" - resize-observer-polyfill "^1.5.1" ts-debounce "^3.0.0" utility-types "^3.10.0" uuid "^3.3.2" From 81d77077335359d309c6a5c3135c11583d1b8169 Mon Sep 17 00:00:00 2001 From: nickofthyme Date: Fri, 21 Jan 2022 10:24:29 -0600 Subject: [PATCH 20/23] add ResizeObserver pollyfill to jest setup --- packages/kbn-test/src/jest/setup/polyfills.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/kbn-test/src/jest/setup/polyfills.js b/packages/kbn-test/src/jest/setup/polyfills.js index ebe6178dbdd91..23c6a56d81d39 100644 --- a/packages/kbn-test/src/jest/setup/polyfills.js +++ b/packages/kbn-test/src/jest/setup/polyfills.js @@ -18,3 +18,5 @@ if (!global.URL.hasOwnProperty('createObjectURL')) { // Will be replaced with a better solution in EUI // https://github.com/elastic/eui/issues/3713 global._isJest = true; + +global.ResizeObserver = require('resize-observer-polyfill'); From e10b732fee841e9bb377980d1a7342f688712297 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 24 Jan 2022 22:48:37 +0100 Subject: [PATCH 21/23] Revert adding resize observer polyfill --- packages/kbn-test/src/jest/setup/polyfills.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/kbn-test/src/jest/setup/polyfills.js b/packages/kbn-test/src/jest/setup/polyfills.js index 23c6a56d81d39..ebe6178dbdd91 100644 --- a/packages/kbn-test/src/jest/setup/polyfills.js +++ b/packages/kbn-test/src/jest/setup/polyfills.js @@ -18,5 +18,3 @@ if (!global.URL.hasOwnProperty('createObjectURL')) { // Will be replaced with a better solution in EUI // https://github.com/elastic/eui/issues/3713 global._isJest = true; - -global.ResizeObserver = require('resize-observer-polyfill'); From 417c401b048b86ea187a9ecb7673754819a730f1 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 25 Jan 2022 19:39:55 +0100 Subject: [PATCH 22/23] Update charts to 43.1.0 --- package.json | 2 +- yarn.lock | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 1eab005cf2fee..13fa110981bff 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.1", "@elastic/apm-rum-react": "^1.3.3", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "43.0.1", + "@elastic/charts": "43.1.0", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", diff --git a/yarn.lock b/yarn.lock index b349030577ad4..161e8e84c207e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1431,10 +1431,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@40.2.0": - version "40.2.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-40.2.0.tgz#2e329ce4f495731f478cbaf2f8f3b89b5167a65b" - integrity sha512-N0t7YK58Kce/s9LEgaocrD75NYuFMwrcI1QNIPcwZ9IAOHY8/9yRHD5Ipoz0caGibAgOE8OunGkpyPY/NHKB5Q== +"@elastic/charts@43.1.0": + version "43.1.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.1.0.tgz#b2aea8492684fc8c7051125e289ea91b891b2f9c" + integrity sha512-k0knnFk/UjFNlS6MYlTxPY0JG5STN76KMxejSPwg8RcYrVJ8PhbEJBod254PIHSmD/NYVydt5nZ4Gf1fLlM0uA== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" @@ -1451,7 +1451,6 @@ react-redux "^7.1.0" redux "^4.0.4" reselect "^4.0.0" - resize-observer-polyfill "^1.5.1" ts-debounce "^3.0.0" utility-types "^3.10.0" uuid "^3.3.2" From 7daab93947740d5cc5f7ce160abfd04abc15d388 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 26 Jan 2022 14:02:09 +0100 Subject: [PATCH 23/23] Revert removal of resize-observer-polyfill --- package.json | 2 +- yarn.lock | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 13fa110981bff..5e50ff20eedce 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,7 @@ "@elastic/apm-rum": "^5.10.1", "@elastic/apm-rum-react": "^1.3.3", "@elastic/apm-synthtrace": "link:bazel-bin/packages/elastic-apm-synthtrace", - "@elastic/charts": "43.1.0", + "@elastic/charts": "43.1.1", "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.1.0-canary.2", "@elastic/ems-client": "8.0.0", diff --git a/yarn.lock b/yarn.lock index 161e8e84c207e..e5684477212bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1431,10 +1431,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@43.1.0": - version "43.1.0" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.1.0.tgz#b2aea8492684fc8c7051125e289ea91b891b2f9c" - integrity sha512-k0knnFk/UjFNlS6MYlTxPY0JG5STN76KMxejSPwg8RcYrVJ8PhbEJBod254PIHSmD/NYVydt5nZ4Gf1fLlM0uA== +"@elastic/charts@43.1.1": + version "43.1.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-43.1.1.tgz#2a9cd4bbde9397b86a45d8aa604a1950ae0997c0" + integrity sha512-lYTdwpARIDXD15iC4cujKplBhGXb3zriBATp0wFsqgT9XE9TMOzlQ9dgylWQ+2x6OlataZLrOMnWXiFQ3uJqqQ== dependencies: "@popperjs/core" "^2.4.0" chroma-js "^2.1.0" @@ -1451,6 +1451,7 @@ react-redux "^7.1.0" redux "^4.0.4" reselect "^4.0.0" + resize-observer-polyfill "^1.5.1" ts-debounce "^3.0.0" utility-types "^3.10.0" uuid "^3.3.2"