{"version":3,"file":"PercentChange.mjs","sources":["../../../../src/components/BigValue/PercentChange.tsx"],"sourcesContent":["import { IconName } from '@grafana/data';\n\nimport { Icon } from '../Icon/Icon';\n\nimport { PercentChangeStyles } from './BigValueLayout';\n\nexport interface Props {\n  percentChange: number;\n  styles: PercentChangeStyles;\n}\n\nexport const PercentChange = ({ percentChange, styles }: Props) => {\n  let percentChangeIcon: IconName | undefined = undefined;\n  if (percentChange > 0) {\n    percentChangeIcon = 'arrow-up';\n  } else if (percentChange < 0) {\n    percentChangeIcon = 'arrow-down';\n  }\n\n  return (\n    <div style={styles.containerStyles}>\n      {percentChangeIcon && (\n        <Icon name={percentChangeIcon} height={styles.iconSize} width={styles.iconSize} viewBox=\"6 6 12 12\" />\n      )}\n      {percentChangeString(percentChange)}\n    </div>\n  );\n};\n\n// percentChange is expected to be a value between 0-100\nexport const percentChangeString = (percentChange: number) => {\n  return (percentChange / 100).toLocaleString(undefined, { style: 'percent', maximumSignificantDigits: 3 });\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,aAAgB,GAAA,CAAC,EAAE,aAAA,EAAe,QAAoB,KAAA;AACjE,EAAA,IAAI,iBAA0C,GAAA,KAAA,CAAA;AAC9C,EAAA,IAAI,gBAAgB,CAAG,EAAA;AACrB,IAAoB,iBAAA,GAAA,UAAA;AAAA,GACtB,MAAA,IAAW,gBAAgB,CAAG,EAAA;AAC5B,IAAoB,iBAAA,GAAA,YAAA;AAAA;AAGtB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,KAAO,EAAA,MAAA,CAAO,eAChB,EAAA,QAAA,EAAA;AAAA,IACC,iBAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAM,iBAAmB,EAAA,MAAA,EAAQ,MAAO,CAAA,QAAA,EAAU,KAAO,EAAA,MAAA,CAAO,QAAU,EAAA,OAAA,EAAQ,WAAY,EAAA,CAAA;AAAA,IAErG,oBAAoB,aAAa;AAAA,GACpC,EAAA,CAAA;AAEJ;AAGa,MAAA,mBAAA,GAAsB,CAAC,aAA0B,KAAA;AAC5D,EAAQ,OAAA,CAAA,aAAA,GAAgB,KAAK,cAAe,CAAA,KAAA,CAAA,EAAW,EAAE,KAAO,EAAA,SAAA,EAAW,wBAA0B,EAAA,CAAA,EAAG,CAAA;AAC1G;;;;"}