impaktapps-design 0.0.1

package/src/component/PieGraph/DrawPieGraph.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { Group } from "@visx/group";
+import { scaleOrdinal } from "@visx/scale";
+import { Pie } from "@visx/shape";
+import { Text } from "@visx/text";
+import { useTooltip } from "@visx/tooltip";
+import Legend from "../Legend";
+import ToolTip from "../ToolTip";
+
+const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
+  const letters = value?.main?.data;
+  const arr =
+    value?.main?.xAxisValue && value?.main?.yAxisValue
+      ? [value?.main?.xAxisValue, value?.main?.yAxisValue]
+      : Object.keys(letters[0]);
+  const frequency = (d: any) => d[arr[1]];
+  const getLetterFrequencyColor = scaleOrdinal({
+    domain: letters.map((l:[any]) => l[arr[0]]),
+    range: value?.style?.pieStyle?.colorRange,
+  });
+
+  const {
+    tooltipData,
+    tooltipLeft,
+    tooltipTop,
+    tooltipOpen,
+    showTooltip,
+    hideTooltip,
+  }: any = useTooltip();
+  const handleMouse = (event: any, datum: any) => {
+    showTooltip({
+      tooltipLeft: event.clientX,
+      tooltipTop: event.clientY,
+      tooltipData: [datum[arr[0]], datum[arr[1]]],
+    });
+  };
+
+  const innerWidth = parentWidth - 40;
+  const innerHeight = parentHeight - 40;
+  const centerX = innerWidth / 2;
+  const centerY = innerHeight / 2;
+  const left = centerX + 20;
+  const top = centerY + 20;
+  const pieSortValues = (a: number, b: number) => a - b;
+  return (
+    <>
+      {value?.main?.legendAvailable && (
+        <Legend
+          value={value}
+        />
+      )}
+      <svg
+        width={parentWidth}
+        height={parentHeight}
+        className="pieGraphContainer"
+      >
+        <Group top={top} left={left}>
+          <Pie
+            data={letters}
+            pieSortValues={pieSortValues}
+            pieValue={frequency}
+            outerRadius={value?.style?.pieStyle?.outerRadius}
+            innerRadius={value?.style?.pieStyle?.innerRadius}
+            cornerRadius={value?.style?.pieStyle?.cornerRadius}
+            padAngle={value?.style?.pieStyle?.padAngle}
+          >
+            {(pie) => {
+              return pie.arcs.map((arc, index) => {
+                const letter = value?.style?.pieStyle?.showPieLabel?arc.data[arr[0]]:arc.data[arr[1]];
+                const [centriodX, centriodY] = pie.path.centroid(arc);
+                const arcPath = pie.path(arc);
+                const arcFill: any = getLetterFrequencyColor(letter);
+                return (
+                  <g
+                    key={`arc-${letter}-${index}`}
+                    onMouseOut={hideTooltip}
+                    onMouseOver={(e) => handleMouse(e, arc.data)}
+                    className="pieTooltipHolder"
+                  >
+                   
+                    <path
+                     //@ts-ignore
+                    d={arcPath} fill={arcFill} />
+                    <Text
+                      x={centriodX}
+                      y={centriodY}
+                      dy={"0.33em"}
+                      fontSize={14}
+                      fill={ value?.style?.pieStyle?.pieLabelColor||"white"}
+                      textAnchor={"middle"}
+                      pointerEvents={"none"}
+                    >
+                      {letter}
+                    </Text>
+                  </g>
+                );
+              });
+            }}
+          </Pie>
+        </Group>
+      </svg>
+      {tooltipOpen && (
+        <ToolTip
+          style={value?.style}
+          top={tooltipTop}
+          left={tooltipLeft}
+          tooltipData={tooltipData}
+        />
+      )}
+    </>
+  );
+};
+export default DrawPieGraph;

package/src/component/PieGraph/PieGraph.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import DrawPieGraph from "./DrawPieGraph";
+import { ParentSize } from "@visx/responsive";
+import { finalDataProvider } from "../../utils/finalDataProvider";
+
+const PieGraph = ({ value }: any) => {
+  const pieData: any = finalDataProvider("PieGraph", value);
+  let PieRender = (
+    <ParentSize>
+      {(parent) => (
+        <DrawPieGraph
+          parentWidth={parent.width}
+          parentHeight={parseInt(pieData.style.containerStyle.height)}
+          //@ts-ignore
+          parentRef={parent.ref}
+          resizeParent={parent.resize}
+          value={pieData}
+        />
+      )}
+    </ParentSize>
+  );
+  return (
+    <div style={pieData.style.containerStyle}>
+      {pieData?.main?.header && <div style={pieData.style.headerStyle}>{pieData?.main?.header}</div>}
+      {PieRender}
+    </div>
+  );
+};
+
+export default PieGraph;

