{"version":3,"file":"CategoryBar.mjs","names":[],"sources":["../../src/DataBars/CategoryBar.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 { forwardRef, memo, useMemo } from 'react';\n\nimport { useThemeColorRange } from '@/hooks/useThemeColorRange';\nimport { ValueFormatter } from '@/types/charts';\nimport { defaultValueFormatter, sumNumericArray } from '@/utils';\n\nimport { styles } from './styles';\n\nconst getMarkerBgColor = (\n  markerValue: number | undefined,\n  values: number[],\n  colors: string[],\n): string => {\n  if (markerValue === undefined) return '';\n\n  let prefixSum = 0;\n  for (const [i, currentWidthPercentage] of values.entries()) {\n    const currentBgColor = colors[i];\n\n    prefixSum += currentWidthPercentage;\n    if (prefixSum >= markerValue) return currentBgColor;\n  }\n\n  return '';\n};\n\nconst getPositionLeft = (value: number | undefined, maxValue: number): number =>\n  value ? (value / maxValue) * 100 : 0;\n\nconst BarLabels = memo<{ valueFormatter?: ValueFormatter; values: number[] }>(\n  ({ values, valueFormatter }) => {\n    const sumValues = useMemo(() => sumNumericArray(values), [values]);\n    let prefixSum = 0;\n    let sumConsecutiveHiddenLabels = 0;\n    return (\n      <Flexbox\n        className={cx(styles.label, styles.emphasis)}\n        horizontal\n        style={{\n          position: 'relative',\n        }}\n      >\n        {values.slice(0, values.length).map((widthPercentage, idx) => {\n          prefixSum += widthPercentage;\n          const showLabel =\n            (widthPercentage >= 0.1 * sumValues ||\n              sumConsecutiveHiddenLabels >= 0.09 * sumValues) &&\n            sumValues - prefixSum >= 0.15 * sumValues &&\n            prefixSum >= 0.1 * sumValues;\n          sumConsecutiveHiddenLabels = showLabel\n            ? 0\n            : (sumConsecutiveHiddenLabels += widthPercentage);\n\n          const widthPositionLeft = getPositionLeft(widthPercentage, sumValues);\n\n          if (prefixSum === sumValues) return null;\n\n          return (\n            <Flexbox\n              align={'center'}\n              horizontal\n              justify={'flex-end'}\n              key={`item-${idx}`}\n              style={{ width: `${widthPositionLeft}%` }}\n            >\n              <span\n                style={{\n                  display: showLabel ? 'block' : 'hidden',\n                  left: '50%',\n                  transform: 'translateX(50%)',\n                }}\n              >\n                {valueFormatter ? valueFormatter(prefixSum) : prefixSum}\n              </span>\n            </Flexbox>\n          );\n        })}\n        <Flexbox align={'center'} horizontal style={{ bottom: 0, left: 0, position: 'absolute' }}>\n          {valueFormatter ? valueFormatter(0) : 0}\n        </Flexbox>\n        <Flexbox align={'center'} horizontal style={{ bottom: 0, position: 'absolute', right: 0 }}>\n          {valueFormatter ? valueFormatter(sumValues) : sumValues}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport interface CategoryBarProps extends FlexboxProps {\n  colors?: string[];\n  markerValue?: number;\n  showAnimation?: boolean;\n  showLabels?: boolean;\n  size?: number;\n  tooltip?: string;\n  valueFormatter?: ValueFormatter;\n  values: number[];\n}\n\nconst CategoryBar = forwardRef<HTMLDivElement, CategoryBarProps>((props, ref) => {\n  const themeColorRange = useThemeColorRange();\n  const {\n    values = [],\n    colors = themeColorRange,\n    valueFormatter = defaultValueFormatter,\n    markerValue,\n    showLabels = true,\n    tooltip,\n    showAnimation = false,\n    className,\n    width = '100%',\n    size = 8,\n    style,\n    ...rest\n  } = props;\n\n  const colorGroup = colors.concat(themeColorRange);\n\n  const markerBgColor = useMemo(\n    () => getMarkerBgColor(markerValue, values, colorGroup),\n    [markerValue, values, colorGroup],\n  );\n\n  const maxValue = useMemo(() => sumNumericArray(values), [values]);\n\n  const markerPositionLeft: number = useMemo(\n    () => getPositionLeft(markerValue, maxValue),\n    [markerValue, maxValue],\n  );\n\n  return (\n    <Tooltip title={tooltip}>\n      <Flexbox\n        className={className}\n        gap={8}\n        ref={ref}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n        width={width}\n        {...rest}\n      >\n        {showLabels && <BarLabels valueFormatter={valueFormatter} values={values} />}\n        <Flexbox\n          align={'center'}\n          className={cx('relative w-full flex items-center h-2')}\n          height={size}\n          horizontal\n          style={{\n            position: 'relative',\n          }}\n        >\n          <Flexbox\n            align={'center'}\n            height={'100%'}\n            horizontal\n            style={{\n              borderRadius: size / 2,\n              overflow: 'hidden',\n            }}\n            width={'100%'}\n          >\n            {values.map((value, idx) => {\n              const baseColor = colorGroup[idx] ?? cssVar.colorPrimary;\n              const percentage = (value / maxValue) * 100;\n              return (\n                <Flexbox\n                  height={'100%'}\n                  key={`item-${idx}`}\n                  style={{ background: baseColor, width: `${percentage}%` }}\n                />\n              );\n            })}\n          </Flexbox>\n          {markerValue === undefined ? undefined : (\n            <div\n              className={cx(styles.markerWrapper, showAnimation && styles.showAnimation)}\n              style={{\n                left: `${markerPositionLeft}%`,\n              }}\n            >\n              <div\n                className={styles.marker}\n                style={{\n                  background: markerBgColor || cssVar.colorPrimary,\n                  height: size + 8,\n                }}\n              />\n            </div>\n          )}\n        </Flexbox>\n      </Flexbox>\n    </Tooltip>\n  );\n});\n\nCategoryBar.displayName = 'CategoryBar';\n\nexport default CategoryBar;\n"],"mappings":"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"}