Refactored components used to render charts for visits

src/visits/VisitsStats.tsx

@@ -15,8 +15,6 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
 import { Settings } from '../settings/reducers/settings';
 import { SelectedServer } from '../servers/data';
 import { supportsBotVisits } from '../utils/helpers/features';
-import SortableBarGraph from './helpers/SortableBarGraph';
-import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
 import VisitsTable from './VisitsTable';
 import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types';
@@ -24,6 +22,8 @@ import OpenMapModalBtn from './helpers/OpenMapModalBtn';
 import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser';
 import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown';
 import { HighlightableProps, highlightedVisitsToStats } from './types/helpers';
+import { DoughnutChartCard } from './charts/DoughnutChartCard';
+import { SortableBarChartCard } from './charts/SortableBarChartCard';
 import './VisitsStats.scss';
 
 export interface VisitsStatsProps {
@@ -173,13 +173,13 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
             <Route exact path={`${baseUrl}${sections.byContext.subPath}`}>
               <div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
-                <GraphCard title="Operating systems" stats={os} />
+                <DoughnutChartCard title="Operating systems" stats={os} />
               </div>
               <div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
-                <GraphCard title="Browsers" stats={browsers} />
+                <DoughnutChartCard title="Browsers" stats={browsers} />
               </div>
               <div className={classNames('mt-3', { 'col-xl-4': !isOrphanVisits, 'col-lg-6': isOrphanVisits })}>
-                <SortableBarGraph
+                <SortableBarChartCard
                   title="Referrers"
                   stats={referrers}
                   withPagination={false}
@@ -194,7 +194,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
               </div>
               {isOrphanVisits && (
                 <div className="mt-3 col-lg-6">
-                  <SortableBarGraph
+                  <SortableBarChartCard
                     title="Visited URLs"
                     stats={visitedUrls}
                     highlightedLabel={highlightedLabel}
@@ -211,7 +211,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
             <Route exact path={`${baseUrl}${sections.byLocation.subPath}`}>
               <div className="col-lg-6 mt-3">
-                <SortableBarGraph
+                <SortableBarChartCard
                   title="Countries"
                   stats={countries}
                   highlightedStats={highlightedVisitsToStats(highlightedVisits, 'country')}
@@ -224,7 +224,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
                 />
               </div>
               <div className="col-lg-6 mt-3">
-                <SortableBarGraph
+                <SortableBarChartCard
                   title="Cities"
                   stats={cities}
                   highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}

src/visits/charts/ChartCard.scss

@@ -1,4 +1,4 @@
-.graph-card__footer--sticky {
+.chart-card__footer--sticky {
   position: sticky;
   bottom: 0;
 }

src/visits/charts/ChartCard.tsx

@@ -0,0 +1,16 @@
+import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
+import { FC, ReactNode } from 'react';
+import './ChartCard.scss';
+
+interface ChartCardProps {
+  title: Function | string;
+  footer?: ReactNode;
+}
+
+export const ChartCard: FC<ChartCardProps> = ({ title, footer, children }) => (
+  <Card>
+    <CardHeader className="chart-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
+    <CardBody>{children}</CardBody>
+    {footer && <CardFooter className="chart-card__footer--sticky">{footer}</CardFooter>}
+  </Card>
+);

src/visits/charts/DoughnutChart.tsx

@@ -0,0 +1,72 @@
+import { FC, useState, memo } from 'react';
+import { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
+import { keys, values } from 'ramda';
+import { Doughnut } from 'react-chartjs-2';
+import { renderPieChartLabel } from '../../utils/helpers/charts';
+import { isDarkThemeEnabled, PRIMARY_DARK_COLOR, PRIMARY_LIGHT_COLOR } from '../../utils/theme';
+import { Stats } from '../types';
+import { DoughnutChartLegend } from './DoughnutChartLegend';
+
+interface DoughnutChartProps {
+  stats: Stats;
+}
+
+const generateChartDatasets = (data: number[]): ChartDataset[] => [
+  {
+    data,
+    backgroundColor: [
+      '#97BBCD',
+      '#F7464A',
+      '#46BFBD',
+      '#FDB45C',
+      '#949FB1',
+      '#57A773',
+      '#414066',
+      '#08B2E3',
+      '#B6C454',
+      '#DCDCDC',
+      '#463730',
+    ],
+    borderColor: isDarkThemeEnabled() ? PRIMARY_DARK_COLOR : PRIMARY_LIGHT_COLOR,
+    borderWidth: 2,
+  },
+];
+const generateChartData = (labels: string[], data: number[]): ChartData => ({
+  labels,
+  datasets: generateChartDatasets(data),
+});
+
+export const DoughnutChart: FC<DoughnutChartProps> = memo(({ stats }) => {
+  const [ chartRef, setChartRef ] = useState<Chart | undefined>(); // Cannot use useRef here
+  const labels = keys(stats);
+  const data = values(stats);
+
+  const options: ChartOptions = {
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        intersect: true,
+        callbacks: { label: renderPieChartLabel },
+      },
+    },
+  };
+  const chartData = generateChartData(labels, data);
+
+  return (
+    <div className="row">
+      <div className="col-sm-12 col-md-7">
+        <Doughnut
+          height={300}
+          data={chartData}
+          options={options}
+          ref={(element) => {
+            setChartRef(element ?? undefined);
+          }}
+        />
+      </div>
+      <div className="col-sm-12 col-md-5">
+        {chartRef && <DoughnutChartLegend chart={chartRef} />}
+      </div>
+    </div>
+  );
+});

src/visits/charts/DoughnutChartCard.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { Stats } from '../types';
+import { DoughnutChart } from './DoughnutChart';
+import { ChartCard } from './ChartCard';
+
+interface DoughnutChartCardProps {
+  title: string;
+  stats: Stats;
+}
+
+export const DoughnutChartCard: FC<DoughnutChartCardProps> = ({ title, stats }) => (
+  <ChartCard title={title}>
+    <DoughnutChart stats={stats} />
+  </ChartCard>
+);

src/visits/charts/DoughnutChartLegend.scss

@@ -1,6 +1,6 @@
 @import '../../utils/base';
 
-.pie-chart-legend {
+.doughnut-chart-legend {
   list-style-type: none;
   padding: 0;
   margin: 0;
@@ -10,11 +10,11 @@
   }
 }
 
-.pie-chart-legend__item:not(:first-child) {
+.doughnut-chart-legend__item:not(:first-child) {
   margin-top: .3rem;
 }
 
-.pie-chart-legend__item-color {
+.doughnut-chart-legend__item-color {
   width: 20px;
   min-width: 20px;
   height: 20px;
@@ -22,7 +22,7 @@
   border-radius: 10px;
 }
 
-.pie-chart-legend__item-text {
+.doughnut-chart-legend__item-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

src/visits/charts/DoughnutChartLegend.tsx

@@ -1,26 +1,26 @@
 import { FC } from 'react';
 import { Chart } from 'chart.js';
-import './PieChartLegend.scss';
+import './DoughnutChartLegend.scss';
 
-interface PieChartLegendProps {
+interface DoughnutChartLegendProps {
   chart: Chart;
 }
 
-export const PieChartLegend: FC<PieChartLegendProps> = ({ chart }) => {
+export const DoughnutChartLegend: FC<DoughnutChartLegendProps> = ({ chart }) => {
   const { config } = chart;
   const { labels = [], datasets = [] } = config.data ?? {};
   const [{ backgroundColor: colors }] = datasets;
   const { defaultColor } = config.options ?? {} as any;
 
   return (
-    <ul className="pie-chart-legend">
+    <ul className="doughnut-chart-legend">
       {(labels as string[]).map((label, index) => (
-        <li key={label} className="pie-chart-legend__item d-flex">
+        <li key={label} className="doughnut-chart-legend__item d-flex">
           <div
-            className="pie-chart-legend__item-color"
+            className="doughnut-chart-legend__item-color"
             style={{ backgroundColor: (colors as string[])[index] ?? defaultColor }}
           />
-          <small className="pie-chart-legend__item-text flex-fill">{label}</small>
+          <small className="doughnut-chart-legend__item-text flex-fill">{label}</small>
         </li>
       ))}
     </ul>

src/visits/charts/HorizontalBarChart.tsx

@@ -0,0 +1,131 @@
+import { FC } from 'react';
+import { ChartData, ChartDataset, ChartOptions } from 'chart.js';
+import { keys, values } from 'ramda';
+import { Bar } from 'react-chartjs-2';
+import { fillTheGaps } from '../../utils/helpers/visits';
+import { pointerOnHover, renderChartLabel } from '../../utils/helpers/charts';
+import { prettify } from '../../utils/helpers/numbers';
+import { Stats } from '../types';
+import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../utils/theme';
+
+export interface HorizontalBarChartProps {
+  stats: Stats;
+  max?: number;
+  highlightedStats?: Stats;
+  highlightedLabel?: string;
+  onClick?: (label: string) => void;
+}
+
+const dropLabelIfHidden = (label: string) => label.startsWith('hidden') ? '' : label;
+const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats && Object.keys(stats).length > 0;
+const determineHeight = (labels: string[]): number | undefined => labels.length > 20 ? labels.length * 10 : undefined;
+
+const generateChartDatasets = (
+  data: number[],
+  highlightedData: number[],
+  highlightedLabel?: string,
+): ChartDataset[] => {
+  const mainDataset: ChartDataset = {
+    data,
+    label: highlightedLabel ? 'Non-selected' : 'Visits',
+    backgroundColor: MAIN_COLOR_ALPHA,
+    borderColor: MAIN_COLOR,
+    borderWidth: 2,
+  };
+
+  if (highlightedData.every((value) => value === 0)) {
+    return [ mainDataset ];
+  }
+
+  const highlightedDataset: ChartDataset = {
+    label: highlightedLabel ?? 'Selected',
+    data: highlightedData,
+    backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
+    borderColor: HIGHLIGHTED_COLOR,
+    borderWidth: 2,
+  };
+
+  return [ mainDataset, highlightedDataset ];
+};
+const generateChartData = (
+  labels: string[],
+  data: number[],
+  highlightedData: number[],
+  highlightedLabel?: string,
+): ChartData => ({
+  labels,
+  datasets: generateChartDatasets(data, highlightedData, highlightedLabel),
+});
+
+type ClickedCharts = [{ index: number }] | [];
+const chartElementAtEvent = (labels: string[], onClick?: (label: string) => void) => ([ chart ]: ClickedCharts) => {
+  if (!onClick || !chart) {
+    return;
+  }
+
+  onClick(labels[chart.index]);
+};
+
+export const HorizontalBarChart: FC<HorizontalBarChartProps> = (
+  { stats, highlightedStats, highlightedLabel, onClick, max },
+) => {
+  const labels = keys(stats).map(dropLabelIfHidden);
+  const data = values(
+    !statsAreDefined(highlightedStats) ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
+      if (acc[highlightedKey]) {
+        acc[highlightedKey] -= highlightedStats[highlightedKey];
+      }
+
+      return acc;
+    }, { ...stats }),
+  );
+  const highlightedData = fillTheGaps(highlightedStats ?? {}, labels);
+
+  const options: ChartOptions = {
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        mode: 'y',
+        // Do not show tooltip on items with empty label when in a bar chart
+        filter: ({ label }) => label !== '',
+        callbacks: { label: renderChartLabel },
+      },
+    },
+    scales: {
+      x: {
+        beginAtZero: true,
+        stacked: true,
+        max,
+        ticks: {
+          precision: 0,
+          callback: prettify,
+        },
+      },
+      y: { stacked: true },
+    },
+    onHover: pointerOnHover,
+    indexAxis: 'y',
+  };
+  const chartData = generateChartData(labels, data, highlightedData, highlightedLabel);
+  const height = determineHeight(labels);
+
+  // Provide a key based on the height, to force re-render every time the dataset changes (example, due to pagination)
+  const renderChartComponent = (customKey: string) => (
+    <Bar
+      key={`${height}_${customKey}`}
+      data={chartData}
+      options={options}
+      height={height}
+      getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
+    />
+  );
+
+  return (
+    <>
+      {/* It's VERY IMPORTANT to render two different components here, as one has 1 dataset and the other has 2 */}
+      {/* Using the same component causes a crash when switching from 1 to 2 datasets, and then back to 1 dataset */}
+      {highlightedStats !== undefined && renderChartComponent('with_stats')}
+      {highlightedStats === undefined && renderChartComponent('without_stats')}
+    </>
+  );
+};

src/visits/charts/SortableBarChartCard.tsx

@@ -1,26 +1,26 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
+import { OrderDir, rangeOf } from '../../utils/utils';
+import SimplePaginator from '../../common/SimplePaginator';
+import { roundTen } from '../../utils/helpers/numbers';
 import SortingDropdown from '../../utils/SortingDropdown';
 import PaginationDropdown from '../../utils/PaginationDropdown';
-import { OrderDir, rangeOf } from '../../utils/utils';
-import { roundTen } from '../../utils/helpers/numbers';
-import SimplePaginator from '../../common/SimplePaginator';
 import { Stats, StatsRow } from '../types';
-import GraphCard from './GraphCard';
-import { DefaultChartProps } from './DefaultChart';
+import { HorizontalBarChart, HorizontalBarChartProps } from './HorizontalBarChart';
+import { ChartCard } from './ChartCard';
 
-const toLowerIfString = (value: any) => type(value) === 'String' ? toLower(value) : value; // eslint-disable-line @typescript-eslint/no-unsafe-return
-const pickKeyFromPair = ([ key ]: StatsRow) => key;
-const pickValueFromPair = ([ , value ]: StatsRow) => value;
-
-interface SortableBarGraphProps extends DefaultChartProps {
+interface SortableBarChartCardProps extends Omit<HorizontalBarChartProps, 'max'> {
   title: Function | string;
   sortingItems: Record<string, string>;
   withPagination?: boolean;
   extraHeaderContent?: Function;
 }
 
-const SortableBarGraph = ({
+const toLowerIfString = (value: any) => type(value) === 'String' ? toLower(value) : value; // eslint-disable-line @typescript-eslint/no-unsafe-return
+const pickKeyFromPair = ([ key ]: StatsRow) => key;
+const pickValueFromPair = ([ , value ]: StatsRow) => value;
+
+export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
   stats,
   highlightedStats,
   title,
@@ -28,7 +28,7 @@ const SortableBarGraph = ({
   extraHeaderContent,
   withPagination = true,
   ...rest
-}: SortableBarGraphProps) => {
+}) => {
   const [ order, setOrder ] = useState<{ orderField?: string; orderDir?: OrderDir }>({
     orderField: undefined,
     orderDir: undefined,
@@ -132,16 +132,11 @@ const SortableBarGraph = ({
   );
 
   return (
-    <GraphCard
-      isBarChart
+    <ChartCard
       title={computeTitle}
-      stats={currentPageStats}
-      highlightedStats={currentPageHighlightedStats}
       footer={pagination}
-      max={max}
-      {...rest}
-    />
+    >
+      <HorizontalBarChart stats={currentPageStats} highlightedStats={currentPageHighlightedStats} max={max} {...rest} />
+    </ChartCard>
   );
 };
-
-export default SortableBarGraph;

src/visits/helpers/DefaultChart.tsx

@@ -1,184 +0,0 @@
-import { useState, memo } from 'react';
-import { Doughnut, Bar } from 'react-chartjs-2';
-import { keys, values } from 'ramda';
-import classNames from 'classnames';
-import { Chart, ChartData, ChartDataset, ChartOptions } from 'chart.js';
-import { fillTheGaps } from '../../utils/helpers/visits';
-import { Stats } from '../types';
-import { prettify } from '../../utils/helpers/numbers';
-import { pointerOnHover, renderChartLabel, renderPieChartLabel } from '../../utils/helpers/charts';
-import {
-  HIGHLIGHTED_COLOR,
-  HIGHLIGHTED_COLOR_ALPHA,
-  isDarkThemeEnabled,
-  MAIN_COLOR,
-  MAIN_COLOR_ALPHA,
-  PRIMARY_DARK_COLOR,
-  PRIMARY_LIGHT_COLOR,
-} from '../../utils/theme';
-import { PieChartLegend } from './PieChartLegend';
-
-export interface DefaultChartProps {
-  stats: Stats;
-  isBarChart?: boolean;
-  max?: number;
-  highlightedStats?: Stats;
-  highlightedLabel?: string;
-  onClick?: (label: string) => void;
-}
-
-const generateChartDatasets = (
-  isBarChart: boolean,
-  data: number[],
-  highlightedData: number[],
-  highlightedLabel?: string,
-): ChartDataset[] => {
-  const mainDataset: ChartDataset = {
-    label: highlightedLabel ? 'Non-selected' : 'Visits',
-    data,
-    backgroundColor: isBarChart ? MAIN_COLOR_ALPHA : [
-      '#97BBCD',
-      '#F7464A',
-      '#46BFBD',
-      '#FDB45C',
-      '#949FB1',
-      '#57A773',
-      '#414066',
-      '#08B2E3',
-      '#B6C454',
-      '#DCDCDC',
-      '#463730',
-    ],
-    borderColor: isBarChart ? MAIN_COLOR : isDarkThemeEnabled() ? PRIMARY_DARK_COLOR : PRIMARY_LIGHT_COLOR,
-    borderWidth: 2,
-  };
-
-  if (!isBarChart || highlightedData.every((value) => value === 0)) {
-    return [ mainDataset ];
-  }
-
-  const highlightedDataset: ChartDataset = {
-    label: highlightedLabel ?? 'Selected',
-    data: highlightedData,
-    backgroundColor: HIGHLIGHTED_COLOR_ALPHA,
-    borderColor: HIGHLIGHTED_COLOR,
-    borderWidth: 2,
-  };
-
-  return [ mainDataset, highlightedDataset ];
-};
-
-const generateChartData = (
-  isBarChart: boolean,
-  labels: string[],
-  data: number[],
-  highlightedData: number[],
-  highlightedLabel?: string,
-): ChartData => ({
-  labels,
-  datasets: generateChartDatasets(isBarChart, data, highlightedData, highlightedLabel),
-});
-
-const dropLabelIfHidden = (label: string) => label.startsWith('hidden') ? '' : label;
-
-const determineHeight = (isBarChart: boolean, labels: string[]): number | undefined => {
-  if (!isBarChart) {
-    return 300;
-  }
-
-  return isBarChart && labels.length > 20 ? labels.length * 8 : undefined;
-};
-
-const chartElementAtEvent = (
-  labels: string[],
-  onClick?: (label: string) => void,
-) => ([ chart ]: [{ index: number }]) => {
-  if (!onClick || !chart) {
-    return;
-  }
-
-  onClick(labels[chart.index]);
-};
-
-const statsAreDefined = (stats: Stats | undefined): stats is Stats => !!stats && Object.keys(stats).length > 0;
-
-const DefaultChart = memo((
-  { isBarChart = false, stats, max, highlightedStats, highlightedLabel, onClick }: DefaultChartProps,
-) => {
-  const Component = isBarChart ? Bar : Doughnut;
-  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) => {
-      if (acc[highlightedKey]) {
-        acc[highlightedKey] -= highlightedStats[highlightedKey];
-      }
-
-      return acc;
-    }, { ...stats }),
-  );
-  const highlightedData = fillTheGaps(highlightedStats ?? {}, labels);
-
-  const options: ChartOptions = {
-    plugins: {
-      legend: { display: false },
-      tooltip: {
-        intersect: !isBarChart,
-        mode: isBarChart ? 'y' : 'index',
-        // Do not show tooltip on items with empty label when in a bar chart
-        filter: ({ label }) => !isBarChart || label !== '',
-        callbacks: {
-          label: isBarChart ? renderChartLabel : renderPieChartLabel,
-        },
-      },
-    },
-    scales: !isBarChart ? undefined : {
-      x: {
-        beginAtZero: true,
-        stacked: true,
-        max,
-        ticks: {
-          precision: 0,
-          callback: prettify,
-        },
-      },
-      y: { stacked: true },
-    },
-    onHover: isBarChart ? pointerOnHover : undefined,
-    indexAxis: isBarChart ? 'y' : 'x',
-  };
-  const chartData = generateChartData(isBarChart, labels, data, highlightedData, highlightedLabel);
-  const height = determineHeight(isBarChart, labels);
-
-  // Provide a key based on the height, to force re-render every time the dataset changes (example, due to pagination)
-  const renderChartComponent = (customKey: string) => (
-    <Component
-      ref={(element) => {
-        setChartRef(element ?? undefined);
-      }}
-      key={`${height}_${customKey}`}
-      data={chartData}
-      options={options}
-      height={height}
-      getElementAtEvent={chartElementAtEvent(labels, onClick) as any}
-    />
-  );
-
-  return (
-    <div className="row">
-      <div className={classNames('col-sm-12', { 'col-md-7': !isBarChart })}>
-        {/* It's VERY IMPORTANT to render two different components here, as one has 1 dataset and the other has 2 */}
-        {/* Using the same component causes a crash when switching from 1 to 2 datasets, and then back to 1 dataset */}
-        {highlightedStats !== undefined && renderChartComponent('with_stats')}
-        {highlightedStats === undefined && renderChartComponent('without_stats')}
-      </div>
-      {!isBarChart && (
-        <div className="col-sm-12 col-md-5">
-          {chartRef && <PieChartLegend chart={chartRef} />}
-        </div>
-      )}
-    </div>
-  );
-});
-
-export default DefaultChart;

src/visits/helpers/GraphCard.tsx

@@ -1,21 +0,0 @@
-import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
-import { ReactNode } from 'react';
-import DefaultChart, { DefaultChartProps } from './DefaultChart';
-import './GraphCard.scss';
-
-interface GraphCardProps extends DefaultChartProps {
-  title: Function | string;
-  footer?: ReactNode;
-}
-
-const GraphCard = ({ title, footer, ...rest }: GraphCardProps) => (
-  <Card>
-    <CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
-    <CardBody>
-      <DefaultChart {...rest} />
-    </CardBody>
-    {footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
-  </Card>
-);
-
-export default GraphCard;