From e6f0ab4ec8004ae4c0db24805114925b7a409abf Mon Sep 17 00:00:00 2001 From: Demenech Date: Tue, 9 Apr 2024 15:54:03 -0300 Subject: [PATCH] feat: FlatUiTable component API and docs improvements --- .../components/src/components/FlatUiTable.tsx | 39 ++++++-------- .../components/stories/FlatUiTable.stories.ts | 52 +++++++++++-------- 2 files changed, 47 insertions(+), 44 deletions(-) diff --git a/packages/components/src/components/FlatUiTable.tsx b/packages/components/src/components/FlatUiTable.tsx index 6b34e141..cb4dd677 100644 --- a/packages/components/src/components/FlatUiTable.tsx +++ b/packages/components/src/components/FlatUiTable.tsx @@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider, useQuery } from 'react-query'; import Papa from 'papaparse'; import { Grid } from '@githubocto/flat-ui'; import LoadingSpinner from './LoadingSpinner'; +import { Data } from '../types/properties'; const queryClient = new QueryClient(); @@ -36,30 +37,25 @@ export async function parseCsv(file: string, parsingConfig): Promise { } export interface FlatUiTableProps { - url?: string; - data?: { [key: string]: number | string }[]; - rawCsv?: string; - randomId?: number; + data: Data; + uniqueId?: number; bytes: number; parsingConfig: any; } export const FlatUiTable: React.FC = ({ - url, data, - rawCsv, + uniqueId, bytes = 5132288, parsingConfig = {}, }) => { - const randomId = Math.random(); + uniqueId = uniqueId ?? Math.random(); return ( // Provide the client to your App @@ -67,33 +63,32 @@ export const FlatUiTable: React.FC = ({ }; const TableInner: React.FC = ({ - url, data, - rawCsv, - randomId, + uniqueId, bytes, parsingConfig, }) => { - if (data) { + const url = data.url; + const csv = data.csv; + const values = data.values; + + if (values) { return (
- +
); } const { data: csvString, isLoading: isDownloadingCSV } = useQuery( - ['dataCsv', url, randomId], + ['dataCsv', url, uniqueId], () => getCsv(url as string, bytes), { enabled: !!url } ); const { data: parsedData, isLoading: isParsing } = useQuery( - ['dataPreview', csvString, randomId], + ['dataPreview', csvString, uniqueId], () => - parseCsv( - rawCsv ? (rawCsv as string) : (csvString as string), - parsingConfig - ), - { enabled: rawCsv ? true : !!csvString } + parseCsv(csv ? (csv as string) : (csvString as string), parsingConfig), + { enabled: csv ? true : !!csvString } ); if (isParsing || isDownloadingCSV)
diff --git a/packages/components/stories/FlatUiTable.stories.ts b/packages/components/stories/FlatUiTable.stories.ts index 1baf616b..852e07fb 100644 --- a/packages/components/stories/FlatUiTable.stories.ts +++ b/packages/components/stories/FlatUiTable.stories.ts @@ -10,23 +10,25 @@ const meta: Meta = { argTypes: { data: { description: - 'Data to be displayed in the table, must be setup as an array of key value pairs', - }, - csv: { - description: 'CSV data as string.', - }, - url: { - description: - 'Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed', + '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: { description: - 'Fetch the data from a CSV file remotely. only the first of data will be displayed', + 'Fetch the data from a CSV file remotely. Only the first of data will be displayed. Defaults to 5MB.', }, parsingConfig: { description: 'Configuration for parsing the CSV data. See https://www.papaparse.com/docs#config for more details', }, + uniqueId: { + description: + 'Provide a unique ID to help with cache revalidation of the fetched data.', + }, }, }; @@ -36,34 +38,40 @@ type Story = StoryObj; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const FromColumnsAndData: Story = { - name: 'Table data', + name: 'Table from array or objects', args: { - data: [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, - ], + data: { + values: [ + { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, + { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, + { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, + { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, + { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, + { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, + { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, + ], + }, }, }; export const FromRawCSV: Story = { - name: 'Table from raw CSV', + name: 'Table from inline CSV', args: { - rawCsv: ` + data: { + csv: ` Year,Temp Anomaly 1850,-0.418 2020,0.923 `, + }, }, }; export const FromURL: Story = { name: 'Table from URL', args: { - url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv', + data: { + url: 'https://storage.openspending.org/alberta-budget/__os_imported__alberta_total.csv', + }, }, };