impaktapps-design 0.2.53 → 0.2.56

package/dist/src/component/BarGraph/BarGraph.d.ts

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

package/dist/src/component/BarGraph/DrawBarGraph.d.ts

@@ -0,0 +1,2 @@
+import { BarGroupProps } from "../../interface/interface";
+export default function DrawBarGraph({ width, height, events, margin, value }: BarGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/component/BarGraph/DrawHorizontalBarGraph.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { BarStackHorizontalProps } from "../../interface/interface";
+declare const _default: React.FunctionComponent<BarStackHorizontalProps>;
+export default _default;

package/dist/src/component/BarGraph/HorizontalBarGraph.d.ts

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

package/dist/src/component/BottomAxis.d.ts

@@ -0,0 +1,3 @@
+import { bottomAxisProps } from '../interface/interface';
+declare const BottomAxis: ({ data, yMax, value, xScale, parentWidth, left }: bottomAxisProps) => import("react/jsx-runtime").JSX.Element;
+export default BottomAxis;

package/dist/src/component/Card/Card.d.ts

@@ -0,0 +1,3 @@
+export default function ImpaktAppsCard({ value }: {
+    value: any;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/component/LeftAxis.d.ts

@@ -0,0 +1,3 @@
+import { leftAxisProps } from '../interface/interface';
+declare const LeftAxis: ({ value, yScale, parentWidth }: leftAxisProps) => import("react/jsx-runtime").JSX.Element;
+export default LeftAxis;

package/dist/src/component/Legend.d.ts

@@ -0,0 +1,2 @@
+export declare function Legend({ value, colorRange, dataKeyArray }: any): import("react/jsx-runtime").JSX.Element;
+export default Legend;

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

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

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

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

package/dist/src/component/PieGraph/DrawPieGraph.d.ts

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

package/dist/src/component/PieGraph/PieGraph.d.ts

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

package/dist/src/component/ProgressBar/ProgressBar.d.ts

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

package/dist/src/component/SpeedoMeter/SpeedoMeter.d.ts

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

package/dist/src/component/Timer/Timer.d.ts

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

package/dist/src/component/ToolTip.d.ts

@@ -0,0 +1,3 @@
+import { tooltipProps } from "../interface/interface";
+declare const ToolTip: ({ style, top, left, tooltipData }: tooltipProps) => import("react/jsx-runtime").JSX.Element;
+export default ToolTip;

package/dist/src/interface/interface.d.ts

@@ -0,0 +1,54 @@
+export interface leftAxisProps {
+    value: any;
+    yScale: any;
+    parentWidth: number;
+}
+export interface bottomAxisProps {
+    left?: number;
+    data?: any[];
+    yMax: number;
+    value: any;
+    xScale: any;
+    parentWidth: number;
+}
+export interface tooltipProps {
+    style: any;
+    top: any;
+    left: any;
+    tooltipData: any;
+}
+export declare type BarGroupProps = {
+    width: number;
+    height: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    events?: boolean;
+    value: any;
+};
+export declare type CityName = "v1" | "v2" | "v3";
+export declare type TooltipData = {
+    bar: any;
+    key: CityName;
+    index: number;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+    color: string;
+};
+export declare type BarStackHorizontalProps = {
+    width?: number;
+    height?: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    events?: boolean;
+    barValue: any;
+};

package/dist/src/lib/index.d.ts

@@ -0,0 +1,8 @@
+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";
+export { default as Card } from "../component/Card/Card";
+export { default as Timer } from "../component/Timer/Timer";

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

@@ -0,0 +1,40 @@
+export declare const finalDataProvider: (type: string, value: any, theme?: any) => {
+    main: any;
+    style: {
+        containerStyle: any;
+        headerStyle: any;
+        tooltipStyle: any;
+        labelStyle: any;
+        barStyle: any;
+        legendStyle?: undefined;
+        pieStyle?: undefined;
+        lineStyle?: undefined;
+    };
+} | {
+    main: any;
+    style: {
+        containerStyle: any;
+        headerStyle: any;
+        tooltipStyle: any;
+        labelStyle: any;
+        legendStyle: {
+            legend: any;
+            legendTitle: any;
+        };
+        pieStyle: any;
+        barStyle?: undefined;
+        lineStyle?: undefined;
+    };
+} | {
+    main: any;
+    style: {
+        containerStyle: any;
+        headerStyle: any;
+        labelStyle: any;
+        lineStyle: any;
+        tooltipStyle?: undefined;
+        barStyle?: undefined;
+        legendStyle?: undefined;
+        pieStyle?: undefined;
+    };
+};

package/package.json

@@ -1,64 +1,67 @@
-{
-  "name": "impaktapps-design",
-  "version": "0.2.53",
-  "dependencies": {
-    "@babel/core": "^7.16.12",
-    "@visx/visx": "^3.1.2",
-    "@vitejs/plugin-react": "^1.1.4",
-    "babel-loader": "^8.2.3",
-    "latest-version": "^7.0.0",
-    "react-d3-speedometer": "^1.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^2.1.3"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://git.act21.io/lovely/incentivo/-/tree/Grapho_In_Development"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "license": "MIT",
-  "author": "Satendra Raghav",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "devDependencies": {
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "typescript": "^4.5.5",
-    "@types/jest": "^27.5.2",
-    "vite": "^2.7.13",
-    "vite-plugin-dts": "^0.9.9"
-  },
-  "main": "./dist/impaktapps-design.umd.js",
-  "module": "./dist/impaktapps-design.es.js",
-  "types": "./dist/impaktapps-design.d.ts",
-  "description": "This is Act21 product powered by ImpaktApps, this is mainly develop to provide different ready to use UI components."
-}
+{
+  "name": "impaktapps-design",
+  "version": "0.2.56",
+  "dependencies": {
+    "@babel/core": "^7.16.12",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.3",
+    "@visx/visx": "^3.1.2",
+    "@vitejs/plugin-react": "^1.1.4",
+    "babel-loader": "^8.2.3",
+    "latest-version": "^7.0.0",
+    "react": "^18.2.0",
+    "react-d3-speedometer": "^1.1.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^2.1.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.act21.io/lovely/incentivo/-/tree/Grapho_In_Development"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "license": "MIT",
+  "author": "Satendra Raghav",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@types/jest": "^27.5.2",
+    "@types/node": "^17.0.12",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "typescript": "^4.5.5",
+    "vite": "^2.7.13",
+    "vite-plugin-dts": "^0.9.9"
+  },
+  "main": "./dist/impaktapps-design.umd.js",
+  "module": "./dist/impaktapps-design.es.js",
+  "types": "./dist/impaktapps-design.d.ts",
+  "description": "This is Act21 product powered by ImpaktApps, this is mainly develop to provide different ready to use UI components."
+}

package/src/component/Card/Card.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import {Box} from "@mui/material";
+
+import { CardActionArea } from "@mui/material";
+
+export default function ImpaktAppsCard({ value }) {
+
+  const { uischema } = value;
+  const uischemaData:any = uischema?.config?.main;
+  const uischemaStyle:any = uischema?.config?.style; 
+
+  const rankStyle = {position: "absolute",top: "0px",right: "0px",color: "#0DF3C2",backgroundColor: "#333333",padding: "4px 8px",borderRadius: "3px 12px 4px 14px",fontWeight: "bold",...uischemaStyle?.rank};
+  const descriptionStyle = {paddingBottom : "10px",textAlign: 'center' ,maxHeight: 100,fontSize: "15px",fontWeight: "400",color: "gray",overflow: "auto",wordWrap: "break-word","&::-webkit-scrollbar": { display: "none" }, ...uischemaStyle?.description };
+  const nameStyle = {color: "#3747A6", backgroundColor: "#eae9e9",marginTop : "8px",padding: "0px 12px",textAlign: "center",borderRadius: "8px",fontWeight : "700", ...uischemaStyle?.name};
+  const cardStyle = { boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',minWidth:280,maxWidth: 280,minHeight : 290,maxHeight:290, position: "relative",borderRadius: "12px",...uischemaStyle?.card};
+  const containerStyle = {backgroundColor: "#ebebff",display: "flex",justifyContent: "center",alignItems : "center", gap: "10px",padding : "5px" }
+
+return (
+  <>
+    <Box sx={containerStyle}>
+          <Card
+              sx={cardStyle}
+            >
+              <CardActionArea>
+                <CardMedia
+                  component="img"
+                  height="140"
+                  image="https://cdn.onlinewebfonts.com/svg/img_296570.png"
+                  style={{ objectFit: "contain",paddingTop:"15px" }}
+                  alt="green iguana"
+                />
+                <CardContent>
+                  <Typography
+                    sx={rankStyle}
+                  >
+                    {"# " + uischemaData?.rank ||"#"}
+                  </Typography>
+                  <Typography
+                    gutterBottom
+                    variant="h6"
+                    component="div"
+                    sx={nameStyle}
+                  >
+                    {uischemaData?.name}
+                  </Typography>
+                  <Typography
+                  
+                    variant="body2"
+                    color="text.secondary"
+                    sx={descriptionStyle}
+                  >
+                    {uischemaData?.description}
+                  </Typography>
+                </CardContent>
+
+              </CardActionArea>
+            </Card>         
+          </Box>
+    </>
+  )
+}

package/src/component/Timer/Timer.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import {Box} from "@mui/material"
+
+
+const CustomTimer = ({ value }) => {
+
+    let {uischema , data } = value;
+
+  const uischemaStyle = uischema?.config?.style;
+  const [days, setDays] = useState(0);
+  const [min, setMin] = useState(0);
+  const [sec, setSec] = useState(0);
+  const [hour, setHours] = useState(0);
+  const [interval, setInter] = useState<any>();
+  
+  useEffect(() => {
+    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_Days = Difference_In_Time / (1000 * 3600 * 24);
+      setDays(Math.floor(Difference_In_Days));
+      setInter(
+        setInterval(() => {
+          const currdate = new Date();
+          setHours(currdate.getHours());
+          setMin(currdate.getMinutes());
+          setSec(currdate.getSeconds());
+        }, 1000)
+      );
+      return () => {
+        clearInterval(interval);
+      };
+    } else {
+      setDays(0);
+      setHours(0);
+      setMin(0);
+      setSec(0);
+    }
+  },[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};
+  const digitStyle = {color : "rgb(0,253,199)",fontSize : "19px",fontWeight:"700",padding:"6px",...uischemaStyle?.digit};
+  const digitLabelStyle = {color : "white",fontSize : "19px",fontWeight:"700",...uischemaStyle?.digitLabel};
+  const containerLabelColor = {color : "white", ...uischemaStyle.containerLabelColor};
+
+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 Yet' : 'Program Over' }
+          </Box>
+        <Box style={{display:"flex", gap: "15px",width:"80%",maxWidth:"650px",marginLeft:"auto",marginRight:"auto"}} >
+           <Box style={boxStyle}> 
+                <Box style={digitStyle}>{days === 0 ? 0 : days < 10 ? 0 : Math.floor(days / 10)}{days === 0 ? 0 : days % 10}</Box>
+                <Box style={digitLabelStyle}>Days</Box>
+            </Box>
+            <Box style={boxStyle}> 
+                <Box style={digitStyle}>{hour === 0
+                  ? 0
+                  : 24 - hour < 10
+                  ? 0
+                  : Math.floor((24 - hour) / 10)}{hour === 0 ? 0 : (24 - hour) % 10}</Box>
+                <Box style={digitLabelStyle}>Hours</Box>
+            </Box>
+            <Box style={boxStyle}> 
+                <Box style={digitStyle}>{min === 0
+                  ? 0
+                  : 60 - min < 10
+                  ? 0
+                  : Math.floor((60 - min) / 10)}{min === 0 ? 0 : (60 - min) % 10}</Box>
+                <Box style={digitLabelStyle}>Mins</Box>
+            </Box>
+            <Box style={boxStyle}> 
+                <Box style={digitStyle}>{sec === 0
+                  ? 0
+                  : 60 - sec < 10
+                  ? 0
+                  : Math.floor((60 - sec) / 10)}{sec === 0 ? 0 : (60 - sec) % 10}</Box>
+                <Box style={digitLabelStyle}>Secs</Box>
+            </Box>
+        </Box>      
+      </Box>
+    </>
+);
+};
+
+export default CustomTimer;

package/src/lib/index.ts

@@ -3,4 +3,6 @@ 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"
+export {default as SpeedoMeter} from "../component/SpeedoMeter/SpeedoMeter"
+export {default as Card} from "../component/Card/Card";
+export {default as Timer} from "../component/Timer/Timer";