import { createBarGauge } from 'carbon-uplot';

createBarGauge(el, {
  series: [
    { label: 'prod-db-primary', value: 82 },
    { label: 'prod-db-replica-1', value: 45 },
    { label: 'prod-db-replica-2', value: 91 },
    { label: 'prod-web-01', value: 34 },
    { label: 'prod-web-02', value: 67 },
  ],
  valueFormat: (v) => `${v}%`,
});

import 'carbon-uplot/web-components';

// <cu-bar-gauge></cu-bar-gauge>
el.series = [
  { label: 'prod-db-primary', value: 82 },
  { label: 'prod-db-replica-1', value: 45 },
  { label: 'prod-db-replica-2', value: 91 },
  { label: 'prod-web-01', value: 34 },
  { label: 'prod-web-02', value: 67 },
];
el.valueFormat = (v) => `${v}%`;

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

const series = useMemo(() => [
  { label: 'prod-db-primary', value: 82 },
  { label: 'prod-db-replica-1', value: 45 },
  { label: 'prod-db-replica-2', value: 91 },
  { label: 'prod-web-01', value: 34 },
  { label: 'prod-web-02', value: 67 },
], []);

<BarGauge
  series={series}
  valueFormat={(v) => `${v}%`}
/>

import { createBarGauge } from 'carbon-uplot';

createBarGauge(el, {
  series: [
    { label: 'prod-db-primary', value: 82 },
    { label: 'prod-db-replica-1', value: 45 },
    { label: 'prod-db-replica-2', value: 91 },
    { label: 'prod-web-01', value: 34 },
    { label: 'prod-web-02', value: 67 },
  ],
  thresholds: [
    { value: 70, status: 'warning' },
    { value: 85, status: 'error' },
  ],
  valueFormat: (v) => `${v}%`,
});

import 'carbon-uplot/web-components';

// <cu-bar-gauge></cu-bar-gauge>
el.series = [
  { label: 'prod-db-primary', value: 82 },
  { label: 'prod-db-replica-1', value: 45 },
  { label: 'prod-db-replica-2', value: 91 },
  { label: 'prod-web-01', value: 34 },
  { label: 'prod-web-02', value: 67 },
];
el.thresholds = [
  { value: 70, status: 'warning' },
  { value: 85, status: 'error' },
];
el.valueFormat = (v) => `${v}%`;

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

const series = useMemo(() => [
  { label: 'prod-db-primary', value: 82 },
  { label: 'prod-db-replica-1', value: 45 },
  { label: 'prod-db-replica-2', value: 91 },
  { label: 'prod-web-01', value: 34 },
  { label: 'prod-web-02', value: 67 },
], []);
const thresholds = useMemo(() => [
  { value: 70, status: 'warning' },
  { value: 85, status: 'error' },
], []);

<BarGauge
  series={series}
  thresholds={thresholds}
  valueFormat={(v) => `${v}%`}
/>

import { createBarGauge } from 'carbon-uplot';

createBarGauge(el, {
  series: [
    { label: 'prod-db-primary', value: 98.2 },
    { label: 'prod-db-replica-1', value: 87.5 },
    { label: 'prod-db-replica-2', value: 99.9 },
    { label: 'prod-web-01', value: 76.1 },
    { label: 'prod-web-02', value: 94.3 },
  ],
  thresholds: [
    { value: 80, status: 'error' },
    { value: 95, status: 'warning' },
  ],
  inverted: true,
  valueFormat: (v) => `${v.toFixed(1)}%`,
});

import 'carbon-uplot/web-components';

// <cu-bar-gauge></cu-bar-gauge>
el.series = [
  { label: 'prod-db-primary', value: 98.2 },
  { label: 'prod-db-replica-1', value: 87.5 },
  { label: 'prod-db-replica-2', value: 99.9 },
  { label: 'prod-web-01', value: 76.1 },
  { label: 'prod-web-02', value: 94.3 },
];
el.thresholds = [
  { value: 80, status: 'error' },
  { value: 95, status: 'warning' },
];
el.inverted = true;
el.valueFormat = (v) => `${v.toFixed(1)}%`;

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

const series = useMemo(() => [...], []);
const thresholds = useMemo(() => [
  { value: 80, status: 'error' },
  { value: 95, status: 'warning' },
], []);

<BarGauge
  series={series}
  thresholds={thresholds}
  inverted
  valueFormat={(v) => `${v.toFixed(1)}%`}
/>

import { createBarGauge } from 'carbon-uplot';

createBarGauge(el, {
  series: [
    { label: 'prod-db-primary', value: 380 },
    { label: 'prod-db-replica-1', value: 215 },
    { label: 'prod-db-replica-2', value: 450 },
    { label: 'prod-web-01', value: 67 },
    { label: 'prod-web-02', value: 124 },
  ],
  max: 500,
  color: '#3ddbd9',
  valueFormat: (v) => `${v} GB`,
});

import 'carbon-uplot/web-components';

// <cu-bar-gauge color="#3ddbd9"></cu-bar-gauge>
el.series = [
  { label: 'prod-db-primary', value: 380 },
  { label: 'prod-db-replica-1', value: 215 },
  { label: 'prod-db-replica-2', value: 450 },
  { label: 'prod-web-01', value: 67 },
  { label: 'prod-web-02', value: 124 },
];
el.max = 500;
el.valueFormat = (v) => `${v} GB`;

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

const series = useMemo(() => [...], []);

<BarGauge
  series={series}
  max={500}
  color="#3ddbd9"
  valueFormat={(v) => `${v} GB`}
/>

import { createBarGauge } from 'carbon-uplot';

createBarGauge(el, {
  series: [{ label: 'Heap used', value: 430 }],
  max: 512,
  valueFormat: (v) => `${v} MB`,
});

import 'carbon-uplot/web-components';

// <cu-bar-gauge></cu-bar-gauge>
el.series = [{ label: 'Heap used', value: 430 }];
el.max = 512;
el.valueFormat = (v) => `${v} MB`;

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

const series = useMemo(() => [
  { label: 'Heap used', value: 430 },
], []);

<BarGauge
  series={series}
  max={512}
  valueFormat={(v) => `${v} MB`}
/>