sag_components 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -51,7 +51,8 @@
     "@mui/styled-engine-sc": "^5.12.0",
     "classnames": "^2.3.2",
     "hoopy": "^0.1.4",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "recharts": "^2.6.2"
   },
   "browserslist": {
     "production": [

package/src/App.css

@@ -1,6 +1,6 @@
 .App {  
-   display: block;    
+   display: flex;    
    width: 600px;   
-  padding-top: 5%;
-  padding-left: 5%;
+  padding-top: 10%;
+  padding-left: 10%;
 }

package/src/App.js

@@ -5,6 +5,8 @@ import { useState } from "react";
 import Button from "./stories/components/Button";
 import Dropdown from "./stories/components/Dropdown";
 import SegmentedButton from "./stories/components/SegmentedButton";
+import TotalDoughnutChart from "./stories/components/TotalDoughnutChart";
+import OneColumnContainer from "./stories/components/OneColumnContainer";
 
 const onChangehandler = (event, newValue) => {
   console.log("Dropdown onChange event returned:");
@@ -29,7 +31,7 @@ function App() {
     { id: "9", label: "South Eastern Grocers" },
   ];
 
-  const segmentsArr1=[
+  const segmentsArr1 = [
     {
       label: "Complete",
       value: "complete",
@@ -44,7 +46,7 @@ function App() {
     },
   ];
 
-  const segmentsArr2=[
+  const segmentsArr2 = [
     {
       label: "First",
       value: "first",
@@ -57,13 +59,44 @@ function App() {
       label: "Third",
       value: "third",
     },
-  ]
+  ];
 
   const [selectedValue1, setSelectedValue1] = useState("complete");
   const [selectedValue2, setSelectedValue2] = useState("complete");
 
   return (
     <div className="App">
+      <OneColumnContainer
+        height="250px"
+        infoText="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
+        width="250px"
+      />
+
+      <TotalDoughnutChart
+        currency
+        currencyType="USD"
+        dotCut
+        height={374}
+        legendData={[
+          {
+            color: "#85A1D2",
+            currency: "USD",
+            name: "Package Cost",
+            value: 30000,
+          },
+          {
+            color: "#9AE6FF",
+            currency: "USD",
+            name: "Redemption Cost",
+            value: 6500,
+          },
+        ]}
+        textColor="#212121"
+        title="Total Cost"
+        value={36500}
+        width={336}
+      />
+      {/* 
       <Dropdown
         width="300"
         size="small"
@@ -84,24 +117,33 @@ function App() {
         onChange={onChangehandler}
         onInputChange={onInputChangeHandler}
       />
-
-      <SegmentedButton
-        name="group1"
-        onClick={(val) => setSelectedValue1(val)}
-        segments={segmentsArr1}
-      />
-      <p className="selected-item">Selected: {selectedValue1}</p>
       <SegmentedButton
-        name="group2"
-        onClick={(val) => setSelectedValue2(val)}
-        defaultIndex={1}
-        segments={segmentsArr2}
-      />
-      <p className="selected-item">Selected: {selectedValue2}</p>
-
+        backgroundColor="#ECF0FF"
+        controlRadius={8}
+        defaultIndex={0}
+        fontSize={14}
+        name="segmentedFilter"
+        onClick={() => {}}
+        options={[
+          {
+            value: "Total",
+          },
+          {
+            value: "Ecommerce",
+          },
+          {
+            value: "In Store",
+          },
+        ]}
+        segmentHeigth={40}
+        segmentRadius={8}
+        segmentWidth={120}
+        selectedSegmentColor="#fcfcfc"
+        selectedTextColor="#000000"
+        unselectedTextColor="#000000"
+      /> */}
     </div>
   );
 }
 
-
 export default App;

package/src/stories/TotalDoughnutChart.stories.js

@@ -0,0 +1,112 @@
+import React from "react";
+import { TotalDoughnutChart } from "./components/TotalDoughnutChart";
+
+const arrLegendData = [
+  { name: "Package Cost", value: 30000, color: "#85A1D2"},
+  { name: "Redemption Cost", value: 6500, color: "#9AE6FF"},  
+];
+
+const arrLegendDat3rows = [
+  { name: "Package Cost", value: 30000, color: "#85A1D2"},
+  { name: "Redemption Cost", value: 6500,color: "#9AE6FF"},
+  { name: "Others", value: 20000, color: "#FD5959"},
+  // { name: "My test 2", value: 35000, color: "#79DB95"},
+];
+
+
+export default {
+  title: "SAG/TotalDoughnutChart",
+  component: TotalDoughnutChart,
+  tags: ["autodocs"],
+
+  argTypes: {
+   
+    title: {
+      name: "title",
+      control: { type: "text" },
+      description: "title on top of the component",
+    },
+
+    value: {
+      name: "value",
+      control: { type: "number", min: 0, max: 100000000000000 },
+      description: "value (total) ",
+    },
+
+    dotCut: {
+      name: "dotCut",
+      control: { type: "boolean" },
+      description: "true/false - format total value with dot cut",
+    },
+
+    currency: {
+      name: "currency",
+      control: { type: "boolean" },
+      description: "true/false - show/hide currency before total value",
+    },
+
+    
+    currencyType: {
+        name: "currencyType",
+        options: ["USD", "EUR", "ILS", "GBP",  "JPY"],
+        control: { type: "select" },
+      },
+  
+
+    width: {
+      name: "width",
+      control: { type: "number", min: 0, max: 600 },
+      description: "width of the control (in px)",
+    },
+
+    height: {
+      name: "height",
+      control: { type: "number", min: 0, max: 600 },
+      description: "height of the control (in px)",
+    },
+
+    
+    textColor: {
+      name: "textColor",
+      description: "Sets the text color",
+      control: {              
+        type: "color",
+        presetColors: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],           
+      },
+    },
+
+    legendData: {
+      description:
+        "array [] of objects: {displayName: string, value:number} to fill the pie chart ",
+    },
+  },
+};
+
+const Template = (args) => <TotalDoughnutChart {...args} />;
+
+export const TotalCost = Template.bind({});
+TotalCost.args = {
+    title: "Total Cost",
+    value: 36500,
+    dotCut: true,
+    currency: true,
+    currencyType: "USD",
+    legendData: arrLegendData,
+    width: 336,
+    height: 374,
+    textColor: "#212121",
+};
+
+
+export const TotalCost3rows = Template.bind({});
+TotalCost3rows.args = {
+    title: "Total Cost",
+    value: 56500,
+    dotCut: true,
+    currency: true,
+    currencyType: "USD",
+    legendData: arrLegendDat3rows,
+    width: 336,
+    height: 374,
+    textColor: "#212121",
+};

package/src/stories/TotalDoughnutChart.style.js

@@ -0,0 +1,135 @@
+import styled from "styled-components";
+
+export const ControlsContainer = styled.div`
+  display: flex;
+  position: relative;
+  margin: 0px 0 0px;
+  font-family: "Lato", sans-serif;
+  font-style: normal;
+  color: ${(props) => {
+    return props.textColor;
+  }};
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  //border: 1px solid red;
+`;
+
+export const Controls = styled.div`
+  position: relative;
+  border-radius: 12px;
+  width: ${(props) => {
+    return props.width.toString().concat("", "px");
+  }};
+  height: ${(props) => {
+    return props.height.toString().concat("", "px");
+  }};
+  background: #ffffff;
+  //border: 1px solid blue;
+`;
+
+export const Title = styled.div`
+  position: absolute;
+  width: 150px;
+  height: 22px;
+  left: 40px;
+  top: 81px;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  //border: 1px solid red;
+`;
+
+export const CurrencySign = styled.div`
+  position: absolute;
+  width: 11px;
+  height: 22px;
+  left: 42px;
+  top: 135px;
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 22px;
+  //border: 1px solid red;
+`;
+
+export const FormattedValue = styled.div`
+  position: absolute;
+  width: 200px;
+  height: 48px;
+  left: 57px;
+  top: 115px;
+  font-weight: 500;
+  font-size: 40px;
+  line-height: 48px;
+  //border: 1px solid red;
+`;
+
+export const DoughnutChart = styled.div`
+  position: absolute;
+  width: 95px;
+  height: 95px;
+  left: 40px;
+  top: 221px;
+  //border: 1px solid red;
+`;
+
+export const LegendControls = styled.div`
+  position: relative;
+  border-radius: 12px;
+  width: 180px;
+  height: 47px;
+  left: 150px;
+  top: 221px;  
+  background: #ffffff;
+  //border: 1px solid blue;
+`;
+
+export const LegendColorRectangle = styled.div`
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 14px;
+  top: 14px;
+  background: ${(props) => props.color};
+`;
+
+export const LegendTitle = styled.div`
+  position: absolute;
+  width: 120px;
+  height: 18px;
+  left: 40px;
+  top: 1px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 17px;
+  //border: 1px solid red;
+`;
+
+export const LegendCurrencySign = styled.div`
+  position: absolute;
+  width: 11px;
+  height: 19px;
+  left: 42px;
+  top: 21px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  //border: 1px solid red;
+`;
+
+export const LegendFormattedValue = styled.div`
+  position: absolute;
+  width: 100px;
+  height: 19px;
+  left: 52px;
+  top: 21px;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  //border: 1px solid red;
+`;

package/src/stories/components/OneColumnContainer.jsx

@@ -9,9 +9,6 @@ import classNames from "classnames";
  */
 export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggingStyle,droppedStyle,refId,width,height,infoText,...props }) => {
   const [clicked, setClicked] = useState(false);
-  const { over,isOver, setNodeRef } = useDroppable({
-    refId,
-  });
   const onInfoClick = ()=>{
     setClicked(!clicked)
   }
@@ -22,11 +19,14 @@ export const OneColumnContainer = ({ children,nodeRef,itemClass,overStyle,draggi
       itemClass,
       overStyle,
       draggingStyle,
-      droppedStyle
+      children && droppedStyle
     )} width={width} height={height}>
         <div ref={nodeRef} style={{
+          
       width: "100%",
-      height: "100%"
+      height: "100%",
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)"
     }}>
       {children}
       <InfoTextContainer clicked={clicked} width={width} height={height}>

package/src/stories/components/TotalDoughnutChart.jsx

@@ -0,0 +1,135 @@
+import React from "react";
+
+import { PieChart as SourcePieChart, Pie, Cell, Tooltip } from "recharts";
+
+import {
+  ControlsContainer,
+  Title,
+  CurrencySign,
+  FormattedValue,
+  Controls,
+  DoughnutChart,
+  LegendControls,
+  LegendColorRectangle,
+  LegendTitle,
+  LegendCurrencySign,
+  LegendFormattedValue,
+} from "../TotalDoughnutChart.style.js";
+
+/*TotalDoughnutChart*/
+export const TotalDoughnutChart = ({
+  title = "Total Cost",
+  value = 0,
+  dotCut = true,
+  currency = true,
+  currencyType = "USD",
+  legendData,
+  width = 336,
+  height = 374,
+  textColor = "black",
+  ...props
+}) => {
+  const getCurrencySign = (currencyTypeToConvert) => {
+    if (!currencyTypeToConvert) return "";
+    let currencySign = "";
+    const currencyFormatter = new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: currencyTypeToConvert,
+    });
+    currencySign = currencyFormatter.format(value).substring(0, 1);
+    return currencySign;
+  };
+
+  const getFormattedUnits = (num) => {
+    if (Math.abs(num) >= 1000000000) {
+      return "B";
+    }
+    if (Math.abs(num) >= 1000000) {
+      return "M";
+    }
+    if (Math.abs(num) >= 1000) {
+      return "K";
+    }
+    return "";
+  };
+
+  const getFormattedValue = (num) => {
+    if (Math.abs(num) >= 1000000000) {
+      return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
+    }
+    if (Math.abs(num) >= 1000000) {
+      return (num / 1000000).toFixed(1).replace(/\.0$/, "");
+    }
+    if (Math.abs(num) >= 1000) {
+      return (num / 1000).toFixed(1).replace(/\.0$/, "");
+    }
+    return num;
+  };
+
+  const getNumberWithCommas = (x) => {
+    x = x.toString();
+    var pattern = /(-?\d+)(\d{3})/;
+    while (pattern.test(x)) x = x.replace(pattern, "$1,$2");
+    return x;
+  };
+
+  const onPieEnterHandler = () => {};
+
+  return (
+    <ControlsContainer height={height} width={width} textColor={textColor}>
+      <Controls height={height} width={width}>
+        <Title>{title}</Title>
+
+        <CurrencySign>
+          {`${currency ? getCurrencySign(currencyType) : ""}`}
+        </CurrencySign>
+        <FormattedValue>
+          {`${dotCut ? getFormattedValue(value) : getNumberWithCommas(value)}`}
+          {`${dotCut ? getFormattedUnits(value) : ""}`}
+        </FormattedValue>
+
+        {legendData.map((row, index) => (
+          <LegendControls>
+            <LegendColorRectangle color={row.color}></LegendColorRectangle>
+            <LegendTitle>{row.name}</LegendTitle>
+            <LegendCurrencySign>
+              {`${currency ? getCurrencySign(currencyType) : ""}`}
+            </LegendCurrencySign>
+            <LegendFormattedValue>
+              {`${
+                dotCut
+                  ? getFormattedValue(row.value)
+                  : getNumberWithCommas(row.value)
+              }`}
+              {`${dotCut ? getFormattedUnits(row.value) : ""}`}
+            </LegendFormattedValue>
+          </LegendControls>
+        ))}
+
+        <DoughnutChart>
+          <SourcePieChart
+            width={93}
+            height={93}
+            onMouseEnter={onPieEnterHandler}
+          >
+            <Pie
+              data={legendData}
+              innerRadius={32}
+              outerRadius={47}
+              fill="#8884d8"
+              dataKey="value"
+            >
+              {legendData.map((row, index) => (
+                <Cell key={`cell-${index}`} fill={row.color} />
+              ))}
+            </Pie>
+
+            <Tooltip/>
+          </SourcePieChart>
+        </DoughnutChart>
+      </Controls>
+    </ControlsContainer>
+  );
+};
+
+export default TotalDoughnutChart;