From 30ef0ecb3c9d91b8f111f96bf0e024d03c49304b Mon Sep 17 00:00:00 2001 From: "elastic-renovate-prod[bot]" <174716857+elastic-renovate-prod[bot]@users.noreply.github.com> Date: Wed, 2 Oct 2024 10:52:56 +0200 Subject: [PATCH] Update dependency @elastic/charts to v67 (main) (#193694) This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | dependencies | major | [`66.1.1` -> `67.0.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/66.1.1/67.0.0) | --- ### Breaking changes Elastic-charts theme API for line and area charts has changed: - the `point.visible` type for line and area charts is now a union between `'always' | 'never' | 'auto'`. Always and Never will replace the previous boolean configuration, `auto` instead will provide a logic to show the points only of the distance between consecutive points is bigger than the `pointVisibilityMinDistance`. - the isolatedPoint style for line and area doesn't contain the `radius` parameter anymore. The radius is derived from the `line.strokeWidth` parameter. Co-authored-by: Marco Vettorello --- package.json | 2 +- .../gauge_component.test.tsx.snap | 46 +- .../partition_vis_component.test.tsx.snap | 288 +++++------ .../__snapshots__/xy_chart.test.tsx.snap | 460 +++++++++--------- .../public/components/xy_chart.test.tsx | 4 +- .../public/helpers/data_layers.tsx | 14 +- .../charts/public/services/theme/mock.ts | 4 +- .../charts/public/services/theme/theme.ts | 4 +- .../public/components/series/area.tsx | 2 +- .../page_objects/visual_builder_page.ts | 2 +- .../page_objects/visualize_chart_page.ts | 8 +- .../hooks/use_data_viz_chart_theme.ts | 2 +- .../datafeed_chart_flyout.tsx | 2 +- .../components/charts/anomaly_chart/line.tsx | 6 +- .../charts/anomaly_chart/model_bounds.tsx | 13 +- .../charts/anomaly_chart/scatter.tsx | 13 +- .../components/charts/common/settings.ts | 13 +- .../duration_distribution_chart/index.tsx | 2 +- .../helper/get_chart_anomaly_timeseries.tsx | 5 +- .../get_comparison_chart_theme.ts | 2 +- .../public/hooks/use_chart_theme.ts | 4 +- .../public/hooks/use_chart_theme.tsx | 4 +- .../slo_details/components/wide_chart.tsx | 2 +- .../components/common/data_preview_chart.tsx | 11 +- .../pages/slos/components/slo_sparkline.tsx | 2 +- .../__snapshots__/donut_chart.test.tsx.snap | 46 +- .../common/components/charts/areachart.tsx | 2 +- .../rule_types/threshold/visualization.tsx | 2 +- .../alert_summary_widget_full_size.tsx | 2 +- .../components/execution_duration_chart.tsx | 2 +- .../watch_visualization.tsx | 2 +- yarn.lock | 8 +- 32 files changed, 496 insertions(+), 483 deletions(-) diff --git a/package.json b/package.json index b765f5867f9c4..6d15c14e25332 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "@elastic/apm-rum": "^5.16.1", "@elastic/apm-rum-core": "^5.21.1", "@elastic/apm-rum-react": "^2.0.3", - "@elastic/charts": "66.1.1", + "@elastic/charts": "67.0.0", "@elastic/datemath": "5.0.3", "@elastic/ebt": "^1.1.1", "@elastic/ecs": "^8.11.1", 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 00f2044dd9366..ae2eb489200ad 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 @@ -39,12 +39,11 @@ exports[`GaugeComponent renders the chart 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -52,13 +51,14 @@ exports[`GaugeComponent renders the chart 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -185,11 +185,11 @@ exports[`GaugeComponent renders the chart 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -392,11 +392,11 @@ exports[`GaugeComponent renders the chart 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -429,12 +429,11 @@ exports[`GaugeComponent renders the chart 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -442,13 +441,14 @@ exports[`GaugeComponent renders the chart 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", diff --git a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap index e822610217971..35c1fc0e63213 100644 --- a/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap @@ -269,12 +269,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -282,13 +281,14 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -415,11 +415,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -622,11 +622,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -659,12 +659,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -672,13 +671,14 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -820,7 +820,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = ` "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -1203,12 +1203,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -1216,13 +1215,14 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -1349,11 +1349,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -1556,11 +1556,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -1593,12 +1593,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -1606,13 +1605,14 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -1752,7 +1752,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] = "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": 1, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -2197,12 +2197,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -2210,13 +2209,14 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -2343,11 +2343,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -2550,11 +2550,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -2587,12 +2587,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -2600,13 +2599,14 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -2748,7 +2748,7 @@ exports[`PartitionVisComponent should render correct structure for multi-metric "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -3193,12 +3193,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -3206,13 +3205,14 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -3339,11 +3339,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -3546,11 +3546,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -3583,12 +3583,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -3596,13 +3595,14 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -3744,7 +3744,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = ` "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -4127,12 +4127,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -4140,13 +4139,14 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -4273,11 +4273,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -4480,11 +4480,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -4517,12 +4517,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -4530,13 +4529,14 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -4676,7 +4676,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] = "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": 1, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, @@ -5016,12 +5016,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -5029,13 +5028,14 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -5162,11 +5162,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -5369,11 +5369,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -5406,12 +5406,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -5419,13 +5418,14 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -5572,7 +5572,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] = "maxFontSize": 16, "minFontSize": 10, "outerSizeRatio": undefined, - "sectorLineStroke": "#FFF", + "sectorLineStroke": "__use__series__color__", "sectorLineWidth": 1.5, }, }, diff --git a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap index 789878ac673fa..5cfd34c6c8b5a 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap +++ b/src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap @@ -611,12 +611,11 @@ exports[`XYChart component it renders area 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -624,13 +623,14 @@ exports[`XYChart component it renders area 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -757,11 +757,11 @@ exports[`XYChart component it renders area 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -964,11 +964,11 @@ exports[`XYChart component it renders area 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -1001,12 +1001,11 @@ exports[`XYChart component it renders area 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -1014,13 +1013,14 @@ exports[`XYChart component it renders area 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -2166,12 +2166,11 @@ exports[`XYChart component it renders bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -2179,13 +2178,14 @@ exports[`XYChart component it renders bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -2312,11 +2312,11 @@ exports[`XYChart component it renders bar 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -2519,11 +2519,11 @@ exports[`XYChart component it renders bar 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -2556,12 +2556,11 @@ exports[`XYChart component it renders bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -2569,13 +2568,14 @@ exports[`XYChart component it renders bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -3721,12 +3721,11 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -3734,13 +3733,14 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -3867,11 +3867,11 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -4074,11 +4074,11 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -4111,12 +4111,11 @@ exports[`XYChart component it renders horizontal bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -4124,13 +4123,14 @@ exports[`XYChart component it renders horizontal bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -5276,12 +5276,11 @@ exports[`XYChart component it renders line 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -5289,13 +5288,14 @@ exports[`XYChart component it renders line 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -5422,11 +5422,11 @@ exports[`XYChart component it renders line 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -5629,11 +5629,11 @@ exports[`XYChart component it renders line 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -5666,12 +5666,11 @@ exports[`XYChart component it renders line 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -5679,13 +5678,14 @@ exports[`XYChart component it renders line 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -6831,12 +6831,11 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -6844,13 +6843,14 @@ exports[`XYChart component it renders stacked area 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -6977,11 +6977,11 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -7184,11 +7184,11 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -7221,12 +7221,11 @@ exports[`XYChart component it renders stacked area 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -7234,13 +7233,14 @@ exports[`XYChart component it renders stacked area 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -8386,12 +8386,11 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -8399,13 +8398,14 @@ exports[`XYChart component it renders stacked bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -8532,11 +8532,11 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -8739,11 +8739,11 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -8776,12 +8776,11 @@ exports[`XYChart component it renders stacked bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -8789,13 +8788,14 @@ exports[`XYChart component it renders stacked bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -9941,12 +9941,11 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -9954,13 +9953,14 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -10087,11 +10087,11 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -10294,11 +10294,11 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -10331,12 +10331,11 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -10344,13 +10343,14 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = ` "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -11526,12 +11526,11 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -11539,13 +11538,14 @@ exports[`XYChart component split chart should render split chart if both, splitR "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -11672,11 +11672,11 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -11879,11 +11879,11 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -11916,12 +11916,11 @@ exports[`XYChart component split chart should render split chart if both, splitR }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -11929,13 +11928,14 @@ exports[`XYChart component split chart should render split chart if both, splitR "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -13319,12 +13319,11 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -13332,13 +13331,14 @@ exports[`XYChart component split chart should render split chart if splitColumnA "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -13465,11 +13465,11 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -13672,11 +13672,11 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -13709,12 +13709,11 @@ exports[`XYChart component split chart should render split chart if splitColumnA }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -13722,13 +13721,14 @@ exports[`XYChart component split chart should render split chart if splitColumnA "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", @@ -15105,12 +15105,11 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -15118,13 +15117,14 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -15251,11 +15251,11 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -15458,11 +15458,11 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -15495,12 +15495,11 @@ exports[`XYChart component split chart should render split chart if splitRowAcce }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -15508,13 +15507,14 @@ exports[`XYChart component split chart should render split chart if splitRowAcce "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx index d5317379ee0e3..ae9c5a844dcc3 100644 --- a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx @@ -798,7 +798,7 @@ describe('XYChart component', () => { expect(lineArea.prop('markSizeAccessor')).toEqual(markSizeAccessorArg.markSizeAccessor); const expectedSeriesStyle = expect.objectContaining({ point: expect.objectContaining({ - visible: true, + visible: 'always', fill: ColorVariant.Series, }), }); @@ -842,7 +842,7 @@ describe('XYChart component', () => { const lineArea = dataLayers.find(LineSeries).at(0); const expectedSeriesStyle = expect.objectContaining({ point: expect.objectContaining({ - visible: showPoints, + visible: showPoints ? 'always' : 'never', }), }); expect(lineArea.prop('areaSeriesStyle')).toEqual(expectedSeriesStyle); diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx b/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx index f9c07ab7b83a9..e45edccba2779 100644 --- a/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx +++ b/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx @@ -303,11 +303,15 @@ const getPointConfig: GetPointConfigFn = ({ emphasizeFitting, showPoints, pointsRadius, -}) => ({ - visible: showPoints !== undefined ? showPoints : !xAccessor || markSizeAccessor !== undefined, - radius: pointsRadius !== undefined ? pointsRadius : xAccessor && !emphasizeFitting ? 5 : 0, - fill: markSizeAccessor ? ColorVariant.Series : undefined, -}); +}) => { + return { + visible: (showPoints !== undefined ? showPoints : !xAccessor || markSizeAccessor !== undefined) + ? 'always' + : 'never', + radius: pointsRadius !== undefined ? pointsRadius : xAccessor && !emphasizeFitting ? 5 : 0, + fill: markSizeAccessor ? ColorVariant.Series : undefined, + }; +}; const getFitLineConfig = () => ({ visible: true, diff --git a/src/plugins/charts/public/services/theme/mock.ts b/src/plugins/charts/public/services/theme/mock.ts index c8aae8085d2d5..063c6fc196245 100644 --- a/src/plugins/charts/public/services/theme/mock.ts +++ b/src/plugins/charts/public/services/theme/mock.ts @@ -13,14 +13,14 @@ import { ThemeService } from './theme'; export const MOCK_SPARKLINE_THEME: PartialTheme = { lineSeriesStyle: { point: { - visible: false, + visible: 'never', strokeWidth: 1, radius: 1, }, }, areaSeriesStyle: { point: { - visible: false, + visible: 'never', strokeWidth: 1, radius: 1, }, diff --git a/src/plugins/charts/public/services/theme/theme.ts b/src/plugins/charts/public/services/theme/theme.ts index e3624042b75cd..d7ec8c03e506c 100644 --- a/src/plugins/charts/public/services/theme/theme.ts +++ b/src/plugins/charts/public/services/theme/theme.ts @@ -62,14 +62,14 @@ export class ThemeService { return { lineSeriesStyle: { point: { - visible: false, + visible: 'never', strokeWidth: 1, radius: 1, }, }, areaSeriesStyle: { point: { - visible: false, + visible: 'never', strokeWidth: 1, radius: 1, }, 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 aabc213713a3b..4bb2a08e91153 100644 --- a/src/plugins/vis_types/timelion/public/components/series/area.tsx +++ b/src/plugins/vis_types/timelion/public/components/series/area.tsx @@ -61,7 +61,7 @@ const getAreaSeriesStyle = ({ radius: points?.radius ?? 3, stroke: color, strokeWidth: points?.lineWidth ?? 2, - visible: points?.show ?? false, + visible: points?.show ? 'always' : 'never', shape: points?.symbol === 'cross' ? PointShape.X : points?.symbol, }, }); diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts index 48d920dee83ca..702c31a9b801b 100644 --- a/test/functional/page_objects/visual_builder_page.ts +++ b/test/functional/page_objects/visual_builder_page.ts @@ -1007,7 +1007,7 @@ export class VisualBuilderPageObject extends FtrService { public async getAreaChartData(chartData?: DebugState, nth: number = 0) { const areas = (await this.getChartItems(chartData)) as DebugState['areas']; - return areas?.[nth]?.lines.y1.points.map(({ x, y }) => [x, y]); + return areas?.[nth]?.lines.y1.points.sort((a, b) => a.x - b.x).map(({ x, y }) => [x, y]); } public async getAnnotationsData(chartData?: DebugState) { diff --git a/test/functional/page_objects/visualize_chart_page.ts b/test/functional/page_objects/visualize_chart_page.ts index 7640a30d07775..9fe9afb32d869 100644 --- a/test/functional/page_objects/visualize_chart_page.ts +++ b/test/functional/page_objects/visualize_chart_page.ts @@ -117,7 +117,9 @@ export class VisualizeChartPageObject extends FtrService { ) { const areas = (await this.getEsChartDebugState(selector))?.areas ?? []; const points = areas.find(({ name }) => name === dataLabel)?.lines.y1.points ?? []; - return shouldContainXAxisData ? points.map(({ x, y }) => [x, y]) : points.map(({ y }) => y); + return shouldContainXAxisData + ? points.sort((a, b) => a.x - b.x).map(({ x, y }) => [x, y]) + : points.sort((a, b) => a.x - b.x).map(({ y }) => y); } /** @@ -138,7 +140,7 @@ export class VisualizeChartPageObject extends FtrService { public async getLineChartData(selector: string, dataLabel = 'Count') { const lines = (await this.getEsChartDebugState(selector))?.lines ?? []; const points = lines.find(({ name }) => name === dataLabel)?.points ?? []; - return points.map(({ y }) => y); + return points.sort((a, b) => a.x - b.x).map(({ y }) => y); } /** @@ -148,7 +150,7 @@ export class VisualizeChartPageObject extends FtrService { public async getBarChartData(selector: string, dataLabel = 'Count') { const bars = (await this.getEsChartDebugState(selector))?.bars ?? []; const values = bars.find(({ name }) => name === dataLabel)?.bars ?? []; - return values.map(({ y }) => y); + return values.sort((a, b) => a.x - b.x).map(({ y }) => y); } private async toggleLegend(force = false) { diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts index 9e21884b6cb4d..269c9b55fc3de 100644 --- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts +++ b/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/hooks/use_data_viz_chart_theme.ts @@ -43,7 +43,7 @@ export const useDataVizChartTheme = (): PartialTheme => { visible: true, }, point: { - visible: false, + visible: 'never', radius: 0, opacity: 0, }, diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx index 055b297af893f..a2f271f243b1c 100644 --- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx +++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/datafeed_chart_flyout/datafeed_chart_flyout.tsx @@ -428,7 +428,7 @@ export const DatafeedChartFlyout: FC = ({ theme={{ lineSeriesStyle: { point: { - visible: false, + visible: 'never', }, }, }} diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx index 17898e4081895..461bd6feec609 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx @@ -8,7 +8,7 @@ import type { FC } from 'react'; import React from 'react'; import { LineSeries, ScaleType, CurveType } from '@elastic/charts'; -import { seriesStyle, useChartColors } from '../common/settings'; +import { lineSeriesStyle, useChartColors } from '../common/settings'; interface Props { chartData: any[]; @@ -16,10 +16,6 @@ interface Props { const SPEC_ID = 'line'; -const lineSeriesStyle = { - ...seriesStyle, -}; - export const Line: FC = ({ chartData }) => { const { LINE_COLOR } = useChartColors(); return ( diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx index aefefe4decada..51eb6f222215f 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx @@ -7,9 +7,10 @@ import type { FC } from 'react'; import React from 'react'; +import type { AreaSeriesStyle, RecursivePartial } from '@elastic/charts'; import { ScaleType, AreaSeries, CurveType } from '@elastic/charts'; import type { ModelItem } from '../../../../common/results_loader'; -import { seriesStyle, useChartColors } from '../common/settings'; +import { areaSeriesStyle, useChartColors } from '../common/settings'; interface Props { modelData?: ModelItem[]; @@ -17,14 +18,14 @@ interface Props { const SPEC_ID = 'model'; -const areaSeriesStyle = { - ...seriesStyle, +const style: RecursivePartial = { + ...areaSeriesStyle, area: { - ...seriesStyle.area, + ...areaSeriesStyle.area, visible: true, }, line: { - ...seriesStyle.line, + ...areaSeriesStyle.line, strokeWidth: 1, opacity: 0.4, }, @@ -43,7 +44,7 @@ export const ModelBounds: FC = ({ modelData }) => { y0Accessors={['modelLower']} data={model} curve={CurveType.CURVE_MONOTONE_X} - areaSeriesStyle={areaSeriesStyle} + areaSeriesStyle={style} color={MODEL_COLOR} /> ); diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx index 555e9da3c1961..056b06c6233de 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx @@ -7,8 +7,9 @@ import type { FC } from 'react'; import React from 'react'; +import type { LineSeriesStyle, RecursivePartial } from '@elastic/charts'; import { LineSeries, ScaleType, CurveType } from '@elastic/charts'; -import { seriesStyle, useChartColors } from '../common/settings'; +import { lineSeriesStyle, useChartColors } from '../common/settings'; interface Props { chartData: any[]; @@ -16,15 +17,15 @@ interface Props { const SPEC_ID = 'scatter'; -const scatterSeriesStyle = { - ...seriesStyle, +const scatterSeriesStyle: RecursivePartial = { + ...lineSeriesStyle, line: { - ...seriesStyle.line, + ...lineSeriesStyle.line, visible: false, }, point: { - ...seriesStyle.point, - visible: true, + ...lineSeriesStyle.point, + visible: 'always', }, }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts index d521573f646ce..6f46aabef8aa2 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/common/settings.ts @@ -7,6 +7,7 @@ import type { IUiSettingsClient } from '@kbn/core/public'; import type { TimeBuckets } from '@kbn/ml-time-buckets'; +import type { AreaSeriesStyle, LineSeriesStyle, RecursivePartial } from '@elastic/charts'; import { useCurrentThemeVars } from '../../../../../../contexts/kibana'; import type { JobCreatorType } from '../../../../common/job_creator'; import { isMultiMetricJobCreator, isPopulationJobCreator } from '../../../../common/job_creator'; @@ -36,22 +37,22 @@ export const defaultChartSettings: ChartSettings = { intervalMs: 0, }; -export const seriesStyle = { +export const lineSeriesStyle: RecursivePartial = { line: { strokeWidth: 2, visible: true, opacity: 1, }, - border: { - visible: false, - strokeWidth: 0, - }, point: { - visible: false, + visible: 'never', radius: 2, strokeWidth: 4, opacity: 0.5, }, +}; + +export const areaSeriesStyle: RecursivePartial = { + ...lineSeriesStyle, area: { opacity: 0.25, visible: false, diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx index 5a50e0b4e7abf..1a88bf8b48c0b 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx @@ -176,7 +176,7 @@ export function DurationDistributionChart({ visible: true, }, point: { - visible: false, + visible: 'never', radius: 0, }, }, diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx index 5e116ed255982..56b61cb02d8b9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx @@ -11,6 +11,7 @@ import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import { getSeverity } from '@kbn/ml-anomaly-utils/get_severity'; import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity'; import { ML_ANOMALY_THRESHOLD } from '@kbn/ml-anomaly-utils/anomaly_threshold'; +import type { AreaSeriesStyle, RecursivePartial } from '@elastic/charts'; import { getSeverityColor } from '../../../../../common/anomaly_detection'; import { ServiceAnomalyTimeseries } from '../../../../../common/anomaly_detection/service_anomaly_timeseries'; import { APMChartSpec } from '../../../../../typings/timeseries'; @@ -69,7 +70,7 @@ export function getChartAnomalyTimeseries({ const scores: APMChartSpec[] = severities.map(({ severity, threshold }) => { const color = getSeverityColor(threshold); - const style = { + const style: RecursivePartial = { line: { opacity: 0, }, @@ -77,7 +78,7 @@ export function getChartAnomalyTimeseries({ fill: color, }, point: { - visible: true, + visible: 'always', opacity: 0.75, radius: 3, strokeWidth: 1, diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/get_comparison_chart_theme.ts b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/get_comparison_chart_theme.ts index 91e8461f6d39c..c4684d6398c94 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/get_comparison_chart_theme.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/get_comparison_chart_theme.ts @@ -19,7 +19,7 @@ export function getComparisonChartTheme(): PartialTheme { visible: true, }, point: { - visible: false, + visible: 'never', }, }, }; diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_chart_theme.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_chart_theme.ts index 0e3ced91f8d51..65873a13de506 100644 --- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_chart_theme.ts +++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/public/hooks/use_chart_theme.ts @@ -26,10 +26,10 @@ export function useChartTheme() { color: 'transparent', }, lineSeriesStyle: { - point: { visible: false }, + point: { visible: 'never' }, }, areaSeriesStyle: { - point: { visible: false }, + point: { visible: 'never' }, }, }; diff --git a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx index fc989e0026943..1a914e4abcd7e 100644 --- a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx @@ -25,10 +25,10 @@ export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } { color: 'transparent', }, lineSeriesStyle: { - point: { visible: false }, + point: { visible: 'never' }, }, areaSeriesStyle: { - point: { visible: false }, + point: { visible: 'never' }, }, }; diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx index d2cde516557c4..faff275ffbeac 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_details/components/wide_chart.tsx @@ -127,7 +127,7 @@ export function WideChart({ chart, data, id, isLoading, state, onBrushed, slo }: line: { strokeWidth: 1, }, - point: { visible: false }, + point: { visible: 'never' }, }} xAccessor="key" xScaleType={ScaleType.Time} diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx index 5241e6c78aebe..e797c4d5d3b3d 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slo_edit/components/common/data_preview_chart.tsx @@ -289,12 +289,19 @@ export function DataPreviewChart({ theme={[ { lineSeriesStyle: { - point: { visible: false }, + point: { visible: 'never' }, }, }, ]} noResults={ - + } locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx index e220643bbc3b3..d00152e425dfd 100644 --- a/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx +++ b/x-pack/plugins/observability_solution/slo/public/pages/slos/components/slo_sparkline.tsx @@ -82,7 +82,7 @@ export function SloSparkline({ chart, data, id, isLoading, size, state }: Props) fit={Fit.Nearest} id={id} lineSeriesStyle={{ - point: { visible: false }, + point: { visible: 'never' }, }} xAccessor={'key'} xScaleType={ScaleType.Time} diff --git a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index bc77eccbb4c08..15f8ad666dced 100644 --- a/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/observability_solution/uptime/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -52,12 +52,11 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -65,13 +64,14 @@ exports[`DonutChart component passes correct props without errors for valid prop "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": false, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "never", }, + "pointVisibilityMinDistance": 20, }, "axes": Object { "axisLine": Object { @@ -198,11 +198,11 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "bubbleSeriesStyle": Object { "point": Object { - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, "radius": 2, - "strokeWidth": 1, - "visible": true, + "strokeWidth": 0, + "visible": "always", }, }, "bulletGraph": Object { @@ -405,11 +405,11 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "highlighter": Object { "point": Object { - "fill": "__use__empty__color__", - "opacity": 1, - "radius": 10, - "stroke": "__use__series__color__", - "strokeWidth": 4, + "fill": "__use__series__color__", + "opacity": 0.5, + "radius": 5, + "stroke": "__use__empty__color__", + "strokeWidth": 0, }, }, "legend": Object { @@ -442,12 +442,11 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "isolatedPoint": Object { "enabled": true, - "fill": "white", + "fill": "__use__series__color__", "opacity": 1, - "radius": 2, "stroke": "__use__series__color__", "strokeWidth": 1, - "visible": true, + "visible": "auto", }, "line": Object { "opacity": 1, @@ -455,13 +454,14 @@ exports[`DonutChart component passes correct props without errors for valid prop "visible": true, }, "point": Object { - "fill": "#FFF", + "fill": "__use__series__color__", "opacity": 1, "radius": 3, - "stroke": "__use__series__color__", - "strokeWidth": 2, - "visible": true, + "stroke": "__use__empty__color__", + "strokeWidth": 0, + "visible": "auto", }, + "pointVisibilityMinDistance": 40, }, "metric": Object { "barBackground": "#EDF0F5", diff --git a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx index ec3e6abd727dc..63bd1c38c8eb9 100644 --- a/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx +++ b/x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx @@ -44,7 +44,7 @@ const getSeriesLineStyle = (): RecursivePartial => { visible: true, }, point: { - visible: false, + visible: 'never', radius: 0.2, strokeWidth: 1, opacity: 1, diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx index a6af4a2ae48a4..dbf8e9bc476c5 100644 --- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx +++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx @@ -50,7 +50,7 @@ const chartThemeOverrides = (): PartialTheme => { strokeWidth: 3, }, point: { - visible: false, + visible: 'never', }, }, }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx index cc695fe51aa68..a144969314f09 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx @@ -133,7 +133,7 @@ export const AlertSummaryWidgetFullSize = ({ line: { strokeWidth: 2, }, - point: { visible: false }, + point: { visible: 'never' }, }} curve={CurveType.CURVE_MONOTONE_X} timeZone={timeZone} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx index c8afbb76f5910..6ab5b96cade27 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx @@ -116,7 +116,7 @@ export const ExecutionDurationChart: React.FunctionComponent = ({ { strokeWidth: 3, }, point: { - visible: false, + visible: 'never', }, }, }; diff --git a/yarn.lock b/yarn.lock index 236319c030c55..7b27506c7e63e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1643,10 +1643,10 @@ dependencies: object-hash "^1.3.0" -"@elastic/charts@66.1.1": - version "66.1.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-66.1.1.tgz#94b931a2c070d92cc35574392a404435d2d37de9" - integrity sha512-CQQUBsU7VwnencHcnZ6Wh5mGjkX73ui6nSTjtwJuxtjXezflN6cPzbWKgwVKeduxHGoHcWUWoScLSgSCLkMdJQ== +"@elastic/charts@67.0.0": + version "67.0.0" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-67.0.0.tgz#840737195b79748b04bf7a0c9ddb0a00da5fdf43" + integrity sha512-ORiPySIe53vWyGZt5CHNm7q+UyStL0caqpdwqQWO5F22kRNLs14bsOnJdMzrdLpR1HEhX4e36kYyXfedbQA8AQ== dependencies: "@popperjs/core" "^2.11.8" bezier-easing "^2.1.0"