import { createLineChart } from 'carbon-uplot';

createLineChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
});

import 'carbon-uplot/web-components';

// <cu-line-chart></cu-line-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];

import { LineChart } from 'carbon-uplot/react';
// React 19+ users can use the Custom Element API directly.

<LineChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
/>

import { createLineChart } from 'carbon-uplot';

createLineChart(el, {
  data: [timestamps, cpuSeriesC],
  yRange: [0, 100],
  series: [{ label: 'CPU' }],
});

import 'carbon-uplot/web-components';

// <cu-line-chart></cu-line-chart>
el.data = [timestamps, cpuSeriesC];
el.yRange = [0, 100];
el.series = [{ label: 'CPU' }];

import { LineChart } from 'carbon-uplot/react';

<LineChart
  data={[timestamps, cpuSeriesC]}
  yRange={[0, 100]}
  series={[{ label: 'CPU' }]}
/>

import { createLineChart } from 'carbon-uplot';

createLineChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
  legend: 'top',
});

import 'carbon-uplot/web-components';

// <cu-line-chart legend="top"></cu-line-chart>
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];

import { LineChart } from 'carbon-uplot/react';

<LineChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
  legend="top"
/>

import { createLineChart } from 'carbon-uplot';

createLineChart(el, {
  data: [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC],
  yRange: [0, 100],
  series: [
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ],
  legend: false,
});

import 'carbon-uplot/web-components';

// <cu-line-chart></cu-line-chart>
el.legend = false;
el.data = [timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC];
el.yRange = [0, 100];
el.series = [
  { label: 'prod-vsi-01' },
  { label: 'prod-vsi-02' },
  { label: 'prod-vsi-03' },
];

import { LineChart } from 'carbon-uplot/react';

<LineChart
  data={[timestamps, cpuSeriesA, cpuSeriesB, cpuSeriesC]}
  yRange={[0, 100]}
  series={[
    { label: 'prod-vsi-01' },
    { label: 'prod-vsi-02' },
    { label: 'prod-vsi-03' },
  ]}
  legend={false}
/>

import { createLineChart } from 'carbon-uplot';

createLineChart(el, {
  data: [timestamps, diskReads, diskWrites, diskAwait],
  yRange: [0, 350],
  series: [
    { label: 'reads/s', color: '#ff7eb6' },
    { label: 'writes/s', color: '#42be65' },
    { label: 'await (ms)', color: '#f1c21b' },
  ],
});

import 'carbon-uplot/web-components';

// <cu-line-chart></cu-line-chart>
el.data = [timestamps, diskReads, diskWrites, diskAwait];
el.yRange = [0, 350];
el.series = [
  { label: 'reads/s', color: '#ff7eb6' },
  { label: 'writes/s', color: '#42be65' },
  { label: 'await (ms)', color: '#f1c21b' },
];

import { LineChart } from 'carbon-uplot/react';

<LineChart
  data={[timestamps, diskReads, diskWrites, diskAwait]}
  yRange={[0, 350]}
  series={[
    { label: 'reads/s', color: '#ff7eb6' },
    { label: 'writes/s', color: '#42be65' },
    { label: 'await (ms)', color: '#f1c21b' },
  ]}
/>

import { createLineChart } from 'carbon-uplot';

function networkFormat(value) {
  if (value >= 1_048_576) return `${(value / 1_048_576).toFixed(1)} MB/s`;
  return `${(value / 1024).toFixed(0)} KB/s`;
}

createLineChart(el, {
  data: [timestamps, netInbound, netOutbound],
  series: [{ label: 'Inbound' }, { label: 'Outbound' }],
  valueFormat: networkFormat,
});

import 'carbon-uplot/web-components';

function networkFormat(value) {
  if (value >= 1_048_576) return `${(value / 1_048_576).toFixed(1)} MB/s`;
  return `${(value / 1024).toFixed(0)} KB/s`;
}

// <cu-line-chart></cu-line-chart>
el.data = [timestamps, netInbound, netOutbound];
el.series = [{ label: 'Inbound' }, { label: 'Outbound' }];
el.valueFormat = networkFormat;

import { LineChart } from 'carbon-uplot/react';

function networkFormat(value) {
  if (value >= 1_048_576) return `${(value / 1_048_576).toFixed(1)} MB/s`;
  return `${(value / 1024).toFixed(0)} KB/s`;
}

<LineChart
  data={[timestamps, netInbound, netOutbound]}
  series={[{ label: 'Inbound' }, { label: 'Outbound' }]}
  valueFormat={networkFormat}
/>