1import React, { FC } from 'react';
2import { ThresholdsConfig, ThresholdsMode, VizOrientation, getFieldConfigWithMinMax } from '@grafana/data';
3import { BarGauge, BarGaugeDisplayMode } from '../BarGauge/BarGauge';
4import { TableCellProps, TableCellDisplayMode } from './types';
5
6const defaultScale: ThresholdsConfig = {
7  mode: ThresholdsMode.Absolute,
8  steps: [
9    {
10      color: 'blue',
11      value: -Infinity,
12    },
13    {
14      color: 'green',
15      value: 20,
16    },
17  ],
18};
19
20export const BarGaugeCell: FC<TableCellProps> = (props) => {
21  const { field, innerWidth, tableStyles, cell, cellProps } = props;
22
23  let config = getFieldConfigWithMinMax(field, false);
24  if (!config.thresholds) {
25    config = {
26      ...config,
27      thresholds: defaultScale,
28    };
29  }
30
31  const displayValue = field.display!(cell.value);
32  let barGaugeMode = BarGaugeDisplayMode.Gradient;
33
34  if (field.config.custom && field.config.custom.displayMode === TableCellDisplayMode.LcdGauge) {
35    barGaugeMode = BarGaugeDisplayMode.Lcd;
36  } else if (field.config.custom && field.config.custom.displayMode === TableCellDisplayMode.BasicGauge) {
37    barGaugeMode = BarGaugeDisplayMode.Basic;
38  }
39
40  return (
41    <div {...cellProps} className={tableStyles.cellContainer}>
42      <BarGauge
43        width={innerWidth}
44        height={tableStyles.cellHeightInner}
45        field={config}
46        display={field.display}
47        text={{ valueSize: 14 }}
48        value={displayValue}
49        orientation={VizOrientation.Horizontal}
50        theme={tableStyles.theme}
51        itemSpacing={1}
52        lcdCellWidth={8}
53        displayMode={barGaugeMode}
54      />
55    </div>
56  );
57};
58