Adjusted the chart validator schema

Using Grid and Box now instead of html div Removed chart.module.css and removed Globals.d.ts
Canadian-Geospatial-Platform · Oct 17, 2023 · 49c1301 · 49c1301
1 parent 3117b3c
commit 49c1301
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 66 deletions.
diff --git a/src/Globals.d.ts b/src/Globals.d.ts
diff --git a/src/chart-validator.ts b/src/chart-validator.ts
@@ -38,7 +38,7 @@ export class ChartValidator {
                 {
                   type: 'array',
                   items: {
-                    type: 'integer',
+                    type: 'number',
                   },
                 },
                 {
@@ -47,10 +47,10 @@ export class ChartValidator {
                     type: 'object',
                     properties: {
                       x: {
-                        type: 'integer',
+                        type: 'number',
                       },
                       y: {
-                        type: 'integer',
+                        type: 'number',
                       },
                     },
                     required: ['x', 'y'],
@@ -126,7 +126,7 @@ export class ChartValidator {
         properties: {
           chart: {
             type: 'string',
-            pattern: '^(line|bar|pie|doughnut)$',
+            enum: ['line', 'bar', 'pie', 'doughnut'],
           },
         },
       },

diff --git a/src/chart.module.css b/src/chart.module.css
diff --git a/src/chart.tsx b/src/chart.tsx
@@ -16,7 +16,6 @@ import {
 import { Chart as ChartReact } from 'react-chartjs-2';
 import { GeoChartOptions, GeoChartType, GeoChartData, GeoChartAction, GeoChartDefaultColors } from './chart-types';
 import { ChartValidator, ValidatorResult } from './chart-validator';
-import styles from './chart.module.css';
 
 /**
  * Main props for the Chart
@@ -32,6 +31,17 @@ export interface TypeChartChartProps<TType extends GeoChartType> {
   handleError?: (dataErrors: ValidatorResult, optionsErrors: ValidatorResult) => void;
 }
 
+const sxClasses = {
+  checkDatasetWrapper: {
+    display: 'inline-block',
+  },
+  checkDataset: {
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    marginRight: '20px !important',
+  },
+};
+
 /**
  * Create a customized Chart UI
  *
@@ -45,7 +55,7 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
   const { cgpv } = w;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { useEffect, useState, useRef, CSSProperties } = cgpv.react;
-  const { Checkbox, Slider, Typography } = cgpv.ui.elements;
+  const { Grid, Checkbox, Slider, Typography } = cgpv.ui.elements;
   const { style: elStyle, data, options: elOptions, action: elAction } = props;
 
   // Cast the style
@@ -209,21 +219,21 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
             if (ds.borderColor) color = ds.borderColor! as string;
             else if (ds.backgroundColor) color = ds.backgroundColor! as string;
 
-            // Return the Legent item
+            // Return the Legend item
             return (
               // eslint-disable-next-line react/no-array-index-key
-              <div className={styles.checkDatasetWrapper} key={idx}>
+              <Box sx={sxClasses.checkDatasetWrapper} key={idx}>
                 <Checkbox
                   value={idx}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                     handleDatasetChecked(idx, e.target?.checked);
                   }}
                   defaultChecked
                 />
-                <Typography className={styles.checkDataset} noWrap>
-                  <span style={{ color: color as string }}>{ds.label}</span>
+                <Typography style={{ color: color as string }} sx={sxClasses.checkDataset} noWrap>
+                  {ds.label}
                 </Typography>
-              </div>
+              </Box>
             );
           })}
         </div>
@@ -240,14 +250,20 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
   const renderChartContainer = (): JSX.Element => {
     if (options.geochart && data?.datasets) {
       return (
-        <div style={style} className={styles.chartContainer}>
-          <div className={styles.chartContainerGrid1}>{renderDatasetSelector()}</div>
-          <div className={styles.chartContainerGrid2} />
-          <div className={styles.chartContainerGrid3}>{renderChart()}</div>
-          <div className={styles.chartContainerGrid4}>{renderYSlider()}</div>
-          <div className={styles.chartContainerGrid5}>{renderXSlider()}</div>
-          <div className={styles.chartContainerGrid6} />
-        </div>
+        <Grid container style={style}>
+          <Grid item xs={12}>
+            {renderDatasetSelector()}
+          </Grid>
+          <Grid item xs={11}>
+            {renderChart()}
+          </Grid>
+          <Grid item xs={1}>
+            {renderYSlider()}
+          </Grid>
+          <Grid item xs={11}>
+            {renderXSlider()}
+          </Grid>
+        </Grid>
       );
     }