@msrajawat298/do-graphs 1.0.0

package/dist/Components/Common/Title/index.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { faArrowRightLong, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useContext, useState } from "react";
+import { PopUpContext } from "../../../Utility/Contexts";
+import { ModelTypes, Modules } from "../../../Utility/Main";
+import Model from "../Model/Model";
+var LayoutTitle = function (_a) {
+    var _b;
+    var id = _a.id;
+    var _c = useContext(PopUpContext), title = _c.title, setTitle = _c.setTitle;
+    var _d = useState(false), showPopup = _d[0], setshowPopup = _d[1];
+    var _e = useState({
+        headTitle: '',
+        module: '',
+        data: {},
+        type: ''
+    }), modelData = _e[0], setModelData = _e[1];
+    var showForm = function (formName, title, data, type) {
+        setshowPopup(true);
+        setModelData({
+            headTitle: title,
+            module: formName,
+            data: data,
+            type: type
+        });
+    };
+    return (_jsxs(PopUpContext.Provider, __assign({ value: { showPopup: showPopup, setshowPopup: setshowPopup, modelData: modelData, setModelData: setModelData, title: title, setTitle: setTitle } }, { children: [_jsxs("div", __assign({ className: 'header-section', style: __assign({}, (_b = title === null || title === void 0 ? void 0 : title.customStyles) === null || _b === void 0 ? void 0 : _b.div) }, { children: [_jsx("div", { children: _jsxs("h4", __assign({ className: 'mar-b-0' }, { children: [title === null || title === void 0 ? void 0 : title.name, " ", _jsx(FontAwesomeIcon, { icon: faArrowRightLong, style: { marginLeft: 5 } })] })) }), _jsx("div", { children: _jsx(FontAwesomeIcon, { style: { marginLeft: 15 }, icon: faEllipsisVertical, size: 'lg', cursor: 'pointer', onClick: function () { return showForm(Modules === null || Modules === void 0 ? void 0 : Modules.TITLE, 'Configure Title Data', { gData: title, layoutId: id }, ModelTypes === null || ModelTypes === void 0 ? void 0 : ModelTypes.SIDE_FORM); } }) })] })), showPopup && _jsx(Model, { headTitle: modelData === null || modelData === void 0 ? void 0 : modelData.headTitle, module: modelData === null || modelData === void 0 ? void 0 : modelData.module, data: modelData === null || modelData === void 0 ? void 0 : modelData.data, type: modelData === null || modelData === void 0 ? void 0 : modelData.type })] })));
+};
+export default LayoutTitle;

package/dist/Components/Common/Widget/index.css

@@ -0,0 +1,435 @@
+.widget-section {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    box-shadow: 0 0 5px #dedede;
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+    padding: 15px;
+    transition: .1s all linear;
+    background: #fff;
+    .logo{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100px;
+        height: 100px;
+    }
+    .wid-progress{
+        display: flex;
+        flex-direction: row;
+        height: 50px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 50px;
+        p{
+            width: 50px;
+            height: 50px;
+            border: 1px solid #fd746c;
+            border-radius: 100%;
+            font-size: 20px;
+            text-align: center;
+            margin-bottom: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 25px;
+            margin-right: 25px;
+            color: #fd746c;
+            position: relative;
+        }
+        p::after{
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: -100%;
+            width: 100%;
+            background: #fd746c;
+            height: 1px;
+        }
+        p:nth-child(3)::after{
+            display: none;
+        }
+        .active{
+            background: #fd746c;
+            color: #fff;
+        }
+    }
+    .bubble-draw{
+        position: absolute;
+        bottom: 200px;
+        left: 100px;
+        width: 100px;
+        height: 100px;
+        background: rgba(255, 144, 104, 0.5);
+        border-radius: 100%;
+        transition: .1s all linear;
+        animation: bubblefloat 10s linear infinite;
+        z-index: 0;
+    }
+
+    .widget-top, .chart-select-section{
+        z-index: 1;
+    }
+
+    .main-title {
+        font-size: 40px;
+        font-weight: 700;
+        position: relative;
+    }
+
+    .mar-t-20{
+        margin-top: 20px;
+    }
+    .mar-b-50{
+        margin-bottom: 50px;
+    }
+
+    .note {
+        font-size: 15px;
+        opacity: .8;
+    }
+
+    .skp-txt{
+        color: #ff9068;
+        margin-top: 15px;
+        margin-bottom: 0;
+        cursor: pointer;
+    }
+
+    .ch-file {
+        width: 50%;
+        background: linear-gradient(45deg, #fd746c, #ff9068);
+        margin-top: 40px;
+        padding: 15px;
+        font-size: 15px;
+        color: #fff;
+        text-transform: uppercase;
+        box-shadow: 1px 2px 3px #605757;
+    }
+    .configure-section{
+        z-index: 1;
+        .form-group{
+            width: 90%;
+            justify-content: flex-start;
+            align-items: center;
+            margin-bottom: 15px;
+            margin-left: 5%;
+            flex-wrap: wrap;
+            label{
+                width: 40%;
+                font-size: 13px;
+                font-weight: 500;
+                text-align: left;
+            }
+            input, select{
+                width: 60%;
+                font-size: 13px;
+                height: 40px;
+            }
+        }
+        .dt-frmgrp{
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: center;
+            width: 60%;
+            button{
+                font-size: 13px;
+                border: 1px solid #ccc;
+                margin-bottom: 5px;
+                margin-left: 5px;
+                margin-right: 5px;
+            }
+            .active{
+                background: #ff9068;
+                color: #fff;
+            }
+        }
+    }
+    .cht-box-section{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 50%;
+        margin-left: 25%;
+        .chart-box{
+            margin-bottom: 15px;
+            cursor: pointer;
+            position: relative;
+            img{
+                width: 50%;
+                margin-bottom: 15px;
+            }
+            p{
+                font-size: 12px;
+                font-weight: 500;
+                margin-bottom: 0;
+                border: 1px solid #dedede;
+                padding: 5px;
+                border-radius: 5px;
+            }
+        }
+    }
+}
+
+.widget-section::after{
+    content: '';
+    position: absolute;
+    top: -80px;
+    right: -80px;
+    width: 350px;
+    height: 350px;
+    background: rgba(255, 144, 104, 0.2);
+    border-radius: 100%;
+    transition: .1s all linear;
+}
+.widget-section::before{
+    content: '';
+    position: absolute;
+    bottom: -80px;
+    left: -80px;
+    width: 350px;
+    height: 350px;
+    background: rgba(255, 144, 104, 0.2);
+    border-radius: 100%;
+    transition: .1s all linear;
+}
+
+@keyframes bubblefloat {
+    0%{ bottom: 0%; left: 0%; }
+    25%{ bottom: 80%; left: 50%; }
+    50%{ bottom: 0%; left: 50%; }
+    75%{ bottom: 80%; left: 90%; }
+    100%{ bottom: 0%; left: 0%; }
+}
+
+.half-widget-section{
+    position: fixed;
+    width: 25%;
+    height: 100vh;
+    top: 0;
+    right: 0;
+    box-sizing: border-box;
+    box-shadow: 0 0 5px #dedede;
+    border-radius: 5px;
+    overflow-y: scroll;
+    padding: 15px;
+    transition: .1s all linear;
+    background: #fff;
+    .main-title {
+        font-size: 15px;
+        font-weight: 600;
+        position: relative;
+        border-radius: 5px;
+        text-align: left;
+        margin-bottom: 15px;
+        padding: 8px;
+        padding-left: 0;
+    }
+    .note{
+        text-align: left;
+        font-size: 12px;
+        opacity: .8;
+        margin-bottom: 20px;
+    }
+    .or-txt{
+        font-weight: 500;
+        font-size: 13px;
+        position: relative;
+        text-align: center;
+    }
+    .or-txt::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 45%;
+        height: 1px;
+        background: #000;
+    }
+    .or-txt::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: 45%;
+        height: 1px;
+        background: #000;
+    }
+    .ch-file {
+        width: 100%;
+        background: linear-gradient(45deg, #fd746c, #ff9068);
+        margin-top: 40px;
+        margin-bottom: 30px;
+        padding: 10px;
+        font-size: 13px;
+        color: #fff;
+        text-transform: uppercase;
+        box-shadow: 1px 2px 3px #605757;
+    }
+    .mar-t-20{
+        margin-top: 20px;
+    }
+    .mar-b-0{
+        margin-bottom: 0;
+    }
+    .mar-b-50{
+        margin-bottom: 50px;
+    }
+    .sv-btn{
+        font-size: 13px;
+        margin-bottom: 20px;
+    }
+    .add-nc{
+        opacity: .8;
+        font-size: 13px;
+        text-align: left;
+        margin-bottom: 0;
+    }
+    .configure-section{
+        width: 100%;
+        .form-group{
+            width: 100%;
+            justify-content: flex-start;
+            align-items: center;
+            margin-bottom: 15px;
+            flex-wrap: wrap;
+            label{
+                width: 40%;
+                font-size: 12px;
+                font-weight: 500;
+                text-align: left;
+            }
+            input, select{
+                width: 60%;
+                font-size: 12px;
+                height: 40px;
+            }
+        }
+        .dt-frmgrp{
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: center;
+            width: 60%;
+            button{
+                font-size: 13px;
+                border: 1px solid #ccc;
+                margin-bottom: 5px;
+                margin-left: 5px;
+                margin-right: 5px;
+            }
+            .active{
+                background: #ff9068;
+                color: #fff;
+            }
+        }
+    }
+    .cht-box-section{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 100%;
+        .chart-box{
+            margin-bottom: 15px;
+            cursor: pointer;
+            position: relative;
+            img{
+                width: 100%;
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+
+.chart-box:hover, .chart-active{
+    background: #eee;
+    border-radius: 5px;
+}
+
+.half-widget-section::-webkit-scrollbar{
+    width: 2px;
+    height: 2px;
+}
+.half-widget-section::-webkit-scrollbar-track{
+    border-radius: 10px;
+}
+.half-widget-section::-webkit-scrollbar-thumb{
+    background: #ef5323;
+    border-radius: 10px;
+}
+.hide-widget-btn{
+    position: fixed;
+    top: 15px;
+    right: 0;
+    width: 20px;
+    height: 30px;
+    text-align: center;
+    border-radius: 5px 0 0 5px;
+    background: #fd746c;
+    z-index: 1;
+    button{
+        width: 100%;
+        height: 100%;
+        font-size: 15px;
+        color: #fff;
+        padding: 0;
+    }
+}
+
+.cols-btn{
+    width: 60%;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: center;
+    button{
+        border: 1px solid #dedede;
+        padding: 5px;
+        border-radius: 5px;
+        margin-left: 5px;
+        margin-right: 5px;
+        font-size: 13px;
+        background: #fff;
+        margin-bottom: 5px;
+    }
+}
+.w-60{
+    width: 60%;
+}
+.w-100{
+    width: 100%;
+}
+.gad{
+    margin-left: 40%;
+    font-size: 12px;
+    margin-bottom: 15px;
+}
+
+.wid-menu{
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    select{
+        width: 45%;
+        font-size: 12px;
+        margin-right: 5%;
+    }
+    button{
+        width: 50%;
+        font-size: 12px;
+        border: 1px solid #ff9068;
+        color: #ff9068;
+    }
+}
+.pv-btn{
+    border: 1px solid #0d6efd;
+    color: #0d6efd;
+    margin-left: 15px;
+}