sag_components 1.0.760 → 1.0.761

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/BarChart.style.js +1 -1
  2. package/dist/stories/components/BarChartsByWeeks.js +21 -23
  3. package/dist/stories/components/BarChartsByWeeks.style.js +4 -4
  4. 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 = '';
@@ -161,13 +163,8 @@ const BarChartsByWeeks = props => {
161
163
  width: width,
162
164
  ref: controlsContainerRef
163
165
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
164
- className: "Controls",
165
166
  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, {
167
+ }, showTitle && /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, null, title), /*#__PURE__*/_react.default.createElement(_FormattedValue.FormattedValue, {
171
168
  title: headerValueTopTitle,
172
169
  subtitle: headerValueBottomTitle,
173
170
  value: headerValue,
@@ -178,13 +175,13 @@ const BarChartsByWeeks = props => {
178
175
  width: "100%",
179
176
  height: "100%"
180
177
  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
181
- width: BarChartContainerWidth,
182
- height: BarChartContainerHeight,
178
+ width: width,
179
+ height: height,
183
180
  data: formmatedData,
184
181
  margin: {
185
182
  top: 20,
186
183
  right: 0,
187
- bottom: -25,
184
+ bottom: 0,
188
185
  left: -5
189
186
  }
190
187
  }, /*#__PURE__*/_react.default.createElement(_recharts.CartesianGrid, {
@@ -286,6 +283,7 @@ BarChartsByWeeks.defaultProps = {
286
283
  yAxisCounter: 10,
287
284
  isPercentValue: false,
288
285
  interval: 'preserveEnd',
286
+ showTitle: true,
289
287
  showLegend: true,
290
288
  isTitleOriganal: false,
291
289
  legendData: [{
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -9,12 +9,12 @@ 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
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.760",
3
+ "version": "1.0.761",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {