shlinkio/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-12-10 14:16:59 -06:00
Code Issues Packages Projects Releases 67 Wiki Activity

Added number formatting to visits line chart

Browse Source
This commit is contained in:
Alejandro Celaya 2020-09-13 11:11:17 +02:00
parent 3fea8b5505
commit fc9341f631
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,13 +11,14 @@ import {
import { Line } from 'react-chartjs-2'; import { Line } from 'react-chartjs-2';
import { always, cond, reverse } from 'ramda'; import { always, cond, reverse } from 'ramda';
import moment from 'moment'; import moment from 'moment';
import { ChartData, ChartDataSets } from 'chart.js'; import { ChartData, ChartDataSets, ChartTooltipItem, 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';
import { rangeOf } from '../../utils/utils'; import { rangeOf } from '../../utils/utils';
import ToggleSwitch from '../../utils/ToggleSwitch'; import ToggleSwitch from '../../utils/ToggleSwitch';
import './LineChartCard.scss'; import './LineChartCard.scss';
import { prettify } from '../../utils/helpers/numbers';
interface LineChartCardProps { interface LineChartCardProps {
title: string; title: string;
@ -137,13 +138,18 @@ const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'S
highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'), highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
].filter(Boolean) as ChartDataSets[], ].filter(Boolean) as ChartDataSets[],
}; };
const options = { const options: ChartOptions = {
maintainAspectRatio: false, maintainAspectRatio: false,
legend: { display: false }, legend: { display: false },
scales: { scales: {
yAxes: [ yAxes: [
{ {
ticks: { beginAtZero: true, precision: 0 }, ticks: {
beginAtZero: true,
// @ts-expect-error
precision: 0,
callback: prettify,
},
}, },
], ],
xAxes: [ xAxes: [
@ -154,7 +160,15 @@ const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'S
}, },
tooltips: { tooltips: {
intersect: false, intersect: false,
// @ts-expect-error
axis: 'x', axis: 'x',
callbacks: {
label({ datasetIndex, yLabel }: ChartTooltipItem, data: ChartData) {
const datasetLabel = datasetIndex !== undefined && data.datasets?.[datasetIndex]?.label || '';
return `${datasetLabel}: ${prettify(Number(yLabel))}`;
},
},
}, },
}; };