@salesmind-ai/design-system 0.3.3 → 0.3.4

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 (215) hide show
  1. package/dist/{SectionShell-BfBw5q0Y.d.cts → SectionShell-GlglHCzz.d.cts} +1 -0
  2. package/dist/{SectionShell-BfBw5q0Y.d.ts → SectionShell-GlglHCzz.d.ts} +1 -0
  3. package/dist/StatsSection-B8iD9L-o.d.ts +68 -0
  4. package/dist/StatsSection-wgd8Vge1.d.cts +68 -0
  5. package/dist/admin/index.cjs +2928 -68
  6. package/dist/admin/index.cjs.map +1 -1
  7. package/dist/admin/index.js +2915 -5
  8. package/dist/admin/index.js.map +1 -1
  9. package/dist/blog/index.cjs +1064 -53
  10. package/dist/blog/index.cjs.map +1 -1
  11. package/dist/blog/index.d.cts +1 -1
  12. package/dist/blog/index.d.ts +1 -1
  13. package/dist/blog/index.js +1054 -8
  14. package/dist/blog/index.js.map +1 -1
  15. package/dist/charts/index.cjs +2694 -46
  16. package/dist/charts/index.cjs.map +1 -1
  17. package/dist/charts/index.js +2680 -3
  18. package/dist/charts/index.js.map +1 -1
  19. package/dist/core/index.cjs +4333 -807
  20. package/dist/core/index.cjs.map +1 -1
  21. package/dist/core/index.js +4130 -14
  22. package/dist/core/index.js.map +1 -1
  23. package/dist/i18n/index.cjs +558 -86
  24. package/dist/i18n/index.cjs.map +1 -1
  25. package/dist/i18n/index.js +544 -1
  26. package/dist/i18n/index.js.map +1 -1
  27. package/dist/index.cjs +17140 -1432
  28. package/dist/index.cjs.map +1 -1
  29. package/dist/index.css +24 -13
  30. package/dist/index.css.map +1 -1
  31. package/dist/index.d.cts +2 -2
  32. package/dist/index.d.ts +2 -2
  33. package/dist/index.js +16785 -31
  34. package/dist/index.js.map +1 -1
  35. package/dist/marketing/index.cjs +3072 -142
  36. package/dist/marketing/index.cjs.map +1 -1
  37. package/dist/marketing/index.d.cts +1 -1
  38. package/dist/marketing/index.d.ts +1 -1
  39. package/dist/marketing/index.js +3042 -11
  40. package/dist/marketing/index.js.map +1 -1
  41. package/dist/motion/index.cjs +1222 -26
  42. package/dist/motion/index.cjs.map +1 -1
  43. package/dist/motion/index.js +1215 -2
  44. package/dist/motion/index.js.map +1 -1
  45. package/dist/nav/index.cjs +1518 -101
  46. package/dist/nav/index.cjs.map +1 -1
  47. package/dist/nav/index.css +24 -13
  48. package/dist/nav/index.css.map +1 -1
  49. package/dist/nav/index.js +1498 -4
  50. package/dist/nav/index.js.map +1 -1
  51. package/dist/report/index.cjs +2403 -171
  52. package/dist/report/index.cjs.map +1 -1
  53. package/dist/report/index.js +2363 -3
  54. package/dist/report/index.js.map +1 -1
  55. package/dist/sections/index.cjs +382 -28
  56. package/dist/sections/index.cjs.map +1 -1
  57. package/dist/sections/index.d.cts +15 -69
  58. package/dist/sections/index.d.ts +15 -69
  59. package/dist/sections/index.js +376 -4
  60. package/dist/sections/index.js.map +1 -1
  61. package/dist/social-proof/index.cjs +1250 -53
  62. package/dist/social-proof/index.cjs.map +1 -1
  63. package/dist/social-proof/index.d.cts +1 -1
  64. package/dist/social-proof/index.d.ts +1 -1
  65. package/dist/social-proof/index.js +1235 -6
  66. package/dist/social-proof/index.js.map +1 -1
  67. package/dist/theme/index.cjs +565 -38
  68. package/dist/theme/index.cjs.map +1 -1
  69. package/dist/theme/index.js +555 -2
  70. package/dist/theme/index.js.map +1 -1
  71. package/dist/web/client/index.cjs +491 -38
  72. package/dist/web/client/index.cjs.map +1 -1
  73. package/dist/web/client/index.js +483 -4
  74. package/dist/web/client/index.js.map +1 -1
  75. package/dist/web/index.cjs +1346 -158
  76. package/dist/web/index.cjs.map +1 -1
  77. package/dist/web/index.js +1305 -9
  78. package/dist/web/index.js.map +1 -1
  79. package/dist/web/server/index.cjs +563 -26
  80. package/dist/web/server/index.cjs.map +1 -1
  81. package/dist/web/server/index.js +560 -1
  82. package/dist/web/server/index.js.map +1 -1
  83. package/package.json +1 -1
  84. package/dist/chunk-2GARWEJK.js +0 -17
  85. package/dist/chunk-2GARWEJK.js.map +0 -1
  86. package/dist/chunk-3NKRFUAR.js +0 -37
  87. package/dist/chunk-3NKRFUAR.js.map +0 -1
  88. package/dist/chunk-3TGSIILM.cjs +0 -201
  89. package/dist/chunk-3TGSIILM.cjs.map +0 -1
  90. package/dist/chunk-4GM5BGBN.cjs +0 -801
  91. package/dist/chunk-4GM5BGBN.cjs.map +0 -1
  92. package/dist/chunk-5LGDEZWY.cjs +0 -2434
  93. package/dist/chunk-5LGDEZWY.cjs.map +0 -1
  94. package/dist/chunk-6H4DSTXR.js +0 -786
  95. package/dist/chunk-6H4DSTXR.js.map +0 -1
  96. package/dist/chunk-6UNG76Y2.js +0 -153
  97. package/dist/chunk-6UNG76Y2.js.map +0 -1
  98. package/dist/chunk-7PX2AZ6Y.js +0 -39
  99. package/dist/chunk-7PX2AZ6Y.js.map +0 -1
  100. package/dist/chunk-B6AVAX4F.js +0 -1415
  101. package/dist/chunk-B6AVAX4F.js.map +0 -1
  102. package/dist/chunk-BILT5KD3.js +0 -264
  103. package/dist/chunk-BILT5KD3.js.map +0 -1
  104. package/dist/chunk-C2BCDNAV.js +0 -24
  105. package/dist/chunk-C2BCDNAV.js.map +0 -1
  106. package/dist/chunk-CH42VPWE.cjs +0 -421
  107. package/dist/chunk-CH42VPWE.cjs.map +0 -1
  108. package/dist/chunk-CJ2MKVAF.cjs +0 -46
  109. package/dist/chunk-CJ2MKVAF.cjs.map +0 -1
  110. package/dist/chunk-DP74LUXG.cjs +0 -98
  111. package/dist/chunk-DP74LUXG.cjs.map +0 -1
  112. package/dist/chunk-E7D6EKJ4.cjs +0 -44
  113. package/dist/chunk-E7D6EKJ4.cjs.map +0 -1
  114. package/dist/chunk-ECXBTUH6.cjs +0 -584
  115. package/dist/chunk-ECXBTUH6.cjs.map +0 -1
  116. package/dist/chunk-EFRAP5ES.js +0 -157
  117. package/dist/chunk-EFRAP5ES.js.map +0 -1
  118. package/dist/chunk-F6YYWMME.js +0 -485
  119. package/dist/chunk-F6YYWMME.js.map +0 -1
  120. package/dist/chunk-FAFAP4L5.js +0 -183
  121. package/dist/chunk-FAFAP4L5.js.map +0 -1
  122. package/dist/chunk-GUZIMHWS.js +0 -1608
  123. package/dist/chunk-GUZIMHWS.js.map +0 -1
  124. package/dist/chunk-H2Y6BSTL.cjs +0 -69
  125. package/dist/chunk-H2Y6BSTL.cjs.map +0 -1
  126. package/dist/chunk-HN4PHABT.js +0 -126
  127. package/dist/chunk-HN4PHABT.js.map +0 -1
  128. package/dist/chunk-HRENHNDJ.js +0 -211
  129. package/dist/chunk-HRENHNDJ.js.map +0 -1
  130. package/dist/chunk-I75BFEYT.cjs +0 -2561
  131. package/dist/chunk-I75BFEYT.cjs.map +0 -1
  132. package/dist/chunk-IFRATNLU.js +0 -562
  133. package/dist/chunk-IFRATNLU.js.map +0 -1
  134. package/dist/chunk-IYPXJ6YC.cjs +0 -69
  135. package/dist/chunk-IYPXJ6YC.cjs.map +0 -1
  136. package/dist/chunk-JPJN4YBC.js +0 -409
  137. package/dist/chunk-JPJN4YBC.js.map +0 -1
  138. package/dist/chunk-KBA2LFBG.js +0 -62
  139. package/dist/chunk-KBA2LFBG.js.map +0 -1
  140. package/dist/chunk-KCKUSU2M.cjs +0 -166
  141. package/dist/chunk-KCKUSU2M.cjs.map +0 -1
  142. package/dist/chunk-KJ2OXQF4.js +0 -287
  143. package/dist/chunk-KJ2OXQF4.js.map +0 -1
  144. package/dist/chunk-KNQEIU7O.cjs +0 -1202
  145. package/dist/chunk-KNQEIU7O.cjs.map +0 -1
  146. package/dist/chunk-KVGSVGRK.cjs +0 -569
  147. package/dist/chunk-KVGSVGRK.cjs.map +0 -1
  148. package/dist/chunk-L352JRV6.cjs +0 -105
  149. package/dist/chunk-L352JRV6.cjs.map +0 -1
  150. package/dist/chunk-LJADZITX.cjs +0 -298
  151. package/dist/chunk-LJADZITX.cjs.map +0 -1
  152. package/dist/chunk-LMJPWXTZ.cjs +0 -194
  153. package/dist/chunk-LMJPWXTZ.cjs.map +0 -1
  154. package/dist/chunk-LOWEAQST.js +0 -701
  155. package/dist/chunk-LOWEAQST.js.map +0 -1
  156. package/dist/chunk-MDB2WCRQ.cjs +0 -137
  157. package/dist/chunk-MDB2WCRQ.cjs.map +0 -1
  158. package/dist/chunk-MQDEE7HC.cjs +0 -283
  159. package/dist/chunk-MQDEE7HC.cjs.map +0 -1
  160. package/dist/chunk-MQRB634A.cjs +0 -34
  161. package/dist/chunk-MQRB634A.cjs.map +0 -1
  162. package/dist/chunk-MTI27RDV.js +0 -185
  163. package/dist/chunk-MTI27RDV.js.map +0 -1
  164. package/dist/chunk-MU6GW5ZV.js +0 -2317
  165. package/dist/chunk-MU6GW5ZV.js.map +0 -1
  166. package/dist/chunk-NN3TUHIH.js +0 -28
  167. package/dist/chunk-NN3TUHIH.js.map +0 -1
  168. package/dist/chunk-NT4LBP7D.cjs +0 -111
  169. package/dist/chunk-NT4LBP7D.cjs.map +0 -1
  170. package/dist/chunk-OLV7OD3X.cjs +0 -502
  171. package/dist/chunk-OLV7OD3X.cjs.map +0 -1
  172. package/dist/chunk-OXNXEQY7.js +0 -2538
  173. package/dist/chunk-OXNXEQY7.js.map +0 -1
  174. package/dist/chunk-P5BOFE5A.js +0 -546
  175. package/dist/chunk-P5BOFE5A.js.map +0 -1
  176. package/dist/chunk-Q2MFGYTE.cjs +0 -1449
  177. package/dist/chunk-Q2MFGYTE.cjs.map +0 -1
  178. package/dist/chunk-Q75DBVDY.cjs +0 -68
  179. package/dist/chunk-Q75DBVDY.cjs.map +0 -1
  180. package/dist/chunk-REQ5Q6ZI.js +0 -1022
  181. package/dist/chunk-REQ5Q6ZI.js.map +0 -1
  182. package/dist/chunk-SICKWUWB.js +0 -62
  183. package/dist/chunk-SICKWUWB.js.map +0 -1
  184. package/dist/chunk-T343CCH5.js +0 -1190
  185. package/dist/chunk-T343CCH5.js.map +0 -1
  186. package/dist/chunk-TEC62D4A.cjs +0 -1624
  187. package/dist/chunk-TEC62D4A.cjs.map +0 -1
  188. package/dist/chunk-TW5JB35D.js +0 -2122
  189. package/dist/chunk-TW5JB35D.js.map +0 -1
  190. package/dist/chunk-VC5LMUVQ.cjs +0 -20
  191. package/dist/chunk-VC5LMUVQ.cjs.map +0 -1
  192. package/dist/chunk-VM7WFMKI.cjs +0 -76
  193. package/dist/chunk-VM7WFMKI.cjs.map +0 -1
  194. package/dist/chunk-W2WTP6HS.cjs +0 -233
  195. package/dist/chunk-W2WTP6HS.cjs.map +0 -1
  196. package/dist/chunk-WH7PYHZY.cjs +0 -35
  197. package/dist/chunk-WH7PYHZY.cjs.map +0 -1
  198. package/dist/chunk-XQZVY7JJ.cjs +0 -717
  199. package/dist/chunk-XQZVY7JJ.cjs.map +0 -1
  200. package/dist/chunk-XU3OMQ7V.js +0 -98
  201. package/dist/chunk-XU3OMQ7V.js.map +0 -1
  202. package/dist/chunk-XWPDRMZG.js +0 -62
  203. package/dist/chunk-XWPDRMZG.js.map +0 -1
  204. package/dist/chunk-Y3CPKNB7.js +0 -67
  205. package/dist/chunk-Y3CPKNB7.js.map +0 -1
  206. package/dist/chunk-YNVRDD2P.js +0 -98
  207. package/dist/chunk-YNVRDD2P.js.map +0 -1
  208. package/dist/chunk-YSYR54XR.js +0 -92
  209. package/dist/chunk-YSYR54XR.js.map +0 -1
  210. package/dist/chunk-YTYDQBVY.cjs +0 -162
  211. package/dist/chunk-YTYDQBVY.cjs.map +0 -1
  212. package/dist/chunk-ZDLOA2UT.cjs +0 -1042
  213. package/dist/chunk-ZDLOA2UT.cjs.map +0 -1
  214. package/dist/chunk-ZWUKRCOJ.cjs +0 -2162
  215. package/dist/chunk-ZWUKRCOJ.cjs.map +0 -1
