oolib 2.196.0 → 2.197.0

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 (6) hide show
  1. package/dist/stories/v2/components/HeatMapGrid.stories.js +2970 -7
  2. package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js +1 -1
  3. package/dist/v2/components/dataviz/BarChart/index.js +1 -1
  4. package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts +2 -1
  5. package/dist/v2/components/dataviz/HeatMapGrid/index.js +67 -61
  6. package/package.json +1 -1
package/dist/v2/components/dataviz/BarChart/comps/Legend/index.js CHANGED
@@ -21,7 +21,7 @@ var Typo2_1 = require("../../../../Typo2");
21
21
  var LegendTooltipGlyph_1 = require("../LegendTooltipGlyph");
22
22
  var Legend = function (_a) {
23
23
  var data = _a.data, label = _a.label, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b;
24
- return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'scroll' }) },
24
+ return (react_1.default.createElement("div", { style: __assign(__assign({}, (orientation === 'vertical' ? { maxWidth: '200px' } : {})), { padding: "12px", borderRadius: '8px', border: "1px solid ".concat(__1.colors2.grey5), background: "linear-gradient(to bottom, hsla(0, 0%, 96%, 1), hsla(0, 0%, 100%, 0))", maxHeight: orientation === 'vertical' ? '100%' : '150px', overflow: 'auto' }) },
25
25
  label && orientation === 'vertical' && (react_1.default.createElement("div", { style: { paddingBottom: "8px" } },
26
26
  react_1.default.createElement(Typo2_1.UI_CAPTION_BOLD_DF, null, label))),
27
27
  react_1.default.createElement("div", { style: __assign(__assign({ display: "flex", flexDirection: orientation === "vertical" ? "column" : "row" }, (orientation === 'horizontal' ? { flexWrap: 'wrap' } : {})), { gap: "8px" }) },
package/dist/v2/components/dataviz/BarChart/index.js CHANGED
@@ -327,7 +327,7 @@ var BarChart = function (_a) {
327
327
  // menu options for grouped and stacked
328
328
  if (data.length === 0)
329
329
  return react_1.default.createElement("div", null, "No data available");
330
- return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'scroll' }) },
330
+ return (react_1.default.createElement("div", { ref: vizWrapperRef, style: __assign(__assign({}, style), { width: "100%", background: _debug_controls.chartWrapperBgColor, display: 'flex', gap: '8px', flexDirection: orientation === 'vertical' ? 'row' : 'column', position: 'relative', overflow: 'auto' }) },
331
331
  react_1.default.createElement("div", { style: { flexGrow: 1, position: 'relative' } },
332
332
  react_1.default.createElement(BarChartRenderer, { data: data, dataToSummarize: dataToSummarize, isBreakdown: isBreakdown, breakdownDisplayType: breakdownDisplayType, showSumOfBreakdownValues: false, showPercent: showPercent, showCount: showCount, activeBar: activeBar, setActiveBar: setActiveBar, onClick: onClick, mousePosition: mousePosition, dataMaxValue: dataMaxValue, breakdownCategoryName: breakdownCategoryName }),
333
333
  dataToSummarize && (react_1.default.createElement(BarChartRenderer, { data: dataToSummarize,
package/dist/v2/components/dataviz/HeatMapGrid/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { CSSProperties } from "react";
2
2
  export interface HeatMapGridProps {
3
3
  data: any;
4
4
  valuePath: string | string[];
@@ -14,6 +14,7 @@ export interface HeatMapGridProps {
14
14
  breakdownDisplayType?: "grouped" | "stacked";
15
15
  colorIdx?: number;
16
16
  summarizeAfterIdx?: number;
17
+ style?: CSSProperties;
17
18
  }
18
19
  /**
19
20
  * expects exactly the same data structure as barcharts - breakdown version
package/dist/v2/components/dataviz/HeatMapGrid/index.js CHANGED
@@ -117,7 +117,7 @@ var _configs = {
117
117
  gridGap: 2,
118
118
  cellRoundness: 4,
119
119
  cellSize: 36,
120
- axisLabelWidth: 62,
120
+ axisLabelWidth: 200
121
121
  };
122
122
  var HeatMapCell = function (_a) {
123
123
  var value = _a.value, dataMaxValue = _a.dataMaxValue, _b = _a.dataMinValue, dataMinValue = _b === void 0 ? 0 : _b, showPercent = _a.showPercent;
@@ -150,8 +150,8 @@ var HeatMapCell = function (_a) {
150
150
  * expects exactly the same data structure as barcharts - breakdown version
151
151
  */
152
152
  var HeatMapGrid = function (_a) {
153
- var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f;
154
- var _g = (0, usePrepareData_1.usePrepareData)({
153
+ var _data = _a.data, valuePath = _a.valuePath, tooltipLabelsMapping = _a.tooltipLabelsMapping, tooltipLabelsPath = _a.tooltipLabelsPath, _b = _a.labelPath, labelPath = _b === void 0 ? "name" : _b, onClick = _a.onClick, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, _e = _a.colorIdx, colorIdx = _e === void 0 ? 0 : _e, _f = _a.summarizeAfterIdx, summarizeAfterIdx = _f === void 0 ? 5 : _f, _g = _a.style, style = _g === void 0 ? {} : _g;
154
+ var _h = (0, usePrepareData_1.usePrepareData)({
155
155
  _data: _data,
156
156
  labelPath: labelPath,
157
157
  valuePath: valuePath,
@@ -160,71 +160,77 @@ var HeatMapGrid = function (_a) {
160
160
  isBreakdown: true,
161
161
  showPercent: showPercent,
162
162
  summarizeAfterIdx: summarizeAfterIdx,
163
- }), data = _g.data, dataMaxValue = _g.dataMaxValue, dataToSummarize = _g.dataToSummarize;
164
- return (react_1.default.createElement("div", null,
163
+ }), data = _h.data, dataMaxValue = _h.dataMaxValue, dataToSummarize = _h.dataToSummarize;
164
+ return (react_1.default.createElement("div", { style: __assign({ display: "grid", gridTemplateColumns: "auto 1fr", gap: _configs.gridGap + 'px', overflow: "auto", alignItems: "end" }, style) },
165
165
  react_1.default.createElement("div", { style: {
166
- display: "grid",
167
- gridTemplateColumns: "auto 1fr",
168
- gap: _configs.gridGap + 'px',
166
+ display: "flex",
167
+ flexDirection: "column",
168
+ gap: _configs.gridGap + "px",
169
169
  } },
170
- react_1.default.createElement("div", { style: {
170
+ react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
171
+ data.map(function (d) { return (react_1.default.createElement("div", { style: {
172
+ height: _configs.cellSize + "px",
173
+ textAlign: "right",
171
174
  display: "flex",
172
- flexDirection: "column",
173
- gap: _configs.gridGap + "px",
175
+ alignItems: "center",
176
+ justifyContent: "flex-end",
174
177
  } },
175
- react_1.default.createElement("div", { style: { height: _configs.axisLabelWidth + "px" } }),
176
- data.map(function (d) { return (react_1.default.createElement("div", { style: {
177
- height: _configs.cellSize + "px",
178
- textAlign: "right",
179
- display: "flex",
180
- alignItems: "center",
181
- justifyContent: "flex-end",
182
- } },
183
- react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
184
- width: _configs.axisLabelWidth + "px",
185
- textOverflow: "ellipsis",
186
- overflow: "hidden",
187
- whiteSpace: "nowrap",
188
- } }, d[0].labels.name))); })),
178
+ react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
179
+ width: "fit-content",
180
+ maxWidth: _configs.axisLabelWidth + "px",
181
+ height: "2.4em",
182
+ lineHeight: "1.2em",
183
+ overflow: "hidden",
184
+ wordBreak: "break-word",
185
+ } }, d[0].labels.name.length > 50 ? d[0].labels.name.substring(0, 50) + "..." : d[0].labels.name))); })),
186
+ react_1.default.createElement("div", { style: {
187
+ display: "flex",
188
+ flexDirection: "column",
189
+ gap: _configs.gridGap + "px",
190
+ overflowX: "auto",
191
+ } },
189
192
  react_1.default.createElement("div", { style: {
190
193
  display: "flex",
191
- flexDirection: "column",
194
+ alignItems: "center",
192
195
  gap: _configs.gridGap + "px",
196
+ } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
197
+ width: _configs.cellSize + "px",
198
+ height: _configs.axisLabelWidth + "px",
199
+ display: "flex",
200
+ alignItems: "flex-end",
201
+ textWrap: "nowrap",
202
+ justifyContent: 'center',
203
+ position: "relative",
204
+ overflow: "visible",
205
+ flexShrink: 0,
193
206
  } },
194
- react_1.default.createElement("div", { style: {
195
- display: "flex",
196
- alignItems: "center",
197
- gap: _configs.gridGap + "px",
198
- } }, data[0].map(function (dd) { return (react_1.default.createElement("div", { style: {
199
- width: _configs.cellSize + "px",
200
- height: _configs.axisLabelWidth + "px",
201
- display: "flex",
202
- alignItems: "flex-end",
203
- textWrap: "nowrap",
204
- justifyContent: 'center',
205
- position: "relative", // Add this
206
- overflow: "visible" // Add this to allow content to overflow
207
- } },
208
- react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
209
- width: _configs.axisLabelWidth + "px",
210
- textOverflow: "ellipsis",
211
- overflow: "hidden",
212
- whiteSpace: "nowrap",
213
- position: "absolute", // Add this
214
- bottom: '-8px', // which is half of the line height of the current text
215
- left: (_configs.cellSize / 2) + 'px', // Center horizontally
216
- transformOrigin: "left center", // Change origin to bottom
217
- transform: "rotate(-90deg)", // Adjust transform
218
- } }, dd.labels.tooltipLabel))); })),
219
- data.map(function (d) { return (react_1.default.createElement("div", { style: {
220
- display: "flex",
221
- alignItems: "center",
222
- gap: _configs.gridGap + "px",
223
- } }, d.map(function (dd) {
224
- // console.log({
225
- // color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
226
- // });
227
- return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
228
- }))); })))));
207
+ react_1.default.createElement(Typo2_1.UI_CAPTION_SEMIBOLD_DF, { style: {
208
+ width: _configs.axisLabelWidth + "px",
209
+ height: "32px",
210
+ position: "absolute",
211
+ bottom: '-16px',
212
+ left: (_configs.cellSize / 2) + 'px',
213
+ transformOrigin: "left center",
214
+ transform: "rotate(-90deg)",
215
+ // Multi-line
216
+ whiteSpace: "normal",
217
+ overflow: "hidden",
218
+ display: "-webkit-box",
219
+ WebkitBoxOrient: "vertical",
220
+ WebkitLineClamp: 2,
221
+ textOverflow: "ellipsis",
222
+ lineHeight: "16px",
223
+ } }, dd.labels.tooltipLabel))); })),
224
+ data.map(function (d) { return (react_1.default.createElement("div", { style: {
225
+ display: "flex",
226
+ alignItems: "center",
227
+ gap: _configs.gridGap + "px",
228
+ // flexShrink: 0,
229
+ } }, d.map(function (dd) {
230
+ // console.log({
231
+ // color: mapValueToColor(dd.labels.count, 0, dataMaxValue),
232
+ // });
233
+ return react_1.default.createElement(HeatMapCell, { showPercent: false, dataMaxValue: dataMaxValue, value: dd });
234
+ }))); }))));
229
235
  };
230
236
  exports.HeatMapGrid = HeatMapGrid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.196.0",
3
+ "version": "2.197.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",