@economic/taco 14.0.0-tanstack-virtual-update.0 → 14.0.1-EC-83852-types.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (162) hide show
  1. package/dist/charts/components/Area/AreaChart.cjs.map +1 -1
  2. package/dist/charts/components/Area/AreaChart.js.map +1 -1
  3. package/dist/charts/components/Bar/BarChart.cjs +2 -2
  4. package/dist/charts/components/Bar/BarChart.cjs.map +1 -1
  5. package/dist/charts/components/Bar/BarChart.js +2 -2
  6. package/dist/charts/components/Bar/BarChart.js.map +1 -1
  7. package/dist/charts/components/ChartWrapper.cjs.map +1 -1
  8. package/dist/charts/components/ChartWrapper.js.map +1 -1
  9. package/dist/charts/components/Composed/BarLineChart.cjs.map +1 -1
  10. package/dist/charts/components/Composed/BarLineChart.js.map +1 -1
  11. package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs +114 -103
  12. package/dist/charts/components/LegacyDonut/LegacyDonutChart.cjs.map +1 -1
  13. package/dist/charts/components/LegacyDonut/LegacyDonutChart.d.ts +13 -2
  14. package/dist/charts/components/LegacyDonut/LegacyDonutChart.js +114 -103
  15. package/dist/charts/components/LegacyDonut/LegacyDonutChart.js.map +1 -1
  16. package/dist/charts/components/Legend.cjs +1 -1
  17. package/dist/charts/components/Legend.cjs.map +1 -1
  18. package/dist/charts/components/Legend.js +1 -1
  19. package/dist/charts/components/Legend.js.map +1 -1
  20. package/dist/charts/components/Line/LineChart.cjs.map +1 -1
  21. package/dist/charts/components/Line/LineChart.d.ts +2 -1
  22. package/dist/charts/components/Line/LineChart.js.map +1 -1
  23. package/dist/charts/components/Pie/PieChart.cjs +4 -4
  24. package/dist/charts/components/Pie/PieChart.cjs.map +1 -1
  25. package/dist/charts/components/Pie/PieChart.js +4 -4
  26. package/dist/charts/components/Pie/PieChart.js.map +1 -1
  27. package/dist/charts/components/Pie/util.cjs.map +1 -1
  28. package/dist/charts/components/Pie/util.d.ts +2 -1
  29. package/dist/charts/components/Pie/util.js.map +1 -1
  30. package/dist/charts/components/types.d.ts +2 -1
  31. package/dist/charts/components/useChartData.cjs.map +1 -1
  32. package/dist/charts/components/useChartData.d.ts +4 -1
  33. package/dist/charts/components/useChartData.js.map +1 -1
  34. package/dist/charts/utils/color.cjs +6 -10
  35. package/dist/charts/utils/color.cjs.map +1 -1
  36. package/dist/charts/utils/color.js +6 -10
  37. package/dist/charts/utils/color.js.map +1 -1
  38. package/dist/charts/utils/common.cjs +8 -8
  39. package/dist/charts/utils/common.cjs.map +1 -1
  40. package/dist/charts/utils/common.d.ts +2 -2
  41. package/dist/charts/utils/common.js +8 -8
  42. package/dist/charts/utils/common.js.map +1 -1
  43. package/dist/components/AlertDialog/Context.cjs.map +1 -1
  44. package/dist/components/AlertDialog/Context.d.ts +1 -1
  45. package/dist/components/AlertDialog/Context.js.map +1 -1
  46. package/dist/components/Combobox/useCombobox.cjs.map +1 -1
  47. package/dist/components/Combobox/useCombobox.d.ts +1 -1
  48. package/dist/components/Combobox/useCombobox.js.map +1 -1
  49. package/dist/components/Dialog/Context.cjs.map +1 -1
  50. package/dist/components/Dialog/Context.d.ts +1 -1
  51. package/dist/components/Dialog/Context.js.map +1 -1
  52. package/dist/components/Dialog/components/Content.cjs.map +1 -1
  53. package/dist/components/Dialog/components/Content.js.map +1 -1
  54. package/dist/components/Drawer/useDrawerStack.cjs.map +1 -1
  55. package/dist/components/Drawer/useDrawerStack.js.map +1 -1
  56. package/dist/components/Hanger/Hanger.cjs.map +1 -1
  57. package/dist/components/Hanger/Hanger.js.map +1 -1
  58. package/dist/components/Header/components/PrimaryNavigation.cjs.map +1 -1
  59. package/dist/components/Header/components/PrimaryNavigation.js.map +1 -1
  60. package/dist/components/Menu/components/Content.cjs +2 -1
  61. package/dist/components/Menu/components/Content.cjs.map +1 -1
  62. package/dist/components/Menu/components/Content.js +2 -1
  63. package/dist/components/Menu/components/Content.js.map +1 -1
  64. package/dist/components/Menu/components/Item.cjs.map +1 -1
  65. package/dist/components/Menu/components/Item.d.ts +2 -2
  66. package/dist/components/Menu/components/Item.js.map +1 -1
  67. package/dist/components/Menu/components/Trigger.cjs +1 -5
  68. package/dist/components/Menu/components/Trigger.cjs.map +1 -1
  69. package/dist/components/Menu/components/Trigger.js +1 -5
  70. package/dist/components/Menu/components/Trigger.js.map +1 -1
  71. package/dist/components/OverflowGroup/OverflowGroup.cjs +2 -1
  72. package/dist/components/OverflowGroup/OverflowGroup.cjs.map +1 -1
  73. package/dist/components/OverflowGroup/OverflowGroup.js +2 -1
  74. package/dist/components/OverflowGroup/OverflowGroup.js.map +1 -1
  75. package/dist/components/Provider/Provider.cjs.map +1 -1
  76. package/dist/components/Provider/Provider.d.ts +1 -1
  77. package/dist/components/Provider/Provider.js.map +1 -1
  78. package/dist/components/Select2/Select2.cjs.map +1 -1
  79. package/dist/components/Select2/Select2.js.map +1 -1
  80. package/dist/components/Table3/components/Columns/Cell/EditingControlCell.cjs.map +1 -1
  81. package/dist/components/Table3/components/Columns/Cell/EditingControlCell.js.map +1 -1
  82. package/dist/components/Table3/useTable3.cjs +8 -6
  83. package/dist/components/Table3/useTable3.cjs.map +1 -1
  84. package/dist/components/Table3/useTable3.js +8 -6
  85. package/dist/components/Table3/useTable3.js.map +1 -1
  86. package/dist/components/Table3/util/editing.cjs.map +1 -1
  87. package/dist/components/Table3/util/editing.d.ts +1 -1
  88. package/dist/components/Table3/util/editing.js.map +1 -1
  89. package/dist/hooks/useBoundaryOverflowDetection.cjs.map +1 -1
  90. package/dist/hooks/useBoundaryOverflowDetection.d.ts +1 -1
  91. package/dist/hooks/useBoundaryOverflowDetection.js.map +1 -1
  92. package/dist/hooks/useBoundingClientRectListener.cjs.map +1 -1
  93. package/dist/hooks/useBoundingClientRectListener.d.ts +1 -1
  94. package/dist/hooks/useBoundingClientRectListener.js.map +1 -1
  95. package/dist/hooks/useControlled.cjs +6 -10
  96. package/dist/hooks/useControlled.cjs.map +1 -1
  97. package/dist/hooks/useControlled.js +6 -10
  98. package/dist/hooks/useControlled.js.map +1 -1
  99. package/dist/hooks/useIsFormControl.cjs.map +1 -1
  100. package/dist/hooks/useIsFormControl.d.ts +1 -1
  101. package/dist/hooks/useIsFormControl.js.map +1 -1
  102. package/dist/hooks/useMergedRef.cjs.map +1 -1
  103. package/dist/hooks/useMergedRef.js.map +1 -1
  104. package/dist/primitives/Button.cjs.map +1 -1
  105. package/dist/primitives/Button.js.map +1 -1
  106. package/dist/primitives/Collection/components/Root.cjs +6 -13
  107. package/dist/primitives/Collection/components/Root.cjs.map +1 -1
  108. package/dist/primitives/Collection/components/Root.js +6 -13
  109. package/dist/primitives/Collection/components/Root.js.map +1 -1
  110. package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.cjs.map +1 -1
  111. package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.js.map +1 -1
  112. package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.cjs.map +1 -1
  113. package/dist/primitives/Table/Core/components/Columns/Cell/BuiltIns/GroupedCell.js.map +1 -1
  114. package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.cjs +2 -1
  115. package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.cjs.map +1 -1
  116. package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js +2 -1
  117. package/dist/primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js.map +1 -1
  118. package/dist/primitives/Table/Core/listeners/useTableRowActiveListener.cjs.map +1 -1
  119. package/dist/primitives/Table/Core/listeners/useTableRowActiveListener.d.ts +2 -2
  120. package/dist/primitives/Table/Core/listeners/useTableRowActiveListener.js.map +1 -1
  121. package/dist/primitives/Table/useTableManager/features/useTableRowActive.cjs.map +1 -1
  122. package/dist/primitives/Table/useTableManager/features/useTableRowActive.d.ts +1 -1
  123. package/dist/primitives/Table/useTableManager/features/useTableRowActive.js.map +1 -1
  124. package/dist/primitives/Table/useTableManager/util/dataTypes.cjs.map +1 -1
  125. package/dist/primitives/Table/useTableManager/util/dataTypes.d.ts +3 -3
  126. package/dist/primitives/Table/useTableManager/util/dataTypes.js.map +1 -1
  127. package/dist/types.cjs.map +1 -1
  128. package/dist/types.d.ts +1 -1
  129. package/dist/types.js.map +1 -1
  130. package/dist/utils/dataTypes.cjs.map +1 -1
  131. package/dist/utils/dataTypes.d.ts +1 -1
  132. package/dist/utils/dataTypes.js.map +1 -1
  133. package/dist/utils/debounce.cjs.map +1 -1
  134. package/dist/utils/debounce.d.ts +1 -1
  135. package/dist/utils/debounce.js.map +1 -1
  136. package/dist/utils/dom.cjs +1 -1
  137. package/dist/utils/dom.cjs.map +1 -1
  138. package/dist/utils/dom.d.ts +2 -2
  139. package/dist/utils/dom.js +1 -1
  140. package/dist/utils/dom.js.map +1 -1
  141. package/dist/utils/flattenChildren.cjs +1 -0
  142. package/dist/utils/flattenChildren.cjs.map +1 -1
  143. package/dist/utils/flattenChildren.d.ts +3 -0
  144. package/dist/utils/flattenChildren.js +2 -1
  145. package/dist/utils/flattenChildren.js.map +1 -1
  146. package/dist/utils/hooks/useDraggable.cjs.map +1 -1
  147. package/dist/utils/hooks/useDraggable.d.ts +9 -1
  148. package/dist/utils/hooks/useDraggable.js.map +1 -1
  149. package/dist/utils/hooks/useListScrollTo.cjs.map +1 -1
  150. package/dist/utils/hooks/useListScrollTo.d.ts +4 -1
  151. package/dist/utils/hooks/useListScrollTo.js.map +1 -1
  152. package/dist/utils/hooks/useOnClickOutside.cjs.map +1 -1
  153. package/dist/utils/hooks/useOnClickOutside.d.ts +1 -1
  154. package/dist/utils/hooks/useOnClickOutside.js.map +1 -1
  155. package/dist/utils/hooks/useTruncated.cjs.map +1 -1
  156. package/dist/utils/hooks/useTruncated.d.ts +2 -1
  157. package/dist/utils/hooks/useTruncated.js.map +1 -1
  158. package/dist/utils/mergeRefs.cjs.map +1 -1
  159. package/dist/utils/mergeRefs.d.ts +1 -1
  160. package/dist/utils/mergeRefs.js.map +1 -1
  161. package/dist/utils/storyutils.d.ts +1 -3
  162. package/package.json +4 -5
