impaktapps-design 0.2.78 → 0.2.85

package/dist/src/component/LineGraph/DrawLineGraph.d.ts

@@ -1,2 +1,2 @@
-declare const DrawGraph: ({ value, parentWidth, parentHeight }: any) => import("react/jsx-runtime").JSX.Element;
+declare const DrawGraph: ({ value }: any) => import("react/jsx-runtime").JSX.Element;
 export default DrawGraph;

package/dist/src/utils/finalDataProvider.d.ts

@@ -30,14 +30,11 @@ export declare const finalDataProvider: (type: string, value: any, theme?: any)
     style: {
         containerStyle: any;
         headerStyle: any;
-        legendStyle: {
-            legend: any;
-            legendTitle: any;
-        };
         labelStyle: any;
         lineStyle: any;
         tooltipStyle?: undefined;
         barStyle?: undefined;
+        legendStyle?: undefined;
         pieStyle?: undefined;
     };
 };

package/dist/style.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Roboto;600&display=swap";.axisBottom{display:block}@media (max-width: 768px){.axisBottom{display:none}}.container{margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}
+@import"https://fonts.googleapis.com/css2?family=Roboto;600&display=swap";.container{margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "impaktapps-design",
-  "version": "0.2.78",
+  "version": "0.2.85",
   "dependencies": {
     "@babel/core": "^7.16.12",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@mui/material": "^5.14.3",
+    "@react-spring/web": "^9.7.3",
     "@visx/visx": "^3.1.2",
     "@vitejs/plugin-react": "^1.1.4",
     "babel-loader": "^8.2.3",

package/src/component/BottomAxis.tsx

@@ -1,17 +1,13 @@
 import React from 'react'
 import { AxisBottom } from "@visx/axis";
 import { bottomAxisProps } from '../interface/interface';
-import "../Style/style.css"
 const BottomAxis = ({data,yMax,value,xScale,parentWidth,left}:bottomAxisProps) => {
+  
   return (
-    <>
     <AxisBottom
     numTicks={data?.length}
     top={yMax}
     left={left}
-    labelClassName='axisBottom'
-    tickClassName='axisBottom'
-    axisClassName='axisBottom'
     hideTicks={value.main?.hideTicks}
     hideAxisLine={value.main?.hideBottomAxisLine}
     strokeWidth={value.style?.labelStyle?.bottomAxisWidth}
@@ -20,7 +16,6 @@ const BottomAxis = ({data,yMax,value,xScale,parentWidth,left}:bottomAxisProps) =
     labelOffset={value.style?.labelStyle?.bottomLabelOffset}
     label={value.main?.bottomLabel}
     labelProps={{
-
       fill: value.style?.labelStyle?.labelColor,
       fontSize: value.style?.labelStyle?.fontSize,
       fontWeight: value.style?.labelStyle?.fontWeight,
@@ -28,13 +23,11 @@ const BottomAxis = ({data,yMax,value,xScale,parentWidth,left}:bottomAxisProps) =
     }}
     tickStroke={value.style?.labelStyle?.tickColor}
     tickLabelProps={() => ({
-      display:innerWidth<600?"none":"inline-block",
       fill: value.style?.labelStyle?.tickLabelColor,
       fontSize: value.style?.labelStyle?.tickFontSize ||11,
       textAnchor: "middle",
     })}
   />
-  </>
   )
 }
 export default BottomAxis

package/src/component/Legend.tsx

@@ -5,8 +5,7 @@ export function Legend({ value ,colorRange,dataKeyArray}: any) {
   const legendGlyphSize = value?.main?.legend?.colorRectWidth || 15;
   const ordinalColorScale = scaleOrdinal({
     domain:dataKeyArray||value?.main?.tooltipDataKey,
-    range: colorRange|| value?.style?.pieStyle?.colorRange,
-  
+    range:colorRange|| value?.style?.barStyle?.colorRange || value?.style?.pieStyle?.colorRange || value?.style?.lineStyle?.colorRange
   });
   return (
     <div className="legend" style={{paddingLeft:"40px",paddingRight:"40px",...value?.style?.legendStyle?.legend}}>
@@ -29,7 +28,7 @@ export function Legend({ value ,colorRange,dataKeyArray}: any) {
                 key={`legend-quantile-${i}`}
                 margin="0 5px"
                 onClick={(events) => {
-               
+                  if (events) alert(`clicked: ${JSON.stringify(label)}`);
                 }}
               >
                 <svg width={legendGlyphSize} height={legendGlyphSize}>

package/src/component/LineGraph/DrawLineGraph.tsx

@@ -7,19 +7,18 @@ import {
   AnimatedGrid
 } from "@visx/xychart";
 import Legend from "../Legend";
-const DrawGraph = ({ value,parentWidth, parentHeight }:any) => {
+const DrawGraph = ({ value }:any) => {
   const data = value?.main?.data;
-  const arr = (value.main.xAxisValue && value.main.yAxisValue) ? [value.main.xAxisValue,value.main.yAxisValue] : Object.keys(data[0][0]);
+  const arr = (value.main.xAxisValue && value.main.yAxisValue) ? [value.main.xAxisValue,value.main.yAxisValue] :Object.keys(data[0].value[0]);
   const accessors = { xAccessor: (d:any) => d[arr[0]], yAccessor: (d:any) => d[arr[1]] };
-
+  const dataKeyArray = data.map((ele: any) => ele.key);
 
   return (
-    <div>
+    <>
     {value.main.legendAvailable && 
-    <Legend  value={value}
-    colorRange={value?.style?.lineStyle?.colorRange}/>
+    <Legend  value={value}  dataKeyArray={dataKeyArray} />
     }
-    <XYChart width={parentWidth} height={parentHeight} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
+    <XYChart height={parseInt(value.style?.containerStyle?.height)} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
       <AnimatedAxis orientation="left" hideAxisLine={value.main.hideLeftAxisLine}
        label={value.main.leftLabel}
        left={value.style?.labelStyle?.leftLabelMargin||70} 
@@ -45,13 +44,13 @@ const DrawGraph = ({ value,parentWidth, parentHeight }:any) => {
        />
       <AnimatedGrid
        columns={value.main.grid} 
-       numTicks={value.main.numHidden?0:value.main?.data[0].length-1} />
+       numTicks={value.main.numHidden ? 0 : value.main?.data[0].value.length - 1} />
       {
         value.main?.data.map((elem:any, i:number) => {
           return (
             <AnimatedLineSeries
-              dataKey={value.main.tooltipDataKey[i]}
-              data={elem}
+              dataKey={elem.key}
+              data={elem.value}
             fill={value.style?.lineStyle?.lineAreaColor}
             fillOpacity={value.style?.lineStyle?.lineAreaOpacity}
             
@@ -80,7 +79,7 @@ const DrawGraph = ({ value,parentWidth, parentHeight }:any) => {
           </div>
         )}
       />
-    </XYChart></div>
+    </XYChart></>
   );
 };
 

package/src/component/LineGraph/LineGraph.tsx

@@ -1,31 +1,15 @@
 import React from "react";
 import DrawLineGraph from "./DrawLineGraph";
 import { finalDataProvider } from "../../utils/finalDataProvider";
-import { ParentSize } from "@visx/responsive";
 
 const LineGraph = ({ value,theme }:any) => {
   const lineData = finalDataProvider("LineGraph", value,theme);
-  let LineRender = (
-    <ParentSize>
-      {(parent) => (
-        <DrawLineGraph
-          parentWidth={parent.width}
-          parentHeight={parseInt(lineData.style.containerStyle.height)}
-          //@ts-ignore
-          parentRef={parent.ref}
-          resizeParent={parent.resize}
-          value={lineData}
-        />
-      )}
-    </ParentSize>
-  );
   return (
-    <div style={{...lineData?.style?.containerStyle}}>
+    <div style={lineData?.style?.containerStyle}>
       {lineData?.main?.header && (
         <div style={lineData?.style?.headerStyle}>{lineData?.main?.header}</div>
       )}
-      {LineRender}
-      {/* <DrawLineGraph value={lineData} /> */}
+      <DrawLineGraph value={lineData} />
     </div>
   );
 };

package/src/component/PieGraph/DrawPieGraph.tsx

@@ -9,15 +9,13 @@ import ToolTip from "../ToolTip";
 
 const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
   const letters = value?.main?.data;
-  // ["branch","value"]
   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 labelArray = letters.map((l:[any]) => l[arr[0]]);
   const getLetterFrequencyColor = scaleOrdinal({
-    domain:labelArray,
+    domain: letters.map((l:[any]) => l[arr[0]]),
     range: value?.style?.pieStyle?.colorRange,
   });
 
@@ -49,8 +47,6 @@ const DrawPieGraph = ({ value, parentWidth, parentHeight }: any) => {
       {value?.main?.legendAvailable && (
         <Legend
           value={value}
-           colorRange={value?.style?.pieStyle?.colorRange}
-          dataKeyArray={labelArray}
         />
       )}
       <svg

package/src/component/PieGraph/PieGraph.tsx

@@ -21,9 +21,7 @@ const PieGraph = ({ value,theme }: any) => {
   );
   return (
     <div style={pieData.style.containerStyle}>
-      {pieData?.main?.header && <>
-      <div style={pieData.style.headerStyle}>{pieData?.main?.header}</div>
-      </>}
+      {pieData?.main?.header && <div style={pieData.style.headerStyle}>{pieData?.main?.header}</div>}
       {PieRender}
     </div>
   );

package/src/component/ProgressBar/ProgressBar.tsx

@@ -1,55 +1,54 @@
-import React, { useState, useEffect } from "react";
+import React, { useState , useEffect } from "react";
 import "./style.css";
 
-const ProgressBar = ({ value, theme }: any) => {
+const ProgressBar = ({value,theme} : any) => {
   const [progress, setProgress] = useState(
-    (value?.main?.data?.achieved / value?.main?.data?.total) * 100
+      (value?.main?.data?.achieved / value?.main?.data?.total) *
+        100
   );
-  useEffect(() => {
-    setProgress((value?.main?.data?.achieved / value?.main?.data?.total) * 100);
-  }, [value.main.data]);
+  useEffect(()=>{
+   setProgress( (value?.main?.data?.achieved / value?.main?.data?.total) *
+   100)
+  },[value.main.data])
   const getColor = () => {
     if (progress < 40) {
-      return ["#e2b6b6", "#ff0000"];
+      return ["#e2b6b6","#ff0000"];
     }
     if (progress < 70) {
-      return ["#b6bce2", "#3f51b5"];
+    return ["#b6bce2","#3f51b5"]; 
     } else {
-      return ["#b6e2c2", "#2ecc71"];
+      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 < 100 ? progress : 100}%`,
-            backgroundColor:
-              value?.style?.progressBarFillColor || getColor()[1],
-            height: "100%",
-            borderRadius: "10px",
-            marginBottom: "20px",
-            transition: "width 0.5 ease-out",
-          }}
-        ></div>
-      </div>
-    );
+  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],
+        height: "100%",
+        borderRadius: "10px",
+        marginBottom: "20px",
+        transition: "width 0.5 ease-out",
+      }}
+    ></div>
+  </div>)
   }
   return (
     <div
       className="container"
       style={{
-        backgroundColor: theme?.palette?.secondary.main,
+        backgroundColor:theme?.palette?.secondary.main ,
         color: theme?.palette?.text?.primary,
         borderRadius: "20px",
         width: "auto",
@@ -67,7 +66,7 @@ const ProgressBar = ({ value, theme }: any) => {
           textAlign: "left",
           fontFamily: "inherit",
           fontSize: "18px",
-          color: theme?.palette?.text?.primary || "#121926",
+          color: theme?.palette?.text?.primary||"#121926",
         }}
       >
         {value?.main?.heading}
@@ -91,7 +90,7 @@ const ProgressBar = ({ value, theme }: any) => {
               fontWeight: 700,
               marginBottom: "20px",
               fontSize: "24px",
-              color: "inherit",
+              color:"inherit"
             }}
           >
             {progress.toFixed(2)}%
@@ -104,14 +103,14 @@ const ProgressBar = ({ value, theme }: any) => {
               margin: "auto",
               borderRadius: "10px",
               backgroundColor: getColor()[0],
-
+             
               marginBottom: "20px",
             }}
           >
             <div
               className="progress-bar-fill"
               style={{
-                width: `${progress < 100 ? progress : 100}%`,
+                width: `${progress}%`,
                 backgroundColor: getColor()[1],
                 // backgroundColor: "#3f51b5",
                 height: "100%",
@@ -135,66 +134,69 @@ const ProgressBar = ({ value, theme }: any) => {
           <div style={{ width: "33.33%" }}>
             <div
               style={{
-                textAlign: "left",
+                textAlign:"left",
                 fontSize: "10px",
                 color: theme?.palette?.text?.inputLabel,
                 marginBottom: "10px",
               }}
             >
-              {value?.main?.bottomLabel_1 || "Target"}
+               {value?.main?.bottomLabel_1||"Target"}
             </div>
             <div
               style={{
-                color: theme?.palette?.text?.primary || "#121926",
-                textAlign: "left",
+                color: theme?.palette?.text?.primary||"#121926",
+                textAlign:"left",
                 fontWeight: 500,
               }}
             >
-              {value?.main?.data?.total ||
-                value?.main?.data?.bottomLabel_1_value}
+              {value?.main?.data?.total||value?.main?.data?.bottomLabel_1_value}
             </div>
           </div>
           <div style={{ width: "33.33%" }}>
             <div
               style={{
-                textAlign: "center",
-                color: theme?.palette?.text?.inputLabel || "#697586",
+                textAlign:"center",
+                color: theme?.palette?.text?.inputLabel||"#697586",
                 fontSize: "10px",
                 marginBottom: "10px",
               }}
             >
-              {value?.main?.bottomLabel_2 || "Achieved"}
+                {value?.main?.bottomLabel_2||"Achieved"}
             </div>
             <div
               style={{
-                textAlign: "center",
-                color: theme?.palette?.text?.primary || "#121926",
+                textAlign:"center",
+                color: theme?.palette?.text?.primary|| "#121926",
                 fontWeight: 500,
               }}
             >
-              {value?.main?.data?.achieved ||
-                value?.main?.data?.bottomLabel_2_value}
+              {value?.main?.data?.achieved||value?.main?.data?.bottomLabel_2_value}
             </div>
           </div>
           <div style={{ width: "33.33%" }}>
             <div
               style={{
-                textAlign: "right",
-                color: theme?.palette?.text?.inputLabel || "#697586",
+                textAlign:"right",
+                color: theme?.palette?.text?.inputLabel||"#697586",
                 fontSize: "10px",
                 marginBottom: "10px",
               }}
             >
-              {value?.main?.bottomLabel_3 || "Remaining"}
+                 {value?.main?.bottomLabel_3||"Average"} 
             </div>
             <div
               style={{
-                textAlign: "right",
-                color: theme?.palette?.text?.primary || "#121926",
+                textAlign:"right",
+                color: theme?.palette?.text?.primary||"#121926",
                 fontWeight: 500,
               }}
             >
-              {value?.main?.data?.bottomLabel_3_value}
+              {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>
@@ -204,3 +206,5 @@ const ProgressBar = ({ value, theme }: any) => {
 };
 
 export default ProgressBar;
+
+

package/src/component/SpeedoMeter/SpeedoMeter.tsx

@@ -3,30 +3,11 @@ import ReactSpeedometer from "react-d3-speedometer";
 
 const SpeedoMeter = ({ value,theme }: any) => {
   return (
-    <div style={{ 
-      ...value?.style?.containerStyle, 
-      width:"100%", 
-      // position:"relative",
-      display:"flex",
-       justifyContent:"center",
-       alignItems:"center",
-       paddingTop:"50px",
-       paddingBottom:"50px",
-       marginLeft:"auto",
-       marginRight:"auto",
-       height:'auto',
-      // minWidth:window.innerWidth-30,
-      // width:"100vw",
-      
-      // maxWidth:"600%",
-    background:theme.palette.secondary.main ,
-    // height:window.innerWidth>750?400:300,
-    }}>
-      {/* {value?.main?.header && (
+    <div style={{ ...value?.style?.containerStyle,background:theme.palette.secondary.main }}>
+      {value?.main?.header && (
         <div
           style={{
             fontWeight: 700,
-       
             textAlign: "left",
             fontFamily: "inherit",
             fontSize: "18px",
@@ -36,39 +17,28 @@ const SpeedoMeter = ({ value,theme }: any) => {
         >
           {value.main.header}
         </div>
-      )} */}
-      <div style={{ width:"100%",
-      // position:"absolute",'
-      // top:"10%",
-       display:"flex",
-       justifyContent:"center",
-       alignItems:"center"
-      
-      // left:window.innerWidth>750?"calc(50% - 225px)":"calc(50% - 140px)"
-      ,overflowX:"auto"}}>
+      )}
+      <div style={{ width:"100%",minWidth:500,display: "flex", justifyContent: "center",overflow:"auto"  }}>
         <ReactSpeedometer
-          
           forceRender={true}
           segmentColors={value?.style?.segmentColors}
           maxValue={value?.main?.data?.maxValue || 500}
-          width={window.innerWidth>750?450:280
-            // value?.style?.width || 350
-          }
+          width={value?.style?.width || 450}
           needleHeightRatio={value?.style?.needleHeightRatio || 0.7}
-          currentValueText={value?.main?.currentValueText||"Your Score"}
-          customSegmentLabels={value?.main?.customSegmentLabels}
+          currentValueText={value?.main?.currentValueText}
+          customSegmentLabels={value?.main?.customSegmentLabel}
           ringWidth={value?.style?.ringWidth || 37}
           needleTransitionDuration={
             value?.style?.needleTransitionDuration || 5333
           }
           // fluidWidth={true}
-          // height={window.innerWidth>750?(value?.style?.height||400):300}
+          height={value?.style?.height}
           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}
+          segments={value?.main?.segments || 5}
           endColor={value?.style?.endColor || "green"}
           textColor={value?.style?.textColor || "black"}
         />

package/src/component/Timer/Timer.tsx

@@ -11,11 +11,14 @@ const CustomTimer = ({ value }) => {
   const [interval, setInter] = useState<any>();
   
   useEffect(() => {
-    
-    if ((data?.startDate && data?.endDate) &&  ( new Date(data?.startDate).getTime() <= new Date(data?.endDate).getTime() ) && (new Date().getTime() >= new Date(data?.startDate).getTime()) && ( new Date().getTime() <= new Date(data?.endDate).getTime()))
-    {
+    if (
+      new Date(data.startDate).getTime() <
+        new Date().getTime() &&
+      new Date(data.startDate).getTime() <
+        new Date(data.endDate).getTime()
+    ) {
       let currentDate = new Date();
-      const Difference_In_Time = new Date(data?.endDate).getTime() - currentDate.getTime();
+      const Difference_In_Time = new Date(data.endDate).getTime() - currentDate.getTime();
       const Difference_In_Days = Difference_In_Time / (1000 * 3600 * 24);
       setDays(Math.floor(Difference_In_Days));
       setInter(
@@ -26,22 +29,16 @@ const CustomTimer = ({ value }) => {
           setSec(currdate.getSeconds());
         }, 1000)
       );
-    }
-     else {
-      clearInterval(interval);
+      return () => {
+        clearInterval(interval);
+      };
+    } else {
       setDays(0);
       setHours(0);
       setMin(0);
       setSec(0);
     }
-    return () => {
-      clearInterval(interval);
-      setDays(0);
-      setHours(0);
-      setMin(0);
-      setSec(0);
-    };
-  },[data?.startDate, data?.endDate]);
+  },[data]);
 
   const containerStyle = {display: "flex",flexDirection: "column",backgroundColor: "rgb(15,15,15)",justifyContent: "center",alignItems: "center",height: "40vh",gap: "10px",...uischemaStyle?.container};
   const boxStyle = {backgroundColor : "rgb(51,51,51)", width: "22%",minWidth:"40px",height:"100px", padding : "10px",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",...uischemaStyle?.digitContainer};
@@ -54,7 +51,7 @@ return (
         <Box component="div" sx={containerStyle}
         >
         <Box component="h1" style={containerLabelColor}>
-          { new Date().getTime() >= new Date(data?.startDate).getTime() && new Date().getTime() <= new Date(data?.endDate).getTime() ? 'Contest ends in...' : (new Date().getTime() < new Date(data?.startDate).getTime()) ? 'Program Not Started' : 'Program Over' }
+          { new Date().getTime() >= new Date(data?.startDate).getTime() && new Date().getTime() <= new Date(data.endDate).getTime() ? 'Contest ends in...' : (new Date().getTime() < new Date(data.startDate).getTime()) ? 'Program Not Started Yet' : 'Program Over' }
           </Box>
         <Box style={{display:"flex", gap: "15px",width:"80%",maxWidth:"650px",marginLeft:"auto",marginRight:"auto"}} >
            <Box style={boxStyle}>