oolib 2.213.5 → 2.214.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/components/LoadersAndProgress/ProgressBar/index.d.ts +1 -1
- package/dist/components/LoadersAndProgress/ProgressBar/index.js +1 -1
- package/dist/index.d.ts +0 -6
- package/dist/index.js +2 -14
- package/dist/stories/v2/components/Accordion.stories.js +0 -1
- package/dist/v2/components/Buttons/index.js +3 -1
- package/package.json +1 -1
- package/dist/stories/v2/components/DataVizAccordion.stories.d.ts +0 -7
- package/dist/stories/v2/components/DataVizAccordion.stories.js +0 -141
- package/dist/stories/v2/components/visualization/BarChart.stories.d.ts +0 -23
- package/dist/stories/v2/components/visualization/BarChart.stories.js +0 -251
- package/dist/stories/v2/components/visualization/BarGraphCollection.stories.d.ts +0 -19
- package/dist/stories/v2/components/visualization/BarGraphCollection.stories.js +0 -1190
- package/dist/stories/v2/components/visualization/HeatMapGrid.stories.d.ts +0 -18
- package/dist/stories/v2/components/visualization/HeatMapGrid.stories.js +0 -204
- package/dist/stories/v2/components/visualization/PieChart.stories.d.ts +0 -7
- package/dist/stories/v2/components/visualization/PieChart.stories.js +0 -79
- package/dist/stories/v2/components/visualization/configs/props1.d.ts +0 -102
- package/dist/stories/v2/components/visualization/configs/props1.js +0 -70
- package/dist/stories/v2/components/visualization/configs/props2.d.ts +0 -45
- package/dist/stories/v2/components/visualization/configs/props2.js +0 -2962
- package/dist/stories/v2/components/visualization/vizPlayground.stories.d.ts +0 -7
- package/dist/stories/v2/components/visualization/vizPlayground.stories.js +0 -55
- package/dist/v2/components/DataVizAccordion/index.d.ts +0 -13
- package/dist/v2/components/DataVizAccordion/index.js +0 -60
- package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.d.ts +0 -19
- package/dist/v2/components/dataviz/BarChart/_base_barchart_ui_configs.js +0 -25
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.d.ts +0 -8
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/OptimizedTooltip.js +0 -118
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.d.ts +0 -15
- package/dist/v2/components/dataviz/BarChart/comps/CustomTooltip/index.js +0 -120
- package/dist/v2/components/dataviz/BarChart/comps/CustomizedLabel/index.d.ts +0 -29
- package/dist/v2/components/dataviz/BarChart/comps/CustomizedLabel/index.js +0 -73
- package/dist/v2/components/dataviz/BarChart/comps/Legend/index.d.ts +0 -12
- package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js +0 -35
- package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.d.ts +0 -7
- package/dist/v2/components/dataviz/BarChart/comps/LegendTooltipGlyph/index.js +0 -18
- package/dist/v2/components/dataviz/BarChart/comps/TruncatedSVGText/index.d.ts +0 -7
- package/dist/v2/components/dataviz/BarChart/comps/TruncatedSVGText/index.js +0 -66
- package/dist/v2/components/dataviz/BarChart/index.d.ts +0 -45
- package/dist/v2/components/dataviz/BarChart/index.js +0 -383
- package/dist/v2/components/dataviz/BarGraphCollection/index.d.ts +0 -24
- package/dist/v2/components/dataviz/BarGraphCollection/index.js +0 -162
- package/dist/v2/components/dataviz/BarGraphCollection/styled.d.ts +0 -9
- package/dist/v2/components/dataviz/BarGraphCollection/styled.js +0 -92
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts +0 -2
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js +0 -60
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.d.ts +0 -11
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.js +0 -76
- package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts +0 -19
- package/dist/v2/components/dataviz/HeatMapGrid/index.js +0 -232
- package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.d.ts +0 -20
- package/dist/v2/components/dataviz/HeatMapGrid/utils/mapValueToColor.js +0 -45
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.d.ts +0 -6
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useAxisMeasure.js +0 -53
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.d.ts +0 -6
- package/dist/v2/components/dataviz/HeatMapGrid/utils/useFader.js +0 -36
- package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.d.ts +0 -33
- package/dist/v2/components/dataviz/HeatMapGrid/utils/usePrepareHeatMapData.js +0 -122
- package/dist/v2/components/dataviz/PieChart/index.d.ts +0 -21
- package/dist/v2/components/dataviz/PieChart/index.js +0 -186
- package/dist/v2/components/dataviz/types.d.ts +0 -13
- package/dist/v2/components/dataviz/types.js +0 -2
- package/dist/v2/components/dataviz/utils/usePrepareData.d.ts +0 -21
- package/dist/v2/components/dataviz/utils/usePrepareData.js +0 -213
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
-
if (k2 === undefined) k2 = k;
|
|
19
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
-
}
|
|
23
|
-
Object.defineProperty(o, k2, desc);
|
|
24
|
-
}) : (function(o, m, k, k2) {
|
|
25
|
-
if (k2 === undefined) k2 = k;
|
|
26
|
-
o[k2] = m[k];
|
|
27
|
-
}));
|
|
28
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
-
}) : function(o, v) {
|
|
31
|
-
o["default"] = v;
|
|
32
|
-
});
|
|
33
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
34
|
-
var ownKeys = function(o) {
|
|
35
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
36
|
-
var ar = [];
|
|
37
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
38
|
-
return ar;
|
|
39
|
-
};
|
|
40
|
-
return ownKeys(o);
|
|
41
|
-
};
|
|
42
|
-
return function (mod) {
|
|
43
|
-
if (mod && mod.__esModule) return mod;
|
|
44
|
-
var result = {};
|
|
45
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
46
|
-
__setModuleDefault(result, mod);
|
|
47
|
-
return result;
|
|
48
|
-
};
|
|
49
|
-
})();
|
|
50
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
51
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
52
|
-
};
|
|
53
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
54
|
-
exports.HeatMapGrid = void 0;
|
|
55
|
-
var react_1 = __importStar(require("react"));
|
|
56
|
-
var styled_components_1 = __importDefault(require("styled-components"));
|
|
57
|
-
var __1 = require("../../../..");
|
|
58
|
-
var Typo2_1 = require("../../Typo2");
|
|
59
|
-
var BarChart_1 = require("../BarChart");
|
|
60
|
-
var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
|
|
61
|
-
var mapValueToColor_1 = require("./utils/mapValueToColor");
|
|
62
|
-
var useAxisMeasure_1 = require("./utils/useAxisMeasure");
|
|
63
|
-
var useFader_1 = require("./utils/useFader");
|
|
64
|
-
var usePrepareHeatMapData_1 = require("./utils/usePrepareHeatMapData");
|
|
65
|
-
var _configs = {
|
|
66
|
-
labelsToGridGap: 4,
|
|
67
|
-
gridGap: 2,
|
|
68
|
-
cellRoundness: 4,
|
|
69
|
-
cellSize: 40,
|
|
70
|
-
axisLabelWidth: 150
|
|
71
|
-
};
|
|
72
|
-
var HeatMapCell = function (_a) {
|
|
73
|
-
var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
|
|
74
|
-
var containerRef = (0, react_1.useRef)();
|
|
75
|
-
var _c = (0, BarChart_1.useTrackMousePosition)({ containerRef: containerRef }), mousePosition = _c.mousePosition, isHovering = _c.isHovering;
|
|
76
|
-
var cellColor = (0, mapValueToColor_1.mapValueToColor)(value.labels.count, dataMinValue, dataMaxValue);
|
|
77
|
-
var getCellColorLightness = function () {
|
|
78
|
-
var splitUp = cellColor.trim().replace('hsl(', '');
|
|
79
|
-
splitUp = splitUp.replace(')', '');
|
|
80
|
-
var splitUpAry = splitUp.split(',').map(function (d) { return d.trim(); });
|
|
81
|
-
var toReturn = parseInt(splitUpAry[2].replace('%', ''));
|
|
82
|
-
return toReturn;
|
|
83
|
-
};
|
|
84
|
-
var textColor = value.labels.count === 0
|
|
85
|
-
? __1.colors2.black
|
|
86
|
-
: getCellColorLightness() > 60 ? __1.colors2.black : __1.colors2.white;
|
|
87
|
-
return (react_1.default.createElement("div", { ref: containerRef },
|
|
88
|
-
(isHovering) && (react_1.default.createElement(CustomTooltip_1.default, { active: true, value: [__assign(__assign({}, value.labels), { tooltipLabel: value.labels.name + ' | ' + value.labels.tooltipLabel //bit of a hack but will sort later
|
|
89
|
-
})], showPercent: showPercent, mousePosition: mousePosition })),
|
|
90
|
-
react_1.default.createElement("div", { style: {
|
|
91
|
-
height: _configs.cellSize + "px",
|
|
92
|
-
width: _configs.cellSize + "px",
|
|
93
|
-
background: cellColor,
|
|
94
|
-
borderRadius: _configs.cellRoundness + "px",
|
|
95
|
-
display: 'flex',
|
|
96
|
-
justifyContent: 'center',
|
|
97
|
-
alignItems: 'center'
|
|
98
|
-
} },
|
|
99
|
-
react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: { color: textColor } }, "".concat(value.labels.count)))));
|
|
100
|
-
};
|
|
101
|
-
var STYLED_UI_CAPTION_SEMIBOLD_DF = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), (0, __1.clampText)(2));
|
|
102
|
-
var HiddenScrollContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE and Edge */\n \n &::-webkit-scrollbar {\n display: none; /* Webkit browsers */\n }\n"], ["\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE and Edge */\n \n &::-webkit-scrollbar {\n display: none; /* Webkit browsers */\n }\n"])));
|
|
103
|
-
var HeatMapGrid = function (_a) {
|
|
104
|
-
var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, _c = _a.showPercent, showPercent = _c === void 0 ? true : _c, _d = _a.colorIdx, colorIdx = _d === void 0 ? 0 : _d, _e = _a.showCount, showCount = _e === void 0 ? true : _e, onClick = _a.onClick, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
|
|
105
|
-
var _h = (0, usePrepareHeatMapData_1.usePrepareHeatMapData)({
|
|
106
|
-
_data: _data,
|
|
107
|
-
valuePath: valuePath,
|
|
108
|
-
tooltipLabelsMapping: tooltipLabelsMapping,
|
|
109
|
-
tooltipLabelsPath: tooltipLabelsPath,
|
|
110
|
-
labelPath: labelPath,
|
|
111
|
-
showPercent: showPercent,
|
|
112
|
-
colorIdx: colorIdx
|
|
113
|
-
}), tableData = _h.tableData, columnHeaders = _h.columnHeaders, dataMaxValue = _h.dataMaxValue;
|
|
114
|
-
var scrollableRef = (0, react_1.useRef)(null);
|
|
115
|
-
var _j = (0, useFader_1.useFader)(scrollableRef), setFader = _j.setFader, showFader = _j.showFader, showHorizontalFader = _j.showHorizontalFader;
|
|
116
|
-
// Replace: const { xAxisWidth, yAxisWidth, measurementRef } = useAxisDimensions(data, _configs.axisLabelWidth);
|
|
117
|
-
var _k = (0, useAxisMeasure_1.useAxisMeasure)(_configs.axisLabelWidth), xWidth = _k.xWidth, yWidth = _k.yWidth, setHorizontalRef = _k.setHorizontalRef, setVerticalRef = _k.setVerticalRef;
|
|
118
|
-
return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "".concat(yWidth, "px 1fr"), gridTemplateRows: "".concat(xWidth, "px 1fr"), gap: _configs.labelsToGridGap + 'px', height: '100%', position: 'relative' }, style) },
|
|
119
|
-
react_1.default.createElement("div", { style: { gridRow: 1, gridColumn: 1 } }),
|
|
120
|
-
react_1.default.createElement(HiddenScrollContainer, { style: {
|
|
121
|
-
gridRow: 1,
|
|
122
|
-
gridColumn: 2,
|
|
123
|
-
overflowX: 'auto',
|
|
124
|
-
overflowY: 'hidden',
|
|
125
|
-
display: 'flex',
|
|
126
|
-
alignItems: 'flex-end',
|
|
127
|
-
}, onScroll: function (e) {
|
|
128
|
-
// Sync horizontal scroll with main content area
|
|
129
|
-
if (scrollableRef.current) {
|
|
130
|
-
scrollableRef.current.scrollLeft = e.target.scrollLeft;
|
|
131
|
-
}
|
|
132
|
-
} },
|
|
133
|
-
react_1.default.createElement("div", { style: {
|
|
134
|
-
display: "flex",
|
|
135
|
-
alignItems: "center",
|
|
136
|
-
gap: _configs.gridGap + "px",
|
|
137
|
-
minWidth: 'max-content',
|
|
138
|
-
} }, columnHeaders.map(function (header, index) { return (react_1.default.createElement("div", { key: "label-".concat(header.key, "-").concat(index), style: {
|
|
139
|
-
width: _configs.cellSize + "px",
|
|
140
|
-
height: xWidth + "px",
|
|
141
|
-
display: "flex",
|
|
142
|
-
alignItems: "flex-end",
|
|
143
|
-
textWrap: "nowrap",
|
|
144
|
-
justifyContent: 'center',
|
|
145
|
-
position: "relative",
|
|
146
|
-
overflow: "visible",
|
|
147
|
-
flexShrink: 0,
|
|
148
|
-
} },
|
|
149
|
-
react_1.default.createElement("div", { style: {
|
|
150
|
-
width: xWidth + "px",
|
|
151
|
-
position: "absolute",
|
|
152
|
-
bottom: 0,
|
|
153
|
-
left: '50%',
|
|
154
|
-
transformOrigin: "left bottom",
|
|
155
|
-
transform: "rotate(-90deg) translateY(50%)",
|
|
156
|
-
display: 'flex'
|
|
157
|
-
} },
|
|
158
|
-
react_1.default.createElement("div", { ref: function (el) { return setHorizontalRef(index, el); } },
|
|
159
|
-
react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: {
|
|
160
|
-
whiteSpace: "normal",
|
|
161
|
-
} }, header.displayLabel))))); }))),
|
|
162
|
-
react_1.default.createElement(HiddenScrollContainer, { style: {
|
|
163
|
-
gridRow: 2,
|
|
164
|
-
gridColumn: 1,
|
|
165
|
-
overflowY: 'auto',
|
|
166
|
-
overflowX: 'hidden',
|
|
167
|
-
display: 'flex',
|
|
168
|
-
flexDirection: 'column',
|
|
169
|
-
gap: _configs.gridGap + "px",
|
|
170
|
-
}, onScroll: function (e) {
|
|
171
|
-
// Sync vertical scroll with main content area
|
|
172
|
-
if (scrollableRef.current) {
|
|
173
|
-
scrollableRef.current.scrollTop = e.target.scrollTop;
|
|
174
|
-
}
|
|
175
|
-
} }, _data.map(function (row, idx) { return (react_1.default.createElement("div", { key: "name-".concat(row[labelPath], "-").concat(idx), style: {
|
|
176
|
-
height: _configs.cellSize + "px",
|
|
177
|
-
textAlign: "right",
|
|
178
|
-
display: "flex",
|
|
179
|
-
alignItems: "center",
|
|
180
|
-
justifyContent: "flex-end",
|
|
181
|
-
flexShrink: 0,
|
|
182
|
-
} },
|
|
183
|
-
react_1.default.createElement("div", { ref: function (el) { return setVerticalRef(idx, el); } },
|
|
184
|
-
react_1.default.createElement(STYLED_UI_CAPTION_SEMIBOLD_DF, { style: { maxWidth: yWidth + "px" } }, row[labelPath])))); })),
|
|
185
|
-
react_1.default.createElement("div", { ref: scrollableRef, style: {
|
|
186
|
-
gridRow: 2,
|
|
187
|
-
gridColumn: 2,
|
|
188
|
-
overflow: 'auto',
|
|
189
|
-
position: 'relative',
|
|
190
|
-
}, onScroll: function (e) {
|
|
191
|
-
// Sync scrolling with headers
|
|
192
|
-
var topHeader = e.target.parentElement.children[1]; // Top-right header
|
|
193
|
-
var leftHeader = e.target.parentElement.children[2]; // Bottom-left header
|
|
194
|
-
if (topHeader)
|
|
195
|
-
topHeader.scrollLeft = e.target.scrollLeft;
|
|
196
|
-
if (leftHeader)
|
|
197
|
-
leftHeader.scrollTop = e.target.scrollTop;
|
|
198
|
-
// Update fader visibility on scroll
|
|
199
|
-
setFader();
|
|
200
|
-
} },
|
|
201
|
-
react_1.default.createElement("div", { style: {
|
|
202
|
-
display: "flex",
|
|
203
|
-
flexDirection: "column",
|
|
204
|
-
gap: _configs.gridGap + "px",
|
|
205
|
-
minWidth: 'max-content',
|
|
206
|
-
} }, tableData.map(function (rowCells, rowIdx) { return (react_1.default.createElement("div", { key: rowIdx, style: {
|
|
207
|
-
display: "flex",
|
|
208
|
-
alignItems: "center",
|
|
209
|
-
gap: _configs.gridGap + "px",
|
|
210
|
-
flexShrink: 0,
|
|
211
|
-
} }, rowCells.map(function (cellData, colIdx) {
|
|
212
|
-
return react_1.default.createElement(HeatMapCell, { key: "".concat(rowIdx, "-").concat(colIdx), showPercent: showPercent, dataMaxValue: dataMaxValue, value: cellData });
|
|
213
|
-
}))); }))),
|
|
214
|
-
showFader && react_1.default.createElement("div", { style: {
|
|
215
|
-
background: "linear-gradient(to top, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),
|
|
216
|
-
position: 'absolute',
|
|
217
|
-
bottom: 0,
|
|
218
|
-
left: 0,
|
|
219
|
-
width: '100%',
|
|
220
|
-
height: '40px'
|
|
221
|
-
} }),
|
|
222
|
-
showHorizontalFader && react_1.default.createElement("div", { style: {
|
|
223
|
-
background: "linear-gradient(to left, ".concat(__1.colors2.white, ", hsla(0, 0%, 100%, 0))"),
|
|
224
|
-
position: 'absolute',
|
|
225
|
-
top: 0,
|
|
226
|
-
right: 0,
|
|
227
|
-
height: '100%',
|
|
228
|
-
width: '40px'
|
|
229
|
-
} })));
|
|
230
|
-
};
|
|
231
|
-
exports.HeatMapGrid = HeatMapGrid;
|
|
232
|
-
var templateObject_1, templateObject_2;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Maps a value from an input range to a color
|
|
3
|
-
* with the base color at the center point of the range
|
|
4
|
-
* @param {number} value - The value to map
|
|
5
|
-
* @param {number} minValue - The minimum value in the input range
|
|
6
|
-
* @param {number} maxValue - The maximum value in the input range
|
|
7
|
-
* @param {Object} hslColor - The base HSL color object
|
|
8
|
-
* @param {number} hslColor.h - Hue component (0-360)
|
|
9
|
-
* @param {number} hslColor.s - Saturation component (0-100)
|
|
10
|
-
* @param {number} hslColor.l - Lightness component (0-100)
|
|
11
|
-
* @param {number} minLightness - The minimum lightness (0-100) for darkest shade
|
|
12
|
-
* @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
|
|
13
|
-
* @return {string} - A hex color code
|
|
14
|
-
*/
|
|
15
|
-
export declare function mapValueToColor(value: any, minValue: any, maxValue: any, hslColor?: {
|
|
16
|
-
h: number;
|
|
17
|
-
s: number;
|
|
18
|
-
l: number;
|
|
19
|
-
}, // Default to #be185d
|
|
20
|
-
minLightness?: number, maxLightness?: number): string;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.mapValueToColor = mapValueToColor;
|
|
4
|
-
var __1 = require("../../../../..");
|
|
5
|
-
/**
|
|
6
|
-
* Maps a value from an input range to a color
|
|
7
|
-
* with the base color at the center point of the range
|
|
8
|
-
* @param {number} value - The value to map
|
|
9
|
-
* @param {number} minValue - The minimum value in the input range
|
|
10
|
-
* @param {number} maxValue - The maximum value in the input range
|
|
11
|
-
* @param {Object} hslColor - The base HSL color object
|
|
12
|
-
* @param {number} hslColor.h - Hue component (0-360)
|
|
13
|
-
* @param {number} hslColor.s - Saturation component (0-100)
|
|
14
|
-
* @param {number} hslColor.l - Lightness component (0-100)
|
|
15
|
-
* @param {number} minLightness - The minimum lightness (0-100) for darkest shade
|
|
16
|
-
* @param {number} maxLightness - The maximum lightness (0-100) for lightest shade
|
|
17
|
-
* @return {string} - A hex color code
|
|
18
|
-
*/
|
|
19
|
-
function mapValueToColor(value, minValue, maxValue, hslColor, // Default to #be185d
|
|
20
|
-
minLightness, maxLightness) {
|
|
21
|
-
if (hslColor === void 0) { hslColor = { h: 336, s: 74, l: 42 }; }
|
|
22
|
-
if (minLightness === void 0) { minLightness = 20; }
|
|
23
|
-
if (maxLightness === void 0) { maxLightness = 80; }
|
|
24
|
-
// Ensure value is within range
|
|
25
|
-
value = Math.max(minValue, Math.min(maxValue, value));
|
|
26
|
-
if (value === 0)
|
|
27
|
-
return __1.colors2.grey10;
|
|
28
|
-
// Calculate the center point of the range
|
|
29
|
-
var centerPoint = (minValue + maxValue) / 2;
|
|
30
|
-
// Extract the hsl components
|
|
31
|
-
var h = hslColor.h, s = hslColor.s, baseLightness = hslColor.l;
|
|
32
|
-
// Determine lightness based on position relative to center point
|
|
33
|
-
var lightness;
|
|
34
|
-
if (value < centerPoint) {
|
|
35
|
-
// Value is below center (smaller) - scale from maxLightness to baseLightness
|
|
36
|
-
var normalizedValue = (value - minValue) / (centerPoint - minValue);
|
|
37
|
-
lightness = maxLightness - normalizedValue * (maxLightness - baseLightness);
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
// Value is above center (larger) - scale from baseLightness to minLightness
|
|
41
|
-
var normalizedValue = (value - centerPoint) / (maxValue - centerPoint);
|
|
42
|
-
lightness = baseLightness - normalizedValue * (baseLightness - minLightness);
|
|
43
|
-
}
|
|
44
|
-
return "hsl(".concat(h, ", ").concat(s, "%, ").concat(lightness, "%)");
|
|
45
|
-
}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useAxisMeasure = void 0;
|
|
4
|
-
var react_1 = require("react");
|
|
5
|
-
var useAxisMeasure = function (defaultAxisLabelWidth) {
|
|
6
|
-
var _a = (0, react_1.useState)(defaultAxisLabelWidth), xWidth = _a[0], setXWidth = _a[1];
|
|
7
|
-
var _b = (0, react_1.useState)(defaultAxisLabelWidth), yWidth = _b[0], setYWidth = _b[1];
|
|
8
|
-
var horizontalRefs = (0, react_1.useRef)([]);
|
|
9
|
-
var verticalRefs = (0, react_1.useRef)([]);
|
|
10
|
-
// Functions to set refs
|
|
11
|
-
var setHorizontalRef = function (index, el) {
|
|
12
|
-
// console.log({horEL: el})
|
|
13
|
-
horizontalRefs.current[index] = el;
|
|
14
|
-
};
|
|
15
|
-
var setVerticalRef = function (index, el) {
|
|
16
|
-
// console.log({verEL: el})
|
|
17
|
-
verticalRefs.current[index] = el;
|
|
18
|
-
};
|
|
19
|
-
// console.log({horizontalRefs, verticalRefs})
|
|
20
|
-
(0, react_1.useEffect)(function () {
|
|
21
|
-
// Measure horizontal labels
|
|
22
|
-
var maxHorizontalWidth = 0;
|
|
23
|
-
horizontalRefs.current.forEach(function (ref) {
|
|
24
|
-
console.log({ ref: ref });
|
|
25
|
-
if (ref) {
|
|
26
|
-
var width = ref.offsetWidth;
|
|
27
|
-
maxHorizontalWidth = Math.max(maxHorizontalWidth, width);
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
// Measure vertical labels
|
|
31
|
-
var maxVerticalWidth = 0;
|
|
32
|
-
verticalRefs.current.forEach(function (ref) {
|
|
33
|
-
if (ref) {
|
|
34
|
-
var width = ref.offsetWidth;
|
|
35
|
-
maxVerticalWidth = Math.max(maxVerticalWidth, width);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
// Update state if measured width is less than config
|
|
39
|
-
if (maxHorizontalWidth > 0 && maxHorizontalWidth < defaultAxisLabelWidth) {
|
|
40
|
-
setXWidth(maxHorizontalWidth + 10); // +10 for padding
|
|
41
|
-
}
|
|
42
|
-
if (maxVerticalWidth > 0 && maxVerticalWidth < defaultAxisLabelWidth) {
|
|
43
|
-
setYWidth(maxVerticalWidth + 10); // +10 for padding
|
|
44
|
-
}
|
|
45
|
-
}, []);
|
|
46
|
-
return {
|
|
47
|
-
xWidth: xWidth,
|
|
48
|
-
yWidth: yWidth,
|
|
49
|
-
setHorizontalRef: setHorizontalRef,
|
|
50
|
-
setVerticalRef: setVerticalRef
|
|
51
|
-
};
|
|
52
|
-
};
|
|
53
|
-
exports.useAxisMeasure = useAxisMeasure;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useFader = void 0;
|
|
4
|
-
var react_1 = require("react");
|
|
5
|
-
var __1 = require("../../../../..");
|
|
6
|
-
var useFader = function (scrollableRef) {
|
|
7
|
-
var _a = (0, react_1.useState)(false), showFader = _a[0], setShowFader = _a[1];
|
|
8
|
-
var _b = (0, react_1.useState)(false), showHorizontalFader = _b[0], setShowHorizontalFader = _b[1];
|
|
9
|
-
var setFader = function () {
|
|
10
|
-
if (scrollableRef.current) {
|
|
11
|
-
var _a = scrollableRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
|
|
12
|
-
// Vertical fader logic
|
|
13
|
-
var hasMoreContentToScrollDown = scrollTop + clientHeight < scrollHeight - 5;
|
|
14
|
-
if (hasMoreContentToScrollDown && !showFader) {
|
|
15
|
-
setShowFader(true);
|
|
16
|
-
}
|
|
17
|
-
else if (!hasMoreContentToScrollDown && showFader) {
|
|
18
|
-
setShowFader(false);
|
|
19
|
-
}
|
|
20
|
-
// Horizontal fader logic
|
|
21
|
-
var hasMoreContentToScrollRight = scrollLeft + clientWidth < scrollWidth - 5;
|
|
22
|
-
if (hasMoreContentToScrollRight && !showHorizontalFader) {
|
|
23
|
-
setShowHorizontalFader(true);
|
|
24
|
-
}
|
|
25
|
-
else if (!hasMoreContentToScrollRight && showHorizontalFader) {
|
|
26
|
-
setShowHorizontalFader(false);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
(0, react_1.useEffect)(function () {
|
|
31
|
-
setFader();
|
|
32
|
-
}, []);
|
|
33
|
-
(0, __1.useScroll)(setFader);
|
|
34
|
-
return { showFader: showFader, showHorizontalFader: showHorizontalFader, setFader: setFader };
|
|
35
|
-
};
|
|
36
|
-
exports.useFader = useFader;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
interface PrepareHeatMapDataParams {
|
|
2
|
-
_data: any[];
|
|
3
|
-
valuePath: string | string[];
|
|
4
|
-
tooltipLabelsMapping?: {
|
|
5
|
-
[key: string]: string;
|
|
6
|
-
};
|
|
7
|
-
tooltipLabelsPath?: string | string[];
|
|
8
|
-
labelPath: string;
|
|
9
|
-
showPercent: boolean;
|
|
10
|
-
colorIdx: number;
|
|
11
|
-
}
|
|
12
|
-
interface HeatMapCellData {
|
|
13
|
-
labels: {
|
|
14
|
-
count: number;
|
|
15
|
-
percentage?: number;
|
|
16
|
-
name: string;
|
|
17
|
-
tooltipLabel: string;
|
|
18
|
-
dataIndex: number;
|
|
19
|
-
hasData: boolean;
|
|
20
|
-
barColor: string;
|
|
21
|
-
textColor: string;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
interface PreparedHeatMapData {
|
|
25
|
-
tableData: HeatMapCellData[][];
|
|
26
|
-
columnHeaders: {
|
|
27
|
-
key: string;
|
|
28
|
-
displayLabel: string;
|
|
29
|
-
}[];
|
|
30
|
-
dataMaxValue: number;
|
|
31
|
-
}
|
|
32
|
-
export declare const usePrepareHeatMapData: ({ _data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx }: PrepareHeatMapDataParams) => PreparedHeatMapData;
|
|
33
|
-
export {};
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.usePrepareHeatMapData = void 0;
|
|
4
|
-
var react_1 = require("react");
|
|
5
|
-
var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
|
|
6
|
-
var colors_1 = require("../../../../themes/colors");
|
|
7
|
-
var usePrepareHeatMapData = function (_a) {
|
|
8
|
-
var _data = _a._data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, labelPath = _a.labelPath, showPercent = _a.showPercent, colorIdx = _a.colorIdx;
|
|
9
|
-
return (0, react_1.useMemo)(function () {
|
|
10
|
-
if (!_data || _data.length === 0) {
|
|
11
|
-
return {
|
|
12
|
-
tableData: [],
|
|
13
|
-
columnHeaders: [],
|
|
14
|
-
dataMaxValue: 0
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
var valuePathArray = Array.isArray(valuePath) ? valuePath : [valuePath];
|
|
18
|
-
// Optimized: Single pass to collect all unique columns and pre-calculate row totals
|
|
19
|
-
var columnMap = new Map(); // columnLabel -> columnIndex
|
|
20
|
-
var rowTotals = [];
|
|
21
|
-
var rowData = [];
|
|
22
|
-
// First pass: collect unique columns and calculate row totals
|
|
23
|
-
_data.forEach(function (row, rowIndex) {
|
|
24
|
-
var rowName = (0, _EXPORTS_1.getVal)(row, labelPath);
|
|
25
|
-
var cellValues = new Map();
|
|
26
|
-
var rowTotal = 0;
|
|
27
|
-
valuePathArray.forEach(function (path, pathIndex) {
|
|
28
|
-
var value = (0, _EXPORTS_1.getVal)(row, path);
|
|
29
|
-
if (value !== undefined && value !== null) {
|
|
30
|
-
// Get column label
|
|
31
|
-
var columnLabel = void 0;
|
|
32
|
-
if (tooltipLabelsPath) {
|
|
33
|
-
if (Array.isArray(tooltipLabelsPath)) {
|
|
34
|
-
var labelPath_1 = tooltipLabelsPath[pathIndex];
|
|
35
|
-
if (labelPath_1) {
|
|
36
|
-
var labelValue = (0, _EXPORTS_1.getVal)(row, labelPath_1);
|
|
37
|
-
columnLabel = Array.isArray(labelValue) ? labelValue[0] : labelValue || "Column ".concat(pathIndex);
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
columnLabel = "Column ".concat(pathIndex);
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
var labelValue = (0, _EXPORTS_1.getVal)(row, tooltipLabelsPath);
|
|
45
|
-
columnLabel = Array.isArray(labelValue) ? labelValue[0] : labelValue || "Column ".concat(pathIndex);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
else if (tooltipLabelsMapping) {
|
|
49
|
-
columnLabel = tooltipLabelsMapping[path] || path;
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
columnLabel = path;
|
|
53
|
-
}
|
|
54
|
-
// Only add to cellValues if this column doesn't already exist for this row
|
|
55
|
-
// This prevents overwriting values when the same column appears multiple times
|
|
56
|
-
if (!cellValues.has(columnLabel)) {
|
|
57
|
-
cellValues.set(columnLabel, value);
|
|
58
|
-
if (!columnMap.has(columnLabel)) {
|
|
59
|
-
columnMap.set(columnLabel, columnMap.size);
|
|
60
|
-
}
|
|
61
|
-
rowTotal += value;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
});
|
|
65
|
-
rowTotals.push(rowTotal);
|
|
66
|
-
rowData.push({ rowName: rowName, cellValues: cellValues });
|
|
67
|
-
});
|
|
68
|
-
// Create column headers in order
|
|
69
|
-
var columnHeaders = Array.from(columnMap.entries())
|
|
70
|
-
.sort(function (_a, _b) {
|
|
71
|
-
var a = _a[1];
|
|
72
|
-
var b = _b[1];
|
|
73
|
-
return a - b;
|
|
74
|
-
})
|
|
75
|
-
.map(function (_a) {
|
|
76
|
-
var key = _a[0];
|
|
77
|
-
return ({
|
|
78
|
-
key: key,
|
|
79
|
-
displayLabel: key
|
|
80
|
-
});
|
|
81
|
-
});
|
|
82
|
-
// Second pass: build table data efficiently
|
|
83
|
-
var tableData = rowData.map(function (_a, rowIndex) {
|
|
84
|
-
var rowName = _a.rowName, cellValues = _a.cellValues;
|
|
85
|
-
var rowTotal = rowTotals[rowIndex];
|
|
86
|
-
return columnHeaders.map(function (header, colIndex) {
|
|
87
|
-
var cellValue = cellValues.get(header.key) || 0;
|
|
88
|
-
var hasData = cellValues.has(header.key);
|
|
89
|
-
var percentage = rowTotal > 0 ? (cellValue / rowTotal) * 100 : 0;
|
|
90
|
-
return {
|
|
91
|
-
labels: {
|
|
92
|
-
count: cellValue,
|
|
93
|
-
percentage: showPercent ? Math.ceil(percentage) : undefined,
|
|
94
|
-
name: rowName,
|
|
95
|
-
tooltipLabel: header.key,
|
|
96
|
-
dataIndex: rowIndex,
|
|
97
|
-
hasData: hasData,
|
|
98
|
-
barColor: colors_1.dataVizColors[(colorIdx + colIndex) % colors_1.dataVizColors.length],
|
|
99
|
-
textColor: colors_1.dataVizColorsText[(colorIdx + colIndex) % colors_1.dataVizColorsText.length]
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
});
|
|
103
|
-
});
|
|
104
|
-
// Calculate max value efficiently
|
|
105
|
-
var dataMaxValue = 1;
|
|
106
|
-
for (var _i = 0, rowData_1 = rowData; _i < rowData_1.length; _i++) {
|
|
107
|
-
var cellValues = rowData_1[_i].cellValues;
|
|
108
|
-
for (var _a = 0, _b = Array.from(cellValues.values()); _a < _b.length; _a++) {
|
|
109
|
-
var value = _b[_a];
|
|
110
|
-
if (value > dataMaxValue) {
|
|
111
|
-
dataMaxValue = value;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
return {
|
|
116
|
-
tableData: tableData,
|
|
117
|
-
columnHeaders: columnHeaders,
|
|
118
|
-
dataMaxValue: dataMaxValue
|
|
119
|
-
};
|
|
120
|
-
}, [_data, valuePath, tooltipLabelsMapping, tooltipLabelsPath, labelPath, showPercent, colorIdx]);
|
|
121
|
-
};
|
|
122
|
-
exports.usePrepareHeatMapData = usePrepareHeatMapData;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import React, { CSSProperties } from "react";
|
|
2
|
-
export interface PieChartProps {
|
|
3
|
-
data: any;
|
|
4
|
-
valuePath: string | string[];
|
|
5
|
-
tooltipLabelsMapping?: {
|
|
6
|
-
[key: string]: string;
|
|
7
|
-
};
|
|
8
|
-
tooltipLabelsPath?: string | string[];
|
|
9
|
-
breakdownCategoryName?: string;
|
|
10
|
-
labelPath: string;
|
|
11
|
-
title?: string;
|
|
12
|
-
onClick?: (name: string) => void;
|
|
13
|
-
colors?: string[];
|
|
14
|
-
colorIdx?: number;
|
|
15
|
-
plotDataPoint?: "percentage" | "count";
|
|
16
|
-
showPercent?: boolean;
|
|
17
|
-
showCount?: boolean;
|
|
18
|
-
innerLabel?: string;
|
|
19
|
-
style?: CSSProperties;
|
|
20
|
-
}
|
|
21
|
-
export declare const PieChart: React.FunctionComponent<PieChartProps>;
|