forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-07-28 22:52:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated to react-chartjs 4

Browse Source
This commit is contained in:
Alejandro Celaya
2022-05-02 11:35:05 +02:00
parent fd4295ade8
commit c516969686
5 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/visits/charts/HorizontalBarChart.tsx
View File

@@ -1,7 +1,7 @@
import { FC } from 'react';
import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
import { FC, MutableRefObject, useRef } from 'react';
import { ChartData, ChartDataset, ChartOptions, InteractionItem } from 'chart.js';
import { keys, values } from 'ramda';
import { Bar } from 'react-chartjs-2';
import { Bar, getElementAtEvent } from 'react-chartjs-2';
import { fillTheGaps } from '../../utils/helpers/visits';
import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
import { prettify } from '../../utils/helpers/numbers';
@@ -57,8 +57,7 @@ const generateChartData = (
datasets: generateChartDatasets(data, highlightedData, highlightedLabel),
});
type ClickedCharts = [{ index: number }] | [];
const chartElementAtEvent = (labels: string[], onClick?: (label: string) => void) => ([chart]: ClickedCharts) => {
const chartElementAtEvent = (labels: string[], [chart]: InteractionItem[], onClick?: (label: string) => void) => {
if (!onClick || !chart) {
return;
}
@@ -80,6 +79,8 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
}, { ...stats }),
);
const highlightedData = fillTheGaps(highlightedStats ?? {}, labels);
const refWithStats = useRef(null);
const refWithoutStats = useRef(null);
const options: ChartOptions = {
plugins: {
@@ -110,13 +111,14 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
const height = determineHeight(labels);
// Provide a key based on the height, to force re-render every time the dataset changes (example, due to pagination)
const renderChartComponent = (customKey: string) => (
const renderChartComponent = (customKey: string, theRef: MutableRefObject<any>) => (
<Bar
ref={theRef}
key={`${height}_${customKey}`}
data={chartData as any}
options={options as any}
height={height}
getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
onClick={(e) => chartElementAtEvent(labels, getElementAtEvent(theRef.current, e), onClick)}
/>
);
@@ -124,8 +126,8 @@ export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
<>
{/* It's VERY IMPORTANT to render two different components here, as one has 1 dataset and the other has 2 */}
{/* Using the same component causes a crash when switching from 1 to 2 datasets, and then back to 1 dataset */}
{highlightedStats !== undefined && renderChartComponent('with_stats')}
{highlightedStats === undefined && renderChartComponent('without_stats')}
{highlightedStats !== undefined && renderChartComponent('with_stats', refWithStats)}
{highlightedStats === undefined && renderChartComponent('without_stats', refWithoutStats)}
</>
);
};