[@portaljs/components][m] - LineChart fix

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [

packages/components/src/components/FlatUiTable.tsx

@@ -4,7 +4,10 @@ import { Grid } from '@githubocto/flat-ui';
 
 const queryClient = new QueryClient();
 
-export async function getCsv(url: string) {
+export async function getCsv(url: string, corsProxy?: string) {
+  if (corsProxy) {
+    url = corsProxy + url
+  }
   const response = await fetch(url, {
     headers: {
       Range: 'bytes=0-5132288',
@@ -61,21 +64,23 @@ export interface FlatUiTableProps {
   url?: string;
   data?: { [key: string]: number | string }[];
   rawCsv?: string;
+  corsProxy?: string;
 }
 export const FlatUiTable: React.FC<FlatUiTableProps> = ({
   url,
   data,
   rawCsv,
+  corsProxy,
 }) => {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
-      <TableInner url={url} data={data} rawCsv={rawCsv} />
+      <TableInner corsProxy={corsProxy} url={url} data={data} rawCsv={rawCsv} />
     </QueryClientProvider>
   );
 };
 
-const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
+const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv, corsProxy }) => {
   if (data) {
     return (
       <div className="w-full" style={{height: '500px'}}>
@@ -85,11 +90,12 @@ const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
   }
   const { data: csvString, isLoading: isDownloadingCSV } = useQuery(
     ['dataCsv', url],
-    () => getCsv(url)
+    () => getCsv(url as string, corsProxy),
+    { enabled: !!url }
   );
   const { data: parsedData, isLoading: isParsing } = useQuery(
     ['dataPreview', csvString],
-    () => parseCsv(rawCsv ? rawCsv : csvString),
+    () => parseCsv(rawCsv ? rawCsv as string : csvString as string),
     { enabled: rawCsv ? true : !!csvString }
   );
   if (isParsing || isDownloadingCSV)
@@ -102,4 +108,6 @@ const TableInner: React.FC<FlatUiTableProps> = ({ url, data, rawCsv }) => {
         <Grid data={parsedData.data} />
       </div>
     );
+  return <Spinning />
 };
+

packages/components/src/components/LineChart.tsx

@@ -25,7 +25,7 @@ export function LineChart({
   const spec = {
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     title,
-    width: 'container',
+    width: 600,
     height: 300,
     mark: {
       type: 'line',

packages/components/stories/FlatUiTable.stories.ts

@@ -16,6 +16,9 @@ const meta: Meta = {
     },
     url: {
       description: "Fetch the data from a CSV file remotely. only the first 5MB of data will be displayed"
+    },
+    corsProxy: {
+      description: "Optionally you cant set a CORS Proxy to which all your requests you be redirected"
     }
   },
 };