feat: LineChart component API and docs improvements

packages/components/src/components/LineChart.tsx

@@ -2,31 +2,34 @@ import { useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import { VegaLite } from './VegaLite';
 import loadData from '../lib/loadData';
+import { Data } from '../types/properties';
 
 type AxisType = 'quantitative' | 'temporal';
 type TimeUnit = 'year' | undefined; // or ...
 
 export type LineChartProps = {
-  data: Array<Array<string | number>> | string | { x: string; y: number }[];
+  data: Omit<Data, 'csv'>;
   title?: string;
-  xAxis?: string;
+  xAxis: string;
   xAxisType?: AxisType;
-  xAxisTimeUnit: TimeUnit;
+  xAxisTimeUnit?: TimeUnit;
-  yAxis?: string;
+  yAxis: string;
   yAxisType?: AxisType;
   fullWidth?: boolean;
 };
 
 export function LineChart({
-  data = [],
+  data,
   fullWidth = false,
   title = '',
-  xAxis = 'x',
+  xAxis,
   xAxisType = 'temporal',
   xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
-  yAxis = 'y',
+  yAxis,
   yAxisType = 'quantitative',
 }: LineChartProps) {
+  const url = data.url;
+  const values = data.values;
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   //  By default, assumes data is an Array...
@@ -64,13 +67,12 @@ export function LineChart({
   } as any;
 
   useEffect(() => {
-    //  If data is string, assume it's a URL
+    if (url) {
-    if (typeof data === 'string') {
       setIsLoading(true);
 
       //  Manualy loading the data allows us to do other kinds
       //  of stuff later e.g. load a file partially
-      loadData(data).then((res: any) => {
+      loadData(url).then((res: any) => {
         setSpecData({ values: res, format: { type: 'csv' } });
         setIsLoading(false);
       });
@@ -78,12 +80,8 @@ export function LineChart({
   }, []);
 
   var vegaData = {};
-  if (Array.isArray(data)) {
+  if (values) {
-    var dataObj;
+    vegaData = { table: values };
-    dataObj = data.map((r) => {
-      return { x: r[0], y: r[1] };
-    });
-    vegaData = { table: dataObj };
   }
 
   return isLoading ? (

packages/components/stories/LineChart.stories.ts

@@ -10,27 +10,30 @@ const meta: Meta = {
   argTypes: {
     data: {
       description:
-        'Data to be displayed.\n\n E.g.: [["1990", 1], ["1991", 2]] \n\nOR\n\n "https://url.to/data.csv"',
+        'Data to be displayed. \n\n \
+Must be an object with one of the following properties: `url` or `values` \n\n \
+`url`: URL pointing to a CSV file. \n\n \
+`values`: array of objects \n\n',
     },
     title: {
-      description: 'Title to display on the chart. Optional.',
+      description: 'Title to display on the chart.',
     },
     xAxis: {
       description:
-        'Name of the X axis on the data. Required when the "data" parameter is an URL.',
+        'Name of the column header or object property that represents the X-axis on the data.',
     },
     xAxisType: {
-      description: 'Type of the X axis',
+      description: 'Type of the X-axis.',
     },
     xAxisTimeUnit: {
-      description: 'Time unit of the X axis (optional)',
+      description: 'Time unit of the X-axis, in case its type is `temporal.`',
     },
     yAxis: {
       description:
-        'Name of the Y axis on the data. Required when the "data" parameter is an URL.',
+        'Name of the column header or object property that represents the Y-axis on the data.',
     },
     yAxisType: {
-      description: 'Type of the Y axis',
+      description: 'Type of the Y-axis',
     },
     fullWidth: {
       description:
@@ -47,21 +50,27 @@ type Story = StoryObj<LineChartProps>;
 export const FromDataPoints: Story = {
   name: 'Line chart from array of data points',
   args: {
-    data: [
+    data: {
-      ['1850', -0.41765878],
+      values: [
-      ['1851', -0.2333498],
+        { year: '1850', value: -0.41765878 },
-      ['1852', -0.22939907],
+        { year: '1851', value: -0.2333498 },
-      ['1853', -0.27035445],
+        { year: '1852', value: -0.22939907 },
-      ['1854', -0.29163003],
+        { year: '1853', value: -0.27035445 },
-    ],
+        { year: '1854', value: -0.29163003 },
+      ],
+    },
+    xAxis: 'year',
+    yAxis: 'value',
   },
 };
 
 export const FromURL: Story = {
   name: 'Line chart from URL',
   args: {
+    data: {
+      url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
+    },
     title: 'Oil Price x Year',
-    data: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv',
     xAxis: 'Date',
     yAxis: 'Price',
   },