@dreamtree-org/twreact-ui 2.0.3 → 2.0.5
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/README.md +17 -6
- package/ai-skills/dreamtree-ui.md +12 -5
- package/dist/ai-schema.json +150 -1
- package/dist/charts/index.d.ts +2 -1
- package/dist/charts/index.js +297 -12
- package/dist/components/charts/ChartFrame.d.ts +1 -0
- package/dist/components/charts/ChartFrame.d.ts.map +1 -1
- package/dist/components/charts/ScatterChart.d.ts +4 -0
- package/dist/components/charts/ScatterChart.d.ts.map +1 -0
- package/dist/components/charts/ScatterTooltip.d.ts +14 -0
- package/dist/components/charts/ScatterTooltip.d.ts.map +1 -0
- package/dist/components/charts/scatterData.d.ts +17 -0
- package/dist/components/charts/scatterData.d.ts.map +1 -0
- package/dist/components/core/DatePicker.d.ts.map +1 -1
- package/dist/components/core/DateRangePicker.d.ts.map +1 -1
- package/dist/components/core/Select.d.ts.map +1 -1
- package/dist/components/navigation/Navbar.d.ts.map +1 -1
- package/dist/components/navigation/Sidebar.d.ts +2 -0
- package/dist/components/navigation/Sidebar.d.ts.map +1 -1
- package/dist/components/utility/Sortable.d.ts.map +1 -1
- package/dist/components/utility/SortableGroup.d.ts +15 -0
- package/dist/components/utility/SortableGroup.d.ts.map +1 -0
- package/dist/esm/charts/index.js +1 -0
- package/dist/esm/components/charts/ChartFrame.js +5 -5
- package/dist/esm/components/charts/ScatterChart.js +204 -0
- package/dist/esm/components/charts/ScatterTooltip.js +61 -0
- package/dist/esm/components/charts/scatterData.js +43 -0
- package/dist/esm/components/core/DatePicker.js +4 -1
- package/dist/esm/components/core/DateRangePicker.js +6 -2
- package/dist/esm/components/core/Select.js +6 -2
- package/dist/esm/components/navigation/Navbar.js +23 -6
- package/dist/esm/components/navigation/Sidebar.js +9 -2
- package/dist/esm/components/utility/Sortable.js +70 -48
- package/dist/esm/components/utility/SortableGroup.js +48 -0
- package/dist/esm/hooks/useFocusTrap.js +21 -9
- package/dist/esm/hooks/useSortable.js +96 -30
- package/dist/esm/hooks/useSortableGroup.js +268 -0
- package/dist/esm/index.js +1 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useSortable.d.ts +12 -3
- package/dist/hooks/useSortable.d.ts.map +1 -1
- package/dist/hooks/useSortableGroup.d.ts +43 -0
- package/dist/hooks/useSortableGroup.d.ts.map +1 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +936 -498
- package/dist/index.js +936 -497
- package/dist/types/charts.d.ts +28 -0
- package/dist/types/charts.d.ts.map +1 -1
- package/dist/types/index.d.ts +40 -1
- package/dist/types/index.d.ts.map +1 -1
- package/doc/README.md +2 -0
- package/mcp/catalog.snapshot.json +252 -14
- package/package.json +1 -1
package/dist/charts/index.js
CHANGED
|
@@ -11,7 +11,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
13
13
|
|
|
14
|
-
var _excluded$
|
|
14
|
+
var _excluded$4 = ["className", "title", "description", "defaultTitle", "data", "height", "aspectRatio", "emptyState", "legend", "accessibleTable", "tableColumns", "children", "aria-label"];
|
|
15
15
|
// The swatch colour arrives as a custom property so a token (`rgb(var(--dt-*))`)
|
|
16
16
|
// and a resolved rgb() string both work.
|
|
17
17
|
var swatch = function swatch(size) {
|
|
@@ -97,11 +97,11 @@ function ChartDataTable(_ref3) {
|
|
|
97
97
|
children: caption
|
|
98
98
|
}), jsxRuntime.jsx("thead", {
|
|
99
99
|
children: jsxRuntime.jsx("tr", {
|
|
100
|
-
children: columns.map(function (c) {
|
|
100
|
+
children: columns.map(function (c, i) {
|
|
101
101
|
return jsxRuntime.jsx("th", {
|
|
102
102
|
scope: "col",
|
|
103
103
|
children: c.label
|
|
104
|
-
}, c.key);
|
|
104
|
+
}, "".concat(c.key, "-").concat(i));
|
|
105
105
|
})
|
|
106
106
|
})
|
|
107
107
|
}), jsxRuntime.jsx("tbody", {
|
|
@@ -111,9 +111,9 @@ function ChartDataTable(_ref3) {
|
|
|
111
111
|
return i === 0 ? jsxRuntime.jsx("th", {
|
|
112
112
|
scope: "row",
|
|
113
113
|
children: c.format(row[c.key])
|
|
114
|
-
}, c.key) : jsxRuntime.jsx("td", {
|
|
114
|
+
}, "".concat(c.key, "-").concat(i)) : jsxRuntime.jsx("td", {
|
|
115
115
|
children: c.format(row[c.key])
|
|
116
|
-
}, c.key);
|
|
116
|
+
}, "".concat(c.key, "-").concat(i));
|
|
117
117
|
})
|
|
118
118
|
}, r);
|
|
119
119
|
})
|
|
@@ -141,7 +141,7 @@ var ChartFrame = /*#__PURE__*/React__default.default.forwardRef(function ChartFr
|
|
|
141
141
|
tableColumns = _ref4.tableColumns,
|
|
142
142
|
children = _ref4.children,
|
|
143
143
|
ariaLabel = _ref4["aria-label"],
|
|
144
|
-
rest = cn._objectWithoutProperties(_ref4, _excluded$
|
|
144
|
+
rest = cn._objectWithoutProperties(_ref4, _excluded$4);
|
|
145
145
|
var descriptionId = React.useId();
|
|
146
146
|
var name = title || ariaLabel || defaultTitle;
|
|
147
147
|
if (!Array.isArray(data) || data.length === 0) {
|
|
@@ -452,7 +452,7 @@ function usePinnedTooltip() {
|
|
|
452
452
|
};
|
|
453
453
|
}
|
|
454
454
|
|
|
455
|
-
var _excluded$
|
|
455
|
+
var _excluded$3 = ["kind", "data", "index", "categories", "colors", "valueFormatter", "xAxisFormatter", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "curveType", "stacked", "horizontal", "showDots", "connectNulls", "animate", "title", "description", "emptyState", "accessibleTable", "className"],
|
|
456
456
|
_excluded2 = ["ref"];
|
|
457
457
|
var ROOTS = {
|
|
458
458
|
line: recharts.LineChart,
|
|
@@ -577,7 +577,7 @@ var CartesianChart = /*#__PURE__*/React__default.default.forwardRef(function Car
|
|
|
577
577
|
_ref2$accessibleTable = _ref2.accessibleTable,
|
|
578
578
|
accessibleTable = _ref2$accessibleTable === void 0 ? true : _ref2$accessibleTable,
|
|
579
579
|
className = _ref2.className,
|
|
580
|
-
rest = cn._objectWithoutProperties(_ref2, _excluded$
|
|
580
|
+
rest = cn._objectWithoutProperties(_ref2, _excluded$3);
|
|
581
581
|
var _useChartTheme = useChartTheme(categories, colors),
|
|
582
582
|
chrome = _useChartTheme.chrome,
|
|
583
583
|
series = _useChartTheme.series;
|
|
@@ -747,7 +747,7 @@ var AreaChart = /*#__PURE__*/React__default.default.forwardRef(function (props,
|
|
|
747
747
|
});
|
|
748
748
|
AreaChart.displayName = "AreaChart";
|
|
749
749
|
|
|
750
|
-
var _excluded$
|
|
750
|
+
var _excluded$2 = ["data", "index", "category", "colors", "valueFormatter", "variant", "innerRadius", "outerRadius", "centerLabel", "height", "showLegend", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
|
|
751
751
|
var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
|
|
752
752
|
var data = _ref.data,
|
|
753
753
|
_ref$index = _ref.index,
|
|
@@ -778,7 +778,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
|
|
|
778
778
|
_ref$accessibleTable = _ref.accessibleTable,
|
|
779
779
|
accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
|
|
780
780
|
className = _ref.className,
|
|
781
|
-
rest = cn._objectWithoutProperties(_ref, _excluded$
|
|
781
|
+
rest = cn._objectWithoutProperties(_ref, _excluded$2);
|
|
782
782
|
var rows = Array.isArray(data) ? data : [];
|
|
783
783
|
var names = rows.map(function (row) {
|
|
784
784
|
return String(row[index]);
|
|
@@ -860,7 +860,7 @@ var DonutChart = /*#__PURE__*/React__default.default.forwardRef(function (_ref,
|
|
|
860
860
|
});
|
|
861
861
|
DonutChart.displayName = "DonutChart";
|
|
862
862
|
|
|
863
|
-
var _excluded = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
|
|
863
|
+
var _excluded$1 = ["data", "category", "index", "color", "type", "valueFormatter", "height", "showTooltip", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
|
|
864
864
|
/** A word-sized trend line: no axes, grid or legend — just the shape of the data. */
|
|
865
865
|
var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, ref) {
|
|
866
866
|
var data = _ref.data,
|
|
@@ -886,7 +886,7 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
|
|
|
886
886
|
_ref$accessibleTable = _ref.accessibleTable,
|
|
887
887
|
accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
|
|
888
888
|
className = _ref.className,
|
|
889
|
-
rest = cn._objectWithoutProperties(_ref, _excluded);
|
|
889
|
+
rest = cn._objectWithoutProperties(_ref, _excluded$1);
|
|
890
890
|
var _useChartTheme = useChartTheme([category], [color]),
|
|
891
891
|
series = _useChartTheme.series;
|
|
892
892
|
var reducedMotion = useReducedMotion();
|
|
@@ -964,8 +964,293 @@ var Sparkline = /*#__PURE__*/React__default.default.forwardRef(function (_ref, r
|
|
|
964
964
|
});
|
|
965
965
|
Sparkline.displayName = "Sparkline";
|
|
966
966
|
|
|
967
|
+
// Internal to the charts entry point: data shaping for ScatterChart.
|
|
968
|
+
var isFiniteNumber = function isFiniteNumber(v) {
|
|
969
|
+
return typeof v === "number" && Number.isFinite(v);
|
|
970
|
+
};
|
|
971
|
+
var textOf = function textOf(v) {
|
|
972
|
+
return v == null ? "" : String(v);
|
|
973
|
+
};
|
|
974
|
+
/**
|
|
975
|
+
* Axis domain. recharts draws a zero-width scale for a single distinct value, so
|
|
976
|
+
* pad around it; otherwise let recharts pick nice bounds.
|
|
977
|
+
*/
|
|
978
|
+
function scatterDomain(values) {
|
|
979
|
+
if (!values.length) return ["auto", "auto"];
|
|
980
|
+
var min = Math.min.apply(Math, cn._toConsumableArray(values));
|
|
981
|
+
var max = Math.max.apply(Math, cn._toConsumableArray(values));
|
|
982
|
+
if (min !== max) return ["auto", "auto"];
|
|
983
|
+
var pad = Math.abs(min) / 2 || 1;
|
|
984
|
+
return [min - pad, max + pad];
|
|
985
|
+
}
|
|
986
|
+
/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
|
|
987
|
+
function groupScatter(data, _ref) {
|
|
988
|
+
var x = _ref.x,
|
|
989
|
+
y = _ref.y,
|
|
990
|
+
category = _ref.category;
|
|
991
|
+
var rows = (Array.isArray(data) ? data : []).filter(function (row) {
|
|
992
|
+
return isFiniteNumber(row === null || row === void 0 ? void 0 : row[x]) && isFiniteNumber(row === null || row === void 0 ? void 0 : row[y]);
|
|
993
|
+
});
|
|
994
|
+
var groups = new Map();
|
|
995
|
+
rows.forEach(function (row) {
|
|
996
|
+
var name = category ? textOf(row[category]) : y;
|
|
997
|
+
if (!groups.has(name)) groups.set(name, []);
|
|
998
|
+
groups.get(name).push(row);
|
|
999
|
+
});
|
|
1000
|
+
return {
|
|
1001
|
+
rows: rows,
|
|
1002
|
+
names: cn._toConsumableArray(groups.keys()),
|
|
1003
|
+
groups: groups
|
|
1004
|
+
};
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
/**
|
|
1008
|
+
* Tooltip for one ScatterChart point: the entity (`index`) or series name as the
|
|
1009
|
+
* heading, then the series (when both are set) and the formatted x and y values.
|
|
1010
|
+
*/
|
|
1011
|
+
function ScatterTooltipContent(_ref) {
|
|
1012
|
+
var active = _ref.active,
|
|
1013
|
+
payload = _ref.payload,
|
|
1014
|
+
index = _ref.index,
|
|
1015
|
+
category = _ref.category,
|
|
1016
|
+
_ref$colorFor = _ref.colorFor,
|
|
1017
|
+
colorFor = _ref$colorFor === void 0 ? {} : _ref$colorFor,
|
|
1018
|
+
x = _ref.x,
|
|
1019
|
+
y = _ref.y;
|
|
1020
|
+
var row = active && payload && payload.length ? payload[0].payload : null;
|
|
1021
|
+
if (!row) return null;
|
|
1022
|
+
var seriesName = category ? textOf(row[category]) : null;
|
|
1023
|
+
var heading = index ? textOf(row[index]) : seriesName;
|
|
1024
|
+
var lines = [].concat(cn._toConsumableArray(index && seriesName ? [[category, seriesName]] : []), [[x.label, x.format(row[x.key])], [y.label, y.format(row[y.key])]]);
|
|
1025
|
+
return jsxRuntime.jsxs("div", {
|
|
1026
|
+
className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
|
|
1027
|
+
"data-chart-tooltip": "",
|
|
1028
|
+
children: [heading && jsxRuntime.jsxs("p", {
|
|
1029
|
+
className: "mb-1 flex items-center gap-2 font-medium",
|
|
1030
|
+
children: [seriesName && jsxRuntime.jsx("span", {
|
|
1031
|
+
className: swatch("h-2 w-2"),
|
|
1032
|
+
style: {
|
|
1033
|
+
"--dt-chart-color": colorFor[seriesName]
|
|
1034
|
+
},
|
|
1035
|
+
"aria-hidden": "true"
|
|
1036
|
+
}), jsxRuntime.jsx("span", {
|
|
1037
|
+
children: heading
|
|
1038
|
+
})]
|
|
1039
|
+
}), jsxRuntime.jsx("ul", {
|
|
1040
|
+
className: "space-y-0.5",
|
|
1041
|
+
children: lines.map(function (_ref2) {
|
|
1042
|
+
var _ref3 = cn._slicedToArray(_ref2, 2),
|
|
1043
|
+
name = _ref3[0],
|
|
1044
|
+
value = _ref3[1];
|
|
1045
|
+
return jsxRuntime.jsxs("li", {
|
|
1046
|
+
className: "flex items-center gap-2",
|
|
1047
|
+
children: [jsxRuntime.jsx("span", {
|
|
1048
|
+
className: "text-muted",
|
|
1049
|
+
children: name
|
|
1050
|
+
}), jsxRuntime.jsx("span", {
|
|
1051
|
+
className: "ml-auto pl-3 font-medium tabular-nums",
|
|
1052
|
+
children: value
|
|
1053
|
+
})]
|
|
1054
|
+
}, name);
|
|
1055
|
+
})
|
|
1056
|
+
})]
|
|
1057
|
+
});
|
|
1058
|
+
}
|
|
1059
|
+
|
|
1060
|
+
var _excluded = ["data", "x", "y", "index", "category", "colors", "valueFormatter", "xAxisFormatter", "xAxisLabel", "yAxisLabel", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
|
|
1061
|
+
var ScatterChart = /*#__PURE__*/React__default.default.forwardRef(function ScatterChart(_ref, ref) {
|
|
1062
|
+
var data = _ref.data,
|
|
1063
|
+
x = _ref.x,
|
|
1064
|
+
y = _ref.y,
|
|
1065
|
+
index = _ref.index,
|
|
1066
|
+
category = _ref.category,
|
|
1067
|
+
colors = _ref.colors,
|
|
1068
|
+
_ref$valueFormatter = _ref.valueFormatter,
|
|
1069
|
+
valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
|
|
1070
|
+
_ref$xAxisFormatter = _ref.xAxisFormatter,
|
|
1071
|
+
xAxisFormatter = _ref$xAxisFormatter === void 0 ? defaultValueFormatter : _ref$xAxisFormatter,
|
|
1072
|
+
xAxisLabel = _ref.xAxisLabel,
|
|
1073
|
+
yAxisLabel = _ref.yAxisLabel,
|
|
1074
|
+
_ref$height = _ref.height,
|
|
1075
|
+
height = _ref$height === void 0 ? 300 : _ref$height,
|
|
1076
|
+
aspectRatio = _ref.aspectRatio,
|
|
1077
|
+
_ref$showLegend = _ref.showLegend,
|
|
1078
|
+
showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
|
|
1079
|
+
_ref$showTooltip = _ref.showTooltip,
|
|
1080
|
+
showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
|
|
1081
|
+
_ref$showXAxis = _ref.showXAxis,
|
|
1082
|
+
showXAxis = _ref$showXAxis === void 0 ? true : _ref$showXAxis,
|
|
1083
|
+
_ref$showYAxis = _ref.showYAxis,
|
|
1084
|
+
showYAxis = _ref$showYAxis === void 0 ? true : _ref$showYAxis,
|
|
1085
|
+
_ref$showGrid = _ref.showGrid,
|
|
1086
|
+
showGrid = _ref$showGrid === void 0 ? true : _ref$showGrid,
|
|
1087
|
+
yAxisWidth = _ref.yAxisWidth,
|
|
1088
|
+
_ref$animate = _ref.animate,
|
|
1089
|
+
animate = _ref$animate === void 0 ? true : _ref$animate,
|
|
1090
|
+
title = _ref.title,
|
|
1091
|
+
description = _ref.description,
|
|
1092
|
+
emptyState = _ref.emptyState,
|
|
1093
|
+
_ref$accessibleTable = _ref.accessibleTable,
|
|
1094
|
+
accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
|
|
1095
|
+
className = _ref.className,
|
|
1096
|
+
rest = cn._objectWithoutProperties(_ref, _excluded);
|
|
1097
|
+
var _groupScatter = groupScatter(data, {
|
|
1098
|
+
x: x,
|
|
1099
|
+
y: y,
|
|
1100
|
+
category: category
|
|
1101
|
+
}),
|
|
1102
|
+
rows = _groupScatter.rows,
|
|
1103
|
+
names = _groupScatter.names,
|
|
1104
|
+
groups = _groupScatter.groups;
|
|
1105
|
+
var _useChartTheme = useChartTheme(names, colors),
|
|
1106
|
+
chrome = _useChartTheme.chrome,
|
|
1107
|
+
series = _useChartTheme.series;
|
|
1108
|
+
var reducedMotion = useReducedMotion();
|
|
1109
|
+
var chartId = useChartId();
|
|
1110
|
+
var _useElementWidth = useElementWidth(),
|
|
1111
|
+
_useElementWidth2 = cn._slicedToArray(_useElementWidth, 2),
|
|
1112
|
+
measureRef = _useElementWidth2[0],
|
|
1113
|
+
width = _useElementWidth2[1];
|
|
1114
|
+
var tick = {
|
|
1115
|
+
fill: chrome.axis,
|
|
1116
|
+
fontSize: 12
|
|
1117
|
+
};
|
|
1118
|
+
var axisTitle = function axisTitle(value, angle) {
|
|
1119
|
+
return value ? {
|
|
1120
|
+
value: value,
|
|
1121
|
+
angle: angle,
|
|
1122
|
+
position: angle ? "insideLeft" : "insideBottom",
|
|
1123
|
+
offset: angle ? 10 : -4,
|
|
1124
|
+
fill: chrome.axis,
|
|
1125
|
+
fontSize: 12
|
|
1126
|
+
} : undefined;
|
|
1127
|
+
};
|
|
1128
|
+
var xLabel = xAxisLabel || x;
|
|
1129
|
+
var yLabel = yAxisLabel || y;
|
|
1130
|
+
return jsxRuntime.jsx(ChartFrame, cn._objectSpread2(cn._objectSpread2({
|
|
1131
|
+
ref: ref,
|
|
1132
|
+
className: className,
|
|
1133
|
+
title: title,
|
|
1134
|
+
description: description,
|
|
1135
|
+
defaultTitle: "Scatter chart",
|
|
1136
|
+
data: rows,
|
|
1137
|
+
height: height,
|
|
1138
|
+
aspectRatio: aspectRatio,
|
|
1139
|
+
emptyState: emptyState,
|
|
1140
|
+
accessibleTable: accessibleTable,
|
|
1141
|
+
legend: showLegend && category ? names.map(function (name, i) {
|
|
1142
|
+
return {
|
|
1143
|
+
name: name,
|
|
1144
|
+
color: series[i]
|
|
1145
|
+
};
|
|
1146
|
+
}) : null,
|
|
1147
|
+
tableColumns: [].concat(cn._toConsumableArray(index ? [{
|
|
1148
|
+
key: index,
|
|
1149
|
+
label: index,
|
|
1150
|
+
format: textOf
|
|
1151
|
+
}] : []), cn._toConsumableArray(category && category !== index ? [{
|
|
1152
|
+
key: category,
|
|
1153
|
+
label: category,
|
|
1154
|
+
format: textOf
|
|
1155
|
+
}] : []), [{
|
|
1156
|
+
key: x,
|
|
1157
|
+
label: xLabel,
|
|
1158
|
+
format: xAxisFormatter
|
|
1159
|
+
}, {
|
|
1160
|
+
key: y,
|
|
1161
|
+
label: yLabel,
|
|
1162
|
+
format: valueFormatter
|
|
1163
|
+
}])
|
|
1164
|
+
}, rest), {}, {
|
|
1165
|
+
children: jsxRuntime.jsx("div", {
|
|
1166
|
+
className: "h-full w-full",
|
|
1167
|
+
ref: measureRef,
|
|
1168
|
+
children: jsxRuntime.jsx(recharts.ResponsiveContainer, {
|
|
1169
|
+
width: "100%",
|
|
1170
|
+
height: "100%",
|
|
1171
|
+
minWidth: 0,
|
|
1172
|
+
children: jsxRuntime.jsxs(recharts.ScatterChart, {
|
|
1173
|
+
id: chartId,
|
|
1174
|
+
margin: {
|
|
1175
|
+
top: 8,
|
|
1176
|
+
right: 8,
|
|
1177
|
+
bottom: xAxisLabel ? 16 : 0,
|
|
1178
|
+
left: 0
|
|
1179
|
+
},
|
|
1180
|
+
accessibilityLayer: false,
|
|
1181
|
+
children: [showGrid && jsxRuntime.jsx(recharts.CartesianGrid, {
|
|
1182
|
+
stroke: chrome.grid,
|
|
1183
|
+
strokeDasharray: "3 3"
|
|
1184
|
+
}), jsxRuntime.jsx(recharts.XAxis, {
|
|
1185
|
+
type: "number",
|
|
1186
|
+
dataKey: x,
|
|
1187
|
+
name: xLabel,
|
|
1188
|
+
domain: scatterDomain(rows.map(function (row) {
|
|
1189
|
+
return row[x];
|
|
1190
|
+
})),
|
|
1191
|
+
tick: tick,
|
|
1192
|
+
tickLine: false,
|
|
1193
|
+
axisLine: false,
|
|
1194
|
+
tickFormatter: xAxisFormatter,
|
|
1195
|
+
minTickGap: tickGapFor(width),
|
|
1196
|
+
hide: !showXAxis,
|
|
1197
|
+
label: axisTitle(xAxisLabel, 0)
|
|
1198
|
+
}), jsxRuntime.jsx(recharts.YAxis, {
|
|
1199
|
+
type: "number",
|
|
1200
|
+
dataKey: y,
|
|
1201
|
+
name: yLabel,
|
|
1202
|
+
domain: scatterDomain(rows.map(function (row) {
|
|
1203
|
+
return row[y];
|
|
1204
|
+
})),
|
|
1205
|
+
tick: tick,
|
|
1206
|
+
tickLine: false,
|
|
1207
|
+
axisLine: false,
|
|
1208
|
+
tickFormatter: valueFormatter,
|
|
1209
|
+
width: yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width),
|
|
1210
|
+
hide: !showYAxis,
|
|
1211
|
+
label: axisTitle(yAxisLabel, -90)
|
|
1212
|
+
}), showTooltip && jsxRuntime.jsx(recharts.Tooltip, {
|
|
1213
|
+
cursor: {
|
|
1214
|
+
stroke: chrome.grid,
|
|
1215
|
+
strokeDasharray: "3 3"
|
|
1216
|
+
},
|
|
1217
|
+
isAnimationActive: false,
|
|
1218
|
+
content: jsxRuntime.jsx(ScatterTooltipContent, {
|
|
1219
|
+
index: index,
|
|
1220
|
+
category: category,
|
|
1221
|
+
colorFor: Object.fromEntries(names.map(function (name, i) {
|
|
1222
|
+
return [name, series[i]];
|
|
1223
|
+
})),
|
|
1224
|
+
x: {
|
|
1225
|
+
key: x,
|
|
1226
|
+
label: xLabel,
|
|
1227
|
+
format: xAxisFormatter
|
|
1228
|
+
},
|
|
1229
|
+
y: {
|
|
1230
|
+
key: y,
|
|
1231
|
+
label: yLabel,
|
|
1232
|
+
format: valueFormatter
|
|
1233
|
+
}
|
|
1234
|
+
})
|
|
1235
|
+
}), names.map(function (name, i) {
|
|
1236
|
+
return jsxRuntime.jsx(recharts.Scatter, {
|
|
1237
|
+
id: "".concat(chartId, "-").concat(i),
|
|
1238
|
+
name: name,
|
|
1239
|
+
data: groups.get(name),
|
|
1240
|
+
fill: series[i],
|
|
1241
|
+
isAnimationActive: animate && !reducedMotion
|
|
1242
|
+
}, name);
|
|
1243
|
+
})]
|
|
1244
|
+
})
|
|
1245
|
+
})
|
|
1246
|
+
})
|
|
1247
|
+
}));
|
|
1248
|
+
});
|
|
1249
|
+
ScatterChart.displayName = "ScatterChart";
|
|
1250
|
+
|
|
967
1251
|
exports.AreaChart = AreaChart;
|
|
968
1252
|
exports.BarChart = BarChart;
|
|
969
1253
|
exports.DonutChart = DonutChart;
|
|
970
1254
|
exports.LineChart = LineChart;
|
|
1255
|
+
exports.ScatterChart = ScatterChart;
|
|
971
1256
|
exports.Sparkline = Sparkline;
|
|
@@ -8,6 +8,7 @@ export function ChartTooltipContent({ active, payload, label, valueFormatter, hi
|
|
|
8
8
|
valueFormatter: any;
|
|
9
9
|
hideLabel?: boolean | undefined;
|
|
10
10
|
}): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export function swatch(size: any): string;
|
|
11
12
|
/**
|
|
12
13
|
* The accessible shell every chart renders: the SVG lives in a `role="img"`
|
|
13
14
|
* region named by `title` and described by `description`; the numbers are
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;
|
|
1
|
+
{"version":3,"file":"ChartFrame.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ChartFrame.jsx"],"names":[],"mappings":"AAcA;;4CAWC;AAED;;;;;;mDAgBC;AAtCM,0CAAwG;AAoE/G;;;;GAIG;AACH,mFA6DG;kBA3I0B,OAAO"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScatterChart.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterChart.jsx"],"names":[],"mappings":";AASA,sFAyHG;kBAlIe,OAAO"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tooltip for one ScatterChart point: the entity (`index`) or series name as the
|
|
3
|
+
* heading, then the series (when both are set) and the formatted x and y values.
|
|
4
|
+
*/
|
|
5
|
+
export default function ScatterTooltipContent({ active, payload, index, category, colorFor, x, y }: {
|
|
6
|
+
active: any;
|
|
7
|
+
payload: any;
|
|
8
|
+
index: any;
|
|
9
|
+
category: any;
|
|
10
|
+
colorFor?: {} | undefined;
|
|
11
|
+
x: any;
|
|
12
|
+
y: any;
|
|
13
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
14
|
+
//# sourceMappingURL=ScatterTooltip.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScatterTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterTooltip.jsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH;;;;;;;;mDA4BC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Axis domain. recharts draws a zero-width scale for a single distinct value, so
|
|
3
|
+
* pad around it; otherwise let recharts pick nice bounds.
|
|
4
|
+
*/
|
|
5
|
+
export function scatterDomain(values: any): string[] | number[];
|
|
6
|
+
/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
|
|
7
|
+
export function groupScatter(data: any, { x, y, category }: {
|
|
8
|
+
x: any;
|
|
9
|
+
y: any;
|
|
10
|
+
category: any;
|
|
11
|
+
}): {
|
|
12
|
+
rows: any[];
|
|
13
|
+
names: any[];
|
|
14
|
+
groups: Map<any, any>;
|
|
15
|
+
};
|
|
16
|
+
export function textOf(v: any): string;
|
|
17
|
+
//# sourceMappingURL=scatterData.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scatterData.d.ts","sourceRoot":"","sources":["../../../src/components/charts/scatterData.js"],"names":[],"mappings":"AAKA;;;GAGG;AACH,gEAOC;AAED,+FAA+F;AAC/F;;;;;;;;EASC;AAzBM,uCAAkD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAsBA,
|
|
1
|
+
{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DatePicker.jsx"],"names":[],"mappings":";AAsBA,oFAuSE;kBArTK,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DateRangePicker.jsx"],"names":[],"mappings":";AAoCA,
|
|
1
|
+
{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/core/DateRangePicker.jsx"],"names":[],"mappings":";AAoCA,yFA6aG;kBAzcI,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8HA,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/core/Select.jsx"],"names":[],"mappings":";AA8HA,gFA0zBE;kBAh7BK,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+
|
|
1
|
+
{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAkZG;;kBAppBmF,OAAO"}
|
|
@@ -12,6 +12,8 @@ export default Sidebar;
|
|
|
12
12
|
* - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
|
|
13
13
|
* - collapsed: boolean (desktop collapsed)
|
|
14
14
|
* - onToggle: function to toggle collapse
|
|
15
|
+
* - collapsible: boolean (default true) — false hides the md+ collapse/expand
|
|
16
|
+
* toggle (the drawer keeps its "Close navigation" button)
|
|
15
17
|
* - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
|
|
16
18
|
* - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
|
|
17
19
|
* - drawerPosition: 'left' | 'right'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAoBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBAzwBI,OAAO"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AASA,kFAmIG;kBA5I0G,OAAO"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/** Where an item from another list would land; styled by whether `canDrop` allows it. */
|
|
2
|
+
export function SortablePlaceholder({ as: Tag, allowed }: {
|
|
3
|
+
as: any;
|
|
4
|
+
allowed: any;
|
|
5
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default SortableGroup;
|
|
7
|
+
/**
|
|
8
|
+
* Connects several `<Sortable id="…">` lists so items can move between them
|
|
9
|
+
* (pointer drag, or the cross-axis arrow keys while an item is picked up).
|
|
10
|
+
* `canDrop(item, target, from)` is asked before a target is shown as droppable;
|
|
11
|
+
* a refused target is marked as such and dropping there does nothing.
|
|
12
|
+
*/
|
|
13
|
+
declare const SortableGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
|
|
14
|
+
import React from "react";
|
|
15
|
+
//# sourceMappingURL=SortableGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SortableGroup.d.ts","sourceRoot":"","sources":["../../../src/components/utility/SortableGroup.jsx"],"names":[],"mappings":"AAuBA,yFAAyF;AACzF;;;4CAaC;;AAjCD;;;;;GAKG;AACH,uFASG;kBAnB+B,OAAO"}
|
package/dist/esm/charts/index.js
CHANGED
|
@@ -3,3 +3,4 @@ export { default as BarChart } from '../components/charts/BarChart.js';
|
|
|
3
3
|
export { default as AreaChart } from '../components/charts/AreaChart.js';
|
|
4
4
|
export { default as DonutChart } from '../components/charts/DonutChart.js';
|
|
5
5
|
export { default as Sparkline } from '../components/charts/Sparkline.js';
|
|
6
|
+
export { default as ScatterChart } from '../components/charts/ScatterChart.js';
|
|
@@ -90,11 +90,11 @@ function ChartDataTable(_ref3) {
|
|
|
90
90
|
children: caption
|
|
91
91
|
}), jsx("thead", {
|
|
92
92
|
children: jsx("tr", {
|
|
93
|
-
children: columns.map(function (c) {
|
|
93
|
+
children: columns.map(function (c, i) {
|
|
94
94
|
return jsx("th", {
|
|
95
95
|
scope: "col",
|
|
96
96
|
children: c.label
|
|
97
|
-
}, c.key);
|
|
97
|
+
}, "".concat(c.key, "-").concat(i));
|
|
98
98
|
})
|
|
99
99
|
})
|
|
100
100
|
}), jsx("tbody", {
|
|
@@ -104,9 +104,9 @@ function ChartDataTable(_ref3) {
|
|
|
104
104
|
return i === 0 ? jsx("th", {
|
|
105
105
|
scope: "row",
|
|
106
106
|
children: c.format(row[c.key])
|
|
107
|
-
}, c.key) : jsx("td", {
|
|
107
|
+
}, "".concat(c.key, "-").concat(i)) : jsx("td", {
|
|
108
108
|
children: c.format(row[c.key])
|
|
109
|
-
}, c.key);
|
|
109
|
+
}, "".concat(c.key, "-").concat(i));
|
|
110
110
|
})
|
|
111
111
|
}, r);
|
|
112
112
|
})
|
|
@@ -174,4 +174,4 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
|
|
|
174
174
|
}));
|
|
175
175
|
});
|
|
176
176
|
|
|
177
|
-
export { ChartFrame, ChartLegend, ChartTooltipContent };
|
|
177
|
+
export { ChartFrame, ChartLegend, ChartTooltipContent, swatch };
|