impaktapps-design 0.2.75 → 0.2.76

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

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

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

@@ -30,11 +30,14 @@ 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";.container{margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}
+@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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impaktapps-design",
-  "version": "0.2.75",
+  "version": "0.2.76",
   "dependencies": {
     "@babel/core": "^7.16.12",
     "@mui/material": "^5.14.3",

package/src/Style/style.css

@@ -0,0 +1,20 @@
+.axisBottom{
+    display: block;
+    /* @media screen and (min-width: 480px) {
+        .axisBottom {
+          display: none;
+        }
+      } */
+}
+@media (max-width: 768px) {
+    .axisBottom {
+      display: none;
+    }
+  }
+
+  
+  
+  
+  
+  
+  

package/src/component/BottomAxis.tsx

@@ -1,13 +1,20 @@
 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 (
+    <>
+    {/* <BrowserView> */}
     <AxisBottom
     numTicks={data?.length}
     top={yMax}
     left={left}
+    labelClassName='axisBottom'
+    tickClassName='axisBottom'
+    axisClassName='axisBottom'
+    // className="axisBottom"
     hideTicks={value.main?.hideTicks}
     hideAxisLine={value.main?.hideBottomAxisLine}
     strokeWidth={value.style?.labelStyle?.bottomAxisWidth}
@@ -23,11 +30,42 @@ const BottomAxis = ({data,yMax,value,xScale,parentWidth,left}:bottomAxisProps) =
     }}
     tickStroke={value.style?.labelStyle?.tickColor}
     tickLabelProps={() => ({
+      // display:"none",
       fill: value.style?.labelStyle?.tickLabelColor,
       fontSize: value.style?.labelStyle?.tickFontSize ||11,
       textAnchor: "middle",
     })}
   />
+  {/* </BrowserView> */}
+  {/* <MobileView>
+  <AxisBottom
+    numTicks={data?.length}
+    top={yMax}
+    left={left}
+    hideTicks={true||value.main?.hideTicks}
+  
+    hideAxisLine={true||value.main?.hideBottomAxisLine}
+    strokeWidth={value.style?.labelStyle?.bottomAxisWidth}
+    scale={xScale}
+    stroke={value.style?.labelStyle?.tickColor}
+    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,
+      fontFamily: value.style?.labelStyle?.fontWeight,
+    }}
+    tickStroke={value.style?.labelStyle?.tickColor}
+    tickLabelProps={() => ({
+      display:"none",
+      fill: value.style?.labelStyle?.tickLabelColor,
+      fontSize: value.style?.labelStyle?.tickFontSize ||11,
+      textAnchor: "middle",
+    })}
+  />
+  </MobileView> */}
+  </>
   )
 }
 export default BottomAxis

package/src/component/Legend.tsx

@@ -5,7 +5,8 @@ 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?.pieStyle?.colorRange,
+  
   });
   return (
     <div className="legend" style={{paddingLeft:"40px",paddingRight:"40px",...value?.style?.legendStyle?.legend}}>
@@ -28,7 +29,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,18 +7,19 @@ import {
   AnimatedGrid
 } from "@visx/xychart";
 import Legend from "../Legend";
-const DrawGraph = ({ value }:any) => {
+const DrawGraph = ({ value,parentWidth, parentHeight }: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 accessors = { xAccessor: (d:any) => d[arr[0]], yAccessor: (d:any) => d[arr[1]] };
 
 
   return (
-    <>
+    <div>
     {value.main.legendAvailable && 
-    <Legend  value={value}/>
+    <Legend  value={value}
+    colorRange={value?.style?.lineStyle?.colorRange}/>
     }
-    <XYChart height={parseInt(value.style?.containerStyle?.height)} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
+    <XYChart width={parentWidth} height={parentHeight} xScale={{ type: "band" }} yScale={{ type: "linear" }}>
       <AnimatedAxis orientation="left" hideAxisLine={value.main.hideLeftAxisLine}
        label={value.main.leftLabel}
        left={value.style?.labelStyle?.leftLabelMargin||70} 
@@ -79,7 +80,7 @@ const DrawGraph = ({ value }:any) => {
           </div>
         )}
       />
-    </XYChart></>
+    </XYChart></div>
   );
 };
 

package/src/component/LineGraph/LineGraph.tsx

@@ -1,15 +1,31 @@
 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>
       )}
-      <DrawLineGraph value={lineData} />
+      {LineRender}
+      {/* <DrawLineGraph value={lineData} /> */}
     </div>
   );
 };

package/src/component/PieGraph/DrawPieGraph.tsx

@@ -9,13 +9,15 @@ 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: letters.map((l:[any]) => l[arr[0]]),
+    domain:labelArray,
     range: value?.style?.pieStyle?.colorRange,
   });
 
@@ -47,6 +49,8 @@ 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,7 +21,9 @@ 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,54 +1,55 @@
-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 < 100 ? progress : 100}%`,
+            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",
@@ -66,7 +67,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}
@@ -90,7 +91,7 @@ const ProgressBar = ({value,theme} : any) => {
               fontWeight: 700,
               marginBottom: "20px",
               fontSize: "24px",
-              color:"inherit"
+              color: "inherit",
             }}
           >
             {progress.toFixed(2)}%
@@ -103,14 +104,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 < 100 ? progress : 100}%`,
                 backgroundColor: getColor()[1],
                 // backgroundColor: "#3f51b5",
                 height: "100%",
