sag_components 1.0.187 → 1.0.188

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 +81 -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", "fillChartColor", "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,20 @@ 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$fillChartColor = _ref.fillChartColor,
45
+ fillChartColor = _ref$fillChartColor === void 0 ? "rgba(34, 158, 56, 0.20)" : _ref$fillChartColor,
46
+ _ref$startOffset = _ref.startOffset,
47
+ startOffset = _ref$startOffset === void 0 ? "17.04%" : _ref$startOffset,
48
+ _ref$endOffset = _ref.endOffset,
49
+ endOffset = _ref$endOffset === void 0 ? "17.04%" : _ref$endOffset,
50
+ _ref$opacity = _ref.opacity,
51
+ opacity = _ref$opacity === void 0 ? "191" : _ref$opacity,
52
+ _ref$value1Title = _ref.value1Title,
53
+ value1Title = _ref$value1Title === void 0 ? "Actual Sales" : _ref$value1Title,
54
+ _ref$value2Title = _ref.value2Title,
55
+ value2Title = _ref$value2Title === void 0 ? "Baseline Sales" : _ref$value2Title,
40
56
  _ref$noDataText = _ref.noDataText,
41
57
  noDataText = _ref$noDataText === void 0 ? "" : _ref$noDataText,
42
58
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -47,10 +63,15 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
47
63
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
48
64
  rootFont = _useState2[0],
49
65
  setRootFont = _useState2[1];
66
+ var anotherRef = (0, _react.useRef)(null);
50
67
  var _useState3 = (0, _react.useState)(1),
51
68
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
52
69
  heightFactor = _useState4[0],
53
70
  setHeightFactor = _useState4[1];
71
+ var _useState5 = (0, _react.useState)(""),
72
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
73
+ activeLabel = _useState6[0],
74
+ setActiveLabel = _useState6[1];
54
75
  var controlsContainerRef = (0, _react.useRef)();
55
76
  (0, _react.useEffect)(function () {
56
77
  var offsetWidth = controlsContainerRef.current.offsetWidth;
@@ -93,6 +114,40 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
93
114
  }));
94
115
  }
95
116
  };
117
+ var CustomTick = function CustomTick(_ref2) {
118
+ var x = _ref2.x,
119
+ y = _ref2.y,
120
+ stroke = _ref2.stroke,
121
+ payload = _ref2.payload;
122
+ return /*#__PURE__*/_react.default.createElement("g", {
123
+ transform: "translate(".concat(x, ",").concat(y, ")")
124
+ }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
125
+ x: -10,
126
+ y: 0,
127
+ width: "26",
128
+ height: "18",
129
+ rx: 9,
130
+ fill: xselectedColor,
131
+ fillOpacity: "0.10"
132
+ }), /*#__PURE__*/_react.default.createElement("text", {
133
+ x: 0,
134
+ y: 13,
135
+ dx: -5,
136
+ fill: "black",
137
+ fontSize: "8px"
138
+ }, payload.value));
139
+ };
140
+ var CustomTooltip = function CustomTooltip(_ref3) {
141
+ var active = _ref3.active,
142
+ payload = _ref3.payload,
143
+ label = _ref3.label;
144
+ if (active && payload && payload.length) {
145
+ console.log(active, payload, label);
146
+ setActiveLabel(label);
147
+ 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))));
148
+ }
149
+ return null;
150
+ };
96
151
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.ControlsContainer, {
97
152
  id: "ControlsContainer",
98
153
  height: height,
@@ -125,6 +180,7 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
125
180
  underAvarageColor: "#FD5959",
126
181
  backgroundColor: "#F2F2F2"
127
182
  })) : "")), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachartStyle.AreaChartContainer, {
183
+ ref: anotherRef,
128
184
  id: "AreaChartContainer"
129
185
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
130
186
  id: "ResponsiveContainer",
@@ -135,9 +191,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
135
191
  data: areaChartData,
136
192
  margin: {
137
193
  top: 0,
138
- right: 25,
194
+ right: 20,
139
195
  bottom: 0,
140
- left: 25
196
+ left: 20
141
197
  }
142
198
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
143
199
  strokeDasharray: "3 3",
@@ -149,13 +205,13 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
149
205
  x2: "0",
150
206
  y2: "1"
151
207
  }, /*#__PURE__*/_react.default.createElement("stop", {
152
- offset: "5%",
153
- stopColor: areaChart1Color,
154
- stopOpacity: 0.8
208
+ offset: startOffset,
209
+ stopColor: fillChartColor,
210
+ stopOpacity: opacity
155
211
  }), /*#__PURE__*/_react.default.createElement("stop", {
156
- offset: "95%",
157
- stopColor: areaChart1Color,
158
- stopOpacity: 0
212
+ offset: endOffset,
213
+ stopColor: fillChartColor,
214
+ stopOpacity: opacity
159
215
  })), /*#__PURE__*/_react.default.createElement("linearGradient", {
160
216
  id: "colorValue2",
161
217
  x1: "0",
@@ -163,19 +219,23 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
163
219
  x2: "0",
164
220
  y2: "1"
165
221
  }, /*#__PURE__*/_react.default.createElement("stop", {
166
- offset: "5%",
167
- stopColor: areaChart2Color,
168
- stopOpacity: 0.8
222
+ offset: startOffset,
223
+ stopColor: fillChartColor,
224
+ stopOpacity: opacity
169
225
  }), /*#__PURE__*/_react.default.createElement("stop", {
170
- offset: "95%",
171
- stopColor: areaChart2Color,
172
- stopOpacity: 0
226
+ offset: endOffset,
227
+ stopColor: fillChartColor,
228
+ stopOpacity: opacity
173
229
  }))), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
174
230
  dataKey: "title",
175
- style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "font-size", "12"), (0, _defineProperty2.default)(_ref2, "font-weight", "700"), _ref2)
231
+ tick: function tick(item) {
232
+ return /*#__PURE__*/_react.default.createElement(CustomTick, item);
233
+ },
234
+ tickLine: false,
235
+ style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, "fontWeight", "700"), (0, _defineProperty2.default)(_ref4, "stroke", "#D0D0D0"), (0, _defineProperty2.default)(_ref4, "strokeWidth", "1px"), _ref4)
176
236
  }), /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
177
237
  strokeDasharray: "3 3"
178
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
238
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Area, {
179
239
  type: "monotone",
180
240
  dataKey: "value1",
181
241
  stroke: areaChart1Color,
@@ -187,7 +247,9 @@ var TotalBenchmarkAreachart = function TotalBenchmarkAreachart(_ref) {
187
247
  stroke: areaChart2Color,
188
248
  fillOpacity: 1,
189
249
  fill: "url(#colorValue2)"
190
- }))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
250
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
251
+ content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
252
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null))))) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
191
253
  noDataText: noDataText
192
254
  }));
193
255
  };
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.188",
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;