sag_components 1.0.760 → 1.0.762

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/BarChart.style.js +1 -1
  2. package/dist/stories/components/BarChartsByWeeks.js +23 -30
  3. package/dist/stories/components/BarChartsByWeeks.style.js +6 -6
  4. package/dist/stories/components/TwoBarCharts.style.js +1 -1
  5. package/package.json +1 -1
package/dist/stories/components/BarChart.style.js CHANGED
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), 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 background: white;\n display: flex;\n flex-direction: column;\n"])));
13
13
  const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
- const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n width: fit-content;\n"])));
15
15
  const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n"])));
16
16
  const Title = exports.Title = _styledComponents.default.h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n margin: 0 0 30px;\n @media (max-width: 1536px) {\n font-size: 16px;\n margin: 0 0 20px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
17
17
  const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
package/dist/stories/components/BarChartsByWeeks.js CHANGED
@@ -39,27 +39,29 @@ const BarChartsByWeeks = props => {
39
39
  yAxisCounter,
40
40
  isPercentValue,
41
41
  interval,
42
+ showTitle,
42
43
  showLegend,
43
44
  legendData,
44
45
  showTwoBars,
45
46
  setLimitHeight,
46
47
  setLimitLow
47
48
  } = props;
48
- const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
49
- const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
49
+
50
+ // const [BarChartContainerWidth, setBarChartContainerWidth] = useState(0);
51
+ // const [BarChartContainerHeight, setBarChartContainerHeight] = useState(0);
52
+
50
53
  const controlsContainerRef = (0, _react.useRef)();
51
- (0, _react.useEffect)(() => {
52
- const {
53
- offsetWidth
54
- } = controlsContainerRef.current;
55
- setBarChartContainerWidth(offsetWidth - 20);
56
- }, [width]);
57
- (0, _react.useEffect)(() => {
58
- const {
59
- offsetHeight
60
- } = controlsContainerRef.current;
61
- setBarChartContainerHeight(offsetHeight - 40);
62
- }, [height]);
54
+
55
+ // useEffect(() => {
56
+ // const { offsetWidth } = controlsContainerRef.current;
57
+ // setBarChartContainerWidth(offsetWidth - 20);
58
+ // }, [width]);
59
+
60
+ // useEffect(() => {
61
+ // const { offsetHeight } = controlsContainerRef.current;
62
+ // setBarChartContainerHeight(offsetHeight - 40);
63
+ // }, [height]);
64
+
63
65
  const displayFormattedValue = value => {
64
66
  if (!value) return '';
65
67
  let formattedValue = '';
@@ -115,12 +117,9 @@ const BarChartsByWeeks = props => {
115
117
  const displayEventWeeksElements = () => {
116
118
  var _getWeek;
117
119
  if (!barChartData || barChartData.length === 0) return '';
118
- return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, {
119
- className: "EventWeeksLegendDataElementsContainer"
120
- }, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => {
120
+ return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElementsContainer, null, (_getWeek = getWeek()) === null || _getWeek === void 0 ? void 0 : _getWeek.map(item => {
121
121
  var _item$title2, _item$title3;
122
122
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendDataElement, {
123
- className: "EventWeeksLegendDataElement",
124
123
  color: item.title >= startWeekRange && item.title <= endWeekRange ? xselectedColor : '',
125
124
  textColor: item.title >= startWeekRange && item.title <= endWeekRange ? '#212121' : '#B1B1B1',
126
125
  fontWeight: item.title >= startWeekRange && item.title <= endWeekRange ? 600 : 400,
@@ -161,13 +160,8 @@ const BarChartsByWeeks = props => {
161
160
  width: width,
162
161
  ref: controlsContainerRef
163
162
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
164
- className: "Controls",
165
163
  height: getControlsHeight()
166
- }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
167
- className: "TitleAndValueContainer"
168
- }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
169
- className: "Title"
170
- }, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
164
+ }, showTitle && /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, null, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
171
165
  title: headerValueTopTitle,
172
166
  subtitle: headerValueBottomTitle,
173
167
  value: headerValue,
@@ -178,13 +172,13 @@ const BarChartsByWeeks = props => {
178
172
  width: "100%",
179
173
  height: "100%"
180
174
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
181
- width: BarChartContainerWidth,
182
- height: BarChartContainerHeight,
175
+ width: width,
176
+ height: height,
183
177
  data: formmatedData,
184
178
  margin: {
185
179
  top: 20,
186
180
  right: 0,
187
- bottom: -25,
181
+ bottom: 0,
188
182
  left: -5
189
183
  }
190
184
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
@@ -227,9 +221,7 @@ const BarChartsByWeeks = props => {
227
221
  radius: [4, 4, 0, 0],
228
222
  stackId: "a",
229
223
  fill: barChartSecondColor
230
- })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.LegendWrapper, {
231
- className: "LegendWrapper"
232
- }, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
224
+ })))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.LegendWrapper, null, /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
233
225
  legendData: legendData
234
226
  }))));
235
227
  };
@@ -286,6 +278,7 @@ BarChartsByWeeks.defaultProps = {
286
278
  yAxisCounter: 10,
287
279
  isPercentValue: false,
288
280
  interval: 'preserveEnd',
281
+ showTitle: true,
289
282
  showLegend: true,
290
283
  isTitleOriganal: false,
291
284
  legendData: [{
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -9,13 +9,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), props => props.width, props => props.height);
12
- const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n width: 100%;\n background: #ffffff;\n"])), props => props.height || '100%');
12
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: white;\n display: flex;\n flex-direction: column;\n"])));
13
13
  const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
- const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
15
- const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n width: fit-content;\n"])));
15
+ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n"])));
16
16
  const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
17
- const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 20px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
17
+ const Title = exports.Title = _styledComponents.default.h5(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
18
18
  const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin: 2px 0 0 0;\n padding-left: 55px;\n align-items: center;\n"])));
19
19
  const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
20
- const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0px;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\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.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
21
- const LegendWrapper = exports.LegendWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n width: 100%;\n padding: 10px 0 0 0;\n"])));
20
+ const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n font-weight: ", ";\n font-size: 12px;\n line-height: 15px;\n margin: 0;\n width: 100%;\n justify-content: center;\n align-content: center;\n color: ", ";\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.fontWeight, props => props.textColor, props => props.borderLeftRadius, props => props.borderLeftRadius, props => props.borderRightRadius, props => props.borderRightRadius, props => props.color);
21
+ const LegendWrapper = exports.LegendWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n padding-top: 15px;\n"])));
package/dist/stories/components/TwoBarCharts.style.js CHANGED
@@ -11,7 +11,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), 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 background: white;\n display: flex;\n flex-direction: column;\n"])));
13
13
  const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
14
- const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
14
+ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n width: fit-content;\n"])));
15
15
  const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n"])));
16
16
  const Title = exports.Title = _styledComponents.default.h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n margin: 0 0 30px;\n @media (max-width: 1536px) {\n font-size: 16px;\n margin: 0 0 20px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
17
17
  const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.760",
3
+ "version": "1.0.762",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {