sag_components 1.0.424 → 1.0.426

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 (3) hide show
  1. package/dist/stories/components/TotalBenchmarkAreachart.js +59 -46
  2. package/dist/stories/components/TotalBenchmarkAreachart.style.js +10 -7
  3. package/package.json +1 -1
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -81,42 +81,25 @@ const TotalBenchmarkAreachart = props => {
81
81
  }));
82
82
  };
83
83
 
84
- // ----------------------------- Custom tick function -----------------------
84
+ // ----------------------------- Custom tick function - not used -----------------------
85
85
  const CustomTick = item => {
86
- var _payload$value, _payload$value2, _payload$value3;
87
86
  const {
88
87
  x,
89
88
  y,
90
89
  stroke,
91
90
  payload
92
91
  } = item;
93
- const NORMAL_WIDTH = 350;
94
- const currentWeek = (payload === null || payload === void 0 ? void 0 : (_payload$value = payload.value) === null || _payload$value === void 0 ? void 0 : _payload$value.length) > 1 ? payload === null || payload === void 0 ? void 0 : (_payload$value2 = payload.value) === null || _payload$value2 === void 0 ? void 0 : _payload$value2.substring(1, payload === null || payload === void 0 ? void 0 : (_payload$value3 = payload.value) === null || _payload$value3 === void 0 ? void 0 : _payload$value3.length) : 0;
95
- if (!(0, _CommonFunctions.isNumericValue)(currentWeek) || !(0, _CommonFunctions.isNumericValue)(startWeekRange) || !(0, _CommonFunctions.isNumericValue)(endWeekRange)) {
96
- return;
97
- }
98
- const currentWeekNumeric = Number(currentWeek);
99
- const startWeekRangeNumeric = Number(startWeekRange);
100
- const endWeekRangeNumeric = Number(endWeekRange);
101
- const {
102
- offsetWidth
103
- } = controlsContainerRef.current;
104
- const elementWidthFactor = offsetWidth / NORMAL_WIDTH * 0.5;
105
- const lastElementWidthFactor = offsetWidth / NORMAL_WIDTH * 0.9;
106
- const elementLeftFactor = offsetWidth / NORMAL_WIDTH * 0.3;
107
- const elementWidth = currentWeekNumeric === endWeekRangeNumeric ? 45 * lastElementWidthFactor : 140 * elementWidthFactor;
108
- console.log("offsetWidth", offsetWidth, elementWidthFactor);
109
92
  return /*#__PURE__*/_react.default.createElement("g", {
110
93
  transform: "translate(".concat(x, ",").concat(y, ")")
111
- }, currentWeekNumeric >= startWeekRangeNumeric && currentWeekNumeric <= endWeekRangeNumeric ? /*#__PURE__*/_react.default.createElement("rect", {
112
- x: -50 * elementLeftFactor,
94
+ }, activeLabel === payload.value && /*#__PURE__*/_react.default.createElement("rect", {
95
+ x: -15,
113
96
  y: 0,
114
- width: elementWidth,
115
- height: 18,
97
+ width: "40",
98
+ height: "18",
116
99
  rx: 9,
117
- fill: xselectedColor
118
- //fillOpacity="0.50"
119
- }) : "", /*#__PURE__*/_react.default.createElement("text", {
100
+ fill: xselectedColor,
101
+ fillOpacity: "0.30"
102
+ }), /*#__PURE__*/_react.default.createElement("text", {
120
103
  x: 0,
121
104
  y: 14,
122
105
  dx: -10,
@@ -136,15 +119,43 @@ const TotalBenchmarkAreachart = props => {
136
119
  }
137
120
  return null;
138
121
  };
139
- const getEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataContainer, {
140
- id: "EventWeeksLegendDataContainer"
122
+ const displayEventWeeksElements = () => {
123
+ var _getAreaChartFormatte;
124
+ if (!areaChartData || areaChartData.length === 0) return "";
125
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElementsContainer, {
126
+ id: "EventWeeksLegendDataElementsContainer"
127
+ }, (_getAreaChartFormatte = getAreaChartFormattedData()) === null || _getAreaChartFormatte === void 0 ? void 0 : _getAreaChartFormatte.map(item => {
128
+ console.log("displayEventWeeksElements", item);
129
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElement, {
130
+ id: "EventWeeksLegendDataElement",
131
+ color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : "",
132
+ borderLeftRadius: item.title === startWeekRange ? "12px" : "0px",
133
+ borderRightRadius: item.title === endWeekRange ? "12px" : "0px"
134
+ }, item.titleWeek);
135
+ }));
136
+ };
137
+ const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendMainContainer, {
138
+ id: "EventWeeksLegendMainContainer"
139
+ }, displayEventWeeksElements(), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendContainer, {
140
+ id: "EventWeeksLegendContainer"
141
141
  }, /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendColorRectangle, {
142
142
  id: "EventWeeksLegendColorRectangle",
143
143
  color: xselectedColor
144
144
  }), /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendTitle, {
145
145
  id: "EventWeeksLegendTitle",
146
146
  width: width
147
- }, "Event weeks"));
147
+ }, "Event weeks")));
148
+ const getAreaChartFormattedData = () => {
149
+ if (!areaChartData || (areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.length) === 0) return null;
150
+ const newFormattedData = areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.map(item => {
151
+ var _item$title;
152
+ return {
153
+ ...item,
154
+ titleWeek: item.title && ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toString().length) === 6 ? item.title.toString().substring(4, 6) : 0
155
+ };
156
+ });
157
+ return newFormattedData;
158
+ };
148
159
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ControlsContainer, {
149
160
  id: "ControlsContainer",
150
161
  height: height,
@@ -184,11 +195,11 @@ const TotalBenchmarkAreachart = props => {
184
195
  height: "100%"
185
196
  }, /*#__PURE__*/_react.default.createElement(_recharts.AreaChart, {
186
197
  id: "SourceAreaChart",
187
- data: areaChartData,
198
+ data: getAreaChartFormattedData(),
188
199
  margin: {
189
200
  top: 0,
190
201
  right: 24,
191
- bottom: -5,
202
+ bottom: -30,
192
203
  left: 24
193
204
  }
194
205
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
@@ -223,8 +234,10 @@ const TotalBenchmarkAreachart = props => {
223
234
  stopColor: fillChart2Color,
224
235
  stopOpacity: opacity
225
236
  }))), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
