sag_components 1.0.187 → 1.0.189

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 (4) hide show
  1. package/dist/stories/components/TotalBenchmarkAreachart.js +83 -19
  2. package/dist/stories/components/TotalBenchmarkAreachart.style.js +18 -12
  3. package/package.json +1 -1
  4. package/dist/stories/components/InfoIcon.js +0 -38
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -16,10 +16,12 @@ var _NoDataFoundMessage = require("./NoDataFoundMessage");
16
16
  var _recharts = require("recharts");
17
17
  var _Benchmark = require("./Benchmark");
18
18
  var _TotalBenchmarkAreachartStyle = require("./TotalBenchmarkAreachart.style.js");
19
- var _excluded = ["title", "value", "arrowSign", "benchmarkTotalValue", "benchmarkValue", "areaChartData", "width", "height", "textColor", "areaChart1Color", "areaChart2Color", "noDataText"];
19
+ var _TotalBenchmarkAreachart = require("./TotalBenchmarkAreachart.style");
20
+ var _CommonFunctions = require("./CommonFunctions");
21
+ var _excluded = ["title", "value", "arrowSign", "benchmarkTotalValue", "benchmarkValue", "areaChartData", "width", "height", "textColor", "areaChart1Color", "areaChart2Color", "xselectedColor", "fillChart1Color", "fillChart2Color", "startOffset", "endOffset", "opacity", "value1Title", "value2Title", "noDataText"];
20
22
  /*TotalBenchmarkAreachart*/
21
23
  var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
22
- var _ref2;
24
+ var _ref4;
23
25
  var title = _ref.title,
24
26
  value = _ref.value,
25
27
  _ref$arrowSign = _ref.arrowSign,
@@ -37,6 +39,22 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
37
39
  areaChart1Color = _ref$areaChart1Color === void 0 ? "#BD9EFF" : _ref$areaChart1Color,
38
40
  _ref$areaChart2Color = _ref.areaChart2Color,
39
41
  areaChart2Color = _ref$areaChart2Color === void 0 ? "#96B4FF" : _ref$areaChart2Color,
42
+ _ref$xselectedColor = _ref.xselectedColor,
43
+ xselectedColor = _ref$xselectedColor === void 0 ? "#42977A" : _ref$xselectedColor,
44
+ _ref$fillChart1Color = _ref.fillChart1Color,
45
+ fillChart1Color = _ref$fillChart1Color === void 0 ? "rgba(34, 158, 56, 0.20)" : _ref$fillChart1Color,
46
+ _ref$fillChart2Color = _ref.fillChart2Color,
47
+ fillChart2Color = _ref$fillChart2Color === void 0 ? "rgba(255, 84, 84, 0.2)" : _ref$fillChart2Color,
48
+ _ref$startOffset = _ref.startOffset,
49
+ startOffset = _ref$startOffset === void 0 ? "17.04%" : _ref$startOffset,
50
+ _ref$endOffset = _ref.endOffset,
51
+ endOffset = _ref$endOffset === void 0 ? "17.04%" : _ref$endOffset,
52
+ _ref$opacity = _ref.opacity,
53
+ opacity = _ref$opacity === void 0 ? "191" : _ref$opacity,
54
+ _ref$value1Title = _ref.value1Title,
55
+ value1Title = _ref$value1Title === void 0 ? "Actual Sales" : _ref$value1Title,
56
+ _ref$value2Title = _ref.value2Title,
57
+ value2Title = _ref$value2Title === void 0 ? "Baseline Sales" : _ref$value2Title,
40
58
  _ref$noDataText = _ref.noDataText,
41
59
  noDataText = _ref$noDataText === void 0 ? "" : _ref$noDataText,
42
60
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -47,10 +65,15 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
47
65
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
66
  rootFont = _useState2[0],
49
67
  setRootFont = _useState2[1];
68
+ var anotherRef = (0, _react.useRef)(null);
50
69
  var _useState3 = (0, _react.useState)(1),
51
70
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
52
71
  heightFactor = _useState4[0],
53
72
  setHeightFactor = _useState4[1];
73
+ var _useState5 = (0, _react.useState)(""),
74
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
75
+ activeLabel = _useState6[0],
76
+ setActiveLabel = _useState6[1];
54
77
  var controlsContainerRef = (0, _react.useRef)();
55
78
  (0, _react.useEffect)(function () {
56
79
  var offsetWidth = controlsContainerRef.current.offsetWidth;
@@ -93,6 +116,40 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
93
116
  }));
94
117
  }
95
118
  };
