{"version":3,"file":"MarkerBar.mjs","names":[],"sources":["../../src/DataBars/MarkerBar.tsx"],"sourcesContent":["'use client';\n\nimport { Flexbox, FlexboxProps } from '@lobehub/ui';\nimport { Tooltip } from '@lobehub/ui/base-ui';\nimport { cssVar, cx } from 'antd-style';\nimport { ReactNode, forwardRef } from 'react';\n\nimport { styles } from './styles';\n\nexport interface MarkerBarProps extends FlexboxProps {\n  bgColors?: string;\n  color?: string;\n  markerTooltip?: ReactNode;\n  maxValue?: number;\n  minValue?: number;\n  rangeColors?: string;\n  rangeTooltip?: ReactNode;\n  showAnimation?: boolean;\n  size?: number;\n  value: number;\n}\n\nconst MarkerBar = forwardRef<HTMLDivElement, MarkerBarProps>((props, ref) => {\n  const {\n    value,\n    minValue,\n    maxValue,\n    markerTooltip,\n    rangeTooltip,\n    showAnimation = false,\n    color,\n    bgColors,\n    rangeColors,\n    className,\n    width = '100%',\n    style,\n    size = 8,\n    ...rest\n  } = props;\n  return (\n    <Flexbox\n      align={'center'}\n      className={className}\n      height={size}\n      horizontal\n      ref={ref}\n      style={{\n        position: 'relative',\n        ...style,\n      }}\n      width={width}\n      {...rest}\n    >\n      <Flexbox\n        height={'100%'}\n        style={{\n          background: bgColors || cssVar.colorFillTertiary,\n          borderRadius: size / 2,\n          inset: 0,\n          opacity: bgColors ? 0.2 : 1,\n          position: 'absolute',\n          zIndex: 0,\n        }}\n        width={'100%'}\n      />\n      {minValue !== undefined && maxValue !== undefined ? (\n        <Tooltip title={rangeTooltip}>\n          <Flexbox\n            className={cx(showAnimation && styles.showAnimation)}\n            height={'100%'}\n            style={{\n              background: rangeColors || cssVar.colorFill,\n              borderRadius: size / 2,\n              inset: 0,\n              left: `${minValue}%`,\n              opacity: rangeColors ? 0.2 : 1,\n              position: 'absolute',\n              zIndex: 0,\n            }}\n            width={`${maxValue - minValue}%`}\n          />\n        </Tooltip>\n      ) : null}\n      <Tooltip title={markerTooltip}>\n        <div\n          className={cx(styles.markerWrapper, showAnimation && styles.showAnimation)}\n          style={{\n            left: `${value}%`,\n          }}\n        >\n          <div\n            className={styles.marker}\n            style={{\n              background: color || cssVar.colorPrimary,\n              height: size + 8,\n            }}\n          />\n        </div>\n      </Tooltip>\n    </Flexbox>\n  );\n});\n\nMarkerBar.displayName = 'MarkerBar';\n\nexport default MarkerBar;\n"],"mappings":";;;;;;;;AAsBA,MAAM,YAAY,YAA4C,OAAO,QAAQ;CAC3E,MAAM,EACJ,OACA,UACA,UACA,eACA,cACA,gBAAgB,OAChB,OACA,UACA,aACA,WACA,QAAQ,QACR,OACA,OAAO,GACP,GAAG,SACD;CACJ,OACE,qBAAC,SAAD;EACE,OAAO;EACI;EACX,QAAQ;EACR,YAAA;EACK;EACL,OAAO;GACL,UAAU;GACV,GAAG;EACL;EACO;EACP,GAAI;EAXN,UAAA;GAaE,oBAAC,SAAD;IACE,QAAQ;IACR,OAAO;KACL,YAAY,YAAY,OAAO;KAC/B,cAAc,OAAO;KACrB,OAAO;KACP,SAAS,WAAW,KAAM;KAC1B,UAAU;KACV,QAAQ;IACV;IACA,OAAO;GACR,CAAA;GACA,aAAa,KAAA,KAAa,aAAa,KAAA,IACtC,oBAAC,SAAD;IAAS,OAAO;IACd,UAAA,oBAAC,SAAD;KACE,WAAW,GAAG,iBAAiB,OAAO,aAAa;KACnD,QAAQ;KACR,OAAO;MACL,YAAY,eAAe,OAAO;MAClC,cAAc,OAAO;MACrB,OAAO;MACP,MAAM,GAAG,SAAS;MAClB,SAAS,cAAc,KAAM;MAC7B,UAAU;MACV,QAAQ;KACV;KACA,OAAO,GAAG,WAAW,SAAS;IAC/B,CAAA;GACM,CAAA,IACP;GACJ,oBAAC,SAAD;IAAS,OAAO;IACd,UAAA,oBAAC,OAAD;KACE,WAAW,GAAG,OAAO,eAAe,iBAAiB,OAAO,aAAa;KACzE,OAAO,EACL,MAAM,GAAG,MAAM,GACjB;KAEA,UAAA,oBAAC,OAAD;MACE,WAAW,OAAO;MAClB,OAAO;OACL,YAAY,SAAS,OAAO;OAC5B,QAAQ,OAAO;MACjB;KACD,CAAA;IACE,CAAA;GACE,CAAA;EACF;;AAEb,CAAC;AAED,UAAU,cAAc"}