Merge pull request #271 from acelaya-forks/feature/line-chart

Feature/line chart

CHANGELOG.md

@@ -25,6 +25,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 * [#253](https://github.com/shlinkio/shlink-web-client/issues/253) Created new settings page that will be used to define customizations in the app.
 
+* [#149](https://github.com/shlinkio/shlink-web-client/issues/149) and [#198](https://github.com/shlinkio/shlink-web-client/issues/198) Added new line chart to visits and tags stats which displays amount of visits during selected time period, grouped by month, week, day or hour.
+
 #### Changed
 
 * [#218](https://github.com/shlinkio/shlink-web-client/issues/218) Added back button to sections not displayed in left menu.

src/utils/helpers/visits.js

@@ -1,4 +1,5 @@
 import bowser from 'bowser';
+import { zipObj } from 'ramda';
 import { hasValue } from '../utils';
 
 const DEFAULT = 'Others';
@@ -35,3 +36,5 @@ export const extractDomain = (url) => {
 
   return domain.split(':')[0];
 };
+
+export const fillTheGaps = (stats, labels) => Object.values({ ...zipObj(labels, labels.map(() => 0)), ...stats });

src/visits/GraphCard.js

@@ -2,7 +2,8 @@ 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, zipObj } from 'ramda';
+import { keys, values } from 'ramda';
+import { fillTheGaps } from '../utils/helpers/visits';
 import './GraphCard.scss';
 
 const propTypes = {
@@ -20,7 +21,7 @@ const generateGraphData = (title, isBarChart, labels, data, highlightedData) =>
   datasets: [
     {
       title,
-      label: highlightedData && 'Non-selected',
+      label: highlightedData ? 'Non-selected' : 'Visits',
       data,
       backgroundColor: isBarChart ? 'rgba(70, 150, 229, 0.4)' : [
         '#97BBCD',
@@ -70,9 +71,7 @@ const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) =
 
     return acc;
   }, { ...stats }));
-  const highlightedData = hasHighlightedStats && values(
-    { ...zipObj(labels, labels.map(() => 0)), ...highlightedStats }
-  );
+  const highlightedData = hasHighlightedStats && fillTheGaps(highlightedStats, labels);
 
   const options = {
     legend: isBarChart ? { display: false } : { position: 'right' },
@@ -120,7 +119,7 @@ const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) =
 };
 
 const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, onClick }) => (
-  <Card className="mt-4">
+  <Card>
     <CardHeader className="graph-card__header">{typeof title === 'function' ? title() : title}</CardHeader>
     <CardBody>{renderGraph(title, isBarChart, stats, max, highlightedStats, onClick)}</CardBody>
     {footer && <CardFooter className="graph-card__footer--sticky">{footer}</CardFooter>}

src/visits/VisitsStats.js

@@ -11,6 +11,7 @@ import { formatDate } from '../utils/helpers/date';
 import { useToggle } from '../utils/helpers/hooks';
 import SortableBarGraph from './SortableBarGraph';
 import GraphCard from './GraphCard';
+import LineChartCard from './helpers/LineChartCard';
 import VisitsTable from './VisitsTable';
 import { VisitsInfoType } from './types';
 
@@ -109,13 +110,16 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
 
       return (
         <div className="row">
-          <div className="col-xl-4 col-lg-6">
+          <div className="col-12 mt-4">
+            <LineChartCard title="Visits during time" visits={visits} highlightedVisits={highlightedVisits} />
+          </div>
+          <div className="col-xl-4 col-lg-6 mt-4">
             <GraphCard title="Operating systems" stats={os} />
           </div>
-          <div className="col-xl-4 col-lg-6">
+          <div className="col-xl-4 col-lg-6 mt-4">
             <GraphCard title="Browsers" stats={browsers} />
           </div>
-          <div className="col-xl-4">
+          <div className="col-xl-4 mt-4">
             <SortableBarGraph
               title="Referrers"
               stats={referrers}
@@ -128,7 +132,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
               onClick={highlightVisitsForProp('referer')}
             />
           </div>
-          <div className="col-lg-6">
+          <div className="col-lg-6 mt-4">
             <SortableBarGraph
               title="Countries"
               stats={countries}
@@ -140,7 +144,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
               onClick={highlightVisitsForProp('country')}
             />
           </div>
-          <div className="col-lg-6">
+          <div className="col-lg-6 mt-4">
             <SortableBarGraph
               title="Cities"
               stats={cities}

src/visits/helpers/LineCHartCard.scss

@@ -0,0 +1,9 @@
+@import '../../utils/base';
+
+.line-chart-card__body canvas {
+  height: 300px !important;
+
+  @media (min-width: $mdMin) {
+    height: 350px !important;
+  }
+}

src/visits/helpers/LineChartCard.js

@@ -0,0 +1,117 @@
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+} from 'reactstrap';
+import { Line } from 'react-chartjs-2';
+import { reverse } from 'ramda';
+import moment from 'moment';
+import { VisitType } from '../types';
+import { fillTheGaps } from '../../utils/helpers/visits';
+import './LineCHartCard.scss';
+
+const propTypes = {
+  title: PropTypes.string,
+  visits: PropTypes.arrayOf(VisitType),
+  highlightedVisits: PropTypes.arrayOf(VisitType),
+};
+
+const steps = [
+  { value: 'monthly', menuText: 'Month' },
+  { value: 'weekly', menuText: 'Week' },
+  { value: 'daily', menuText: 'Day' },
+  { value: 'hourly', menuText: 'Hour' },
+];
+
+const STEP_TO_DATE_FORMAT = {
+  hourly: (date) => moment(date).format('YYYY-MM-DD HH:00'),
+  daily: (date) => moment(date).format('YYYY-MM-DD'),
+  weekly(date) {
+    const firstWeekDay = moment(date).isoWeekday(1).format('YYYY-MM-DD');
+    const lastWeekDay = moment(date).isoWeekday(7).format('YYYY-MM-DD');
+
+    return `${firstWeekDay} - ${lastWeekDay}`;
+  },
+  monthly: (date) => moment(date).format('YYYY-MM'),
+};
+
+const groupVisitsByStep = (step, visits) => visits.reduce((acc, visit) => {
+  const key = STEP_TO_DATE_FORMAT[step](visit.date);
+
+  acc[key] = acc[key] ? acc[key] + 1 : 1;
+
+  return acc;
+}, {});
+
+const generateDataset = (stats, label, color) => ({
+  label,
+  data: Object.values(stats),
+  fill: false,
+  lineTension: 0.2,
+  borderColor: color,
+  backgroundColor: color,
+});
+
+const LineChartCard = ({ title, visits, highlightedVisits }) => {
+  const [ step, setStep ] = useState(steps[0].value);
+  const groupedVisits = useMemo(() => groupVisitsByStep(step, reverse(visits)), [ visits, step ]);
+  const labels = useMemo(() => Object.keys(groupedVisits), [ groupedVisits ]);
+  const groupedHighlighted = useMemo(
+    () => fillTheGaps(groupVisitsByStep(step, reverse(highlightedVisits)), labels),
+    [ highlightedVisits, step, labels ]
+  );
+
+  const data = {
+    labels,
+    datasets: [
+      generateDataset(groupedVisits, 'Visits', '#4696e5'),
+      highlightedVisits.length > 0 && generateDataset(groupedHighlighted, 'Selected', '#F77F28'),
+    ].filter(Boolean),
+  };
+  const options = {
+    maintainAspectRatio: false,
+    legend: { display: false },
+    scales: {
+      yAxes: [
+        {
+          ticks: { beginAtZero: true, precision: 0 },
+        },
+      ],
+    },
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        {title}
+        <div className="float-right">
+          <UncontrolledDropdown>
+            <DropdownToggle caret color="link" className="btn-sm p-0">
+              Group by
+            </DropdownToggle>
+            <DropdownMenu right>
+              {steps.map(({ menuText, value }) => (
+                <DropdownItem key={value} active={step === value} onClick={() => setStep(value)}>
+                  {menuText}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </UncontrolledDropdown>
+        </div>
+      </CardHeader>
+      <CardBody className="line-chart-card__body">
+        <Line data={data} options={options} />
+      </CardBody>
+    </Card>
+  );
+};
+
+LineChartCard.propTypes = propTypes;
+
+export default LineChartCard;

test/visits/GraphCard.test.js

@@ -82,8 +82,9 @@ describe('<GraphCard />', () => {
     wrapper = shallow(<GraphCard isBarChart title="The chart" stats={stats} highlightedStats={highlightedStats} />);
     const horizontal = wrapper.find(HorizontalBar);
 
-    const { datasets: [{ data }, highlightedData ] } = horizontal.prop('data');
+    const { datasets: [{ data, label }, highlightedData ] } = horizontal.prop('data');
 
+    expect(label).toEqual(highlightedStats ? 'Non-selected' : 'Visits');
     expect(data).toEqual(expectedData);
     expectedHighlightedData && expect(highlightedData.data).toEqual(expectedHighlightedData);
     !expectedHighlightedData && expect(highlightedData).toBeUndefined();

test/visits/helpers/LineChartCard.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { CardHeader, DropdownItem } from 'reactstrap';
+import { Line } from 'react-chartjs-2';
+import LineChartCard from '../../../src/visits/helpers/LineChartCard';
+
+describe('<LineCHartCard />', () => {
+  let wrapper;
+  const createWrapper = (visits = [], highlightedVisits = []) => {
+    wrapper = shallow(<LineChartCard title="Cool title" visits={visits} highlightedVisits={highlightedVisits} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('renders provided title', () => {
+    const wrapper = createWrapper();
+    const header = wrapper.find(CardHeader);
+
+    expect(header.html()).toContain('Cool title');
+  });
+
+  it('renders group menu and selects active grouping item', () => {
+    const wrapper = createWrapper();
+    const items = wrapper.find(DropdownItem);
+
+    expect(items).toHaveLength(4);
+    expect(items.at(0).prop('children')).toEqual('Month');
+    expect(items.at(0).prop('active')).toEqual(true);
+    expect(items.at(1).prop('children')).toEqual('Week');
+    expect(items.at(1).prop('active')).toEqual(false);
+    expect(items.at(2).prop('children')).toEqual('Day');
+    expect(items.at(2).prop('active')).toEqual(false);
+    expect(items.at(3).prop('children')).toEqual('Hour');
+    expect(items.at(3).prop('active')).toEqual(false);
+  });
+
+  it('renders chart with expected options', () => {
+    const wrapper = createWrapper();
+    const chart = wrapper.find(Line);
+
+    expect(chart.prop('options')).toEqual({
+      maintainAspectRatio: false,
+      legend: { display: false },
+      scales: {
+        yAxes: [
+          {
+            ticks: { beginAtZero: true, precision: 0 },
+          },
+        ],
+      },
+    });
+  });
+
+  it.each([
+    [[{}], [], 1 ],
+    [[{}], [{}], 2 ],
+  ])('renders chart with expected data', (visits, highlightedVisits, expectedLines) => {
+    const wrapper = createWrapper(visits, highlightedVisits);
+    const chart = wrapper.find(Line);
+    const { datasets } = chart.prop('data');
+
+    expect(datasets).toHaveLength(expectedLines);
+  });
+});