sag_components 1.0.47 → 1.0.49
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/components/ArrowDownIcon.js +7 -3
- package/dist/stories/components/ArrowUpIcon.js +7 -3
- package/dist/stories/components/SegmentedButton.js +10 -6
- package/dist/stories/components/TotalBenchmarkAreachart.js +151 -0
- package/dist/stories/components/TotalBenchmarkAreachart.style.js +54 -0
- package/dist/stories/components/TotalBenchmarkBarchart.js +128 -0
- package/dist/stories/components/TotalBenchmarkBarchart.style.js +54 -0
- package/package.json +1 -1
|
@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.ArrowDownIcon = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var ArrowDownIcon = function ArrowDownIcon(_ref) {
|
|
10
|
-
var clicked = _ref.clicked
|
|
10
|
+
var clicked = _ref.clicked,
|
|
11
|
+
_ref$width = _ref.width,
|
|
12
|
+
width = _ref$width === void 0 ? "8" : _ref$width,
|
|
13
|
+
_ref$height = _ref.height,
|
|
14
|
+
height = _ref$height === void 0 ? "9" : _ref$height;
|
|
11
15
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
12
|
-
width:
|
|
13
|
-
height:
|
|
16
|
+
width: width,
|
|
17
|
+
height: height,
|
|
14
18
|
viewBox: "0 0 8 9",
|
|
15
19
|
fill: "none",
|
|
16
20
|
xmlns: "http://www.w3.org/2000/svg"
|
|
@@ -7,10 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.default = exports.ArrowUpIcon = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var ArrowUpIcon = function ArrowUpIcon(_ref) {
|
|
10
|
-
var clicked = _ref.clicked
|
|
10
|
+
var clicked = _ref.clicked,
|
|
11
|
+
_ref$width = _ref.width,
|
|
12
|
+
width = _ref$width === void 0 ? "8" : _ref$width,
|
|
13
|
+
_ref$height = _ref.height,
|
|
14
|
+
height = _ref$height === void 0 ? "9" : _ref$height;
|
|
11
15
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
12
|
-
width:
|
|
13
|
-
height:
|
|
16
|
+
width: width,
|
|
17
|
+
height: height,
|
|
14
18
|
viewBox: "0 0 8 9",
|
|
15
19
|
fill: "none",
|
|
16
20
|
xmlns: "http://www.w3.org/2000/svg"
|
|
@@ -11,15 +11,15 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
|
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _SegmentedButtonStyle = require("./SegmentedButton.style.js");
|
|
14
|
-
var _excluded = ["name", "options", "
|
|
14
|
+
var _excluded = ["name", "options", "width", "heigth", "controlRadius", "segmentRadius", "fontSize", "backgroundColor", "selectedSegmentColor", "selectedTextColor", "unselectedTextColor", "defaultIndex", "onClick"];
|
|
15
15
|
/*SegmentedButton*/
|
|
16
16
|
var SegmentedButton = function SegmentedButton(_ref) {
|
|
17
17
|
var name = _ref.name,
|
|
18
18
|
options = _ref.options,
|
|
19
|
-
_ref$
|
|
20
|
-
|
|
21
|
-
_ref$
|
|
22
|
-
|
|
19
|
+
_ref$width = _ref.width,
|
|
20
|
+
width = _ref$width === void 0 ? 120 : _ref$width,
|
|
21
|
+
_ref$heigth = _ref.heigth,
|
|
22
|
+
heigth = _ref$heigth === void 0 ? 40 : _ref$heigth,
|
|
23
23
|
_ref$controlRadius = _ref.controlRadius,
|
|
24
24
|
controlRadius = _ref$controlRadius === void 0 ? 8 : _ref$controlRadius,
|
|
25
25
|
_ref$segmentRadius = _ref.segmentRadius,
|
|
@@ -76,6 +76,10 @@ var SegmentedButton = function SegmentedButton(_ref) {
|
|
|
76
76
|
value: value
|
|
77
77
|
});
|
|
78
78
|
};
|
|
79
|
+
var segmentWidth = 120;
|
|
80
|
+
if (options && options.length > 0 && width && width > 0) {
|
|
81
|
+
segmentWidth = width / options.length;
|
|
82
|
+
}
|
|
79
83
|
return /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.ControlsContainer, {
|
|
80
84
|
fontSize: fontSize,
|
|
81
85
|
ref: controlRef
|
|
@@ -108,7 +112,7 @@ var SegmentedButton = function SegmentedButton(_ref) {
|
|
|
108
112
|
}), /*#__PURE__*/_react.default.createElement(_SegmentedButtonStyle.SegmentLabel, {
|
|
109
113
|
selectedTextColor: selectedTextColor,
|
|
110
114
|
unselectedTextColor: unselectedTextColor,
|
|
111
|
-
segmentHeigth:
|
|
115
|
+
segmentHeigth: heigth / 5,
|
|
112
116
|
className: "".concat(activeIndex === i ? "active" : "inactive", " "),
|
|
113
117
|
htmlFor: item.value
|
|
114
118
|
}, item.value));
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.TotalBenchmarkAreachart = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _ArrowUpIcon = require("./ArrowUpIcon");
|
|
12
|
+
var _ArrowDownIcon = require("./ArrowDownIcon");
|
|
13
|
+
var _recharts = require("recharts");
|
|
14
|
+
var _Benchmark = require("./Benchmark");
|
|
15
|
+
var _TotalBenchmarkAreachartStyle = require("./TotalBenchmarkAreachart.style.js");
|
|
16
|
+
var _excluded = ["title", "value", "arrowSign", "benchmarkTotalValue", "benchmarkValue", "areaChartData", "width", "height", "textColor", "areaChart1Color", "areaChart2Color"];
|
|
17
|
+
/*TotalBenchmarkAreachart*/
|
|
18
|
+
var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
|
|
19
|
+
var _ref2;
|
|
20
|
+
var title = _ref.title,
|
|
21
|
+
value = _ref.value,
|
|
22
|
+
_ref$arrowSign = _ref.arrowSign,
|
|
23
|
+
arrowSign = _ref$arrowSign === void 0 ? "up" : _ref$arrowSign,
|
|
24
|
+
benchmarkTotalValue = _ref.benchmarkTotalValue,
|
|
25
|
+
benchmarkValue = _ref.benchmarkValue,
|
|
26
|
+
areaChartData = _ref.areaChartData,
|
|
27
|
+
_ref$width = _ref.width,
|
|
28
|
+
width = _ref$width === void 0 ? 260 : _ref$width,
|
|
29
|
+
_ref$height = _ref.height,
|
|
30
|
+
height = _ref$height === void 0 ? 350 : _ref$height,
|
|
31
|
+
_ref$textColor = _ref.textColor,
|
|
32
|
+
textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
|
|
33
|
+
_ref$areaChart1Color = _ref.areaChart1Color,
|
|
34
|
+
areaChart1Color = _ref$areaChart1Color === void 0 ? "#BD9EFF" : _ref$areaChart1Color,
|
|
35
|
+
_ref$areaChart2Color = _ref.areaChart2Color,
|
|
36
|
+
areaChart2Color = _ref$areaChart2Color === void 0 ? "#96B4FF" : _ref$areaChart2Color,
|
|
37
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
38
|
+
var getArrowSign = function getArrowSign(arrowSign) {
|
|
39
|
+
if (!arrowSign) {
|
|
40
|
+
return "";
|
|
41
|
+
}
|
|
42
|
+
if (arrowSign == "up") {
|
|
43
|
+
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
|
|
44
|
+
value: value
|
|
45
|
+
}, /*#__PURE__*/_react.default.createElement(_ArrowUpIcon.ArrowUpIcon, {
|
|
46
|
+
width: "25",
|
|
47
|
+
height: "25"
|
|
48
|
+
}));
|
|
49
|
+
} else {
|
|
50
|
+
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.DetailsRowArrow, {
|
|
51
|
+
value: value
|
|
52
|
+
}, /*#__PURE__*/_react.default.createElement(_ArrowDownIcon.ArrowDownIcon, {
|
|
53
|
+
width: "25",
|
|
54
|
+
height: "25"
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ControlsContainer, {
|
|
59
|
+
height: height,
|
|
60
|
+
width: width,
|
|
61
|
+
textColor: textColor
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Controls, {
|
|
63
|
+
height: height,
|
|
64
|
+
width: width
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.Title, {
|
|
66
|
+
width: width
|
|
67
|
+
}, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ValueAndBenchmarkContainer, {
|
|
68
|
+
height: height,
|
|
69
|
+
width: width
|
|
70
|
+
}, getArrowSign(arrowSign), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.FormattedValue, {
|
|
71
|
+
width: width
|
|
72
|
+
}, value, "%"), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.BenchmarkContainer, {
|
|
73
|
+
width: width
|
|
74
|
+
}, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
|
|
75
|
+
totalValue: benchmarkTotalValue,
|
|
76
|
+
currentValue: value,
|
|
77
|
+
benchmarkValue: benchmarkValue,
|
|
78
|
+
height: 12,
|
|
79
|
+
width: 75,
|
|
80
|
+
color: "#79DB95",
|
|
81
|
+
linearGradientColor: "#C3EFD0",
|
|
82
|
+
linearGradientUnderAvarageColor: "#FDB1B1",
|
|
83
|
+
underAvarageColor: "#FD5959",
|
|
84
|
+
backgroundColor: "#F2F2F2"
|
|
85
|
+
})) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
|
|
86
|
+
height: height,
|
|
87
|
+
width: width
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
89
|
+
width: "100%",
|
|
90
|
+
height: "100%"
|
|
91
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.AreaChart, {
|
|
92
|
+
data: areaChartData,
|
|
93
|
+
margin: {
|
|
94
|
+
top: 0,
|
|
95
|
+
right: 10,
|
|
96
|
+
bottom: 0,
|
|
97
|
+
left: 10
|
|
98
|
+
}
|
|
99
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
100
|
+
strokeDasharray: "3 3",
|
|
101
|
+
vertical: false
|
|
102
|
+
}), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
|
103
|
+
id: "colorValue1",
|
|
104
|
+
x1: "0",
|
|
105
|
+
y1: "0",
|
|
106
|
+
x2: "0",
|
|
107
|
+
y2: "1"
|
|
108
|
+
}, /*#__PURE__*/_react.default.createElement("stop", {
|
|
109
|
+
offset: "5%",
|
|
110
|
+
stopColor: areaChart1Color,
|
|
111
|
+
stopOpacity: 0.8
|
|
112
|
+
}), /*#__PURE__*/_react.default.createElement("stop", {
|
|
113
|
+
offset: "95%",
|
|
114
|
+
stopColor: areaChart1Color,
|
|
115
|
+
stopOpacity: 0
|
|
116
|
+
})), /*#__PURE__*/_react.default.createElement("linearGradient", {
|
|
117
|
+
id: "colorValue2",
|
|
118
|
+
x1: "0",
|
|
119
|
+
y1: "0",
|
|
120
|
+
x2: "0",
|
|
121
|
+
y2: "1"
|
|
122
|
+
}, /*#__PURE__*/_react.default.createElement("stop", {
|
|
123
|
+
offset: "5%",
|
|
124
|
+
stopColor: areaChart2Color,
|
|
125
|
+
stopOpacity: 0.8
|
|
126
|
+
}), /*#__PURE__*/_react.default.createElement("stop", {
|
|
127
|
+
offset: "95%",
|
|
128
|
+
stopColor: areaChart2Color,
|
|
129
|
+
stopOpacity: 0
|
|
130
|
+
}))), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
|
|
131
|
+
dataKey: "title",
|
|
132
|
+
style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "font-size", "12"), (0, _defineProperty2.default)(_ref2, "font-weight", "700"), _ref2)
|
|
133
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
134
|
+
strokeDasharray: "3 3"
|
|
135
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
|
|
136
|
+
type: "monotone",
|
|
137
|
+
dataKey: "value1",
|
|
138
|
+
stroke: areaChart1Color,
|
|
139
|
+
fillOpacity: 1,
|
|
140
|
+
fill: "url(#colorValue1)"
|
|
141
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
|
|
142
|
+
type: "monotone",
|
|
143
|
+
dataKey: "value2",
|
|
144
|
+
stroke: areaChart2Color,
|
|
145
|
+
fillOpacity: 1,
|
|
146
|
+
fill: "url(#colorValue2)"
|
|
147
|
+
}))))));
|
|
148
|
+
};
|
|
149
|
+
exports.TotalBenchmarkAreachart = TotalBenchmarkAreachart;
|
|
150
|
+
var _default = TotalBenchmarkAreachart;
|
|
151
|
+
exports.default = _default;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrow = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
11
|
+
var MIN_HEIGHT = 300;
|
|
12
|
+
var MIN_WIDTH = 260;
|
|
13
|
+
var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
|
|
14
|
+
return props.textColor;
|
|
15
|
+
}, function (props) {
|
|
16
|
+
return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
|
|
17
|
+
}, function (props) {
|
|
18
|
+
return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
|
|
19
|
+
});
|
|
20
|
+
exports.ControlsContainer = ControlsContainer;
|
|
21
|
+
var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 68px;\n left: 40px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
|
|
22
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
23
|
+
}, function (props) {
|
|
24
|
+
return (props.height - MIN_HEIGHT <= 0 ? 230 : 230 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
25
|
+
});
|
|
26
|
+
exports.Controls = Controls;
|
|
27
|
+
var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
|
|
28
|
+
return (props.width - MIN_WIDTH <= 0 ? 250 : 250 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
29
|
+
});
|
|
30
|
+
exports.Title = Title;
|
|
31
|
+
var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: ", ";\n left: 0px;\n top: 30px;\n //border: 1px solid green;\n"])), function (props) {
|
|
32
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return (props.height - MIN_HEIGHT <= 0 ? 0 : 0 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
35
|
+
});
|
|
36
|
+
exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
|
|
37
|
+
var DetailsRowArrow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n margin-left: 0px;\n margin-top: 12px; \n margin-right: 2px;\n height: 25px; \n font-size: 12px;\n line-height: 14px; \n //border: 1px solid red;\n"])));
|
|
38
|
+
exports.DetailsRowArrow = DetailsRowArrow;
|
|
39
|
+
var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 2px;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
|
|
40
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
41
|
+
});
|
|
42
|
+
exports.FormattedValue = FormattedValue;
|
|
43
|
+
var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 10px;\n margin-top: 26px;\n width: 100px;\n height: 12px;\n left: ", ";\n //top: 24px;\n //border: 1px solid red;\n"])), function (props) {
|
|
44
|
+
return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
45
|
+
});
|
|
46
|
+
exports.BenchmarkContainer = BenchmarkContainer;
|
|
47
|
+
var AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n // display: inline-flex;\n //width: 240 px;\n margin-left: -20px;\n margin-top: 0px; \n margin-right: -10px;\n height: ", ";\n left: 0px;\n top: 120px;\n //border: 1px solid green;\n"])), function (props) {
|
|
48
|
+
return (props.height - MIN_HEIGHT <= 0 ? 100 : 100 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
49
|
+
});
|
|
50
|
+
exports.AreaChartContainer = AreaChartContainer;
|
|
51
|
+
var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n //width: 245px;\n height: 20px;\n left: 0px;\n top: 3px;\n \n //border: 1px solid brown;\n"])));
|
|
52
|
+
exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
|
|
53
|
+
var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-top: 1px;\n margin-left: 1px; \n margin-right: 1px;\n height: 19px;\n width: 115px;\n left: 0px;\n top: 0px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
|
|
54
|
+
exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.TotalBenchmarkBarchart = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _recharts = require("recharts");
|
|
12
|
+
var _CommonFunctions = require("./CommonFunctions");
|
|
13
|
+
var _Benchmark = require("./Benchmark");
|
|
14
|
+
var _TotalBenchmarkBarchartStyle = require("./TotalBenchmarkBarchart.style.js");
|
|
15
|
+
var _excluded = ["title", "value", "benchmarkTotalValue", "benchmarkValue", "currency", "currencyType", "barChartData", "dotCut", "width", "height", "textColor"];
|
|
16
|
+
/*TotalBenchmarkBarchart*/
|
|
17
|
+
var TotalBenchmarkBarchart = function TotalBenchmarkBarchart(_ref) {
|
|
18
|
+
var title = _ref.title,
|
|
19
|
+
value = _ref.value,
|
|
20
|
+
benchmarkTotalValue = _ref.benchmarkTotalValue,
|
|
21
|
+
benchmarkValue = _ref.benchmarkValue,
|
|
22
|
+
_ref$currency = _ref.currency,
|
|
23
|
+
currency = _ref$currency === void 0 ? true : _ref$currency,
|
|
24
|
+
_ref$currencyType = _ref.currencyType,
|
|
25
|
+
currencyType = _ref$currencyType === void 0 ? "USD" : _ref$currencyType,
|
|
26
|
+
barChartData = _ref.barChartData,
|
|
27
|
+
_ref$dotCut = _ref.dotCut,
|
|
28
|
+
dotCut = _ref$dotCut === void 0 ? true : _ref$dotCut,
|
|
29
|
+
_ref$width = _ref.width,
|
|
30
|
+
width = _ref$width === void 0 ? 260 : _ref$width,
|
|
31
|
+
_ref$height = _ref.height,
|
|
32
|
+
height = _ref$height === void 0 ? 350 : _ref$height,
|
|
33
|
+
_ref$textColor = _ref.textColor,
|
|
34
|
+
textColor = _ref$textColor === void 0 ? "black" : _ref$textColor,
|
|
35
|
+
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
36
|
+
var formattedBarChartData = [];
|
|
37
|
+
if (barChartData && barChartData.length === 2) {
|
|
38
|
+
formattedBarChartData.push({
|
|
39
|
+
title1: barChartData[0].title,
|
|
40
|
+
value1: barChartData[0].value,
|
|
41
|
+
formattedValue1: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[0].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[0].value)) : "",
|
|
42
|
+
color1: barChartData[0].color ? barChartData[0].color : "#79DB95",
|
|
43
|
+
title2: barChartData[1].title,
|
|
44
|
+
value2: barChartData[1].value,
|
|
45
|
+
formattedValue2: currency ? (0, _CommonFunctions.getCurrencySign)(currencyType).toString().concat("", (0, _CommonFunctions.getFormattedValue)(barChartData[1].value), "", (0, _CommonFunctions.getFormattedUnits)(barChartData[1].value)) : "",
|
|
46
|
+
color2: barChartData[1].color ? barChartData[1].color : "#D4C0FF"
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ControlsContainer, {
|
|
50
|
+
height: height,
|
|
51
|
+
width: width,
|
|
52
|
+
textColor: textColor
|
|
53
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Controls, {
|
|
54
|
+
height: height,
|
|
55
|
+
width: width
|
|
56
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.Title, {
|
|
57
|
+
width: width
|
|
58
|
+
}, title), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.ValueAndBenchmarkContainer, {
|
|
59
|
+
height: height,
|
|
60
|
+
width: width
|
|
61
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.CurrencySign, null, currency ? (0, _CommonFunctions.getCurrencySign)(currencyType, value) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.FormattedValue, {
|
|
62
|
+
width: width
|
|
63
|
+
}, dotCut ? (0, _CommonFunctions.getFormattedValue)(value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : ""), benchmarkTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BenchmarkContainer, {
|
|
64
|
+
width: width
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement(_Benchmark.Benchmark, {
|
|
66
|
+
totalValue: benchmarkTotalValue,
|
|
67
|
+
currentValue: value,
|
|
68
|
+
benchmarkValue: benchmarkValue,
|
|
69
|
+
height: 12,
|
|
70
|
+
width: 100,
|
|
71
|
+
color: "#79DB95",
|
|
72
|
+
linearGradientColor: "#C3EFD0",
|
|
73
|
+
linearGradientUnderAvarageColor: "#FDB1B1",
|
|
74
|
+
underAvarageColor: "#FD5959",
|
|
75
|
+
backgroundColor: "#F2F2F2"
|
|
76
|
+
})) : ""), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BarchartContainer, {
|
|
77
|
+
height: height,
|
|
78
|
+
width: width
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
80
|
+
width: 240,
|
|
81
|
+
height: 120,
|
|
82
|
+
data: formattedBarChartData,
|
|
83
|
+
margin: {
|
|
84
|
+
top: 20,
|
|
85
|
+
right: -20,
|
|
86
|
+
bottom: 0,
|
|
87
|
+
left: -20
|
|
88
|
+
}
|
|
89
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
|
|
90
|
+
strokeDasharray: "3 3",
|
|
91
|
+
vertical: false
|
|
92
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
93
|
+
dataKey: "value1",
|
|
94
|
+
fill: formattedBarChartData[0].color1,
|
|
95
|
+
name: "Actual",
|
|
96
|
+
maxBarSize: 60,
|
|
97
|
+
radius: [5, 5, 0, 0]
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
|
|
99
|
+
dataKey: "formattedValue1",
|
|
100
|
+
position: "top",
|
|
101
|
+
fill: textColor,
|
|
102
|
+
style: (0, _defineProperty2.default)({}, "font-size", "16px")
|
|
103
|
+
})), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
104
|
+
dataKey: "value2",
|
|
105
|
+
fill: formattedBarChartData[0].color2,
|
|
106
|
+
name: "Base Line",
|
|
107
|
+
maxBarSize: 60,
|
|
108
|
+
radius: [5, 5, 0, 0],
|
|
109
|
+
label: "aaa"
|
|
110
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
|
|
111
|
+
dataKey: "formattedValue2",
|
|
112
|
+
position: "top",
|
|
113
|
+
fill: textColor,
|
|
114
|
+
style: (0, _defineProperty2.default)({}, "font-size", "16px")
|
|
115
|
+
}))), formattedBarChartData && formattedBarChartData.length > 0 ? /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowContainer, {
|
|
116
|
+
height: height,
|
|
117
|
+
width: width
|
|
118
|
+
}, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
|
|
119
|
+
height: height,
|
|
120
|
+
width: width
|
|
121
|
+
}, formattedBarChartData[0].title1), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkBarchartStyle.BottomDetailsRowTitle, {
|
|
122
|
+
height: height,
|
|
123
|
+
width: width
|
|
124
|
+
}, formattedBarChartData[0].title2)) : ""), ";"));
|
|
125
|
+
};
|
|
126
|
+
exports.TotalBenchmarkBarchart = TotalBenchmarkBarchart;
|
|
127
|
+
var _default = TotalBenchmarkBarchart;
|
|
128
|
+
exports.default = _default;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ValueAndBenchmarkContainer = exports.Title = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.BarchartContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
11
|
+
var MIN_HEIGHT = 300;
|
|
12
|
+
var MIN_WIDTH = 260;
|
|
13
|
+
var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n margin: 0px 0 0px;\n font-family: \"Lato\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n border-radius: 12px;\n //border: 1px solid red;\n"])), function (props) {
|
|
14
|
+
return props.textColor;
|
|
15
|
+
}, function (props) {
|
|
16
|
+
return (props.width - MIN_WIDTH <= 0 ? MIN_WIDTH : props.width).toString().concat("", "px");
|
|
17
|
+
}, function (props) {
|
|
18
|
+
return (props.height - MIN_HEIGHT <= 0 ? MIN_HEIGHT : props.height).toString().concat("", "px");
|
|
19
|
+
});
|
|
20
|
+
exports.ControlsContainer = ControlsContainer;
|
|
21
|
+
var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 12px;\n width: ", ";\n height: ", ";\n top: 68px;\n left: 40px;\n background: #ffffff;\n //border: 1px solid yellow;\n"])), function (props) {
|
|
22
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
23
|
+
}, function (props) {
|
|
24
|
+
return (props.height - MIN_HEIGHT <= 0 ? 230 : 230 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
25
|
+
});
|
|
26
|
+
exports.Controls = Controls;
|
|
27
|
+
var Title = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n width: ", ";\n height: 22px;\n left: 0px;\n top: 0px;\n font-weight: 600;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])), function (props) {
|
|
28
|
+
return (props.width - MIN_WIDTH <= 0 ? 250 : 250 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
29
|
+
});
|
|
30
|
+
exports.Title = Title;
|
|
31
|
+
var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: inline-flex;\n width: ", ";\n height: ", ";\n left: 0px;\n top: 30px;\n //border: 1px solid green;\n"])), function (props) {
|
|
32
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return (props.height - MIN_HEIGHT <= 0 ? 0 : 0 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
35
|
+
});
|
|
36
|
+
exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
|
|
37
|
+
var CurrencySign = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 0px;\n margin-top: 19px;\n width: 11px;\n height: 22px;\n left: 40px;\n top: 10px;\n font-weight: 500;\n font-size: 18px;\n line-height: 22px;\n //border: 1px solid red;\n"])));
|
|
38
|
+
exports.CurrencySign = CurrencySign;
|
|
39
|
+
var FormattedValue = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 2px;\n width: ", ";\n height: 48px;\n left: 0px;\n top: 40px;\n font-weight: 500;\n font-size: 40px;\n line-height: 48px;\n //border: 1px solid red;\n"])), function (props) {
|
|
40
|
+
return (props.width - MIN_WIDTH <= 0 ? 217 : 217 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
41
|
+
});
|
|
42
|
+
exports.FormattedValue = FormattedValue;
|
|
43
|
+
var BenchmarkContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n //position: absolute;\n margin-left: 4px;\n margin-top: 26px;\n width: 100px;\n height: 12px;\n left: ", ";\n //top: 24px;\n //border: 1px solid red;\n"])), function (props) {
|
|
44
|
+
return (props.width - MIN_WIDTH <= 0 ? 115 : 115 + (props.width - MIN_WIDTH)).toString().concat("", "px");
|
|
45
|
+
});
|
|
46
|
+
exports.BenchmarkContainer = BenchmarkContainer;
|
|
47
|
+
var BarchartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n // display: inline-flex;\n width: 240 px;\n height: ", ";\n left: 0px;\n top: 120px;\n //border: 1px solid green;\n"])), function (props) {
|
|
48
|
+
return (props.height - MIN_HEIGHT <= 0 ? 100 : 100 + (props.height - MIN_HEIGHT)).toString().concat("", "px");
|
|
49
|
+
});
|
|
50
|
+
exports.BarchartContainer = BarchartContainer;
|
|
51
|
+
var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n //width: 245px;\n height: 20px;\n left: 0px;\n top: 3px;\n \n //border: 1px solid brown;\n"])));
|
|
52
|
+
exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
|
|
53
|
+
var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n margin-top: 1px;\n margin-left: 1px; \n margin-right: 1px;\n height: 19px;\n width: 115px;\n left: 0px;\n top: 0px;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n //border: 1px solid red;\n"])));
|
|
54
|
+
exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
|