Moved some helper components for visits to visits/helpers

src/visits/helpers/GraphCard.js

@@ -0,0 +1,132 @@
+import { Card, CardHeader, CardBody, CardFooter } from 'reactstrap';
+import { Doughnut, HorizontalBar } from 'react-chartjs-2';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { keys, values } from 'ramda';
+import { fillTheGaps } from '../../utils/helpers/visits';
+import './GraphCard.scss';
+
+const propTypes = {
+  title: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+  footer: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
+  isBarChart: PropTypes.bool,
+  stats: PropTypes.object,
+  max: PropTypes.number,
+  highlightedStats: PropTypes.object,
+  highlightedLabel: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+const generateGraphData = (title, isBarChart, labels, data, highlightedData, highlightedLabel) => ({
+  labels,
+  datasets: [
+    {
+      title,
+      label: highlightedData ? 'Non-selected' : 'Visits',
+      data,
+      backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
+        '#97BBCD',
+        '#F7464A',
+        '#46BFBD',
+        '#FDB45C',
+        '#949FB1',
+        '#57A773',
+        '#414066',
+        '#08B2E3',
+        '#B6C454',
+        '#DCDCDC',
+        '#463730',
+      ],
+      borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
+      borderWidth: 2,
+    },
+    highlightedData && {
+      title,
+      label: highlightedLabel || 'Selected',
+      data: highlightedData,
+      backgroundColor: 'rgba(247, 127, 40, 0.4)',
+      borderColor: '#F77F28',
+      borderWidth: 2,
+    },
+  ].filter(Boolean),
+});
+
+const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
+
+const determineHeight = (isBarChart, labels) => {
+  if (!isBarChart && labels.length > 8) {
+    return 200;
+  }
+
+  return isBarChart && labels.length > 20 ? labels.length * 8 : null;
+};
+
+const renderGraph = (title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick) => {
+  const hasHighlightedStats = highlightedStats && Object.keys(highlightedStats).length > 0;
+  const Component = isBarChart ? HorizontalBar : Doughnut;
+  const labels = keys(stats).map(dropLabelIfHidden);
+  const data = values(!hasHighlightedStats ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
+    if (acc[highlightedKey]) {
+      acc[highlightedKey] -= highlightedStats[highlightedKey];
+    }
+
+    return acc;
+  }, { ...stats }));
+  const highlightedData = hasHighlightedStats && fillTheGaps(highlightedStats, labels);
+
+  const options = {
+    legend: isBarChart ? { display: false } : { position: 'right' },
+    scales: isBarChart && {
+      xAxes: [
+        {
+          ticks: { beginAtZero: true, precision: 0, max },
+          stacked: true,
+        },
+      ],
+      yAxes: [{ stacked: true }],
+    },
+    tooltips: {
+      intersect: !isBarChart,
+
+      // Do not show tooltip on items with empty label when in a bar chart
+      filter: ({ yLabel }) => !isBarChart || yLabel !== '',
+    },
+    onHover: isBarChart && (({ target }, chartElement) => {
+      target.style.cursor = chartElement[0] ? 'pointer' : 'default';
+    }),
+  };
+  const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData, highlightedLabel);
+  const height = determineHeight(isBarChart, labels);
+
+  // Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
+  return (
+    <Component
+      key={height}
+      data={graphData}
+      options={options}
+      height={height}
+      getElementAtEvent={([ chart ]) => {
+        if (!onClick || !chart) {
+          return;
+        }
+
+        const { _index, _chart: { data } } = chart;
+        const { labels } = data;
+
+        onClick(labels[_index]);
+      }}
+    />
+  );
+};
+
+const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick }) => (
+  <Card>
+    <CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
+    <CardBody>{renderGraph(title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick)}</CardBody>
+    {footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}
+  </Card>
+);
+
+GraphCard.propTypes = propTypes;
+
+export default GraphCard;

src/visits/helpers/GraphCard.scss

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

