From 63d9e3b7543c38154e6989ef1cc1d694ae9fc4f8 Mon Sep 17 00:00:00 2001
From: Ola Rubaj <52197250+olayway@users.noreply.github.com>
Date: Wed, 23 Oct 2024 18:03:07 +0200
Subject: [PATCH] [feat,LineChart][s]: support for multiple series

---
 .changeset/little-ways-refuse.md              |  5 ++
 .../components/src/components/LineChart.tsx   | 28 +++++++++-
 .../components/stories/LineChart.stories.ts   | 51 ++++++++++++++++++-
 3 files changed, 81 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/little-ways-refuse.md

diff --git a/.changeset/little-ways-refuse.md b/.changeset/little-ways-refuse.md
new file mode 100644
index 000000000..c366fbbf5
--- /dev/null
+++ b/.changeset/little-ways-refuse.md
@@ -0,0 +1,5 @@
+---
+'@portaljs/components': minor
+---
+
+Support for plotting multiple series in LineChart component.
diff --git a/packages/components/src/components/LineChart.tsx b/packages/components/src/components/LineChart.tsx
index f6ed33094..4fc8e70d9 100644
--- a/packages/components/src/components/LineChart.tsx
+++ b/packages/components/src/components/LineChart.tsx
@@ -13,9 +13,10 @@ export type LineChartProps = {
   xAxis: string;
   xAxisType?: AxisType;
   xAxisTimeUnit?: TimeUnit;
-  yAxis: string;
+  yAxis: string | string[];
   yAxisType?: AxisType;
   fullWidth?: boolean;
+  symbol?: string;
 };
 
 export function LineChart({
@@ -26,6 +27,7 @@ export function LineChart({
   xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
   yAxis,
   yAxisType = 'quantitative',
+  symbol,
 }: LineChartProps) {
   const url = data.url;
   const values = data.values;
@@ -33,6 +35,7 @@ export function LineChart({
 
   //  By default, assumes data is an Array...
   const [specData, setSpecData] = useState<any>({ name: 'table' });
+  const isMultiYAxis = Array.isArray(yAxis);
 
   const spec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
@@ -46,6 +49,11 @@ export function LineChart({
       tooltip: true,
     },
     data: specData,
+    ...(isMultiYAxis
+      ? {
+          transform: [{ fold: yAxis, as: ['key', 'value'] }],
+        }
+      : {}),
     selection: {
       grid: {
         type: 'interval',
@@ -59,9 +67,25 @@ export function LineChart({
         type: xAxisType,
       },
       y: {
-        field: yAxis,
+        field: isMultiYAxis ? 'value' : yAxis,
         type: yAxisType,
       },
+      ...(symbol
+        ? {
+            color: {
+              field: symbol,
+              type: 'nominal',
+            },
+          }
+        : {}),
+      ...(isMultiYAxis
+        ? {
+            color: {
+              field: 'key',
+              type: 'nominal',
+            },
+          }
+        : {}),
     },
   } as any;
 
diff --git a/packages/components/stories/LineChart.stories.ts b/packages/components/stories/LineChart.stories.ts
index 27a8b3f8f..a77bb48ec 100644
--- a/packages/components/stories/LineChart.stories.ts
+++ b/packages/components/stories/LineChart.stories.ts
@@ -30,11 +30,15 @@ Must be an object with one of the following properties: `url` or `values` \n\n \
     },
     yAxis: {
       description:
-        'Name of the column header or object property that represents the Y-axis on the data.',
+        'Name of the column headers or object properties that represent the Y-axis on the data.',
     },
     yAxisType: {
       description: 'Type of the Y-axis',
     },
+    symbol: {
+      description:
+        'Name of the column header or object property that represents a series for multiple series.',
+    },
   },
 };
 
@@ -60,6 +64,51 @@ export const FromDataPoints: Story = {
   },
 };
 
+export const MultiSeries: Story = {
+  name: 'Line chart with multiple series (specifying symbol)',
+  args: {
+    data: {
+      values: [
+        { year: '1850', value: -0.41765878, z: 'A' },
+        { year: '1851', value: -0.2333498, z: 'A' },
+        { year: '1852', value: -0.22939907, z: 'A' },
+        { year: '1853', value: -0.27035445, z: 'A' },
+        { year: '1854', value: -0.29163003, z: 'A' },
+        { year: '1850', value: -0.42993882, z: 'B' },
+        { year: '1851', value: -0.30365549, z: 'B' },
+        { year: '1852', value: -0.27905189, z: 'B' },
+        { year: '1853', value: -0.22939704, z: 'B' },
+        { year: '1854', value: -0.25688013, z: 'B' },
+        { year: '1850', value: -0.4757164, z: 'C' },
+        { year: '1851', value: -0.41971018, z: 'C' },
+        { year: '1852', value: -0.40724799, z: 'C' },
+        { year: '1853', value: -0.45049156, z: 'C' },
+        { year: '1854', value: -0.41896583, z: 'C' },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'value',
+    symbol: 'z',
+  },
+};
+
+export const MultiColumns: Story = {
+  name: 'Line chart with multiple series (with multiple columns)',
+  args: {
+    data: {
+      values: [
+        { year: '1850', A: -0.41765878, B: -0.42993882, C: -0.4757164 },
+        { year: '1851', A: -0.2333498, B: -0.30365549, C: -0.41971018 },
+        { year: '1852', A: -0.22939907, B: -0.27905189, C: -0.40724799 },
+        { year: '1853', A: -0.27035445, B: -0.22939704, C: -0.45049156 },
+        { year: '1854', A: -0.29163003, B: -0.25688013, C: -0.41896583 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: ['A', 'B', 'C'],
+  },
+};
+
 export const FromURL: Story = {
   name: 'Line chart from URL',
   args: {