From a4dac3577108cf15599b9f3caca86c4b9e5a7865 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Wed, 2 Sep 2020 09:56:29 -0700 Subject: [PATCH 1/4] Responsive chart labels. --- components/metrics/BarChart.js | 37 ++++++++++++++++++----------- components/metrics/WebsiteHeader.js | 2 +- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js index 9caa96d1..8bc47cce 100644 --- a/components/metrics/BarChart.js +++ b/components/metrics/BarChart.js @@ -4,7 +4,7 @@ import classNames from 'classnames'; import ChartJS from 'chart.js'; import styles from './BarChart.module.css'; import { format } from 'date-fns'; -import { formatLongNumber } from '../../lib/format'; +import { formatLongNumber } from 'lib/format'; export default function BarChart({ chartId, @@ -22,30 +22,39 @@ export default function BarChart({ const chart = useRef(); const [tooltip, setTooltip] = useState({}); - const renderXLabel = (label, index, values) => { + function renderXLabel(label, index, values) { const d = new Date(values[index].value); - const n = records; + const w = canvas.current.width; switch (unit) { case 'hour': return format(d, 'ha'); case 'day': - if (n >= 15) { - return index % ~~(n / 15) === 0 ? format(d, 'MMM d') : ''; + if (records > 31) { + 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'); case 'month': + if (w <= 660) { + return format(d, 'MMM'); + } return format(d, 'MMMM'); default: return label; } - }; + } - const renderYLabel = label => { + function renderYLabel(label) { return +label > 1 ? formatLongNumber(label) : label; - }; + } - const renderTooltip = model => { + function renderTooltip(model) { const { opacity, title, body, labelColors } = model; if (!opacity) { @@ -60,9 +69,9 @@ export default function BarChart({ labelColor: labelColors[0].backgroundColor, }); } - }; + } - const createChart = () => { + function createChart() { const options = { animation: { duration: animationDuration, @@ -119,9 +128,9 @@ export default function BarChart({ }, options, }); - }; + } - const updateChart = () => { + function updateChart() { const { options } = chart.current; options.scales.xAxes[0].time.unit = unit; @@ -129,7 +138,7 @@ export default function BarChart({ options.animation.duration = animationDuration; onUpdate(chart.current); - }; + } useEffect(() => { if (datasets) { diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index 8b01626d..bb00fed0 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -21,7 +21,7 @@ export default function WebsiteHeader({ websiteId, title, showLink = false }) {