From 9f9892b255e62f6d42f4119458a791a62d592986 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 29 Sep 2020 09:48:34 +0200 Subject: [PATCH] fix: render continuous line/area between non-adjacent points (#833) When rendering line or area charts with multiple series, we generally collect all the available X values and we automatically fill each series with missing x data points (to cover the most used case where we are rendering pre-aggregated data in Kibana). This can cause issues when we want to keep the non-consecutive nature of the line/area. This fix removes the x filling for line and area charts in the following case: non-stacked line or area chart, with continuous scale and no fit function. We apply this fix only to that specific case because: for stacked lines/area we need to clearly compute the stack of each data point on the x-axis, for categorical-ordinal scale (where a line/area chart doesn't always match with the best practice) the x-axis doesn't always describe a continuity within the data. fix #825 BREAKING CHANGE: when rendering non-stacked line/area charts with a continuous x scale and no fit function, the line/area between non-consecutive data points will be rendered as a continuous line/area without adding an uncertain dashed line/ semi-transparent area that connects the two, non-adjacent, points. --- .playground/index.html | 30 +++---- .playground/playground.tsx | 16 ++-- ...a-points-visually-looks-correct-1-snap.png | Bin 0 -> 20915 bytes ...ous-data-points-no-fit-function-1-snap.png | Bin 0 -> 20759 bytes ...continuous-data-points-with-fit-1-snap.png | Bin 0 -> 20557 bytes ...ous-data-points-no-fit-function-1-snap.png | Bin 0 -> 20105 bytes ...continuous-data-points-with-fit-1-snap.png | Bin 0 -> 20915 bytes integration/tests/area_stories.test.ts | 13 +++ integration/tests/line_stories.test.ts | 13 +++ src/chart_types/xy_chart/state/utils/utils.ts | 50 +++++++++--- src/chart_types/xy_chart/utils/fill_series.ts | 37 ++++++++- .../utils/nonstacked_series_utils.test.ts | 10 ++- src/chart_types/xy_chart/utils/series.test.ts | 7 +- src/chart_types/xy_chart/utils/series.ts | 16 ++-- stories/line/11_discontinuous_data_points.tsx | 74 ++++++++++++++++++ stories/line/line.stories.tsx | 1 + 16 files changed, 210 insertions(+), 57 deletions(-) create mode 100644 integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-line-chart-discontinuous-data-points-visually-looks-correct-1-snap.png create mode 100644 integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-no-fit-function-1-snap.png create mode 100644 integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-non-stacked-linear-area-with-discontinuous-data-points-with-fit-1-snap.png create mode 100644 integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-no-fit-function-1-snap.png create mode 100644 integration/tests/__image_snapshots__/line-stories-test-ts-line-series-stories-non-stacked-linear-line-with-discontinuous-data-points-with-fit-1-snap.png create mode 100644 stories/line/11_discontinuous_data_points.tsx diff --git a/.playground/index.html b/.playground/index.html index 2403a54bfc..3f30690eb5 100644 --- a/.playground/index.html +++ b/.playground/index.html @@ -7,29 +7,19 @@