Added the steps native examples

Made chart-validator more generic with schema-validator
Enforcing return types
Moved the schema validators into json files
Better typing
Moved the schema validators to root folder

src/chart-types.ts

@@ -1,17 +1,18 @@
 import { ChartType, ChartData, ChartDataset, ChartOptions, DefaultDataPoint } from 'chart.js';
 
 export type GeoChartType = ChartType;
+export type GeoDefaultDataPoint = DefaultDataPoint<GeoChartType>;
 
 /**
  * Extends the ChartData used by Chart.js and represents the whole Data to be displayed in the Chart
  */
-export interface GeoChartData<TType extends GeoChartType = GeoChartType, TData = DefaultDataPoint<TType>, TLabel = string>
+export interface GeoChartData<TType extends GeoChartType = GeoChartType, TData = DefaultDataPoint<GeoChartType>, TLabel = string>
   extends ChartData<TType, TData, TLabel> {}
 
 /**
  * Represents a Dataset to be shown in the Chart
  */
-export type GeoChartDataset<TType extends GeoChartType = GeoChartType, TData = DefaultDataPoint<TType>> = ChartDataset<TType, TData>;
+export type GeoChartDataset<TType extends GeoChartType = GeoChartType, TData = DefaultDataPoint<GeoChartType>> = ChartDataset<TType, TData>;
 
 /**
  * Indicates an action to be performed by the Chart.

src/chart.tsx

@@ -1,18 +1,18 @@
 /* eslint-disable no-console */
 // TODO: Remove the disable above
 import { Box } from '@mui/material';
-import { Chart as ChartJS, ChartDataset, registerables } from 'chart.js';
+import { Chart as ChartJS, ChartDataset, DefaultDataPoint, registerables } from 'chart.js';
 import { Chart as ChartReact } from 'react-chartjs-2';
 import { GeoChartOptions, GeoChartType, GeoChartData, GeoChartAction, GeoChartDefaultColors } from './chart-types';
 import { SchemaValidator, ValidatorResult } from './schema-validator';
 
 /**
  * Main props for the Chart
  */
-export interface TypeChartChartProps<TType extends GeoChartType> {
+export interface TypeChartChartProps<TType extends GeoChartType, TData = DefaultDataPoint<GeoChartType>, TLabel = string> {
   style?: unknown; // Will be casted as CSSProperties later via the imported cgpv react
   defaultColors?: GeoChartDefaultColors;
-  data?: GeoChartData<TType>;
+  data?: GeoChartData<TType, TData, TLabel>;
   options?: GeoChartOptions;
   action?: GeoChartAction;
   handleSliderXChanged?: (value: number | number[]) => void;
@@ -178,7 +178,7 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
     if (datasets.length > 1) {
       return (
         <Box>
-          {datasets.map((ds: ChartDataset, idx: number) => {
+          {datasets.map((ds: ChartDataset<GeoChartType>, idx: number) => {
             // Find a color for the legend based on the dataset info
             let { color } = ChartJS.defaults;
             if (ds.borderColor) color = ds.borderColor! as string;

src/schema-validator.ts

@@ -1,6 +1,6 @@
 import Ajv from 'ajv';
-import SCHEMA_DATA from './schema-validator-data.json';
-import SCHEMA_OPTIONS from './schema-validator-options.json';
+import SCHEMA_DATA from '../schema-data.json';
+import SCHEMA_OPTIONS from '../schema-options.json';
 
 /**
  * Represents the result of a Chart data or options inputs validations.