src/visits/helpers/SortableBarGraph.js

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { fromPairs, head, keys, pipe, prop, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
+import SortingDropdown from '../../utils/SortingDropdown';
+import PaginationDropdown from '../../utils/PaginationDropdown';
+import { rangeOf } from '../../utils/utils';
+import { roundTen } from '../../utils/helpers/numbers';
+import SimplePaginator from '../../common/SimplePaginator';
+import GraphCard from './GraphCard';
+
+const propTypes = {
+  stats: PropTypes.object.isRequired,
+  highlightedStats: PropTypes.object,
+  highlightedLabel: PropTypes.string,
+  title: PropTypes.string.isRequired,
+  sortingItems: PropTypes.object.isRequired,
+  extraHeaderContent: PropTypes.func,
+  withPagination: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+const toLowerIfString = (value) => type(value) === 'String' ? toLower(value) : value;
+const pickKeyFromPair = ([ key ]) => key;
+const pickValueFromPair = ([ , value ]) => value;
+
+const SortableBarGraph = ({
+  stats,
+  highlightedStats,
+  title,
+  sortingItems,
+  extraHeaderContent,
+  withPagination = true,
+  ...rest
+}) => {
+  const [ order, setOrder ] = useState({
+    orderField: undefined,
+    orderDir: undefined,
+  });
+  const [ currentPage, setCurrentPage ] = useState(1);
+  const [ itemsPerPage, setItemsPerPage ] = useState(50);
+
+  const getSortedPairsForStats = (stats, sortingItems) => {
+    const pairs = toPairs(stats);
+    const sortedPairs = !order.orderField ? pairs : sortBy(
+      pipe(
+        prop(order.orderField === head(keys(sortingItems)) ? 0 : 1),
+        toLowerIfString
+      ),
+      pairs
+    );
+
+    return !order.orderDir || order.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
+  };
+  const determineStats = (stats, highlightedStats, sortingItems) => {
+    const sortedPairs = getSortedPairsForStats(stats, sortingItems);
+    const sortedKeys = sortedPairs.map(pickKeyFromPair);
+    // The highlighted stats have to be ordered based on the regular stats, not on its own values
+    const sortedHighlightedPairs = highlightedStats && toPairs(
+      { ...zipObj(sortedKeys, sortedKeys.map(() => 0)), ...highlightedStats }
+    );
+
+    if (sortedPairs.length <= itemsPerPage) {
+      return {
+        currentPageStats: fromPairs(sortedPairs),
+        currentPageHighlightedStats: sortedHighlightedPairs && fromPairs(sortedHighlightedPairs),
+      };
+    }
+
+    const pages = splitEvery(itemsPerPage, sortedPairs);
+    const highlightedPages = sortedHighlightedPairs && splitEvery(itemsPerPage, sortedHighlightedPairs);
+
+    return {
+      currentPageStats: fromPairs(determineCurrentPagePairs(pages)),
+      currentPageHighlightedStats: highlightedPages && fromPairs(determineCurrentPagePairs(highlightedPages)),
+      pagination: renderPagination(pages.length),
+      max: roundTen(Math.max(...sortedPairs.map(pickValueFromPair))),
+    };
+  };
+  const determineCurrentPagePairs = (pages) => {
+    const page = pages[currentPage - 1];
+
+    if (currentPage < pages.length) {
+      return page;
+    }
+
+    const firstPageLength = pages[0].length;
+
+    // Using the "hidden" key, the chart will just replace the label by an empty string
+    return [ ...page, ...rangeOf(firstPageLength - page.length, (i) => [ `hidden_${i}`, 0 ]) ];
+  };
+  const renderPagination = (pagesCount) =>
+    <SimplePaginator currentPage={currentPage} pagesCount={pagesCount} setCurrentPage={setCurrentPage} />;
+
+  const { currentPageStats, currentPageHighlightedStats, pagination, max } = determineStats(
+    stats,
+    highlightedStats && keys(highlightedStats).length > 0 ? highlightedStats : undefined,
+    sortingItems
+  );
+  const activeCities = keys(currentPageStats);
+  const computeTitle = () => (
+    <React.Fragment>
+      {title}
+      <div className="float-right">
+        <SortingDropdown
+          isButton={false}
+          right
+          items={sortingItems}
+          orderField={order.orderField}
+          orderDir={order.orderDir}
+          onChange={(orderField, orderDir) => setOrder({ orderField, orderDir }) || setCurrentPage(1)}
+        />
+      </div>
+      {withPagination && keys(stats).length > 50 && (
+        <div className="float-right">
+          <PaginationDropdown
+            toggleClassName="btn-sm p-0 mr-3"
+            ranges={[ 50, 100, 200, 500 ]}
+            value={itemsPerPage}
+            setValue={(itemsPerPage) => setItemsPerPage(itemsPerPage) || setCurrentPage(1)}
+          />
+        </div>
+      )}
+      {extraHeaderContent && (
+        <div className="float-right">
+          {extraHeaderContent(pagination ? activeCities : undefined)}
+        </div>
+      )}
+    </React.Fragment>
+  );
+
+  return (
+    <GraphCard
+      isBarChart
+      title={computeTitle}
+      stats={currentPageStats}
+      highlightedStats={currentPageHighlightedStats}
+      footer={pagination}
+      max={max}
+      {...rest}
+    />
+  );
+};
+
+SortableBarGraph.propTypes = propTypes;
+
+export default SortableBarGraph;