diff --git a/src/visits/GraphCard.js b/src/visits/GraphCard.js
index c1161e6a..9f06c2b7 100644
--- a/src/visits/GraphCard.js
+++ b/src/visits/GraphCard.js
@@ -13,10 +13,11 @@ const propTypes = {
stats: PropTypes.object,
max: PropTypes.number,
highlightedStats: PropTypes.object,
+ highlightedLabel: PropTypes.string,
onClick: PropTypes.func,
};
-const generateGraphData = (title, isBarChart, labels, data, highlightedData) => ({
+const generateGraphData = (title, isBarChart, labels, data, highlightedData, highlightedLabel) => ({
labels,
datasets: [
{
@@ -41,7 +42,7 @@ const generateGraphData = (title, isBarChart, labels, data, highlightedData) =>
},
highlightedData && {
title,
- label: 'Selected',
+ label: highlightedLabel || 'Selected',
data: highlightedData,
backgroundColor: 'rgba(247, 127, 40, 0.4)',
borderColor: '#F77F28',
@@ -60,7 +61,7 @@ const determineHeight = (isBarChart, labels) => {
return isBarChart && labels.length > 20 ? labels.length * 8 : null;
};
-const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) => {
+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);
@@ -94,7 +95,7 @@ const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) =
target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}),
};
- const graphData = generateGraphData(title, isBarChart, labels, data, highlightedData);
+ 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
@@ -118,10 +119,10 @@ const renderGraph = (title, isBarChart, stats, max, highlightedStats, onClick) =
);
};
-const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, onClick }) => (
+const GraphCard = ({ title, footer, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick }) => (
{typeof title === 'function' ? title() : title}
- {renderGraph(title, isBarChart, stats, max, highlightedStats, onClick)}
+ {renderGraph(title, isBarChart, stats, max, highlightedStats, highlightedLabel, onClick)}
{footer && {footer}}
);
diff --git a/src/visits/SortableBarGraph.js b/src/visits/SortableBarGraph.js
index 3d849fa6..a3efaf58 100644
--- a/src/visits/SortableBarGraph.js
+++ b/src/visits/SortableBarGraph.js
@@ -17,6 +17,7 @@ export default class SortableBarGraph extends React.Component {
static propTypes = {
stats: PropTypes.object.isRequired,
highlightedStats: PropTypes.object,
+ highlightedLabel: PropTypes.string,
title: PropTypes.string.isRequired,
sortingItems: PropTypes.object.isRequired,
extraHeaderContent: PropTypes.func,
diff --git a/src/visits/VisitsStats.js b/src/visits/VisitsStats.js
index 99329cb2..7802c98a 100644
--- a/src/visits/VisitsStats.js
+++ b/src/visits/VisitsStats.js
@@ -42,6 +42,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
const [ showTable, toggleTable ] = useToggle();
const [ tableIsSticky, , setSticky, unsetSticky ] = useToggle();
const [ highlightedVisits, setHighlightedVisits ] = useState([]);
+ const [ highlightedLabel, setHighlightedLabel ] = useState();
const [ isMobileDevice, setIsMobileDevice ] = useState(false);
const determineIsMobileDevice = () => setIsMobileDevice(matchMedia('(max-width: 991px)').matches);
const setSelectedVisits = (selectedVisits) => {
@@ -53,9 +54,11 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
if (selectedBar === newSelectedBar) {
setHighlightedVisits([]);
+ setHighlightedLabel(undefined);
selectedBar = undefined;
} else {
setHighlightedVisits(normalizedVisits.filter(propEq(prop, value)));
+ setHighlightedLabel(value);
selectedBar = newSelectedBar;
}
};
@@ -111,7 +114,12 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
return (
-
+
@@ -125,6 +133,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
stats={referrers}
withPagination={false}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'referer')}
+ highlightedLabel={highlightedLabel}
sortingItems={{
name: 'Referrer name',
amount: 'Visits amount',
@@ -137,6 +146,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
title="Countries"
stats={countries}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'country')}
+ highlightedLabel={highlightedLabel}
sortingItems={{
name: 'Country name',
amount: 'Visits amount',
@@ -149,6 +159,7 @@ const VisitsStats = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBt
title="Cities"
stats={cities}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
+ highlightedLabel={highlightedLabel}
extraHeaderContent={(activeCities) =>
mapLocations.length > 0 &&
diff --git a/src/visits/helpers/LineChartCard.js b/src/visits/helpers/LineChartCard.js
index 1b78feb1..9da4abe9 100644
--- a/src/visits/helpers/LineChartCard.js
+++ b/src/visits/helpers/LineChartCard.js
@@ -21,6 +21,7 @@ import Checkbox from '../../utils/Checkbox';
const propTypes = {
title: PropTypes.string,
+ highlightedLabel: PropTypes.string,
visits: PropTypes.arrayOf(VisitType),
highlightedVisits: PropTypes.arrayOf(VisitType),
};
@@ -91,7 +92,7 @@ const generateDataset = (stats, label, color) => ({
backgroundColor: color,
});
-const LineChartCard = ({ title, visits, highlightedVisits }) => {
+const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'Selected' }) => {
const [ step, setStep ] = useState('monthly');
const [ skipNoVisits, toggleSkipNoVisits ] = useToggle(true);
@@ -109,7 +110,7 @@ const LineChartCard = ({ title, visits, highlightedVisits }) => {
labels,
datasets: [
generateDataset(groupedVisits, 'Visits', '#4696e5'),
- highlightedVisits.length > 0 && generateDataset(groupedHighlighted, 'Selected', '#F77F28'),
+ highlightedVisits.length > 0 && generateDataset(groupedHighlighted, highlightedLabel, '#F77F28'),
].filter(Boolean),
};
const options = {