package/src/component/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,210 @@
+import React, { useState , useEffect } from "react";
+import "./style.css";
+
+const ProgressBar = ({value} : any) => {
+  const [progress, setProgress] = useState(
+      (value?.main?.data?.achieved / value?.main?.data?.total) *
+        100
+  );
+  useEffect(()=>{
+   setProgress( (value?.main?.data?.achieved / value?.main?.data?.total) *
+   100)
+  },[value.main.data])
+  const getColor = () => {
+    if (progress < 40) {
+      return ["#e2b6b6","#ff0000"];
+    }
+    if (progress < 70) {
+    //   return "#ffa500";  
+    return ["#b6bce2","#3f51b5"]; 
+    } else {
+      return ["#b6e2c2","#2ecc71"];
+    }
+  };
+  if(value?.main?.developOnlyProgresBar){
+    return (<div
+    style={{
+      height: "6px",
+      margin: "auto",
+      borderRadius: "10px",
+      backgroundColor:value?.style?.progressBarColor|| getColor()[1],
+     
+      marginBottom: "20px",
+    }}
+  >
+    <div
+      className="progress-bar-fill"
+      style={{
+        width: `${progress}%`,
+        backgroundColor:value?.style?.progressBarFillColor|| getColor()[1],
+        // backgroundColor: "#3f51b5",
+        height: "100%",
+        borderRadius: "10px",
+        marginBottom: "20px",
+        // backgroundColor: "#2ecc71",
+        transition: "width 0.5 ease-out",
+      }}
+    ></div>
+  </div>)
+  }
+  return (
+    <div
+      className="container"
+      style={{
+        backgroundColor: "white",
+        borderRadius: "20px",
+        width: "auto",
+        height: "auto",
+        margin: "auto",
+        padding: " 40px none",
+        // border: "1px solid black",
+      }}
+    >
+      <div
+        style={{
+          borderBottom: "1px solid #e3e8ef",
+          padding: "25px 0px 25px 25px",
+          fontWeight: 700,
+          textAlign: "left",
+          fontFamily: "inherit",
+          fontSize: "18px",
+          color: "#121926",
+        }}
+      >
+        {value?.main?.heading}
+      </div>
+      <div
+        style={{ paddingBottom: "25px", paddingTop: "25px", height: "auto" }}
+      >
+        <div
+          style={{
+            // width: "70%",
+            width: "90%",
+            height: "6px",
+            margin: "auto",
+            borderRadius: "10px",
+            marginBottom: "30px",
+          }}
+        >
+          <div
+            style={{
+              textAlign: "center",
+              fontWeight: 700,
+              marginBottom: "20px",
+              fontSize: "24px",
+            }}
+          >
+            {progress.toFixed(2)}%
+          </div>
+          <div
+            style={{
+              //   width: "70%",
+              // width:"90%",
+              height: "6px",
+              margin: "auto",
+              borderRadius: "10px",
+              backgroundColor: getColor()[0],
+             
+              marginBottom: "20px",
+            }}
+          >
+            <div
+              className="progress-bar-fill"
+              style={{
+                width: `${progress}%`,
+                backgroundColor: getColor()[1],
+                // backgroundColor: "#3f51b5",
+                height: "100%",
+                borderRadius: "10px",
+                marginBottom: "20px",
+                // backgroundColor: "#2ecc71",
+                transition: "width 0.5 ease-out",
+              }}
+            ></div>
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            paddingTop: "40px",
+            width: "90%",
+            margin: "auto",
+          }}
+        >
+          <div style={{ width: "33.33%" }}>
+            <div
+              style={{
+                textAlign:"left",
+                color: "#697586",
+                fontSize: "10px",
+                marginBottom: "10px",
+              }}
+            >
+               {value?.main?.bottomLabel_1||"Target"}
+            </div>
+            <div
+              style={{
+                color: "#121926",
+                textAlign:"left",
+                fontWeight: 500,
+              }}
+            >
+              {value?.main?.data?.total||value?.main?.data?.bottomLabel_1_value}
+            </div>
+          </div>
+          <div style={{ width: "33.33%" }}>
+            <div
+              style={{
+                textAlign:"center",
+                color: "#697586",
+                fontSize: "10px",
+                marginBottom: "10px",
+              }}
+            >
+                {value?.main?.bottomLabel_2||"Achieved"}
+            </div>
+            <div
+              style={{
+                textAlign:"center",
+                color: "#121926",
+                fontWeight: 500,
+              }}
+            >
+              {value?.main?.data?.achieved||value?.main?.data?.bottomLabel_2_value}
+            </div>
+          </div>
+          <div style={{ width: "33.33%" }}>
+            <div
+              style={{
+                textAlign:"right",
+                color: "#697586",
+                fontSize: "10px",
+                marginBottom: "10px",
+              }}
+            >
+                 {value?.main?.bottomLabel_3||"Average"} 
+            </div>
+            <div
+              style={{
+                textAlign:"right",
+                color: "#121926",
+                fontWeight: 500,
+              }}
+            >
+              {value?.main?.daysCount?
+              Math.round(
+                (value?.main?.data?.achieved / value?.main?.daysCount)
+              )+ value?.main?.bottomLabel_3_averageLabel||"/day"
+              :value?.main?.data?.bottomLabel_3_value 
+           }
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;
+
+

