[flatuitable][m] - add bytes + parsingConfig (#1022)

.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

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<any> {
+export async function parseCsv(file: string, parsingConfig): Promise<any> {
   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<FlatUiTableProps> = ({
   url,
   data,
   rawCsv,
-  corsProxy,
+  bytes = 5132288,
+  parsingConfig = {},
 }) => {
   const randomId = Math.random();
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <TableInner
-        corsProxy={corsProxy}
+        bytes={bytes}
         url={url}
         data={data}
         rawCsv={rawCsv}
         randomId={randomId}
+        parsingConfig={parsingConfig}
       />
     </QueryClientProvider>
   );
@@ -69,8 +70,9 @@ const TableInner: React.FC<FlatUiTableProps> = ({
   url,
   data,
   rawCsv,
-  corsProxy,
   randomId,
+  bytes,
+  parsingConfig,
 }) => {
   if (data) {
     return (
@@ -81,12 +83,16 @@ const TableInner: React.FC<FlatUiTableProps> = ({
   }
   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)

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 <bytes> 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<FlatUiTableProps>;
 
 // 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',
+  },
 };
-