oolib 2.189.0 → 2.190.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.
- package/dist/stories/v2/components/BarChart.stories.js +76 -0
- package/dist/stories/v2/components/BarGraphCollection.stories.d.ts +18 -0
- package/dist/stories/v2/components/BarGraphCollection.stories.js +122 -0
- package/dist/v2/components/dataviz/BarGraphCollection/index.d.ts +21 -0
- package/dist/v2/components/dataviz/BarGraphCollection/index.js +159 -0
- package/dist/v2/components/dataviz/BarGraphCollection/styled.d.ts +7 -0
- package/dist/v2/components/dataviz/BarGraphCollection/styled.js +22 -0
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.d.ts +1 -0
- package/dist/v2/components/dataviz/BarGraphCollection/utils/useGetDimensions.js +41 -0
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.d.ts +11 -0
- package/dist/v2/components/dataviz/BarGraphCollection/utils/usePrepareData.js +76 -0
- package/package.json +1 -1
|
@@ -8,6 +8,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
8
8
|
var BarChart_1 = require("../../../v2/components/dataviz/BarChart");
|
|
9
9
|
var BarChart_mdx_1 = __importDefault(require("./BarChart.mdx"));
|
|
10
10
|
var CustomTooltip_1 = __importDefault(require("../../../v2/components/dataviz/BarChart/comps/CustomTooltip"));
|
|
11
|
+
var BarGraphCollection_1 = require("../../../v2/components/dataviz/BarGraphCollection");
|
|
11
12
|
exports.default = {
|
|
12
13
|
title: "Oolib V 2.0/components/BarChart",
|
|
13
14
|
argTypes: {
|
|
@@ -113,6 +114,81 @@ var BarChart = function (args) {
|
|
|
113
114
|
stack6: 'Stack 6',
|
|
114
115
|
},
|
|
115
116
|
// valuePath="stack1"
|
|
117
|
+
labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 }),
|
|
118
|
+
react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { showPercent: args.showPercent, showCount: args.showCount, data: [
|
|
119
|
+
{
|
|
120
|
+
display: "Logged In Once",
|
|
121
|
+
// stack1: 60,
|
|
122
|
+
stack2: 20,
|
|
123
|
+
stack3: 40,
|
|
124
|
+
stack4: 10,
|
|
125
|
+
stack5: 40,
|
|
126
|
+
stack6: 10,
|
|
127
|
+
stack2Display: 'Labels Path Stack 2 Display'
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
display: "Registered Users",
|
|
131
|
+
stack1: 100,
|
|
132
|
+
stack2: 50,
|
|
133
|
+
stack3: 10,
|
|
134
|
+
stack4: 15,
|
|
135
|
+
stack5: 40,
|
|
136
|
+
stack6: 10,
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
display: "Created Profile",
|
|
140
|
+
stack1: 20,
|
|
141
|
+
stack2: 5,
|
|
142
|
+
stack3: 10,
|
|
143
|
+
stack4: 15,
|
|
144
|
+
stack5: 40,
|
|
145
|
+
stack6: 10,
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
display: "Wrote at least 3 story",
|
|
149
|
+
stack1: 8,
|
|
150
|
+
stack2: 2,
|
|
151
|
+
stack3: 1,
|
|
152
|
+
stack4: 1,
|
|
153
|
+
stack5: 40,
|
|
154
|
+
stack6: 10,
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
display: "Created Profile again",
|
|
158
|
+
stack1: 20,
|
|
159
|
+
stack2: 5,
|
|
160
|
+
stack3: 10,
|
|
161
|
+
stack4: 15,
|
|
162
|
+
stack5: 40,
|
|
163
|
+
stack6: 10,
|
|
164
|
+
},
|
|
165
|
+
{
|
|
166
|
+
display: "Wrote at least 1 story",
|
|
167
|
+
stack1: 8,
|
|
168
|
+
stack2: 2,
|
|
169
|
+
stack3: 1,
|
|
170
|
+
stack4: 1,
|
|
171
|
+
stack5: 40,
|
|
172
|
+
stack6: 10,
|
|
173
|
+
},
|
|
174
|
+
], plotDataPoint: "percentage" // This can be changed to count
|
|
175
|
+
, valuePath: [
|
|
176
|
+
"stack1",
|
|
177
|
+
"stack2",
|
|
178
|
+
"stack3",
|
|
179
|
+
"stack4",
|
|
180
|
+
"stack5",
|
|
181
|
+
"stack6",
|
|
182
|
+
],
|
|
183
|
+
// tooltipLabelsMapping={{
|
|
184
|
+
// stack1: 'Stack 1',
|
|
185
|
+
// stack2: 'Stack 2',
|
|
186
|
+
// stack3: 'Stack 3',
|
|
187
|
+
// stack4: 'Stack 4',
|
|
188
|
+
// stack5: 'Stack 5',
|
|
189
|
+
// stack6: 'Stack 6',
|
|
190
|
+
// }}
|
|
191
|
+
// valuePath="stack1"
|
|
116
192
|
labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 })),
|
|
117
193
|
react_1.default.createElement("div", null,
|
|
118
194
|
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "40px" } },
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare namespace _default {
|
|
2
|
+
let title: string;
|
|
3
|
+
namespace argTypes {
|
|
4
|
+
namespace showPercent {
|
|
5
|
+
let name: string;
|
|
6
|
+
let control: string;
|
|
7
|
+
let description: string;
|
|
8
|
+
let defaultValue: boolean;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
namespace args {
|
|
12
|
+
let showPercent_1: boolean;
|
|
13
|
+
export { showPercent_1 as showPercent };
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
export default _default;
|
|
17
|
+
export function BarGraphCollection_(args: any): React.JSX.Element;
|
|
18
|
+
import React from "react";
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.BarGraphCollection_ = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var Container_1 = require("../../../components/Container");
|
|
9
|
+
var BarGraphCollection_1 = require("../../../v2/components/dataviz/BarGraphCollection");
|
|
10
|
+
exports.default = {
|
|
11
|
+
title: "Oolib V 2.0/components/BarGraphCollection",
|
|
12
|
+
argTypes: {
|
|
13
|
+
showPercent: {
|
|
14
|
+
name: "Show Percent",
|
|
15
|
+
control: 'boolean',
|
|
16
|
+
description: 'Toggle percentage display',
|
|
17
|
+
defaultValue: true,
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
args: {
|
|
21
|
+
showPercent: true,
|
|
22
|
+
// showCount: true,
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
var BarGraphCollection_ = function (args) {
|
|
26
|
+
var data = [
|
|
27
|
+
{ display: "Tool- Ticker Tape", value: 5, category: "subject" },
|
|
28
|
+
{ display: "CCP Session", value: 3, category: "subject" },
|
|
29
|
+
{ display: "RES", value: 3, category: "subject" },
|
|
30
|
+
{ display: "ASHA", value: 6, category: "stakeholder" },
|
|
31
|
+
{ display: "Doctor", value: 3, category: "stakeholder" },
|
|
32
|
+
{ display: "Nurse", value: 1, category: "stakeholder" },
|
|
33
|
+
{ display: "Painpoint", value: 2, category: "type" },
|
|
34
|
+
{ display: "Success", value: 1, category: "type" },
|
|
35
|
+
{ display: "Service Design", value: 2, category: "lens" },
|
|
36
|
+
{ display: "Medical", value: 2, category: "lens" }
|
|
37
|
+
];
|
|
38
|
+
var handleBarClick = function (name) {
|
|
39
|
+
console.log("Bar clicked: ".concat(name));
|
|
40
|
+
};
|
|
41
|
+
return (react_1.default.createElement(Container_1.Container, null,
|
|
42
|
+
react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { showPercent: args.showPercent, showCount: args.showCount, data: [
|
|
43
|
+
{
|
|
44
|
+
display: "Logged In Once",
|
|
45
|
+
// stack1: 60,
|
|
46
|
+
stack2: 20,
|
|
47
|
+
stack3: 40,
|
|
48
|
+
stack4: 10,
|
|
49
|
+
stack5: 40,
|
|
50
|
+
stack6: 10,
|
|
51
|
+
stack2Display: 'Labels Path Stack 2 Display'
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
display: "Registered Users",
|
|
55
|
+
stack1: 100,
|
|
56
|
+
stack2: 50,
|
|
57
|
+
stack3: 10,
|
|
58
|
+
stack4: 15,
|
|
59
|
+
stack5: 40,
|
|
60
|
+
stack6: 10,
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
display: "Created Profile",
|
|
64
|
+
stack1: 20,
|
|
65
|
+
stack2: 5,
|
|
66
|
+
stack3: 10,
|
|
67
|
+
stack4: 15,
|
|
68
|
+
stack5: 40,
|
|
69
|
+
stack6: 10,
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
display: "Wrote at least 3 story",
|
|
73
|
+
stack1: 8,
|
|
74
|
+
stack2: 2,
|
|
75
|
+
stack3: 1,
|
|
76
|
+
stack4: 1,
|
|
77
|
+
stack5: 40,
|
|
78
|
+
stack6: 10,
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
display: "Created Profile again",
|
|
82
|
+
stack1: 20,
|
|
83
|
+
stack2: 5,
|
|
84
|
+
stack3: 10,
|
|
85
|
+
stack4: 15,
|
|
86
|
+
stack5: 40,
|
|
87
|
+
stack6: 10,
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
display: "Wrote at least 1 story",
|
|
91
|
+
stack1: 8,
|
|
92
|
+
stack2: 2,
|
|
93
|
+
stack3: 1,
|
|
94
|
+
stack4: 1,
|
|
95
|
+
stack5: 40,
|
|
96
|
+
stack6: 10,
|
|
97
|
+
},
|
|
98
|
+
], plotDataPoint: "percentage" // This can be changed to count
|
|
99
|
+
, valuePath: [
|
|
100
|
+
"stack1",
|
|
101
|
+
"stack2",
|
|
102
|
+
"stack3",
|
|
103
|
+
"stack4",
|
|
104
|
+
"stack5",
|
|
105
|
+
"stack6",
|
|
106
|
+
],
|
|
107
|
+
// tooltipLabelsMapping={{
|
|
108
|
+
// stack1: 'Stack 1',
|
|
109
|
+
// stack2: 'Stack 2',
|
|
110
|
+
// stack3: 'Stack 3',
|
|
111
|
+
// stack4: 'Stack 4',
|
|
112
|
+
// stack5: 'Stack 5',
|
|
113
|
+
// stack6: 'Stack 6',
|
|
114
|
+
// }}
|
|
115
|
+
// valuePath="stack1"
|
|
116
|
+
labelPath: "display", title: "This is a Stacked BarChart", onClick: handleBarClick, colorIdx: 2 }),
|
|
117
|
+
react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { data: data, valuePath: "value", labelPath: "display",
|
|
118
|
+
// groupBy="category"
|
|
119
|
+
showPercent: args.showPercent, showCount: args.showCount, onClick: function (name) { return console.log("Clicked on ".concat(name)); } }),
|
|
120
|
+
react_1.default.createElement(BarGraphCollection_1.BarGraphCollection, { data: data, valuePath: "value", labelPath: "display", groupBy: "category", showCount: args.showCount, showPercent: args.showPercent, onClick: function (name) { return console.log("Clicked on ".concat(name)); } })));
|
|
121
|
+
};
|
|
122
|
+
exports.BarGraphCollection_ = BarGraphCollection_;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export const BAR_GRAPH_HEIGHT: 250;
|
|
2
|
+
export const DEFAULT_SINGLE_BAR_WIDTH: 24;
|
|
3
|
+
export const BAR_GAP: 0.3;
|
|
4
|
+
export function BarGraphCollection({ data: originalData, valuePath, labelPath, tooltipLabelsMapping, onClick, showCount, showPercent, groupBy, }: {
|
|
5
|
+
data: any;
|
|
6
|
+
valuePath: any;
|
|
7
|
+
labelPath?: string;
|
|
8
|
+
tooltipLabelsMapping?: {};
|
|
9
|
+
onClick: any;
|
|
10
|
+
showCount?: boolean;
|
|
11
|
+
showPercent?: boolean;
|
|
12
|
+
groupBy: any;
|
|
13
|
+
}): React.JSX.Element;
|
|
14
|
+
export function BarGraph({ tagCategory, index1, showCount, showPercent, onClick }: {
|
|
15
|
+
tagCategory: any;
|
|
16
|
+
index1: any;
|
|
17
|
+
showCount?: boolean;
|
|
18
|
+
showPercent?: boolean;
|
|
19
|
+
onClick: any;
|
|
20
|
+
}): React.JSX.Element;
|
|
21
|
+
import React from "react";
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.BarGraph = exports.BarGraphCollection = exports.BAR_GAP = exports.DEFAULT_SINGLE_BAR_WIDTH = exports.BAR_GRAPH_HEIGHT = void 0;
|
|
40
|
+
var react_1 = __importStar(require("react"));
|
|
41
|
+
var __1 = require("../../../..");
|
|
42
|
+
var __2 = require("../../../..");
|
|
43
|
+
var styled_1 = require("./styled");
|
|
44
|
+
var useGetDimensions_1 = require("./utils/useGetDimensions");
|
|
45
|
+
// import { __GetContentTypeConfigNew } from "../../../../../utils/getters/gettersV2";
|
|
46
|
+
var CustomTooltip_1 = __importDefault(require("../BarChart/comps/CustomTooltip"));
|
|
47
|
+
var usePrepareData_1 = require("./utils/usePrepareData");
|
|
48
|
+
var grey5 = __1.colors2.grey5;
|
|
49
|
+
exports.BAR_GRAPH_HEIGHT = 250;
|
|
50
|
+
exports.DEFAULT_SINGLE_BAR_WIDTH = 24;
|
|
51
|
+
exports.BAR_GAP = 0.3;
|
|
52
|
+
var BarGraphCollection = function (_a) {
|
|
53
|
+
var originalData = _a.data, valuePath = _a.valuePath, _b = _a.labelPath, labelPath = _b === void 0 ? "display" : _b, _c = _a.tooltipLabelsMapping, tooltipLabelsMapping = _c === void 0 ? {} : _c, onClick = _a.onClick, _d = _a.showCount, showCount = _d === void 0 ? true : _d, _e = _a.showPercent, showPercent = _e === void 0 ? true : _e, groupBy = _a.groupBy;
|
|
54
|
+
var containerRef = (0, react_1.useRef)();
|
|
55
|
+
var _f = (0, react_1.useState)(0), containerWidth = _f[0], setContainerWidth = _f[1];
|
|
56
|
+
var transformedData = (0, react_1.useMemo)(function () {
|
|
57
|
+
return (0, usePrepareData_1.usePrepareData)({ data: originalData, valuePath: valuePath, labelPath: labelPath, tooltipLabelsMapping: tooltipLabelsMapping, groupBy: groupBy });
|
|
58
|
+
}, [originalData, valuePath, labelPath, tooltipLabelsMapping, groupBy]);
|
|
59
|
+
var data = (0, useGetDimensions_1.useGetDimensions)(transformedData, exports.BAR_GRAPH_HEIGHT, containerWidth);
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
var handleResize = function () {
|
|
62
|
+
var _a, _b;
|
|
63
|
+
setContainerWidth((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width);
|
|
64
|
+
};
|
|
65
|
+
handleResize();
|
|
66
|
+
window.addEventListener("resize", handleResize);
|
|
67
|
+
return function () { return window.removeEventListener("resize", handleResize); };
|
|
68
|
+
}, [transformedData]);
|
|
69
|
+
if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
return (react_1.default.createElement(styled_1.StyledBarGraphContainer, { style: { width: "auto" }, ref: containerRef },
|
|
73
|
+
react_1.default.createElement(styled_1.StyledBarGraphCollectionWrapper, { style: {
|
|
74
|
+
width: "auto",
|
|
75
|
+
gap: "".concat(exports.BAR_GAP, "rem"),
|
|
76
|
+
overflowX: "auto"
|
|
77
|
+
} }, data === null || data === void 0 ? void 0 : data.map(function (tagCategory, index1) {
|
|
78
|
+
var categoryTitle = (tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.tagCategory) ? (tagCategory.tagCategory.charAt(0).toUpperCase() + tagCategory.tagCategory.slice(1)) : undefined;
|
|
79
|
+
// __GetContentTypeConfigNew(tagCategory.tagCategory)?.general?.content?.title ||
|
|
80
|
+
return (react_1.default.createElement("div", { key: "".concat(index1, "-").concat(tagCategory.tagCategory), style: {
|
|
81
|
+
display: "flex",
|
|
82
|
+
flexDirection: "column",
|
|
83
|
+
gap: "".concat(exports.BAR_GAP, "rem"),
|
|
84
|
+
height: "".concat(exports.BAR_GRAPH_HEIGHT + 50, "px"),
|
|
85
|
+
marginBottom: "0.6rem"
|
|
86
|
+
} },
|
|
87
|
+
react_1.default.createElement(exports.BarGraph, { tagCategory: tagCategory, index1: index1, showCount: showCount, showPercent: showPercent, onClick: onClick }),
|
|
88
|
+
categoryTitle && react_1.default.createElement("div", { title: categoryTitle, style: {
|
|
89
|
+
width: "".concat(tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.width, "px"),
|
|
90
|
+
background: grey5,
|
|
91
|
+
borderRadius: "2px",
|
|
92
|
+
padding: "0.8rem",
|
|
93
|
+
maxHeight: "50px",
|
|
94
|
+
overflow: "hidden"
|
|
95
|
+
} },
|
|
96
|
+
react_1.default.createElement(__2.UI_BODY_SEMIBOLD_SM, null,
|
|
97
|
+
react_1.default.createElement("p", { style: {
|
|
98
|
+
whiteSpace: "nowrap",
|
|
99
|
+
overflow: "hidden",
|
|
100
|
+
textOverflow: "ellipsis",
|
|
101
|
+
maxWidth: "100%"
|
|
102
|
+
} }, categoryTitle)))));
|
|
103
|
+
}))));
|
|
104
|
+
};
|
|
105
|
+
exports.BarGraphCollection = BarGraphCollection;
|
|
106
|
+
var BarGraph = function (_a) {
|
|
107
|
+
var _b;
|
|
108
|
+
var tagCategory = _a.tagCategory, index1 = _a.index1, _c = _a.showCount, showCount = _c === void 0 ? true : _c, _d = _a.showPercent, showPercent = _d === void 0 ? true : _d, onClick = _a.onClick;
|
|
109
|
+
var _e = (0, react_1.useState)({ x: 0, y: 0 }), mousePosition = _e[0], setMousePosition = _e[1];
|
|
110
|
+
var _f = (0, react_1.useState)(null), activeTooltip = _f[0], setActiveTooltip = _f[1];
|
|
111
|
+
(0, react_1.useEffect)(function () {
|
|
112
|
+
var handleMouseMove = function (e) {
|
|
113
|
+
setMousePosition({ x: e.clientX, y: e.clientY });
|
|
114
|
+
};
|
|
115
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
116
|
+
return function () {
|
|
117
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
118
|
+
};
|
|
119
|
+
}, []);
|
|
120
|
+
var truncateText = function (text, maxLength) {
|
|
121
|
+
if (maxLength === void 0) { maxLength = 30; }
|
|
122
|
+
if (!text)
|
|
123
|
+
return '';
|
|
124
|
+
if (text.length <= maxLength)
|
|
125
|
+
return text;
|
|
126
|
+
return text.slice(0, maxLength) + '...';
|
|
127
|
+
};
|
|
128
|
+
var handleBarMouseEnter = function (index) {
|
|
129
|
+
setActiveTooltip(index);
|
|
130
|
+
};
|
|
131
|
+
var handleBarMouseLeave = function () {
|
|
132
|
+
setActiveTooltip(null);
|
|
133
|
+
};
|
|
134
|
+
var handleBarClick = function (tag) {
|
|
135
|
+
if (onClick) {
|
|
136
|
+
onClick(tag.display);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
return (react_1.default.createElement(styled_1.StyledBarGraphWrapper, { style: {
|
|
140
|
+
height: "".concat(exports.BAR_GRAPH_HEIGHT, "px"),
|
|
141
|
+
gap: "".concat(exports.BAR_GAP, "rem"),
|
|
142
|
+
} }, (_b = tagCategory === null || tagCategory === void 0 ? void 0 : tagCategory.tagSpecificCount) === null || _b === void 0 ? void 0 : _b.map(function (tag, index) {
|
|
143
|
+
var tooltipData = [{
|
|
144
|
+
percentage: showPercent ? tag.percentage : undefined,
|
|
145
|
+
count: showCount ? tag.count : undefined,
|
|
146
|
+
tooltipLabel: tag.display
|
|
147
|
+
}];
|
|
148
|
+
return (react_1.default.createElement("div", { key: tag._id || "".concat(index1, "-").concat(index), onMouseEnter: function () { return handleBarMouseEnter(index); }, onMouseLeave: handleBarMouseLeave, onClick: function () { return handleBarClick(tag); }, style: { cursor: onClick ? 'pointer' : 'default' } },
|
|
149
|
+
react_1.default.createElement(styled_1.StyledSingleBarWrapper, null,
|
|
150
|
+
react_1.default.createElement(styled_1.StyledBar, { style: {
|
|
151
|
+
height: "".concat(tag.height, "px"),
|
|
152
|
+
width: "".concat(tag.width, "px")
|
|
153
|
+
} }),
|
|
154
|
+
react_1.default.createElement(styled_1.StyledLabelWrapper, null,
|
|
155
|
+
react_1.default.createElement(__2.UI_BODY_SM, null, truncateText(tag === null || tag === void 0 ? void 0 : tag.display, 30))),
|
|
156
|
+
activeTooltip === index && (react_1.default.createElement(CustomTooltip_1.default, { active: true, payload: [tag], mousePosition: mousePosition, value: tooltipData, showPercent: showPercent })))));
|
|
157
|
+
})));
|
|
158
|
+
};
|
|
159
|
+
exports.BarGraph = BarGraph;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export const CONTAINER_PADDING: 10;
|
|
2
|
+
export const StyledBarGraphContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export const StyledBarGraphCollectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
+
export const StyledBarGraphWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export const StyledSingleBarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
+
export const StyledBar: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export const StyledLabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,22 @@
|
|
|
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 __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
+
exports.StyledLabelWrapper = exports.StyledBar = exports.StyledSingleBarWrapper = exports.StyledBarGraphWrapper = exports.StyledBarGraphCollectionWrapper = exports.StyledBarGraphContainer = exports.CONTAINER_PADDING = void 0;
|
|
11
|
+
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
var __1 = require("../../../..");
|
|
13
|
+
exports.CONTAINER_PADDING = 10;
|
|
14
|
+
var barColor = __1.colors2.secondaryContainer; // temp color
|
|
15
|
+
var grey5 = __1.colors2.grey5;
|
|
16
|
+
exports.StyledBarGraphContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", "px;\n padding-bottom: 0.4rem; // UI scroll bar bottom space \n overflow-x: auto;\n background-color: white;\n border-radius: 8px;\n"], ["\n padding: ", "px;\n padding-bottom: 0.4rem; // UI scroll bar bottom space \n overflow-x: auto;\n background-color: white;\n border-radius: 8px;\n"])), exports.CONTAINER_PADDING);
|
|
17
|
+
exports.StyledBarGraphCollectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18
|
+
exports.StyledBarGraphWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n position: relative;\n "], ["\n display: flex;\n position: relative;\n "])));
|
|
19
|
+
exports.StyledSingleBarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n align-items: flex-end;\n position: relative;\n cursor: pointer;\n border-radius: 2px;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n height: 100%;\n display: flex;\n align-items: flex-end;\n position: relative;\n cursor: pointer;\n border-radius: 2px;\n\n &:hover {\n background-color: ", ";\n }\n"])), grey5);
|
|
20
|
+
exports.StyledBar = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 2px;\n background-color: ", ";\n color: ", ";\n position: relative;\n ", ";\n"], ["\n border-radius: 2px;\n background-color: ", ";\n color: ", ";\n position: relative;\n ", ";\n"])), barColor, __1.colors2.onSecondary, (0, __1.transition)("width"));
|
|
21
|
+
exports.StyledLabelWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n transform: rotate(-90deg);\n transform-origin: left top;\n bottom: 0;\n left: calc(50% - 8px); // 10px for font\n text-wrap: nowrap;\n display: flex;\n"], ["\n position: absolute;\n transform: rotate(-90deg);\n transform-origin: left top;\n bottom: 0;\n left: calc(50% - 8px); // 10px for font\n text-wrap: nowrap;\n display: flex;\n"])));
|
|
22
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function useGetDimensions(data: any, maxHeight: any, containerWidth: any): any;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.useGetDimensions = void 0;
|
|
15
|
+
var __1 = require("..");
|
|
16
|
+
var styled_1 = require("../styled");
|
|
17
|
+
var useGetDimensions = function (data, maxHeight, containerWidth) {
|
|
18
|
+
var singleBarWidth;
|
|
19
|
+
var totalBars = data === null || data === void 0 ? void 0 : data.reduce(function (total, tagCategory) {
|
|
20
|
+
var _a;
|
|
21
|
+
return total += (_a = tagCategory.tagSpecificCount) === null || _a === void 0 ? void 0 : _a.length;
|
|
22
|
+
}, 0);
|
|
23
|
+
var totalGapSpace = (totalBars - 1) * Math.floor(__1.BAR_GAP * 10); // BAR GAP, example 0.3 converted 3Px
|
|
24
|
+
var availableWidthForBars = (containerWidth - totalGapSpace) - (styled_1.CONTAINER_PADDING * 2); // CONTAINER_PADDING Left right 10 * 10 = 20
|
|
25
|
+
// const defaultWidthForBars = (totalBars - 1) * DEFAULT_SINGLE_BAR_WIDTH - (CONTAINER_PADDING * 2);
|
|
26
|
+
var dynamicBarWidth = availableWidthForBars / totalBars;
|
|
27
|
+
singleBarWidth = Math.max(dynamicBarWidth, __1.DEFAULT_SINGLE_BAR_WIDTH);
|
|
28
|
+
return data === null || data === void 0 ? void 0 : data.map(function (category) {
|
|
29
|
+
// total count for this category
|
|
30
|
+
var total = category.tagSpecificCount.reduce(function (sum, tag) { return sum + tag.count; }, 0);
|
|
31
|
+
var barsInCategory = category.tagSpecificCount.length;
|
|
32
|
+
var gapsInCategory = Math.max(0, barsInCategory - 1); // One less gap than bars
|
|
33
|
+
var categoryTotalWidth = (barsInCategory * singleBarWidth) + (gapsInCategory * Math.floor(__1.BAR_GAP * 10));
|
|
34
|
+
// percentage to each tag
|
|
35
|
+
return __assign(__assign({}, category), { width: categoryTotalWidth, tagSpecificCount: category.tagSpecificCount.map(function (tag) {
|
|
36
|
+
var percentage = Number((tag.count / total * 100).toFixed(1));
|
|
37
|
+
return __assign({ percentage: percentage, height: Math.round((percentage / 100) * maxHeight), width: singleBarWidth }, tag);
|
|
38
|
+
}) });
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
exports.useGetDimensions = useGetDimensions;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export function usePrepareData({ data, valuePath, labelPath, tooltipLabelsMapping, groupBy }: {
|
|
2
|
+
data: any;
|
|
3
|
+
valuePath: any;
|
|
4
|
+
labelPath: any;
|
|
5
|
+
tooltipLabelsMapping: any;
|
|
6
|
+
groupBy: any;
|
|
7
|
+
}): {
|
|
8
|
+
tagCategory: any;
|
|
9
|
+
totalCountOfAllTagsWithin: any;
|
|
10
|
+
tagSpecificCount: any;
|
|
11
|
+
}[];
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.usePrepareData = void 0;
|
|
4
|
+
var _EXPORTS_1 = require("../../../../../utils/_EXPORTS");
|
|
5
|
+
var usePrepareData = function (_a) {
|
|
6
|
+
var data = _a.data, valuePath = _a.valuePath, labelPath = _a.labelPath, tooltipLabelsMapping = _a.tooltipLabelsMapping, groupBy = _a.groupBy;
|
|
7
|
+
// Check if it's breakdown data (array of valuePaths) or simple data
|
|
8
|
+
var isBreakdown = Array.isArray(valuePath);
|
|
9
|
+
if (!isBreakdown) {
|
|
10
|
+
// If groupBy is specified, group the data by that field
|
|
11
|
+
if (groupBy && data.length > 0 && groupBy in data[0]) {
|
|
12
|
+
// Group data by the specified field
|
|
13
|
+
var groupedData_1 = {};
|
|
14
|
+
data.forEach(function (item) {
|
|
15
|
+
var groupKey = (0, _EXPORTS_1.getVal)(item, groupBy) || 'Uncategorized';
|
|
16
|
+
if (!groupedData_1[groupKey]) {
|
|
17
|
+
groupedData_1[groupKey] = {
|
|
18
|
+
items: [],
|
|
19
|
+
totalCount: 0
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
var count = (0, _EXPORTS_1.getVal)(item, valuePath) || 0;
|
|
23
|
+
groupedData_1[groupKey].items.push({
|
|
24
|
+
tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
25
|
+
display: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
26
|
+
_id: Math.random().toString(36).substr(2, 9),
|
|
27
|
+
count: count
|
|
28
|
+
});
|
|
29
|
+
groupedData_1[groupKey].totalCount += count;
|
|
30
|
+
});
|
|
31
|
+
// Convert grouped data to the expected format
|
|
32
|
+
return Object.entries(groupedData_1).map(function (_a) {
|
|
33
|
+
var key = _a[0], value = _a[1];
|
|
34
|
+
return ({
|
|
35
|
+
tagCategory: key,
|
|
36
|
+
totalCountOfAllTagsWithin: value.totalCount,
|
|
37
|
+
tagSpecificCount: value.items
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
// Simple case - single category with single values
|
|
43
|
+
return [{
|
|
44
|
+
tagCategory: undefined,
|
|
45
|
+
totalCountOfAllTagsWithin: data.reduce(function (sum, item) { return sum + ((0, _EXPORTS_1.getVal)(item, valuePath) || 0); }, 0),
|
|
46
|
+
tagSpecificCount: data.map(function (item) { return ({
|
|
47
|
+
tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
48
|
+
display: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
49
|
+
_id: Math.random().toString(36).substr(2, 9),
|
|
50
|
+
count: (0, _EXPORTS_1.getVal)(item, valuePath) || 0
|
|
51
|
+
}); })
|
|
52
|
+
}];
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
else {
|
|
56
|
+
// For breakdown case, we'll create categories based on the valuePath items
|
|
57
|
+
// Each valuePath becomes a category
|
|
58
|
+
return valuePath.map(function (path, pathIndex) {
|
|
59
|
+
var categoryName = (tooltipLabelsMapping === null || tooltipLabelsMapping === void 0 ? void 0 : tooltipLabelsMapping[path]) || path;
|
|
60
|
+
var totalCount = data.reduce(function (sum, item) { return sum + ((0, _EXPORTS_1.getVal)(item, path) || 0); }, 0);
|
|
61
|
+
return {
|
|
62
|
+
tagCategory: categoryName,
|
|
63
|
+
totalCountOfAllTagsWithin: totalCount,
|
|
64
|
+
tagSpecificCount: data
|
|
65
|
+
.map(function (item) { return ({
|
|
66
|
+
tagId: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
67
|
+
display: (0, _EXPORTS_1.getVal)(item, labelPath),
|
|
68
|
+
_id: "".concat(pathIndex, "-").concat((0, _EXPORTS_1.getVal)(item, labelPath)),
|
|
69
|
+
count: (0, _EXPORTS_1.getVal)(item, path) || 0
|
|
70
|
+
}); })
|
|
71
|
+
.filter(function (tag) { return tag.count > 0; }) // Only include items with values
|
|
72
|
+
};
|
|
73
|
+
}).filter(function (category) { return category.tagSpecificCount.length > 0; }); // Only include categories with items
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
exports.usePrepareData = usePrepareData;
|