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

Grafana Components Library

{"version":3,"file":"BigValue.mjs","sources":["../../../../src/components/BigValue/BigValue.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { PureComponent } from 'react';\nimport * as React from 'react';\n\nimport { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data';\nimport { PercentChangeColorMode, VizTextDisplayOptions } from '@grafana/schema';\n\nimport { Themeable2 } from '../../types/theme';\nimport { clearButtonStyles } from '../Button/Button';\nimport { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';\n\nimport { buildLayout } from './BigValueLayout';\nimport { PercentChange } from './PercentChange';\n\nexport enum BigValueColorMode {\n  Background = 'background',\n  BackgroundSolid = 'background_solid',\n  None = 'none',\n  Value = 'value',\n}\n\nexport enum BigValueGraphMode {\n  None = 'none',\n  Line = 'line',\n  Area = 'area',\n}\n\nexport enum BigValueJustifyMode {\n  Auto = 'auto',\n  Center = 'center',\n}\n\n/**\n * Options for how the value & title are to be displayed\n */\nexport enum BigValueTextMode {\n  Auto = 'auto',\n  Value = 'value',\n  ValueAndName = 'value_and_name',\n  Name = 'name',\n  None = 'none',\n}\n\nexport interface Props extends Themeable2 {\n  /** Height of the component */\n  height: number;\n  /** Width of the component */\n  width: number;\n  /** Value displayed as Big Value */\n  value: DisplayValue;\n  /** Sparkline values for showing a graph under/behind the value  */\n  sparkline?: FieldSparkline;\n  /** onClick handler for the value */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  /** Custom styling */\n  className?: string;\n  /** Color mode for coloring the value or the background */\n  colorMode: BigValueColorMode;\n  /** Show a graph behind/under the value */\n  graphMode: BigValueGraphMode;\n  /** Auto justify value and text or center it */\n  justifyMode?: BigValueJustifyMode;\n  /** Factors that should influence the positioning of the text  */\n  alignmentFactors?: DisplayValueAlignmentFactors;\n  /** Explicit font size control */\n  text?: VizTextDisplayOptions;\n  /** Specify which text should be visible in the BigValue */\n  textMode?: BigValueTextMode;\n  /** If true disables the tooltip */\n  hasLinks?: boolean;\n  /** Percent change color mode */\n  percentChangeColorMode?: PercentChangeColorMode;\n\n  /**\n   * If part of a series of stat panes, this is the total number.\n   * Used by BigValueTextMode.Auto text mode.\n   */\n  count?: number;\n\n  /**\n   * Disable the wide layout for the BigValue\n   */\n  disableWideLayout?: boolean;\n}\n\nexport class BigValue extends PureComponent<Props> {\n  static defaultProps: Partial<Props> = {\n    justifyMode: BigValueJustifyMode.Auto,\n  };\n\n  render() {\n    const { onClick, className, hasLinks, theme } = this.props;\n    const layout = buildLayout(this.props);\n    const panelStyles = layout.getPanelStyles();\n    const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();\n    const valueStyles = layout.getValueStyles();\n    const titleStyles = layout.getTitleStyles();\n    const textValues = layout.textValues;\n    const percentChange = this.props.value.percentChange;\n    const percentChangeColorMode = this.props.percentChangeColorMode;\n    const showPercentChange = percentChange != null && !Number.isNaN(percentChange);\n\n    // When there is an outer data link this tooltip will override the outer native tooltip\n    const tooltip = hasLinks ? undefined : textValues.tooltip;\n\n    if (!onClick) {\n      return (\n        <div className={className} style={panelStyles} title={tooltip}>\n          <div style={valueAndTitleContainerStyles}>\n            {textValues.title && <div style={titleStyles}>{textValues.title}</div>}\n            <FormattedValueDisplay value={textValues} style={valueStyles} />\n            {showPercentChange && (\n              <PercentChange\n                percentChange={percentChange}\n                styles={layout.getPercentChangeStyles(percentChange, percentChangeColorMode, valueStyles)}\n              />\n            )}\n          </div>\n          {layout.renderChart()}\n        </div>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        className={cx(clearButtonStyles(theme), className)}\n        style={panelStyles}\n        onClick={onClick}\n        title={tooltip}\n      >\n        <div style={valueAndTitleContainerStyles}>\n          {textValues.title && <div style={titleStyles}>{textValues.title}</div>}\n          <FormattedValueDisplay value={textValues} style={valueStyles} />\n        </div>\n        {layout.renderChart()}\n      </button>\n    );\n  }\n}\n"],"names":["BigValueColorMode","BigValueGraphMode","BigValueJustifyMode","BigValueTextMode"],"mappings":"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"}