sag_components 1.0.594 → 1.0.596
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.
|
@@ -34,8 +34,6 @@ const BarChartsByWeeks = props => {
|
|
|
34
34
|
} = props;
|
|
35
35
|
const [BarChartContainerWidth, setBarChartContainerWidth] = (0, _react.useState)(0);
|
|
36
36
|
const [BarChartContainerHeight, setBarChartContainerHeight] = (0, _react.useState)(0);
|
|
37
|
-
const anotherRef = (0, _react.useRef)(null);
|
|
38
|
-
const [activeLabel, setActiveLabel] = (0, _react.useState)('');
|
|
39
37
|
const controlsContainerRef = (0, _react.useRef)();
|
|
40
38
|
(0, _react.useEffect)(() => {
|
|
41
39
|
const {
|
|
@@ -49,14 +47,10 @@ const BarChartsByWeeks = props => {
|
|
|
49
47
|
} = controlsContainerRef.current;
|
|
50
48
|
setBarChartContainerHeight(offsetHeight - 40);
|
|
51
49
|
}, [height]);
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
label
|
|
57
|
-
} = _ref;
|
|
58
|
-
if (active && payload && payload.length) {
|
|
59
|
-
setActiveLabel(label);
|
|
50
|
+
|
|
51
|
+
// eslint-disable-next-line react/no-unstable-nested-components
|
|
52
|
+
const CustomTooltip = (active, payload, label) => {
|
|
53
|
+
if (active && payload && payload !== null && payload !== void 0 && payload.length) {
|
|
60
54
|
const week = label && (label === null || label === void 0 ? void 0 : label.toString().length) === 6 ? label.toString().substring(4, 6) : 0;
|
|
61
55
|
return /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipTitle, null, "Week: ".concat(week)), /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.TooltipLabel, null, "".concat(tooltipTitle, " \n ").concat(payload[0].value ? isPercentValue ? ''.concat('', payload[0].value.toFixed(1), '%') : ''.concat('', (0, _CommonFunctions.getFormattedValue)(payload[0].value), (0, _CommonFunctions.getFormattedUnits)(payload[0].value)) : '', " \n ")));
|
|
62
56
|
}
|
|
@@ -101,15 +95,10 @@ const BarChartsByWeeks = props => {
|
|
|
101
95
|
id: "TitleAndValueContainer"
|
|
102
96
|
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.Title, {
|
|
103
97
|
id: "Title"
|
|
104
|
-
}, title)), /*#__PURE__*/_react.default.createElement(
|
|
105
|
-
ref: anotherRef,
|
|
106
|
-
id: "AreaChartContainer"
|
|
107
|
-
}, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
98
|
+
}, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
108
99
|
id: "ResponsiveContainer",
|
|
109
100
|
width: "100%",
|
|
110
|
-
height: "
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement(_BarChartsByWeeks.BarchartContainer, {
|
|
112
|
-
id: "BarchartContainer"
|
|
101
|
+
height: showLegend ? "80%" : "86%"
|
|
113
102
|
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
114
103
|
width: BarChartContainerWidth,
|
|
115
104
|
height: BarChartContainerHeight,
|
|
@@ -144,10 +133,10 @@ const BarChartsByWeeks = props => {
|
|
|
144
133
|
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
145
134
|
dataKey: "value",
|
|
146
135
|
name: "title",
|
|
147
|
-
maxBarSize:
|
|
136
|
+
maxBarSize: 30,
|
|
148
137
|
radius: [4, 4, 0, 0],
|
|
149
138
|
fill: barChartColor
|
|
150
|
-
})))
|
|
139
|
+
}))), displayEventWeeksLegendData(), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
|
|
151
140
|
legendData: legendData
|
|
152
141
|
})));
|
|
153
142
|
};
|
|
@@ -4,10 +4,10 @@ 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.
|
|
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;
|
|
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, _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
12
|
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: #ffffff;\n"])));
|
|
13
13
|
const AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: auto;\n width: 100%; \n height: 85%;\n"])));
|
|
@@ -16,8 +16,6 @@ const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templ
|
|
|
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"])));
|
|
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-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\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
|
|
20
|
-
const
|
|
21
|
-
const
|
|
22
|
-
const EventWeeksLegendDataElement = exports.EventWeeksLegendDataElement = _styledComponents.default.h4(_templateObject12 || (_templateObject12 = (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);
|
|
23
|
-
const BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\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: 0 0 0 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);
|