m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-11-15 17:55:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Responsive chart labels.

Browse Source
This commit is contained in:
Mike Cao 2020-09-02 09:56:29 -07:00
parent a5c3429d79
commit 353907e71d
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/metrics/BarChart.js
View File

@ -4,7 +4,7 @@ import classNames from 'classnames';
import ChartJS from 'chart.js'; import ChartJS from 'chart.js';
import styles from './BarChart.module.css'; import styles from './BarChart.module.css';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { formatLongNumber } from '../../lib/format'; import { formatLongNumber } from 'lib/format';
export default function BarChart({ export default function BarChart({
chartId, chartId,
@ -22,30 +22,39 @@ export default function BarChart({
const chart = useRef(); const chart = useRef();
const [tooltip, setTooltip] = useState({}); const [tooltip, setTooltip] = useState({});
const renderXLabel = (label, index, values) => { function renderXLabel(label, index, values) {
const d = new Date(values[index].value); const d = new Date(values[index].value);
const n = records; const w = canvas.current.width;
switch (unit) { switch (unit) {
case 'hour': case 'hour':
return format(d, 'ha'); return format(d, 'ha');
case 'day': case 'day':
if (n >= 15) { if (records > 31) {
return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : ''; if (w <= 500) {
return index % 10 === 0 ? format(d, 'M/d') : '';
}
return index % 5 === 0 ? format(d, 'M/d') : '';
}
if (w <= 500) {
return index % 2 === 0 ? format(d, 'MMM d') : '';
} }
return format(d, 'EEE M/d'); return format(d, 'EEE M/d');
case 'month': case 'month':
if (w <= 660) {
return format(d, 'MMM');
}
return format(d, 'MMMM'); return format(d, 'MMMM');
default: default:
return label; return label;
} }
}; }
const renderYLabel = label => { function renderYLabel(label) {
return +label > 1 ? formatLongNumber(label) : label; return +label > 1 ? formatLongNumber(label) : label;
}; }
const renderTooltip = model => { function renderTooltip(model) {
const { opacity, title, body, labelColors } = model; const { opacity, title, body, labelColors } = model;
if (!opacity) { if (!opacity) {
@ -60,9 +69,9 @@ export default function BarChart({
labelColor: labelColors[0].backgroundColor, labelColor: labelColors[0].backgroundColor,
}); });
} }
}; }
const createChart = () => { function createChart() {
const options = { const options = {
animation: { animation: {
duration: animationDuration, duration: animationDuration,
@ -119,9 +128,9 @@ export default function BarChart({
}, },
options, options,
}); });
}; }
const updateChart = () => { function updateChart() {
const { options } = chart.current; const { options } = chart.current;
options.scales.xAxes[0].time.unit = unit; options.scales.xAxes[0].time.unit = unit;
@ -129,7 +138,7 @@ export default function BarChart({
options.animation.duration = animationDuration; options.animation.duration = animationDuration;
onUpdate(chart.current); onUpdate(chart.current);
}; }
useEffect(() => { useEffect(() => {
if (datasets) { if (datasets) {

2
components/metrics/WebsiteHeader.js
View File

@ -21,7 +21,7 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) {
<Button <Button
icon={<Arrow />} icon={<Arrow />}
onClick={() => onClick={() =>
router.push('/website/[...id]', `/website/${websiteId}/${name}`, { router.push('/website/[...id]', `/website/${websiteId}/${title}`, {
shallow: true, shallow: true,
}) })
} }