From 83fd7727bafb4902218777597e9848a3e3a71d87 Mon Sep 17 00:00:00 2001 From: Luccas Mateus Date: Wed, 20 Sep 2023 08:13:19 -0300 Subject: [PATCH] [flatuitable][m] - add bytes + parsingConfig (#1022) --- .changeset/fluffy-swans-teach.md | 5 +++ package-lock.json | 6 ++-- .../components/src/components/FlatUiTable.tsx | 30 +++++++++------- .../components/stories/FlatUiTable.stories.ts | 34 +++++++++++-------- 4 files changed, 46 insertions(+), 29 deletions(-) create mode 100644 .changeset/fluffy-swans-teach.md diff --git a/.changeset/fluffy-swans-teach.md b/.changeset/fluffy-swans-teach.md new file mode 100644 index 000000000..ef28b162b --- /dev/null +++ b/.changeset/fluffy-swans-teach.md @@ -0,0 +1,5 @@ +--- +'@portaljs/components': minor +--- + +FlatUiTables now accepts a bytes param and a parsingConfig param for CSV links diff --git a/package-lock.json b/package-lock.json index e8e581d43..cafe15e73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -46942,7 +46942,7 @@ }, "packages/ckan": { "name": "@portaljs/ckan", - "version": "0.0.3", + "version": "0.1.0", "dependencies": { "formik": "^2.2.9", "swr": "^2.1.5", @@ -47347,7 +47347,7 @@ }, "packages/components": { "name": "@portaljs/components", - "version": "0.3.1", + "version": "0.3.2", "dependencies": { "@githubocto/flat-ui": "^0.14.1", "@heroicons/react": "^2.0.17", @@ -47828,7 +47828,7 @@ }, "packages/remark-wiki-link": { "name": "@portaljs/remark-wiki-link", - "version": "1.0.4", + "version": "1.1.0", "license": "MIT", "dependencies": { "mdast-util-to-markdown": "^1.5.0", diff --git a/packages/components/src/components/FlatUiTable.tsx b/packages/components/src/components/FlatUiTable.tsx index f00594f1d..6b34e1415 100644 --- a/packages/components/src/components/FlatUiTable.tsx +++ b/packages/components/src/components/FlatUiTable.tsx @@ -5,22 +5,20 @@ import LoadingSpinner from './LoadingSpinner'; const queryClient = new QueryClient(); -export async function getCsv(url: string, corsProxy?: string) { - if (corsProxy) { - url = corsProxy + url; - } +export async function getCsv(url: string, bytes) { const response = await fetch(url, { headers: { - Range: 'bytes=0-5132288', + Range: `bytes=0-${bytes}`, }, }); const data = await response.text(); return data; } -export async function parseCsv(file: string): Promise { +export async function parseCsv(file: string, parsingConfig): Promise { return new Promise((resolve, reject) => { Papa.parse(file, { + ...parsingConfig, header: true, dynamicTyping: true, skipEmptyLines: true, @@ -41,25 +39,28 @@ export interface FlatUiTableProps { url?: string; data?: { [key: string]: number | string }[]; rawCsv?: string; - corsProxy?: string; randomId?: number; + bytes: number; + parsingConfig: any; } export const FlatUiTable: React.FC = ({ url, data, rawCsv, - corsProxy, + bytes = 5132288, + parsingConfig = {}, }) => { const randomId = Math.random(); return ( // Provide the client to your App ); @@ -69,8 +70,9 @@ const TableInner: React.FC = ({ url, data, rawCsv, - corsProxy, randomId, + bytes, + parsingConfig, }) => { if (data) { return ( @@ -81,12 +83,16 @@ const TableInner: React.FC = ({ } const { data: csvString, isLoading: isDownloadingCSV } = useQuery( ['dataCsv', url, randomId], - () => getCsv(url as string, corsProxy), + () => getCsv(url as string, bytes), { enabled: !!url } ); const { data: parsedData, isLoading: isParsing } = useQuery( ['dataPreview', csvString, randomId], - () => parseCsv(rawCsv ? (rawCsv as string) : (csvString as string)), + () => + parseCsv( + rawCsv ? (rawCsv as string) : (csvString as string), + parsingConfig + ), { enabled: rawCsv ? true : !!csvString } ); if (isParsing || isDownloadingCSV) diff --git a/packages/components/stories/FlatUiTable.stories.ts b/packages/components/stories/FlatUiTable.stories.ts index 7efc9f7a2..4d9f8d5d7 100644 --- a/packages/components/stories/FlatUiTable.stories.ts +++ b/packages/components/stories/FlatUiTable.stories.ts @@ -9,17 +9,24 @@ const meta: Meta = { tags: ['autodocs'], argTypes: { data: { - description: "Data to be displayed in the table, must be setup as an array of key value pairs" + description: + 'Data to be displayed in the table, must be setup as an array of key value pairs', }, csv: { - description: "CSV data as string.", + description: 'CSV data as string.', }, url: { - description: "Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed" + description: + 'Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed', + }, + bytes: { + description: + 'Fetch the data from a CSV file remotely. only the first of data will be displayed', + }, + parsingConfig: { + description: + 'Configuration for parsing the CSV data. See https://www.papaparse.com/docs#config for more details', }, - corsProxy: { - description: "Optionally you cant set a CORS Proxy to which all your requests you be redirected" - } }, }; @@ -29,7 +36,7 @@ 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 data', args: { data: [ { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, @@ -44,20 +51,19 @@ export const FromColumnsAndData: Story = { }; export const FromRawCSV: Story = { - name: "Table from raw CSV", + name: 'Table from raw CSV', args: { rawCsv: ` Year,Temp Anomaly 1850,-0.418 2020,0.923 - ` - } + `, + }, }; export const FromURL: Story = { - name: "Table from URL", + name: 'Table from URL', args: { - url: "https://raw.githubusercontent.com/datasets/finance-vix/main/data/vix-daily.csv" - } + url: 'https://ckan-dev.sse.datopian.com/datastore/dump/601c9cf0-595e-46d8-88fc-d1ab2904e2db', + }, }; -