{"version":3,"file":"ChartLegend.mjs","names":[],"sources":["../../src/common/ChartLegend.tsx"],"sourcesContent":["import { Flexbox } from '@lobehub/ui';\nimport { Dispatch, SetStateAction, useRef } from 'react';\n\nimport Legend from '@/Legend';\nimport { useOnWindowResize } from '@/hooks/useOnWindowResize';\n\nconst calculateHeight = (height: number | undefined) =>\n  height\n    ? Number(height) + 20 // 20px extra padding\n    : 60; // default height\n\nconst ChartLegend = (\n  { payload }: any,\n  categoryColors: Map<string, string>,\n  setLegendHeight: Dispatch<SetStateAction<number>>,\n  activeLegend: string | undefined,\n  onClick?: (category: string, color: string) => void,\n  enableLegendSlider?: boolean,\n  customCategories?: {\n    [key: string]: string;\n  },\n) => {\n  const legendRef = useRef<HTMLDivElement>(null);\n\n  useOnWindowResize(() => {\n    setLegendHeight(calculateHeight(legendRef.current?.clientHeight));\n  });\n\n  const filteredPayload = payload.filter((item: any) => item.type !== 'none');\n\n  return (\n    <Flexbox align={'center'} horizontal justify={'flex-end'} ref={legendRef}>\n      <Legend\n        activeLegend={activeLegend}\n        categories={filteredPayload.map((entry: any) => entry.value)}\n        colors={filteredPayload.map((entry: any) => categoryColors.get(entry.value))}\n        customCategories={customCategories}\n        enableLegendSlider={enableLegendSlider}\n        onClickLegendItem={onClick}\n      />\n    </Flexbox>\n  );\n};\n\nexport default ChartLegend;\n"],"mappings":";;;;;;AAMA,MAAM,mBAAmB,WACvB,SACI,OAAO,MAAM,IAAI,KACjB;AAEN,MAAM,eACJ,EAAE,WACF,gBACA,iBACA,cACA,SACA,oBACA,qBAGG;CACH,MAAM,YAAY,OAAuB,IAAI;CAE7C,wBAAwB;EACtB,gBAAgB,gBAAgB,UAAU,SAAS,YAAY,CAAC;CAClE,CAAC;CAED,MAAM,kBAAkB,QAAQ,QAAQ,SAAc,KAAK,SAAS,MAAM;CAE1E,OACE,oBAAC,SAAD;EAAS,OAAO;EAAU,YAAA;EAAW,SAAS;EAAY,KAAK;EAC7D,UAAA,oBAAC,QAAD;GACgB;GACd,YAAY,gBAAgB,KAAK,UAAe,MAAM,KAAK;GAC3D,QAAQ,gBAAgB,KAAK,UAAe,eAAe,IAAI,MAAM,KAAK,CAAC;GACzD;GACE;GACpB,mBAAmB;EACpB,CAAA;CACM,CAAA;AAEb"}