Synching up my origin with most recent code

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>

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
  */

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
   };
 
   /**