neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split chart data & option calcs (#8773)

Browse Source
This commit is contained in:
Jaco 2023-01-12 12:15:57 +02:00 committed by GitHub
parent cbf4efb360
commit 0c176104f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
packages/react-components/src/Chart/Line.tsx
View File

@ -13,11 +13,6 @@ import { isBn, objectSpread } from '@polkadot/util';
import ErrorBoundary from '../ErrorBoundary';
import { alphaColor } from './utils';
interface State {
chartData: ChartData;
chartOptions: ChartOptions;
}
interface Dataset {
data: number[];
fill: boolean;
@ -86,8 +81,20 @@ const BASE_OPTS: ChartOptions = {
}
};
function calculateOptions (colors: (string | undefined)[] = [], legends: string[], labels: string[], values: (number | BN)[][], options: ChartOptions = {}): State {
const chartData = values.reduce((chartData, values, index): Config => {
function getOptions (options: ChartOptions = {}): ChartOptions {
return objectSpread({}, BASE_OPTS, options, {
// Re-spread plugins for deep(er) copy
plugins: objectSpread({}, BASE_OPTS.plugins, options.plugins, {
// Same applied to plugins, we may want specific values
annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
})
});
}
function getData (colors: (string | undefined)[] = [], legends: string[], labels: string[], values: (number | BN)[][]): ChartData {
return values.reduce((chartData, values, index): Config => {
const color = colors[index] || alphaColor(COLORS[index]);
const data = values.map((value): number => isBn(value) ? value.toNumber() : value);
@ -104,25 +111,17 @@ function calculateOptions (colors: (string | undefined)[] = [], legends: string[
return chartData;
}, { datasets: [] as Dataset[], labels });
return {
chartData,
chartOptions: objectSpread({}, BASE_OPTS, options, {
// Re-spread plugins for deep(er) copy
plugins: objectSpread({}, BASE_OPTS.plugins, options.plugins, {
// Same applied to plugins, we may want specific values
annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
})
})
};
}
function LineChart ({ className, colors, labels, legends, options, values }: LineProps): React.ReactElement<LineProps> | null {
const { chartData, chartOptions } = useMemo(
() => calculateOptions(colors, legends, labels, values, options),
[colors, labels, legends, options, values]
const chartOptions = useMemo(
() => getOptions(options),
[options]
);
const chartData = useMemo(
() => getData(colors, legends, labels, values),
[colors, labels, legends, values]
);
return (