@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 { memo, type MouseEventHandler } 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?: 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\n/**\n * Component for showing a value based on a [DisplayValue](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/types/displayValue.ts#L5).\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-bigvalue--docs\n */\nexport const BigValue = memo<Props>((props) => {\n  const { onClick, className, hasLinks, theme, justifyMode = BigValueJustifyMode.Auto } = props;\n\n  const layout = buildLayout({ ...props, justifyMode });\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 = props.value.percentChange;\n  const percentChangeColorMode = 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\nBigValue.displayName = 'BigValue';\n"],"names":["BigValueColorMode","BigValueGraphMode","BigValueJustifyMode","BigValueTextMode"],"mappings":"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"}