119
+ var CustomTick = function CustomTick(_ref2) {
120
+ var x = _ref2.x,
121
+ y = _ref2.y,
122
+ stroke = _ref2.stroke,
123
+ payload = _ref2.payload;
124
+ return /*#__PURE__*/_react.default.createElement("g", {
125
+ transform: "translate(".concat(x, ",").concat(y, ")")
126
+ }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
127
+ x: -10,
128
+ y: 0,
129
+ width: "26",
130
+ height: "18",
131
+ rx: 9,
132
+ fill: xselectedColor,
133
+ fillOpacity: "0.10"
134
+ }), /*#__PURE__*/_react.default.createElement("text", {
135
+ x: 0,
136
+ y: 13,
137
+ dx: -5,
138
+ fill: "black",
139
+ fontSize: "8px"
140
+ }, payload.value));
141
+ };
142
+ var CustomTooltip = function CustomTooltip(_ref3) {
143
+ var active = _ref3.active,
144
+ payload = _ref3.payload,
145
+ label = _ref3.label;
146
+ if (active && payload && payload.length) {
147
+ console.log(active, payload, label);
148
+ setActiveLabel(label);
149
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value1Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[0].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[0].value))), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.TooltipLabel, null, "".concat(value2Title, " ").concat((0, _CommonFunctions.getFormattedValue)(payload[1].value)).concat((0, _CommonFunctions.getFormattedUnits)(payload[1].value))));
150
+ }
151
+ return null;
152
+ };
96
153
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ControlsContainer, {
97
154
  id: "ControlsContainer",
98
155
  height: height,
@@ -125,6 +182,7 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
125
182
  underAvarageColor: "#FD5959",
126
183
  backgroundColor: "#F2F2F2"
127
184
  })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
185
+ ref: anotherRef,
128
186
  id: "AreaChartContainer"
129
187
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
130
188
  id: "ResponsiveContainer",
@@ -135,9 +193,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
135
193
  data: areaChartData,
136
194
  margin: {
137
195
  top: 0,
138
- right: 25,
196
+ right: 20,
139
197
  bottom: 0,
140
- left: 25
198
+ left: 20
141
199
  }
142
200
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
143
201
  strokeDasharray: "3 3",
@@ -149,13 +207,13 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
149
207
  x2: "0",
150
208
  y2: "1"
151
209
  }, /*#__PURE__*/_react.default.createElement("stop", {
152
- offset: "5%",
153
- stopColor: areaChart1Color,
154
- stopOpacity: 0.8
210
+ offset: startOffset,
211
+ stopColor: fillChart1Color,
212
+ stopOpacity: opacity
155
213
  }), /*#__PURE__*/_react.default.createElement("stop", {
156
- offset: "95%",
157
- stopColor: areaChart1Color,
158
- stopOpacity: 0
214
+ offset: endOffset,
215
+ stopColor: fillChart1Color,
216
+ stopOpacity: opacity
159
217
  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
160
218
  id: "colorValue2",
161
219
  x1: "0",
@@ -163,19 +221,23 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
163
221
  x2: "0",
164
222
  y2: "1"
165
223
  }, /*#__PURE__*/_react.default.createElement("stop", {
166
- offset: "5%",
167
- stopColor: areaChart2Color,
168
- stopOpacity: 0.8
224
+ offset: startOffset,
225
+ stopColor: fillChart2Color,
226
+ stopOpacity: opacity
169
227
  }), /*#__PURE__*/_react.default.createElement("stop", {
170
- offset: "95%",
171
- stopColor: areaChart2Color,
172
- stopOpacity: 0
228
+ offset: endOffset,
229
+ stopColor: fillChart2Color,
230
+ stopOpacity: opacity
173
231
  }))), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
174
232
  dataKey: "title",
175
- style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "font-size", "12"), (0, _defineProperty2.default)(_ref2, "font-weight", "700"), _ref2)
233
+ tick: function tick(item) {
234
+ return /*#__PURE__*/_react.default.createElement(CustomTick, item);
235
+ },
236
+ tickLine: false,
237
+ style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, "fontWeight", "700"), (0, _defineProperty2.default)(_ref4, "stroke", "#D0D0D0"), (0, _defineProperty2.default)(_ref4, "strokeWidth", "1px"), _ref4)
176
238
  }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
177
239
  strokeDasharray: "3 3"
178
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
240
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
179
241
  type: "monotone",
180
242
  dataKey: "value1",
181
243
  stroke: areaChart1Color,
@@ -187,7 +249,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
187
249
  stroke: areaChart2Color,
188
250
  fillOpacity: 1,
189
251
  fill: "url(#colorValue2)"
190
- }))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
252
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
253
+ content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
254
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
191
255
  noDataText: noDataText
192
256
  }));
193
257
  };
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ValueAndBenchmarkContainer = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValue = exports.DetailsRowArrowContainer = exports.ControlsContainer = exports.Controls = exports.BottomDetailsRowTitle = exports.BottomDetailsRowContainer = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
11
11
  var ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n /* min-height: 280px;\n min-width: 250px;\n max-height: 380px;\n max-width: 350px; */\n"])), function (props) {
