oolib 2.113.1 → 2.115.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/components/PercentBarChart/index.d.ts +9 -0
- package/dist/components/PercentBarChart/index.js +127 -0
- package/dist/d3Modules/index.d.ts +13 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -2
- package/dist/stories/PercentBarChart.stories.d.ts +6 -0
- package/dist/stories/PercentBarChart.stories.js +25 -0
- package/package.json +3 -2
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare const PercentBarChart: ({ data: _data, title, valuePath, id, onClick, colors }: {
|
|
3
|
+
data: any;
|
|
4
|
+
valuePath: string;
|
|
5
|
+
title?: string;
|
|
6
|
+
id: string;
|
|
7
|
+
onClick?: (name: string) => void;
|
|
8
|
+
colors?: string[];
|
|
9
|
+
}) => React.JSX.Element;
|
|
@@ -0,0 +1,127 @@
|
|
|
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
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
37
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
|
+
if (ar || !(i in from)) {
|
|
39
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
40
|
+
ar[i] = from[i];
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
+
};
|
|
45
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
46
|
+
exports.PercentBarChart = void 0;
|
|
47
|
+
var react_1 = __importStar(require("react"));
|
|
48
|
+
var recharts_1 = require("recharts");
|
|
49
|
+
var Typo_1 = require("../Typo");
|
|
50
|
+
var chartColors = [
|
|
51
|
+
"#F53D65",
|
|
52
|
+
"#666666",
|
|
53
|
+
"#EBAF4D",
|
|
54
|
+
"#0ACC22",
|
|
55
|
+
"#E60000",
|
|
56
|
+
"#66DAB0",
|
|
57
|
+
"#6A2B99",
|
|
58
|
+
"#ff836d",
|
|
59
|
+
"#b4a8d0",
|
|
60
|
+
"#ff7167",
|
|
61
|
+
];
|
|
62
|
+
var renderCustomizedLabel = function (_a) {
|
|
63
|
+
var y = _a.y, value = _a.value, opacity = _a.opacity;
|
|
64
|
+
var offset = 12;
|
|
65
|
+
return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, x: 0, y: y - offset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, value));
|
|
66
|
+
};
|
|
67
|
+
var renderCustomizedValue = function (_a) {
|
|
68
|
+
var y = _a.y, width = _a.width, height = _a.height, value = _a.value, suffix = _a.suffix, opacity = _a.opacity;
|
|
69
|
+
var xOffset = 6;
|
|
70
|
+
var yOffset = 2;
|
|
71
|
+
return (react_1.default.createElement("text", { opacity: opacity, fontSize: 14, fontWeight: "600", x: width + xOffset, y: y + height / 2 + yOffset, fill: "black", textAnchor: "start", dominantBaseline: "middle" }, "".concat(value).concat(suffix || "")));
|
|
72
|
+
};
|
|
73
|
+
var _dataSample = [
|
|
74
|
+
{ name: "AAA/A1+", value: 72.3, Type: 0 },
|
|
75
|
+
{ name: "Cash & Cash Equivalents", value: 10.1, Type: 1 },
|
|
76
|
+
{ name: "Sovereign", value: 9.87, Type: 2 },
|
|
77
|
+
{ name: "AA+", value: 5.63, Type: 3 },
|
|
78
|
+
];
|
|
79
|
+
var PercentBarChart = function (_a) {
|
|
80
|
+
var _b = _a.data, _data = _b === void 0 ? _dataSample : _b, title = _a.title, _c = _a.valuePath, valuePath = _c === void 0 ? "value" : _c, _d = _a.id, id = _d === void 0 ? "name" : _d, onClick = _a.onClick, _e = _a.colors, colors = _e === void 0 ? chartColors : _e;
|
|
81
|
+
var data = (0, react_1.useMemo)(function () {
|
|
82
|
+
var finalData = __spreadArray([], _data, true);
|
|
83
|
+
finalData = finalData.map(function (d, i) { return (__assign(__assign({}, d), { value: d[valuePath], name: d[id], color: (colors)[i % (colors).length] })); });
|
|
84
|
+
finalData.sort(function (a, b) {
|
|
85
|
+
return Number(b.value || 0) - Number(a.value || 0);
|
|
86
|
+
});
|
|
87
|
+
return finalData;
|
|
88
|
+
}, [_data, id, valuePath]);
|
|
89
|
+
var _f = (0, react_1.useState)(undefined), activeBar = _f[0], setActiveBar = _f[1];
|
|
90
|
+
var changeBarOpacityFn = function (name) {
|
|
91
|
+
return activeBar && activeBar !== name ? 0.4 : 1;
|
|
92
|
+
};
|
|
93
|
+
return (react_1.default.createElement("div", { style: { height: "".concat(80 * data.length, "px"), width: "100%" } },
|
|
94
|
+
title && react_1.default.createElement(Typo_1.SANS_4_5, null, title),
|
|
95
|
+
react_1.default.createElement(recharts_1.ResponsiveContainer, { width: "100%", height: "100%" },
|
|
96
|
+
react_1.default.createElement(recharts_1.BarChart, { width: 500, height: 500, data: data, layout: "vertical", margin: {
|
|
97
|
+
top: 15,
|
|
98
|
+
right: 60,
|
|
99
|
+
left: 0,
|
|
100
|
+
bottom: 0,
|
|
101
|
+
} },
|
|
102
|
+
react_1.default.createElement(recharts_1.XAxis, { hide: true, type: "number" }),
|
|
103
|
+
react_1.default.createElement(recharts_1.YAxis, { hide: true, type: "category", width: 250, dataKey: id }),
|
|
104
|
+
react_1.default.createElement(recharts_1.Bar, { style: { cursor: "pointer" }, dataKey: "value", unit: "%", onMouseOver: function (args) { return setActiveBar(args[id]); }, onMouseOut: function () { return setActiveBar(undefined); }, onMouseDown: function (args) {
|
|
105
|
+
setActiveBar(args[id]);
|
|
106
|
+
onClick(args[id]);
|
|
107
|
+
} },
|
|
108
|
+
react_1.default.createElement(recharts_1.LabelList, { dataKey: id, position: "top", content: function (props) {
|
|
109
|
+
return renderCustomizedLabel({
|
|
110
|
+
y: props.y,
|
|
111
|
+
value: props.value,
|
|
112
|
+
opacity: changeBarOpacityFn(props[id]),
|
|
113
|
+
});
|
|
114
|
+
} }),
|
|
115
|
+
react_1.default.createElement(recharts_1.LabelList, { dataKey: "value", offset: 0, content: function (props) {
|
|
116
|
+
return renderCustomizedValue({
|
|
117
|
+
y: props.y,
|
|
118
|
+
width: props.width,
|
|
119
|
+
height: props.height,
|
|
120
|
+
value: props.value,
|
|
121
|
+
suffix: "%",
|
|
122
|
+
opacity: changeBarOpacityFn(props[id]),
|
|
123
|
+
});
|
|
124
|
+
} }),
|
|
125
|
+
data.map(function (entry, index) { return (react_1.default.createElement(recharts_1.Cell, { opacity: changeBarOpacityFn(entry[id]), key: "cell-".concat(index), height: 30, fill: entry.color })); }))))));
|
|
126
|
+
};
|
|
127
|
+
exports.PercentBarChart = PercentBarChart;
|
|
@@ -28,3 +28,16 @@ declare namespace _default {
|
|
|
28
28
|
export { entries };
|
|
29
29
|
}
|
|
30
30
|
export default _default;
|
|
31
|
+
import { line } from 'd3-shape';
|
|
32
|
+
import { area } from 'd3-shape';
|
|
33
|
+
import { scaleLinear } from 'd3-scale';
|
|
34
|
+
import { scaleTime } from 'd3-scale';
|
|
35
|
+
import { scaleBand } from 'd3-scale';
|
|
36
|
+
import { pie } from 'd3-shape';
|
|
37
|
+
import { arc } from 'd3-shape';
|
|
38
|
+
import { curveMonotoneX } from 'd3-shape';
|
|
39
|
+
import { extent } from 'd3-array';
|
|
40
|
+
import { min } from 'd3-array';
|
|
41
|
+
import { max } from 'd3-array';
|
|
42
|
+
import { bisector } from 'd3-array';
|
|
43
|
+
import { scaleOrdinal } from 'd3-scale';
|
package/dist/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export { Tooltip } from "./components/Tooltip";
|
|
|
25
25
|
export { ActionMenu } from "./components/ActionMenu";
|
|
26
26
|
export { Accordion } from "./components/Accordion";
|
|
27
27
|
export { PercentCompletedPie } from "./components/PercentCompletedPie";
|
|
28
|
+
export { PercentBarChart } from "./components/PercentBarChart";
|
|
28
29
|
export { Divider } from "./components/Divider";
|
|
29
30
|
export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
|
|
30
31
|
export { ModalConfirm } from "./components/Modals/ModalConfirm";
|
package/dist/index.js
CHANGED
|
@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.
|
|
21
|
-
exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = void 0;
|
|
20
|
+
exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
|
|
21
|
+
exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.ResourceInput = exports.IFrameInput = void 0;
|
|
22
22
|
//css and styling related ( styled-components )
|
|
23
23
|
var globalStyles_1 = require("./globalStyles");
|
|
24
24
|
Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
|
|
@@ -64,6 +64,8 @@ var Accordion_1 = require("./components/Accordion");
|
|
|
64
64
|
Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
|
|
65
65
|
var PercentCompletedPie_1 = require("./components/PercentCompletedPie");
|
|
66
66
|
Object.defineProperty(exports, "PercentCompletedPie", { enumerable: true, get: function () { return PercentCompletedPie_1.PercentCompletedPie; } });
|
|
67
|
+
var PercentBarChart_1 = require("./components/PercentBarChart");
|
|
68
|
+
Object.defineProperty(exports, "PercentBarChart", { enumerable: true, get: function () { return PercentBarChart_1.PercentBarChart; } });
|
|
67
69
|
var Divider_1 = require("./components/Divider");
|
|
68
70
|
Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
|
|
69
71
|
var SkeletonLoader_1 = require("./components/LoadersAndProgress/SkeletonLoader");
|
|
@@ -0,0 +1,25 @@
|
|
|
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.PercentBarChart_ = void 0;
|
|
7
|
+
var react_1 = __importDefault(require("react"));
|
|
8
|
+
var PercentBarChart_1 = require("../components/PercentBarChart");
|
|
9
|
+
exports.default = {
|
|
10
|
+
title: "Components/PercentBarChart",
|
|
11
|
+
};
|
|
12
|
+
var data = [
|
|
13
|
+
{ name: 'AAA/A1+', value: 72.3, Type: 0 },
|
|
14
|
+
{ name: 'Cash & Cash Equivalents', value: 10.1, Type: 1 },
|
|
15
|
+
{ name: 'Sovereign', value: 9.87, Type: 2 },
|
|
16
|
+
{ name: 'AA+', value: 5.63, Type: 3 },
|
|
17
|
+
];
|
|
18
|
+
var PercentBarChart_ = function (args) {
|
|
19
|
+
var handleBarClick = function (name) {
|
|
20
|
+
console.log("Bar clicked: ".concat(name));
|
|
21
|
+
};
|
|
22
|
+
return (react_1.default.createElement("div", null,
|
|
23
|
+
react_1.default.createElement(PercentBarChart_1.PercentBarChart, { data: data, id: "name", valuePath: "value", title: "This is PercentBarChart representing the data", onClick: handleBarClick })));
|
|
24
|
+
};
|
|
25
|
+
exports.PercentBarChart_ = PercentBarChart_;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oolib",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.115.0",
|
|
4
4
|
"description": " OKE Component Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -104,6 +104,7 @@
|
|
|
104
104
|
"moment": "^2.24.0",
|
|
105
105
|
"phosphor-react": "^1.4.1",
|
|
106
106
|
"react-player": "^2.12.0",
|
|
107
|
-
"react-virtualized": "^9.22.5"
|
|
107
|
+
"react-virtualized": "^9.22.5",
|
|
108
|
+
"recharts": "^2.12.6"
|
|
108
109
|
}
|
|
109
110
|
}
|