sag_components 1.0.48 → 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.
Files changed (5) hide show
  1. package/dist/stories/components/ArrowDownIcon.js +7 -3
  2. package/dist/stories/components/ArrowUpIcon.js +7 -3
  3. package/dist/stories/components/TotalBenchmarkAreachart.js +151 -0
  4. package/dist/stories/components/TotalBenchmarkAreachart.style.js +54 -0
  5. package/package.json +1 -1
package/dist/stories/components/ArrowDownIcon.js CHANGED
@@ -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: "8",
13
- height: "9",
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"
package/dist/stories/components/ArrowUpIcon.js CHANGED
@@ -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: "8",
13
- height: "9",
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"
package/dist/stories/components/TotalBenchmarkAreachart.js ADDED
@@ -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;
package/dist/stories/components/TotalBenchmarkAreachart.style.js ADDED
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.48",
3
+ "version": "1.0.49",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {