src/main.js
import './styles.css'
import { metrics, performanceData } from './data.js'
import { createBarChart } from './chart.js'
const chartRoot = document.querySelector('#chart-root')
const metricButtons = document.querySelectorAll('[data-metric]')
const summaryLabel = document.querySelector('#summary-label')
const summaryValue = document.querySelector('#summary-value')
const summaryChange = document.querySelector('#summary-change')
const bestPeriod = document.querySelector('#best-period')
const averageValue = document.querySelector('#average-value')
const chartTitle = document.querySelector('#chart-title')
const chartStatus = document.querySelector('#chart-status')
if (!(chartRoot instanceof HTMLElement) || !(chartStatus instanceof HTMLElement)) {
throw new Error('Chart elements were not found')
}
const chart = createBarChart({
container: chartRoot,
data: performanceData,
metrics,
initialMetric: 'revenue',
})
function selectMetric(metricKey) {
const metric = metrics[metricKey]
if (!metric) return
const values = performanceData.map((item) => item[metricKey])
const latest = values.at(-1) ?? 0
const first = values[0] ?? 0
const average = values.reduce((total, value) => total + value, 0) / values.length
const best = performanceData.reduce((leader, item) =>
item[metricKey] > leader[metricKey] ? item : leader
)
const change = Math.round(((latest - first) / first) * 100)
chart.update(metricKey)
summaryLabel.textContent = metric.summaryLabel
summaryValue.textContent = metric.format(latest)
summaryChange.textContent = `↑ ${change}% since January`
bestPeriod.textContent = best.period
averageValue.textContent = metric.format(Math.round(average))
chartTitle.textContent = `${metric.label} by month`
chartStatus.textContent = `Showing ${metric.label.toLowerCase()}`
metricButtons.forEach((button) => {
const isActive = button.getAttribute('data-metric') === metricKey
button.classList.toggle('is-active', isActive)
button.setAttribute('aria-pressed', String(isActive))
})
}
metricButtons.forEach((button) => {
button.addEventListener('click', () => {
selectMetric(button.getAttribute('data-metric'))
})
})
selectMetric('revenue')
window.addEventListener('pagehide', () => chart.destroy(), { once: true })
src/chart.js
import {
axisBottom,
axisLeft,
easeCubicOut,
max,
scaleBand,
scaleLinear,
select,
} from 'd3'
export function createBarChart({ container, data, metrics, initialMetric }) {
const svg = select(container).select('#performance-chart')
const tooltip = select(container).select('[data-chart-tooltip]')
const plot = svg.append('g')
const xAxisGroup = plot.append('g').attr('class', 'axis axis-x')
const yAxisGroup = plot.append('g').attr('class', 'axis axis-y')
const gridGroup = plot.append('g').attr('class', 'grid-lines')
const barsGroup = plot.append('g').attr('class', 'bars')
let metricKey = initialMetric
let animationFrame = 0
let hasRendered = false
function render() {
const metric = metrics[metricKey]
const width = Math.max(container.clientWidth, 360)
const height = width < 620 ? 350 : 430
const margin = {
top: 18,
right: width < 620 ? 12 : 24,
bottom: 42,
left: width < 620 ? 48 : 62,
}
const innerWidth = width - margin.left - margin.right
const innerHeight = height - margin.top - margin.bottom
svg.attr('viewBox', `0 0 ${width} ${height}`)
plot.attr('transform', `translate(${margin.left},${margin.top})`)
const x = scaleBand()
.domain(data.map((item) => item.short))
.range([0, innerWidth])
.padding(0.28)
const ceiling = Number(max(data, (item) => item[metricKey]) ?? 0)
const y = scaleLinear()
.domain([0, ceiling * 1.12])
.nice()
.range([innerHeight, 0])
const transition = svg
.transition()
.duration(hasRendered ? 550 : 750)
.ease(easeCubicOut)
xAxisGroup
.attr('transform', `translate(0,${innerHeight})`)
.transition(transition)
.call(axisBottom(x).tickSizeOuter(0))
yAxisGroup
.transition(transition)
.call(axisLeft(y).ticks(5).tickFormat(metric.tickFormat))
gridGroup
.selectAll('line')
.data(y.ticks(5))
.join('line')
.attr('x1', 0)
.attr('x2', innerWidth)
.transition(transition)
.attr('y1', (value) => y(value))
.attr('y2', (value) => y(value))
const bars = barsGroup
.selectAll('rect')
.data(data, (item) => item.period)
.join(
(enter) =>
enter
.append('rect')
.attr('class', 'bar')
.attr('x', (item) => x(item.short))
.attr('width', x.bandwidth())
.attr('y', innerHeight)
.attr('height', 0)
.attr('rx', 7),
(update) => update,
(exit) => exit.transition(transition).attr('height', 0).remove(),
)
.attr('data-period', (item) => item.short)
.attr('data-value', (item) => item[metricKey])
.attr('tabindex', 0)
.attr('role', 'graphics-symbol')
.attr('aria-label', (item) =>
`${item.period}: ${metric.format(item[metricKey])}`
)
.on('pointerenter focus', function (event, item) {
select(this).classed('is-highlighted', true)
container.dataset.hovered = item.period
tooltip
.classed('is-visible', true)
.text(`${item.period} · ${metric.format(item[metricKey])}`)
positionTooltip(event)
})
.on('pointermove', positionTooltip)
.on('pointerleave blur', function () {
select(this).classed('is-highlighted', false)
delete container.dataset.hovered
tooltip.classed('is-visible', false)
})
bars
.transition(transition)
.delay((item, index) => (hasRendered ? 0 : index * 45))
.attr('x', (item) => x(item.short))
.attr('width', x.bandwidth())
.attr('y', (item) => y(item[metricKey]))
.attr('height', (item) => innerHeight - y(item[metricKey]))
.attr('fill', metric.accent)
container.dataset.chartReady = 'true'
container.dataset.metric = metricKey
hasRendered = true
}
function positionTooltip(event) {
if (!event || typeof event.clientX !== 'number') return
const bounds = container.getBoundingClientRect()
tooltip
.style('left', `${event.clientX - bounds.left}px`)
.style('top', `${event.clientY - bounds.top}px`)
}
const resizeObserver = new ResizeObserver(() => {
cancelAnimationFrame(animationFrame)
animationFrame = requestAnimationFrame(render)
})
resizeObserver.observe(container)
render()
return {
update(nextMetric) {
if (!metrics[nextMetric]) return
metricKey = nextMetric
render()
},
destroy() {
cancelAnimationFrame(animationFrame)
resizeObserver.disconnect()
svg.interrupt()
svg.selectAll('*').interrupt()
},
}
}