package/src/component/ProgressBar/style.css

@@ -0,0 +1,40 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto;600&display=swap");
+
+.container {
+    margin: 0;
+    box-sizing: border-box;
+    /* background-color: #eef6f8; */
+    font-family: "Roboto", sans-serif;
+} 
+
+/* body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 200px;
+    margin-top: 100px;
+}
+
+.progress-bar{
+    width: 100%;
+    height: 30px;
+    border-radius: 10px;
+    background-color: #003441;
+    margin-bottom: 10px;
+}
+
+.progress-bar-fill{
+    height: 100%;
+    border-radius: 10px;
+    background-color: #2ecc71;
+
+}
+.progress-label{
+    margin-top: 10px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #444444;
+} */

package/src/component/SpeedoMeter/SpeedoMeter.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import ReactSpeedometer from "react-d3-speedometer";
+
+const SpeedoMeter = ({ value }: any) => {
+  return (
+    <div style={{ ...value?.style?.containerStyle }}>
+      {value?.main?.header && (
+        <div
+          style={{
+            fontWeight: 700,
+            textAlign: "left",
+            fontFamily: "inherit",
+            fontSize: "18px",
+            color: "#121926",
+            ...value?.style?.headerStyle,
+          }}
+        >
+          {value.main.header}
+        </div>
+      )}
+      <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
+        <ReactSpeedometer
+          // needleTransition=''
+          segmentColors={value?.style?.segmentColors}
+          maxValue={value?.main?.data?.maxValue || 500}
+          width={value?.style?.width || 500}
+          needleHeightRatio={value?.style?.needleHeightRatio || 0.7}
+          currentValueText={value?.main?.currentValueText}
+          customSegmentLabels={value?.main?.customSegmentLabel}
+          ringWidth={value?.style?.ringWidth || 37}
+          needleTransitionDuration={
+            value?.style?.needleTransitionDuration || 5333
+          }
+          needleTransition={value?.style?.needleTransition || "easeElastic"}
+          value={value?.main?.data?.value || 473}
+          needleColor={value?.style?.needleColor || "red"}
+          minValue={value?.main?.data?.minValue || 0}
+          startColor={value?.style?.startColor || "red"}
+          segments={value?.main?.segments || 5}
+          endColor={value?.style?.endColor || "green"}
+          textColor={value?.style?.textColor || "black"}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default SpeedoMeter;

package/src/component/ToolTip.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useTooltipInPortal } from "@visx/tooltip";
+import { tooltipProps } from "../interface/interface";
+const ToolTip = ({ style, top, left, tooltipData }: tooltipProps) => {
+  const { TooltipInPortal } = useTooltipInPortal({
+    detectBounds: true,
+    scroll: true,
+  });
+  return (
+    <TooltipInPortal 
+  
+     key={Math.random()} top={top} left={left}>
+      <div
+        style={{
+          width: "100%",
+          // paddingleft: "10px",
+          height: "auto",
+          textAlign:"center",
+          background:"black",
+         boxShadow:"2px 2px 5px black",
+          color:"#6c5efb",
+          padding:"15px",
+          ...style?.tooltipStyle,
+        }}
+      >
+        <div style={{paddingBottom:"2px",color:"white"}}>
+        {tooltipData[0]}
+        </div>
+       
+      
+      <div style={{marginTop:"10px"}}>
+        {tooltipData[1]}
+      </div>
+      </div>
+    </TooltipInPortal>
+  );
+};
+
+export default ToolTip;

package/src/index.ts

@@ -0,0 +1,6 @@
+export {default as BarGraph} from "./component/BarGraph/BarGraph"
+export {default as PieGraph} from "./component/PieGraph/PieGraph"
+export {default as LineGraph} from "./component/LineGraph/LineGraph"
+export {default as HorizontalBarGraph} from "./component/BarGraph/HorizontalBarGraph"
+export {default as ProgressBar} from "./component/ProgressBar/ProgressBar"
+export {default as SpeedoMeter} from "./component/SpeedoMeter/SpeedoMeter"

package/src/interface/interface.ts

@@ -0,0 +1,13 @@
+export interface leftAxisProps {
+    value: any
+    yScale: any
+    parentWidth: number
+}
+export interface bottomAxisProps {
+    data: any[], yMax: number, value: any, xScale: any, parentWidth: number
+}
+
+export interface tooltipProps {
+    style:any,
+    top:any,left:any,tooltipData:any
+}

package/src/lib/index.ts

@@ -0,0 +1,6 @@
+export {default as BarGraph} from "../component/BarGraph/BarGraph"
+export {default as PieGraph} from "../component/PieGraph/PieGraph"
+export {default as LineGraph} from "../component/LineGraph/LineGraph"
+export {default as HorizontalBarGraph} from "../component/BarGraph/HorizontalBarGraph"
+export {default as ProgressBar} from "../component/ProgressBar/ProgressBar"
+export {default as SpeedoMeter} from "../component/SpeedoMeter/SpeedoMeter"