Lines and areas ​

Two time series, an area, a cursor, a tooltip and a clickable legend. The wheel zooms, dragging pans.

ts
import {
  D3PAreaRenderer, D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PChart,
  D3PCursorIndicator, d3pDomLegend, d3pDomTooltip, D3PLegendBundle, D3PLineRenderer, D3PPanTool, D3PResetTool,
  D3PSeries, D3PToolbox, D3PTooltip, D3PWheelZoomTool, getGlobalBus,
} from 'd3pict'
// your series data: replace these generators with your own values
import { timeSeries, walk } from './data'

const bus = getGlobalBus()

const container = document.getElementById('app')! // any element with a size: the chart fills it

const cpuData = timeSeries(walk(1, 240, 40, 12))
const memData = timeSeries(walk(2, 240, 60, 6))

const dx = new D3PAxisDomain({ bus, domain: [cpuData[0][0], cpuData[cpuData.length - 1][0]] })
const dy = new D3PAxisDomain({ bus, domain: [0, 100] })
const cpu = new D3PSeries({ bus, name: 'cpu', data: cpuData })
const mem = new D3PSeries({ bus, name: 'memory', data: memData })

// the domains follow the data
const auto = new D3PAutoDomain({ bus })
auto.linkSeries(cpu, [dx, dy])
auto.linkSeries(mem, [dx, dy])

const x = new D3PAxis({ bus, name: 'x', domain: dx, scaleType: 'time' })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { displayName: 'usage', tickFormat: (v) => `${Math.round(v)} %`, grid: { enabled: true } } })

// the line of the same series shows the point under the pointer: the area needs no marker of its own
const area = new D3PAreaRenderer({ bus, series: cpu, name: 'cpu area', marker: false, props: { style: { color: '#4e79a7', opacity: 0.2 } } })
const cpuLine = new D3PLineRenderer({ bus, series: cpu, props: { style: { color: '#4e79a7' } } })
const memLine = new D3PLineRenderer({ bus, series: mem, props: { style: { color: '#e15759' } } })

const cursor = new D3PCursorIndicator({ bus })
const tooltip = new D3PTooltip({ bus, series: [cpuLine, memLine] })
const legend = new D3PLegendBundle({ bus, series: [cpuLine, memLine] })

const toolbox = new D3PToolbox({ bus })
toolbox.addTool(new D3PPanTool({ bus }))
toolbox.addTool(new D3PWheelZoomTool({ bus }))
toolbox.addTool(new D3PResetTool({ bus }))
for (const name of ['pan', 'wheel-zoom', 'reset']) toolbox.setToolActive(name)

// what goes on the chart, and the margin the axes need
const objects = [x, y, area, cpuLine, memLine, cursor, tooltip, legend, toolbox]
const margin = { left: 60 }

const chart = new D3PChart({ container, bus, margin })
const stopArea = d3pAutoInteractionArea(chart) // before the objects: the tools, the cursor and the tooltip ask for an interaction area
objects.forEach((o) => o.addToChart(chart))
const stopTooltip = d3pDomTooltip(tooltip)
const stopLegend = d3pDomLegend(legend)