sag_components 1.0.362 → 1.0.364

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 (6) hide show
  1. package/dist/stories/components/ReportTable.js +36 -0
  2. package/dist/stories/components/ReportTable.style.js +21 -0
  3. package/dist/stories/components/TotalBenchmarkAreachart.js +3 -3
  4. package/dist/stories/components/TotalBenchmarkAreachart.style.js +11 -11
  5. package/dist/stories/components/icons/InfoIcon.js +3 -1
  6. package/package.json +1 -1
package/dist/stories/components/ReportTable.js ADDED
@@ -0,0 +1,36 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.default = exports.ReportTable = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _ReportTable = require("./ReportTable.style");
10
+ var _InfoIcon = require("./icons/InfoIcon");
11
+ var ReportTable = exports.ReportTable = function ReportTable(props) {
12
+ var tableData = props.tableData,
13
+ maxColumnsNumber = props.maxColumnsNumber;
14
+ var columnsNumber = tableData.columnsHeadings.length;
15
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
16
+ maxColumnsNumber: maxColumnsNumber,
17
+ columnsNumber: columnsNumber
18
+ }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
19
+ tableWidthSize: 100 / maxColumnsNumber * columnsNumber
20
+ }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, tableData.columnsHeadings.map(function (headline, index) {
21
+ return /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
22
+ key: index
23
+ }, headline.label);
24
+ }))), /*#__PURE__*/_react.default.createElement("tbody", null, tableData.rowsValues.map(function (data, index) {
25
+ return /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
26
+ key: index
27
+ }, Object.values(data).map(function (value, dataIndex) {
28
+ return /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
29
+ key: dataIndex
30
+ }, value);
31
+ }));
32
+ })))), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
33
+ color: "#1B30AA"
34
+ }), /*#__PURE__*/_react.default.createElement(_ReportTable.InfoText, null, "Download table to get the full data")));
35
+ };
36
+ var _default = exports.default = ReportTable;
package/dist/stories/components/ReportTable.style.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.Tr = exports.Th = exports.TestDiv = exports.Td = exports.Table = exports.InfoText = exports.InfoBlock = void 0;
8
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
11
+ var TestDiv = exports.TestDiv = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n white-space: nowrap;\n overflow-x: ", ";\n"])), function (props) {
12
+ return props.columnsNumber > props.maxColumnsNumber ? "auto" : "hidden";
13
+ });
14
+ var Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width:", ";\n table-layout: fixed;\n th,\n td {\n text-align: left;\n }\n position: relative;\n background-color: white;\n"])), function (props) {
15
+ return "".concat(props.tableWidthSize, "%");
16
+ });
17
+ var Th = exports.Th = _styledComponents.default.th(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n font-size: 14px;\n font-family: \"poppins\";\n color: #212121;\n"])));
18
+ var Td = exports.Td = _styledComponents.default.td(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n font-family: \"poppins\";\n padding-top: 20px;\n padding-bottom: 20px;\n"])));
19
+ var Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n &:last-of-type {\n ::after {\n content: \"\";\n position: absolute;\n pointer-events: none;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(transparent 50%, white);\n z-index: 2;\n }\n }\n"])));
20
+ var InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 14px;\n font-family: \"poppins\";\n color: #212121;\n padding-top: 20px;\n padding-bottom: 20px;\n"])));
21
+ var InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n background-color: white;\n"])));
package/dist/stories/components/TotalBenchmarkAreachart.js CHANGED
@@ -162,9 +162,9 @@ var TotalBenchmarkAreachart = exports.TotalBenchmarkAreachart = function TotalBe
162
162
  ref: anotherRef,
163
163
  id: "AreaChartContainer"
164
164
  }, /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
165
- id: "ResponsiveContainer",
166
- width: "100%",
167
- height: "100%"
165
+ id: "ResponsiveContainer"
166
+ // width="100%"
167
+ // height="100%"
168
168
  }, /*#__PURE__*/_react.default.createElement(_recharts.AreaChart, {
169
169
  id: "SourceAreaChart",
170
170
  data: areaChartData,
package/dist/stories/components/TotalBenchmarkAreachart.style.js CHANGED
@@ -8,24 +8,24 @@ exports.ValueAndBenchmarkContainer = exports.TooltipTitle = exports.TooltipLabel
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
11
- var 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"])), function (props) {
11
+ var ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 12px;\n"])), function (props) {
12
12
  return props.textColor;
13
13
  }, function (props) {
14
14
  return props.width;
15
15
  }, function (props) {
16
16
  return props.height;
17
17
  });
