Starting my origin.

Simplified the Chart type usage. Started work on the WCAG legend instead of using the canvas. Adjusted the chart validator schema Using Grid and Box now instead of html div Removed chart.module.css and removed Globals.d.ts Added comment Removed patterns Added default value for the enum for the validator Merged the style and the sx
Canadian-Geospatial-Platform · Oct 17, 2023 · f2fa322 · f2fa322
1 parent 76dd5e9
commit f2fa322
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 176 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,6 @@
         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)',
@@ -59,6 +58,23 @@
         ],
       };
 
+      const DATA_NATIVE_3 = {
+        datasets: [{
+          data: {
+            January: 10,
+            February: 20,
+            March: 30
+          }
+        }]
+      };
+
+      const DATA_NATIVE_4 = {
+        labels: ['Red', 'Blue', 'Yellow'],
+        datasets: [{
+          data: [{"x": 10, "y": 15}, {"x": 15, "y": 25}, {"x": 20, "y": 10}]
+        }]
+      };
+
       const OPTIONS_NATIVE_1_A = {
         geochart: {
           chart: "line"
@@ -89,15 +105,15 @@
           xSlider: {
             display: true,
             min: 0,
-            max: 30,
-            value: 15,
+            max: 100,
+            value: 50,
             track: 'normal',
           },
           ySlider: {
             display: true,
             min: 0,
-            max: 30,
-            value: 30,
+            max: 100,
+            value: 100,
             track: 'normal',
           }
         }
@@ -118,15 +134,15 @@
           xSlider: {
             display: true,
             min: 0,
-            max: 30,
-            value: 15,
+            max: 100,
+            value: 50,
             track: 'normal',
           },
           ySlider: {
             display: true,
             min: 0,
-            max: 30,
-            value: 30,
+            max: 100,
+            value: 100,
             track: 'normal',
           },
           xAxis: {
@@ -144,13 +160,15 @@
     <div class="" style="text-align: center;">
       <div style="background-color: aliceblue;">
         <div style="text-align: left;">
-          CHART INPUTS
+          GEOCHART INPUTS
         </div>
         <div>
           <div style="display:inline-block;width:49%;">
             <div>
-              <button onclick="importDataParsed(DATA_NATIVE_1)">Import Data Native Chart.js 1</button>
-              <button onclick="importDataParsed(DATA_NATIVE_2)">Import Data Native Chart.js 2</button>
+              <button onclick="importDataParsed(DATA_NATIVE_1)">Import Data 1 rec</button>
+              <button onclick="importDataParsed(DATA_NATIVE_2)">Import Data 2 recs</button>
+              <button onclick="importDataParsed(DATA_NATIVE_3)">Import Data using object</button>
+              <button onclick="importDataParsed(DATA_NATIVE_4)">Import Data using x,y</button>
             </div>
             <div>
               <textarea id="CHARTDATAPARSED" rows="20" style="width: 100%;"></textarea>

diff --git a/src/Globals.d.ts b/src/Globals.d.ts
diff --git a/src/chart-types.ts b/src/chart-types.ts
@@ -13,6 +13,15 @@ export interface GeoChartData<TType extends GeoChartType = GeoChartType, TData =
  */
 export type GeoChartDataset<TType extends GeoChartType = GeoChartType, TData = DefaultDataPoint<TType>> = ChartDataset<TType, TData>;
 
+/**
+ * Indicates an action to be performed by the Chart.
+ * Special type that allows the child component a accept a 'todo action' via props and reset the prop value without the parent being notified.
+ * This is essentially to simplify the setTimeout handling to be managed inside the Chart component instead of higher in the application.
+ */
+export type GeoChartAction = {
+  shouldRedraw?: boolean;
+};
+
 /**
  * Extends the ChartOptions used by Chart.js with more 'GeoChart' options
  */

diff --git a/src/chart-validator.ts b/src/chart-validator.ts
@@ -16,13 +16,86 @@ export class ChartValidator {
   private ajv: Ajv.Ajv;
 
   public SCHEMA_DATA = {
+    $schema: 'http://json-schema.org/draft-07/schema#',
     type: 'object',
     properties: {
-      labels: { type: 'array' },
-      datasets: { type: 'array' },
+      labels: {
+        type: 'array',
+        items: {
+          type: 'string',
+        },
+      },
+      datasets: {
+        type: 'array',
+        items: {
+          type: 'object',
+          properties: {
+            label: {
+              type: 'string',
+            },
+            data: {
+              oneOf: [
+                {
+                  type: 'array',
+                  items: {
+                    type: 'number',
+                  },
+                },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      x: {
+                        type: 'number',
+                      },
+                      y: {
+                        type: 'number',
+                      },
+                    },
+                    required: ['x', 'y'],
+                  },
+                },
+                {
+                  type: 'object',
+                },
+              ],
+            },
+            backgroundColor: {
+              oneOf: [
+                {
+                  type: 'string',
+                },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'string',
+                  },
+                },
+              ],
+            },
+            borderColor: {
+              oneOf: [
+                {
+                  type: 'string',
+                },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'string',
+                  },
+                },
+              ],
+            },
+            borderWidth: {
+              type: 'integer',
+            },
+          },
+          required: ['data'],
+        },
+      },
     },
-    required: ['labels', 'datasets'],
-    // additionalProperties: false
+    required: ['datasets'],
   };
 
   public SCHEMA_OPTIONS = {
@@ -43,12 +116,15 @@ export class ChartValidator {
       geochart: {
         type: 'object',
         properties: {
-          chart: { type: 'string' },
+          chart: {
+            enum: ['line', 'bar', 'pie', 'doughnut'],
+            default: 'line',
+            description: 'Supported types of chart.',
+          },
         },
       },
     },
     required: ['geochart'],
-    // additionalProperties: false
   };
 
   /**

diff --git a/src/chart.module.css b/src/chart.module.css