diff --git a/src/utils/helpers/charts.ts b/src/utils/helpers/charts.ts index 807519a9..fcc6f1fb 100644 --- a/src/utils/helpers/charts.ts +++ b/src/utils/helpers/charts.ts @@ -1,5 +1,30 @@ import { ChangeEvent, FC } from 'react'; +import { ChartData, ChartTooltipItem } from 'chart.js'; +import { prettify } from './numbers'; export const pointerOnHover = ({ target }: ChangeEvent, chartElement: FC[]) => { target.style.cursor = chartElement[0] ? 'pointer' : 'default'; }; + +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))}`; +}; + +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))}`; +}; diff --git a/src/utils/helpers/visits.ts b/src/utils/helpers/visits.ts index 89dc1d57..3b081814 100644 --- a/src/utils/helpers/visits.ts +++ b/src/utils/helpers/visits.ts @@ -1,9 +1,7 @@ import bowser from 'bowser'; import { zipObj } from 'ramda'; -import { ChartData, ChartTooltipItem } from 'chart.js'; import { Empty, hasValue } from '../utils'; import { Stats, UserAgent } from '../../visits/types'; -import { prettify } from './numbers'; const DEFAULT = 'Others'; const BROWSERS_WHITELIST = [ @@ -40,26 +38,3 @@ export const extractDomain = (url: string | Empty): string => { export const fillTheGaps = (stats: Stats, labels: string[]): number[] => 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))}`; -}; diff --git a/src/visits/helpers/DefaultChart.tsx b/src/visits/helpers/DefaultChart.tsx index fcba3a5c..ebd92456 100644 --- a/src/visits/helpers/DefaultChart.tsx +++ b/src/visits/helpers/DefaultChart.tsx @@ -3,11 +3,11 @@ import { Doughnut, HorizontalBar } from 'react-chartjs-2'; import { keys, values } from 'ramda'; import classNames from 'classnames'; import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js'; -import { fillTheGaps, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/visits'; +import { fillTheGaps} from '../../utils/helpers/visits'; import { Stats } from '../types'; import { prettify } from '../../utils/helpers/numbers'; +import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts'; import './DefaultChart.scss'; -import { pointerOnHover } from '../../utils/helpers/charts'; export interface DefaultChartProps { title: Function | string; diff --git a/src/visits/helpers/LineChartCard.tsx b/src/visits/helpers/LineChartCard.tsx index bfc6adcb..c21ba53b 100644 --- a/src/visits/helpers/LineChartCard.tsx +++ b/src/visits/helpers/LineChartCard.tsx @@ -13,13 +13,13 @@ import { always, cond, reverse } from 'ramda'; import moment from 'moment'; import Chart, { ChartData, ChartDataSets, ChartOptions } from 'chart.js'; import { NormalizedVisit, Stats } from '../types'; -import { fillTheGaps, renderNonDoughnutChartLabel } from '../../utils/helpers/visits'; +import { fillTheGaps} from '../../utils/helpers/visits'; import { useToggle } from '../../utils/helpers/hooks'; import { rangeOf } from '../../utils/utils'; import ToggleSwitch from '../../utils/ToggleSwitch'; import { prettify } from '../../utils/helpers/numbers'; +import { pointerOnHover, renderNonDoughnutChartLabel } from '../../utils/helpers/charts'; import './LineChartCard.scss'; -import { pointerOnHover } from '../../utils/helpers/charts'; interface LineChartCardProps { title: string;