@entropix/data 1.0.0 → 1.0.1

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 (49) hide show
  1. package/dist/area-chart.cjs +14 -0
  2. package/dist/area-chart.css +144 -0
  3. package/dist/area-chart.d.cts +19 -0
  4. package/dist/area-chart.d.ts +19 -0
  5. package/dist/area-chart.js +5 -0
  6. package/dist/bar-chart.cjs +14 -0
  7. package/dist/bar-chart.css +144 -0
  8. package/dist/bar-chart.d.cts +18 -0
  9. package/dist/bar-chart.d.ts +18 -0
  10. package/dist/bar-chart.js +5 -0
  11. package/dist/chunk-42HKJHUY.js +96 -0
  12. package/dist/chunk-4WXLJDQU.js +74 -0
  13. package/dist/chunk-6YAOO76S.cjs +142 -0
  14. package/dist/chunk-CMAQ7DZD.js +135 -0
  15. package/dist/chunk-FQACLZYR.js +137 -0
  16. package/dist/chunk-GCZSXJAA.cjs +77 -0
  17. package/dist/chunk-K6ZRQYSZ.cjs +131 -0
  18. package/dist/chunk-QBI5NOHT.cjs +126 -0
  19. package/dist/chunk-SDCNTA7E.cjs +275 -0
  20. package/dist/chunk-VCSKHJLZ.js +124 -0
  21. package/dist/chunk-VGT2QF7D.cjs +98 -0
  22. package/dist/chunk-WOVSQALY.cjs +137 -0
  23. package/dist/chunk-X7GZD7KZ.js +129 -0
  24. package/dist/chunk-YINCJQN6.js +271 -0
  25. package/dist/data-table.cjs +20 -0
  26. package/dist/data-table.css +227 -0
  27. package/dist/data-table.d.cts +20 -0
  28. package/dist/data-table.d.ts +20 -0
  29. package/dist/data-table.js +3 -0
  30. package/dist/index.cjs +35 -913
  31. package/dist/index.d.cts +7 -75
  32. package/dist/index.d.ts +7 -75
  33. package/dist/index.js +7 -910
  34. package/dist/line-chart.cjs +14 -0
  35. package/dist/line-chart.css +144 -0
  36. package/dist/line-chart.d.cts +19 -0
  37. package/dist/line-chart.d.ts +19 -0
  38. package/dist/line-chart.js +5 -0
  39. package/dist/pie-chart.cjs +13 -0
  40. package/dist/pie-chart.css +144 -0
  41. package/dist/pie-chart.d.cts +15 -0
  42. package/dist/pie-chart.d.ts +15 -0
  43. package/dist/pie-chart.js +4 -0
  44. package/dist/styles/chart.css +1 -193
  45. package/dist/styles/data-table.css +1 -304
  46. package/package.json +54 -3
  47. package/dist/index.cjs.map +0 -1
  48. package/dist/index.css.map +0 -1
  49. package/dist/index.js.map +0 -1
package/dist/index.cjs CHANGED
@@ -1,920 +1,42 @@
1
1
  'use strict';
2
2
 
3
- var react = require('react');
4
- var core = require('@entropix/core');
5
- var jsxRuntime = require('react/jsx-runtime');
3
+ var chunkSDCNTA7E_cjs = require('./chunk-SDCNTA7E.cjs');
4
+ var chunkK6ZRQYSZ_cjs = require('./chunk-K6ZRQYSZ.cjs');
5
+ var chunkQBI5NOHT_cjs = require('./chunk-QBI5NOHT.cjs');
6
+ var chunkWOVSQALY_cjs = require('./chunk-WOVSQALY.cjs');
7
+ require('./chunk-GCZSXJAA.cjs');
8
+ var chunkVGT2QF7D_cjs = require('./chunk-VGT2QF7D.cjs');
9
+ require('./chunk-6YAOO76S.cjs');
6
10
 