@@ -1,1624 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkQ2MFGYTE_cjs = require('./chunk-Q2MFGYTE.cjs');
4
- var chunkWH7PYHZY_cjs = require('./chunk-WH7PYHZY.cjs');
5
- var clsx7 = require('clsx');
6
- var recharts = require('recharts');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var React = require('react');
9
-
10
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
-
12
- var clsx7__default = /*#__PURE__*/_interopDefault(clsx7);
13
- var React__default = /*#__PURE__*/_interopDefault(React);
14
-
15
- function ChartContainer({
16
- title,
17
- subtitle,
18
- height = 300,
19
- data = [],
20
- requiredFields = [],
21
- minSampleSize = 30,
22
- showCoverage = true,
23
- dateRange,
24
- loading,
25
- emptyMessage = "No data available",
26
- children,
27
- className,
28
- ...props
29
- }) {
30
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
31
- const { state, isRenderable, message } = chunkQ2MFGYTE_cjs.useChartData({
32
- data,
33
- requiredFields,
34
- minSampleSize
35
- });
36
- const renderContent = () => {
37
- if (loading) {
38
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart-container__loading", children: [
39
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-chart-container__spinner" }),
40
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading chart..." })
41
- ] });
42
- }
43
- if (!isRenderable && state !== "VALID") {
44
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart-container__empty", children: [
45
- /* @__PURE__ */ jsxRuntime.jsx(
46
- chunkQ2MFGYTE_cjs.DataStateIndicator,
47
- {
48
- state,
49
- variant: "full",
50
- details: { message, sampleSize: data.length, requiredSize: minSampleSize }
51
- }
52
- ),
53
- state === "INSUFFICIENT_SAMPLE" && data.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-chart-container__empty-message", children: emptyMessage })
54
- ] });
55
- }
56
- return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children });
57
- };
58
- return /* @__PURE__ */ jsxRuntime.jsxs(
59
- "div",
60
- {
61
- className: clsx7__default.default(
62
- "ds-chart-container",
63
- loading && "ds-chart-container--loading",
64
- !isRenderable && "ds-chart-container--invalid",
65
- className
66
- ),
67
- ...props,
68
- children: [
69
- (title || subtitle || showCoverage && features.showMethodology) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-chart-container__header", children: [
70
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart-container__header-content", children: [
71
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-chart-container__title", children: title }),
72
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-chart-container__subtitle", children: subtitle })
73
- ] }),
74
- showCoverage && features.showMethodology && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
75
- chunkQ2MFGYTE_cjs.DataCoverageBadge,
76
- {
77
- sampleSize: data.length,
78
- requiredSize: minSampleSize,
79
- dateRange,
80
- size: "sm"
81
- }
82
- )
83
- ] }),
84
- /* @__PURE__ */ jsxRuntime.jsx(
85
- "div",
86
- {
87
- className: "ds-chart-container__chart",
88
- style: { height: typeof height === "number" ? height : void 0 },
89
- children: renderContent()
90
- }
91
- ),
92
- isRenderable && state !== "VALID" && /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "ds-chart-container__footer", children: /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.DataStateIndicator, { state, variant: "compact" }) })
93
- ]
94
- }
95
- );
96
- }
97
- ChartContainer.displayName = "ChartContainer";
98
- var DEFAULT_COLORS = [
99
- "var(--brand-pink)",
100
- "var(--brand-yellow)",
101
- "var(--status-info)",
102
- "var(--status-success)",
103
- "var(--status-warning)"
104
- ];
105
- function LineChart({
106
- data,
107
- xKey,
108
- lines,
109
- title,
110
- subtitle,
111
- height = 300,
112
- grid = true,
113
- legend: showLegend = true,
114
- curve = "monotone",
115
- minSampleSize = 7,
116
- dateRange,
117
- className
118
- }) {
119
- const requiredFields = [xKey, ...lines.map((l) => l.key)];
120
- const chartData = React__default.default.useMemo(() => data.map((item) => ({ ...item })), [data]);
121
- return /* @__PURE__ */ jsxRuntime.jsx(
122
- ChartContainer,
123
- {
124
- title,
125
- subtitle,
126
- height,
127
- data,
128
- requiredFields,
129
- minSampleSize,
130
- dateRange,
131
- className,
132
- children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
133
- grid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
134
- /* @__PURE__ */ jsxRuntime.jsx(
135
- recharts.XAxis,
136
- {
137
- dataKey: xKey,
138
- tick: { fontSize: 12 },
139
- tickLine: false,
140
- axisLine: { strokeWidth: 1 }
141
- }
142
- ),
143
- /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
144
- /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
145
- showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
146
- lines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsx(
147
- recharts.Line,
148
- {
149
- type: curve,
150
- dataKey: line.key,
151
- name: line.name || line.key,
152
- stroke: line.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length],
153
- strokeWidth: 2,
154
- strokeDasharray: line.dashed ? "5 5" : void 0,
155
- dot: line.dot !== false,
156
- activeDot: { r: 6 }
157
- },
158
- line.key
159
- ))
160
- ] })
161
- }
162
- );
163
- }
164
- LineChart.displayName = "LineChart";
165
- var DEFAULT_COLORS2 = [
166
- "var(--brand-pink)",
167
- "var(--brand-yellow)",
168
- "var(--status-info)",
169
- "var(--status-success)",
170
- "var(--status-warning)"
171
- ];
172
- function BarChart({
173
- data,
174
- xKey,
175
- bars,
176
- title,
177
- subtitle,
178
- height = 300,
179
- layout = "horizontal",
180
- grid = true,
181
- legend: showLegend = true,
182
- radius = 4,
183
- showLabels = false,
184
- minSampleSize = 5,
185
- categoryColors,
186
- className
187
- }) {
188
- const requiredFields = [xKey, ...bars.map((b) => b.key)];
189
- const isVertical = layout === "vertical";
190
- const chartData = React.useMemo(() => data.map((item) => ({ ...item })), [data]);
191
- return /* @__PURE__ */ jsxRuntime.jsx(
192
- ChartContainer,
193
- {
194
- title,
195
- subtitle,
196
- height,
197
- data: chartData,
198
- requiredFields,
199
- minSampleSize,
200
- className,
201
- children: /* @__PURE__ */ jsxRuntime.jsxs(
202
- recharts.BarChart,
203
- {
204
- data: chartData,
205
- layout: isVertical ? "vertical" : "horizontal",
206
- margin: { top: 5, right: 20, left: isVertical ? 80 : 0, bottom: 5 },
207
- children: [
208
- grid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", horizontal: !isVertical, vertical: isVertical }),
209
- isVertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
210
- /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", tick: { fontSize: 12 }, tickLine: false, axisLine: false }),
211
- /* @__PURE__ */ jsxRuntime.jsx(
212
- recharts.YAxis,
213
- {
214
- type: "category",
215
- dataKey: xKey,
216
- tick: { fontSize: 12 },
217
- tickLine: false,
218
- axisLine: false,
219
- width: 80
220
- }
221
- )
222
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
223
- /* @__PURE__ */ jsxRuntime.jsx(
224
- recharts.XAxis,
225
- {
226
- dataKey: xKey,
227
- tick: { fontSize: 12 },
228
- tickLine: false,
229
- axisLine: { strokeWidth: 1 }
230
- }
231
- ),
232
- /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 })
233
- ] }),
234
- /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
235
- showLegend && bars.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
236
- bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsx(
237
- recharts.Bar,
238
- {
239
- dataKey: bar.key,
240
- name: bar.name || bar.key,
241
- fill: bar.color || DEFAULT_COLORS2[barIndex % DEFAULT_COLORS2.length],
242
- stackId: bar.stackId,
243
- radius: [radius, radius, 0, 0],
244
- label: showLabels ? { position: "top", fontSize: 10 } : false,
245
- children: categoryColors && chartData.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: categoryColors[index % categoryColors.length] }, `cell-${index}`))
246
- },
247
- bar.key
248
- ))
249
- ]
250
- }
251
- )
252
- }
253
- );
254
- }
255
- BarChart.displayName = "BarChart";
256
- var DEFAULT_COLORS3 = [
257
- "var(--brand-pink)",
258
- "var(--brand-yellow)",
259
- "var(--status-info)",
260
- "var(--status-success)",
261
- "var(--status-warning)",
262
- "var(--status-error)",
263
- "#8884d8",
264
- "#82ca9d"
265
- ];
266
- function PieChart({
267
- data,
268
- title,
269
- subtitle,
270
- height = 300,
271
- innerRadius = 0,
272
- outerRadius = 80,
273
- showLabels = true,
274
- labelType = "percent",
275
- legend: showLegend = true,
276
- minSampleSize = 30,
277
- className
278
- }) {
279
- const safeData = React.useMemo(() => data.map((item) => ({ ...item })), [data]);
280
- const renderLabel = (props) => {
281
- const { name, value, percent } = props;
282
- switch (labelType) {
283
- case "percent":
284
- return `${((percent ?? 0) * 100).toFixed(0)}%`;
285
- case "value":
286
- return (value ?? 0).toLocaleString();
287
- case "name":
288
- return name ?? "";
289
- default:
290
- return "";
291
- }
292
- };
293
- return /* @__PURE__ */ jsxRuntime.jsx(
294
- ChartContainer,
295
- {
296
- title,
297
- subtitle,
298
- height,
299
- data: safeData,
300
- requiredFields: ["name", "value"],
301
- minSampleSize,
302
- className,
303
- children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
304
- /* @__PURE__ */ jsxRuntime.jsx(
305
- recharts.Pie,
306
- {
307
- data: safeData,
308
- cx: "50%",
309
- cy: "50%",
310
- innerRadius,
311
- outerRadius,
312
- paddingAngle: 2,
313
- dataKey: "value",
314
- label: showLabels ? renderLabel : void 0,
315
- labelLine: showLabels,
316
- children: safeData.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
317
- recharts.Cell,
318
- {
319
- fill: entry.color || DEFAULT_COLORS3[index % DEFAULT_COLORS3.length]
320
- },
321
- `cell-${index}`
322
- ))
323
- }
324
- ),
325
- /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, {}),
326
- showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
327
- ] })
328
- }
329
- );
330
- }
331
- PieChart.displayName = "PieChart";
332
- var DEFAULT_COLORS4 = [
333
- "var(--brand-pink)",
334
- "var(--brand-yellow)",
335
- "var(--status-info)",
336
- "var(--status-success)",
337
- "var(--status-warning)"
338
- ];
339
- function FunnelChart({
340
- stages,
341
- title,
342
- subtitle,
343
- showConversionRates = true,
344
- showDropOff = true,
345
- showValues = true,
346
- height = 300,
347
- className
348
- }) {
349
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
350
- const isValid = stages.length >= 3;
351
- const maxValue = stages.length > 0 ? Math.max(...stages.map((s) => s.value)) : 0;
352
- const stagesWithMetrics = React.useMemo(() => {
353
- return stages.map((stage, index) => {
354
- const prevStage = index > 0 ? stages[index - 1] : null;
355
- const conversionRate = prevStage ? stage.value / prevStage.value * 100 : 100;
356
- const dropOff = prevStage ? (prevStage.value - stage.value) / prevStage.value * 100 : 0;
357
- const widthPercent = maxValue > 0 ? stage.value / maxValue * 100 : 0;
358
- return {
359
- ...stage,
360
- conversionRate,
361
- dropOff,
362
- widthPercent,
363
- color: stage.color || DEFAULT_COLORS4[index % DEFAULT_COLORS4.length]
364
- };
365
- });
366
- }, [stages, maxValue]);
367
- if (!isValid) {
368
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-funnel-chart", "ds-funnel-chart--invalid", className), children: [
369
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-funnel-chart__title", children: title }),
370
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-chart__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
371
- chunkQ2MFGYTE_cjs.DataStateIndicator,
372
- {
373
- state: "INSUFFICIENT_SAMPLE",
374
- variant: "full",
375
- details: {
376
- message: "Funnel requires at least 3 stages",
377
- sampleSize: stages.length,
378
- requiredSize: 3
379
- }
380
- }
381
- ) })
382
- ] });
383
- }
384
- const totalConversion = stages.length > 1 ? (stages[stages.length - 1].value / stages[0].value * 100).toFixed(1) : "100";
385
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-funnel-chart", className), style: { minHeight: height }, children: [
386
- (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-funnel-chart__header", children: [
387
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
388
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-funnel-chart__title", children: title }),
389
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-funnel-chart__subtitle", children: subtitle })
390
- ] }),
391
- features.showMethodology && /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.DataCoverageBadge, { sampleSize: stages[0].value, size: "sm" })
392
- ] }),
393
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-chart__stages", children: stagesWithMetrics.map((stage, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-chart__stage", children: [
394
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-funnel-chart__bar-container", children: /* @__PURE__ */ jsxRuntime.jsx(
395
- "div",
396
- {
397
- className: "ds-funnel-chart__bar",
398
- style: {
399
- width: `${stage.widthPercent}%`,
400
- backgroundColor: stage.color
401
- },
402
- children: showValues && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-chart__value", children: stage.value.toLocaleString() })
403
- }
404
- ) }),
405
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-chart__label", children: [
406
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-chart__stage-name", children: stage.name }),
407
- showConversionRates && index > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-funnel-chart__conversion", children: [
408
- stage.conversionRate.toFixed(1),
409
- "% converted"
410
- ] })
411
- ] }),
412
- showDropOff && index > 0 && stage.dropOff > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-funnel-chart__dropoff", children: [
413
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-funnel-chart__dropoff-arrow", children: "\u2193" }),
414
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-funnel-chart__dropoff-value", children: [
415
- "-",
416
- stage.dropOff.toFixed(1),
417
- "%"
418
- ] })
419
- ] })
420
- ] }, stage.name)) }),
421
- /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "ds-funnel-chart__footer", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-funnel-chart__total", children: [
422
- "Overall Conversion: ",
423
- /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
424
- totalConversion,
425
- "%"
426
- ] })
427
- ] }) })
428
- ] });
429
- }
430
- FunnelChart.displayName = "FunnelChart";
431
- function HeatmapChart({
432
- data,
433
- title,
434
- subtitle,
435
- xLabel,
436
- yLabel,
437
- colorScale = ["var(--glass-elevated)", "var(--brand-pink)"],
438
- showValues = true,
439
- valueFormatter = (v) => v.toFixed(0),
440
- minCells = 25,
441
- className
442
- }) {
443
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
444
- const { xValues, yValues, cellMap, minValue, maxValue } = React.useMemo(() => {
445
- const xSet = /* @__PURE__ */ new Set();
446
- const ySet = /* @__PURE__ */ new Set();
447
- const map = /* @__PURE__ */ new Map();
448
- let min = Infinity;
449
- let max = -Infinity;
450
- for (const cell of data) {
451
- xSet.add(cell.x);
452
- ySet.add(cell.y);
453
- map.set(`${cell.x}-${cell.y}`, cell.value);
454
- min = Math.min(min, cell.value);
455
- max = Math.max(max, cell.value);
456
- }
457
- return {
458
- xValues: Array.from(xSet),
459
- yValues: Array.from(ySet),
460
- cellMap: map,
461
- minValue: min === Infinity ? 0 : min,
462
- maxValue: max === -Infinity ? 0 : max
463
- };
464
- }, [data]);
465
- const isValid = data.length >= minCells;
466
- const getCellColor = (value) => {
467
- if (maxValue === minValue) return colorScale[0];
468
- const ratio = (value - minValue) / (maxValue - minValue);
469
- return `color-mix(in srgb, ${colorScale[1]} ${ratio * 100}%, ${colorScale[0]})`;
470
- };
471
- const getTextColor = (value) => {
472
- const ratio = (value - minValue) / (maxValue - minValue);
473
- return ratio > 0.5 ? "white" : "var(--text-primary)";
474
- };
475
- if (!isValid) {
476
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-heatmap-chart", "ds-heatmap-chart--invalid", className), children: [
477
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
478
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-heatmap-chart__empty", children: [
479
- /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Insufficient data for heatmap visualization" }),
480
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ds-heatmap-chart__empty-detail", children: [
481
- data.length,
482
- " cells provided, ",
483
- minCells,
484
- " required"
485
- ] })
486
- ] })
487
- ] });
488
- }
489
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-heatmap-chart", className), children: [
490
- (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-heatmap-chart__header", children: [
491
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
492
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-heatmap-chart__title", children: title }),
493
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-heatmap-chart__subtitle", children: subtitle })
494
- ] }),
495
- features.showMethodology && /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.DataCoverageBadge, { sampleSize: data.length, requiredSize: minCells, size: "sm" })
496
- ] }),
497
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-heatmap-chart__container", children: [
498
- yLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-heatmap-chart__y-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: yLabel }) }),
499
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-heatmap-chart__grid-wrapper", children: [
500
- /* @__PURE__ */ jsxRuntime.jsx(
501
- "div",
502
- {
503
- className: "ds-heatmap-chart__grid",
504
- style: {
505
- gridTemplateColumns: `repeat(${xValues.length}, 1fr)`,
506
- gridTemplateRows: `repeat(${yValues.length}, 1fr)`
507
- },
508
- children: yValues.map(
509
- (y) => xValues.map((x) => {
510
- const value = cellMap.get(`${x}-${y}`) ?? 0;
511
- const cellContent = /* @__PURE__ */ jsxRuntime.jsx(
512
- "div",
513
- {
514
- className: "ds-heatmap-chart__cell",
515
- style: {
516
- backgroundColor: getCellColor(value),
517
- color: getTextColor(value)
518
- },
519
- children: showValues && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-heatmap-chart__cell-value", children: valueFormatter(value) })
520
- },
521
- `${x}-${y}`
522
- );
523
- return /* @__PURE__ */ jsxRuntime.jsx(chunkWH7PYHZY_cjs.Tooltip, { content: `${x}, ${y}: ${valueFormatter(value)}`, children: cellContent }, `${x}-${y}`);
524
- })
525
- )
526
- }
527
- ),
528
- /* @__PURE__ */ jsxRuntime.jsx(
529
- "div",
530
- {
531
- className: "ds-heatmap-chart__x-labels",
532
- style: { gridTemplateColumns: `repeat(${xValues.length}, 1fr)` },
533
- children: xValues.map((x) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-heatmap-chart__x-label", children: x }, x))
534
- }
535
- )
536
- ] }),
537
- /* @__PURE__ */ jsxRuntime.jsx(
538
- "div",
539
- {
540
- className: "ds-heatmap-chart__y-labels",
541
- style: { gridTemplateRows: `repeat(${yValues.length}, 1fr)` },
542
- children: yValues.map((y) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-heatmap-chart__y-label-item", children: y }, y))
543
- }
544
- )
545
- ] }),
546
- xLabel && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-heatmap-chart__x-axis-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: xLabel }) }),
547
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-heatmap-chart__legend", children: [
548
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-heatmap-chart__legend-label", children: "Low" }),
549
- /* @__PURE__ */ jsxRuntime.jsx(
550
- "div",
551
- {
552
- className: "ds-heatmap-chart__legend-bar",
553
- style: {
554
- background: `linear-gradient(to right, ${colorScale[0]}, ${colorScale[1]})`
555
- }
556
- }
557
- ),
558
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-heatmap-chart__legend-label", children: "High" })
559
- ] })
560
- ] });
561
- }
562
- HeatmapChart.displayName = "HeatmapChart";
563
- function ChartSwitchControl({
564
- currentType,
565
- allowedTypes,
566
- onTypeChange,
567
- size = "sm",
568
- className
569
- }) {
570
- if (allowedTypes.length <= 1) {
571
- return null;
572
- }
573
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx7__default.default("ds-chart-switch", `ds-chart-switch--${size}`, className), children: allowedTypes.map((type) => {
574
- const meta = chunkQ2MFGYTE_cjs.CHART_REGISTRY[type];
575
- if (!meta) return null;
576
- const isActive = type === currentType;
577
- const Icon = getChartIcon(type);
578
- return /* @__PURE__ */ jsxRuntime.jsxs(
579
- "button",
580
- {
581
- type: "button",
582
- className: clsx7__default.default(
583
- "ds-chart-switch__option",
584
- isActive && "ds-chart-switch__option--active"
585
- ),
586
- onClick: () => onTypeChange(type),
587
- title: meta.name,
588
- "aria-pressed": isActive,
589
- children: [
590
- /* @__PURE__ */ jsxRuntime.jsx(Icon, {}),
591
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-chart-switch__label", children: getShortLabel(type) })
592
- ]
593
- },
594
- type
595
- );
596
- }) });
597
- }
598
- ChartSwitchControl.displayName = "ChartSwitchControl";
599
- function getChartIcon(type) {
600
- const icons = {
601
- line: LineIcon,
602
- smooth_line: SmoothLineIcon,
603
- area: AreaIcon,
604
- stacked_area: StackedAreaIcon,
605
- area_100pct: StackedAreaIcon,
606
- bar: BarIcon,
607
- column: ColumnIcon,
608
- stacked_bar: StackedBarIcon,
609
- stacked_column: StackedColumnIcon,
610
- column_100pct: StackedColumnIcon,
611
- pie: PieIcon,
612
- donut: DonutIcon,
613
- histogram: HistogramIcon,
614
- funnel: FunnelIcon,
615
- heatmap: HeatmapIcon
616
- };
617
- return icons[type] || DefaultChartIcon;
618
- }
619
- function getShortLabel(type) {
620
- const labels = {
621
- line: "Line",
622
- smooth_line: "Smooth",
623
- area: "Area",
624
- stacked_area: "Stacked",
625
- area_100pct: "100%",
626
- bar: "Bar",
627
- column: "Column",
628
- stacked_bar: "Stacked",
629
- stacked_column: "Stacked",
630
- column_100pct: "100%",
631
- pie: "Pie",
632
- donut: "Donut",
633
- histogram: "Histogram",
634
- funnel: "Funnel",
635
- heatmap: "Heatmap"
636
- };
637
- return labels[type] || type;
638
- }
639
- function LineIcon() {
640
- return /* @__PURE__ */ jsxRuntime.jsx(
641
- "svg",
642
- {
643
- width: "16",
644
- height: "16",
645
- viewBox: "0 0 24 24",
646
- fill: "none",
647
- stroke: "currentColor",
648
- strokeWidth: "2",
649
- children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "22 12 18 8 13 13 9 9 2 16" })
650
- }
651
- );
652
- }
653
- function SmoothLineIcon() {
654
- return /* @__PURE__ */ jsxRuntime.jsx(
655
- "svg",
656
- {
657
- width: "16",
658
- height: "16",
659
- viewBox: "0 0 24 24",
660
- fill: "none",
661
- stroke: "currentColor",
662
- strokeWidth: "2",
663
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 16 C6 16, 8 8, 12 12 S18 6, 22 10" })
664
- }
665
- );
666
- }
667
- function AreaIcon() {
668
- return /* @__PURE__ */ jsxRuntime.jsxs(
669
- "svg",
670
- {
671
- width: "16",
672
- height: "16",
673
- viewBox: "0 0 24 24",
674
- fill: "none",
675
- stroke: "currentColor",
676
- strokeWidth: "2",
677
- children: [
678
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 20 L2 16 L8 10 L14 14 L22 6 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" }),
679
- /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 16 8 10 14 14 22 6" })
680
- ]
681
- }
682
- );
683
- }
684
- function StackedAreaIcon() {
685
- return /* @__PURE__ */ jsxRuntime.jsxs(
686
- "svg",
687
- {
688
- width: "16",
689
- height: "16",
690
- viewBox: "0 0 24 24",
691
- fill: "none",
692
- stroke: "currentColor",
693
- strokeWidth: "2",
694
- children: [
695
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 20 L2 14 L8 10 L14 12 L22 8 L22 20 Z", fill: "currentColor", fillOpacity: "0.3" }),
696
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 20 L2 16 L8 14 L14 15 L22 12 L22 20 Z", fill: "currentColor", fillOpacity: "0.2" })
697
- ]
698
- }
699
- );
700
- }
701
- function BarIcon() {
702
- return /* @__PURE__ */ jsxRuntime.jsxs(
703
- "svg",
704
- {
705
- width: "16",
706
- height: "16",
707
- viewBox: "0 0 24 24",
708
- fill: "none",
709
- stroke: "currentColor",
710
- strokeWidth: "2",
711
- children: [
712
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "14", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
713
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "10", width: "18", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
714
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "16", width: "10", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
715
- ]
716
- }
717
- );
718
- }
719
- function ColumnIcon() {
720
- return /* @__PURE__ */ jsxRuntime.jsxs(
721
- "svg",
722
- {
723
- width: "16",
724
- height: "16",
725
- viewBox: "0 0 24 24",
726
- fill: "none",
727
- stroke: "currentColor",
728
- strokeWidth: "2",
729
- children: [
730
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "8", width: "4", height: "14", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
731
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "1", fill: "currentColor", fillOpacity: "0.2" }),
732
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "12", width: "4", height: "10", rx: "1", fill: "currentColor", fillOpacity: "0.2" })
733
- ]
734
- }
735
- );
736
- }
737
- function StackedBarIcon() {
738
- return /* @__PURE__ */ jsxRuntime.jsxs(
739
- "svg",
740
- {
741
- width: "16",
742
- height: "16",
743
- viewBox: "0 0 24 24",
744
- fill: "none",
745
- stroke: "currentColor",
746
- strokeWidth: "2",
747
- children: [
748
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "4", width: "8", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
749
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "4", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
750
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "10", width: "12", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
751
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "10", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
752
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "16", width: "6", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
753
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "16", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
754
- ]
755
- }
756
- );
757
- }
758
- function StackedColumnIcon() {
759
- return /* @__PURE__ */ jsxRuntime.jsxs(
760
- "svg",
761
- {
762
- width: "16",
763
- height: "16",
764
- viewBox: "0 0 24 24",
765
- fill: "none",
766
- stroke: "currentColor",
767
- strokeWidth: "2",
768
- children: [
769
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "14", width: "4", height: "8", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
770
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "8", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
771
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "10", width: "4", height: "12", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
772
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "4", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.15" }),
773
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "16", width: "4", height: "6", rx: "1", fill: "currentColor", fillOpacity: "0.3" }),
774
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "12", width: "4", height: "4", rx: "1", fill: "currentColor", fillOpacity: "0.15" })
775
- ]
776
- }
777
- );
778
- }
779
- function PieIcon() {
780
- return /* @__PURE__ */ jsxRuntime.jsxs(
781
- "svg",
782
- {
783
- width: "16",
784
- height: "16",
785
- viewBox: "0 0 24 24",
786
- fill: "none",
787
- stroke: "currentColor",
788
- strokeWidth: "2",
789
- children: [
790
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
791
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2 A10 10 0 0 1 22 12 L12 12 Z", fill: "currentColor", fillOpacity: "0.3" })
792
- ]
793
- }
794
- );
795
- }
796
- function DonutIcon() {
797
- return /* @__PURE__ */ jsxRuntime.jsxs(
798
- "svg",
799
- {
800
- width: "16",
801
- height: "16",
802
- viewBox: "0 0 24 24",
803
- fill: "none",
804
- stroke: "currentColor",
805
- strokeWidth: "2",
806
- children: [
807
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor", fillOpacity: "0.2" }),
808
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5", fill: "var(--glass-elevated)", stroke: "none" }),
809
- /* @__PURE__ */ jsxRuntime.jsx(
810
- "path",
811
- {
812
- d: "M12 2 A10 10 0 0 1 22 12 L17 12 A5 5 0 0 0 12 7 Z",
813
- fill: "currentColor",
814
- fillOpacity: "0.3"
815
- }
816
- )
817
- ]
818
- }
819
- );
820
- }
821
- function HistogramIcon() {
822
- return /* @__PURE__ */ jsxRuntime.jsxs(
823
- "svg",
824
- {
825
- width: "16",
826
- height: "16",
827
- viewBox: "0 0 24 24",
828
- fill: "none",
829
- stroke: "currentColor",
830
- strokeWidth: "2",
831
- children: [
832
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "14", width: "4", height: "8", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
833
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "10", width: "4", height: "12", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
834
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "4", width: "4", height: "18", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
835
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "8", width: "4", height: "14", rx: "0", fill: "currentColor", fillOpacity: "0.2" }),
836
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "18", y: "12", width: "4", height: "10", rx: "0", fill: "currentColor", fillOpacity: "0.2" })
837
- ]
838
- }
839
- );
840
- }
841
- function FunnelIcon() {
842
- return /* @__PURE__ */ jsxRuntime.jsxs(
843
- "svg",
844
- {
845
- width: "16",
846
- height: "16",
847
- viewBox: "0 0 24 24",
848
- fill: "none",
849
- stroke: "currentColor",
850
- strokeWidth: "2",
851
- children: [
852
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 4 H22 L18 10 H6 Z", fill: "currentColor", fillOpacity: "0.3" }),
853
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10 H18 L15 16 H9 Z", fill: "currentColor", fillOpacity: "0.25" }),
854
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16 H15 L13 22 H11 Z", fill: "currentColor", fillOpacity: "0.2" })
855
- ]
856
- }
857
- );
858
- }
859
- function HeatmapIcon() {
860
- return /* @__PURE__ */ jsxRuntime.jsxs(
861
- "svg",
862
- {
863
- width: "16",
864
- height: "16",
865
- viewBox: "0 0 24 24",
866
- fill: "none",
867
- stroke: "currentColor",
868
- strokeWidth: "1",
869
- children: [
870
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.1" }),
871
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
872
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "2", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
873
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" }),
874
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.6" }),
875
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "9", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.3" }),
876
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.2" }),
877
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.5" }),
878
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "16", y: "16", width: "6", height: "6", fill: "currentColor", fillOpacity: "0.4" })
879
- ]
880
- }
881
- );
882
- }
883
- function DefaultChartIcon() {
884
- return /* @__PURE__ */ jsxRuntime.jsxs(
885
- "svg",
886
- {
887
- width: "16",
888
- height: "16",
889
- viewBox: "0 0 24 24",
890
- fill: "none",
891
- stroke: "currentColor",
892
- strokeWidth: "2",
893
- children: [
894
- /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
895
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 15 L9 9 L13 13 L21 5" })
896
- ]
897
- }
898
- );
899
- }
900
- var CHART_COLORS = [
901
- "var(--brand-pink)",
902
- "var(--brand-yellow)",
903
- "var(--status-info)",
904
- "var(--status-success)",
905
- "var(--status-warning)",
906
- "var(--status-error)"
907
- ];
908
- function getColor(index, customColor) {
909
- return customColor || CHART_COLORS[index % CHART_COLORS.length];
910
- }
911
- function Chart({
912
- intent,
913
- data,
914
- dimensions,
915
- measures,
916
- defaultType,
917
- allowedTypes,
918
- chartType: controlledType,
919
- onChartTypeChange,
920
- allowSwitching = false,
921
- title,
922
- subtitle,
923
- height = 300,
924
- legend: showLegend = true,
925
- grid = true,
926
- className
927
- }) {
928
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
929
- const resolvedDefault = defaultType || chunkQ2MFGYTE_cjs.getDefaultChartForIntent(intent);
930
- const [internalType, setInternalType] = React.useState(resolvedDefault);
931
- const activeType = controlledType ?? internalType;
932
- const resolvedAllowedTypes = React.useMemo(() => {
933
- if (allowedTypes) return allowedTypes;
934
- return chunkQ2MFGYTE_cjs.getAllowedSwitchTargets(activeType);
935
- }, [allowedTypes, activeType]);
936
- const validation = React.useMemo(() => {
937
- return chunkQ2MFGYTE_cjs.validateChartData(
938
- activeType,
939
- data,
940
- dimensions.map((d) => d.key),
941
- measures.map((m) => m.key)
942
- );
943
- }, [activeType, data, dimensions, measures]);
944
- const handleTypeChange = (newType) => {
945
- if (onChartTypeChange) {
946
- onChartTypeChange(newType);
947
- } else {
948
- setInternalType(newType);
949
- }
950
- };
951
- const chartMeta = chunkQ2MFGYTE_cjs.CHART_REGISTRY[activeType];
952
- const renderChart = () => {
953
- if (!validation.isValid) {
954
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-chart__invalid", children: /* @__PURE__ */ jsxRuntime.jsx(
955
- chunkQ2MFGYTE_cjs.DataStateIndicator,
956
- {
957
- state: "INSUFFICIENT_SAMPLE",
958
- variant: "full",
959
- details: {
960
- message: validation.errors[0],
961
- sampleSize: data.length,
962
- requiredSize: chartMeta?.contract.minDataPoints || 0
963
- }
964
- }
965
- ) });
966
- }
967
- const xKey = dimensions[0]?.key || "x";
968
- switch (activeType) {
969
- case "line":
970
- case "smooth_line":
971
- return renderLineChart(xKey, activeType === "smooth_line");
972
- case "area":
973
- case "stacked_area":
974
- case "area_100pct":
975
- return renderAreaChart(xKey, activeType);
976
- case "bar":
977
- case "stacked_bar":
978
- return renderBarChart(xKey, activeType, "horizontal");
979
- case "column":
980
- case "stacked_column":
981
- case "column_100pct":
982
- return renderBarChart(xKey, activeType, "vertical");
983
- case "pie":
984
- case "donut":
985
- return renderPieChart(xKey, activeType === "donut");
986
- case "histogram":
987
- return renderHistogram();
988
- default:
989
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart__unsupported", children: [
990
- 'Chart type "',
991
- activeType,
992
- '" is not yet implemented'
993
- ] });
994
- }
995
- };
996
- const renderLineChart = (xKey, smooth) => /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
997
- grid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
998
- /* @__PURE__ */ jsxRuntime.jsx(
999
- recharts.XAxis,
1000
- {
1001
- dataKey: xKey,
1002
- tick: { fontSize: 12 },
1003
- tickLine: false,
1004
- axisLine: { strokeWidth: 1 }
1005
- }
1006
- ),
1007
- /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
1008
- /* @__PURE__ */ jsxRuntime.jsx(
1009
- recharts.Tooltip,
1010
- {
1011
- contentStyle: {
1012
- background: "var(--glass-elevated)",
1013
- border: "1px solid var(--glass-border)"
1014
- }
1015
- }
1016
- ),
1017
- showLegend && measures.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
1018
- measures.map((measure, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1019
- recharts.Line,
1020
- {
1021
- type: smooth ? "monotone" : "linear",
1022
- dataKey: measure.key,
1023
- name: measure.label || measure.key,
1024
- stroke: getColor(idx, measure.color),
1025
- strokeWidth: 2,
1026
- dot: true,
1027
- activeDot: { r: 6 }
1028
- },
1029
- measure.key
1030
- ))
1031
- ] }) });
1032
- const renderAreaChart = (xKey, type) => {
1033
- const isStacked = type === "stacked_area" || type === "area_100pct";
1034
- const is100Pct = type === "area_100pct";
1035
- const chartData = is100Pct ? normalizeData(data, measures) : data;
1036
- return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
1037
- grid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
1038
- /* @__PURE__ */ jsxRuntime.jsx(
1039
- recharts.XAxis,
1040
- {
1041
- dataKey: xKey,
1042
- tick: { fontSize: 12 },
1043
- tickLine: false,
1044
- axisLine: { strokeWidth: 1 }
1045
- }
1046
- ),
1047
- /* @__PURE__ */ jsxRuntime.jsx(
1048
- recharts.YAxis,
1049
- {
1050
- tick: { fontSize: 12 },
1051
- tickLine: false,
1052
- axisLine: false,
1053
- width: 40,
1054
- domain: is100Pct ? [0, 100] : void 0,
1055
- tickFormatter: is100Pct ? (v) => `${v}%` : void 0
1056
- }
1057
- ),
1058
- /* @__PURE__ */ jsxRuntime.jsx(
1059
- recharts.Tooltip,
1060
- {
1061
- contentStyle: {
1062
- background: "var(--glass-elevated)",
1063
- border: "1px solid var(--glass-border)"
1064
- }
1065
- }
1066
- ),
1067
- showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
1068
- measures.map((measure, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1069
- recharts.Area,
1070
- {
1071
- type: "monotone",
1072
- dataKey: measure.key,
1073
- name: measure.label || measure.key,
1074
- stroke: getColor(idx, measure.color),
1075
- fill: getColor(idx, measure.color),
1076
- fillOpacity: 0.3,
1077
- stackId: isStacked ? "stack" : void 0
1078
- },
1079
- measure.key
1080
- ))
1081
- ] }) });
1082
- };
1083
- const renderBarChart = (xKey, type, layout) => {
1084
- const isStacked = type.includes("stacked") || type.includes("100pct");
1085
- const is100Pct = type.includes("100pct");
1086
- const isHorizontal = layout === "horizontal";
1087
- const chartData = is100Pct ? normalizeData(data, measures) : data;
1088
- return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
1089
- recharts.BarChart,
1090
- {
1091
- data: chartData,
1092
- layout: isHorizontal ? "vertical" : "horizontal",
1093
- margin: { top: 5, right: 20, left: isHorizontal ? 80 : 0, bottom: 5 },
1094
- children: [
1095
- grid && /* @__PURE__ */ jsxRuntime.jsx(
1096
- recharts.CartesianGrid,
1097
- {
1098
- strokeDasharray: "3 3",
1099
- horizontal: !isHorizontal,
1100
- vertical: isHorizontal
1101
- }
1102
- ),
1103
- isHorizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1104
- /* @__PURE__ */ jsxRuntime.jsx(
1105
- recharts.XAxis,
1106
- {
1107
- type: "number",
1108
- tick: { fontSize: 12 },
1109
- tickLine: false,
1110
- axisLine: false,
1111
- domain: is100Pct ? [0, 100] : void 0,
1112
- tickFormatter: is100Pct ? (v) => `${v}%` : void 0
1113
- }
1114
- ),
1115
- /* @__PURE__ */ jsxRuntime.jsx(
1116
- recharts.YAxis,
1117
- {
1118
- type: "category",
1119
- dataKey: xKey,
1120
- tick: { fontSize: 12 },
1121
- tickLine: false,
1122
- axisLine: false,
1123
- width: 80
1124
- }
1125
- )
1126
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1127
- /* @__PURE__ */ jsxRuntime.jsx(
1128
- recharts.XAxis,
1129
- {
1130
- dataKey: xKey,
1131
- tick: { fontSize: 12 },
1132
- tickLine: false,
1133
- axisLine: { strokeWidth: 1 }
1134
- }
1135
- ),
1136
- /* @__PURE__ */ jsxRuntime.jsx(
1137
- recharts.YAxis,
1138
- {
1139
- tick: { fontSize: 12 },
1140
- tickLine: false,
1141
- axisLine: false,
1142
- width: 40,
1143
- domain: is100Pct ? [0, 100] : void 0,
1144
- tickFormatter: is100Pct ? (v) => `${v}%` : void 0
1145
- }
1146
- )
1147
- ] }),
1148
- /* @__PURE__ */ jsxRuntime.jsx(
1149
- recharts.Tooltip,
1150
- {
1151
- contentStyle: {
1152
- background: "var(--glass-elevated)",
1153
- border: "1px solid var(--glass-border)"
1154
- }
1155
- }
1156
- ),
1157
- showLegend && measures.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {}),
1158
- measures.map((measure, idx) => /* @__PURE__ */ jsxRuntime.jsx(
1159
- recharts.Bar,
1160
- {
1161
- dataKey: measure.key,
1162
- name: measure.label || measure.key,
1163
- fill: getColor(idx, measure.color),
1164
- stackId: isStacked ? "stack" : void 0,
1165
- radius: isStacked ? void 0 : [4, 4, 0, 0]
1166
- },
1167
- measure.key
1168
- ))
1169
- ]
1170
- }
1171
- ) });
1172
- };
1173
- const renderPieChart = (nameKey, isDonut) => {
1174
- const valueKey = measures[0]?.key || "value";
1175
- return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
1176
- /* @__PURE__ */ jsxRuntime.jsx(
1177
- recharts.Pie,
1178
- {
1179
- data,
1180
- dataKey: valueKey,
1181
- nameKey,
1182
- cx: "50%",
1183
- cy: "50%",
1184
- innerRadius: isDonut ? "50%" : 0,
1185
- outerRadius: "80%",
1186
- label: ({ name, percent }) => `${name}: ${((percent ?? 0) * 100).toFixed(0)}%`,
1187
- labelLine: false,
1188
- children: data.map((_, idx) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: getColor(idx) }, `cell-${idx}`))
1189
- }
1190
- ),
1191
- /* @__PURE__ */ jsxRuntime.jsx(
1192
- recharts.Tooltip,
1193
- {
1194
- contentStyle: {
1195
- background: "var(--glass-elevated)",
1196
- border: "1px solid var(--glass-border)"
1197
- }
1198
- }
1199
- ),
1200
- showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
1201
- ] }) });
1202
- };
1203
- const renderHistogram = () => {
1204
- const valueKey = measures[0]?.key || "value";
1205
- const binKey = dimensions[0]?.key || "bin";
1206
- return /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { top: 5, right: 20, left: 0, bottom: 5 }, children: [
1207
- grid && /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
1208
- /* @__PURE__ */ jsxRuntime.jsx(
1209
- recharts.XAxis,
1210
- {
1211
- dataKey: binKey,
1212
- tick: { fontSize: 12 },
1213
- tickLine: false,
1214
- axisLine: { strokeWidth: 1 }
1215
- }
1216
- ),
1217
- /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { tick: { fontSize: 12 }, tickLine: false, axisLine: false, width: 40 }),
1218
- /* @__PURE__ */ jsxRuntime.jsx(
1219
- recharts.Tooltip,
1220
- {
1221
- contentStyle: {
1222
- background: "var(--glass-elevated)",
1223
- border: "1px solid var(--glass-border)"
1224
- }
1225
- }
1226
- ),
1227
- /* @__PURE__ */ jsxRuntime.jsx(recharts.Bar, { dataKey: valueKey, fill: getColor(0), radius: [4, 4, 0, 0] })
1228
- ] }) });
1229
- };
1230
- const normalizeData = (sourceData, sourceMeasures) => {
1231
- return sourceData.map((row) => {
1232
- const total = sourceMeasures.reduce((sum, m) => {
1233
- const val = row[m.key];
1234
- return sum + (typeof val === "number" ? val : 0);
1235
- }, 0);
1236
- if (total === 0) return row;
1237
- const normalized = { ...row };
1238
- sourceMeasures.forEach((m) => {
1239
- const val = row[m.key];
1240
- if (typeof val === "number") {
1241
- normalized[m.key] = val / total * 100;
1242
- }
1243
- });
1244
- return normalized;
1245
- });
1246
- };
1247
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-chart", className), children: [
1248
- (title || subtitle || allowSwitching) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-chart__header", children: [
1249
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart__header-text", children: [
1250
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-chart__title", children: title }),
1251
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-chart__subtitle", children: subtitle })
1252
- ] }),
1253
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-chart__header-actions", children: [
1254
- features.showMethodology && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1255
- chunkQ2MFGYTE_cjs.DataCoverageBadge,
1256
- {
1257
- sampleSize: data.length,
1258
- requiredSize: chartMeta?.contract.minDataPoints || 0,
1259
- size: "sm"
1260
- }
1261
- ),
1262
- allowSwitching && resolvedAllowedTypes.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
1263
- ChartSwitchControl,
1264
- {
1265
- currentType: activeType,
1266
- allowedTypes: [activeType, ...resolvedAllowedTypes],
1267
- onTypeChange: handleTypeChange
1268
- }
1269
- )
1270
- ] })
1271
- ] }),
1272
- validation.warnings.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-chart__warnings", children: validation.warnings.map((warning, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-chart__warning", children: warning }, idx)) }),
1273
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-chart__body", style: { height }, children: renderChart() })
1274
- ] });
1275
- }
1276
- Chart.displayName = "Chart";
1277
- var DIMENSION_LABELS = {
1278
- EI: { left: "Extraversion", right: "Introversion", full: "E/I" },
1279
- SN: { left: "Sensing", right: "Intuition", full: "S/N" },
1280
- TF: { left: "Thinking", right: "Feeling", full: "T/F" },
1281
- JP: { left: "Judging", right: "Perceiving", full: "J/P" }
1282
- };
1283
- function MBTIRadar({
1284
- dimensions,
1285
- sampleSize,
1286
- comparison,
1287
- title,
1288
- subtitle,
1289
- size = 300,
1290
- showLabels = true,
1291
- showValues = true,
1292
- minSampleSize = 20,
1293
- confidence,
1294
- className
1295
- }) {
1296
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
1297
- const isValid = sampleSize >= minSampleSize;
1298
- const radarData = React.useMemo(() => {
1299
- return Object.keys(dimensions).map((key) => ({
1300
- dimension: DIMENSION_LABELS[key].full,
1301
- fullName: `${DIMENSION_LABELS[key].left} vs ${DIMENSION_LABELS[key].right}`,
1302
- value: dimensions[key],
1303
- comparison: comparison?.[key],
1304
- leftLabel: DIMENSION_LABELS[key].left,
1305
- rightLabel: DIMENSION_LABELS[key].right
1306
- }));
1307
- }, [dimensions, comparison]);
1308
- const derivedType = React.useMemo(() => {
1309
- const e = dimensions.EI < 50 ? "E" : "I";
1310
- const s = dimensions.SN < 50 ? "S" : "N";
1311
- const t = dimensions.TF < 50 ? "T" : "F";
1312
- const j = dimensions.JP < 50 ? "J" : "P";
1313
- return `${e}${s}${t}${j}`;
1314
- }, [dimensions]);
1315
- if (!isValid) {
1316
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-mbti-radar", "ds-mbti-radar--invalid", className), children: [
1317
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-radar__title", children: title }),
1318
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
1319
- chunkQ2MFGYTE_cjs.DataStateIndicator,
1320
- {
1321
- state: "INSUFFICIENT_SAMPLE",
1322
- variant: "full",
1323
- details: {
1324
- message: "MBTI analysis requires sufficient sample size",
1325
- sampleSize,
1326
- requiredSize: minSampleSize
1327
- }
1328
- }
1329
- ) })
1330
- ] });
1331
- }
1332
- const CustomTooltip = ({
1333
- active,
1334
- payload
1335
- }) => {
1336
- if (!active || !payload?.length) return null;
1337
- const data = payload[0].payload;
1338
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__tooltip", children: [
1339
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-mbti-radar__tooltip-title", children: data.fullName }),
1340
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
1341
- data.leftLabel,
1342
- ": ",
1343
- 100 - data.value,
1344
- "%"
1345
- ] }),
1346
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ds-mbti-radar__tooltip-value", children: [
1347
- data.rightLabel,
1348
- ": ",
1349
- data.value,
1350
- "%"
1351
- ] }),
1352
- data.comparison !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ds-mbti-radar__tooltip-comparison", children: [
1353
- "Benchmark: ",
1354
- data.comparison,
1355
- "%"
1356
- ] })
1357
- ] });
1358
- };
1359
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-mbti-radar", className), children: [
1360
- (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-mbti-radar__header", children: [
1361
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__header-text", children: [
1362
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-radar__title", children: title }),
1363
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-mbti-radar__subtitle", children: subtitle })
1364
- ] }),
1365
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__header-badges", children: [
1366
- features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.ConfidenceIndicator, { score: confidence, size: "sm" }),
1367
- features.showMethodology && /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.DataCoverageBadge, { sampleSize, requiredSize: minSampleSize, size: "sm" })
1368
- ] })
1369
- ] }),
1370
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__type-badge", children: [
1371
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-radar__type-label", children: "Derived Type" }),
1372
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-radar__type-value", children: derivedType })
1373
- ] }),
1374
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__chart", style: { width: size, height: size }, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.RadarChart, { cx: "50%", cy: "50%", outerRadius: "70%", width: size, height: size, data: radarData, children: [
1375
- /* @__PURE__ */ jsxRuntime.jsx(recharts.PolarGrid, { stroke: "var(--glass-border)" }),
1376
- /* @__PURE__ */ jsxRuntime.jsx(
1377
- recharts.PolarAngleAxis,
1378
- {
1379
- dataKey: "dimension",
1380
- tick: { fill: "var(--text-secondary)", fontSize: 12 }
1381
- }
1382
- ),
1383
- /* @__PURE__ */ jsxRuntime.jsx(
1384
- recharts.PolarRadiusAxis,
1385
- {
1386
- angle: 45,
1387
- domain: [0, 100],
1388
- tick: { fill: "var(--text-tertiary)", fontSize: 10 },
1389
- tickCount: 5
1390
- }
1391
- ),
1392
- /* @__PURE__ */ jsxRuntime.jsx(
1393
- recharts.Radar,
1394
- {
1395
- name: "Profile",
1396
- dataKey: "value",
1397
- stroke: "var(--brand-pink)",
1398
- fill: "var(--brand-pink)",
1399
- fillOpacity: 0.3,
1400
- strokeWidth: 2
1401
- }
1402
- ),
1403
- comparison && /* @__PURE__ */ jsxRuntime.jsx(
1404
- recharts.Radar,
1405
- {
1406
- name: "Benchmark",
1407
- dataKey: "comparison",
1408
- stroke: "var(--brand-yellow)",
1409
- fill: "var(--brand-yellow)",
1410
- fillOpacity: 0.1,
1411
- strokeWidth: 2,
1412
- strokeDasharray: "5 5"
1413
- }
1414
- ),
1415
- showValues && /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}) }),
1416
- comparison && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
1417
- ] }) }),
1418
- showLabels && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__dimensions", children: radarData.map((d) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__dimension", children: [
1419
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-radar__dimension-left", children: d.leftLabel }),
1420
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-radar__dimension-bar", children: [
1421
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__dimension-fill", style: { width: `${d.value}%` } }),
1422
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-radar__dimension-marker", style: { left: `${d.value}%` } })
1423
- ] }),
1424
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-radar__dimension-right", children: d.rightLabel })
1425
- ] }, d.dimension)) })
1426
- ] });
1427
- }
1428
- MBTIRadar.displayName = "MBTIRadar";
1429
- var MBTI_GRID = [
1430
- ["ISTJ", "ISFJ", "INFJ", "INTJ"],
1431
- ["ISTP", "ISFP", "INFP", "INTP"],
1432
- ["ESTP", "ESFP", "ENFP", "ENTP"],
1433
- ["ESTJ", "ESFJ", "ENFJ", "ENTJ"]
1434
- ];
1435
- var TYPE_DESCRIPTIONS = {
1436
- ISTJ: "The Inspector - Practical, reliable, systematic",
1437
- ISFJ: "The Protector - Caring, supportive, traditional",
1438
- INFJ: "The Advocate - Insightful, principled, compassionate",
1439
- INTJ: "The Architect - Strategic, independent, determined",
1440
- ISTP: "The Virtuoso - Observant, practical, analytical",
1441
- ISFP: "The Adventurer - Artistic, sensitive, exploratory",
1442
- INFP: "The Mediator - Idealistic, empathetic, creative",
1443
- INTP: "The Logician - Inventive, logical, objective",
1444
- ESTP: "The Entrepreneur - Energetic, pragmatic, observant",
1445
- ESFP: "The Entertainer - Spontaneous, energetic, friendly",
1446
- ENFP: "The Campaigner - Enthusiastic, creative, sociable",
1447
- ENTP: "The Debater - Clever, curious, innovative",
1448
- ESTJ: "The Executive - Organized, logical, assertive",
1449
- ESFJ: "The Consul - Caring, sociable, traditional",
1450
- ENFJ: "The Protagonist - Charismatic, empathetic, organized",
1451
- ENTJ: "The Commander - Strategic, efficient, energetic"
1452
- };
1453
- var COLUMN_LABELS = ["ST", "SF", "NF", "NT"];
1454
- var ROW_LABELS = ["I-J", "I-P", "E-P", "E-J"];
1455
- function MBTITypeGrid({
1456
- data,
1457
- sampleSize: propSampleSize,
1458
- title,
1459
- subtitle,
1460
- showPercentages = true,
1461
- showCounts = true,
1462
- highlightThreshold,
1463
- minSampleSize = 50,
1464
- confidence,
1465
- onTypeClick,
1466
- selectedType,
1467
- className
1468
- }) {
1469
- const { features } = chunkQ2MFGYTE_cjs.useReportMode();
1470
- const typeMap = React.useMemo(() => {
1471
- const map = /* @__PURE__ */ new Map();
1472
- for (const item of data) {
1473
- map.set(item.type, item);
1474
- }
1475
- return map;
1476
- }, [data]);
1477
- const totalSampleSize = propSampleSize ?? data.reduce((sum, d) => sum + d.count, 0);
1478
- const isValid = totalSampleSize >= minSampleSize;
1479
- const maxCount = React.useMemo(() => Math.max(...data.map((d) => d.count), 1), [data]);
1480
- const getPercentage = (count) => {
1481
- return totalSampleSize > 0 ? (count / totalSampleSize * 100).toFixed(1) : "0.0";
1482
- };
1483
- const getIntensity = (count) => {
1484
- if (maxCount === 0) return 0;
1485
- return count / maxCount * 100;
1486
- };
1487
- const isHighlighted = (type) => {
1488
- if (!highlightThreshold) return false;
1489
- const item = typeMap.get(type);
1490
- if (!item) return false;
1491
- const percentage = item.count / totalSampleSize * 100;
1492
- return percentage >= highlightThreshold;
1493
- };
1494
- if (!isValid) {
1495
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-mbti-type-grid", "ds-mbti-type-grid--invalid", className), children: [
1496
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
1497
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-type-grid__empty", children: /* @__PURE__ */ jsxRuntime.jsx(
1498
- chunkQ2MFGYTE_cjs.DataStateIndicator,
1499
- {
1500
- state: "INSUFFICIENT_SAMPLE",
1501
- variant: "full",
1502
- details: {
1503
- message: "MBTI distribution analysis requires sufficient sample size",
1504
- sampleSize: totalSampleSize,
1505
- requiredSize: minSampleSize
1506
- }
1507
- }
1508
- ) })
1509
- ] });
1510
- }
1511
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx7__default.default("ds-mbti-type-grid", className), children: [
1512
- (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "ds-mbti-type-grid__header", children: [
1513
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__header-text", children: [
1514
- title && /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ds-mbti-type-grid__title", children: title }),
1515
- subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-mbti-type-grid__subtitle", children: subtitle })
1516
- ] }),
1517
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__header-badges", children: [
1518
- features.showConfidenceScores && confidence !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(chunkQ2MFGYTE_cjs.ConfidenceIndicator, { score: confidence, size: "sm" }),
1519
- features.showMethodology && /* @__PURE__ */ jsxRuntime.jsx(
1520
- chunkQ2MFGYTE_cjs.DataCoverageBadge,
1521
- {
1522
- sampleSize: totalSampleSize,
1523
- requiredSize: minSampleSize,
1524
- size: "sm"
1525
- }
1526
- )
1527
- ] })
1528
- ] }),
1529
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__container", children: [
1530
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__column-headers", children: [
1531
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-type-grid__corner" }),
1532
- COLUMN_LABELS.map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-type-grid__column-header", children: label }, label))
1533
- ] }),
1534
- MBTI_GRID.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__row", children: [
1535
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-mbti-type-grid__row-header", children: ROW_LABELS[rowIndex] }),
1536
- row.map((type) => {
1537
- const typeData = typeMap.get(type);
1538
- const count = typeData?.count ?? 0;
1539
- const percentage = getPercentage(count);
1540
- const intensity = getIntensity(count);
1541
- const highlighted = isHighlighted(type);
1542
- const selected = selectedType === type;
1543
- return /* @__PURE__ */ jsxRuntime.jsx(
1544
- chunkWH7PYHZY_cjs.Tooltip,
1545
- {
1546
- content: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__tooltip-content", children: [
1547
- /* @__PURE__ */ jsxRuntime.jsx("strong", { children: type }),
1548
- /* @__PURE__ */ jsxRuntime.jsx("p", { children: TYPE_DESCRIPTIONS[type] }),
1549
- /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
1550
- "Count: ",
1551
- count.toLocaleString()
1552
- ] }),
1553
- /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
1554
- "Percentage: ",
1555
- percentage,
1556
- "%"
1557
- ] }),
1558
- typeData?.responseRate !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
1559
- "Response Rate: ",
1560
- typeData.responseRate.toFixed(1),
1561
- "%"
1562
- ] })
1563
- ] }),
1564
- children: /* @__PURE__ */ jsxRuntime.jsxs(
1565
- "button",
1566
- {
1567
- type: "button",
1568
- className: clsx7__default.default(
1569
- "ds-mbti-type-grid__cell",
1570
- highlighted && "ds-mbti-type-grid__cell--highlighted",
1571
- selected && "ds-mbti-type-grid__cell--selected",
1572
- onTypeClick && "ds-mbti-type-grid__cell--clickable"
1573
- ),
1574
- onClick: () => onTypeClick?.(type),
1575
- disabled: !onTypeClick,
1576
- style: {
1577
- "--cell-intensity": `${intensity}%`
1578
- },
1579
- children: [
1580
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-type-grid__cell-type", children: type }),
1581
- showCounts && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-type-grid__cell-count", children: count.toLocaleString() }),
1582
- showPercentages && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-mbti-type-grid__cell-percentage", children: [
1583
- percentage,
1584
- "%"
1585
- ] })
1586
- ]
1587
- }
1588
- )
1589
- },
1590
- type
1591
- );
1592
- })
1593
- ] }, rowIndex))
1594
- ] }),
1595
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__legend", children: [
1596
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
1597
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--gradient" }),
1598
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-type-grid__legend-label", children: "Distribution density" })
1599
- ] }),
1600
- highlightThreshold && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-mbti-type-grid__legend-item", children: [
1601
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-mbti-type-grid__legend-bar ds-mbti-type-grid__legend-bar--highlight" }),
1602
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ds-mbti-type-grid__legend-label", children: [
1603
- ">=",
1604
- highlightThreshold,
1605
- "% of sample"
1606
- ] })
1607
- ] })
1608
- ] })
1609
- ] });
1610
- }
1611
- MBTITypeGrid.displayName = "MBTITypeGrid";
1612
-
1613
- exports.BarChart = BarChart;
1614
- exports.Chart = Chart;
1615
- exports.ChartContainer = ChartContainer;
1616
- exports.ChartSwitchControl = ChartSwitchControl;
1617
- exports.FunnelChart = FunnelChart;
1618
- exports.HeatmapChart = HeatmapChart;
1619
- exports.LineChart = LineChart;
1620
- exports.MBTIRadar = MBTIRadar;
1621
- exports.MBTITypeGrid = MBTITypeGrid;
1622
- exports.PieChart = PieChart;
1623
- //# sourceMappingURL=out.js.map
1624
- //# sourceMappingURL=chunk-TEC62D4A.cjs.map