fix(LineChart): skip lines at invalid/missing data points (don't forc…

…e connect)
datopian · Jan 22, 2025 · 62dbc35 · 62dbc35
1 parent 12f0d0d
commit 62dbc35
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/.changeset/wicked-dodos-float.md b/.changeset/wicked-dodos-float.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': patch
+---
+
+LineChart: break lines at invalid / missing values (don't connect if there are gaps in values).
diff --git a/packages/components/src/components/LineChart.tsx b/packages/components/src/components/LineChart.tsx
@@ -47,11 +47,15 @@ export function LineChart({
       color: 'black',
       strokeWidth: 1,
       tooltip: true,
+      invalid: "break-paths"
     },
     data: specData,
     ...(isMultiYAxis
       ? {
-          transform: [{ fold: yAxis, as: ['key', 'value'] }],
+          transform: [
+            { fold: yAxis, as: ['key', 'value'] },
+            { filter: 'datum.value != null && datum.value != ""' }
+          ],
         }
       : {}),
     selection: {

diff --git a/packages/components/src/types/properties.ts b/packages/components/src/types/properties.ts
@@ -8,7 +8,7 @@
 type URL = string; // Just in case we want to transform it into an object with configurations
 export interface Data {
   url?: URL;
-  values?: { [key: string]: number | string }[];
+  values?: { [key: string]: number | string | null | undefined }[];
   csv?: string;
 }
 

diff --git a/packages/components/stories/LineChart.stories.ts b/packages/components/stories/LineChart.stories.ts
@@ -120,3 +120,42 @@ export const FromURL: Story = {
     yAxis: 'Price',
   },
 };
+
+
+// export const FromURLMulti: Story = {
+//   name: 'Line chart from URL Multi Column',
+//   args: {
+//     data: {
+//       url: 'https://raw.githubusercontent.com/datasets/sea-level-rise/refs/heads/main/data/epa-sea-level.csv',
+//     },
+//     title: 'Sea Level Rise (1880-2023)',
+//     xAxis: 'Year',
+//     yAxis: ["CSIRO Adjusted Sea Level", "NOAA Adjusted Sea Level"],
+//     xAxisType: 'temporal',
+//     xAxisTimeUnit: 'year',
+//     yAxisType: 'quantitative'
+//   },
+// };
+
+// export const MultipleSeriesMissingValues: Story = {
+//   name: 'Line chart with missing values',
+//   args: {
+//     data: {
+//       values: [
+//         { year: '2020', seriesA: 10, seriesB: 15 },
+//         { year: '2021', seriesA: 20 },  // seriesB missing
+//         { year: '2022', seriesA: 15 },  // seriesB missing
+//         { year: '2023', seriesB: 30 },  // seriesA missing
+//         { year: '2024', seriesA: 25, seriesB: 35 },
+//         { year: '2024', seriesA: 20, seriesB: 40 },
+//         { year: '2024', seriesB: 45 },
+//       ],
+//     },
+//     title: 'Handling Missing Data Points',
+//     xAxis: 'year',
+//     yAxis: ['seriesA', 'seriesB'],
+//     xAxisType: 'temporal',
+//     xAxisTimeUnit: 'year',
+//     yAxisType: 'quantitative'
+//   },
+// };