Update tooltip date formats.

This commit is contained in:
Mike Cao 2023-03-16 15:56:05 -07:00
parent afec08b355
commit c62e2e9cc7
5 changed files with 60 additions and 42 deletions

View File

@ -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,7 +39,8 @@ export default function BarChart({
return +label > 1000 ? formatLongNumber(label) : label;
};
const renderTooltip = model => {
const renderTooltip = useCallback(
model => {
const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) {
@ -47,26 +48,36 @@ export default function BarChart({
return;
}
const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
setTooltip(
<>
<div>{dateFormat(new Date(dataPoints[0].raw.x), format, locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<b>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</b>
</StatusLight>
</div>
</>,
);
const formats = {
millisecond: 'T',
second: 'pp',
minute: 'p',
hour: 'h aaa',
day: 'PPPP',
week: 'PPPP',
month: 'LLLL yyyy',
quarter: 'qqq',
year: 'yyyy',
};
const createChart = () => {
Chart.defaults.font.family = 'Inter';
setTooltip(
<div className={styles.tooltip}>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<div className={styles.value}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</div>
</StatusLight>
</div>
</div>,
);
},
[unit],
);
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();
}
}

View File

@ -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;*/

View File

@ -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;
}, {});

View File

@ -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,
},

View File

@ -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: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{os}</b>,
device: <b>{formatMessage(getDeviceMessage(device))}</b>,
device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
}}
/>
);