@grafana/ui
Version:
Grafana Components Library
1 lines • 4.51 kB
Source Map (JSON)
{"version":3,"file":"BigValue.mjs","sources":["../../../../src/components/BigValue/BigValue.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { memo } from 'react';\n\nimport { clearButtonStyles } from '../Button/Button';\nimport { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';\n\nimport { buildLayout } from './BigValueLayout';\nimport { BigValueJustifyMode, type Props } from './BigValueTypes';\nimport { PercentChange } from './PercentChange';\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":[],"mappings":";;;;;;;;;;AAeO,MAAM,QAAA,GAAW,IAAA,CAAY,CAAC,KAAA,KAAU;AAC7C,EAAA,MAAM,EAAE,SAAS,SAAA,EAAW,QAAA,EAAU,OAAO,WAAA,GAAc,mBAAA,CAAoB,MAAK,GAAI,KAAA;AAExF,EAAA,MAAM,SAAS,WAAA,CAAY,EAAE,GAAG,KAAA,EAAO,aAAa,CAAA;AACpD,EAAA,MAAM,WAAA,GAAc,OAAO,cAAA,EAAe;AAC1C,EAAA,MAAM,4BAAA,GAA+B,OAAO,+BAAA,EAAgC;AAC5E,EAAA,MAAM,WAAA,GAAc,OAAO,cAAA,EAAe;AAC1C,EAAA,MAAM,WAAA,GAAc,OAAO,cAAA,EAAe;AAC1C,EAAA,MAAM,aAAa,MAAA,CAAO,UAAA;AAC1B,EAAA,MAAM,aAAA,GAAgB,MAAM,KAAA,CAAM,aAAA;AAClC,EAAA,MAAM,yBAAyB,KAAA,CAAM,sBAAA;AACrC,EAAA,MAAM,oBAAoB,aAAA,IAAiB,IAAA,IAAQ,CAAC,MAAA,CAAO,MAAM,aAAa,CAAA;AAG9E,EAAA,MAAM,OAAA,GAAU,QAAA,GAAW,KAAA,CAAA,GAAY,UAAA,CAAW,OAAA;AAElD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EAAO,WAAA,EAAa,OAAO,OAAA,EACpD,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,4BAAA,EACT,QAAA,EAAA;AAAA,QAAA,UAAA,CAAW,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,WAAA,EAAc,qBAAW,KAAA,EAAM,CAAA;AAAA,wBAChE,GAAA,CAAC,qBAAA,EAAA,EAAsB,KAAA,EAAO,UAAA,EAAY,OAAO,WAAA,EAAa,CAAA;AAAA,QAC7D,iBAAA,oBACC,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,MAAA,EAAQ,MAAA,CAAO,sBAAA,CAAuB,aAAA,EAAe,wBAAwB,WAAW;AAAA;AAAA;AAC1F,OAAA,EAEJ,CAAA;AAAA,MACC,OAAO,WAAA;AAAY,KAAA,EACtB,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,SAAA,EAAW,EAAA,CAAG,iBAAA,CAAkB,KAAK,GAAG,SAAS,CAAA;AAAA,MACjD,KAAA,EAAO,WAAA;AAAA,MACP,OAAA;AAAA,MACA,KAAA,EAAO,OAAA;AAAA,MAEP,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAO,4BAAA,EACT,QAAA,EAAA;AAAA,UAAA,UAAA,CAAW,yBAAS,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,WAAA,EAAc,qBAAW,KAAA,EAAM,CAAA;AAAA,0BAChE,GAAA,CAAC,qBAAA,EAAA,EAAsB,KAAA,EAAO,UAAA,EAAY,OAAO,WAAA,EAAa;AAAA,SAAA,EAChE,CAAA;AAAA,QACC,OAAO,WAAA;AAAY;AAAA;AAAA,GACtB;AAEJ,CAAC;AAED,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}