diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index fb71df97..65881e28 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { StatusLight } from 'react-basics';
import classNames from 'classnames';
import Chart from 'chart.js/auto';
@@ -15,14 +15,14 @@ export default function BarChart({
datasets,
unit,
animationDuration = DEFAULT_ANIMATION_DURATION,
- className,
stacked = false,
loading = false,
onCreate = () => {},
onUpdate = () => {},
+ className,
}) {
const canvas = useRef();
- const chart = useRef();
+ const chart = useRef(null);
const [tooltip, setTooltip] = useState(null);
const { locale } = useLocale();
const [theme] = useTheme();
@@ -39,34 +39,45 @@ export default function BarChart({
return +label > 1000 ? formatLongNumber(label) : label;
};
- const renderTooltip = model => {
- const { opacity, labelColors, dataPoints } = model.tooltip;
+ const renderTooltip = useCallback(
+ model => {
+ const { opacity, labelColors, dataPoints } = model.tooltip;
- if (!dataPoints?.length || !opacity) {
- setTooltip(null);
- return;
- }
+ if (!dataPoints?.length || !opacity) {
+ setTooltip(null);
+ return;
+ }
- const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
+ const formats = {
+ millisecond: 'T',
+ second: 'pp',
+ minute: 'p',
+ hour: 'h aaa',
+ day: 'PPPP',
+ week: 'PPPP',
+ month: 'LLLL yyyy',
+ quarter: 'qqq',
+ year: 'yyyy',
+ };
- setTooltip(
- <>
-
{dateFormat(new Date(dataPoints[0].raw.x), format, locale)}
-
-
-
- {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
-
-
-
- >,
- );
- };
+ setTooltip(
+
+
{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}
+
+
+
+ {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
+
+
+
+
,
+ );
+ },
+ [unit],
+ );
- const createChart = () => {
- Chart.defaults.font.family = 'Inter';
-
- const options = {
+ const getOptions = useCallback(() => {
+ return {
responsive: true,
maintainAspectRatio: false,
animation: {
@@ -124,6 +135,12 @@ export default function BarChart({
},
},
};
+ }, [animationDuration, renderTooltip, stacked, colors]);
+
+ const createChart = () => {
+ Chart.defaults.font.family = 'Inter';
+
+ const options = getOptions();
onCreate(options);
@@ -137,15 +154,9 @@ export default function BarChart({
};
const updateChart = () => {
- const { animation, scales } = chart.current.options;
+ setTooltip(null);
- animation.duration = animationDuration;
- scales.x.ticks.color = colors.text;
- scales.x.time.unit = unit;
- scales.x.border.color = colors.line;
- scales.y.ticks.color = colors.text;
- scales.y.grid.color = colors.line;
- scales.y.border.color = colors.line;
+ chart.current.options = getOptions();
onUpdate(chart.current);
@@ -157,7 +168,6 @@ export default function BarChart({
if (!chart.current) {
createChart();
} else {
- setTooltip(null);
updateChart();
}
}
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css
index c54f2d4a..850d1ea7 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -4,6 +4,16 @@
overflow: hidden;
}
+.tooltip {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.tooltip .value {
+ text-transform: lowercase;
+}
+
@media only screen and (max-width: 992px) {
.chart {
/*height: 200px;*/
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 31d5faa9..6ccab9ab 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -33,12 +33,12 @@ export default function EventsChart({ websiteId, className, token }) {
if (!data) return [];
if (isLoading) return data;
- const map = data.reduce((obj, { x, t, y }) => {
+ const map = data.reduce((obj, { x, y }) => {
if (!obj[x]) {
obj[x] = [];
}
- obj[x].push({ t, y });
+ obj[x].push({ x, y });
return obj;
}, {});
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 38550969..47a085f0 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -58,14 +58,12 @@ export default function PageviewsChart({
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
- lineTension: 0,
borderWidth: 1,
...colors.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
- lineTension: 0,
borderWidth: 1,
...colors.views,
},
diff --git a/components/pages/realtime/RealtimeLog.js b/components/pages/realtime/RealtimeLog.js
index 06b7537e..be7aeb8d 100644
--- a/components/pages/realtime/RealtimeLog.js
+++ b/components/pages/realtime/RealtimeLog.js
@@ -5,7 +5,7 @@ import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
-import { getDeviceMessage, labels, messages } from 'components/messages';
+import { labels, messages } from 'components/messages';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
@@ -102,7 +102,7 @@ export default function RealtimeLog({ data, websiteDomain }) {
country: {countryNames[country] || formatMessage(labels.unknown)},
browser: {BROWSERS[browser]},
os: {os},
- device: {formatMessage(getDeviceMessage(device))},
+ device: {formatMessage(labels[device] || labels.unknown)},
}}
/>
);