"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[1902],{"../../node_modules/@mdx-js/react/lib/index.js":function(D,f,l){l.d(f,{BN:function(){return m},RP:function(){return y},gz:function(){return a},xA:function(){return v}});var c=l("../../node_modules/react/index.js");const m=c.createContext({});function a(s){return i;function i(o){const p=y(o.components);return c.createElement(s,{...o,allComponents:p})}}function y(s){const i=c.useContext(m);return c.useMemo(()=>typeof s=="function"?s(i):{...i,...s},[i,s])}const x={};function v({components:s,children:i,disableParentContext:o}){let p;return o?p=typeof s=="function"?s({}):s||x:p=y(s),c.createElement(m.Provider,{value:p},i)}},"./src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx":function(D,f,l){l.r(f),l.d(f,{basic:function(){return O},default:function(){return E}});var c=l("../../node_modules/react/index.js"),m=l("./src/components/FormattedValueDisplay/FormattedValueDisplay.tsx"),a=l("../../node_modules/react/jsx-runtime.js"),y=l("../../node_modules/@mdx-js/react/lib/index.js"),x=l("../../node_modules/@storybook/blocks/dist/index.mjs");function v(d){const n=Object.assign({h1:"h1",p:"p",h3:"h3",pre:"pre",code:"code"},(0,y.RP)(),d.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h1,{id:"formattedvaluedisplay",children:"FormattedValueDisplay"}),`
`,(0,a.jsx)(n.p,{children:"Used to display a value, which also supports prefix and suffix."}),`
`,(0,a.jsx)(n.h3,{id:"usage",children:"Usage"}),`
`,(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:`<FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />
`})}),`
`,(0,a.jsx)(n.h3,{id:"props",children:"Props"}),`
`,(0,a.jsx)(x.ov,{of:m.i})]})}function s(d={}){const{wrapper:n}=Object.assign({},(0,y.RP)(),d.components);return n?(0,a.jsx)(n,Object.assign({},d,{children:(0,a.jsx)(v,d)})):v(d)}var i=s,o=Object.defineProperty,p=Object.defineProperties,e=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable,j=(d,n,_)=>n in d?o(d,n,{enumerable:!0,configurable:!0,writable:!0,value:_}):d[n]=_,P=(d,n)=>{for(var _ in n||(n={}))t.call(n,_)&&j(d,_,n[_]);if(r)for(var _ of r(n))u.call(n,_)&&j(d,_,n[_]);return d},h=(d,n)=>p(d,e(n)),V,F,g;const S={title:"Visualizations/FormattedValueDisplay",component:m.i,parameters:{docs:{page:i}}},O=()=>c.createElement(m.i,{value:{text:"Test value"},style:{fontSize:12}});var E=S;O.parameters=h(P({},O.parameters),{docs:h(P({},(V=O.parameters)==null?void 0:V.docs),{source:P({originalSource:`() => {
  return <FormattedValueDisplay value={{
    text: 'Test value'
  }} style={{
    fontSize: 12
  }} />;
}`},(g=(F=O.parameters)==null?void 0:F.docs)==null?void 0:g.source)})})},"./src/components/FormattedValueDisplay/FormattedValueDisplay.tsx":function(D,f,l){l.d(f,{i:function(){return p}});var c=l("../../node_modules/react/index.js"),m=Object.defineProperty,a=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,v=(e,r,t)=>r in e?m(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,s=(e,r)=>{for(var t in r||(r={}))y.call(r,t)&&v(e,t,r[t]);if(a)for(var t of a(r))x.call(r,t)&&v(e,t,r[t]);return e},i=(e,r)=>{var t={};for(var u in e)y.call(e,u)&&r.indexOf(u)<0&&(t[u]=e[u]);if(e!=null&&a)for(var u of a(e))r.indexOf(u)<0&&x.call(e,u)&&(t[u]=e[u]);return t};function o(e){return e<20?.9:e<26?.8:.6}const p=e=>{var r=e,{value:t,className:u,style:j}=r,P=i(r,["value","className","style"]),h,V;const F=((h=t.prefix)!=null?h:"").length>0,g=((V=t.suffix)!=null?V:"").length>0;let S;if(j&&j.fontSize&&typeof j.fontSize=="number"){const O=j.fontSize,E=o(O);S={fontSize:O*E}}return c.createElement("div",s({className:u,style:j},P),c.createElement("div",null,F&&c.createElement("span",null,t.prefix),c.createElement("span",null,t.text),g&&c.createElement("span",{style:S},t.suffix)))};p.displayName="FormattedDisplayValue";try{p.displayName="FormattedDisplayValue",p.__docgenInfo={description:"",displayName:"FormattedDisplayValue",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"FormattedValue"}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/FormattedValueDisplay/FormattedValueDisplay.tsx#FormattedDisplayValue"]={docgenInfo:FormattedDisplayValue.__docgenInfo,name:"FormattedDisplayValue",path:"src/components/FormattedValueDisplay/FormattedValueDisplay.tsx#FormattedDisplayValue"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(D,f,l){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var c=l("../../node_modules/react/index.js"),m=Symbol.for("react.element"),a=Symbol.for("react.fragment"),y=Object.prototype.hasOwnProperty,x=c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,v={key:!0,ref:!0,__self:!0,__source:!0};function s(i,o,p){var e,r={},t=null,u=null;p!==void 0&&(t=""+p),o.key!==void 0&&(t=""+o.key),o.ref!==void 0&&(u=o.ref);for(e in o)y.call(o,e)&&!v.hasOwnProperty(e)&&(r[e]=o[e]);if(i&&i.defaultProps)for(e in o=i.defaultProps,o)r[e]===void 0&&(r[e]=o[e]);return{$$typeof:m,type:i,key:t,ref:u,props:r,_owner:x.current}}f.Fragment=a,f.jsx=s,f.jsxs=s},"../../node_modules/react/jsx-runtime.js":function(D,f,l){D.exports=l("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