7
- // src/components/data-table/data-table.tsx
8
- var DataTableContext = react.createContext(
9
- null
10
- );
11
- function useDataTableContext() {
12
- const ctx = react.useContext(DataTableContext);
13
- if (!ctx) {
14
- throw new Error(
15
- "useDataTableContext must be used within a <DataTable /> component."
16
- );
17
- }
18
- return ctx;
19
- }
20
- function mapA11yToAria(a) {
21
- const result = {};
22
- if (a.role) result.role = a.role;
23
- if (a.label) result["aria-label"] = a.label;
24
- if (a.labelledBy) result["aria-labelledby"] = a.labelledBy;
25
- if (a.describedBy) result["aria-describedby"] = a.describedBy;
26
- if (a.disabled != null) result["aria-disabled"] = a.disabled;
27
- if (a.expanded != null) result["aria-expanded"] = a.expanded;
28
- if (a.selected != null) result["aria-selected"] = a.selected;
29
- if (a.checked != null) result["aria-checked"] = a.checked;
30
- if (a.busy != null) result["aria-busy"] = a.busy;
31
- if (a.hidden != null) result["aria-hidden"] = a.hidden;
32
- if (a.tabIndex != null) result.tabIndex = a.tabIndex;
33
- if (a.controls) result["aria-controls"] = a.controls;
34
- if (a.orientation) result["aria-orientation"] = a.orientation;
35
- if (a.required != null) result["aria-required"] = a.required;
36
- if (a.invalid != null) result["aria-invalid"] = a.invalid;
37
- return result;
38
- }
39
- function DataTable(props) {
40
- const {
41
- className,
42
- emptyMessage = "No data",
43
- renderCell,
44
- stickyHeader = false,
45
- ...tableOptions
46
- } = props;
47
- const table = core.useTable(tableOptions);
48
- const {
49
- columns,
50
- getRowKey = (_, i) => String(i),
51
- selectionMode = "none"
52
- } = tableOptions;
53
- const contextValue = react.useMemo(
54
- () => ({
55
- ...table,
56
- columns,
57
- getRowKey
58
- }),
59
- [table, columns, getRowKey]
60
- );
61
- const tableAriaProps = mapA11yToAria(table.getTableProps().accessibility);
62
- const getSortDir = (colKey) => {
63
- const s = table.sortState.find((st) => st.columnKey === colKey);
64
- return s ? s.direction : "none";
65
- };
66
- const hasFilters = columns.some((c) => c.filterable);
67
- return /* @__PURE__ */ jsxRuntime.jsx(DataTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `entropix-datatable ${className ?? ""}`.trim(), children: [
68
- /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "entropix-datatable__table", ...tableAriaProps, children: [
69
- /* @__PURE__ */ jsxRuntime.jsxs(
70
- "thead",
71
- {
72
- className: "entropix-datatable__thead",
73
- "data-sticky": stickyHeader ? "true" : void 0,
74
- ...mapA11yToAria(table.getHeaderRowProps().accessibility),
75
- children: [
76
- hasFilters && /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "entropix-datatable__filter-row", children: [
77
- selectionMode !== "none" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "entropix-datatable__th entropix-datatable__th--checkbox" }),
78
- columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
79
- "th",
80
- {
81
- className: "entropix-datatable__th entropix-datatable__th--filter",
82
- children: col.filterable ? /* @__PURE__ */ jsxRuntime.jsx(
83
- "input",
84
- {
85
- type: "text",
86
- className: "entropix-datatable__filter",
87
- placeholder: `Filter ${col.header}...`,
88
- value: table.columnFilters[col.key] ?? "",
89
- onChange: (e) => table.setColumnFilter(col.key, e.target.value),
90
- "aria-label": `Filter by ${col.header}`
91
- }
92
- ) : null
93
- },
94
- `filter-${col.key}`
95
- ))
96
- ] }),
97
- /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "entropix-datatable__tr entropix-datatable__tr--header", children: [
98
- selectionMode !== "none" && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "entropix-datatable__th entropix-datatable__th--checkbox", children: selectionMode === "multi" && /* @__PURE__ */ jsxRuntime.jsx(
99
- "input",
100
- {
101
- type: "checkbox",
102
- className: "entropix-datatable__checkbox",
103
- checked: table.isAllSelected,
104
- ref: (el) => {
105
- if (el) el.indeterminate = table.isIndeterminate;
106
- },
107
- onChange: table.toggleAllSelection,
108
- "aria-label": "Select all rows"
109
- }
110
- ) }),
111
- columns.map((col) => {
112
- const headerProps = table.getHeaderCellProps(col.key);
113
- const ariaProps = mapA11yToAria(headerProps.accessibility);
114
- const sortDir = getSortDir(col.key);
115
- return /* @__PURE__ */ jsxRuntime.jsx(
116
- "th",
117
- {
118
- className: `entropix-datatable__th${col.sortable ? " entropix-datatable__th--sortable" : ""}`,
119
- "data-sort": col.sortable ? sortDir : void 0,
120
- onClick: headerProps.onAction,
121
- onKeyDown: col.sortable ? (e) => {
122
- if (e.key === "Enter" || e.key === " ") {
123
- e.preventDefault();
124
- headerProps.onAction?.();
125
- }
126
- } : void 0,
127
- style: col.width ? {
128
- width: typeof col.width === "number" ? `${col.width}px` : col.width
129
- } : void 0,
130
- ...ariaProps,
131
- children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "entropix-datatable__th-content", children: [
132
- col.header,
133
- col.sortable && sortDir !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
134
- "span",
135
- {
136
- className: "entropix-datatable__sort-icon",
137
- "aria-hidden": "true",
138
- children: sortDir === "asc" ? " \u25B2" : " \u25BC"
139
- }
140
- )
141
- ] })
142
- },
143
- col.key
144
- );
145
- })
146
- ] })
147
- ]
148
- }
149
- ),
150
- /* @__PURE__ */ jsxRuntime.jsx(
151
- "tbody",
152
- {
153
- className: "entropix-datatable__tbody",
154
- ...mapA11yToAria(table.getBodyProps().accessibility),
155
- children: table.isLoading ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "entropix-datatable__tr entropix-datatable__tr--loading", children: /* @__PURE__ */ jsxRuntime.jsx(
156
- "td",
157
- {
158
- className: "entropix-datatable__td entropix-datatable__td--loading",
159
- colSpan: columns.length + (selectionMode !== "none" ? 1 : 0),
160
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "entropix-datatable__loading", children: "Loading..." })
161
- }
162
- ) }) : table.rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "entropix-datatable__tr entropix-datatable__tr--empty", children: /* @__PURE__ */ jsxRuntime.jsx(
163
- "td",
164
- {
165
- className: "entropix-datatable__td entropix-datatable__td--empty",
166
- colSpan: columns.length + (selectionMode !== "none" ? 1 : 0),
167
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "entropix-datatable__empty", children: emptyMessage })
168
- }
169
- ) }) : table.rows.map((row, i) => {
170
- const globalIndex = table.page * table.pageSize + i;
171
- const rowKey = getRowKey(row, globalIndex);
172
- const rowProps = table.getRowProps(rowKey, i);
173
- const isSelected = table.selectedKeys.has(rowKey);
174
- return /* @__PURE__ */ jsxRuntime.jsxs(
175
- "tr",
176
- {
177
- className: "entropix-datatable__tr",
178
- "data-selected": isSelected ? "true" : void 0,
179
- ...mapA11yToAria(rowProps.accessibility),
180
- children: [
181
- selectionMode !== "none" && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "entropix-datatable__td entropix-datatable__td--checkbox", children: /* @__PURE__ */ jsxRuntime.jsx(
182
- "input",
183
- {
184
- type: "checkbox",
185
- className: "entropix-datatable__checkbox",
186
- checked: isSelected,
187
- onChange: () => table.toggleRowSelection(rowKey),
188
- "aria-label": `Select row ${rowKey}`
189
- }
190
- ) }),
191
- columns.map((col) => {
192
- const cellValue = col.accessor ? col.accessor(row) : row[col.key];
193
- return /* @__PURE__ */ jsxRuntime.jsx(
194
- "td",
195
- {
196
- className: "entropix-datatable__td",
197
- ...mapA11yToAria(
198
- table.getCellProps(col.key, rowKey).accessibility
199
- ),
200
- children: renderCell ? renderCell(cellValue, row, col) : String(cellValue ?? "")
201
- },
202
- col.key
203
- );
204
- })
205
- ]
206
- },
207
- rowKey
208
- );
209
- })
210
- }
211
- )
212
- ] }),
213
- table.pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
214
- "nav",
215
- {
216
- className: "entropix-datatable__pagination",
217
- "aria-label": "Table pagination",
218
- children: [
219
- /* @__PURE__ */ jsxRuntime.jsx(
220
- "button",
221
- {
222
- className: "entropix-datatable__pagination-btn",
223
- onClick: table.firstPage,
224
- disabled: !table.canPreviousPage,
225
- "aria-label": "First page",
226
- children: "\u27E8\u27E8"
227
- }
228
- ),
229
- /* @__PURE__ */ jsxRuntime.jsx(
230
- "button",
231
- {
232
- className: "entropix-datatable__pagination-btn",
233
- onClick: table.previousPage,
234
- disabled: !table.canPreviousPage,
235
- "aria-label": "Previous page",
236
- children: "\u27E8"
237
- }
238
- ),
239
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "entropix-datatable__pagination-info", children: [
240
- "Page ",
241
- table.page + 1,
242
- " of ",
243
- table.pageCount
244
- ] }),
245
- /* @__PURE__ */ jsxRuntime.jsx(
246
- "button",
247
- {
248
- className: "entropix-datatable__pagination-btn",
249
- onClick: table.nextPage,
250
- disabled: !table.canNextPage,
251
- "aria-label": "Next page",
252
- children: "\u27E9"
253
- }
254
- ),
255
- /* @__PURE__ */ jsxRuntime.jsx(
256
- "button",
257
- {
258
- className: "entropix-datatable__pagination-btn",
259
- onClick: table.lastPage,
260
- disabled: !table.canNextPage,
261
- "aria-label": "Last page",
262
- children: "\u27E9\u27E9"
263
- }
264
- )
265
- ]
266
- }
267
- )
268
- ] }) });
269
- }
270
- function ChartContainer({
271
- height = 300,
272
- className,
273
- children
274
- }) {
275
- const containerRef = react.useRef(null);
276
- const [width, setWidth] = react.useState(0);
277
- const handleResize = react.useCallback(() => {
278
- if (containerRef.current) {
279
- setWidth(containerRef.current.clientWidth);
280
- }
281
- }, []);
282
- react.useEffect(() => {
283
- const el = containerRef.current;
284
- if (!el) return;
285
- handleResize();
286
- const observer = new ResizeObserver(() => {
287
- handleResize();
288
- });
289
- observer.observe(el);
290
- return () => observer.disconnect();
291
- }, [handleResize]);
292
- return /* @__PURE__ */ jsxRuntime.jsx(
293
- "div",
294
- {
295
- ref: containerRef,
296
- className: className ? `entropix-chart ${className}` : "entropix-chart",
297
- style: { position: "relative", width: "100%" },
298
- children: width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
299
- "svg",
300
- {
301
- className: "entropix-chart__svg",
302
- width,
303
- height,
304
- viewBox: `0 0 ${width} ${height}`,
305
- children: children(width, height)
306
- }
307
- )
308
- }
309
- );
310
- }
311
- function XAxis({ scale, y, height: _height, formatter }) {
312
- const domain = scale.domain();
313
- const bandwidth = scale.bandwidth();
314
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
315
- domain.map((label) => {
316
- const x = scale(label) + bandwidth / 2;
317
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x}, ${y})`, children: [
318
- /* @__PURE__ */ jsxRuntime.jsx("line", { y2: 6, stroke: "currentColor", strokeWidth: 1 }),
319
- /* @__PURE__ */ jsxRuntime.jsx(
320
- "text",
321
- {
322
- className: "entropix-chart__axis-text",
323
- y: 18,
324
- textAnchor: "middle",
325
- dominantBaseline: "auto",
326
- children: formatter ? formatter(label) : label
327
- }
328
- )
329
- ] }, label);
330
- }),
331
- /* @__PURE__ */ jsxRuntime.jsx(
332
- "line",
333
- {
334
- x1: scale.range()[0],
335
- x2: scale.range()[1],
336
- y1: y,
337
- y2: y,
338
- stroke: "currentColor",
339
- strokeWidth: 1
340
- }
341
- )
342
- ] });
343
- }
344
- function YAxis({
345
- scale,
346
- x,
347
- width,
348
- formatter,
349
- showGrid = true
350
- }) {
351
- const ticks = scale.ticks();
352
- return /* @__PURE__ */ jsxRuntime.jsx("g", { children: ticks.map((tick) => {
353
- const y = scale(tick);
354
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x}, ${y})`, children: [
355
- /* @__PURE__ */ jsxRuntime.jsx(
356
- "text",
357
- {
358
- className: "entropix-chart__axis-text",
359
- x: -8,
360
- textAnchor: "end",
361
- dominantBaseline: "middle",
362
- children: formatter ? formatter(tick) : String(tick)
363
- }
364
- ),
365
- showGrid && /* @__PURE__ */ jsxRuntime.jsx(
366
- "line",
367
- {
368
- className: "entropix-chart__grid-line",
369
- x1: 0,
370
- x2: width,
371
- y1: 0,
372
- y2: 0
373
- }
374
- )
375
- ] }, tick);
376
- }) });
377
- }
378
- function ChartTooltip({ data, containerRef }) {
379
- const tooltipRef = react.useRef(null);
380
- const [position, setPosition] = react.useState({
381
- left: 0,
382
- top: 0
383
- });
384
- react.useEffect(() => {
385
- if (!data || !tooltipRef.current || !containerRef.current) return;
386
- const container = containerRef.current;
387
- const tooltip = tooltipRef.current;
388
- const containerRect = container.getBoundingClientRect();
389
- const tooltipWidth = tooltip.offsetWidth;
390
- const tooltipHeight = tooltip.offsetHeight;
391
- let left = data.x + 12;
392
- let top = data.y - tooltipHeight / 2;
393
- if (left + tooltipWidth > containerRect.width) {
394
- left = data.x - tooltipWidth - 12;
395
- }
396
- if (top < 0) {
397
- top = 0;
398
- }
399
- if (top + tooltipHeight > containerRect.height) {
400
- top = containerRect.height - tooltipHeight;
401
- }
402
- setPosition({ left, top });
403
- }, [data, containerRef]);
404
- return /* @__PURE__ */ jsxRuntime.jsx(
405
- "div",
406
- {
407
- ref: tooltipRef,
408
- className: `entropix-chart__tooltip${data ? " entropix-chart__tooltip--visible" : ""}`,
409
- style: {
410
- left: position.left,
411
- top: position.top
412
- },
413
- children: data && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "entropix-chart__tooltip-row", children: [
414
- /* @__PURE__ */ jsxRuntime.jsx(
415
- "span",
416
- {
417
- className: "entropix-chart__tooltip-swatch",
418
- style: { backgroundColor: data.color }
419
- }
420
- ),
421
- /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
422
- data.series,
423
- ": ",
424
- data.label,
425
- " \u2014 ",
426
- data.value
427
- ] })
428
- ] })
429
- }
430
- );
431
- }
432
- function ChartLegend({ items, onToggle }) {
433
- if (items.length === 0) return null;
434
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "entropix-chart__legend", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
435
- "button",
436
- {
437
- type: "button",
438
- className: `entropix-chart__legend-item${!item.active ? " entropix-chart__legend-item--inactive" : ""}`,
439
- onClick: () => onToggle(item.name),
440
- children: [
441
- /* @__PURE__ */ jsxRuntime.jsx(
442
- "span",
443
- {
444
- className: "entropix-chart__legend-swatch",
445
- style: { backgroundColor: item.color }
446
- }
447
- ),
448
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.name })
449
- ]
450
- },
451
- item.name
452
- )) });
453
- }
454
11
 
