shlinkio/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-12-11 18:41:12 -06:00
Code Issues Packages Projects Releases 67 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; return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
}; };
const chartElementAtEvent = (onClick?: (label: string) => void) => ([ chart ]: [{ _index: number; _chart: Chart }]) => { const chartElementAtEvent = (
// TODO Check this function actually works with Chart.js 3 labels: string[],
onClick?: (label: string) => void,
) => ([ chart ]: [{ index: number }]) => {
if (!onClick || !chart) { if (!onClick || !chart) {
return; return;
} }
const { _index, _chart: { data } } = chart; onClick(labels[chart.index]);
const { labels } = data;
onClick(labels?.[_index] as string);
}; };
const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats && Object.keys(stats).length > 0; 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, { title, isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
) => { ) => {
const Component = isBarChart ? Bar : Doughnut; 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 labels = keys(stats).map(dropLabelIfHidden);
const data = values( const data = values(
!statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => { !statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
@ -152,7 +151,7 @@ const DefaultChart = (
data={graphData} data={graphData}
options={options} options={options}
height={height} height={height}
getElementAtEvent={chartElementAtEvent(onClick) as any} /* TODO */ getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
/> />
</div> </div>
{!isBarChart && ( {!isBarChart && (

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

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