@entropix/data 0.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.
- package/dist/area-chart.cjs +14 -0
- package/dist/area-chart.css +144 -0
- package/dist/area-chart.d.cts +19 -0
- package/dist/area-chart.d.ts +19 -0
- package/dist/area-chart.js +5 -0
- package/dist/bar-chart.cjs +14 -0
- package/dist/bar-chart.css +144 -0
- package/dist/bar-chart.d.cts +18 -0
- package/dist/bar-chart.d.ts +18 -0
- package/dist/bar-chart.js +5 -0
- package/dist/chunk-42HKJHUY.js +96 -0
- package/dist/chunk-4WXLJDQU.js +74 -0
- package/dist/chunk-6YAOO76S.cjs +142 -0
- package/dist/chunk-CMAQ7DZD.js +135 -0
- package/dist/chunk-FQACLZYR.js +137 -0
- package/dist/chunk-GCZSXJAA.cjs +77 -0
- package/dist/chunk-K6ZRQYSZ.cjs +131 -0
- package/dist/chunk-QBI5NOHT.cjs +126 -0
- package/dist/chunk-SDCNTA7E.cjs +275 -0
- package/dist/chunk-VCSKHJLZ.js +124 -0
- package/dist/chunk-VGT2QF7D.cjs +98 -0
- package/dist/chunk-WOVSQALY.cjs +137 -0
- package/dist/chunk-X7GZD7KZ.js +129 -0
- package/dist/chunk-YINCJQN6.js +271 -0
- package/dist/data-table.cjs +20 -0
- package/dist/data-table.css +227 -0
- package/dist/data-table.d.cts +20 -0
- package/dist/data-table.d.ts +20 -0
- package/dist/data-table.js +3 -0
- package/dist/index.cjs +36 -269
- package/dist/index.css +144 -0
- package/dist/index.d.cts +8 -21
- package/dist/index.d.ts +8 -21
- package/dist/index.js +7 -269
- package/dist/line-chart.cjs +14 -0
- package/dist/line-chart.css +144 -0
- package/dist/line-chart.d.cts +19 -0
- package/dist/line-chart.d.ts +19 -0
- package/dist/line-chart.js +5 -0
- package/dist/pie-chart.cjs +13 -0
- package/dist/pie-chart.css +144 -0
- package/dist/pie-chart.d.cts +15 -0
- package/dist/pie-chart.d.ts +15 -0
- package/dist/pie-chart.js +4 -0
- package/dist/styles/chart.css +1 -0
- package/dist/styles/data-table.css +1 -304
- package/package.json +54 -3
- package/dist/index.cjs.map +0 -1
- package/dist/index.css.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunkGCZSXJAA_cjs = require('./chunk-GCZSXJAA.cjs');
|
|
4
|
+
var chunk6YAOO76S_cjs = require('./chunk-6YAOO76S.cjs');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var core = require('@entropix/core');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
var MARGINS = { top: 20, right: 20, bottom: 40, left: 50 };
|
|
10
|
+
function LineChart({
|
|
11
|
+
data,
|
|
12
|
+
height = 300,
|
|
13
|
+
colors,
|
|
14
|
+
curved = false,
|
|
15
|
+
showPoints = true,
|
|
16
|
+
showGrid = true,
|
|
17
|
+
showTooltip = true,
|
|
18
|
+
showLegend = true,
|
|
19
|
+
xAxis,
|
|
20
|
+
yAxis,
|
|
21
|
+
className
|
|
22
|
+
}) {
|
|
23
|
+
const [hiddenSeries, setHiddenSeries] = react.useState(/* @__PURE__ */ new Set());
|
|
24
|
+
const [tooltip, setTooltip] = react.useState(null);
|
|
25
|
+
const containerRef = react.useRef(null);
|
|
26
|
+
const toggleSeries = react.useCallback((name) => {
|
|
27
|
+
setHiddenSeries((prev) => {
|
|
28
|
+
const next = new Set(prev);
|
|
29
|
+
if (next.has(name)) next.delete(name);
|
|
30
|
+
else next.add(name);
|
|
31
|
+
return next;
|
|
32
|
+
});
|
|
33
|
+
}, []);
|
|
34
|
+
const allSeries = core.normalizeChartData(data, colors ?? chunk6YAOO76S_cjs.CSS_CHART_COLORS);
|
|
35
|
+
const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
|
|
36
|
+
const { categories, yMin, yMax } = core.getDataExtent(visibleSeries);
|
|
37
|
+
const legendItems = allSeries.map((s) => ({
|
|
38
|
+
name: s.name,
|
|
39
|
+
color: s.color,
|
|
40
|
+
active: !hiddenSeries.has(s.name)
|
|
41
|
+
}));
|
|
42
|
+
const handlePointEnter = react.useCallback(
|
|
43
|
+
(point, seriesName, color) => {
|
|
44
|
+
if (!showTooltip) return;
|
|
45
|
+
setTooltip({
|
|
46
|
+
x: point.x + MARGINS.left,
|
|
47
|
+
y: point.y + MARGINS.top,
|
|
48
|
+
series: seriesName,
|
|
49
|
+
label: point.label,
|
|
50
|
+
value: point.value,
|
|
51
|
+
color
|
|
52
|
+
});
|
|
53
|
+
},
|
|
54
|
+
[showTooltip]
|
|
55
|
+
);
|
|
56
|
+
const handlePointLeave = react.useCallback(() => {
|
|
57
|
+
setTooltip(null);
|
|
58
|
+
}, []);
|
|
59
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartContainer, { height, children: (width, h) => {
|
|
61
|
+
const innerWidth = width - MARGINS.left - MARGINS.right;
|
|
62
|
+
const innerHeight = h - MARGINS.top - MARGINS.bottom;
|
|
63
|
+
if (innerWidth <= 0 || innerHeight <= 0) return null;
|
|
64
|
+
const bounds = core.niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
|
|
65
|
+
const yScale = core.createLinearScale(
|
|
66
|
+
[bounds.min, bounds.max],
|
|
67
|
+
[innerHeight, 0]
|
|
68
|
+
);
|
|
69
|
+
const xScale = core.createBandScale(categories, [0, innerWidth]);
|
|
70
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${MARGINS.left}, ${MARGINS.top})`, children: [
|
|
71
|
+
yAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
chunkGCZSXJAA_cjs.YAxis,
|
|
73
|
+
{
|
|
74
|
+
scale: yScale,
|
|
75
|
+
x: 0,
|
|
76
|
+
width: innerWidth,
|
|
77
|
+
showGrid,
|
|
78
|
+
formatter: yAxis?.formatter
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
xAxis?.show !== false && /* @__PURE__ */ jsxRuntime.jsx(
|
|
82
|
+
chunkGCZSXJAA_cjs.XAxis,
|
|
83
|
+
{
|
|
84
|
+
scale: xScale,
|
|
85
|
+
y: innerHeight,
|
|
86
|
+
height: innerHeight,
|
|
87
|
+
formatter: xAxis?.formatter
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
visibleSeries.map((series) => {
|
|
91
|
+
const points = core.computeLinePoints(series, xScale, yScale);
|
|
92
|
+
const pathD = core.describeLinePath(points, curved);
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
94
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
95
|
+
"path",
|
|
96
|
+
{
|
|
97
|
+
className: "entropix-chart__line",
|
|
98
|
+
d: pathD,
|
|
99
|
+
stroke: series.color
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
showPoints && points.map((pt, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
103
|
+
"circle",
|
|
104
|
+
{
|
|
105
|
+
className: "entropix-chart__point",
|
|
106
|
+
cx: pt.x,
|
|
107
|
+
cy: pt.y,
|
|
108
|
+
r: 3.5,
|
|
109
|
+
fill: series.color,
|
|
110
|
+
onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
|
|
111
|
+
onMouseLeave: handlePointLeave
|
|
112
|
+
},
|
|
113
|
+
i
|
|
114
|
+
))
|
|
115
|
+
] }, series.name);
|
|
116
|
+
})
|
|
117
|
+
] });
|
|
118
|
+
} }),
|
|
119
|
+
showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartTooltip, { data: tooltip, containerRef }),
|
|
120
|
+
showLegend && allSeries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartLegend, { items: legendItems, onToggle: toggleSeries })
|
|
121
|
+
] });
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
exports.LineChart = LineChart;
|
|
125
|
+
//# sourceMappingURL=chunk-QBI5NOHT.cjs.map
|
|
126
|
+
//# sourceMappingURL=chunk-QBI5NOHT.cjs.map
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var core = require('@entropix/core');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
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
|
+
|
|
271
|
+
exports.DataTable = DataTable;
|
|
272
|
+
exports.DataTableContext = DataTableContext;
|
|
273
|
+
exports.useDataTableContext = useDataTableContext;
|
|
274
|
+
//# sourceMappingURL=chunk-SDCNTA7E.cjs.map
|
|
275
|
+
//# sourceMappingURL=chunk-SDCNTA7E.cjs.map
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { YAxis, XAxis } from './chunk-4WXLJDQU.js';
|
|
2
|
+
import { CSS_CHART_COLORS, ChartContainer, ChartTooltip, ChartLegend } from './chunk-FQACLZYR.js';
|
|
3
|
+
import { useState, useRef, useCallback } from 'react';
|
|
4
|
+
import { normalizeChartData, getDataExtent, niceBounds, createLinearScale, createBandScale, computeLinePoints, describeLinePath } from '@entropix/core';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var MARGINS = { top: 20, right: 20, bottom: 40, left: 50 };
|
|
8
|
+
function LineChart({
|
|
9
|
+
data,
|
|
10
|
+
height = 300,
|
|
11
|
+
colors,
|
|
12
|
+
curved = false,
|
|
13
|
+
showPoints = true,
|
|
14
|
+
showGrid = true,
|
|
15
|
+
showTooltip = true,
|
|
16
|
+
showLegend = true,
|
|
17
|
+
xAxis,
|
|
18
|
+
yAxis,
|
|
19
|
+
className
|
|
20
|
+
}) {
|
|
21
|
+
const [hiddenSeries, setHiddenSeries] = useState(/* @__PURE__ */ new Set());
|
|
22
|
+
const [tooltip, setTooltip] = useState(null);
|
|
23
|
+
const containerRef = useRef(null);
|
|
24
|
+
const toggleSeries = useCallback((name) => {
|
|
25
|
+
setHiddenSeries((prev) => {
|
|
26
|
+
const next = new Set(prev);
|
|
27
|
+
if (next.has(name)) next.delete(name);
|
|
28
|
+
else next.add(name);
|
|
29
|
+
return next;
|
|
30
|
+
});
|
|
31
|
+
}, []);
|
|
32
|
+
const allSeries = normalizeChartData(data, colors ?? CSS_CHART_COLORS);
|
|
33
|
+
const visibleSeries = allSeries.filter((s) => !hiddenSeries.has(s.name));
|
|
34
|
+
const { categories, yMin, yMax } = getDataExtent(visibleSeries);
|
|
35
|
+
const legendItems = allSeries.map((s) => ({
|
|
36
|
+
name: s.name,
|
|
37
|
+
color: s.color,
|
|
38
|
+
active: !hiddenSeries.has(s.name)
|
|
39
|
+
}));
|
|
40
|
+
const handlePointEnter = useCallback(
|
|
41
|
+
(point, seriesName, color) => {
|
|
42
|
+
if (!showTooltip) return;
|
|
43
|
+
setTooltip({
|
|
44
|
+
x: point.x + MARGINS.left,
|
|
45
|
+
y: point.y + MARGINS.top,
|
|
46
|
+
series: seriesName,
|
|
47
|
+
label: point.label,
|
|
48
|
+
value: point.value,
|
|
49
|
+
color
|
|
50
|
+
});
|
|
51
|
+
},
|
|
52
|
+
[showTooltip]
|
|
53
|
+
);
|
|
54
|
+
const handlePointLeave = useCallback(() => {
|
|
55
|
+
setTooltip(null);
|
|
56
|
+
}, []);
|
|
57
|
+
return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
|
|
58
|
+
/* @__PURE__ */ jsx(ChartContainer, { height, children: (width, h) => {
|
|
59
|
+
const innerWidth = width - MARGINS.left - MARGINS.right;
|
|
60
|
+
const innerHeight = h - MARGINS.top - MARGINS.bottom;
|
|
61
|
+
if (innerWidth <= 0 || innerHeight <= 0) return null;
|
|
62
|
+
const bounds = niceBounds(yMin, yMax, yAxis?.tickCount ?? 5);
|
|
63
|
+
const yScale = createLinearScale(
|
|
64
|
+
[bounds.min, bounds.max],
|
|
65
|
+
[innerHeight, 0]
|
|
66
|
+
);
|
|
67
|
+
const xScale = createBandScale(categories, [0, innerWidth]);
|
|
68
|
+
return /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGINS.left}, ${MARGINS.top})`, children: [
|
|
69
|
+
yAxis?.show !== false && /* @__PURE__ */ jsx(
|
|
70
|
+
YAxis,
|
|
71
|
+
{
|
|
72
|
+
scale: yScale,
|
|
73
|
+
x: 0,
|
|
74
|
+
width: innerWidth,
|
|
75
|
+
showGrid,
|
|
76
|
+
formatter: yAxis?.formatter
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
xAxis?.show !== false && /* @__PURE__ */ jsx(
|
|
80
|
+
XAxis,
|
|
81
|
+
{
|
|
82
|
+
scale: xScale,
|
|
83
|
+
y: innerHeight,
|
|
84
|
+
height: innerHeight,
|
|
85
|
+
formatter: xAxis?.formatter
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
visibleSeries.map((series) => {
|
|
89
|
+
const points = computeLinePoints(series, xScale, yScale);
|
|
90
|
+
const pathD = describeLinePath(points, curved);
|
|
91
|
+
return /* @__PURE__ */ jsxs("g", { children: [
|
|
92
|
+
/* @__PURE__ */ jsx(
|
|
93
|
+
"path",
|
|
94
|
+
{
|
|
95
|
+
className: "entropix-chart__line",
|
|
96
|
+
d: pathD,
|
|
97
|
+
stroke: series.color
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
showPoints && points.map((pt, i) => /* @__PURE__ */ jsx(
|
|
101
|
+
"circle",
|
|
102
|
+
{
|
|
103
|
+
className: "entropix-chart__point",
|
|
104
|
+
cx: pt.x,
|
|
105
|
+
cy: pt.y,
|
|
106
|
+
r: 3.5,
|
|
107
|
+
fill: series.color,
|
|
108
|
+
onMouseEnter: () => handlePointEnter(pt, series.name, series.color),
|
|
109
|
+
onMouseLeave: handlePointLeave
|
|
110
|
+
},
|
|
111
|
+
i
|
|
112
|
+
))
|
|
113
|
+
] }, series.name);
|
|
114
|
+
})
|
|
115
|
+
] });
|
|
116
|
+
} }),
|
|
117
|
+
showTooltip && /* @__PURE__ */ jsx(ChartTooltip, { data: tooltip, containerRef }),
|
|
118
|
+
showLegend && allSeries.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, onToggle: toggleSeries })
|
|
119
|
+
] });
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
export { LineChart };
|
|
123
|
+
//# sourceMappingURL=chunk-VCSKHJLZ.js.map
|
|
124
|
+
//# sourceMappingURL=chunk-VCSKHJLZ.js.map
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var chunk6YAOO76S_cjs = require('./chunk-6YAOO76S.cjs');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var core = require('@entropix/core');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
|
|
8
|
+
function PieChart({
|
|
9
|
+
data,
|
|
10
|
+
height = 300,
|
|
11
|
+
colors,
|
|
12
|
+
innerRadius = 0,
|
|
13
|
+
showTooltip = true,
|
|
14
|
+
showLegend = true,
|
|
15
|
+
className
|
|
16
|
+
}) {
|
|
17
|
+
const [hiddenSlices, setHiddenSlices] = react.useState(/* @__PURE__ */ new Set());
|
|
18
|
+
const [tooltip, setTooltip] = react.useState(null);
|
|
19
|
+
const containerRef = react.useRef(null);
|
|
20
|
+
const toggleSlice = react.useCallback((name) => {
|
|
21
|
+
setHiddenSlices((prev) => {
|
|
22
|
+
const next = new Set(prev);
|
|
23
|
+
if (next.has(name)) next.delete(name);
|
|
24
|
+
else next.add(name);
|
|
25
|
+
return next;
|
|
26
|
+
});
|
|
27
|
+
}, []);
|
|
28
|
+
const palette = colors ?? chunk6YAOO76S_cjs.CSS_CHART_COLORS;
|
|
29
|
+
const coloredData = data.map((d, i) => ({
|
|
30
|
+
...d,
|
|
31
|
+
color: core.getSeriesColor(i, palette)
|
|
32
|
+
}));
|
|
33
|
+
const visibleData = coloredData.filter((d) => !hiddenSlices.has(d.label));
|
|
34
|
+
const legendItems = coloredData.map((d) => ({
|
|
35
|
+
name: d.label,
|
|
36
|
+
color: d.color,
|
|
37
|
+
active: !hiddenSlices.has(d.label)
|
|
38
|
+
}));
|
|
39
|
+
const handleArcEnter = react.useCallback(
|
|
40
|
+
(label, value, percentage, color, cx, cy) => {
|
|
41
|
+
if (!showTooltip) return;
|
|
42
|
+
setTooltip({
|
|
43
|
+
x: cx,
|
|
44
|
+
y: cy,
|
|
45
|
+
series: `${(percentage * 100).toFixed(1)}%`,
|
|
46
|
+
label,
|
|
47
|
+
value,
|
|
48
|
+
color
|
|
49
|
+
});
|
|
50
|
+
},
|
|
51
|
+
[showTooltip]
|
|
52
|
+
);
|
|
53
|
+
const handleArcLeave = react.useCallback(() => {
|
|
54
|
+
setTooltip(null);
|
|
55
|
+
}, []);
|
|
56
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: className ? `entropix-chart ${className}` : "entropix-chart", style: { position: "relative" }, children: [
|
|
57
|
+
/* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartContainer, { height, children: (width, h) => {
|
|
58
|
+
const cx = width / 2;
|
|
59
|
+
const cy = h / 2;
|
|
60
|
+
const outerRadius = Math.min(cx, cy) - 10;
|
|
61
|
+
if (outerRadius <= 0) return null;
|
|
62
|
+
const slices = core.computeArcGeometry(
|
|
63
|
+
visibleData,
|
|
64
|
+
outerRadius,
|
|
65
|
+
innerRadius
|
|
66
|
+
);
|
|
67
|
+
return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${cx}, ${cy})`, children: slices.map((slice, i) => {
|
|
68
|
+
const midAngle = (slice.startAngle + slice.endAngle) / 2;
|
|
69
|
+
const tooltipX = cx + outerRadius * 0.6 * Math.cos(midAngle);
|
|
70
|
+
const tooltipY = cy + outerRadius * 0.6 * Math.sin(midAngle);
|
|
71
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
72
|
+
"path",
|
|
73
|
+
{
|
|
74
|
+
className: "entropix-chart__arc",
|
|
75
|
+
d: slice.path,
|
|
76
|
+
fill: slice.color,
|
|
77
|
+
onMouseEnter: () => handleArcEnter(
|
|
78
|
+
slice.label,
|
|
79
|
+
slice.value,
|
|
80
|
+
slice.percentage,
|
|
81
|
+
slice.color,
|
|
82
|
+
tooltipX,
|
|
83
|
+
tooltipY
|
|
84
|
+
),
|
|
85
|
+
onMouseLeave: handleArcLeave
|
|
86
|
+
},
|
|
87
|
+
i
|
|
88
|
+
);
|
|
89
|
+
}) });
|
|
90
|
+
} }),
|
|
91
|
+
showTooltip && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartTooltip, { data: tooltip, containerRef }),
|
|
92
|
+
showLegend && /* @__PURE__ */ jsxRuntime.jsx(chunk6YAOO76S_cjs.ChartLegend, { items: legendItems, onToggle: toggleSlice })
|
|
93
|
+
] });
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
exports.PieChart = PieChart;
|
|
97
|
+
//# sourceMappingURL=chunk-VGT2QF7D.cjs.map
|
|
98
|
+
//# sourceMappingURL=chunk-VGT2QF7D.cjs.map
|