Titres et légende ​

Un titre avec un sous-titre, des titres sur les axes et une légende sous le tracé. Chacun est un composant ajouté au graphique, et prend sa place sur le tracé.

ts
import {
  D3PAreaRenderer, D3PAutoDomain, d3pAutoInteractionArea, D3PAxis, D3PAxisDomain, D3PAxisTitle, D3PChart,
  D3PCursorIndicator, d3pDomTooltip, D3PLegendPanel, D3PLineRenderer, D3PSeries, D3PTitle, D3PTooltip,
  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 })
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', props: { displayName: 'time' } })
const y = new D3PAxis({ bus, name: 'y', domain: dy, position: 'left', props: { displayName: 'usage (%)', grid: { enabled: true } } })
const cpuArea = 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' } } })

// each of these reserves room around the plot: the plot gets smaller by as much
const title = new D3PTitle({ bus, props: { text: 'Server load', subtitle: 'cpu and memory over the last four hours' } })
const xTitle = new D3PAxisTitle({ bus, axis: x })
const yTitle = new D3PAxisTitle({ bus, axis: y }) // the text is the display name of the axis, unless `props.text` says otherwise
const legendPanel = new D3PLegendPanel({ bus, placement: 'bottom', series: [cpuLine, memLine] })

const cursor = new D3PCursorIndicator({ bus })
const tooltip = new D3PTooltip({ bus, series: [cpuLine, memLine] })
const objects = [x, y, cpuArea, cpuLine, memLine, title, xTitle, yTitle, legendPanel, cursor, tooltip]

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

Ce qu'il montre ​

  • D3PTitle met un titre et un sous-titre au-dessus du tracé.
  • D3PAxisTitle met un titre sur un axe, de son côté. Sans props.text, il écrit le nom affiché de l'axe.
  • D3PLegendPanel liste les rendus sous le tracé (placement choisit le côté, ou un coin du tracé) ; un clic sur une entrée montre ou cache son rendu.
  • Aucun n'est là si vous ne l'ajoutez pas. Le guide de la mise en page dit comment ils réservent leur place, et comment écrire un titre ou une légende à vous avec les mêmes pièces.