18
- var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])));
19
- var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (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"])));
20
- var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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"])));
21
- var Controls = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background: #ffffff;\n border-radius: 12px;\n"])));
18
+ var TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n background: #ffffff;\n border-radius: 5px;\n padding: 8px 12px;\n display: grid;\n"])));
19
+ var TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
20
+ var TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
21
+ var Controls = exports.Controls = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n display: flex;\n gap: 10px;\n flex-direction: column;\n /* justify-content: space-between; */\n background: #ffffff;\n border-radius: 12px;\n"])));
22
22
  var TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 1rem;\n"])));
23
23
  var Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 1rem;\n"])));
24
- var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n"])));
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
- 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: 16px;\n margin: 0; \n"])));
28
- var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\n"])));
29
- var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n"])));
24
+ var AreaChartContainer = exports.AreaChartContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n"])));
25
+ var ValueAndBenchmarkContainer = exports.ValueAndBenchmarkContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-flex;\n align-items: baseline;\n"])));
26
+ var DetailsRowArrowContainer = exports.DetailsRowArrowContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 1.2rem;\n align-items: flex-end;\n"])));
27
+ var FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.1rem;\n font-weight: 500;\n font-size: 2.22222rem;\n"])));
28
+ var FormattedValueNoDataMessage = exports.FormattedValueNoDataMessage = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: 0.3rem;\n font-weight: 700;\n font-size: 16px;\n margin: 0; \n"])));
29
+ var BenchmarkContainer = exports.BenchmarkContainer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-left: 1.5rem;\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"])));
31
31
  var BottomDetailsRowTitle = exports.BottomDetailsRowTitle = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 400;\n font-size: 0.77778rem;\n"])));
package/dist/stories/components/icons/InfoIcon.js CHANGED
@@ -8,6 +8,8 @@ exports.default = exports.InfoIcon = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var InfoIcon = exports.InfoIcon = function InfoIcon(_ref) {
10
10
  var clicked = _ref.clicked,
11
+ _ref$color = _ref.color,
12
+ color = _ref$color === void 0 ? "#757575" : _ref$color,
11
13
  _ref$width = _ref.width,
12
14
  width = _ref$width === void 0 ? "18" : _ref$width,
13
15
  _ref$height = _ref.height,
@@ -20,7 +22,7 @@ var InfoIcon = exports.InfoIcon = function InfoIcon(_ref) {
20
22
  xmlns: "http://www.w3.org/2000/svg"
21
23
  }, /*#__PURE__*/_react.default.createElement("path", {
22
24
  d: "M8 0C12.4062 0 16 3.59375 16 8C16 12.4375 12.4062 16 8 16C3.5625 16 0 12.4375 0 8C0 3.59375 3.5625 0 8 0ZM8 15C11.8438 15 15 11.875 15 8C15 4.15625 11.8438 1 8 1C4.125 1 1 4.15625 1 8C1 11.875 4.125 15 8 15ZM8 5.75C7.5625 5.75 7.25 5.4375 7.25 5C7.25 4.59375 7.5625 4.25 8 4.25C8.40625 4.25 8.75 4.59375 8.75 5C8.75 5.4375 8.40625 5.75 8 5.75ZM9.5 11C9.75 11 10 11.25 10 11.5C10 11.7812 9.75 12 9.5 12H6.5C6.21875 12 6 11.7812 6 11.5C6 11.25 6.21875 11 6.5 11H7.5V8H7C6.71875 8 6.5 7.78125 6.5 7.5C6.5 7.25 6.71875 7 7 7H8C8.25 7 8.5 7.25 8.5 7.5V11H9.5Z",
23
- fill: "#757575"
25
+ fill: color
24
26
  }));
25
27
  };
26
28
  var _default = exports.default = InfoIcon;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.362",
3
+ "version": "1.0.364",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {