sag_components 1.0.289 → 1.0.290
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/.history/package_20231102123623.json +82 -0
- package/dist/stories/components/PerformanceAnalytics.js +2 -2
- package/dist/stories/components/PerformanceAnalytics.style.js +9 -8
- package/dist/stories/components/PerformanceAnalyticsTotals.style.js +1 -1
- package/dist/stories/components/TotalBenchmarkAreachart.style.js +1 -1
- package/dist/stories/components/TotalBenchmarkBarchart.style.js +2 -2
- package/dist/stories/components/TotalDoughnutChart.style.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sag_components",
|
|
3
|
+
"version": "1.0.290",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "react-scripts start",
|
|
8
|
+
"lint": "eslint .",
|
|
9
|
+
"build": "cross-env BABEL_ENV=production babel src -d dist ",
|
|
10
|
+
"storybook": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [],
|
|
14
|
+
"author": "SAG",
|
|
15
|
+
"license": "ISC",
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@babel/cli": "^7.23.0",
|
|
18
|
+
"@babel/preset-env": "^7.23.2",
|
|
19
|
+
"@babel/preset-react": "^7.22.15",
|
|
20
|
+
"@babel/preset-typescript": "^7.23.2",
|
|
21
|
+
"@storybook/addon-a11y": "^7.4.6",
|
|
22
|
+
"@storybook/addon-essentials": "^7.4.6",
|
|
23
|
+
"@storybook/addon-interactions": "^7.4.6",
|
|
24
|
+
"@storybook/addon-links": "^7.4.6",
|
|
25
|
+
"@storybook/addon-storysource": "^7.4.6",
|
|
26
|
+
"@storybook/blocks": "^7.4.6",
|
|
27
|
+
"@storybook/preset-scss": "^1.0.3",
|
|
28
|
+
"@storybook/react": "^7.4.6",
|
|
29
|
+
"@storybook/react-webpack5": "^7.4.6",
|
|
30
|
+
"@storybook/testing-library": "^0.2.2",
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"css-loader": "^6.8.1",
|
|
33
|
+
"eslint": "^8.52.0",
|
|
34
|
+
"eslint-config-airbnb": "^19.0.4",
|
|
35
|
+
"eslint-plugin-import": "^2.29.0",
|
|
36
|
+
"eslint-plugin-jsx-a11y": "^6.7.1",
|
|
37
|
+
"eslint-plugin-react": "^7.33.2",
|
|
38
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"sass": "^1.69.5",
|
|
41
|
+
"sass-loader": "^13.3.2",
|
|
42
|
+
"style-loader": "^3.3.3"
|
|
43
|
+
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@dnd-kit/core": "^6.0.8",
|
|
46
|
+
"@emotion/react": "^11.11.1",
|
|
47
|
+
"@emotion/styled": "^11.11.0",
|
|
48
|
+
"@fontsource/roboto": "^5.0.8",
|
|
49
|
+
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
|
50
|
+
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
|
51
|
+
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
52
|
+
"@mui/icons-material": "^5.14.16",
|
|
53
|
+
"@mui/material": "^5.14.16",
|
|
54
|
+
"@mui/styled-engine-sc": "^5.14.12",
|
|
55
|
+
"@mui/x-date-pickers": "^6.17.0",
|
|
56
|
+
"@storybook/addon-designs": "^7.0.5",
|
|
57
|
+
"babel-plugin-react-css-modules": "^5.2.6",
|
|
58
|
+
"classnames": "^2.3.2",
|
|
59
|
+
"dayjs": "^1.11.10",
|
|
60
|
+
"hoopy": "^0.1.4",
|
|
61
|
+
"prop-types": "^15.8.1",
|
|
62
|
+
"react": "^18.2.0",
|
|
63
|
+
"react-css-modules": "^4.7.11",
|
|
64
|
+
"react-loading-skeleton": "^3.3.1",
|
|
65
|
+
"react-scripts": "5.0.1",
|
|
66
|
+
"recharts": "^2.6.2",
|
|
67
|
+
"storybook": "^7.4.6",
|
|
68
|
+
"styled-components": "^6.1.0"
|
|
69
|
+
},
|
|
70
|
+
"browserslist": {
|
|
71
|
+
"production": [
|
|
72
|
+
">0.2%",
|
|
73
|
+
"not dead",
|
|
74
|
+
"not op_mini all"
|
|
75
|
+
],
|
|
76
|
+
"development": [
|
|
77
|
+
"last 1 chrome version",
|
|
78
|
+
"last 1 firefox version",
|
|
79
|
+
"last 1 safari version"
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -361,7 +361,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
361
361
|
textcolor: textcolor
|
|
362
362
|
}, (totalsData === null || totalsData === void 0 ? void 0 : totalsData.length) > 0 && (data === null || data === void 0 ? void 0 : data.length) > 0 ? /*#__PURE__*/_react.default.createElement(_PerformanceAnalytics.Controls, {
|
|
363
363
|
id: "Controls"
|
|
364
|
-
}, /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
|
|
364
|
+
}, /*#__PURE__*/_react.default.createElement(SegmentedButtonGroup, null, /*#__PURE__*/_react.default.createElement(_SegmentedButton.SegmentedButton, {
|
|
365
365
|
backgroundcolor: "#F2F2F2",
|
|
366
366
|
controlradius: 8,
|
|
367
367
|
defaultIndex: 1,
|
|
@@ -415,7 +415,7 @@ var PerformanceAnalytics = exports.PerformanceAnalytics = function PerformanceAn
|
|
|
415
415
|
selectedtextcolor: "#212121",
|
|
416
416
|
unselectedtextcolor: "#212121",
|
|
417
417
|
width: 200
|
|
418
|
-
}), displayTotalsData(), displaySegmentedButtons(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
|
|
418
|
+
})), displayTotalsData(), displaySegmentedButtons(), displayLineChartROI(), displayBarChart(), displayLegendData()) : /*#__PURE__*/_react.default.createElement(_NoDataFoundMessage.NoDataFoundMessage, {
|
|
419
419
|
noDataText: noDataText
|
|
420
420
|
}));
|
|
421
421
|
};
|
|
@@ -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.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonContainer = exports.ControlsContainer = exports.Controls = void 0;
|
|
7
|
+
exports.TooltipValue = exports.TooltipTitle = exports.TooltipLabel = exports.TooltipContainer = exports.ToolTipLabelAndValueContainer = exports.SegmentedButtonGroup = exports.SegmentedButtonContainer = 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;
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
11
11
|
var scrollableStyles = "\n overflow-y: auto;\n\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #E8E8E8;\n border-radius: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #D0D0D0;\n border-radius: 5px;\n }\n";
|
|
12
12
|
var 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-size: ", ";\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n align-self: center;\n\n > * {\n box-sizing: border-box;\n }\n"])), function (props) {
|
|
13
13
|
return props.rootFont;
|
|
@@ -19,9 +19,10 @@ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.di
|
|
|
19
19
|
return props.height;
|
|
20
20
|
});
|
|
21
21
|
var Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n padding: 24px 40px;\n background: white;\n overflow-y: auto;\n ", "\n @media (max-width: 1536px) {\n padding: 12px 32px;\n } \n > #SegmentedButtonContainer {\n padding-left: 0;\n > #Controls {\n background: #f2f2f2;\n }\n }\n"])), scrollableStyles);
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
var
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
22
|
+
var SegmentedButtonGroup = exports.SegmentedButtonGroup = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-bottom: 16px;\n"])));
|
|
23
|
+
var SegmentedButtonContainer = exports.SegmentedButtonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 10px 0 0 10px;\n"])));
|
|
24
|
+
var TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n background: #fff;\n font-family: \"Poppins\", sans-serif;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
|
|
25
|
+
var TooltipLabel = exports.TooltipLabel = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n margin: 0 6px 0 0;\n"])));
|
|
26
|
+
var TooltipValue = exports.TooltipValue = _styledComponents.default.p(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n width: fit-content;\n margin: 0;\n"])));
|
|
27
|
+
var TooltipTitle = exports.TooltipTitle = _styledComponents.default.p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n margin: 0;\n"])));
|
|
28
|
+
var ToolTipLabelAndValueContainer = exports.ToolTipLabelAndValueContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
@@ -24,5 +24,5 @@ var Title = exports.Title = _styledComponents.default.h4(_templateObject5 || (_t
|
|
|
24
24
|
var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
|
|
25
25
|
var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n"])));
|
|
26
26
|
var GrowthPercent = exports.GrowthPercent = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 11px;\n }\n"])));
|
|
27
|
-
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n
|
|
27
|
+
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
|
|
28
28
|
var LegendFormatedValueContainer = exports.LegendFormatedValueContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.875rem;\n"])));
|
|
@@ -24,7 +24,7 @@ var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_
|
|
|
24
24
|
var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n\n"])));
|
|
25
25
|
var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 1.2rem;\n align-items: flex-end;\n"])));
|
|
26
26
|
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.22222rem;\n"])));
|
|
27
|
-
var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size:
|
|
27
|
+
var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0; \n"])));
|
|
28
28
|
var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
|
|
29
29
|
var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\n width: 100%;\n height: 50%;\n"])));
|
|
30
30
|
var BottomDetailsRowContainer = exports.BottomDetailsRowContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center;\n"])));
|
|
@@ -21,8 +21,8 @@ var Title = exports.Title = _styledComponents.default.div(_templateObject4 || (_
|
|
|
21
21
|
var 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"])));
|
|
22
22
|
var CurrencySign = exports.CurrencySign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n font-weight: 500;\n font-size: 1rem;\n"])));
|
|
23
23
|
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.22222rem;\n"])));
|
|
24
|
-
var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size:
|
|
24
|
+
var 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"])));
|
|
25
25
|
var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.7em;\n width: 5.35em;\n"])));
|
|
26
|
-
var BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n
|
|
26
|
+
var BarchartContainer = exports.BarchartContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: 14em;\n"])));
|
|
27
27
|
var BottomDetailsRowContainer = exports.BottomDetailsRowContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: flex-start;\n justify-content: center;\n text-align: center; \n //max-height: 20px;\n"])));
|
|
28
28
|
var BottomDetailsRowTitle = exports.BottomDetailsRowTitle = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center; \n margin-top: 4px;\n width: 14em;\n font-weight: 400;\n font-size: 14px;\n max-height: 20px;\n"])));
|
|
@@ -25,7 +25,7 @@ var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.
|
|
|
25
25
|
var Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n margin: 0;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
|
|
26
26
|
var CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 16px;\n"])));
|
|
27
27
|
var CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (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"])));
|
|
28
|
-
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 24px;\n }\n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
|
|
28
|
+
var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 40px;\n @media (max-width: 1536px) {\n font-size: 24px;\n } \n @media (max-width: 1366px) {\n font-size: 20px;\n }\n"])));
|
|
29
29
|
var DoughnutChartAndLegendContainer = exports.DoughnutChartAndLegendContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n margin-top: auto;\n padding: 0 20px;\n"])));
|
|
30
30
|
var DoughnutChart = exports.DoughnutChart = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 40%;\n flex-basis: 40%;\n min-height: 6rem;\n"])));
|
|
31
31
|
var LegendContainer = exports.LegendContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 1;\n padding-left: 10px;\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n"])));
|