<mndw-line-chart>

The line chart plots receive and transmit throughput on the same ten-minute time axis. Its arrays and domain are assigned as DOM properties.

Examples

import type {MndwChartSeries} from '@mndw/ui';

// Value imports from @mndw/ui are dynamic: a static one would evaluate the custom elements during the
// docs SSR build, where HTMLElement does not exist. The theme has already loaded @mndw/ui by now.

const START_TIME = 1_730_000_000_000;
const MINUTE = 60_000;

export function mount(root: HTMLElement): void {
  const chart = document.createElement('mndw-line-chart');
  const rxValues = [1800, 2200, 2000, 3400, 2800, 4200, 3800, 5500, 4800, 6200, 5800];
  const txValues = [800, 1200, 1000, 1700, 1500, 2100, 1900, 2500, 2200, 3100, 2700];
  const toPoints = (values: readonly number[]): {time: number; value: number}[] => {
    return values.map((value, index) => ({time: START_TIME + index * MINUTE, value}));
  };
  const series: MndwChartSeries[] = [
    {id: 'rx', label: 'RX', color: 'accent', fill: true, data: toPoints(rxValues)},
    {id: 'tx', label: 'TX', color: 'success', data: toPoints(txValues)},
  ];

  chart.setAttribute('aria-label', 'Receive and transmit throughput over ten minutes');
  chart.style.width = '100%';
  void import('@mndw/ui').then(({formatSpeed, getSpeedUpperLimit}) => {
    chart.valueFormatter = formatSpeed;
    chart.valueDomain = {min: 0, max: getSpeedUpperLimit(Math.max(...rxValues, ...txValues))};
    chart.tooltipFormatter = ({samples}) => {
      const receive = samples.find((sample) => sample.seriesId === 'rx');
      const total = samples.reduce((sum, sample) => sum + sample.value, 0);

      return {
        rows: [
          {label: 'RX', value: formatSpeed(receive?.value ?? 0)},
          {label: 'Combined', value: formatSpeed(total)},
        ],
      };
    };
    chart.series = series;
    chart.domain = {start: START_TIME, end: START_TIME + 10 * MINUTE};
    root.appendChild(chart);
  });
}

Reference

series is a property containing MndwChartSeries[]. Each series has an id, optional label, a color (accent, success, warning, or muted), and timestamped {time, value} points. time is epoch milliseconds; MndwChartPoint requires it. Set domain to {start, end} to control the displayed time range. series, domain, and formatter callbacks are property-only; replace arrays with new references when data changes. *Props interfaces are optional assignment bags, while initialized elements have concrete defaults.

Line values default to locale-aware numbers, and the Y domain uses a rounded ceiling based on the data. Set valueFormatter(value) and valueDomain to opt into units such as network speed; getSpeedUpperLimit(max) keeps the existing 5000 minimum for speed axes. For example, set valueFormatter = formatSpeed and valueDomain = {min: 0, max: getSpeedUpperLimit(maxValue)}. timeFormatter(epochMs) customizes time labels. Use value-label and empty-label for chart text. The chart has role="img"; an authored aria-label wins, otherwise its accessible name uses each series' label or id. The container, plot, grid, axis, tooltip, and empty parts are available for styling. Tooltips stay local to the plot; redrawing data clears stale tooltip state without replaying it until the pointer moves again. Import formatSpeed and getSpeedUpperLimit from @mndw/ui for speed axes.

tooltipFormatter(context) is a property-only callback. It receives hovered time and raw samples for each series with finite points; return {title?, rows} to replace the body, or null to hide the tooltip while keeping the cursor. An omitted title uses timeFormatter(time). Formatter errors are logged and fall back to the default tooltip.