diff --git a/packages/components/src/components/PlotlyLineChart.tsx b/packages/components/src/components/PlotlyLineChart.tsx index 2d8323f3..1732b826 100644 --- a/packages/components/src/components/PlotlyLineChart.tsx +++ b/packages/components/src/components/PlotlyLineChart.tsx @@ -1,7 +1,8 @@ -import { QueryClient, QueryClientProvider, useQuery } from "react-query"; -import { Plotly } from "./Plotly"; -import Papa, { ParseConfig } from "papaparse"; -import LoadingSpinner from "./LoadingSpinner"; +import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; +import { Plotly } from './Plotly'; +import Papa, { ParseConfig } from 'papaparse'; +import LoadingSpinner from './LoadingSpinner'; +import { Data } from '../types/properties'; const queryClient = new QueryClient(); @@ -17,7 +18,7 @@ async function getCsv(url: string, bytes: number) { async function parseCsv( file: string, - parsingConfig: ParseConfig, + parsingConfig: ParseConfig ): Promise { return new Promise((resolve, reject) => { Papa.parse(file, { @@ -39,38 +40,33 @@ async function parseCsv( } export interface PlotlyLineChartProps { - url?: string; - data?: { [key: string]: number | string }[]; - rawCsv?: string; - randomId?: number; + data: Data; bytes?: number; parsingConfig?: ParseConfig; xAxis: string; yAxis: string; lineLabel?: string; title?: string; + uniqueId?: number; } export const PlotlyLineChart: React.FC = ({ - url, data, - rawCsv, bytes = 5132288, parsingConfig = {}, xAxis, yAxis, lineLabel, - title = "", + title = '', + uniqueId, }) => { - const randomId = Math.random(); + uniqueId = uniqueId ?? Math.random(); return ( // Provide the client to your App = ({ }; const LineChartInner: React.FC = ({ - url, data, - rawCsv, - randomId, + uniqueId, bytes, parsingConfig, xAxis, @@ -94,18 +88,22 @@ const LineChartInner: React.FC = ({ lineLabel, title, }) => { - if (data) { + const values = data.values; + const url = data.url; + const csv = data.csv; + + if (values) { return ( -
+
d[xAxis]), - y: data.map((d) => d[yAxis]), - mode: "lines", + x: values.map((d) => d[xAxis]), + y: values.map((d) => d[yAxis]), + mode: 'lines', name: lineLabel, }, ]} @@ -114,18 +112,18 @@ const LineChartInner: React.FC = ({ ); } const { data: csvString, isLoading: isDownloadingCSV } = useQuery( - ["dataCsv", url, randomId], + ['dataCsv', url, uniqueId], () => getCsv(url as string, bytes ?? 5132288), - { enabled: !!url }, + { enabled: !!url } ); const { data: parsedData, isLoading: isParsing } = useQuery( - ["dataPreview", csvString, randomId], + ['dataPreview', csvString, uniqueId], () => parseCsv( - rawCsv ? (rawCsv as string) : (csvString as string), - parsingConfig ?? {}, + csv ? (csv as string) : (csvString as string), + parsingConfig ?? {} ), - { enabled: rawCsv ? true : !!csvString }, + { enabled: csv ? true : !!csvString } ); if (isParsing || isDownloadingCSV)
@@ -133,7 +131,7 @@ const LineChartInner: React.FC = ({
; if (parsedData) return ( -
+
= ({ { x: parsedData.data.map((d: any) => d[xAxis]), y: parsedData.data.map((d: any) => d[yAxis]), - mode: "lines", + mode: 'lines', name: lineLabel, }, ]} diff --git a/packages/components/stories/Map.stories.ts b/packages/components/stories/Map.stories.ts index 85c7d20f..0cdbd8a6 100644 --- a/packages/components/stories/Map.stories.ts +++ b/packages/components/stories/Map.stories.ts @@ -13,7 +13,7 @@ const meta: Meta = { 'Data to be displayed.\n\n GeoJSON Object \n\nOR\n\n URL to GeoJSON Object', }, title: { - description: 'Title to display on the map. Optional.', + description: 'Title to display on the map.', }, center: { description: 'Initial coordinates of the center of the map', diff --git a/packages/components/stories/PlotlyBarChart.stories.ts b/packages/components/stories/PlotlyBarChart.stories.ts index 7bc3c20f..0acb092d 100644 --- a/packages/components/stories/PlotlyBarChart.stories.ts +++ b/packages/components/stories/PlotlyBarChart.stories.ts @@ -28,10 +28,10 @@ Must be an object with one of the following properties: `url`, `values` or `csv` }, parsingConfig: { description: - 'If using URL or CSV, this parsing config will be used to parse the data. Optional, check https://www.papaparse.com/ for more info.', + 'If using URL or CSV, this parsing config will be used to parse the data. Check https://www.papaparse.com/ for more info.', }, title: { - description: 'Title to display on the chart. Optional.', + description: 'Title to display on the chart.', }, // TODO: commented out because this doesn't work // lineLabel: { diff --git a/packages/components/stories/PlotlyLineChart.stories.ts b/packages/components/stories/PlotlyLineChart.stories.ts index f028dbdd..9ebfd15e 100644 --- a/packages/components/stories/PlotlyLineChart.stories.ts +++ b/packages/components/stories/PlotlyLineChart.stories.ts @@ -1,45 +1,52 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { PlotlyLineChart, PlotlyLineChartProps } from '../src/components/PlotlyLineChart'; +import { + PlotlyLineChart, + PlotlyLineChartProps, +} from '../src/components/PlotlyLineChart'; -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction const meta: Meta = { title: 'Components/Charts/PlotlyLineChart', component: PlotlyLineChart, tags: ['autodocs'], argTypes: { - url: { - description: - 'CSV Url to be parsed and used as data source', - }, data: { description: - 'Data to be displayed. as an array of key value pairs \n\n E.g.: [{ year: 1850, temperature: -0.41765878 }, { year: 1851, temperature: -0.2333498 }, ...]', - }, - rawCsv: { - description: - 'Raw csv data to be parsed and used as data source', + 'Data to be displayed. \n\n \ +Must be an object with one of the following properties: `url`, `values` or `csv` \n\n \ +`url`: URL pointing to a CSV file. \n\n \ +`values`: array of objects. \n\n \ +`csv`: string with valid CSV. \n\n \ +', }, bytes: { + // TODO: likely this should be an extra option on the data parameter, + // specific to URLs description: - 'How many bytes to read from the url', + "How many bytes to read from the url so that the entire file doesn's have to be fetched.", }, parsingConfig: { - description: 'If using url or rawCsv, this parsing config will be used to parse the data. Optional, check https://www.papaparse.com/ for more info', + description: + 'If using URL or CSV, this parsing config will be used to parse the data. Check https://www.papaparse.com/ for more info', }, title: { - description: 'Title to display on the chart. Optional.', + description: 'Title to display on the chart.', }, lineLabel: { - description: 'Label to display on the line, Optional, will use yAxis if not provided', + description: + 'Label to display on the line, will use yAxis if not provided', }, 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.', }, 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.', + }, + uniqueId: { + description: + 'Provide a unique ID to help with cache revalidation of the fetched data.', }, }, }; @@ -51,13 +58,15 @@ type Story = StoryObj; export const FromDataPoints: Story = { name: 'Line chart from array of data points', args: { - data: [ - {year: '1850', temperature: -0.41765878}, - {year: '1851', temperature: -0.2333498}, - {year: '1852', temperature: -0.22939907}, - {year: '1853', temperature: -0.27035445}, - {year: '1854', temperature: -0.29163003}, - ], + data: { + values: [ + { year: '1850', temperature: -0.41765878 }, + { year: '1851', temperature: -0.2333498 }, + { year: '1852', temperature: -0.22939907 }, + { year: '1853', temperature: -0.27035445 }, + { year: '1854', temperature: -0.29163003 }, + ], + }, xAxis: 'year', yAxis: 'temperature', }, @@ -67,8 +76,26 @@ export const FromURL: Story = { name: 'Line chart from URL', args: { title: 'Oil Price x Year', - url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv', + data: { + url: 'https://raw.githubusercontent.com/datasets/oil-prices/main/data/wti-year.csv', + }, xAxis: 'Date', yAxis: 'Price', }, }; + +export const FromInlineCSV: Story = { + name: 'Bar chart from inline CSV', + args: { + title: 'Apple Stock Prices', + data: { + csv: `Date,AAPL.Open,AAPL.High,AAPL.Low,AAPL.Close,AAPL.Volume,AAPL.Adjusted,dn,mavg,up,direction +2015-02-17,127.489998,128.880005,126.919998,127.830002,63152400,122.905254,106.7410523,117.9276669,129.1142814,Increasing +2015-02-18,127.629997,128.779999,127.449997,128.720001,44891700,123.760965,107.842423,118.9403335,130.0382439,Increasing +2015-02-19,128.479996,129.029999,128.330002,128.449997,37362400,123.501363,108.8942449,119.8891668,130.8840887,Decreasing +2015-02-20,128.619995,129.5,128.050003,129.5,48948400,124.510914,109.7854494,120.7635001,131.7415509,Increasing`, + }, + xAxis: 'Date', + yAxis: 'AAPL.Open', + }, +};