@grafana/ui/dist/esm/components/Gauge/Gauge.mjs.map

Grafana Components Library

{"version":3,"file":"Gauge.mjs","sources":["../../../../src/components/Gauge/Gauge.tsx"],"sourcesContent":["import $ from 'jquery';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\n\nimport {\n  DisplayValue,\n  formattedValueToString,\n  FieldConfig,\n  ThresholdsMode,\n  GAUGE_DEFAULT_MAXIMUM,\n  GAUGE_DEFAULT_MINIMUM,\n  GrafanaTheme2,\n  FieldColorModeId,\n  FALLBACK_COLOR,\n} from '@grafana/data';\nimport { VizTextDisplayOptions, VizOrientation, Threshold } from '@grafana/schema';\n\nimport { calculateFontSize } from '../../utils/measureText';\nimport { clearButtonStyles } from '../Button/Button';\n\nimport { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils';\n\nexport interface Props {\n  height: number;\n  field: FieldConfig;\n  showThresholdMarkers: boolean;\n  showThresholdLabels: boolean;\n  width: number;\n  value: DisplayValue;\n  text?: VizTextDisplayOptions;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  className?: string;\n  theme: GrafanaTheme2;\n  orientation?: VizOrientation;\n}\n\nexport class Gauge extends PureComponent<Props> {\n  canvasElement: HTMLDivElement | null = null;\n\n  static defaultProps: Partial<Props> = {\n    showThresholdMarkers: true,\n    showThresholdLabels: false,\n    field: {\n      min: 0,\n      max: 100,\n      thresholds: DEFAULT_THRESHOLDS,\n    },\n  };\n\n  componentDidMount() {\n    this.draw();\n  }\n\n  componentDidUpdate() {\n    this.draw();\n  }\n\n  draw() {\n    const { field, showThresholdLabels, showThresholdMarkers, width, height, theme, value, orientation } = this.props;\n\n    const autoProps = calculateGaugeAutoProps(width, height, value.title);\n    // If the gauge is in vertical layout, we need to set the width of the gauge to the height of the gauge\n    const calculatedGaugeWidth = orientation === VizOrientation.Vertical ? autoProps.gaugeHeight : width;\n    const dimension = Math.min(calculatedGaugeWidth, autoProps.gaugeHeight);\n    const backgroundColor = theme.colors.background.secondary;\n    const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;\n    const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;\n    const thresholdMarkersWidth = gaugeWidth / 5;\n    const text = formattedValueToString(value);\n    // This not 100% accurate as I am unsure of flot's calculations here\n    const valueWidthBase = Math.min(calculatedGaugeWidth, dimension * 1.3) * 0.9;\n    // remove gauge & marker width (on left and right side)\n    // and 10px is some padding that flot adds to the outer canvas\n    const valueWidth =\n      valueWidthBase -\n      ((gaugeWidth + (showThresholdMarkers ? thresholdMarkersWidth : 0) + (showThresholdLabels ? 10 : 0)) * 2 + 10);\n    const fontSize = this.props.text?.valueSize ?? calculateFontSize(text, valueWidth, dimension, 1, gaugeWidth * 1.7);\n    const thresholdLabelFontSize = Math.max(fontSize / 2.5, 12);\n\n    let min = field.min ?? GAUGE_DEFAULT_MINIMUM;\n    let max = field.max ?? GAUGE_DEFAULT_MAXIMUM;\n    let numeric = value.numeric;\n\n    if (field.thresholds?.mode === ThresholdsMode.Percentage) {\n      min = 0;\n      max = 100;\n      if (value.percent === undefined) {\n        numeric = ((numeric - min) / (max - min)) * 100;\n      } else {\n        numeric = value.percent! * 100;\n      }\n    }\n\n    const decimals = field.decimals === undefined ? 2 : field.decimals!;\n\n    if (showThresholdMarkers) {\n      min = +min.toFixed(decimals);\n      max = +max.toFixed(decimals);\n    }\n\n    let thresholds: Threshold[] = [];\n\n    if (field.color?.mode === FieldColorModeId.Thresholds) {\n      thresholds = getFormattedThresholds(decimals, field, theme);\n    } else {\n      thresholds = [{ value: field.min ?? GAUGE_DEFAULT_MINIMUM, color: value.color ?? FALLBACK_COLOR }];\n    }\n\n    const options = {\n      series: {\n        gauges: {\n          gauge: {\n            min,\n            max,\n            neutralValue: field.custom?.neutral,\n            background: { color: backgroundColor },\n            border: { color: null },\n            shadow: { show: false },\n            width: gaugeWidth,\n          },\n          frame: { show: false },\n          label: { show: false },\n          layout: { margin: 0, thresholdWidth: 0, vMargin: 0 },\n          cell: { border: { width: 0 } },\n          threshold: {\n            values: thresholds,\n            label: {\n              show: showThresholdLabels,\n              margin: thresholdMarkersWidth + 1,\n              font: { size: thresholdLabelFontSize },\n            },\n            show: showThresholdMarkers && thresholds.length > 1,\n            width: thresholdMarkersWidth,\n          },\n          value: {\n            color: value.color,\n            formatter: () => {\n              return text;\n            },\n            font: { size: fontSize, family: theme.typography.fontFamily },\n          },\n          show: true,\n        },\n      },\n    };\n\n    const plotSeries = {\n      data: [[0, numeric]],\n      label: value.title,\n    };\n\n    try {\n      if (this.canvasElement) {\n        $.plot(this.canvasElement, [plotSeries], options);\n      }\n    } catch (err) {\n      console.error('Gauge rendering error', err, options, value);\n    }\n  }\n\n  renderVisualization = () => {\n    const { width, value, height, onClick, text, theme, orientation } = this.props;\n    const autoProps = calculateGaugeAutoProps(width, height, value.title, orientation);\n\n    // If the gauge is in vertical layout, we need to set the width of the gauge to the height of the gauge\n    const gaugeWidth = orientation === VizOrientation.Vertical ? `${autoProps.gaugeHeight}px` : '100%';\n\n    const gaugeElement = (\n      <div\n        style={{ height: `${autoProps.gaugeHeight}px`, width: gaugeWidth }}\n        ref={(element) => (this.canvasElement = element)}\n      />\n    );\n\n    return (\n      <>\n        {onClick ? (\n          <button className={clearButtonStyles(theme)} type=\"button\" onClick={onClick}>\n            {gaugeElement}\n          </button>\n        ) : (\n          gaugeElement\n        )}\n        {autoProps.showLabel && (\n          <div\n            style={{\n              textAlign: 'center',\n              fontSize: text?.titleSize ?? autoProps.titleFontSize,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              position: 'relative',\n              width: gaugeWidth,\n              top: '-4px',\n              cursor: 'default',\n            }}\n          >\n            {value.title}\n          </div>\n        )}\n      </>\n    );\n  };\n\n  render() {\n    return (\n      <div\n        style={{\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexDirection: 'column',\n          justifyContent: 'center',\n          overflow: 'hidden',\n        }}\n        className={this.props.className}\n      >\n        {this.renderVisualization()}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}