sag_components 1.0.1029 → 1.0.1031

package/dist/stories/CampaignTool/PopupContent.stories.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopupContent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PopupContent = _interopRequireDefault(require("../components/CampaignTool/PopupContent"));
+const FieldsDataRow1 = [{
+  name: "FundationSource",
+  label: "Fundation Source",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Source",
+  dropdownOptions: [{
+    value: 1,
+    label: "Source 1"
+  }, {
+    value: 2,
+    label: "Source 2"
+  }, {
+    value: 3,
+    label: "Source 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Category",
+  label: "Category",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category 1"
+  }, {
+    value: 2,
+    label: "Category 2"
+  }, {
+    value: 3,
+    label: "Category 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Supplier",
+  label: "Supplier",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Supplier",
+  dropdownOptions: [{
+    value: 1,
+    label: "Supplier 1"
+  }, {
+    value: 2,
+    label: "Supplier 2"
+  }, {
+    value: 3,
+    label: "Supplier 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "ContactName",
+  label: "Contact Name",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Name",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow2 = [{
+  name: "BrandName",
+  label: "Brand Name",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Brand",
+  dropdownOptions: [{
+    value: 1,
+    label: "Brand 1"
+  }, {
+    value: 2,
+    label: "Brand 2"
+  }, {
+    value: 3,
+    label: "Brand 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "Budget",
+  label: "Budget",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Budget",
+  dropdownOptions: [{
+    value: 1,
+    label: "Budget 1"
+  }, {
+    value: 2,
+    label: "Budget 2"
+  }, {
+    value: 3,
+    label: "Budget 3"
+  }],
+  dropdownDefaultValue: {
+    value: 1,
+    label: "Budget 1"
+  }
+}, {
+  name: "CategoryManager",
+  label: "Category Manager",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Category Manager",
+  dropdownOptions: [{
+    value: 1,
+    label: "Category Manager 1"
+  }, {
+    value: 2,
+    label: "Category Manager 2"
+  }, {
+    value: 3,
+    label: "Category Manager 3"
+  }],
+  dropdownDefaultValue: {
+    value: 3,
+    label: "Category Manager 3"
+  }
+}, {
+  name: "ContactEmail",
+  label: "Contact Email",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Email",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const FieldsDataRow3 = [{
+  name: "Broker",
+  label: "Broker",
+  disabled: false,
+  required: false,
+  inputType: "dropdown",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Select Broker",
+  dropdownOptions: [{
+    value: 1,
+    label: "Broker 1"
+  }, {
+    value: 2,
+    label: "Broker 2"
+  }, {
+    value: 3,
+    label: "Broker 3"
+  }],
+  dropdownDefaultValue: null
+}, {
+  name: "SupplierOfferID",
+  label: "Supplier Offer ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Supplier Offer ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "VendorID",
+  label: "Vendor ID",
+  disabled: false,
+  required: false,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Vendor ID",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}, {
+  name: "ContactPhone",
+  label: "Contact Phone",
+  disabled: false,
+  required: true,
+  inputType: "textbox",
+  //aviliable values: textbox | dropdown | checkBox | datepicker
+  showInfo: true,
+  infoText: "This is one of the Popup content's fields",
+  placeHolder: "Enter Contact Phone",
+  dropdownOptions: null,
+  dropdownDefaultValue: null
+}];
+const RowsData1 = [{
+  fieldsArray: FieldsDataRow1
+}, {
+  fieldsArray: FieldsDataRow2
+}, {
+  fieldsArray: FieldsDataRow3
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/PopupContent",
+  component: _PopupContent.default,
+  tags: ["autodocs"],
+  argTypes: {
+    FieldsData: {
+      name: "FieldsData",
+      control: {
+        type: "object"
+      },
+      description: " object: to fill kpi columns and buttons "
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the control (in px / %)"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the control (in px / % )"
+    },
+    onClick: {
+      action: "onClick",
+      description: "onClick event - returns an object of check box {true/false} "
+    },
+    onChange: {
+      action: "onChange",
+      description: "onChange event  "
+    },
+    borderColor: {
+      name: "borderColor",
+      description: "Sets the border color",
+      control: {
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"]
+      }
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_PopupContent.default, args);
+const ExamplePopupContent = exports.ExamplePopupContent = Template.bind({});
+ExamplePopupContent.args = {
+  rowsData: RowsData1,
+  borderColor: "#066768",
+  width: "100%",
+  height: "100%"
+};

package/dist/stories/components/BannerEventBoxTest.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _BannerEventBoxTest = require("./BannerEventBoxTest.style");
+var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
+const BannerEventBoxTest = props => {
+  const {
+    width,
+    height
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_BannerEventBoxTest.MainContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Stop&Shop"
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Hannaford",
+    data: [{
+      name: 'asdf',
+      items: ['coca', 'haim']
+    }, {
+      name: 'Brazxcvnds',
+      items: ['coca', 'bola', 'spring', 'cola']
+    }, {
+      name: 'xcvb Lines',
+      items: ['spring']
+    }]
+  }), /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
+    banner: "Giant Food"
+  }));
+};
+BannerEventBoxTest.defaultProps = {
+  width: 'auto',
+  height: 'auto'
+};
+var _default = exports.default = BannerEventBoxTest;

package/dist/stories/components/BannerEventBoxTest.style.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MainContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    display: flex;\n    gap: 20px;\n"])), props => props.width, props => props.height);

package/dist/stories/components/FilterButton.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FilterButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButton = require("./FilterButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+const FilterButton = props => {
+  const {
+    color,
+    activeColor,
+    height,
+    buttonText,
+    iconWidth,
+    iconHeight,
+    disabled,
+    openState,
+    onButtonClick
+  } = props;
+  const [activeState, setActiveState] = (0, _react.useState)(openState);
+  const onClickHandler = event => {
+    onButtonClick(event);
+    setActiveState(!activeState);
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
+    height: height,
+    color: activeState ? activeColor : color,
+    disabled: disabled,
+    onClick: event => {
+      onClickHandler(event);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+    width: iconWidth,
+    height: iconHeight,
+    color: activeState ? activeColor : color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
+};
+exports.FilterButton = FilterButton;
+var _default = exports.default = FilterButton;
+FilterButton.defaultProps = {
+  buttonText: 'Filter',
+  height: '40px',
+  color: '#212121',
+  activeColor: '#229E38',
+  iconHeight: 12,
+  iconWidth: 12,
+  openState: false,
+  disabled: false,
+  onButtonClick: () => {}
+};

package/dist/stories/components/FilterButton.style.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpanText = exports.FilterButtonWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n  padding: 8px 18px;\n  color: ", ";\n  border-radius: 8px;\n  border: 1px solid ", ";\n  background: transparent;\n  transition: box-shadow 0.3s ease;\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.height, props => props.color, props => props.color);
+const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));

package/dist/stories/components/NewInput.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _NewInput = require("./NewInput.style");
+const NewInput = props => {
+  const {
+    labelText,
+    inputType,
+    onTyping
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+    onTyping(e);
+  };
+  return /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldContainer, null, /*#__PURE__*/_react.default.createElement(_NewInput.TextFieldInput, {
+    type: inputType,
+    value: inputValue,
+    onChange: handleInputChange
+    // placeholder={labelText}
+  }), /*#__PURE__*/_react.default.createElement(_NewInput.Label, null, labelText));
+};
+var _default = exports.default = NewInput;
+NewInput.defaultProps = {
+  labelText: '',
+  inputType: 'text',
+  onTyping: () => {}
+};

package/dist/stories/components/NewInput.style.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextFieldInput = exports.TextFieldContainer = exports.Label = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+const TextFieldContainer = exports.TextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+const TextFieldInput = exports.TextFieldInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  font-size: 16px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n\n  &:focus + label,\n  &:not(:placeholder-shown) + label {\n    top: -8px;\n    font-size: 12px;\n    color: #007bff;\n    background-color: white;\n  }\n"])));
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 12px;\n  left: 10px;\n  transition: all 0.3s ease;\n  pointer-events: none;\n  font-size: 16px;\n  color: #555;\n"])));

package/dist/stories/components/ReportTable.js

@@ -42,33 +42,28 @@ const ReportTable = props => {
     width,
     height,
     sortKey,
-    className
+    className,
+    limit,
+    page,
+    totalPages,
+    totalTableResults,
+    onPageChange,
+    isLoading
   } = props;
   const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
   const [AllRowsChecked, setAllRowsChecked] = (0, _react.useState)(false);
   const [activeSortColumn, setActiveSortColumn] = (0, _react.useState)();
-  const [currentPage, setCurrentPage] = (0, _react.useState)(1);
-  const rowsPerPage = 10;
+  const [currentPage, setCurrentPage] = (0, _react.useState)(page);
   const getPaginatedRows = () => {
-    const startIndex = (currentPage - 1) * rowsPerPage;
-    const endIndex = startIndex + rowsPerPage;
-    return FormattedTableData.rowsValues.slice(startIndex, endIndex);
+    return FormattedTableData.rowsValues;
   };
-  const totalPages = Math.ceil(FormattedTableData.rowsValues.length / rowsPerPage);
-  const [isLoading, setIsLoading] = (0, _react.useState)(false);
   const handlePageChange = newPage => {
-    if (newPage > 0 && newPage <= totalPages) {
-      setIsLoading(true);
-      setTimeout(() => {
-        setCurrentPage(newPage);
-        setIsLoading(false);
-      }, 500);
-    }
+    onPageChange(newPage);
   };
   const getRecordRangeDisplay = () => {
-    const startRecord = (currentPage - 1) * rowsPerPage + 1;
-    const endRecord = Math.min(currentPage * rowsPerPage, FormattedTableData.rowsValues.length);
-    const totalRecords = FormattedTableData.rowsValues.length;
+    const startRecord = (page - 1) * limit + 1;
+    const endRecord = page * limit;
+    const totalRecords = totalTableResults;
     return `Showing ${startRecord}-${endRecord} of ${totalRecords}`;
   };
   (0, _react.useEffect)(() => {
@@ -297,7 +292,6 @@ const ReportTable = props => {
     disabled: currentPage === 1
   })), (() => {
     const pages = [];
-    const maxVisiblePages = 7;
     const range = 2;
     pages.push( /*#__PURE__*/_react.default.createElement("span", {
       key: 1,
@@ -417,5 +411,10 @@ ReportTable.defaultProps = {
   onSelectRowClick: () => {},
   onCheckRowClick: () => {},
   onAllRowsCheckBoxClick: () => {},
-  useCheckBoxes: false
+  useCheckBoxes: false,
+  limit: 10,
+  page: 1,
+  totalPages: 25,
+  totalTableResults: 250,
+  isLoading: false
 };

package/dist/stories/components/TotalHorizontalCharts.js

@@ -26,6 +26,7 @@ const TotalHorizontalCharts = props => {
     currencySign,
     currencyType,
     chartsData,
+    showScrollerBarsCount,
     labelFontSize,
     labelLimitedLetters,
     width,
@@ -45,7 +46,8 @@ const TotalHorizontalCharts = props => {
   const barBackgrounds = chartsData.map(bg => bg.color);
   const topHeader = (0, _react.useRef)();
   const wrapper = (0, _react.useRef)();
-  const [chartHeight, setChartHeight] = (0, _react.useState)('100%');
+  // const [chartHeight, setChartHeight] = useState('100%');
+
   const calcHeight = () => {
     if (wrapper.current && topHeader.current) {
       const availableHeight = Math.max(wrapper.current.clientHeight - topHeader.current.clientHeight, 0);
@@ -53,16 +55,20 @@ const TotalHorizontalCharts = props => {
     }
     return 100;
   };
-  const updateChartHeight = () => {
-    setChartHeight(`${calcHeight()}%`);
-  };
-  (0, _react.useEffect)(() => {
-    updateChartHeight();
-    window.addEventListener('resize', updateChartHeight);
-    return () => {
-      window.removeEventListener('resize', updateChartHeight);
-    };
-  }, []);
+
+  // const updateChartHeight = () => {
+  //   setChartHeight(`${calcHeight()}%`);
+  // };
+
+  // useEffect(() => {
+  //   updateChartHeight();
+  //   window.addEventListener('resize', updateChartHeight);
+
+  //   return () => {
+  //     window.removeEventListener('resize', updateChartHeight);
+  //   };
+  // }, []);
+
   const [showLegendTooltip, setShowLegendTooltip] = (0, _react.useState)(false);
   const [tooltipText, setTooltipText] = (0, _react.useState)({
     content: '',
@@ -146,6 +152,7 @@ const TotalHorizontalCharts = props => {
     height: height,
     width: width,
     textColor: textColor,
+    scroller: chartsData.length > showScrollerBarsCount ? 'auto' : 'hidden',
     className: className
   }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hideTitle || !hideTotalValue ? /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CardHeader, {
     ref: topHeader,
@@ -154,9 +161,7 @@ const TotalHorizontalCharts = props => {
     className: "TotalValue"
   }, currencySign && /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.CurrencySign, {
     className: "CurrencySign"
-  }, (0, _CommonFunctions.getCurrencySign)(currencyType, value)), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '') : '') : '', /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
-    height: chartHeight
-  }, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
+  }, (0, _CommonFunctions.getCurrencySign)(currencyType, value)), dotCut ? (0, _CommonFunctions.getFormattedValue)(value && Math.abs(value) > 0 && value % 1 !== 0 ? value === null || value === void 0 ? void 0 : value.toFixed(2) : value) : (0, _CommonFunctions.getNumberWithCommas)(value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(value) : '') : '') : '', /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, null, /*#__PURE__*/_react.default.createElement(_recharts.ComposedChart, {
     layout: "vertical",
     data: chartsData,
     margin: {
@@ -216,6 +221,7 @@ TotalHorizontalCharts.defaultProps = {
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],
+  showScrollerBarsCount: 7,
   showPercentAsideValue: false,
   labelFontSize: 10,
   labelLimitedLetters: 12,

package/dist/stories/components/TotalHorizontalCharts.style.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TotalValue = exports.Title = exports.CurrencySign = exports.ControlsContainer = exports.CardHeader = void 0;
+exports.TotalValue = exports.Title = exports.CurrencySign = exports.ControlsContainer = exports.ChartWrapper = exports.CardHeader = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
@@ -13,6 +13,42 @@ const ControlsContainer = exports.ControlsContainer = _styledComponents.default.
   color: ${props => props.textColor};
   width: ${props => props.width};
   height: ${props => props.height};
+  /* display: flex;
+  flex-direction: column;
+  overflow: hidden; */
+  overflow-y: ${props => props.scroller};
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div`
+  overflow-y: auto;
+  height: 100%;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
 `;
 const CardHeader = exports.CardHeader = _styledComponents.default.div`
   padding: 16px;