@@ -134,69 +135,66 @@ 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||"Average"} 
+              {value?.main?.bottomLabel_3 || "Remaining"}
             </div>
             <div
               style={{
-                textAlign:"right",
-                color: theme?.palette?.text?.primary||"#121926",
+                textAlign: "right",
+                color: theme?.palette?.text?.primary || "#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 
-           }
+              {value?.main?.data?.bottomLabel_3_value}
             </div>
           </div>
         </div>
@@ -206,5 +204,3 @@ const ProgressBar = ({value,theme} : any) => {
 };
 
 export default ProgressBar;
-
-

package/src/component/SpeedoMeter/SpeedoMeter.tsx

@@ -3,11 +3,30 @@ import ReactSpeedometer from "react-d3-speedometer";
 
 const SpeedoMeter = ({ value,theme }: any) => {
   return (
-    <div style={{ ...value?.style?.containerStyle,background:theme.palette.secondary.main }}>
-      {value?.main?.header && (
+    <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={{
             fontWeight: 700,
+       
             textAlign: "left",
             fontFamily: "inherit",
             fontSize: "18px",
@@ -17,28 +36,39 @@ const SpeedoMeter = ({ value,theme }: any) => {
         >
           {value.main.header}
         </div>
-      )}
-      <div style={{ width:"100%",minWidth:500,display: "flex", justifyContent: "center",overflow:"auto"  }}>
+      )} */}
+      <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"}}>
         <ReactSpeedometer
+          
           forceRender={true}
           segmentColors={value?.style?.segmentColors}
           maxValue={value?.main?.data?.maxValue || 500}
-          width={value?.style?.width || 450}
+          width={window.innerWidth>750?450:280
+            // value?.style?.width || 350
+          }
           needleHeightRatio={value?.style?.needleHeightRatio || 0.7}
-          currentValueText={value?.main?.currentValueText}
-          customSegmentLabels={value?.main?.customSegmentLabel}
+          currentValueText={value?.main?.currentValueText||"Your Score"}
+          customSegmentLabels={value?.main?.customSegmentLabels}
           ringWidth={value?.style?.ringWidth || 37}
           needleTransitionDuration={
             value?.style?.needleTransitionDuration || 5333
           }
           // fluidWidth={true}
-          height={value?.style?.height}
+          // height={window.innerWidth>750?(value?.style?.height||400):300}
           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/utils/finalDataProvider.ts

@@ -6,6 +6,7 @@ const Product1 = [
     { x: "f", y: 100 },
     { x: "g", y: 50 },
 ];
+
 export const finalDataProvider = (type: string, value: any,theme?:any) => {
     switch (type) {
         case "BarGraph":
@@ -84,6 +85,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                 }
             };
         case "PieGraph":
+
             return {
                 main: {
                     data: value?.main?.data || [{ branch: "Kotak", value: 500 }, { branch: "SBI", value: 700 }, { branch: "HDFC", value: 900 }],
@@ -160,7 +162,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                         },
                     },
                     pieStyle: {
-                        colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)"],
+                        colorRange: ["#3f51b5", "rgba(200,0,31,0.9)", "rgba(25,200,205,0.6)","#3f84b5","#b5993f","#fc6f6f"],
                         outerRadius: 120,
                         innerRadius: 60,
                         cornerRadius: 2,
@@ -181,7 +183,7 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                     numHidden: false,
                     tooltipDataKey: ["MAMA New Project", "Second", "Third"],
                     axisLeft: true,
-
+                    legendAvailable:true,
                     axisBottom: true,
                     hideLeftAxisLine: false,
                     hideBottomAxisLine: false,
@@ -191,14 +193,14 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                         legendTitle: "Our Assests",
                         direction: "row",
                         align: "right",
-                        colorRectWidth: 20,
+                        // colorRectWidth: 20,
                         ...value?.main?.legend
                     },
                 },
                 style: {
                     containerStyle: {
                         background:theme.palette.secondary.main,
-                        width: "90%",
+                        width: "100%",
                         height: "300",
                         borderRadius: "20px",
                         padding: "10px 0 2px 0",
@@ -215,6 +217,28 @@ export const finalDataProvider = (type: string, value: any,theme?:any) => {
                         color:theme.palette.text.primary,
                         ...value?.style?.headerStyle
                     },
+                    legendStyle: {
+                        legend: {
+                            lineHeight: "0.9em",
+                            color: theme.palette.text.primary,
+                            fontSize: "10px",
+
+                            fontFamily: "arial",
+                            padding: "10px 10px",
+                            float: "left",
+                            border: "1px solid rgba(255, 255, 255, 0.3)",
+                            borderRadius: " 8px",
+                            margin: "5px 5px",
+                            ...value?.style?.legendStyle?.legend,
+                        },
+                        legendTitle: {
+                            fontWeight: 500,
+                            marginBottom: "5px",
+                            fontFamily: "roboto",
+                            fontSize: "10px",
+                            ...value?.style?.legendStyle?.legendTitle,
+                        },
+                    },
                     labelStyle: {
                         labelColor:theme.palette.text.primary,
                         bottomLabelOffset: 20,