sag_components 1.0.438 → 1.0.440
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.
- package/dist/stories/components/TotalBenchmark.style.js +5 -5
- package/dist/stories/components/TotalBenchmarkAreachart.js +10 -6
- package/dist/stories/components/TotalBenchmarkAreachart.style.js +1 -1
- package/dist/stories/components/TotalBenchmarkBarchart.js +1 -0
- package/dist/stories/components/TotalBenchmarkBarchart.style.js +3 -3
- package/package.json +1 -1
|
@@ -11,11 +11,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
11
11
|
const MIN_HEIGHT = 300;
|
|
12
12
|
const MIN_WIDTH = 260;
|
|
13
13
|
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n place-content: space-between;\n justify-content: space-between;\n align-items: flex-start;\n background: #ffffff;\n"])), props => props.textcolor, props => props.width, props => props.height);
|
|
14
|
-
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
15
|
-
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
16
|
-
const Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n
|
|
17
|
-
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n font-weight: 500;\n font-size:
|
|
14
|
+
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 12px;\n background: #ffffff;\n margin-bottom: 2rem;\n padding: 0px 0.8rem;\n"])));
|
|
15
|
+
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n"])));
|
|
16
|
+
const Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
|
|
17
|
+
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n"])));
|
|
18
18
|
const FormattedValueNoData = exports.FormattedValueNoData = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n font-weight: 700;\n font-size: 16px;\n"])));
|
|
19
19
|
const BenchmarkContainerParent = exports.BenchmarkContainerParent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n width: 100%;\n height: 100%;\n margin: 0;\n"])));
|
|
20
|
-
const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-top: 0;\n margin-left: 1rem;\n height: 0.9rem;\n
|
|
20
|
+
const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n margin-top: 0;\n margin-left: 1rem;\n height: 0.9rem;\n"])));
|
|
21
21
|
const NoDataFoundContainer = exports.NoDataFoundContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n"])));
|
|
@@ -42,6 +42,7 @@ const TotalBenchmarkAreachart = props => {
|
|
|
42
42
|
} = props;
|
|
43
43
|
const DEFAULT_ROOT_FONT = 16;
|
|
44
44
|
const DEFAULT_COMPONENT_WIDTH = 250;
|
|
45
|
+
const DEFAULT_COMPONENT_HEIGHT = 280;
|
|
45
46
|
const [rootFont, setRootFont] = (0, _react.useState)(DEFAULT_ROOT_FONT.toString().concat('', 'px'));
|
|
46
47
|
const anotherRef = (0, _react.useRef)(null);
|
|
47
48
|
const [activeLabel, setActiveLabel] = (0, _react.useState)('');
|
|
@@ -123,12 +124,15 @@ const TotalBenchmarkAreachart = props => {
|
|
|
123
124
|
if (!areaChartData || areaChartData.length === 0) return '';
|
|
124
125
|
return /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendDataElementsContainer, {
|
|
125
126
|
id: "EventWeeksLegendDataElementsContainer"
|
|
126
|
-
}, (_getAreaChartFormatte = getAreaChartFormattedData()) === null || _getAreaChartFormatte === void 0 ? void 0 : _getAreaChartFormatte.map(item =>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
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
|
+
}));
|
|
132
136
|
};
|
|
133
137
|
const displayEventWeeksLegendData = () => /*#__PURE__*/_react.default.createElement(_TotalBenchmarkAreachart.EventWeeksLegendMainContainer, {
|
|
134
138
|
id: "EventWeeksLegendMainContainer"
|
|
@@ -17,7 +17,7 @@ const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templ
|
|
|
17
17
|
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
|
|
18
18
|
const Title = exports.Title = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
|
|
19
19
|
const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: center;\n"])));
|
|
20
|
-
const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n width: 22px;\n @media (max-width: 1366px) {\n width: 12px;\n }\n @media (max-width: 1536px) {\n width: 14px;\n }\n"])));
|
|
20
|
+
const DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-end;\n width: 22px;\n margin-right: 5px;\n @media (max-width: 1366px) {\n width: 12px;\n }\n @media (max-width: 1536px) {\n width: 14px;\n }\n"])));
|
|
21
21
|
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n"])));
|
|
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"])));
|
|
@@ -117,6 +117,7 @@ const TotalBenchmarkBarchart = props => {
|
|
|
117
117
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
118
118
|
dataKey: "value",
|
|
119
119
|
name: "title",
|
|
120
|
+
maxBarSize: 55,
|
|
120
121
|
radius: [5, 5, 0, 0]
|
|
121
122
|
}, getFormattedBarChartData().map(entry => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
|
|
122
123
|
key: entry.id,
|
|
@@ -10,11 +10,11 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
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 display: flex;\n position: relative;\n font-family: \"Poppins\", sans-serif;\n font-style: normal;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-content: center;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: #ffffff;\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 display: flex;\n border-radius: 12px;\n background: #ffffff; \n justify-content: space-between;\n flex-direction: column;\n flex-basis: 100%;\n"])));
|
|
13
|
-
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n
|
|
14
|
-
const Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem; \n"])));
|
|
13
|
+
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px;\n"])));
|
|
14
|
+
const Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem; \n @media (max-width: 1366px) {\n font-size: 12px;\n }\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n"])));
|
|
15
15
|
const ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-start;\n align-items: baseline; \n\n"])));
|
|
16
16
|
const CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 500;\n font-size: 1rem;\n"])));
|
|
17
|
-
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size:
|
|
17
|
+
const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n"])));
|
|
18
18
|
const FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0; \n"])));
|
|
19
19
|
const BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.35em;\n"])));
|
|
20
20
|
const BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|