Skip to content

Commit

Permalink
fix: data updating fix (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
dangreen authored Oct 26, 2021
1 parent 50946e6 commit 45a50cc
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 8 deletions.
16 changes: 11 additions & 5 deletions src/chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,13 @@ import ChartJS from 'chart.js/auto';
import type { ChartData, ChartType, DefaultDataPoint } from 'chart.js';

import type { Props, TypedChartComponent } from './types';
import { reforwardRef, setNextDatasets } from './utils';
import {
reforwardRef,
cloneData,
setOptions,
setLabels,
setDatasets,
} from './utils';

const noopData = {
datasets: [],
Expand Down Expand Up @@ -49,7 +55,7 @@ function ChartComponent<

chartRef.current = new ChartJS(canvasRef.current, {
type,
data,
data: cloneData(data),
options,
plugins,
});
Expand Down Expand Up @@ -119,19 +125,19 @@ function ChartComponent<

useEffect(() => {
if (!redraw && chartRef.current && options) {
chartRef.current.options = { ...options };
setOptions(chartRef.current, options);
}
}, [redraw, options]);

useEffect(() => {
if (!redraw && chartRef.current) {
chartRef.current.config.data.labels = data.labels;
setLabels(chartRef.current.config.data, data.labels);
}
}, [redraw, data.labels]);

useEffect(() => {
if (!redraw && chartRef.current && data.datasets) {
setNextDatasets(chartRef.current.config.data, data.datasets);
setDatasets(chartRef.current.config.data, data.datasets);
}
}, [redraw, data.datasets]);

Expand Down
41 changes: 39 additions & 2 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import type {
ChartData,
DefaultDataPoint,
ChartDataset,
ChartOptions,
Chart,
} from 'chart.js';

export function reforwardRef<T>(ref: ForwardedRef<T>, value: T) {
Expand All @@ -14,7 +16,26 @@ export function reforwardRef<T>(ref: ForwardedRef<T>, value: T) {
}
}

export function setNextDatasets<
export function setOptions<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
>(chart: Chart<TType, TData, TLabel>, nextOptions: ChartOptions<TType>) {
chart.options = { ...nextOptions };
}

export function setLabels<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
>(
currentData: ChartData<TType, TData, TLabel>,
nextLabels: TLabel[] | undefined
) {
currentData.labels = nextLabels;
}

export function setDatasets<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
Expand All @@ -30,10 +51,26 @@ export function setNextDatasets<
);

// There is no original to update, so simply add new one
if (!currentDataset || !nextDataset.data) return nextDataset;
if (!currentDataset || !nextDataset.data) return { ...nextDataset };

Object.assign(currentDataset, nextDataset);

return currentDataset;
});
}

export function cloneData<
TType extends ChartType = ChartType,
TData = DefaultDataPoint<TType>,
TLabel = unknown
>(data: ChartData<TType, TData, TLabel>) {
const nextData: ChartData<TType, TData, TLabel> = {
labels: [],
datasets: [],
};

setLabels(nextData, data.labels);
setDatasets(nextData, data.datasets);

return nextData;
}
45 changes: 45 additions & 0 deletions stories/Chart.data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,48 @@ export const eventsData = {
},
],
};

export const sameData1 = {
labels: [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(75,192,192,0.4)',
data: [33, 53, 85, 41, 44, 65, 61, 47, 52, 53, 62, 82],
},
{
label: 'My Second dataset',
backgroundColor: '#742774',
data: [33, 25, 35, 51, 54, 76, 65, 40, 42, 39, 51, 55],
},
],
};

export const sameData2 = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: 'My First dataset',
backgroundColor: 'rgba(75,192,192,0.4)',
data: [42, 13, 45, 29, 44, 25, 27],
},
{
label: 'My Second dataset',
backgroundColor: '#742774',
data: [33, 25, 35, 44, 50, 40, 48],
},
],
};
16 changes: 15 additions & 1 deletion stories/Chart.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useReducer } from 'react';
import { InteractionItem } from 'chart.js';
import Chart from '../src';
import * as data from './Chart.data';
Expand Down Expand Up @@ -100,3 +100,17 @@ Redraw.args = {
data: data.multiTypeData,
redraw: true,
};

export const SameDataToggle = args => {
const [currentData, toggleData] = useReducer(
prevState =>
prevState === data.sameData1 ? data.sameData2 : data.sameData1,
data.sameData1
);

return <Chart {...args} data={currentData} onClick={toggleData} />;
};

SameDataToggle.args = {
type: 'bar',
};

0 comments on commit 45a50cc

Please sign in to comment.