12
12
  return props.rootFont;
13
13
  }, function (props) {
@@ -18,23 +18,29 @@ var ControlsContainer = _styledComponents.default.div(_templateObject || (_templ
18
18
  return props.height;
19
19
  });
20
20
  exports.ControlsContainer = ControlsContainer;
21
- var Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n background: #ffffff;\n justify-content: center; \n flex-direction: column;\n flex-basis: 100%;\n padding: 0 16px;\n justify-content: space-between;\n width: 90%;\n /* min-height: 280px;\n min-width: 250px;\n max-height: 380px;\n max-width: 350px; */\n"])));
21
+ var TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
22
+ exports.TooltipDiv = TooltipDiv;
23
+ var TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
24
+ exports.TooltipLabel = TooltipLabel;
25
+ var TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n"])));
26
+ exports.TooltipTitle = TooltipTitle;
27
+ var Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n border-radius: 12px;\n background: #ffffff;\n justify-content: center;\n flex-direction: column;\n flex-basis: 100%;\n padding: 0 16px;\n justify-content: space-between;\n width: 90%;\n /* min-height: 280px;\n min-width: 250px;\n max-height: 380px;\n max-width: 350px; */\n"])));
22
28
  exports.Controls = Controls;
23
- var TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n \n"])));
29
+ var TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([""])));
24
30
  exports.TitleAndValueContainer = TitleAndValueContainer;
25
- var Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 600;\n font-size: 1rem; \n margin-left: 0.5rem;\n /* margin-top: 1rem; */\n margin-bottom: 1rem;\n"])));
31
+ var Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 1rem;\n margin-left: 0.5rem;\n /* margin-top: 1rem; */\n margin-bottom: 1rem;\n"])));
26
32
  exports.Title = Title;
27
- var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline; \n margin-left: 0.5rem;\n"])));
33
+ var ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n margin-left: 0.5rem;\n"])));
28
34
  exports.ValueAndBenchmarkContainer = ValueAndBenchmarkContainer;
29
- var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n width: 1.2rem; \n align-items: flex-end;\n"])));
35
+ var DetailsRowArrowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 1.2rem;\n align-items: flex-end;\n"])));
30
36
  exports.DetailsRowArrowContainer = DetailsRowArrowContainer;
31
- var FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.2rem; \n"])));
37
+ var FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.2rem;\n"])));
32
38
  exports.FormattedValue = FormattedValue;
33
- var BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1rem;\n /* width: 5.35rem; */\n"])));
39
+ var BenchmarkContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1rem;\n /* width: 5.35rem; */\n"])));
34
40
  exports.BenchmarkContainer = BenchmarkContainer;
35
- var AreaChartContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 51%;\n\n"])));
41
+ var AreaChartContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 51%;\n"])));
36
42
  exports.AreaChartContainer = AreaChartContainer;
37
- var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
43
+ var BottomDetailsRowContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
38
44
  exports.BottomDetailsRowContainer = BottomDetailsRowContainer;
39
- var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.7rem;\n"])));
45
+ var BottomDetailsRowTitle = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.7rem;\n"])));
40
46
  exports.BottomDetailsRowTitle = BottomDetailsRowTitle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.187",
3
+ "version": "1.0.189",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/dist/stories/components/InfoIcon.js DELETED
@@ -1,38 +0,0 @@
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.InfoIcon = void 0;
8
- var _react = _interopRequireDefault(require("react"));
9
- var InfoIcon = function InfoIcon(_ref) {
10
- var clicked = _ref.clicked;
11
- return /*#__PURE__*/_react.default.createElement("svg", {
12
- xmlns: "http://www.w3.org/2000/svg",
13
- viewBox: "0 0 24 24",
14
- fill: "none",
15
- stroke: clicked ? "white" : "black",
16
- strokeWidth: "2",
17
- strokeLinecap: "round",
18
- strokeLinejoin: "round",
19
- className: "feather feather-info"
20
- }, /*#__PURE__*/_react.default.createElement("circle", {
21
- cx: "12",
22
- cy: "12",
23
- r: "10"
24
- }), /*#__PURE__*/_react.default.createElement("line", {
25
- x1: "12",
26
- y1: "16",
27
- x2: "12",
28
- y2: "12"
29
- }), /*#__PURE__*/_react.default.createElement("line", {
30
- x1: "12",
31
- y1: "8",
32
- x2: "12",
33
- y2: "8"
34
- }));
35
- };
36
- exports.InfoIcon = InfoIcon;
37
- var _default = InfoIcon;
38
- exports.default = _default;