sag_components 1.0.706 → 1.0.707

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/BarChartsByWeeks.js +29 -1
  2. package/dist/stories/components/BarChartsByWeeks.style.js +11 -12
  3. package/dist/stories/components/FormattedValue.style.js +1 -1
  4. package/package.json +1 -1
package/dist/stories/components/BarChartsByWeeks.js CHANGED
@@ -110,13 +110,41 @@ const BarChartsByWeeks = props => {
110
110
  const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.EventWeeksLegendMainContainer, {
111
111
  className: "EventWeeksLegendMainContainer"
112
112
  }, displayEventWeeksElements());
113
+ const getControlsHeight = () => {
114
+ // headerValueTopTitle,
115
+ // headerValueBottomTitle,
116
+ // headerValue,
117
+ if (!(controlsContainerRef !== null && controlsContainerRef !== void 0 && controlsContainerRef.current)) return '100%';
118
+ const {
119
+ offsetHeight
120
+ } = controlsContainerRef.current;
121
+ let newHeight = offsetHeight;
122
+ if (title) {
123
+ newHeight -= 20;
124
+ }
125
+ if (headerValueTopTitle) {
126
+ newHeight -= 30;
127
+ }
128
+ if (headerValueBottomTitle) {
129
+ newHeight -= 30;
130
+ }
131
+ if (headerValue) {
132
+ newHeight -= 60;
133
+ }
134
+ if (showLegend) {
135
+ newHeight -= 50;
136
+ }
137
+ console.log('newHeight', newHeight);
138
+ return "".concat(newHeight, "px");
139
+ };
113
140
  return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.ControlsContainer, {
114
141
  className: "ControlsContainer",
115
142
  height: height,
116
143
  width: width,
117
144
  ref: controlsContainerRef
118
145
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Controls, {
119
- className: "Controls"
146
+ className: "Controls",
147
+ height: getControlsHeight()
120
148
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TitleAndValueContainer, {
121
149
  className: "TitleAndValueContainer"
122
150
  }, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
package/dist/stories/components/BarChartsByWeeks.style.js CHANGED
@@ -4,18 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = exports.AreaChartContainer = void 0;
7
+ exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.EventWeeksLegendMainContainer = exports.EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElement = exports.ControlsContainer = exports.Controls = 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;
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: 100%;\n width: 100%;\n background: #ffffff;\n"])));
13
- const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 85%;\n"])));
14
- const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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"])));
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
- 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"])));
17
- const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
18
- const Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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\n"])));
19
- const EventWeeksLegendMainContainer = exports.EventWeeksLegendMainContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (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\n"])));
20
- const EventWeeksLegendDataElementsContainer = exports.EventWeeksLegendDataElementsContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0px;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n"])));
21
- const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject11 || (_templateObject11 = (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);
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%');
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"])));
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\n"])));
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\n"])));
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);
package/dist/stories/components/FormattedValue.style.js CHANGED
@@ -12,7 +12,7 @@ const scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n
12
12
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n color: ", ";\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n @media (max-width: 1536px) {\n ", "\n }\n\n > * {\n box-sizing: border-box;\n }\n"])), props => props.textcolor, props => props.width, props => props.height, scrollableStyles);
13
13
  const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: white; \n"])));
14
14
  const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column; \n"])));
15
- const Title = exports.Title = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 20px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
15
+ const Title = exports.Title = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 20px;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])));
16
16
  const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
17
17
  const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n"])));
18
18
  const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 34px;\n }\n @media (max-width: 1366px) {\n font-size: 28px;\n }\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.706",
3
+ "version": "1.0.707",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {