mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Moved common rendering chart labels code to external module for reuse

Browse source
This commit is contained in:
Alejandro Celaya 2020-09-15 22:27:01 +02:00
parent 67495fa302
commit 871868f0a4
3 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/utils/helpers/visits.ts
View file

@ -1,7 +1,9 @@
import bowser from 'bowser'; import bowser from 'bowser';
import { zipObj } from 'ramda'; import { zipObj } from 'ramda';
import { ChartData, ChartTooltipItem } from 'chart.js';
import { Empty, hasValue } from '../utils'; import { Empty, hasValue } from '../utils';
import { Stats, UserAgent } from '../../visits/types'; import { Stats, UserAgent } from '../../visits/types';
import { prettify } from './numbers';
const DEFAULT = 'Others'; const DEFAULT = 'Others';
const BROWSERS_WHITELIST = [ const BROWSERS_WHITELIST = [
@ -40,3 +42,26 @@ export const extractDomain = (url: string | Empty): string => {
export const fillTheGaps = (stats: Stats, labels: string[]): number[] => export const fillTheGaps = (stats: Stats, labels: string[]): number[] =>
Object.values({ ...zipObj(labels, labels.map(() => 0)), ...stats }); Object.values({ ...zipObj(labels, labels.map(() => 0)), ...stats });
export const renderDoughnutChartLabel = (
{ datasetIndex, index }: ChartTooltipItem,
{ labels, datasets }: ChartData,
) => {
const datasetLabel = index !== undefined && labels?.[index] || '';
const value = datasetIndex !== undefined && index !== undefined
&& datasets?.[datasetIndex]?.data?.[index]
|| '';
return `${datasetLabel}: ${prettify(Number(value))}`;
};
export const renderNonDoughnutChartLabel = (labelToPick: 'yLabel' | 'xLabel') => (
item: ChartTooltipItem,
{ datasets }: ChartData,
) => {
const { datasetIndex } = item;
const value = item[labelToPick];
const datasetLabel = datasetIndex !== undefined && datasets?.[datasetIndex]?.label || '';
return `${datasetLabel}: ${prettify(Number(value))}`;
};

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

@ -2,11 +2,11 @@ import React, { ChangeEvent, useRef } from 'react';
import { Doughnut, HorizontalBar } from 'react-chartjs-2'; import { Doughnut, HorizontalBar } from 'react-chartjs-2';
import { keys, values } from 'ramda'; import { keys, values } from 'ramda';
import classNames from 'classnames'; import classNames from 'classnames';
import Chart, { ChartData, ChartDataSets, ChartOptions, ChartTooltipItem } from 'chart.js'; import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
import { fillTheGaps } from '../../utils/helpers/visits'; import { fillTheGaps, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/visits';
import { Stats } from '../types'; import { Stats } from '../types';
import './DefaultChart.scss';
import { prettify } from '../../utils/helpers/numbers'; import { prettify } from '../../utils/helpers/numbers';
import './DefaultChart.scss';
export interface DefaultChartProps { export interface DefaultChartProps {
title: Function | string; title: Function | string;
@ -142,23 +142,7 @@ const DefaultChart = (
// Do not show tooltip on items with empty label when in a bar chart // Do not show tooltip on items with empty label when in a bar chart
filter: ({ yLabel }) => !isBarChart || yLabel !== '', filter: ({ yLabel }) => !isBarChart || yLabel !== '',
callbacks: { callbacks: {
...isBarChart ? {} : { label: isBarChart ? renderNonDoughnutChartLabel('xLabel') : renderDoughnutChartLabel,
label({ datasetIndex, index }: ChartTooltipItem, { labels, datasets }: ChartData) {
const datasetLabel = index !== undefined && labels?.[index] || '';
const value = datasetIndex !== undefined && index !== undefined
&& datasets?.[datasetIndex]?.data?.[index]
|| '';
return `${datasetLabel}: ${prettify(Number(value))}`;
},
},
...!isBarChart ? {} : {
label({ datasetIndex, xLabel }: ChartTooltipItem, { datasets }: ChartData) {
const datasetLabel = datasetIndex !== undefined && datasets?.[datasetIndex]?.label || '';
return `${datasetLabel}: ${prettify(Number(xLabel))}`;
},
},
}, },
}, },
onHover: !isBarChart ? undefined : ((e: ChangeEvent<HTMLElement>, chartElement: HorizontalBar[] | Doughnut[]) => { onHover: !isBarChart ? undefined : ((e: ChangeEvent<HTMLElement>, chartElement: HorizontalBar[] | Doughnut[]) => {

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

@ -11,9 +11,9 @@ 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, ChartTooltipItem, ChartOptions } from 'chart.js'; import { ChartData, ChartDataSets, ChartOptions } from 'chart.js';
import { NormalizedVisit, Stats } from '../types'; import { NormalizedVisit, Stats } from '../types';
import { fillTheGaps } from '../../utils/helpers/visits'; import { fillTheGaps, renderNonDoughnutChartLabel } 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';
@ -163,11 +163,7 @@ const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'S
// @ts-expect-error // @ts-expect-error
axis: 'x', axis: 'x',
callbacks: { callbacks: {
label({ datasetIndex, yLabel }: ChartTooltipItem, data: ChartData) { label: renderNonDoughnutChartLabel('yLabel'),
const datasetLabel = datasetIndex !== undefined && data.datasets?.[datasetIndex]?.label || '';
return `${datasetLabel}: ${prettify(Number(yLabel))}`;
},
}, },
}, },
}; };