455
- // src/utils/chart-colors.ts
456
- var CSS_CHART_COLORS = [
457
- "var(--chart-series-1)",
458
- "var(--chart-series-2)",
459
- "var(--chart-series-3)",
460
- "var(--chart-series-4)",
461
- "var(--chart-series-5)",
462
- "var(--chart-series-6)",
463
- "var(--chart-series-7)",
464
- "var(--chart-series-8)"
465
- ];
466
- var MARGINS = { top: 20, right: 20, bottom: 40, left: 50 };
467
- function BarChart({
468
- data,
469
- height = 300,
470
- colors,
471
- stacked = false,
472
- showGrid = true,
473
- showTooltip = true,
474
- showLegend = true,
475
- xAxis,
476
- yAxis,
477
- className
478
- }) {
479
- const [hiddenSeries, setHiddenSeries] = react.useState(/* @__PURE__ */ new Set());
480
- const [tooltip, setTooltip] = react.useState(null);
481
- const containerRef = react.useRef(null);
482
- const toggleSeries = react.useCallback((name) => {
483
- setHiddenSeries((prev) => {
484
- const next = new Set(prev);
485
- if (next.has(name)) {
486
- next.delete(name);
487
- } else {
488
- next.add(name);
489
- }
490
- return next;
491
- });
492
- }, []);
493
- const allSeries = core.normalizeChartData(data, colors ?? CSS_CHART_COLORS);
494
- const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
495
- const { categories, yMin, yMax } = core.getDataExtent(visibleSeries);
496
- const legendItems = allSeries.map((s) => ({
497
- name: s.name,
498
- color: s.color,
499
- active: !hiddenSeries.has(s.name)
500
- }));
501
- const handleBarEnter = react.useCallback(
502
- (rect, seriesName, event) => {
503
- if (!showTooltip) return;
504
- const svg = event.target.closest("svg");
505
- if (!svg) return;
506
- svg.getBoundingClientRect();
507
- const container = containerRef.current;
508
- if (!container) return;
509
- container.getBoundingClientRect();
510
- setTooltip({
511
- x: rect.x + rect.width / 2 + MARGINS.left,
512
- y: rect.y + MARGINS.top,
513
- series: seriesName,
514
- label: rect.label,
515
- value: rect.value,
516
- color: rect.color
517
- });
518
- },
519
- [showTooltip]
520
- );
521
- const handleBarLeave = react.useCallback(() => {
522
- setTooltip(null);
523
- }, []);
524
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
525
- /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, children: (width, h) => {
526
- const innerWidth = width - MARGINS.left - MARGINS.right;
527
- const innerHeight = h - MARGINS.top - MARGINS.bottom;
528
- if (innerWidth <= 0 || innerHeight <= 0) return null;
529
- const bounds = core.niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
530
- const yScale = core.createLinearScale(
531
- [bounds.min, bounds.max],
532
- [innerHeight, 0]
533
- );
534
- const xScale = core.createBandScale(categories, [0, innerWidth]);
535
- const bars = core.computeBarGeometry(
536
- visibleSeries,
537
- xScale,
538
- yScale,
539
- innerHeight,
540
- stacked
541
- );
542
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${MARGINS.left}, ${MARGINS.top})`, children: [
543
- yAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
544
- YAxis,
545
- {
546
- scale: yScale,
547
- x: 0,
548
- width: innerWidth,
549
- showGrid,
550
- formatter: yAxis?.formatter
551
- }
552
- ),
553
- xAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
554
- XAxis,
555
- {
556
- scale: xScale,
557
- y: innerHeight,
558
- height: innerHeight,
559
- formatter: xAxis?.formatter
560
- }
561
- ),
562
- bars.map((rect, i) => {
563
- const series = visibleSeries[rect.seriesIndex];
564
- return /* @__PURE__ */ jsxRuntime.jsx(
565
- "rect",
566
- {
567
- className: "entropix-chart__bar",
568
- x: rect.x,
569
- y: rect.y,
570
- width: rect.width,
571
- height: rect.height,
572
- fill: rect.color,
573
- onMouseEnter: (e) => handleBarEnter(rect, series?.name ?? "", e),
574
- onMouseLeave: handleBarLeave
575
- },
576
- i
577
- );
578
- })
579
- ] });
580
- } }),
581
- showTooltip && /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { data: tooltip, containerRef }),
582
- showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
583
- ] });
584
- }
585
- var MARGINS2 = { top: 20, right: 20, bottom: 40, left: 50 };
586
- function LineChart({
587
- data,
588
- height = 300,
589
- colors,
590
- curved = false,
591
- showPoints = true,
592
- showGrid = true,
593
- showTooltip = true,
594
- showLegend = true,
595
- xAxis,
596
- yAxis,
597
- className
598
- }) {
599
- const [hiddenSeries, setHiddenSeries] = react.useState(/* @__PURE__ */ new Set());
600
- const [tooltip, setTooltip] = react.useState(null);
601
- const containerRef = react.useRef(null);
602
- const toggleSeries = react.useCallback((name) => {
603
- setHiddenSeries((prev) => {
604
- const next = new Set(prev);
605
- if (next.has(name)) next.delete(name);
606
- else next.add(name);
607
- return next;
608
- });
609
- }, []);
610
- const allSeries = core.normalizeChartData(data, colors ?? CSS_CHART_COLORS);
611
- const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
612
- const { categories, yMin, yMax } = core.getDataExtent(visibleSeries);
613
- const legendItems = allSeries.map((s) => ({
614
- name: s.name,
615
- color: s.color,
616
- active: !hiddenSeries.has(s.name)
617
- }));
618
- const handlePointEnter = react.useCallback(
619
- (point, seriesName, color) => {
620
- if (!showTooltip) return;
621
- setTooltip({
622
- x: point.x + MARGINS2.left,
623
- y: point.y + MARGINS2.top,
624
- series: seriesName,
625
- label: point.label,
626
- value: point.value,
627
- color
628
- });
629
- },
630
- [showTooltip]
631
- );
632
- const handlePointLeave = react.useCallback(() => {
633
- setTooltip(null);
634
- }, []);
635
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
636
- /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, children: (width, h) => {
637
- const innerWidth = width - MARGINS2.left - MARGINS2.right;
638
- const innerHeight = h - MARGINS2.top - MARGINS2.bottom;
639
- if (innerWidth <= 0 || innerHeight <= 0) return null;
640
- const bounds = core.niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
641
- const yScale = core.createLinearScale(
642
- [bounds.min, bounds.max],
643
- [innerHeight, 0]
644
- );
645
- const xScale = core.createBandScale(categories, [0, innerWidth]);
646
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${MARGINS2.left}, ${MARGINS2.top})`, children: [
647
- yAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
648
- YAxis,
649
- {
650
- scale: yScale,
651
- x: 0,
652
- width: innerWidth,
653
- showGrid,
654
- formatter: yAxis?.formatter
655
- }
656
- ),
657
- xAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
658
- XAxis,
659
- {
660
- scale: xScale,
661
- y: innerHeight,
662
- height: innerHeight,
663
- formatter: xAxis?.formatter
664
- }
665
- ),
666
- visibleSeries.map((series) => {
667
- const points = core.computeLinePoints(series, xScale, yScale);
668
- const pathD = core.describeLinePath(points, curved);
669
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
670
- /* @__PURE__ */ jsxRuntime.jsx(
671
- "path",
672
- {
673
- className: "entropix-chart__line",
674
- d: pathD,
675
- stroke: series.color
676
- }
677
- ),
678
- showPoints && points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
679
- "circle",
680
- {
681
- className: "entropix-chart__point",
682
- cx: pt.x,
683
- cy: pt.y,
684
- r: 3.5,
685
- fill: series.color,
686
- onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
687
- onMouseLeave: handlePointLeave
688
- },
689
- i
690
- ))
691
- ] }, series.name);
692
- })
693
- ] });
694
- } }),
695
- showTooltip && /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { data: tooltip, containerRef }),
696
- showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
697
- ] });
698
- }
699
- var MARGINS3 = { top: 20, right: 20, bottom: 40, left: 50 };
700
- function AreaChart({
701
- data,
702
- height = 300,
703
- colors,
704
- curved = false,
705
- opacity = 0.3,
706
- showGrid = true,
707
- showTooltip = true,
708
- showLegend = true,
709
- xAxis,
710
- yAxis,
711
- className
712
- }) {
713
- const [hiddenSeries, setHiddenSeries] = react.useState(/* @__PURE__ */ new Set());
714
- const [tooltip, setTooltip] = react.useState(null);
715
- const containerRef = react.useRef(null);
716
- const toggleSeries = react.useCallback((name) => {
717
- setHiddenSeries((prev) => {
718
- const next = new Set(prev);
719
- if (next.has(name)) next.delete(name);
720
- else next.add(name);
721
- return next;
722
- });
723
- }, []);
724
- const allSeries = core.normalizeChartData(data, colors ?? CSS_CHART_COLORS);
725
- const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
726
- const { categories, yMin, yMax } = core.getDataExtent(visibleSeries);
727
- const legendItems = allSeries.map((s) => ({
728
- name: s.name,
729
- color: s.color,
730
- active: !hiddenSeries.has(s.name)
731
- }));
732
- const handlePointEnter = react.useCallback(
733
- (point, seriesName, color) => {
734
- if (!showTooltip) return;
735
- setTooltip({
736
- x: point.x + MARGINS3.left,
737
- y: point.y + MARGINS3.top,
738
- series: seriesName,
739
- label: point.label,
740
- value: point.value,
741
- color
742
- });
743
- },
744
- [showTooltip]
745
- );
746
- const handlePointLeave = react.useCallback(() => {
747
- setTooltip(null);
748
- }, []);
749
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
750
- /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, children: (width, h) => {
751
- const innerWidth = width - MARGINS3.left - MARGINS3.right;
752
- const innerHeight = h - MARGINS3.top - MARGINS3.bottom;
753
- if (innerWidth <= 0 || innerHeight <= 0) return null;
754
- const bounds = core.niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
755
- const yScale = core.createLinearScale(
756
- [bounds.min, bounds.max],
757
- [innerHeight, 0]
758
- );
759
- const xScale = core.createBandScale(categories, [0, innerWidth]);
760
- const baselineY = yScale(bounds.min);
761
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${MARGINS3.left}, ${MARGINS3.top})`, children: [
762
- yAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
763
- YAxis,
764
- {
765
- scale: yScale,
766
- x: 0,
767
- width: innerWidth,
768
- showGrid,
769
- formatter: yAxis?.formatter
770
- }
771
- ),
772
- xAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
773
- XAxis,
774
- {
775
- scale: xScale,
776
- y: innerHeight,
777
- height: innerHeight,
778
- formatter: xAxis?.formatter
779
- }
780
- ),
781
- visibleSeries.map((series) => {
782
- const points = core.computeLinePoints(series, xScale, yScale);
783
- const areaD = core.describeAreaPath(points, baselineY, curved);
784
- const lineD = core.describeLinePath(points, curved);
785
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
786
- /* @__PURE__ */ jsxRuntime.jsx(
787
- "path",
788
- {
789
- className: "entropix-chart__area",
790
- d: areaD,
791
- fill: series.color,
792
- fillOpacity: opacity
793
- }
794
- ),
795
- /* @__PURE__ */ jsxRuntime.jsx(
796
- "path",
797
- {
798
- className: "entropix-chart__line",
799
- d: lineD,
800
- stroke: series.color
801
- }
802
- ),
803
- points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
804
- "circle",
805
- {
806
- className: "entropix-chart__point",
807
- cx: pt.x,
808
- cy: pt.y,
809
- r: 3,
810
- fill: series.color,
811
- onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
812
- onMouseLeave: handlePointLeave
813
- },
814
- i
815
- ))
816
- ] }, series.name);
817
- })
818
- ] });
819
- } }),
820
- showTooltip && /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { data: tooltip, containerRef }),
821
- showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
822
- ] });
823
- }
824
- function PieChart({
825
- data,
826
- height = 300,
827
- colors,
828
- innerRadius = 0,
829
- showTooltip = true,
830
- showLegend = true,
831
- className
832
- }) {
833
- const [hiddenSlices, setHiddenSlices] = react.useState(/* @__PURE__ */ new Set());
834
- const [tooltip, setTooltip] = react.useState(null);
835
- const containerRef = react.useRef(null);
836
- const toggleSlice = react.useCallback((name) => {
837
- setHiddenSlices((prev) => {
838
- const next = new Set(prev);
839
- if (next.has(name)) next.delete(name);
840
- else next.add(name);
841
- return next;
842
- });
843
- }, []);
844
- const palette = colors ?? CSS_CHART_COLORS;
845
- const coloredData = data.map((d, i) => ({
846
- ...d,
847
- color: core.getSeriesColor(i, palette)
848
- }));
849
- const visibleData = coloredData.filter((d) => !hiddenSlices.has(d.label));
850
- const legendItems = coloredData.map((d) => ({
851
- name: d.label,
852
- color: d.color,
853
- active: !hiddenSlices.has(d.label)
854
- }));
855
- const handleArcEnter = react.useCallback(
856
- (label, value, percentage, color, cx, cy) => {
857
- if (!showTooltip) return;
858
- setTooltip({
859
- x: cx,
860
- y: cy,
861
- series: `${(percentage * 100).toFixed(1)}%`,
862
- label,
863
- value,
864
- color
865
- });
866
- },
867
- [showTooltip]
868
- );
869
- const handleArcLeave = react.useCallback(() => {
870
- setTooltip(null);
871
- }, []);
872
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
873
- /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { height, children: (width, h) => {
874
- const cx = width / 2;
875
- const cy = h / 2;
876
- const outerRadius = Math.min(cx, cy) - 10;
877
- if (outerRadius <= 0) return null;
878
- const slices = core.computeArcGeometry(
879
- visibleData,
880
- outerRadius,
881
- innerRadius
882
- );
883
- return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${cx}, ${cy})`, children: slices.map((slice, i) => {
884
- const midAngle = (slice.startAngle + slice.endAngle) / 2;
885
- const tooltipX = cx + outerRadius * 0.6 * Math.cos(midAngle);
886
- const tooltipY = cy + outerRadius * 0.6 * Math.sin(midAngle);
887
- return /* @__PURE__ */ jsxRuntime.jsx(
888
- "path",
889
- {
890
- className: "entropix-chart__arc",
891
- d: slice.path,
892
- fill: slice.color,
893
- onMouseEnter: () => handleArcEnter(
894
- slice.label,
895
- slice.value,
896
- slice.percentage,
897
- slice.color,
898
- tooltipX,
899
- tooltipY
900
- ),
901
- onMouseLeave: handleArcLeave
902
- },
903
- i
904
- );
905
- }) });
906
- } }),
907
- showTooltip && /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { data: tooltip, containerRef }),
908
- showLegend && /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: legendItems, onToggle: toggleSlice })
909
- ] });
910
- }
911
12
 
