import { createBarChart } from 'carbon-uplot';

createBarChart(el, {
  data: [dailyTimestamps, dailyRequests],
  series: [{ label: 'Requests' }],
  valueFormat: (value) => value.toLocaleString(),
});

import 'carbon-uplot/web-components';

// <cu-bar-chart></cu-bar-chart>
el.data = [dailyTimestamps, dailyRequests];
el.series = [{ label: 'Requests' }];
el.valueFormat = (value) => value.toLocaleString();

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

<BarChart
  data={[dailyTimestamps, dailyRequests]}
  series={[{ label: 'Requests' }]}
  valueFormat={(value) => value.toLocaleString()}
/>

import { createBarChart } from 'carbon-uplot';

function dayLabel(timestamp) {
  return new Date(timestamp * 1000).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
  });
}

createBarChart(el, {
  data: [dailyTimestamps, dailyErrors],
  series: [{ label: 'Errors' }],
  xFormat: dayLabel,
  valueFormat: (value) => value.toLocaleString(),
});

import 'carbon-uplot/web-components';

function dayLabel(timestamp) {
  return new Date(timestamp * 1000).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
  });
}

// <cu-bar-chart></cu-bar-chart>
el.data = [dailyTimestamps, dailyErrors];
el.series = [{ label: 'Errors' }];
el.xFormat = dayLabel;
el.valueFormat = (value) => value.toLocaleString();

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

function dayLabel(timestamp) {
  return new Date(timestamp * 1000).toLocaleDateString(undefined, {
    month: 'short',
    day: 'numeric',
  });
}

<BarChart
  data={[dailyTimestamps, dailyErrors]}
  series={[{ label: 'Errors' }]}
  xFormat={dayLabel}
  valueFormat={(value) => value.toLocaleString()}
/>

import { createBarChart } from 'carbon-uplot';

createBarChart(el, {
  data: [dailyTimestamps, dailyP99],
  series: [{ label: 'p99 latency' }],
  valueFormat: (value) => `${value.toFixed(0)} ms`,
});

import 'carbon-uplot/web-components';

// <cu-bar-chart></cu-bar-chart>
el.data = [dailyTimestamps, dailyP99];
el.series = [{ label: 'p99 latency' }];
el.valueFormat = (value) => `${value.toFixed(0)} ms`;

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

<BarChart
  data={[dailyTimestamps, dailyP99]}
  series={[{ label: 'p99 latency' }]}
  valueFormat={(value) => `${value.toFixed(0)} ms`}
/>

import { createBarChart } from 'carbon-uplot';

createBarChart(el, {
  data: [dailyTimestamps, dailyRequests, dailyRequestsB, dailyRequestsC],
  series: [
    { label: 'us-east', color: '#4589ff' },
    { label: 'us-south', color: '#ff7eb6' },
    { label: 'eu-de', color: '#42be65' },
  ],
  valueFormat: (value) => value.toLocaleString(),
  legend: 'top',
});

import 'carbon-uplot/web-components';

// <cu-bar-chart legend="top"></cu-bar-chart>
el.data = [dailyTimestamps, dailyRequests, dailyRequestsB, dailyRequestsC];
el.series = [
  { label: 'us-east', color: '#4589ff' },
  { label: 'us-south', color: '#ff7eb6' },
  { label: 'eu-de', color: '#42be65' },
];
el.valueFormat = (value) => value.toLocaleString();

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

<BarChart
  data={[dailyTimestamps, dailyRequests, dailyRequestsB, dailyRequestsC]}
  series={[
    { label: 'us-east', color: '#4589ff' },
    { label: 'us-south', color: '#ff7eb6' },
    { label: 'eu-de', color: '#42be65' },
  ]}
  valueFormat={(value) => value.toLocaleString()}
  legend="top"
/>