sag_components 1.0.424 → 1.0.425

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 +33 -31
  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,32 @@ 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
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElementsContainer, {
124
+ id: "EventWeeksLegendDataElementsContainer"
125
+ }, areaChartData === null || areaChartData === void 0 ? void 0 : areaChartData.map(item => {
126
+ console.log("displayEventWeeksElements", item);
127
+ if (item !== null) {
128
+ return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElement, {
129
+ id: "EventWeeksLegendDataElement",
130
+ color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : "",
131
+ borderLeftRadius: item.title === startWeekRange ? "12px" : "0px",
132
+ borderRightRadius: item.title === endWeekRange ? "12px" : "0px"
133
+ }, item.title);
134
+ }
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
148
  return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.ControlsContainer, {
149
149
  id: "ControlsContainer",
150
150
  height: height,
@@ -188,7 +188,7 @@ const TotalBenchmarkAreachart = props => {
188
188
  margin: {
189
189
  top: 0,
190
190
  right: 24,
191
- bottom: -5,
191
+ bottom: -30,
192
192
  left: 24
193
193
  }
194
194
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
@@ -224,7 +224,9 @@ const TotalBenchmarkAreachart = props => {
224
224
  stopOpacity: opacity
225
225
  }))), /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
226
226
  dataKey: "title",
227
- tick: item => /*#__PURE__*/_react.default.createElement(CustomTick, item),
227
+ tick: false
228
+ // tick={(item) => <CustomTick {...item} />}
229
+ ,
228
230
  tickLine: false,
229
231
  style: {
230
232
  fontWeight: "700",
@@ -247,7 +249,7 @@ const TotalBenchmarkAreachart = props => {
247
249
  fill: "url(#colorValue2)"
248
250
  }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
249
251
  content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
250
- }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), getEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
252
+ }), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null)))), displayEventWeeksLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
251
253
  noDataText: noDataText
252
254
  }));
253
255
  };
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.425",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {