Redraw capabilities

Canadian-Geospatial-Platform · Oct 2, 2023 · f6b4ec0 · f6b4ec0
1 parent e423c1c
commit f6b4ec0
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/src/chart/chart-types.ts b/src/chart/chart-types.ts
@@ -1,7 +1,7 @@
 import { ChartType, ChartData, ChartDataset, ChartOptions, DefaultDataPoint } from 'chart.js';
 
+export const EVENT_CHART_REDRAW: string = "chart/redraw";
 export const EVENT_CHART_CHANGED: string = "chart/changed";
-// export const EVENT_CHART_PARSE: string = "chart/parse";
 
 export type OptionsParsing = {
   chart: ChartType;

diff --git a/src/chart/chart.tsx b/src/chart/chart.tsx
@@ -1,7 +1,7 @@
 // import { useEffect, useState } from 'react';
 import { Box } from '@mui/material';
 import { ChartData, ChartOptions, DefaultDataPoint } from 'chart.js';
-import { ChartPayloadChanged, GeoChartOptions, GeoChartType, GeoChartData, EVENT_CHART_CHANGED } from './chart-types';
+import { ChartPayloadChanged, GeoChartOptions, GeoChartType, GeoChartData, EVENT_CHART_CHANGED, EVENT_CHART_REDRAW } from './chart-types';
 import { ChartDoughnut } from './charts/chart-doughnut';
 import { ChartBarsVertical } from './charts/chart-bars-vertical';
 import { ChartPie } from './charts/chart-pie';
@@ -32,10 +32,18 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
   const { data: elementData, options: elementOptions } = props;
   const [data, setData] = useState(elementData);
   const [options, setOptions] = useState(elementOptions);
+  const [shouldRedraw, setShouldRedraw] = useState(false);
 
   const { Slider } = ui.elements;
 
   useEffect(() => {
+    // Function to handle EVENT_CHART_CHANGED
+    const funcHandlerChartRedraw = ((e: CustomEvent) => {
+      // Redraw
+      setShouldRedraw(true);
+      // setShouldRedraw(false);
+    }) as EventListener;
+
     // Function to handle EVENT_CHART_CHANGED
     const funcHandlerChartChanged = ((e: CustomEvent) => {
       // Cast
@@ -68,16 +76,13 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
 
     // TODO: Use something else than 'window'?
     // Wire handler
+    w.addEventListener(EVENT_CHART_REDRAW, funcHandlerChartRedraw);
     w.addEventListener(EVENT_CHART_CHANGED, funcHandlerChartChanged);
 
-    // // TODO: Use something else than 'window'?
-    // // Wire handler
-    // w.addEventListener(EVENT_CHART_PARSE, funcHandlerChartParse);
-
     return () => {
       // Unwire handler on unmount
+      w.removeEventListener(EVENT_CHART_REDRAW, funcHandlerChartRedraw);
       w.removeEventListener(EVENT_CHART_CHANGED, funcHandlerChartChanged);
-      // w.removeEventListener(EVENT_CHART_PARSE, funcHandlerChartParse);
     };
   });
 
@@ -87,19 +92,22 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
       case 'bar':
         // Vertical Bars Chart
         return (
-          <div>
-            <ChartBarsVertical
-              type="bar"
-              data={data as ChartData<'bar', DefaultDataPoint<'bar'>, string>}
-              options={options as ChartOptions<'bar'>}
-            />
-          </div>
+          <ChartBarsVertical
+            type="bar"
+            data={data as ChartData<'bar', DefaultDataPoint<'bar'>, string>}
+            options={options as ChartOptions<'bar'>}
+            redraw={shouldRedraw}
+          />
         );
 
       case 'pie':
         // Pie Chart
         return (
-          <ChartPie type="pie" data={data as ChartData<'pie', DefaultDataPoint<'pie'>, string>} options={options as ChartOptions<'pie'>} />
+          <ChartPie
+            type="pie"
+            data={data as ChartData<'pie', DefaultDataPoint<'pie'>, string>}
+            options={options as ChartOptions<'pie'>}
+            redraw={shouldRedraw} />
         );
 
       case 'doughnut':
@@ -109,6 +117,7 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
             type="doughnut"
             data={data as ChartData<'doughnut', number[], string>}
             options={options as ChartOptions<'doughnut'>}
+            redraw={shouldRedraw}
           />
         );
 
@@ -119,6 +128,7 @@ export function Chart(props: TypeChartChartProps<GeoChartType>): JSX.Element {
             type="line"
             data={data as ChartData<'line', DefaultDataPoint<'line'>, string>}
             options={options as ChartOptions<'line'>}
+            redraw={shouldRedraw}
           />
         );
     }

diff --git a/src/chart/charts/chart-bars-vertical.tsx b/src/chart/charts/chart-bars-vertical.tsx
@@ -1,6 +1,5 @@
 import {
   Chart as ChartJS,
-  ChartConfiguration,
   DefaultDataPoint,
   CategoryScale,
   LinearScale,
@@ -9,17 +8,15 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
-import { Bar } from 'react-chartjs-2';
-
-export type TypeChartVerticalProps = ChartConfiguration<'bar', DefaultDataPoint<'bar'>>;
+import { Bar, ChartProps } from 'react-chartjs-2';
 
 /**
  * Create a customized Chart Vertical Bars UI
  *
  * @param {TypeChartVerticalProps} props the properties passed to the Chart element
  * @returns {JSX.Element} the created Chart element
  */
-export function ChartBarsVertical(props: TypeChartVerticalProps): JSX.Element {
+export function ChartBarsVertical(props: ChartProps<'bar', DefaultDataPoint<'bar'>>): JSX.Element {
   const { data, options } = props;
 
   ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

diff --git a/src/chart/charts/chart-doughnut.tsx b/src/chart/charts/chart-doughnut.tsx
@@ -1,15 +1,13 @@
-import { Chart as ChartJS, ChartConfiguration, DefaultDataPoint, ArcElement, Tooltip, Legend } from 'chart.js';
-import { Doughnut } from 'react-chartjs-2';
-
-export type TypeChartDoughnutProps = ChartConfiguration<'doughnut', DefaultDataPoint<'doughnut'>>;
+import { Chart as ChartJS, DefaultDataPoint, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Doughnut, ChartProps} from 'react-chartjs-2';
 
 /**
  * Create a customized Chart Doughnut UI
  *
  * @param {TypeChartDoughnutProps} props the properties passed to the Chart element
  * @returns {JSX.Element} the created Chart element
  */
-export function ChartDoughnut(props: TypeChartDoughnutProps): JSX.Element {
+export function ChartDoughnut(props: ChartProps<'doughnut', DefaultDataPoint<'doughnut'>>): JSX.Element {
   const { data, options } = props;
 
   ChartJS.register(ArcElement, Tooltip, Legend);

diff --git a/src/chart/charts/chart-line.tsx b/src/chart/charts/chart-line.tsx
@@ -1,6 +1,5 @@
 import {
   Chart as ChartJS,
-  ChartConfiguration,
   DefaultDataPoint,
   CategoryScale,
   LinearScale,
@@ -10,17 +9,15 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
-import { Line } from 'react-chartjs-2';
-
-export type TypeChartLineProps = ChartConfiguration<'line', DefaultDataPoint<'line'>>;
+import { Line, ChartProps } from 'react-chartjs-2';
 
 /**
  * Create a customized Chart Line UI
  *
  * @param {TypeChartLineProps} props the properties passed to the Chart element
  * @returns {JSX.Element} the created Chart element
  */
-export function ChartLine(props: TypeChartLineProps): JSX.Element {
+export function ChartLine(props: ChartProps<'line', DefaultDataPoint<'line'>>): JSX.Element {
   const { data, options } = props;
 
   ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

diff --git a/src/chart/charts/chart-pie.tsx b/src/chart/charts/chart-pie.tsx
@@ -1,15 +1,13 @@
-import { Chart as ChartJS, ChartConfiguration, DefaultDataPoint, ArcElement, Tooltip, Legend } from 'chart.js';
-import { Pie } from 'react-chartjs-2';
-
-export type TypeChartPieProps = ChartConfiguration<'pie', DefaultDataPoint<'pie'>>;
+import { Chart as ChartJS, DefaultDataPoint, ArcElement, Tooltip, Legend } from 'chart.js';
+import { Pie, ChartProps} from 'react-chartjs-2';
 
 /**
  * Create a customized Chart Pie UI
  *
  * @param {TypeChartPieProps} props the properties passed to the Chart element
  * @returns {JSX.Element} the created Chart element
  */
-export function ChartPie(props: TypeChartPieProps): JSX.Element {
+export function ChartPie(props: ChartProps<'pie', DefaultDataPoint<'pie'>>): JSX.Element {
   const { data, options } = props;
 
   ChartJS.register(ArcElement, Tooltip, Legend);