@@ -1 +1 @@
1
- {"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n /** Show dots for each data point\n * @default false\n */\n showDots?: boolean;\n /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Interpolation type of the line\n * @default natural\n */\n type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLegend = false,\n showDots = false,\n stacked = false,\n tooltipTitle,\n type = 'natural',\n ...attributes\n } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n <RechartsPrimitive.AreaChart\n data={data}\n margin={{\n bottom: 0,\n // ensures dots on the edges of the chart don't get cropped\n left: 4,\n right: 4,\n top: 4,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {shapes.map(shape => (\n <RechartsPrimitive.Area\n key={shape.dataKey}\n {...shape}\n dot={showDots ? shape.dot : false}\n fillOpacity={0.4}\n stackId={stacked ? 'stack' : undefined}\n type={type}\n />\n ))}\n </RechartsPrimitive.AreaChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACR,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;"}
1
+ {"version":3,"file":"AreaChart.cjs","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n /** Show dots for each data point\n * @default false\n */\n showDots?: boolean;\n /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Interpolation type of the line\n * @default natural\n */\n type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLegend = false,\n showDots = false,\n stacked = false,\n tooltipTitle,\n type = 'natural',\n ...attributes\n } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n <RechartsPrimitive.AreaChart\n data={data}\n margin={{\n bottom: 0,\n // ensures dots on the edges of the chart don't get cropped\n left: 4,\n right: 4,\n top: 4,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {shapes.map(shape => (\n <RechartsPrimitive.Area\n key={shape.dataKey}\n {...shape}\n dot={showDots ? shape.dot : false}\n fillOpacity={0.4}\n stackId={stacked ? 'stack' : undefined}\n type={type}\n />\n ))}\n </RechartsPrimitive.AreaChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n return null;\n}\nAreaChart.Area = Area;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAE3F,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACR,sBAAA;AAAA,MAACF,6BAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACG,sBAAA,cAACG,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n /** Show dots for each data point\n * @default false\n */\n showDots?: boolean;\n /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Interpolation type of the line\n * @default natural\n */\n type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLegend = false,\n showDots = false,\n stacked = false,\n tooltipTitle,\n type = 'natural',\n ...attributes\n } = stripCartesianProps<AreaChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n <RechartsPrimitive.AreaChart\n data={data}\n margin={{\n bottom: 0,\n // ensures dots on the edges of the chart don't get cropped\n left: 4,\n right: 4,\n top: 4,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {shapes.map(shape => (\n <RechartsPrimitive.Area\n key={shape.dataKey}\n {...shape}\n dot={showDots ? shape.dot : false}\n fillOpacity={0.4}\n stackId={stacked ? 'stack' : undefined}\n type={type}\n />\n ))}\n </RechartsPrimitive.AreaChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAA2C,KAAK;AAEpD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACRA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
1
+ {"version":3,"file":"AreaChart.js","sources":["../../../../src/charts/components/Area/AreaChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type AreaChartProps<TData extends object> = {\n /** Show dots for each data point\n * @default false\n */\n showDots?: boolean;\n /** Stack areas on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Interpolation type of the line\n * @default natural\n */\n type?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function AreaChart<TData extends object>(props: AreaChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLegend = false,\n showDots = false,\n stacked = false,\n tooltipTitle,\n type = 'natural',\n ...attributes\n } = stripCartesianProps<TData, AreaChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-area\">\n <RechartsPrimitive.AreaChart\n data={data}\n margin={{\n bottom: 0,\n // ensures dots on the edges of the chart don't get cropped\n left: 4,\n right: 4,\n top: 4,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {shapes.map(shape => (\n <RechartsPrimitive.Area\n key={shape.dataKey}\n {...shape}\n dot={showDots ? shape.dot : false}\n fillOpacity={0.4}\n stackId={stacked ? 'stack' : undefined}\n type={type}\n />\n ))}\n </RechartsPrimitive.AreaChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type AreaChartAreaProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Area<TData extends object>(_: AreaChartAreaProps<TData>): React.JSX.Element | null {\n return null;\n}\nAreaChart.Area = Area;\n"],"names":["React"],"mappings":";;;;;;;;AA2BO,SAAS,UAAgC,OAA8B;AAC1E,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,IACH,oBAAkD,KAAK;AAE3D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAE3F,SACIA,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,aAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,QAAQ;AAAA,QACJ,QAAQ;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,OAAO,IAAI,CAAA,UACRA,+BAAA;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACG,KAAK,MAAM;AAAA,QACV,GAAG;AAAA,QACJ,KAAK,WAAW,MAAM,MAAM;AAAA,QAC5B,aAAa;AAAA,QACb,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA,MAAA;AAAA,IAAA,CAEP;AAAA,EAAA,CAET,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,KAA2B,GAAwD;AACxF,SAAO;AACX;AACA,UAAU,OAAO;"}
@@ -32,14 +32,14 @@ function BarChart(props) {
32
32
  children,
33
33
  className: customClassName,
34
34
  data,
35
- orientation: _1,
35
+ orientation,
36
36
  showLabels = false,
37
37
  showLegend = false,
38
38
  stacked = false,
39
39
  tooltipTitle,
40
40
  ...attributes
41
41
  } = common.stripCartesianProps(props);
42
- const isHorizontal = props.orientation === "horizontal";
42
+ const isHorizontal = orientation === "horizontal";
43
43
  const className = cn("relative aspect-video", { "pb-8": showLegend }, customClassName);
44
44
  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChartData.useChart(children);
45
45
  return /* @__PURE__ */ React.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React.createElement(ChartWrapper.ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-bar" }, /* @__PURE__ */ React.createElement(
@@ -1 +1 @@
1
- {"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n /** Orientation of the bars\n * @default false\n */\n orientation?: 'horizontal' | 'vertical';\n /** Show bar values as labels next to/inside the bar\n * @default vertical\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n orientation: _1,\n showLabels = false,\n showLegend = false,\n stacked = false,\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<BarChartProps<TData>>(props);\n const isHorizontal = props.orientation === 'horizontal';\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n <RechartsPrimitive.BarChart\n data={data}\n // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 0,\n right: 0,\n // ensures labels on top of bars don't get cropped\n top: isHorizontal ? 0 : 10,\n }}\n layout={isHorizontal ? 'vertical' : undefined}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n {renderBars(shapes, showLabels, stacked, isHorizontal)}\n </RechartsPrimitive.BarChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n shapes: ChartShape[],\n showLabels: boolean = false,\n stacked: boolean | 'expand' = false,\n isHorizontal: boolean = false\n) => {\n return shapes.map((shape, index) => (\n <RechartsPrimitive.Bar\n key={shape.dataKey}\n {...shape}\n activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n maxBarSize={BAR_WIDTH}\n radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n stackId={stacked ? 'stack' : undefined}\n strokeWidth={0}>\n {showLabels ? (\n <RechartsPrimitive.LabelList\n position={isHorizontal ? 'insideRight' : 'top'}\n formatter={shape.formatter}\n offset={6}\n fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n fontSize={11}\n />\n ) : null}\n </RechartsPrimitive.Bar>\n ));\n};\n\nfunction getRadius(\n index: number,\n length: number,\n stacked: boolean,\n isHorizontal: boolean\n): number | [number, number, number, number] {\n if (stacked) {\n if (index === 0) {\n return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n }\n\n if (index === length - 1) {\n return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n }\n\n return 0;\n }\n\n return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}
1
+ {"version":3,"file":"BarChart.cjs","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n /** Orientation of the bars\n * @default false\n */\n orientation?: 'horizontal' | 'vertical';\n /** Show bar values as labels next to/inside the bar\n * @default vertical\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n orientation,\n showLabels = false,\n showLegend = false,\n stacked = false,\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n const isHorizontal = orientation === 'horizontal';\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n <RechartsPrimitive.BarChart\n data={data}\n // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 0,\n right: 0,\n // ensures labels on top of bars don't get cropped\n top: isHorizontal ? 0 : 10,\n }}\n layout={isHorizontal ? 'vertical' : undefined}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n {renderBars(shapes, showLabels, stacked, isHorizontal)}\n </RechartsPrimitive.BarChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n shapes: ChartShape[],\n showLabels: boolean = false,\n stacked: boolean | 'expand' = false,\n isHorizontal: boolean = false\n) => {\n return shapes.map((shape, index) => (\n <RechartsPrimitive.Bar\n key={shape.dataKey}\n {...shape}\n activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n maxBarSize={BAR_WIDTH}\n radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n stackId={stacked ? 'stack' : undefined}\n strokeWidth={0}>\n {showLabels ? (\n <RechartsPrimitive.LabelList\n position={isHorizontal ? 'insideRight' : 'top'}\n formatter={shape.formatter}\n offset={6}\n fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n fontSize={11}\n />\n ) : null}\n </RechartsPrimitive.Bar>\n ));\n};\n\nfunction getRadius(\n index: number,\n length: number,\n stacked: boolean,\n isHorizontal: boolean\n): number | [number, number, number, number] {\n if (stacked) {\n if (index === 0) {\n return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n }\n\n if (index === length - 1) {\n return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n }\n\n return 0;\n }\n\n return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\nBarChart.Bar = Bar;\n"],"names":["stripCartesianProps","useChart","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","Legend","getInverseThemeColor"],"mappings":"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"}
@@ -13,14 +13,14 @@ function BarChart(props) {
13
13
  children,
14
14
  className: customClassName,
15
15
  data,
16
- orientation: _1,
16
+ orientation,
17
17
  showLabels = false,
18
18
  showLegend = false,
19
19
  stacked = false,
20
20
  tooltipTitle,
21
21
  ...attributes
22
22
  } = stripCartesianProps(props);
23
- const isHorizontal = props.orientation === "horizontal";
23
+ const isHorizontal = orientation === "horizontal";
24
24
  const className = cn("relative aspect-video", { "pb-8": showLegend }, customClassName);
25
25
  const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart(children);
26
26
  return /* @__PURE__ */ React__default.createElement("div", { className, "data-taco": "chart-wrapper" }, /* @__PURE__ */ React__default.createElement(ChartWrapper, { ...attributes, className: "h-full w-full", "data-taco": "chart-bar" }, /* @__PURE__ */ React__default.createElement(
@@ -1 +1 @@
1
- {"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n /** Orientation of the bars\n * @default false\n */\n orientation?: 'horizontal' | 'vertical';\n /** Show bar values as labels next to/inside the bar\n * @default vertical\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n orientation: _1,\n showLabels = false,\n showLegend = false,\n stacked = false,\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<BarChartProps<TData>>(props);\n const isHorizontal = props.orientation === 'horizontal';\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n <RechartsPrimitive.BarChart\n data={data}\n // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 0,\n right: 0,\n // ensures labels on top of bars don't get cropped\n top: isHorizontal ? 0 : 10,\n }}\n layout={isHorizontal ? 'vertical' : undefined}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n {renderBars(shapes, showLabels, stacked, isHorizontal)}\n </RechartsPrimitive.BarChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n shapes: ChartShape[],\n showLabels: boolean = false,\n stacked: boolean | 'expand' = false,\n isHorizontal: boolean = false\n) => {\n return shapes.map((shape, index) => (\n <RechartsPrimitive.Bar\n key={shape.dataKey}\n {...shape}\n activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n maxBarSize={BAR_WIDTH}\n radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n stackId={stacked ? 'stack' : undefined}\n strokeWidth={0}>\n {showLabels ? (\n <RechartsPrimitive.LabelList\n position={isHorizontal ? 'insideRight' : 'top'}\n formatter={shape.formatter}\n offset={6}\n fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n fontSize={11}\n />\n ) : null}\n </RechartsPrimitive.Bar>\n ));\n};\n\nfunction getRadius(\n index: number,\n length: number,\n stacked: boolean,\n isHorizontal: boolean\n): number | [number, number, number, number] {\n if (stacked) {\n if (index === 0) {\n return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n }\n\n if (index === length - 1) {\n return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n }\n\n return 0;\n }\n\n return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"BarChart.js","sources":["../../../../src/charts/components/Bar/BarChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getInverseThemeColor } from '@/charts/utils/color';\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps } from '../types';\nimport type { ChartShape } from '../useChartData';\nimport { useChart } from '../useChartData';\n\nconst BAR_WIDTH = 18;\nexport type BarChartProps<TData extends object> = {\n /** Orientation of the bars\n * @default false\n */\n orientation?: 'horizontal' | 'vertical';\n /** Show bar values as labels next to/inside the bar\n * @default vertical\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of other each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n} & CartesianChartProps<TData>;\n\nexport function BarChart<TData extends object>(props: BarChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n orientation,\n showLabels = false,\n showLegend = false,\n stacked = false,\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<TData, BarChartProps<TData>>(props);\n const isHorizontal = orientation === 'horizontal';\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar\">\n <RechartsPrimitive.BarChart\n data={data}\n // style props - these are % so that they \"look okay\" for really wide charts as well as small ones\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 0,\n right: 0,\n // ensures labels on top of bars don't get cropped\n top: isHorizontal ? 0 : 10,\n }}\n layout={isHorizontal ? 'vertical' : undefined}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid horizontal={!isHorizontal} vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props, isHorizontal)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props, isHorizontal)} />\n {renderBars(shapes, showLabels, stacked, isHorizontal)}\n </RechartsPrimitive.BarChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n/**\n * Helper function to render bar shapes as Recharts Bar primitives. Extracted to be reusable across BarChart and ComposedChart.\n */\nexport const renderBars = (\n shapes: ChartShape[],\n showLabels: boolean = false,\n stacked: boolean | 'expand' = false,\n isHorizontal: boolean = false\n) => {\n return shapes.map((shape, index) => (\n <RechartsPrimitive.Bar\n key={shape.dataKey}\n {...shape}\n activeBar={{ fillOpacity: 1, strokeWidth: 0 }}\n maxBarSize={BAR_WIDTH}\n radius={getRadius(index, shapes.length, !!stacked, isHorizontal)}\n stackId={stacked ? 'stack' : undefined}\n strokeWidth={0}>\n {showLabels ? (\n <RechartsPrimitive.LabelList\n position={isHorizontal ? 'insideRight' : 'top'}\n formatter={shape.formatter}\n offset={6}\n fill={isHorizontal ? getInverseThemeColor(shape.color ?? '') : 'black'}\n fontSize={11}\n />\n ) : null}\n </RechartsPrimitive.Bar>\n ));\n};\n\nfunction getRadius(\n index: number,\n length: number,\n stacked: boolean,\n isHorizontal: boolean\n): number | [number, number, number, number] {\n if (stacked) {\n if (index === 0) {\n return isHorizontal ? [3, 0, 0, 3] : [0, 0, 3, 3];\n }\n\n if (index === length - 1) {\n return isHorizontal ? [0, 3, 3, 0] : [3, 3, 0, 0];\n }\n\n return 0;\n }\n\n return 3;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\nBarChart.Bar = Bar;\n"],"names":["React"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChartWrapper.cjs","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport './style.css';\n\nexport type ChartWrapperProps = {\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n onSetWidth?: (width: number) => void;\n} & React.ComponentProps<'div'>;\nexport function ChartWrapper(props: ChartWrapperProps) {\n const { onSetWidth: handleSetWidth, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n if (ref.current && typeof handleSetWidth === 'function') {\n const rect = ref.current.getBoundingClientRect();\n handleSetWidth(rect.width);\n }\n }, [ref]);\n\n const className = cn('m-auto flex justify-center', attributes.className);\n\n return (\n <div {...attributes} className={className} ref={ref}>\n <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n );\n}\n"],"names":["RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,GAAG,8BAA8B,WAAW,SAAS;AAEvE,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvC,sBAAA,cAACA,6BAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;;"}
1
+ {"version":3,"file":"ChartWrapper.cjs","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport './style.css';\n\nexport type ChartWrapperProps = {\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n onSetWidth?: (width: number) => void;\n} & React.ComponentProps<'div'>;\n\nexport function ChartWrapper(props: ChartWrapperProps) {\n const { onSetWidth: handleSetWidth, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n if (ref.current && typeof handleSetWidth === 'function') {\n const rect = ref.current.getBoundingClientRect();\n handleSetWidth(rect.width);\n }\n }, [ref]);\n\n const className = cn('m-auto flex justify-center', attributes.className);\n\n return (\n <div {...attributes} className={className} ref={ref}>\n <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n );\n}\n"],"names":["RechartsPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAWO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,GAAG,8BAA8B,WAAW,SAAS;AAEvE,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvC,sBAAA,cAACA,6BAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChartWrapper.js","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport './style.css';\n\nexport type ChartWrapperProps = {\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n onSetWidth?: (width: number) => void;\n} & React.ComponentProps<'div'>;\nexport function ChartWrapper(props: ChartWrapperProps) {\n const { onSetWidth: handleSetWidth, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n if (ref.current && typeof handleSetWidth === 'function') {\n const rect = ref.current.getBoundingClientRect();\n handleSetWidth(rect.width);\n }\n }, [ref]);\n\n const className = cn('m-auto flex justify-center', attributes.className);\n\n return (\n <div {...attributes} className={className} ref={ref}>\n <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n );\n}\n"],"names":["React"],"mappings":";;;;AAUO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAMA,eAAM,OAAuB,IAAI;AAE7CA,iBAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,GAAG,8BAA8B,WAAW,SAAS;AAEvE,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvCA,+BAAA,cAAC,kBAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;"}
1
+ {"version":3,"file":"ChartWrapper.js","sources":["../../../src/charts/components/ChartWrapper.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport './style.css';\n\nexport type ChartWrapperProps = {\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n onSetWidth?: (width: number) => void;\n} & React.ComponentProps<'div'>;\n\nexport function ChartWrapper(props: ChartWrapperProps) {\n const { onSetWidth: handleSetWidth, ...attributes } = props;\n const ref = React.useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n if (ref.current && typeof handleSetWidth === 'function') {\n const rect = ref.current.getBoundingClientRect();\n handleSetWidth(rect.width);\n }\n }, [ref]);\n\n const className = cn('m-auto flex justify-center', attributes.className);\n\n return (\n <div {...attributes} className={className} ref={ref}>\n <RechartsPrimitive.ResponsiveContainer>{props.children}</RechartsPrimitive.ResponsiveContainer>\n </div>\n );\n}\n"],"names":["React"],"mappings":";;;;AAWO,SAAS,aAAa,OAA0B;AACnD,QAAM,EAAE,YAAY,gBAAgB,GAAG,eAAe;AACtD,QAAM,MAAMA,eAAM,OAAuB,IAAI;AAE7CA,iBAAM,gBAAgB,MAAM;AACxB,QAAI,IAAI,WAAW,OAAO,mBAAmB,YAAY;AACrD,YAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,qBAAe,KAAK,KAAK;AAAA,IAC7B;AAAA,EACJ,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,YAAY,GAAG,8BAA8B,WAAW,SAAS;AAEvE,SACIA,+BAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,IAAA,GACvCA,+BAAA,cAAC,kBAAkB,qBAAlB,MAAuC,MAAM,QAAS,CAC3D;AAER;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BarLineChart.cjs","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { renderBars } from '../Bar/BarChart';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { renderLines } from '../Line/LineChart';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type BarLineChartProps<TData extends object> = {\n /** Show bar values as labels next to/inside the bar\n * @default false\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Show dots for each data point on lines\n * @default false\n */\n showDots?: boolean;\n /** Interpolation type of the line\n * @default linear\n */\n lineType?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLabels = false,\n showLegend = false,\n stacked = false,\n showDots = false,\n lineType = 'linear',\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n // Separate bars and lines based on child component type to identify bar dataKeys\n const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n // Apply same fallback as useChart: dataKey ?? label\n const barDataKeys = new Set(\n barChildren\n .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n .map(child => {\n const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n return props.dataKey ?? props.label;\n })\n );\n\n // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n <RechartsPrimitive.ComposedChart\n data={data}\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 4,\n right: 4,\n top: 10,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {renderBars(barShapes, showLabels, stacked, false)}\n {renderLines(lineShapes, showDots, lineType)}\n </RechartsPrimitive.ComposedChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartLineProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","props","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","renderBars","renderLines","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAA8C,KAAK;AAEvD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAG3F,QAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAAS,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtDC,SAAAA,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChDC,sBAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;;"}
1
+ {"version":3,"file":"BarLineChart.cjs","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { renderBars } from '../Bar/BarChart';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { renderLines } from '../Line/LineChart';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type BarLineChartProps<TData extends object> = {\n /** Show bar values as labels next to/inside the bar\n * @default false\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Show dots for each data point on lines\n * @default false\n */\n showDots?: boolean;\n /** Interpolation type of the line\n * @default linear\n */\n lineType?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLabels = false,\n showLegend = false,\n stacked = false,\n showDots = false,\n lineType = 'linear',\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<TData, BarLineChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n // Separate bars and lines based on child component type to identify bar dataKeys\n const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n // Apply same fallback as useChart: dataKey ?? label\n const barDataKeys = new Set(\n barChildren\n .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n .map(child => {\n const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n return props.dataKey ?? props.label;\n })\n );\n\n // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n <RechartsPrimitive.ComposedChart\n data={data}\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 4,\n right: 4,\n top: 10,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {renderBars(barShapes, showLabels, stacked, false)}\n {renderLines(lineShapes, showDots, lineType)}\n </RechartsPrimitive.ComposedChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartLineProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["stripCartesianProps","useChart","props","ChartWrapper","RechartsPrimitive","Tooltip","getAxisProps","renderBars","renderLines","Legend"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACHA,OAAAA,oBAAqD,KAAK;AAE9D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAeC,aAAAA,SAAgB,QAAQ;AAG3F,QAAM,cAAc,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAAS,MAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACI,sBAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjC,sBAAA,cAACC,aAAAA,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9D,sBAAA;AAAA,IAACC,6BAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/C,sBAAA,cAACA,6BAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClD,sBAAA,cAACA,6BAAkB,SAAlB,EAA0B,SAAS,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtE,sBAAA,cAACD,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACvD,sBAAA,cAACF,6BAAkB,OAAlB,EAAyB,GAAGE,oBAAa,KAAK,KAAK,GAAG;AAAA,IACtDC,SAAAA,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChDC,sBAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACG,sBAAA,cAACC,OAAAA,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"BarLineChart.js","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { renderBars } from '../Bar/BarChart';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { renderLines } from '../Line/LineChart';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type BarLineChartProps<TData extends object> = {\n /** Show bar values as labels next to/inside the bar\n * @default false\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Show dots for each data point on lines\n * @default false\n */\n showDots?: boolean;\n /** Interpolation type of the line\n * @default linear\n */\n lineType?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLabels = false,\n showLegend = false,\n stacked = false,\n showDots = false,\n lineType = 'linear',\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<BarLineChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n // Separate bars and lines based on child component type to identify bar dataKeys\n const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n // Apply same fallback as useChart: dataKey ?? label\n const barDataKeys = new Set(\n barChildren\n .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n .map(child => {\n const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n return props.dataKey ?? props.label;\n })\n );\n\n // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n <RechartsPrimitive.ComposedChart\n data={data}\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 4,\n right: 4,\n top: 10,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {renderBars(barShapes, showLabels, stacked, false)}\n {renderLines(lineShapes, showDots, lineType)}\n </RechartsPrimitive.ComposedChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartLineProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["React","props"],"mappings":";;;;;;;;;;AAiCO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH,oBAA8C,KAAK;AAEvD,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAG3F,QAAM,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAASA,eAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACID,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChD,YAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;"}
1
+ {"version":3,"file":"BarLineChart.js","sources":["../../../../src/charts/components/Composed/BarLineChart.tsx"],"sourcesContent":["import cn from 'clsx';\nimport React from 'react';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { getAxisProps, stripCartesianProps } from '@/charts/utils/common';\n\nimport { renderBars } from '../Bar/BarChart';\nimport { ChartWrapper } from '../ChartWrapper';\nimport { Legend } from '../Legend';\nimport { renderLines } from '../Line/LineChart';\nimport { Tooltip } from '../Tooltip';\nimport type { ChartChildProps, CartesianChartProps, CurveType } from '../types';\nimport { useChart } from '../useChartData';\n\nexport type BarLineChartProps<TData extends object> = {\n /** Show bar values as labels next to/inside the bar\n * @default false\n */\n showLabels?: boolean;\n /** Stack bars on top of one another, instead of next to each other. 'expand' fills the available space\n * @default false\n */\n stacked?: boolean | 'expand';\n /** Show dots for each data point on lines\n * @default false\n */\n showDots?: boolean;\n /** Interpolation type of the line\n * @default linear\n */\n lineType?: CurveType;\n} & CartesianChartProps<TData>;\n\nexport function BarLineChart<TData extends object>(props: BarLineChartProps<TData>) {\n const {\n children,\n className: customClassName,\n data,\n showLabels = false,\n showLegend = false,\n stacked = false,\n showDots = false,\n lineType = 'linear',\n tooltipTitle,\n ...attributes\n } = stripCartesianProps<TData, BarLineChartProps<TData>>(props);\n\n const className = cn('relative aspect-video', { 'pb-8': showLegend }, customClassName);\n const { items, shapes, activeIndex, setActiveIndex, toggleItem } = useChart<TData>(children);\n\n // Separate bars and lines based on child component type to identify bar dataKeys\n const barChildren = React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === Bar);\n // Apply same fallback as useChart: dataKey ?? label\n const barDataKeys = new Set(\n barChildren\n .filter(child => React.isValidElement<ChartChildProps<TData>>(child))\n .map(child => {\n const props = (child as React.ReactElement<ChartChildProps<TData>>).props;\n return props.dataKey ?? props.label;\n })\n );\n\n // Filter shapes from the main useChart call in order to ensure we are not rendering bars or lines that are currently hidden.\n const barShapes = shapes.filter(shape => barDataKeys.has(shape.dataKey as keyof TData & string));\n const lineShapes = shapes.filter(shape => !barDataKeys.has(shape.dataKey as keyof TData & string));\n\n return (\n <div className={className} data-taco=\"chart-wrapper\">\n <ChartWrapper {...attributes} className=\"h-full w-full\" data-taco=\"chart-bar-line\">\n <RechartsPrimitive.ComposedChart\n data={data}\n barCategoryGap=\"15%\"\n barGap=\"7.5%\"\n margin={{\n bottom: 0,\n left: 4,\n right: 4,\n top: 10,\n }}\n stackOffset={stacked === 'expand' ? 'expand' : undefined}>\n <RechartsPrimitive.CartesianGrid vertical={false} />\n <RechartsPrimitive.Tooltip content={<Tooltip title={tooltipTitle} />} />\n <RechartsPrimitive.XAxis {...getAxisProps('x', props)} />\n <RechartsPrimitive.YAxis {...getAxisProps('y', props)} />\n {renderBars(barShapes, showLabels, stacked, false)}\n {renderLines(lineShapes, showDots, lineType)}\n </RechartsPrimitive.ComposedChart>\n </ChartWrapper>\n {showLegend ? (\n <Legend<TData> items={items} hoverIndex={activeIndex} onHover={setActiveIndex} onToggle={toggleItem} />\n ) : null}\n </div>\n );\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartBarProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Bar<TData extends object>(_: BarLineChartBarProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// oxlint-disable-next-line no-empty-object-type\nexport type BarLineChartLineProps<TData extends object> = {} & ChartChildProps<TData>;\n\nfunction Line<TData extends object>(_: BarLineChartLineProps<TData>): React.JSX.Element | null {\n return null;\n}\n\n// Attach the marker components to BarLineChart\nBarLineChart.Bar = Bar;\nBarLineChart.Line = Line;\n"],"names":["React","props"],"mappings":";;;;;;;;;;AAiCO,SAAS,aAAmC,OAAiC;AAChF,QAAM;AAAA,IACF;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,aAAa;AAAA,IACb,aAAa;AAAA,IACb,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH,oBAAqD,KAAK;AAE9D,QAAM,YAAY,GAAG,yBAAyB,EAAE,QAAQ,WAAA,GAAc,eAAe;AACrF,QAAM,EAAE,OAAO,QAAQ,aAAa,gBAAgB,WAAA,IAAe,SAAgB,QAAQ;AAG3F,QAAM,cAAcA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAASA,eAAM,eAAe,KAAK,KAAK,MAAM,SAAS,GAAG;AAEtH,QAAM,cAAc,IAAI;AAAA,IACpB,YACK,OAAO,CAAA,UAASA,eAAM,eAAuC,KAAK,CAAC,EACnE,IAAI,CAAA,UAAS;AACV,YAAMC,SAAS,MAAqD;AACpE,aAAOA,OAAM,WAAWA,OAAM;AAAA,IAClC,CAAC;AAAA,EAAA;AAIT,QAAM,YAAY,OAAO,OAAO,CAAA,UAAS,YAAY,IAAI,MAAM,OAA+B,CAAC;AAC/F,QAAM,aAAa,OAAO,OAAO,CAAA,UAAS,CAAC,YAAY,IAAI,MAAM,OAA+B,CAAC;AAEjG,SACID,+BAAA,cAAC,OAAA,EAAI,WAAsB,aAAU,gBAAA,GACjCA,+BAAA,cAAC,cAAA,EAAc,GAAG,YAAY,WAAU,iBAAgB,aAAU,iBAAA,GAC9DA,+BAAA;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACG;AAAA,MACA,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,QAAQ;AAAA,QACJ,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,QACP,KAAK;AAAA,MAAA;AAAA,MAET,aAAa,YAAY,WAAW,WAAW;AAAA,IAAA;AAAA,IAC/CA,+BAAA,cAAC,kBAAkB,eAAlB,EAAgC,UAAU,OAAO;AAAA,IAClDA,+BAAA,cAAC,kBAAkB,SAAlB,EAA0B,SAASA,+BAAA,cAAC,SAAA,EAAQ,OAAO,aAAA,CAAc,EAAA,CAAI;AAAA,IACtEA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACvDA,+BAAA,cAAC,kBAAkB,OAAlB,EAAyB,GAAG,aAAa,KAAK,KAAK,GAAG;AAAA,IACtD,WAAW,WAAW,YAAY,SAAS,KAAK;AAAA,IAChD,YAAY,YAAY,UAAU,QAAQ;AAAA,EAAA,CAEnD,GACC,aACGA,+BAAA,cAAC,QAAA,EAAc,OAAc,YAAY,aAAa,SAAS,gBAAgB,UAAU,WAAA,CAAY,IACrG,IACR;AAER;AAKA,SAAS,IAA0B,GAA0D;AACzF,SAAO;AACX;AAKA,SAAS,KAA2B,GAA2D;AAC3F,SAAO;AACX;AAGA,aAAa,MAAM;AACnB,aAAa,OAAO;"}
@@ -25,113 +25,124 @@ function _interopNamespaceDefault(e) {
25
25
  }
26
26
  const RechartsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RechartsPrimitive);
27
27
  const Segment = (_) => null;
28
- const LegacyDonutChart = function LegacyDonutChart2({ children, formatter, onClick, label }) {
29
- const ref = React.useRef(null);
30
- const [radius, setRadius] = React.useState(0);
31
- const [hoveredItem, setHoveredItem] = React.useState([]);
32
- const [selectedItem, setSelectedItem] = React.useState([]);
33
- React.useEffect(() => {
34
- if (ref.current) {
35
- const rect = ref.current.parentElement?.getBoundingClientRect();
36
- if (rect) {
37
- const width = rect.width / 2;
38
- const max = rect.height < width ? rect.height : width;
39
- setRadius(max / 2);
40
- }
41
- }
42
- }, [ref.current]);
43
- const diameter = radius * 2;
44
- const data = React.Children.map(children, (child) => ({
45
- id: child.props.id,
46
- color: child.props.color,
47
- label: child.props.label,
48
- value: child.props.value
49
- }));
50
- const total = data.reduce((accum, entry) => accum + entry.value, 0);
51
- const handleLegendClick = (entry) => {
52
- const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
53
- const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
54
- if (onClick && !isCurrentSegmentActive) {
55
- onClick(entry);
56
- }
57
- setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
58
- };
59
- const handlePieClick = React.useCallback(
60
- (pieId) => {
61
- if (onClick && pieId !== void 0) {
62
- const pieProps = data.find((item) => item.id === pieId);
63
- onClick(pieProps);
28
+ const LegacyDonutChart = Object.assign(
29
+ function LegacyDonutChart2({ children, formatter, onClick, label }) {
30
+ const ref = React.useRef(null);
31
+ const [radius, setRadius] = React.useState(0);
32
+ const [hoveredItem, setHoveredItem] = React.useState([]);
33
+ const [selectedItem, setSelectedItem] = React.useState([]);
34
+ React.useEffect(() => {
35
+ if (ref.current) {
36
+ const rect = ref.current.parentElement?.getBoundingClientRect();
37
+ if (rect) {
38
+ const width = rect.width / 2;
39
+ const max = rect.height < width ? rect.height : width;
40
+ setRadius(max / 2);
41
+ }
64
42
  }
65
- },
66
- [onClick, data]
67
- );
68
- const activeShapeColor = React.useMemo(() => {
69
- const getSegmentColor = (item) => item.reduce((colors, itemId) => {
70
- const visibleHoveredItem = data.find((dataItem) => dataItem.id === itemId);
71
- if (visibleHoveredItem) {
72
- colors[visibleHoveredItem.id] = visibleHoveredItem.color;
43
+ }, [ref.current]);
44
+ const diameter = radius * 2;
45
+ const data = React.Children.map(children, (child) => ({
46
+ id: child.props.id,
47
+ color: child.props.color,
48
+ label: child.props.label,
49
+ value: child.props.value
50
+ }));
51
+ const total = data.reduce((accum, entry) => accum + entry.value, 0);
52
+ const handleLegendClick = (entry) => {
53
+ const nextSelectedItem = Array.isArray(entry) ? entry.map((entryItem) => entryItem.id) : [entry.id];
54
+ const isCurrentSegmentActive = selectedItem.slice().sort().join(",") === nextSelectedItem.sort().join(",");
55
+ if (onClick && !isCurrentSegmentActive) {
56
+ onClick(entry);
73
57
  }
74
- return colors;
75
- }, {});
76
- const hoveredSegmentColor = getSegmentColor(hoveredItem);
77
- const selectedSegmentColor = getSegmentColor(selectedItem);
78
- return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;
79
- }, [hoveredItem, selectedItem]);
80
- if (ref.current && !radius) {
81
- return null;
82
- }
83
- const getActiveIndex = () => {
84
- if (hoveredItem.length > 0) {
85
- return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
86
- }
87
- return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
88
- };
89
- const content = () => {
90
- const elements = React.Children.toArray(children).filter(
91
- (child) => React.isValidElement(child)
58
+ setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);
59
+ };
60
+ const handlePieClick = React.useCallback(
61
+ (pieId) => {
62
+ if (onClick && pieId !== void 0) {
63
+ const pieProps = data.find((item) => item.id === pieId);
64
+ onClick(pieProps);
65
+ }
66
+ },
67
+ [onClick, data]
92
68
  );
93
- return elements.length > 0 ? elements.map((child, index) => {
94
- return /* @__PURE__ */ React.createElement(
95
- RechartsPrimitive__namespace.Cell,
96
- {
97
- key: `cell-${index}`,
98
- name: child.props.label,
99
- fill: color.getThemeColor(child.props.color) ?? color.getThemeColor("blue-300")
69
+ const activeShapeColor = React.useMemo(() => {
70
+ const getSegmentColor = (item) => item.reduce((colors, itemId) => {
71
+ const visibleHoveredItem = data.find((dataItem) => dataItem.id === itemId);
72
+ if (visibleHoveredItem) {
73
+ colors[visibleHoveredItem.id] = visibleHoveredItem.color;
100
74
  }
101
- );
102
- }) : /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Cell, { key: "empty-chart", name: "", fill: color.getThemeColor("grey-200") });
103
- };
104
- return /* @__PURE__ */ React.createElement("div", { className: "relative flex h-full w-full", ref }, /* @__PURE__ */ React.createElement(CenteredLabel.CenteredLabel, { radius, label, total, formatter }), /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.PieChart, { data, height: diameter, width: diameter, style: { transform: "rotate(90deg) scale(-1,1)" } }, /* @__PURE__ */ React.createElement(
105
- RechartsPrimitive__namespace.Pie,
106
- {
107
- isAnimationActive: false,
108
- activeIndex: getActiveIndex(),
109
- activeShape: /* @__PURE__ */ React.createElement(ActiveShape.ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
110
- data: data.length > 0 ? data : [],
111
- dataKey: "value",
112
- innerRadius: radius - util.HOVER_DONUT_WIDTH - util.DONUT_WIDTH,
113
- onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
114
- onMouseLeave: () => setHoveredItem([]),
115
- outerRadius: radius - util.HOVER_DONUT_WIDTH,
116
- paddingAngle: 2.5,
117
- stroke: "0",
118
- rootTabIndex: -1
119
- },
120
- content()
121
- )), /* @__PURE__ */ React.createElement(
122
- Legend.Legend,
123
- {
124
- data,
125
- onClick: handleLegendClick,
126
- total,
127
- setHoveredItem,
128
- label,
129
- hoveredItem,
130
- selectedItem,
131
- formatter
75
+ return colors;
76
+ }, {});
77
+ const hoveredSegmentColor = getSegmentColor(hoveredItem);
78
+ const selectedSegmentColor = getSegmentColor(selectedItem);
79
+ return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;
80
+ }, [hoveredItem, selectedItem]);
81
+ if (ref.current && !radius) {
82
+ return null;
132
83
  }
133
- ));
134
- };
135
- LegacyDonutChart.Segment = Segment;
84
+ const getActiveIndex = () => {
85
+ if (hoveredItem.length > 0) {
86
+ return hoveredItem.map((itemId) => data.findIndex((element) => element.id === itemId));
87
+ }
88
+ return selectedItem.map((selectedItemId) => data.findIndex((element) => element.id === selectedItemId));
89
+ };
90
+ const content = () => {
91
+ const elements = React.Children.toArray(children).filter(
92
+ (child) => React.isValidElement(child)
93
+ );
94
+ return elements.length > 0 ? elements.map((child, index) => {
95
+ return /* @__PURE__ */ React.createElement(
96
+ RechartsPrimitive__namespace.Cell,
97
+ {
98
+ key: `cell-${index}`,
99
+ name: child.props.label,
100
+ fill: color.getThemeColor(child.props.color) ?? color.getThemeColor("blue-300")
101
+ }
102
+ );
103
+ }) : /* @__PURE__ */ React.createElement(RechartsPrimitive__namespace.Cell, { key: "empty-chart", name: "", fill: color.getThemeColor("grey-200") });
104
+ };
105
+ return /* @__PURE__ */ React.createElement("div", { className: "relative flex h-full w-full", ref }, /* @__PURE__ */ React.createElement(CenteredLabel.CenteredLabel, { radius, label, total, formatter }), /* @__PURE__ */ React.createElement(
106
+ RechartsPrimitive__namespace.PieChart,
107
+ {
108
+ data,
109
+ height: diameter,
110
+ width: diameter,
111
+ style: { transform: "rotate(90deg) scale(-1,1)" }
112
+ },
113
+ /* @__PURE__ */ React.createElement(
114
+ RechartsPrimitive__namespace.Pie,
115
+ {
116
+ isAnimationActive: false,
117
+ activeIndex: getActiveIndex(),
118
+ activeShape: /* @__PURE__ */ React.createElement(ActiveShape.ActiveShape, { pieColors: activeShapeColor, onClick: handlePieClick }),
119
+ data: data.length > 0 ? data : [],
120
+ dataKey: "value",
121
+ innerRadius: radius - util.HOVER_DONUT_WIDTH - util.DONUT_WIDTH,
122
+ onMouseEnter: (segment) => data.length > 0 && setHoveredItem([segment.id]),
123
+ onMouseLeave: () => setHoveredItem([]),
124
+ outerRadius: radius - util.HOVER_DONUT_WIDTH,
125
+ paddingAngle: 2.5,
126
+ stroke: "0",
127
+ rootTabIndex: -1
128
+ },
129
+ content()
130
+ )
131
+ ), /* @__PURE__ */ React.createElement(
132
+ Legend.Legend,
133
+ {
134
+ data,
135
+ onClick: handleLegendClick,
136
+ total,
137
+ setHoveredItem,
138
+ label,
139
+ hoveredItem,
140
+ selectedItem,
141
+ formatter
142
+ }
143
+ ));
144
+ },
145
+ { Segment }
146
+ );
136
147
  exports.LegacyDonutChart = LegacyDonutChart;
137
148
  //# sourceMappingURL=LegacyDonutChart.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '@/charts/utils/color';\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\nexport type LegacyDonutChartSegmentProps = {\n color: Color;\n id: string;\n label: string;\n value: number;\n};\n\nexport type LegacyDonutSegmentIds = string[];\n\nexport type LegacyDonutChartProps = {\n children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n formatter?: (value: number) => string;\n onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n label: string;\n};\n\nexport const LegacyDonutChart = function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n const [radius, setRadius] = React.useState<number>(0);\n\n const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n React.useEffect(() => {\n if (ref.current) {\n const rect = ref.current.parentElement?.getBoundingClientRect();\n\n if (rect) {\n const width = rect.width / 2;\n const max: number = rect.height < width ? rect.height : width;\n setRadius(max / 2);\n }\n }\n }, [ref.current]);\n\n const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n id: child.props.id,\n color: child.props.color,\n label: child.props.label,\n value: child.props.value,\n }));\n\n const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n // Using slice to avoid mutation of the react state 'selectedItem'\n const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n if (onClick && !isCurrentSegmentActive) {\n onClick(entry);\n }\n\n setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n };\n const handlePieClick = React.useCallback(\n (pieId: string | undefined) => {\n if (onClick && pieId !== undefined) {\n const pieProps = data.find(item => item.id === pieId);\n\n onClick(pieProps as LegacyDonutChartSegmentProps);\n }\n },\n [onClick, data]\n );\n\n const activeShapeColor = React.useMemo(() => {\n const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n item.reduce<Record<string, string>>((colors, itemId) => {\n const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n if (visibleHoveredItem) {\n colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n }\n\n return colors;\n }, {});\n\n const hoveredSegmentColor = getSegmentColor(hoveredItem);\n const selectedSegmentColor = getSegmentColor(selectedItem);\n\n return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n }, [hoveredItem, selectedItem]);\n\n if (ref.current && !radius) {\n return null;\n }\n\n const getActiveIndex = () => {\n if (hoveredItem.length > 0) {\n return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n }\n\n return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n };\n\n const content = () => {\n const elements = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n React.isValidElement<LegacyDonutChartSegmentProps>(child)\n );\n\n return elements.length > 0 ? (\n elements.map((child, index) => {\n return (\n <Recharts.Cell\n key={`cell-${index}`}\n name={child.props.label}\n fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n />\n );\n })\n ) : (\n <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n );\n };\n\n return (\n <div className=\"relative flex h-full w-full\" ref={ref}>\n <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n <Recharts.PieChart data={data} height={diameter} width={diameter} style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n <Recharts.Pie\n isAnimationActive={false}\n activeIndex={getActiveIndex()}\n activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n data={data.length > 0 ? data : []}\n dataKey=\"value\"\n innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n onMouseLeave={() => setHoveredItem([])}\n outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n paddingAngle={2.5}\n stroke=\"0\"\n // Prevents the pie group element from being focusable\n rootTabIndex={-1}>\n {content()}\n </Recharts.Pie>\n </Recharts.PieChart>\n <Legend\n data={data}\n onClick={handleLegendClick}\n total={total}\n setHoveredItem={setHoveredItem}\n label={label}\n hoveredItem={hoveredItem}\n selectedItem={selectedItem}\n formatter={formatter}\n />\n </div>\n );\n};\n\nLegacyDonutChart.Segment = Segment;\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}
1
+ {"version":3,"file":"LegacyDonutChart.cjs","sources":["../../../../src/charts/components/LegacyDonut/LegacyDonutChart.tsx"],"sourcesContent":["import React from 'react';\nimport * as Recharts from 'recharts';\n\nimport type { Color } from '@/charts/utils/color';\nimport { getThemeColor } from '@/charts/utils/color';\n\nimport { ActiveShape } from './ActiveShape';\nimport { CenteredLabel } from './CenteredLabel';\nimport { Legend } from './Legend';\nimport { DONUT_WIDTH, HOVER_DONUT_WIDTH } from './util';\n\nconst Segment = (_: LegacyDonutChartSegmentProps) => null;\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartSegmentProps = {\n color: Color;\n id: string;\n label: string;\n value: number;\n};\n\n/**\n * @deprecated\n */\nexport type LegacyDonutSegmentIds = string[];\n\n/**\n * @deprecated\n */\nexport type LegacyDonutChartProps = {\n children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];\n formatter?: (value: number) => string;\n onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;\n label: string;\n};\n\n/**\n * @deprecated Use DonutChart component instead\n */\nexport const LegacyDonutChart = Object.assign(\n function LegacyDonutChart({ children, formatter, onClick, label }: LegacyDonutChartProps) {\n const ref = React.useRef<HTMLDivElement>(null);\n const [radius, setRadius] = React.useState<number>(0);\n\n const [hoveredItem, setHoveredItem] = React.useState<LegacyDonutSegmentIds>([]);\n const [selectedItem, setSelectedItem] = React.useState<LegacyDonutSegmentIds>([]);\n\n React.useEffect(() => {\n if (ref.current) {\n const rect = ref.current.parentElement?.getBoundingClientRect();\n\n if (rect) {\n const width = rect.width / 2;\n const max: number = rect.height < width ? rect.height : width;\n setRadius(max / 2);\n }\n }\n }, [ref.current]);\n\n const diameter = radius * 2; // get dimensions of the parent container to find the max radius, so we can fill the container AND always have a 16px wide donut\n const data: LegacyDonutChartSegmentProps[] = React.Children.map(children, child => ({\n id: child.props.id,\n color: child.props.color,\n label: child.props.label,\n value: child.props.value,\n }));\n\n const total = data.reduce((accum, entry) => accum + entry.value, 0);\n\n const handleLegendClick = (entry: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]): void => {\n const nextSelectedItem = Array.isArray(entry) ? entry.map(entryItem => entryItem.id) : [entry.id];\n\n // Using slice to avoid mutation of the react state 'selectedItem'\n const isCurrentSegmentActive = selectedItem.slice().sort().join(',') === nextSelectedItem.sort().join(',');\n\n if (onClick && !isCurrentSegmentActive) {\n onClick(entry);\n }\n\n setSelectedItem(isCurrentSegmentActive ? [] : nextSelectedItem);\n };\n const handlePieClick = React.useCallback(\n (pieId: string | undefined) => {\n if (onClick && pieId !== undefined) {\n const pieProps = data.find(item => item.id === pieId);\n\n onClick(pieProps as LegacyDonutChartSegmentProps);\n }\n },\n [onClick, data]\n );\n\n const activeShapeColor = React.useMemo(() => {\n const getSegmentColor = (item: LegacyDonutSegmentIds) =>\n item.reduce<Record<string, string>>((colors, itemId) => {\n const visibleHoveredItem = data.find(dataItem => dataItem.id === itemId);\n\n if (visibleHoveredItem) {\n colors[visibleHoveredItem.id] = visibleHoveredItem.color;\n }\n\n return colors;\n }, {});\n\n const hoveredSegmentColor = getSegmentColor(hoveredItem);\n const selectedSegmentColor = getSegmentColor(selectedItem);\n\n return hoveredItem.length === 0 ? selectedSegmentColor : hoveredSegmentColor;\n }, [hoveredItem, selectedItem]);\n\n if (ref.current && !radius) {\n return null;\n }\n\n const getActiveIndex = () => {\n if (hoveredItem.length > 0) {\n return hoveredItem.map(itemId => data.findIndex(element => element.id === itemId));\n }\n\n return selectedItem.map(selectedItemId => data.findIndex(element => element.id === selectedItemId));\n };\n\n const content = () => {\n const elements = React.Children.toArray(children).filter(\n (child): child is React.ReactElement<LegacyDonutChartSegmentProps> =>\n React.isValidElement<LegacyDonutChartSegmentProps>(child)\n );\n\n return elements.length > 0 ? (\n elements.map((child, index) => {\n return (\n <Recharts.Cell\n key={`cell-${index}`}\n name={child.props.label}\n fill={getThemeColor(child.props.color) ?? getThemeColor('blue-300')}\n />\n );\n })\n ) : (\n <Recharts.Cell key=\"empty-chart\" name={''} fill={getThemeColor('grey-200')} />\n );\n };\n\n return (\n <div className=\"relative flex h-full w-full\" ref={ref}>\n <CenteredLabel radius={radius} label={label} total={total} formatter={formatter} />\n <Recharts.PieChart\n data={data}\n height={diameter}\n width={diameter}\n style={{ transform: 'rotate(90deg) scale(-1,1)' }}>\n <Recharts.Pie\n isAnimationActive={false}\n activeIndex={getActiveIndex()}\n activeShape={<ActiveShape pieColors={activeShapeColor} onClick={handlePieClick} />}\n data={data.length > 0 ? data : []}\n dataKey=\"value\"\n innerRadius={radius - HOVER_DONUT_WIDTH - DONUT_WIDTH} // offset the 12px wider hover state, and then make the donut 16px wide\n onMouseEnter={(segment: LegacyDonutChartSegmentProps) => data.length > 0 && setHoveredItem([segment.id])}\n onMouseLeave={() => setHoveredItem([])}\n outerRadius={radius - HOVER_DONUT_WIDTH} // offset the 12px wide hover state\n paddingAngle={2.5}\n stroke=\"0\"\n // Prevents the pie group element from being focusable\n rootTabIndex={-1}>\n {content()}\n </Recharts.Pie>\n </Recharts.PieChart>\n <Legend\n data={data}\n onClick={handleLegendClick}\n total={total}\n setHoveredItem={setHoveredItem}\n label={label}\n hoveredItem={hoveredItem}\n selectedItem={selectedItem}\n formatter={formatter}\n />\n </div>\n );\n },\n { Segment }\n);\n"],"names":["LegacyDonutChart","Recharts","getThemeColor","CenteredLabel","ActiveShape","HOVER_DONUT_WIDTH","DONUT_WIDTH","Legend"],"mappings":"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"}
@@ -1,19 +1,30 @@
1
1
  import { default as React } from 'react';
2
2
  import { Color } from '../../utils/color';
3
+ /**
4
+ * @deprecated
5
+ */
3
6
  export type LegacyDonutChartSegmentProps = {
4
7
  color: Color;
5
8
  id: string;
6
9
  label: string;
7
10
  value: number;
8
11
  };
12
+ /**
13
+ * @deprecated
14
+ */
9
15
  export type LegacyDonutSegmentIds = string[];
16
+ /**
17
+ * @deprecated
18
+ */
10
19
  export type LegacyDonutChartProps = {
11
20
  children: React.ReactElement<LegacyDonutChartSegmentProps> | React.ReactElement<LegacyDonutChartSegmentProps>[];
12
21
  formatter?: (value: number) => string;
13
22
  onClick?: (segment: LegacyDonutChartSegmentProps | LegacyDonutChartSegmentProps[]) => void;
14
23
  label: string;
15
24
  };
16
- export declare const LegacyDonutChart: {
17
- ({ children, formatter, onClick, label }: LegacyDonutChartProps): React.JSX.Element | null;
25
+ /**
26
+ * @deprecated Use DonutChart component instead
27
+ */
28
+ export declare const LegacyDonutChart: (({ children, formatter, onClick, label }: LegacyDonutChartProps) => React.JSX.Element | null) & {
18
29
  Segment: (_: LegacyDonutChartSegmentProps) => null;
19
30
  };