Added the steps native examples

.eslintrc

@@ -74,5 +74,14 @@
         "endOfLine": "auto"
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      // enable the rule specifically for TypeScript files
+      "files": ["*.ts", "*.mts", "*.cts", "*.tsx"],
+      "rules": {
+        "@typescript-eslint/explicit-function-return-type": "error"
+      }
+    }
+  ]
 }

index.html

@@ -59,6 +59,26 @@
       };
 
       const DATA_NATIVE_3 = {
+        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+        datasets: [
+          {
+            label: 'Dataset 1',
+            data: [12, 19, 3, 5, 2, 3],
+            borderColor: "rgba(255, 99, 132, 0.5)",
+            backgroundColor: 'rgba(255, 99, 132, 0.5)',
+            stepped: 'middle', 
+          },
+          {
+            label: 'Dataset 2',
+            data: [22, 29, 13, 15, 12, 13],
+            borderColor: "rgba(53, 162, 235, 0.5)",
+            backgroundColor: 'rgba(53, 162, 235, 0.5)',
+            stepped: 'middle', 
+          },
+        ],
+      };
+
+      const DATA_NATIVE_4 = {
         datasets: [{
           data: {
             January: 10,
@@ -68,7 +88,7 @@
         }]
       };
 
-      const DATA_NATIVE_4 = {
+      const DATA_NATIVE_5 = {
         labels: ['Red', 'Blue', 'Yellow'],
         datasets: [{
           data: [{"x": 10, "y": 15}, {"x": 15, "y": 25}, {"x": 20, "y": 10}]
@@ -106,15 +126,13 @@
             display: true,
             min: 0,
             max: 100,
-            value: 50,
-            track: 'normal',
+            value: [0, 100],
           },
           ySlider: {
             display: true,
             min: 0,
             max: 100,
-            value: 100,
-            track: 'normal',
+            value: [0, 100],
           }
         }
       };
@@ -135,15 +153,13 @@
             display: true,
             min: 0,
             max: 100,
-            value: 50,
-            track: 'normal',
+            value: [0, 100],
           },
           ySlider: {
             display: true,
             min: 0,
             max: 100,
-            value: 100,
-            track: 'normal',
+            value: [0, 100],
           },
           xAxis: {
             type: 'time'
@@ -167,8 +183,9 @@
             <div>
               <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>
+              <button onclick="importDataParsed(DATA_NATIVE_3)">Import Data 2 recs w/ steps</button>
+              <button onclick="importDataParsed(DATA_NATIVE_4)">Import Data using object</button>
+              <button onclick="importDataParsed(DATA_NATIVE_5)">Import Data using x,y</button>
             </div>
             <div>
               <textarea id="CHARTDATAPARSED" rows="20" style="width: 100%;"></textarea>

src/app.tsx

@@ -1,5 +1,5 @@
 import { Chart } from './chart';
-import { ChartValidator, ValidatorResult } from './chart-validator';
+import { SchemaValidator, ValidatorResult } from './schema-validator';
 
 /**
  * Create a container to visualize a GeoChart in a standalone manner.
@@ -21,7 +21,7 @@ export function App(): JSX.Element {
   /**
    * Handles when the Chart has to be loaded with data or options.
    */
-  const handleChartLoad = (e: Event) => {
+  const handleChartLoad = (e: Event): void => {
     const ev = e as CustomEvent;
     if (ev.detail.data) {
       setData(ev.detail.data);
@@ -36,11 +36,12 @@ export function App(): JSX.Element {
    * @param dataErrors The data errors that happened (if any)
    * @param optionsErrors The options errors that happened (if any)
    */
-  const handleError = (dataErrors: ValidatorResult, optionsErrors: ValidatorResult) => {
+  const handleError = (dataErrors: ValidatorResult, optionsErrors: ValidatorResult): void => {
     // Gather all error messages
-    const msgAll = ChartValidator.parseValidatorResultsMessages([dataErrors, optionsErrors]);
+    const msgAll = SchemaValidator.parseValidatorResultsMessages([dataErrors, optionsErrors]);
 
-    // Show the error (actually, can't because the snackbar is linked to a map at the moment and geochart is standalone)
+    // Show the error (actually, can't because the snackbar is linked to a map at the moment
+    // and geochart is standalone without a cgpv.init() at all)
     // TODO: Decide if we want the snackbar outside of a map or not and use showError or not
     cgpv.api.utilities.showError('', msgAll);
     alert(`There was an error parsing the Chart inputs.\n\n${msgAll}\n\nView console for details.`);