oolib 2.134.2 → 2.134.3
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.
|
@@ -1,16 +1,21 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { TBaseConfigs } from "../..";
|
|
3
|
-
|
|
3
|
+
type TCustomizedLabeValue = {
|
|
4
|
+
percentage: number;
|
|
5
|
+
count: number;
|
|
6
|
+
name: string;
|
|
7
|
+
};
|
|
8
|
+
export declare const CustomizedLabel: ({ y, width, height, value, showCount, suffix, opacity, _base_configs, onMouseOver, onMouseOut, onMouseDown, }: {
|
|
4
9
|
y?: number | string;
|
|
5
10
|
width?: number | string;
|
|
6
11
|
height?: number | string;
|
|
7
|
-
value?:
|
|
8
|
-
percentage: number;
|
|
9
|
-
count: number;
|
|
10
|
-
name: string;
|
|
11
|
-
};
|
|
12
|
+
value?: TCustomizedLabeValue;
|
|
12
13
|
opacity: number;
|
|
13
14
|
suffix?: string;
|
|
14
15
|
showCount?: boolean;
|
|
15
16
|
_base_configs: TBaseConfigs;
|
|
17
|
+
onMouseOver?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
18
|
+
onMouseOut?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
19
|
+
onMouseDown?: (e: React.MouseEvent<SVGRectElement, MouseEvent>, v: TCustomizedLabeValue) => void;
|
|
16
20
|
}) => React.JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -7,18 +7,18 @@ exports.CustomizedLabel = void 0;
|
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var themes_1 = require("../../../../themes");
|
|
9
9
|
var CustomizedLabel = function (_a) {
|
|
10
|
-
var y = _a.y,
|
|
11
|
-
|
|
12
|
-
// height,
|
|
13
|
-
value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs;
|
|
10
|
+
var y = _a.y, width = _a.width, //i think this is the width and the height of the bar. dont need it just yet..
|
|
11
|
+
height = _a.height, value = _a.value, showCount = _a.showCount, suffix = _a.suffix, opacity = _a.opacity, _base_configs = _a._base_configs, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onMouseDown = _a.onMouseDown;
|
|
14
12
|
var yOffset = -(_base_configs.labelToBarGap + _base_configs.barHeight);
|
|
15
13
|
var percent = value.percentage;
|
|
16
14
|
var count = value.count;
|
|
17
15
|
var name = value.name;
|
|
18
16
|
var percentXOffset = 0;
|
|
19
17
|
var xOffsetRelative = 10;
|
|
20
|
-
return (react_1.default.createElement("
|
|
21
|
-
react_1.default.createElement("
|
|
22
|
-
|
|
18
|
+
return (react_1.default.createElement("g", null,
|
|
19
|
+
react_1.default.createElement("text", { opacity: opacity, x: percentXOffset, y: y + yOffset, fill: themes_1.colors.greyColor100, textAnchor: "start", dominantBaseline: "middle", className: "UI_BODY_BOLD_SM" }, "".concat(percent).concat(suffix || ""),
|
|
20
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, showCount ? count : ""),
|
|
21
|
+
react_1.default.createElement("tspan", { className: "UI_BODY_SM", dx: xOffsetRelative, y: y + yOffset, fill: themes_1.colors.greyColor80 }, name)),
|
|
22
|
+
react_1.default.createElement("rect", { onMouseDown: function (e) { return onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e, value); }, onMouseOver: function (e) { return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, value); }, onMouseOut: function (e) { return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, value); }, x: percentXOffset, y: y + _base_configs.mouseEventDetectorYOffset, width: width, height: _base_configs.mouseEventDetectorHeight, fill: "red", "fill-opacity": _base_configs.mouseEventDetectorOpacity })));
|
|
23
23
|
};
|
|
24
24
|
exports.CustomizedLabel = CustomizedLabel;
|
|
@@ -3,6 +3,9 @@ export type TBaseConfigs = {
|
|
|
3
3
|
barHeight: number;
|
|
4
4
|
labelToBarGap: number;
|
|
5
5
|
barGap: number;
|
|
6
|
+
mouseEventDetectorYOffset: number;
|
|
7
|
+
mouseEventDetectorHeight: number;
|
|
8
|
+
mouseEventDetectorOpacity: number;
|
|
6
9
|
};
|
|
7
10
|
export declare const PercentBarChart: ({ data: _data, title, valuePath, labelPath, onClick, colors, colorIdx, valueSuffix, showCount }: {
|
|
8
11
|
data: any;
|
|
@@ -64,10 +64,19 @@ var chartColors = [
|
|
|
64
64
|
"rgb(204, 128, 217)",
|
|
65
65
|
"rgb(91, 184, 175)",
|
|
66
66
|
];
|
|
67
|
+
//if any changes are being made to the spacing and such of
|
|
68
|
+
//this comps design, all these properties need to be carefully
|
|
69
|
+
//observed and tweaked to ensure no ui has gotten warped due to sideeffects
|
|
67
70
|
var _base_configs = {
|
|
71
|
+
barRadius: 16,
|
|
68
72
|
barHeight: 6,
|
|
69
73
|
labelToBarGap: 6,
|
|
70
|
-
barGap:
|
|
74
|
+
barGap: 30,
|
|
75
|
+
wrapperMarginBottom: -16,
|
|
76
|
+
barCategoryGap: 18, // does some wierd shit really, simply pushes the entire graph down by this number. We need to to unhide the first label, which is happening only because we are using <Cell/> comp. too many inconsistencies in recharts
|
|
77
|
+
mouseEventDetectorYOffset: -34, //this is inside CustomizedLabel. a big rect spread across the bar and label and gap to detect mouse events and transition smoothly to the next bar.
|
|
78
|
+
mouseEventDetectorHeight: 40,
|
|
79
|
+
mouseEventDetectorOpacity: 0 //only increase this for debugging. nothing else.
|
|
71
80
|
};
|
|
72
81
|
var PercentBarChart = function (_a) {
|
|
73
82
|
var _data = _a.data, title = _a.title, _b = _a.valuePath, valuePath = _b === void 0 ? "value" : _b, // is relevant only for the initial data setting in useMemo. after that, the actual percentage is always stored against the 'percentage' key, and the count against the 'count' key
|
|
@@ -102,34 +111,49 @@ var PercentBarChart = function (_a) {
|
|
|
102
111
|
return (react_1.default.createElement("div", null,
|
|
103
112
|
title && (react_1.default.createElement(Typo_1.SANS_4_5, { style: { paddingBottom: "2rem" }, semibold: true }, title)),
|
|
104
113
|
react_1.default.createElement("div", { style: {
|
|
105
|
-
height: "".concat((_base_configs.barHeight + _base_configs.barGap) * data.length, "px"),
|
|
114
|
+
height: "".concat(((_base_configs.barHeight + _base_configs.barGap) * data.length), "px"),
|
|
106
115
|
width: "100%",
|
|
107
116
|
} },
|
|
108
117
|
react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
|
|
109
|
-
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap:
|
|
118
|
+
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, barCategoryGap: _base_configs.barCategoryGap,
|
|
119
|
+
// barSize={_base_configs.barHeight}
|
|
120
|
+
data: data, layout: "vertical", margin: {
|
|
110
121
|
top: 0,
|
|
111
122
|
right: 0,
|
|
112
123
|
left: 0,
|
|
113
|
-
bottom:
|
|
124
|
+
bottom: _base_configs.wrapperMarginBottom,
|
|
125
|
+
}, onMouseEnter: function () {
|
|
126
|
+
var args = [];
|
|
127
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
128
|
+
args[_i] = arguments[_i];
|
|
129
|
+
}
|
|
130
|
+
return console.log('mouse enter', args);
|
|
131
|
+
}, onMouseLeave: function () {
|
|
132
|
+
var args = [];
|
|
133
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
134
|
+
args[_i] = arguments[_i];
|
|
135
|
+
}
|
|
136
|
+
return console.log('mouse leave', args);
|
|
114
137
|
} },
|
|
115
138
|
react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
|
|
116
139
|
react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category" }),
|
|
117
|
-
react_1.default.createElement(recharts_1.Bar,
|
|
118
|
-
|
|
119
|
-
onMouseOver: function (args) { return setActiveBar(args.labels.name); },
|
|
120
|
-
onMouseOut: function () { return setActiveBar(undefined); },
|
|
121
|
-
onMouseDown: function (args) {
|
|
122
|
-
setActiveBar(args.labels.name);
|
|
123
|
-
onClick(args.labels.name);
|
|
124
|
-
},
|
|
125
|
-
}
|
|
126
|
-
: {})),
|
|
127
|
-
react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, { y: props.y,
|
|
140
|
+
react_1.default.createElement(recharts_1.Bar, { radius: _base_configs.barRadius, style: onClick ? { cursor: "pointer" } : {}, dataKey: "labels.percentage" },
|
|
141
|
+
react_1.default.createElement(recharts_1.LabelList, { dataKey: "labels", offset: 0, content: function (props) { return react_1.default.createElement(CustomizedLabel_1.CustomizedLabel, __assign({ y: props.y,
|
|
128
142
|
width: props.width,
|
|
129
143
|
height: props.height,
|
|
130
144
|
value: props.value, //here value is the percentage
|
|
131
145
|
showCount: showCount, suffix: valueSuffix,
|
|
132
|
-
opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }
|
|
133
|
-
|
|
146
|
+
opacity: changeBarOpacityFn(props.value.name), _base_configs: _base_configs }, (onClick
|
|
147
|
+
? {
|
|
148
|
+
onMouseOver: function (e, value) { return setActiveBar(value.name); },
|
|
149
|
+
onMouseOut: function () { return setActiveBar(undefined); },
|
|
150
|
+
onMouseDown: function (e, value) {
|
|
151
|
+
setActiveBar(value.name);
|
|
152
|
+
onClick(value.name);
|
|
153
|
+
},
|
|
154
|
+
}
|
|
155
|
+
: {}))); } }),
|
|
156
|
+
data.map(function (d, index) { return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
157
|
+
react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(d.labels.name), key: "cell-".concat(index), height: _base_configs.barHeight, fill: colors[colorIdx] }))); })))))));
|
|
134
158
|
};
|
|
135
159
|
exports.PercentBarChart = PercentBarChart;
|