912
- exports.AreaChart = AreaChart;
913
- exports.BarChart = BarChart;
914
- exports.DataTable = DataTable;
915
- exports.DataTableContext = DataTableContext;
916
- exports.LineChart = LineChart;
917
- exports.PieChart = PieChart;
918
- exports.useDataTableContext = useDataTableContext;
13
+ Object.defineProperty(exports, "DataTable", {
14
+ enumerable: true,
15
+ get: function () { return chunkSDCNTA7E_cjs.DataTable; }
16
+ });
17
+ Object.defineProperty(exports, "DataTableContext", {
18
+ enumerable: true,
19
+ get: function () { return chunkSDCNTA7E_cjs.DataTableContext; }
20
+ });
21
+ Object.defineProperty(exports, "useDataTableContext", {
22
+ enumerable: true,
23
+ get: function () { return chunkSDCNTA7E_cjs.useDataTableContext; }
24
+ });
25
+ Object.defineProperty(exports, "BarChart", {
26
+ enumerable: true,
27
+ get: function () { return chunkK6ZRQYSZ_cjs.BarChart; }
28
+ });
29
+ Object.defineProperty(exports, "LineChart", {
30
+ enumerable: true,
31
+ get: function () { return chunkQBI5NOHT_cjs.LineChart; }
32
+ });
33
+ Object.defineProperty(exports, "AreaChart", {
34
+ enumerable: true,
35
+ get: function () { return chunkWOVSQALY_cjs.AreaChart; }
36
+ });
37
+ Object.defineProperty(exports, "PieChart", {
38
+ enumerable: true,
39
+ get: function () { return chunkVGT2QF7D_cjs.PieChart; }
40
+ });
919
41
  //# sourceMappingURL=index.cjs.map
920
42
  //# sourceMappingURL=index.cjs.map