From 2f56b1bdc80cc4b63d2cd99844b1acb222678f51 Mon Sep 17 00:00:00 2001
From: Ola Rubaj <52197250+olayway@users.noreply.github.com>
Date: Wed, 23 Oct 2024 18:00:32 +0200
Subject: [PATCH] fix formatting

---
 .../components/src/components/LineChart.tsx   | 188 +++++++++---------
 .../components/stories/LineChart.stories.ts   |   8 +-
 2 files changed, 100 insertions(+), 96 deletions(-)

diff --git a/packages/components/src/components/LineChart.tsx b/packages/components/src/components/LineChart.tsx
index 0db1f05a..4fc8e70d 100644
--- a/packages/components/src/components/LineChart.tsx
+++ b/packages/components/src/components/LineChart.tsx
@@ -8,106 +8,110 @@ type AxisType = 'quantitative' | 'temporal';
 type TimeUnit = 'year' | undefined; // or ...
 
 export type LineChartProps = {
-    data: Omit<Data, 'csv'>;
-    title?: string;
-    xAxis: string;
-    xAxisType?: AxisType;
-    xAxisTimeUnit?: TimeUnit;
-    yAxis: string | string[];
-    yAxisType?: AxisType;
-    fullWidth?: boolean;
-    symbol?: string;
+  data: Omit<Data, 'csv'>;
+  title?: string;
+  xAxis: string;
+  xAxisType?: AxisType;
+  xAxisTimeUnit?: TimeUnit;
+  yAxis: string | string[];
+  yAxisType?: AxisType;
+  fullWidth?: boolean;
+  symbol?: string;
 };
 
 export function LineChart({
-    data,
-    title = '',
-    xAxis,
-    xAxisType = 'temporal',
-    xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
-    yAxis,
-    yAxisType = 'quantitative',
-    symbol,
+  data,
+  title = '',
+  xAxis,
+  xAxisType = 'temporal',
+  xAxisTimeUnit = 'year', //  TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
+  yAxis,
+  yAxisType = 'quantitative',
+  symbol,
 }: LineChartProps) {
-    const url = data.url;
-    const values = data.values;
-    const [isLoading, setIsLoading] = useState<boolean>(false);
+  const url = data.url;
+  const values = data.values;
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
-    //  By default, assumes data is an Array...
-    const [specData, setSpecData] = useState<any>({ name: 'table' });
-    const isMultiYAxis = Array.isArray(yAxis);
+  //  By default, assumes data is an Array...
+  const [specData, setSpecData] = useState<any>({ name: 'table' });
+  const isMultiYAxis = Array.isArray(yAxis);
 
-    const spec = {
-        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-        title,
-        width: 'container',
-        height: 300,
-        mark: {
-            type: 'line',
-            color: 'black',
-            strokeWidth: 1,
-            tooltip: true,
-        },
-        data: specData,
-        ...(isMultiYAxis ? {
-            transform: [
-                { fold: yAxis, as: ['key', 'value'] }
-            ]
-        } : {}),
-        selection: {
-            grid: {
-                type: 'interval',
-                bind: 'scales',
-            },
-        },
-        encoding: {
-            x: {
-                field: xAxis,
-                timeUnit: xAxisTimeUnit,
-                type: xAxisType,
-            },
-            y: {
-                field: isMultiYAxis ? 'value' : yAxis,
-                type: yAxisType,
-            },
-            ...(symbol ? {
-                color: {
-                    field: symbol,
-                    type: 'nominal'
-                }
-            } : {}),
-            ...(isMultiYAxis ? {
-                color: {
-                    field: 'key',
-                    type: 'nominal'
-                }
-            } : {})
-        },
-    } as any;
-
-    useEffect(() => {
-        if (url) {
-            setIsLoading(true);
-
-            //  Manualy loading the data allows us to do other kinds
-            //  of stuff later e.g. load a file partially
-            loadData(url).then((res: any) => {
-                setSpecData({ values: res, format: { type: 'csv' } });
-                setIsLoading(false);
-            });
+  const spec = {
+    $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+    title,
+    width: 'container',
+    height: 300,
+    mark: {
+      type: 'line',
+      color: 'black',
+      strokeWidth: 1,
+      tooltip: true,
+    },
+    data: specData,
+    ...(isMultiYAxis
+      ? {
+          transform: [{ fold: yAxis, as: ['key', 'value'] }],
         }
-    }, []);
+      : {}),
+    selection: {
+      grid: {
+        type: 'interval',
+        bind: 'scales',
+      },
+    },
+    encoding: {
+      x: {
+        field: xAxis,
+        timeUnit: xAxisTimeUnit,
+        type: xAxisType,
+      },
+      y: {
+        field: isMultiYAxis ? 'value' : yAxis,
+        type: yAxisType,
+      },
+      ...(symbol
+        ? {
+            color: {
+              field: symbol,
+              type: 'nominal',
+            },
+          }
+        : {}),
+      ...(isMultiYAxis
+        ? {
+            color: {
+              field: 'key',
+              type: 'nominal',
+            },
+          }
+        : {}),
+    },
+  } as any;
 
-    var vegaData = {};
-    if (values) {
-        vegaData = { table: values };
+  useEffect(() => {
+    if (url) {
+      setIsLoading(true);
+
+      //  Manualy loading the data allows us to do other kinds
+      //  of stuff later e.g. load a file partially
+      loadData(url).then((res: any) => {
+        setSpecData({ values: res, format: { type: 'csv' } });
+        setIsLoading(false);
+      });
     }
+  }, []);
 
-    return isLoading ? (
-        <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
-            <LoadingSpinner />
-        </div>
-    ) : (
-        <VegaLite data={vegaData} spec={spec} />
-    );
+  var vegaData = {};
+  if (values) {
+    vegaData = { table: values };
+  }
+
+  return isLoading ? (
+    <div className="w-full flex items-center justify-center w-[600px] h-[300px]">
+      <LoadingSpinner />
+    </div>
+  ) : (
+    <VegaLite data={vegaData} spec={spec} />
+  );
 }
diff --git a/packages/components/stories/LineChart.stories.ts b/packages/components/stories/LineChart.stories.ts
index 70f6b63e..a77bb48e 100644
--- a/packages/components/stories/LineChart.stories.ts
+++ b/packages/components/stories/LineChart.stories.ts
@@ -36,8 +36,9 @@ Must be an object with one of the following properties: `url` or `values` \n\n \
       description: 'Type of the Y-axis',
     },
     symbol: {
-      description: 'Name of the column header or object property that represents a series for multiple series.',
-    }
+      description:
+        'Name of the column header or object property that represents a series for multiple series.',
+    },
   },
 };
 
@@ -91,7 +92,6 @@ export const MultiSeries: Story = {
   },
 };
 
-
 export const MultiColumns: Story = {
   name: 'Line chart with multiple series (with multiple columns)',
   args: {
@@ -105,7 +105,7 @@ export const MultiColumns: Story = {
       ],
     },
     xAxis: 'year',
-    yAxis: ['A', 'B', 'C']
+    yAxis: ['A', 'B', 'C'],
   },
 };