226
- dataKey: "title",
227
- tick: item => /*#__PURE__*/_react.default.createElement(CustomTick, item),
237
+ dataKey: "titleWeek",
238
+ tick: false
239
+ // tick={(item) => <CustomTick {...item} />}
240
+ ,
228
241
  tickLine: false,
229
242
  style: {
230
243
  fontWeight: "700",
@@ -247,7 +260,7 @@ const TotalBenchmarkAreachart = props => {
247
260
  fill: "url(#colorValue2)"
248
261
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
249
262
  content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
250
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), getEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
263
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), displayEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
251
264
  noDataText: noDataText
252
265
  }));
253
266
  };
@@ -261,55 +274,55 @@ TotalBenchmarkAreachart.defaultProps = {
261
274
  benchmarkTotalValue: "",
262
275
  benchmarkValue: null,
263
276
  areaChartData: [{
264
- title: "W20",
277
+ title: "202320",
265
278
  value1: 542366,
266
279
  value2: 247715
267
280
  }, {
268
- title: "W21",
281
+ title: "202321",
269
282
  value1: 699511,
270
283
  value2: 252313
271
284
  }, {
272
- title: "W22",
285
+ title: "202322",
273
286
  value1: 403092,
274
287
  value2: 260822
275
288
  }, {
276
- title: "W23",
289
+ title: "202323",
277
290
  value1: 396184,
278
291
  value2: 264325
279
292
  }, {
280
- title: "W24",
293
+ title: "202324",
281
294
  value1: 415317,
282
295
  value2: 269243
283
296
  }, {
284
- title: "W25",
297
+ title: "202325",
285
298
  value1: 568376,
286
299
  value2: 269592
287
300
  }, {
288
- title: "W26",
301
+ title: "202326",
289
302
  value1: 1078121,
290
303
  value2: 269949
291
304
  }, {
292
- title: "W27",
305
+ title: "202327",
293
306
  value1: 347930,
294
307
  value2: 270735
295
308
  }, {
296
- title: "W28",
309
+ title: "202328",
297
310
  value1: 346258,
298
311
  value2: 271200
299
312
  }, {
300
- title: "W29",
313
+ title: "202329",
301
314
  value1: 350184,
302
315
  value2: 270324
303
316
  }, {
304
- title: "W30",
317
+ title: "202330",
305
318
  value1: 312790,
306
319
  value2: 266821
307
320
  }, {
308
- title: "W31",
321
+ title: "202331",
309
322
  value1: 335076,
310
323
  value2: 267064
311
324
  }, {
312
- title: "W32",
325
+ title: "202332",
313
326
  value1: 311037,
314
327
  value2: 266821
315
328
  }],
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.EventWeeksLegendTitle = exports.EventWeeksLegendDataContainer = exports.EventWeeksLegendColorRectangle = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = exports.BenchmarkContainer = exports.AreaChartContainer = void 0;
7
+ exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.FormattedValueNoDataMessage = exports.FormattedValue = exports.EventWeeksLegendTitle = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.EventWeeksLegendContainer = exports.EventWeeksLegendColorRectangle = exports.DetailsRowArrowContainer = exports.CurrencySign = exports.ControlsContainer = exports.Controls = 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, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
11
- const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), props => props.textColor, props => props.width, props => props.height);
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
11
+ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n min-width: 250px;\n"])), props => props.textColor, props => props.width, props => props.height);
12
12
  const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n /* justify-content: space-between; */\n background: #ffffff;\n border-radius: 12px;\n flex-basis: 100%;\n"])));
