import { createHeatmap } from 'carbon-uplot';

const BUCKET_LABELS = ['0–10ms', '10–25ms', '25–50ms',
  '50–100ms', '100–250ms', '250–500ms', '500ms+'];

createHeatmap(el, {
  data: [timestamps, ...buckets],
  bucketLabels: BUCKET_LABELS,
});

import 'carbon-uplot/web-components';

// <cu-heatmap></cu-heatmap>
el.bucketLabels = BUCKET_LABELS;
el.data = [timestamps, ...buckets];

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

<Heatmap
  data={[timestamps, ...buckets]}
  bucketLabels={BUCKET_LABELS}
/>

import { createHeatmap } from 'carbon-uplot';

createHeatmap(el, {
  data: [timestamps, ...buckets],
  bucketLabels: BUCKET_LABELS,
  color: '#3ddbd9',
});

import 'carbon-uplot/web-components';

// <cu-heatmap color="#3ddbd9"></cu-heatmap>
el.bucketLabels = BUCKET_LABELS;
el.data = [timestamps, ...buckets];

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

<Heatmap
  data={[timestamps, ...buckets]}
  bucketLabels={BUCKET_LABELS}
  color="#3ddbd9"
/>