{"version":3,"file":"ScatterChartTooltip.mjs","names":["ScatterChartTooltipRow"],"sources":["../../src/ScatterChart/ScatterChartTooltip.tsx"],"sourcesContent":["import { Flexbox, Icon, Text, createStaticStyles, cssVar, cx } from '@lobehub/ui';\nimport { Circle } from 'lucide-react';\nimport React, { memo } from 'react';\n\nimport { ChartTooltipFrame } from '@/common/ChartTooltip/ChartTooltipFrame';\nimport { ScatterChartValueFormatter } from '@/types/charts';\nimport { defaultValueFormatter } from '@/utils';\n\nimport ScatterChartTooltipRow from './ScatterChartTooltipRow';\n\nconst styles = createStaticStyles(({ css }) => ({\n  header: css`\n    border-bottom: 1px solid ${cssVar.colorBorderSecondary};\n    font-weight: 500;\n  `,\n}));\n\nexport interface ScatterChartTooltipProps {\n  active: boolean | undefined;\n  axis: any;\n  category?: string;\n  categoryColors: Map<string, string>;\n  customCategories?: {\n    [key: string]: string;\n  };\n  label: string;\n  payload: any;\n  valueFormatter: ScatterChartValueFormatter;\n}\n\nconst ScatterChartTooltip = memo<ScatterChartTooltipProps>(\n  ({\n    customCategories,\n    label,\n    active,\n    payload,\n    valueFormatter,\n    axis,\n    category,\n    categoryColors,\n  }) => {\n    const color = category\n      ? (categoryColors.get(payload?.[0]?.payload[category]) ?? cssVar.colorPrimary)\n      : cssVar.colorPrimary;\n    if (active && payload) {\n      return (\n        <ChartTooltipFrame>\n          <Flexbox\n            align={'center'}\n            className={cx(styles.header)}\n            gap={8}\n            horizontal\n            paddingBlock={8}\n            paddingInline={16}\n          >\n            <Icon color={color} fill={color} icon={Circle} size={10} />\n            <Text ellipsis style={{ margin: 0 }}>\n              {label}\n            </Text>\n          </Flexbox>\n          <Flexbox gap={4} paddingBlock={8} paddingInline={16} style={{ marginTop: 4 }}>\n            {payload.map(({ value, name }: { name: string; value: number }, idx: number) => {\n              const valueFormatterKey = Object.keys(axis).find((key) => axis[key] === name) ?? '';\n              const valueFormatterFn =\n                valueFormatter[valueFormatterKey as keyof ScatterChartValueFormatter] ??\n                defaultValueFormatter;\n              return (\n                <ScatterChartTooltipRow\n                  key={`id-${idx}`}\n                  name={customCategories?.[name] || name}\n                  value={valueFormatter && valueFormatterFn ? valueFormatterFn(value) : `${value}`}\n                />\n              );\n            })}\n          </Flexbox>\n        </ChartTooltipFrame>\n      );\n    }\n    return null;\n  },\n);\n\nexport default ScatterChartTooltip;\n"],"mappings":";;;;;;;;AAUA,MAAM,SAAS,oBAAoB,EAAE,WAAW,EAC9C,QAAQ,GAAG;+BACkB,OAAO,qBAAqB;;IAG3D,EAAE;AAeF,MAAM,sBAAsB,MACzB,EACC,kBACA,OACA,QACA,SACA,gBACA,MACA,UACA,qBACI;CACJ,MAAM,QAAQ,WACT,eAAe,IAAI,UAAU,EAAE,EAAE,QAAQ,SAAS,KAAK,OAAO,eAC/D,OAAO;CACX,IAAI,UAAU,SACZ,OACE,qBAAC,mBAAD,EAAA,UAAA,CACE,qBAAC,SAAD;EACE,OAAO;EACP,WAAW,GAAG,OAAO,MAAM;EAC3B,KAAK;EACL,YAAA;EACA,cAAc;EACd,eAAe;EANjB,UAAA,CAQE,oBAAC,MAAD;GAAa;GAAO,MAAM;GAAO,MAAM;GAAQ,MAAM;EAAK,CAAA,GAC1D,oBAAC,MAAD;GAAM,UAAA;GAAS,OAAO,EAAE,QAAQ,EAAE;GAC/B,UAAA;EACG,CAAA,CACC;CACT,CAAA,GAAA,oBAAC,SAAD;EAAS,KAAK;EAAG,cAAc;EAAG,eAAe;EAAI,OAAO,EAAE,WAAW,EAAE;EACxE,UAAA,QAAQ,KAAK,EAAE,OAAO,QAAyC,QAAgB;GAE9E,MAAM,mBACJ,eAFwB,OAAO,KAAK,IAAI,CAAC,CAAC,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,OAG/E;GACF,OACE,oBAACA,iBAAD;IAEE,MAAM,mBAAmB,SAAS;IAClC,OAAO,kBAAkB,mBAAmB,iBAAiB,KAAK,IAAI,GAAG;GAC1E,GAHM,MAAM,KAGZ;EAEL,CAAC;CACM,CAAA,CACQ,EAAA,CAAA;CAGvB,OAAO;AACT,CACF"}