diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js
index a9e4a527..2b460fa8 100644
--- a/src/utils/SearchField.js
+++ b/src/utils/SearchField.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
import PropTypes from 'prop-types';
@@ -6,62 +6,59 @@ import classNames from 'classnames';
import './SearchField.scss';
const DEFAULT_SEARCH_INTERVAL = 500;
+let timer;
-export default class SearchField extends React.Component {
- static propTypes = {
- onChange: PropTypes.func.isRequired,
- className: PropTypes.string,
- placeholder: PropTypes.string,
+const propTypes = {
+ onChange: PropTypes.func.isRequired,
+ className: PropTypes.string,
+ placeholder: PropTypes.string,
+ large: PropTypes.bool,
+ noBorder: PropTypes.bool,
+};
+
+const SearchField = ({ onChange, className, placeholder = 'Search...', large = true, noBorder = false }) => {
+ const [ searchTerm, setSearchTerm ] = useState('');
+
+ const resetTimer = () => {
+ clearTimeout(timer);
+ timer = null;
};
- static defaultProps = {
- className: '',
- placeholder: 'Search...',
- };
-
- state = { showClearBtn: false, searchTerm: '' };
- timer = null;
-
- searchTermChanged(searchTerm, timeout = DEFAULT_SEARCH_INTERVAL) {
- this.setState({
- showClearBtn: searchTerm !== '',
- searchTerm,
- });
-
- const resetTimer = () => {
- clearTimeout(this.timer);
- this.timer = null;
- };
+ const searchTermChanged = (newSearchTerm, timeout = DEFAULT_SEARCH_INTERVAL) => {
+ setSearchTerm(newSearchTerm);
resetTimer();
- this.timer = setTimeout(() => {
- this.props.onChange(searchTerm);
+ timer = setTimeout(() => {
+ onChange(newSearchTerm);
resetTimer();
}, timeout);
- }
+ };
- render() {
- const { className, placeholder } = this.props;
-
- return (
-
-
this.searchTermChanged(e.target.value)}
- />
-
-
this.searchTermChanged('', 0)}
- >
- ×
-
+ return (
+
+
searchTermChanged(e.target.value)}
+ />
+
+
searchTermChanged('', 0)}
+ >
+ ×
- );
- }
-}
+
+ );
+};
+
+SearchField.propTypes = propTypes;
+
+export default SearchField;
diff --git a/src/utils/SearchField.scss b/src/utils/SearchField.scss
index b4c73165..5877b9ce 100644
--- a/src/utils/SearchField.scss
+++ b/src/utils/SearchField.scss
@@ -2,6 +2,10 @@
.search-field {
position: relative;
+
+ &:focus-within {
+ z-index: 1;
+ }
}
.search-field__input.search-field__input {
@@ -9,6 +13,11 @@
padding-right: 40px;
}
+.search-field__input--no-border.search-field__input--no-border {
+ border: none;
+ border-radius: 0;
+}
+
.search-field__icon {
@include vertical-align();
diff --git a/src/utils/base.scss b/src/utils/base.scss
index 5038fdfb..69fdacd1 100644
--- a/src/utils/base.scss
+++ b/src/utils/base.scss
@@ -13,6 +13,7 @@ $mainColor: #4696e5;
$lightHoverColor: #eee;
$lightGrey: #ddd;
$dangerColor: #dc3545;
+$mediumGrey: #dee2e6;
// Misc
$headerHeight: 57px;
diff --git a/src/utils/helpers/hooks.js b/src/utils/helpers/hooks.js
index 3eef15b5..81a60517 100644
--- a/src/utils/helpers/hooks.js
+++ b/src/utils/helpers/hooks.js
@@ -12,8 +12,9 @@ export const useStateFlagTimeout = (setTimeout) => (initialValue = true, delay =
return [ flag, callback ];
};
+// Return [ flag, toggle, enable, disable ]
export const useToggle = (initialValue = false) => {
const [ flag, setFlag ] = useState(initialValue);
- return [ flag, () => setFlag(!flag) ];
+ return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
};
diff --git a/src/utils/helpers/numbers.js b/src/utils/helpers/numbers.js
new file mode 100644
index 00000000..b9e0757f
--- /dev/null
+++ b/src/utils/helpers/numbers.js
@@ -0,0 +1,8 @@
+const TEN_ROUNDING_NUMBER = 10;
+const { ceil } = Math;
+
+const formatter = new Intl.NumberFormat('en-US');
+
+export const prettify = (number) => formatter.format(number);
+
+export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
diff --git a/src/utils/helpers/visits.js b/src/utils/helpers/visits.js
new file mode 100644
index 00000000..754cbb19
--- /dev/null
+++ b/src/utils/helpers/visits.js
@@ -0,0 +1,59 @@
+import { hasValue } from '../utils';
+
+const DEFAULT = 'Others';
+
+export const osFromUserAgent = (userAgent) => {
+ if (!hasValue(userAgent)) {
+ return DEFAULT;
+ }
+
+ const lowerUserAgent = userAgent.toLowerCase();
+
+ switch (true) {
+ case lowerUserAgent.includes('linux'):
+ return 'Linux';
+ case lowerUserAgent.includes('windows'):
+ return 'Windows';
+ case lowerUserAgent.includes('mac'):
+ return 'MacOS';
+ case lowerUserAgent.includes('mobi'):
+ return 'Mobile';
+ default:
+ return DEFAULT;
+ }
+};
+
+export const browserFromUserAgent = (userAgent) => {
+ if (!hasValue(userAgent)) {
+ return DEFAULT;
+ }
+
+ const lowerUserAgent = userAgent.toLowerCase();
+
+ switch (true) {
+ case lowerUserAgent.includes('opera') || lowerUserAgent.includes('opr'):
+ return 'Opera';
+ case lowerUserAgent.includes('firefox'):
+ return 'Firefox';
+ case lowerUserAgent.includes('chrome'):
+ return 'Chrome';
+ case lowerUserAgent.includes('safari'):
+ return 'Safari';
+ case lowerUserAgent.includes('edg'):
+ return 'Microsoft Edge';
+ case lowerUserAgent.includes('msie'):
+ return 'Internet Explorer';
+ default:
+ return DEFAULT;
+ }
+};
+
+export const extractDomain = (url) => {
+ if (!hasValue(url)) {
+ return 'Direct';
+ }
+
+ const domain = url.includes('://') ? url.split('/')[2] : url.split('/')[0];
+
+ return domain.split(':')[0];
+};
diff --git a/src/utils/mixins/sticky-cell.scss b/src/utils/mixins/sticky-cell.scss
new file mode 100644
index 00000000..71d48ede
--- /dev/null
+++ b/src/utils/mixins/sticky-cell.scss
@@ -0,0 +1,37 @@
+@import "../base";
+
+@mixin sticky-cell() {
+ z-index: 1;
+ border: none !important;
+ position: relative;
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: -1px;
+ left: 0;
+ bottom: -1px;
+ right: -1px;
+ background: $mediumGrey;
+ z-index: -2;
+ }
+
+ &:first-child:before {
+ left: -1px;
+ }
+
+ &:after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 1px;
+ bottom: 0;
+ right: 0;
+ background: white;
+ z-index: -1;
+ }
+
+ &:first-child:after {
+ left: 0;
+ }
+}
diff --git a/src/utils/utils.js b/src/utils/utils.js
index ee2ee170..db527df6 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -4,9 +4,7 @@ import marker from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
import { isEmpty, isNil, range } from 'ramda';
-const TEN_ROUNDING_NUMBER = 10;
const DEFAULT_TIMEOUT_DELAY = 2000;
-const { ceil } = Math;
export const stateFlagTimeout = (setTimeout) => (
setState,
@@ -43,6 +41,4 @@ export const fixLeafletIcons = () => {
export const rangeOf = (size, mappingFn, startAt = 1) => range(startAt, size + 1).map(mappingFn);
-export const roundTen = (number) => ceil(number / TEN_ROUNDING_NUMBER) * TEN_ROUNDING_NUMBER;
-
export const hasValue = (value) => !isNil(value) && !isEmpty(value);
diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js
index 253f4011..5814739e 100644
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -2,7 +2,7 @@ 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 { keys, values, zipObj } from 'ramda';
import './GraphCard.scss';
const propTypes = {
@@ -11,9 +11,10 @@ const propTypes = {
isBarChart: PropTypes.bool,
stats: PropTypes.object,
max: PropTypes.number,
+ highlightedStats: PropTypes.object,
};
-const generateGraphData = (title, isBarChart, labels, data) => ({
+const generateGraphData = (title, isBarChart, labels, data, highlightedData) => ({
labels,
datasets: [
{
@@ -31,23 +32,41 @@ const generateGraphData = (title, isBarChart, labels, data) => ({
borderColor: isBarChart ? 'rgba(70, 150, 229, 1)' : 'white',
borderWidth: 2,
},
- ],
+ highlightedData && {
+ title,
+ label: 'Selected',
+ data: highlightedData,
+ backgroundColor: 'rgba(247, 127, 40, 0.4)',
+ borderColor: '#F77F28',
+ borderWidth: 2,
+ },
+ ].filter(Boolean),
});
const dropLabelIfHidden = (label) => label.startsWith('hidden') ? '' : label;
-const renderGraph = (title, isBarChart, stats, max) => {
+const renderGraph = (title, isBarChart, stats, max, highlightedStats) => {
const Component = isBarChart ? HorizontalBar : Doughnut;
const labels = keys(stats).map(dropLabelIfHidden);
- const data = values(stats);
+ const data = values(!highlightedStats ? stats : keys(highlightedStats).reduce((acc, highlightedKey) => {
+ if (acc[highlightedKey]) {
+ acc[highlightedKey] -= highlightedStats[highlightedKey];
+ }
+
+ return acc;
+ }, { ...stats }));
+ const highlightedData = highlightedStats && values({ ...zipObj(labels, labels.map(() => 0)), ...highlightedStats });
+
const options = {
legend: isBarChart ? { display: false } : { position: 'right' },
scales: isBarChart && {
xAxes: [
{
ticks: { beginAtZero: true, max },
+ stacked: true,
},
],
+ yAxes: [{ stacked: true }],
},
tooltips: {
intersect: !isBarChart,
@@ -56,17 +75,17 @@ const renderGraph = (title, isBarChart, stats, max) => {
filter: ({ yLabel }) => !isBarChart || yLabel !== '',
},
};
- const graphData = generateGraphData(title, isBarChart, labels, data);
+ const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData);
const height = isBarChart && labels.length > 20 ? labels.length * 8 : null;
// Provide a key based on the height, so that every time the dataset changes, a new graph is rendered
return
;
};
-const GraphCard = ({ title, footer, isBarChart, stats, max }) => (
+const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats }) => (
{typeof title === 'function' ? title() : title}
- {renderGraph(title, isBarChart, stats, max)}
+ {renderGraph(title, isBarChart, stats, max, highlightedStats)}
{footer && {footer} }
);
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index a38b03c8..fd6026e2 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -1,66 +1,101 @@
-import { isEmpty, mapObjIndexed, values } from 'ramda';
-import React from 'react';
-import { Card } from 'reactstrap';
+import { isEmpty, values } from 'ramda';
+import React, { useState, useEffect } from 'react';
+import { Button, Card, Collapse } from 'reactstrap';
import PropTypes from 'prop-types';
import qs from 'qs';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown as chevronDown } from '@fortawesome/free-solid-svg-icons';
import DateRangeRow from '../utils/DateRangeRow';
import Message from '../utils/Message';
import { formatDate } from '../utils/helpers/date';
+import { useToggle } from '../utils/helpers/hooks';
import SortableBarGraph from './SortableBarGraph';
import { shortUrlVisitsType } from './reducers/shortUrlVisits';
import VisitsHeader from './VisitsHeader';
import GraphCard from './GraphCard';
import { shortUrlDetailType } from './reducers/shortUrlDetail';
+import VisitsTable from './VisitsTable';
-const ShortUrlVisits = (
- { processStatsFromVisits },
- OpenMapModalBtn
-) => class ShortUrlVisits extends React.PureComponent {
- static propTypes = {
- match: PropTypes.shape({
- params: PropTypes.object,
- }),
- location: PropTypes.shape({
- search: PropTypes.string,
- }),
- getShortUrlVisits: PropTypes.func,
- shortUrlVisits: shortUrlVisitsType,
- getShortUrlDetail: PropTypes.func,
- shortUrlDetail: shortUrlDetailType,
- cancelGetShortUrlVisits: PropTypes.func,
- };
+const propTypes = {
+ match: PropTypes.shape({
+ params: PropTypes.object,
+ }),
+ location: PropTypes.shape({
+ search: PropTypes.string,
+ }),
+ getShortUrlVisits: PropTypes.func,
+ shortUrlVisits: shortUrlVisitsType,
+ getShortUrlDetail: PropTypes.func,
+ shortUrlDetail: shortUrlDetailType,
+ cancelGetShortUrlVisits: PropTypes.func,
+ matchMedia: PropTypes.func,
+};
- state = { startDate: undefined, endDate: undefined };
- loadVisits = (loadDetail = false) => {
- const { match: { params }, location: { search }, getShortUrlVisits, getShortUrlDetail } = this.props;
+const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => {
+ if (!acc[highlightedVisit[prop]]) {
+ acc[highlightedVisit[prop]] = 0;
+ }
+
+ acc[highlightedVisit[prop]] += 1;
+
+ return acc;
+}, {});
+const format = formatDate();
+let memoizationId;
+let timeWhenMounted;
+
+const ShortUrlVisits = ({ processStatsFromVisits }, OpenMapModalBtn) => {
+ const ShortUrlVisitsComp = ({
+ match,
+ location,
+ shortUrlVisits,
+ shortUrlDetail,
+ getShortUrlVisits,
+ getShortUrlDetail,
+ cancelGetShortUrlVisits,
+ matchMedia = window.matchMedia,
+ }) => {
+ const [ startDate, setStartDate ] = useState(undefined);
+ const [ endDate, setEndDate ] = useState(undefined);
+ const [ showTable, toggleTable ] = useToggle();
+ const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle();
+ const [ highlightedVisits, setHighlightedVisits ] = useState([]);
+ const [ isMobileDevice, setIsMobileDevice ] = useState(false);
+ const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
+
+ const { params } = match;
const { shortCode } = params;
- const { startDate, endDate } = mapObjIndexed(formatDate(), this.state);
+ const { search } = location;
const { domain } = qs.parse(search, { ignoreQueryPrefix: true });
- // While the "page" is loaded, use the timestamp + filtering dates as memoization IDs for stats calculations
- this.memoizationId = `${this.timeWhenMounted}_${shortCode}_${startDate}_${endDate}`;
- getShortUrlVisits(shortCode, { startDate, endDate, domain });
+ const loadVisits = () => {
+ const start = format(startDate);
+ const end = format(endDate);
- if (loadDetail) {
+ // While the "page" is loaded, use the timestamp + filtering dates as memoization IDs for stats calculations
+ memoizationId = `${timeWhenMounted}_${shortCode}_${start}_${end}`;
+ getShortUrlVisits(shortCode, { startDate: start, endDate: end, domain });
+ };
+
+ useEffect(() => {
+ timeWhenMounted = new Date().getTime();
getShortUrlDetail(shortCode, domain);
- }
- };
+ determineIsMobileDevice();
+ window.addEventListener('resize', determineIsMobileDevice);
- componentDidMount() {
- this.timeWhenMounted = new Date().getTime();
- this.loadVisits(true);
- }
+ return () => {
+ cancelGetShortUrlVisits();
+ window.removeEventListener('resize', determineIsMobileDevice);
+ };
+ }, []);
+ useEffect(() => {
+ loadVisits();
+ }, [ startDate, endDate ]);
- componentWillUnmount() {
- this.props.cancelGetShortUrlVisits();
- }
-
- render() {
- const { shortUrlVisits, shortUrlDetail } = this.props;
+ const { visits, loading, loadingLarge, error } = shortUrlVisits;
+ const showTableControls = !loading && visits.length > 0;
const renderVisitsContent = () => {
- const { visits, loading, loadingLarge, error } = shortUrlVisits;
-
if (loading) {
const message = loadingLarge ? 'This is going to take a while... :S' : 'Loading...';
@@ -80,7 +115,7 @@ const ShortUrlVisits = (
}
const { os, browsers, referrers, countries, cities, citiesForMap } = processStatsFromVisits(
- { id: this.memoizationId, visits }
+ { id: memoizationId, visits }
);
const mapLocations = values(citiesForMap);
@@ -94,9 +129,10 @@ const ShortUrlVisits = (