13
- const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%;\n height: 50%;\n"])));
13
+ const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 50%;\n"])));
14
14
  const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #ffffff;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
15
15
  const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
16
16
  const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
@@ -22,6 +22,9 @@ const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_t
22
22
  const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
23
23
  const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0;\n"])));
24
24
  const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
25
- const EventWeeksLegendDataContainer = exports.EventWeeksLegendDataContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n margin-top: 10px;\n align-items: center;\n"])));
26
- const EventWeeksLegendTitle = exports.EventWeeksLegendTitle = _styledComponents.default.h4(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n margin: 0 0 0 5px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
27
- const EventWeeksLegendColorRectangle = exports.EventWeeksLegendColorRectangle = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.5rem;\n min-width: 0.5rem;\n height: 0.5rem;\n border-radius: 2px;\n background: ", ";\n"])), props => props.color);
25
+ const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-top: 2px;\n align-items: center;\n"])));
26
+ const EventWeeksLegendContainer = exports.EventWeeksLegendContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: row;\n margin-top: 2px;\n align-items: center;\n"])));
27
+ const EventWeeksLegendTitle = exports.EventWeeksLegendTitle = _styledComponents.default.h4(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n line-height: 20px;\n margin: 0 0 0 5px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
28
+ const EventWeeksLegendColorRectangle = exports.EventWeeksLegendColorRectangle = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n width: 0.5rem;\n min-width: 0.5rem;\n height: 0.5rem;\n border-radius: 2px;\n background: ", ";\n"])), props => props.color);
29
+ const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-top: 1px;\n align-items: center;\n justify-content: space-around;\n width: 90%;\n"])));
30
+ const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: 400;\n font-size: 12px;\n line-height: 18px;\n margin: 2px 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n border-top-left-radius: ", ";\n border-bottom-left-radius: ", ";\n border-top-right-radius: ", ";\n border-bottom-right-radius: ", ";\n background: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.424",
3
+ "version": "1.0.426",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {