mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-11 02:37:22 +03:00
Code Issues Projects Releases Packages Wiki Activity

First attempt to fix click event on charts

Browse source
This commit is contained in:
Alejandro Celaya 2021-08-29 22:50:05 +02:00
parent 036c8aafcb
commit f54460e8f8
2 changed files with 12 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/visits/helpers/DefaultChart.tsx
View file

@ -79,16 +79,15 @@ const determineHeight = (isBarChart: boolean, labels: string[]): number | undefi
return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
};
const chartElementAtEvent = (onClick?: (label: string) => void) => ([ chart ]: [{ _index: number; _chart: Chart }]) => {
// TODO Check this function actually works with Chart.js 3
const chartElementAtEvent = (
labels: string[],
onClick?: (label: string) => void,
) => ([ chart ]: [{ index: number }]) => {
if (!onClick || !chart) {
return;
}
const { _index, _chart: { data } } = chart;
const { labels } = data;
onClick(labels?.[_index] as string);
onClick(labels[chart.index]);
};
const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats && Object.keys(stats).length > 0;
@ -97,7 +96,7 @@ const DefaultChart = (
{ title, isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
) => {
const Component = isBarChart ? Bar : Doughnut;
const [ chartRef, setChartRef ] = useState<Chart | undefined>();
const [ chartRef, setChartRef ] = useState<Chart | undefined>(); // Cannot use useRef here
const labels = keys(stats).map(dropLabelIfHidden);
const data = values(
!statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
@ -152,7 +151,7 @@ const DefaultChart = (
data={graphData}
options={options}
height={height}
getElementAtEvent={chartElementAtEvent(onClick) as any} /* TODO */
getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
/>
</div>
{!isBarChart && (

10
src/visits/helpers/LineChartCard.tsx
View file

@ -21,7 +21,7 @@ import {
startOfISOWeek,
endOfISOWeek,
} from 'date-fns';
import { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
import { NormalizedVisit, Stats } from '../types';
import { fillTheGaps } from '../../utils/helpers/visits';
import { useToggle } from '../../utils/helpers/hooks';
@ -146,15 +146,15 @@ const generateDataset = (data: number[], label: string, color: string): ChartDat
let selectedLabel: string | null = null;
const chartElementAtEvent = (
labels: string[],
datasetsByPoint: Record<string, NormalizedVisit[]>,
setSelectedVisits?: (visits: NormalizedVisit[]) => void,
) => ([ chart ]: [{ _index: number; _chart: Chart }]) => {
) => ([ chart ]: [{ index: number }]) => {
if (!setSelectedVisits || !chart) {
return;
}
const { _index: index, _chart: { data } } = chart;
const { labels } = data as { labels: string[] };
const { index } = chart;
if (selectedLabel === labels[index]) {
setSelectedVisits([]);
@ -244,7 +244,7 @@ const LineChartCard = (
<Line
data={data}
options={options}
getElementAtEvent={chartElementAtEvent(datasetsByPoint, setSelectedVisits) as any} // TODO
getElementAtEvent={chartElementAtEvent(labels, datasetsByPoint, setSelectedVisits) as any}
/>
</CardBody>
</Card>