Chart now supporting empty initialization

Canadian-Geospatial-Platform · Sep 28, 2023 · 2fb8d60 · 2fb8d60
1 parent 23a4962
commit 2fb8d60
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 89 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -8,39 +8,7 @@ import { Chart } from './chart/chart';
 const App = (): JSX.Element => {
 
   return (
-    <div>
-      <Chart
-        data={{
-          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-          datasets: [
-            {
-              label: '# of Votes',
-              data: [12, 19, 3, 5, 2, 3],
-              backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)',
-              ],
-              borderColor: [
-                'rgba(255, 99, 132, 1)',
-                'rgba(54, 162, 235, 1)',
-                'rgba(255, 206, 86, 1)',
-                'rgba(75, 192, 192, 1)',
-                'rgba(153, 102, 255, 1)',
-                'rgba(255, 159, 64, 1)',
-              ],
-              borderWidth: 1,
-            },
-          ]
-        }}
-        options={{
-          geochart: { chart: 'line' }
-        }}
-      ></Chart>
-    </div>
+      <Chart />
   );
 };
 

diff --git a/src/chart/chart.tsx b/src/chart/chart.tsx
@@ -10,12 +10,14 @@ import { ChartLine } from './charts/chart-line';
 import styles from './chart.module.css';
 
 
+console.log("geochart chart.tsx run");
+
 /**
  * Main props for the Chart
  */
 export interface TypeChartProps<TType extends ChartType, TData extends DefaultDataPoint<TType>, TLabel = string> {
-  data: ChartData<TType, TData, TLabel>;
-  options: ChartOptions<TType> | OptionsGeoChart;
+  data?: ChartData<TType, TData, TLabel>;
+  options?: ChartOptions<TType> | OptionsGeoChart;
   plugins?: Plugin<TType>[];
 }
 
@@ -27,14 +29,16 @@ export interface TypeChartProps<TType extends ChartType, TData extends DefaultDa
  */
 export function Chart(props: TypeChartProps<ChartType, DefaultDataPoint<ChartType>, string>): JSX.Element {
   // Fetch the cgpv module
-	const w = window as any;
+  const w = window as any;
   const cgpv = w['cgpv'];
   const { react, ui } = cgpv;
   const { useEffect, useState } = react;
 
   const { data: elementData, options: elementOptions } = props;
   const [data, setData] = useState(elementData!);
-  const [options, setOptions] = useState(elementOptions || { geoview: { chart: 'line' } });
+  const [options, setOptions] = useState(elementOptions);
+  const optionsChart = options as ChartOptions<ChartType>;
+  const optionsGeoChart = options as OptionsGeoChart;
 
   const { Slider } = ui.elements;
 
@@ -86,7 +90,7 @@ export function Chart(props: TypeChartProps<ChartType, DefaultDataPoint<ChartTyp
 
   function renderChart() {
     // Depending on the type of chart
-    switch ((options as OptionsGeoChart).geochart.chart) {
+    switch (optionsGeoChart.geochart.chart) {
       case 'bar':
         // Vertical Bars Chart
         return (
@@ -128,68 +132,66 @@ export function Chart(props: TypeChartProps<ChartType, DefaultDataPoint<ChartTyp
   }
 
   function renderXSlider() {
-    if (options) {
-      const { xSlider } = (options as OptionsGeoChart).geochart;
-      if (xSlider?.display) {
-        return (
-          <Box sx={{ height: '100%' }}>
-            <Slider
-              sliderId="sliderHorizontal"
-              min={xSlider.min || 0}
-              max={xSlider.max || 100}
-              value={xSlider.value || 0}
-              track={xSlider.track || false}
-              marks={[
-                { value: 0, label: 'Min Level 0' },
-                { value: 4, label: 'Level 4' },
-                { value: 8, label: 'Level 8' },
-                { value: 18, label: 'Max Level 18' },
-              ]}
-            />
-          </Box>
-        );
-      }
+    const { xSlider } = optionsGeoChart.geochart;
+    if (xSlider?.display) {
+      return (
+        <Box sx={{ height: '100%' }}>
+          <Slider
+            sliderId="sliderHorizontal"
+            min={xSlider.min || 0}
+            max={xSlider.max || 100}
+            value={xSlider.value || 0}
+            track={xSlider.track || false}
+            marks={[
+              { value: 0, label: 'Min Level 0' },
+              { value: 4, label: 'Level 4' },
+              { value: 8, label: 'Level 8' },
+              { value: 18, label: 'Max Level 18' },
+            ]}
+          />
+        </Box>
+      );
     }
     // None
     return <div />;
   }
 
   function renderYSlider() {
-    if (options) {
-      const { ySlider } = (options as OptionsGeoChart).geochart;
-      if (ySlider?.display) {
-        return (
-          <Box sx={{ height: '100%' }}>
-            <Slider
-              sliderId="sliderVertical"
-              min={ySlider.min || 0}
-              max={ySlider.max || 100}
-              value={ySlider.value || 0}
-              track={ySlider.track || false}
-              orientation="vertical"
-              marks={[
-                { value: 0, label: 'Min Level 0' },
-                { value: 4, label: 'Level 4' },
-                { value: 8, label: 'Level 8' },
-                { value: 18, label: 'Max Level 18' },
-              ]}
-            />
-          </Box>
-        );
-      }
+    const { ySlider } = optionsGeoChart.geochart;
+    if (ySlider?.display) {
+      return (
+        <Box sx={{ height: '100%' }}>
+          <Slider
+            sliderId="sliderVertical"
+            min={ySlider.min || 0}
+            max={ySlider.max || 100}
+            value={ySlider.value || 0}
+            track={ySlider.track || false}
+            orientation="vertical"
+            marks={[
+              { value: 0, label: 'Min Level 0' },
+              { value: 4, label: 'Level 4' },
+              { value: 8, label: 'Level 8' },
+              { value: 18, label: 'Max Level 18' },
+            ]}
+          />
+        </Box>
+      );
     }
     return <div />;
   }
 
   function renderChartContainer() {
-    return (
-      <div className={styles.chartContainer}>
-        <div className={styles.chartContainerGrid1}>{renderChart()}</div>
-        <div className={styles.chartContainerGrid2}>{renderYSlider()}</div>
-        <div className={styles.chartContainerGrid3}>{renderXSlider()}</div>
-        <div className={styles.chartContainerGrid4} />
-      </div>
-    );
+    if (optionsGeoChart && optionsGeoChart.geochart && optionsGeoChart.geochart.chart) {
+      return (
+        <div className={styles.chartContainer}>
+          <div className={styles.chartContainerGrid1}>{renderChart()}</div>
+          <div className={styles.chartContainerGrid2}>{renderYSlider()}</div>
+          <div className={styles.chartContainerGrid3}>{renderXSlider()}</div>
+          <div className={styles.chartContainerGrid4} />
+        </div>
+      );
+    }
   }
 
   return <div>{renderChartContainer()}</div>;

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,6 +5,8 @@ const w = window as any;
 const cgpv = w['cgpv'];
 const { react, createRoot } = cgpv;
 
+console.log("geochart index.tsx run");
+
 const container = createRoot(document.getElementById("root") as HTMLElement);
 container.render(
     <react.StrictMode>