@msrajawat298/do-graphs 1.0.0

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

@@ -0,0 +1,407 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext, useRef, useState } from 'react';
+import './index.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretRight, faLongArrowAltRight, faPlusCircle, faUpload } from '@fortawesome/free-solid-svg-icons';
+import * as XLSX from 'xlsx';
+import { APIRequestMethods, ChartCategories, ChartTypes, getLocal, ModelTypes, Modules, storeLocal } from '../../../Utility/Main';
+import { PopUpContext } from '../../../Utility/Contexts';
+import { faCheckCircle, faEye, faSave } from '@fortawesome/free-regular-svg-icons';
+import { update } from '../../../Services/Routing';
+import { toast } from 'react-toastify';
+import { OptionalBarDatasets } from '../../Charts/Bar/Format';
+import { ChartOptions, DoughnutAndPieOptions } from '../../Charts/Options';
+import { OptionalLineDatasets } from '../../Charts/Line/Format';
+import { OptionalDoughnutDatasets } from '../../Charts/DoughnutAndPie/Format';
+import { OptionalPolarDatasets } from '../../Charts/PolarArea/Format';
+import { TableStyles } from '../../Charts/Table/Styles';
+import { OptionalScatterDatasets } from '../../Charts/Scatter/Format';
+import Model from '../Model/Model';
+import { useNavigate } from 'react-router-dom';
+var Widget = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var navigate = useNavigate();
+    var inputFile = useRef(null);
+    var _k = useContext(PopUpContext), setLayout = _k.setLayout, layout = _k.layout, menu = _k.menu, setMenu = _k.setMenu, menuVal = _k.menuVal, setMenuVal = _k.setMenuVal, title = _k.title;
+    var getJSONData = getLocal('importedFile');
+    var getAxisColumns = getLocal('columnNames');
+    var _l = useState(1), activeTab = _l[0], setActiveTab = _l[1];
+    var _m = useState(getJSONData ? JSON.parse(getJSONData) : []), jsonData = _m[0], setJsonData = _m[1];
+    var _o = useState(0), chartType = _o[0], setChartType = _o[1];
+    var _p = useState(getAxisColumns ? JSON.parse(getAxisColumns) : []), axisColumns = _p[0], setAxisColumns = _p[1];
+    var _q = useState({
+        title: '',
+        xLabel: [],
+        apiCall: {
+            display: false,
+            uri: '',
+            body: '',
+            method: '',
+            headers: '',
+            yAxisField: [],
+            xAxisField: [],
+            success: false
+        }
+    }), defaultConfig = _q[0], setDefaultConfig = _q[1];
+    var _r = useState(''), yAxisVal = _r[0], setYAxisVal = _r[1];
+    var _s = useState(''), chtYpe = _s[0], setchtYpe = _s[1];
+    var configureChartTypesIds = [1, 2, 3, 4, 5, 6, 7, 8, 11];
+    var _t = useState([{ type: '', data: [] }]), datasets = _t[0], setDatasets = _t[1];
+    var _u = useState({ cols: [], rows: [] }), colsValues = _u[0], setColsValues = _u[1];
+    var _v = useState(0), activeDataset = _v[0], setActiveDataset = _v[1];
+    var _w = useState(true), showWidDiv = _w[0], setshowWidDiv = _w[1];
+    var _x = useState(false), showPopup = _x[0], setshowPopup = _x[1];
+    var _y = useState({
+        headTitle: '',
+        module: '',
+        data: {},
+        type: ''
+    }), modelData = _y[0], setModelData = _y[1];
+    var _z = useState(''), customFiles = _z[0], setCustomFiles = _z[1];
+    var showForm = function (formName, title, data, type) {
+        setshowPopup(true);
+        setModelData({
+            headTitle: title,
+            module: formName,
+            data: data,
+            type: type
+        });
+    };
+    var openFileBrowser = function () {
+        inputFile.current.click();
+    };
+    var handleFileChange = function (e) {
+        XlsxToJson(e.target.files[0]);
+        setActiveTab(2);
+    };
+    var handleChartType = function (id) {
+        setChartType(id);
+        setActiveTab(3);
+        setDatasets([{ type: '', data: [] }]);
+        setYAxisVal('');
+        setchtYpe('');
+    };
+    var handleDefault = function (e) {
+        var _a, _b;
+        var _c, _d, _e;
+        var _f = e.target, name = _f.name, value = _f.value;
+        var labels = [];
+        if (name === 'xLabel') {
+            for (var i = 0; i < (jsonData === null || jsonData === void 0 ? void 0 : jsonData.length); i++) {
+                labels === null || labels === void 0 ? void 0 : labels.push(jsonData[i][value]);
+            }
+            if ((_c = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _c === void 0 ? void 0 : _c.display) {
+                defaultConfig['apiCall']['xAxisField'][activeDataset] = value;
+            }
+            setDefaultConfig(__assign(__assign({}, defaultConfig), (_a = {}, _a[name] = labels, _a)));
+        }
+        else if (name === 'yValue') {
+            setYAxisVal(value);
+            for (var i = 0; i < (jsonData === null || jsonData === void 0 ? void 0 : jsonData.length); i++) {
+                labels === null || labels === void 0 ? void 0 : labels.push((_d = Number(jsonData[i][value])) === null || _d === void 0 ? void 0 : _d.toFixed(1));
+            }
+            for (var i = 0; i < (datasets === null || datasets === void 0 ? void 0 : datasets.length); i++) {
+                datasets[activeDataset]['data'] = labels;
+            }
+            if ((_e = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _e === void 0 ? void 0 : _e.display) {
+                defaultConfig['apiCall']['yAxisField'][activeDataset] = value;
+                setDefaultConfig(__assign({}, defaultConfig));
+            }
+            setDatasets(__spreadArray([], datasets, true));
+        }
+        else if (name === 'type') {
+            setchtYpe(value);
+            for (var i = 0; i < (datasets === null || datasets === void 0 ? void 0 : datasets.length); i++) {
+                datasets[activeDataset]['type'] = value;
+            }
+            setDatasets(__spreadArray([], datasets, true));
+        }
+        else {
+            setDefaultConfig(__assign(__assign({}, defaultConfig), (_b = {}, _b[name] = value, _b)));
+        }
+    };
+    var handleColumns = function (cols) {
+        var _a, _b, _c;
+        var checkIfAlreadyPresent = ((_a = colsValues['cols']) === null || _a === void 0 ? void 0 : _a.find(function (it) { return it === cols; })) || null;
+        if (!checkIfAlreadyPresent) {
+            colsValues['cols'] = __spreadArray(__spreadArray([], colsValues['cols'], true), [cols], false);
+        }
+        // VALUES MAP
+        var row = jsonData.map(function (it) { return it[cols]; });
+        if (((_b = colsValues === null || colsValues === void 0 ? void 0 : colsValues.rows) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            for (var i = 0; i < ((_c = colsValues.rows) === null || _c === void 0 ? void 0 : _c.length); i++) {
+                colsValues['rows'][i] += ',' + row[i];
+                colsValues['rows'][i] = colsValues['rows'][i].split(',');
+            }
+        }
+        else {
+            colsValues['rows'] = row;
+        }
+        setColsValues(__assign({}, colsValues));
+    };
+    var handleApiChanges = function (e, field) {
+        if (field === 'display') {
+            var _a = e.target, name_1 = _a.name, checked = _a.checked;
+            defaultConfig[name_1][field] = checked;
+        }
+        else {
+            var _b = e.target, name_2 = _b.name, value = _b.value;
+            defaultConfig[name_2][field] = value;
+        }
+        setDefaultConfig(__assign({}, defaultConfig));
+    };
+    var renderChartTypeForms = function (e, chartType) {
+        e.preventDefault();
+        if (!(defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.title)) {
+            toast.error('Please enter chart title.');
+        }
+        else {
+            var mapKey = layout === null || layout === void 0 ? void 0 : layout.map(function (it) { return Number(it === null || it === void 0 ? void 0 : it.i); });
+            var getKey = (mapKey === null || mapKey === void 0 ? void 0 : mapKey.length) > 0 ? Math.max.apply(Math, mapKey) : 0;
+            var options_1 = {};
+            var chartOptions = void 0;
+            var mapDatasetsConfig = void 0;
+            switch (chartType) {
+                case 1:
+                    options_1 = OptionalBarDatasets();
+                    chartOptions = ChartOptions(ChartTypes.BAR, { indexAxis: 'x' });
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.BAR }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.BAR, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 2:
+                    options_1 = OptionalLineDatasets();
+                    chartOptions = ChartOptions(ChartTypes.LINE);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.LINE }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes === null || ChartTypes === void 0 ? void 0 : ChartTypes.LINE, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 3:
+                    options_1 = OptionalBarDatasets();
+                    chartOptions = ChartOptions(ChartTypes.BAR, { indexAxis: 'y' });
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.BAR }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.BAR, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 4:
+                    chartOptions = ChartOptions(ChartTypes.BAR);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { var chartObj; (it === null || it === void 0 ? void 0 : it.type) === ChartTypes.BAR ? chartObj = __assign(__assign({}, it), OptionalBarDatasets()) : chartObj = __assign(__assign({}, it), OptionalLineDatasets()); return chartObj; });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.MIXED, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 5:
+                    options_1 = OptionalDoughnutDatasets();
+                    chartOptions = DoughnutAndPieOptions(ChartTypes.DOUGHNUT);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.DOUGHNUT }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.DOUGHNUT, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, chart: ChartTypes === null || ChartTypes === void 0 ? void 0 : ChartTypes.DOUGHNUT, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 6:
+                    options_1 = OptionalDoughnutDatasets();
+                    chartOptions = DoughnutAndPieOptions(ChartTypes.PIE);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.PIE }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.PIE, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, chart: ChartTypes === null || ChartTypes === void 0 ? void 0 : ChartTypes.PIE, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 7:
+                    options_1 = OptionalPolarDatasets();
+                    chartOptions = ChartOptions(ChartTypes.POLAR);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.POLAR }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.POLAR, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 8:
+                    options_1 = OptionalScatterDatasets();
+                    chartOptions = ChartOptions(ChartTypes.SCATTER);
+                    mapDatasetsConfig = datasets === null || datasets === void 0 ? void 0 : datasets.map(function (it) { return __assign(__assign(__assign({}, it), options_1), { type: ChartTypes.SCATTER }); });
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.SCATTER, props: { title: defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: mapDatasetsConfig, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 10:
+                    chartOptions = TableStyles();
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.TABLE, props: { title: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.title, tableData: colsValues, chartOptions: chartOptions, id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 11:
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: ChartTypes.PROGRESS, props: { title: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.title, labels: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.xLabel, datasets: datasets === null || datasets === void 0 ? void 0 : datasets[0], id: "".concat(getKey + 1), apiCall: defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall } }], false));
+                    break;
+                case 12:
+                    layout && setLayout(__spreadArray(__spreadArray([], layout, true), [{ i: "".concat(getKey + 1), x: 0, y: 0, w: 4, h: 6, isDraggable: true, isResizable: true, static: false, resizeHandles: ['se'], component: 'custom', props: { component: customFiles, id: "".concat(getKey + 1) } }], false));
+                    break;
+                default:
+                    setLayout([]);
+            }
+            setActiveTab(1);
+            setDefaultConfig({ title: '', xLabel: [], apiCall: {
+                    display: false,
+                    uri: '',
+                    body: '',
+                    method: '',
+                    headers: '',
+                    yAxisField: [],
+                    success: false
+                } });
+            setDatasets([{ type: '', data: [] }]);
+            setChartType(0);
+            setCustomFiles('');
+        }
+    };
+    var AddNewDataset = function (e) {
+        e.preventDefault();
+        setDatasets(__spreadArray(__spreadArray([], datasets, true), [{ type: '', data: [] }], false));
+    };
+    var XlsxToJson = function (file) {
+        if (file) {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                var data = e.target.result;
+                var workbook = XLSX.read(data, { type: "binary" });
+                var sheetName = workbook.SheetNames[0];
+                var worksheet = workbook.Sheets[sheetName];
+                var json = XLSX.utils.sheet_to_json(worksheet);
+                var columns = XLSX.utils.sheet_to_json(worksheet, { header: 1 })[0];
+                setAxisColumns(columns);
+                setJsonData(json);
+                storeLocal('importedFile', JSON.stringify(json));
+                storeLocal('columnNames', JSON.stringify(columns));
+            };
+            reader.readAsBinaryString(file);
+        }
+    };
+    var handleGetApiData = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var config, result, getColumns, error_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
+                case 0:
+                    _k.trys.push([0, 4, , 5]);
+                    if (!(((_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _a === void 0 ? void 0 : _a.method) && ((_b = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _b === void 0 ? void 0 : _b.uri))) return [3 /*break*/, 2];
+                    config = {
+                        method: (_c = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _c === void 0 ? void 0 : _c.method
+                    };
+                    if ((_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _d === void 0 ? void 0 : _d.headers) {
+                        config['headers'] = __assign(__assign({}, props === null || props === void 0 ? void 0 : props.headers), JSON.parse((_e = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _e === void 0 ? void 0 : _e.headers));
+                    }
+                    else {
+                        config['headers'] = props === null || props === void 0 ? void 0 : props.headers;
+                    }
+                    if (((_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _f === void 0 ? void 0 : _f.method) !== (APIRequestMethods === null || APIRequestMethods === void 0 ? void 0 : APIRequestMethods.GET)) {
+                        config['body'] = (_g = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _g === void 0 ? void 0 : _g.body;
+                    }
+                    return [4 /*yield*/, fetch((_h = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _h === void 0 ? void 0 : _h.uri, config).then(function (res) { return res.json(); })];
+                case 1:
+                    result = _k.sent();
+                    if ((result === null || result === void 0 ? void 0 : result.status) === 'OK') {
+                        getColumns = Object.keys((_j = result === null || result === void 0 ? void 0 : result.message) === null || _j === void 0 ? void 0 : _j[0]);
+                        setAxisColumns(getColumns);
+                        defaultConfig['apiCall']['success'] = true;
+                        setDefaultConfig(__assign({}, defaultConfig));
+                        setJsonData(result === null || result === void 0 ? void 0 : result.message);
+                    }
+                    return [3 /*break*/, 3];
+                case 2:
+                    toast.error('please enter api method and uri.');
+                    _k.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _k.sent();
+                    toast.error(error_1 === null || error_1 === void 0 ? void 0 : error_1.toString());
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleShowDiv = function () {
+        if (showWidDiv) {
+            setshowWidDiv(false);
+        }
+        else {
+            setshowWidDiv(true);
+        }
+    };
+    var saveUpdates = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var bodyData, config, result, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    bodyData = {
+                        title: title,
+                        layout: layout,
+                        menuId: (menuVal === null || menuVal === void 0 ? void 0 : menuVal.prevState) !== menuVal.currState ? Number(menuVal === null || menuVal === void 0 ? void 0 : menuVal.currState) : Number(menuVal === null || menuVal === void 0 ? void 0 : menuVal.prevState)
+                    };
+                    config = {
+                        method: 'PATCH',
+                        body: JSON.stringify(bodyData),
+                        headers: __assign({ 'Content-Type': 'application/json' }, props === null || props === void 0 ? void 0 : props.headers)
+                    };
+                    return [4 /*yield*/, update(props === null || props === void 0 ? void 0 : props.routeBackendUrl, config, Number(props === null || props === void 0 ? void 0 : props.id))];
+                case 1:
+                    result = _a.sent();
+                    toast.success(result === null || result === void 0 ? void 0 : result.message);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_2 = _a.sent();
+                    toast.error(error_2 === null || error_2 === void 0 ? void 0 : error_2.toString());
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleNav = function (uri) {
+        window.open(uri, '_blank');
+    };
+    var handleCustomFile = function (e) {
+        setCustomFiles(e.target.value);
+    };
+    return (_jsxs(PopUpContext.Provider, __assign({ value: { showPopup: showPopup, setshowPopup: setshowPopup, modelData: modelData, setModelData: setModelData, menu: menu, setMenu: setMenu } }, { children: [_jsx("div", __assign({ className: 'hide-widget-btn', onClick: handleShowDiv }, { children: _jsx("button", __assign({ className: 'btn' }, { children: _jsx(FontAwesomeIcon, { icon: faCaretRight }) })) })), _jsxs("div", __assign({ className: props === null || props === void 0 ? void 0 : props.addCustomCss, style: { display: showWidDiv ? 'block' : 'none' } }, { children: [_jsxs("div", __assign({ className: 'text-start' }, { children: [_jsxs("button", __assign({ className: 'btn btn-primary sv-btn', onClick: function () { return saveUpdates(); } }, { children: [_jsx(FontAwesomeIcon, { icon: faSave, style: { marginRight: 5 } }), " Save"] })), _jsxs("button", __assign({ className: 'btn sv-btn pv-btn', onClick: function () { return handleNav(props === null || props === void 0 ? void 0 : props.preview); } }, { children: [_jsx(FontAwesomeIcon, { icon: faEye, style: { marginRight: 5 } }), "Preview"] })), _jsx("p", __assign({ className: 'add-nc' }, { children: "Add New Chart" }))] })), _jsxs("div", __assign({ className: 'widget-top' }, { children: [_jsx("h5", __assign({ className: "main-title mar-b-0 mar-t-0" }, { children: "Select File to Generate Chart" })), _jsxs("p", __assign({ className: 'note' }, { children: ["Note", _jsx("span", __assign({ style: { color: 'red' } }, { children: "*" })), ": File should be of xlsx type. "] })), _jsxs("button", __assign({ className: "btn ch-file mar-t-20", onClick: openFileBrowser }, { children: [_jsx(FontAwesomeIcon, { icon: faUpload, style: { marginRight: 5 } }), " Choose File"] })), _jsx("input", { type: 'file', name: 'file', id: 'file', ref: inputFile, accept: 'xlsx', style: { display: 'none' }, onChange: function (e) { return handleFileChange(e); } })] })), _jsx("p", __assign({ className: 'or-txt' }, { children: "OR" })), _jsxs("div", __assign({ className: 'chart-select-section' }, { children: [_jsx("h5", __assign({ className: "main-title ".concat(!(props === null || props === void 0 ? void 0 : props.isHalfWidget) && 'mar-b-50') }, { children: "Select Chart Type" })), _jsx("div", __assign({ className: 'row cht-box-section' }, { children: ChartCategories === null || ChartCategories === void 0 ? void 0 : ChartCategories.map(function (it, i) { return (_jsx("div", __assign({ className: "chart-box ".concat(chartType === (it === null || it === void 0 ? void 0 : it.id) ? 'chart-active' : 'not-active', " col-md-2"), onClick: function () { return handleChartType(it === null || it === void 0 ? void 0 : it.id); } }, { children: _jsx("img", { src: it === null || it === void 0 ? void 0 : it.image, alt: it === null || it === void 0 ? void 0 : it.name, title: it === null || it === void 0 ? void 0 : it.title }) }), i)); }) }))] })), activeTab === 3 && _jsxs("div", __assign({ className: 'configure-section' }, { children: [_jsx("h5", __assign({ className: "main-title ".concat((props === null || props === void 0 ? void 0 : props.isHalfWidget) ? 'mar-b-0' : 'mar-b-50') }, { children: "Configure Excel Data For Chart" })), _jsxs("div", __assign({ className: 'cft-section' }, { children: [_jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Title:" }), _jsx("input", { type: 'text', name: 'title', placeholder: 'Enter Title for Chart', className: 'form-control', onChange: function (e) { return handleDefault(e); } })] })), chartType !== 12 && _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "API:" }), _jsx("input", { type: 'checkbox', name: 'apiCall', value: (_a = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _a === void 0 ? void 0 : _a.display, style: { width: 'auto' }, onChange: function (e) { return handleApiChanges(e, 'display'); } })] })), ((_b = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _b === void 0 ? void 0 : _b.display) && _jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "API Method:" }), _jsxs("select", __assign({ className: 'form-control', name: 'apiCall', value: (_c = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _c === void 0 ? void 0 : _c.method, onChange: function (e) { return handleApiChanges(e, 'method'); } }, { children: [_jsx("option", __assign({ value: '' }, { children: "Select Request Method" })), _jsx("option", { children: "GET" }), _jsx("option", { children: "POST" }), _jsx("option", { children: "PATCH" }), _jsx("option", { children: "DELETE" }), _jsx("option", { children: "PUT" })] }))] })), _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "API URI:" }), _jsx("input", { type: 'text', name: 'apiCall', className: 'form-control', value: (_d = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _d === void 0 ? void 0 : _d.uri, onChange: function (e) { return handleApiChanges(e, 'uri'); } })] })), _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "API Headers:" }), _jsx("textarea", { name: 'apiCall', rows: 2, cols: 5, className: 'form-control', value: (_e = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _e === void 0 ? void 0 : _e.headers, style: { width: '60%', fontSize: 12 }, onChange: function (e) { return handleApiChanges(e, 'headers'); } })] })), ((_f = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _f === void 0 ? void 0 : _f.method) && ((_g = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _g === void 0 ? void 0 : _g.method) !== (APIRequestMethods === null || APIRequestMethods === void 0 ? void 0 : APIRequestMethods.GET) && _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "API Body:" }), _jsx("textarea", { name: 'apiCall', className: 'form-control', value: (_h = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _h === void 0 ? void 0 : _h.body, rows: 2, cols: 5, style: { width: '60%', fontSize: 12 }, onChange: function (e) { return handleApiChanges(e, 'body'); } })] })), _jsxs("div", __assign({ className: 'button mar-b-15' }, { children: [_jsx("button", __assign({ className: 'btn gad btn-primary', onClick: function () { return handleGetApiData(); } }, { children: "Get API Data" })), " ", ((_j = defaultConfig === null || defaultConfig === void 0 ? void 0 : defaultConfig.apiCall) === null || _j === void 0 ? void 0 : _j.success) && _jsx(FontAwesomeIcon, { icon: faCheckCircle, color: 'green', style: { marginLeft: 5 }, size: 'lg' })] }))] }), configureChartTypesIds.includes(chartType) && _jsxs(React.Fragment, { children: [_jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Select X Axis Label:" }), _jsxs("select", __assign({ name: 'xLabel', className: 'form-control', onChange: function (e) { return handleDefault(e); } }, { children: [_jsx("option", { children: "-- Select --" }), axisColumns === null || axisColumns === void 0 ? void 0 : axisColumns.map(function (it, i) { return (_jsx("option", { children: it }, i)); })] }))] })), chartType !== 11 &&
+                                                _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Datasets:" }), _jsx("div", __assign({ className: 'd-flex dt-frmgrp' }, { children: datasets === null || datasets === void 0 ? void 0 : datasets.map(function (item, i) { return (_jsxs(React.Fragment, { children: [_jsxs("button", __assign({ className: "btn dtsts ".concat(activeDataset === i ? 'active' : ''), onClick: function () { setActiveDataset(i); setYAxisVal(''); setchtYpe(''); } }, { children: ["Dataset ", i] })), i === (datasets === null || datasets === void 0 ? void 0 : datasets.length) - 1 && _jsx(FontAwesomeIcon, { icon: faPlusCircle, color: '#ff9068', onClick: function (e) { return AddNewDataset(e); }, cursor: 'pointer' })] }, i)); }) }))] })), chartType === 4 && _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Select Chart:" }), _jsx("div", __assign({ className: 'd-flex dt-frmgrp' }, { children: _jsxs("select", __assign({ name: 'type', value: chtYpe, className: 'form-control', onChange: function (e) { return handleDefault(e); } }, { children: [_jsx("option", { children: "-- Select --" }), _jsx("option", { children: ChartTypes.BAR }), _jsx("option", { children: ChartTypes.LINE })] })) }))] })), _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Select Y Axis Value:" }), _jsxs("select", __assign({ name: 'yValue', className: 'form-control', value: yAxisVal, onChange: function (e) { return handleDefault(e); } }, { children: [_jsx("option", { children: "-- Select --" }), axisColumns === null || axisColumns === void 0 ? void 0 : axisColumns.map(function (it, i) { return (_jsx("option", { children: it }, i)); })] }))] }))] }), chartType === 10 && _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Select Columns:" }), _jsx("div", __assign({ className: 'd-flex cols-btn' }, { children: axisColumns === null || axisColumns === void 0 ? void 0 : axisColumns.map(function (it, i) { return (_jsx("button", __assign({ className: 'btn', onClick: function () { return handleColumns(it); } }, { children: it }), i)); }) }))] })), chartType === 12 && _jsxs("div", __assign({ className: 'form-group d-flex' }, { children: [_jsx("label", { children: "Enter React Component Path:" }), _jsx("input", { type: 'text', name: 'customFiles', className: 'form-control', onChange: function (e) { return handleCustomFile(e); } })] })), _jsxs("button", __assign({ className: 'btn ch-file', onClick: function (e) { return renderChartTypeForms(e, chartType); } }, { children: ["Generate Chart ", _jsx(FontAwesomeIcon, { icon: faLongArrowAltRight, style: { marginLeft: 5 } })] }))] }))] })), _jsx("h5", __assign({ className: 'main-title mar-b-0' }, { children: "Menu" })), _jsx("p", __assign({ className: 'note' }, { children: "Select or create dynamic menu for this page." })), _jsxs("div", __assign({ className: 'd-flex wid-menu' }, { children: [_jsxs("select", __assign({ className: 'form-control', name: 'menu', value: (menuVal === null || menuVal === void 0 ? void 0 : menuVal.currState) || '', onChange: function (e) { return setMenuVal(function (prev) { return { prevState: prev === null || prev === void 0 ? void 0 : prev.currState, currState: e.target.value }; }); } }, { children: [_jsx("option", __assign({ value: '' }, { children: "-- Select Menu --" })), menu === null || menu === void 0 ? void 0 : menu.map(function (it, i) { return (_jsx("option", __assign({ value: it === null || it === void 0 ? void 0 : it.id }, { children: it === null || it === void 0 ? void 0 : it.name }), i)); })] })), _jsxs("button", __assign({ className: 'btn', onClick: function () { return showForm(Modules === null || Modules === void 0 ? void 0 : Modules.MENU, 'Configure Menu', menu, ModelTypes === null || ModelTypes === void 0 ? void 0 : ModelTypes.FORM); } }, { children: [_jsx(FontAwesomeIcon, { icon: faPlusCircle }), " Create New Menu"] }))] }))] })), 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, headers: props === null || props === void 0 ? void 0 : props.headers, backendUrl: props === null || props === void 0 ? void 0 : props.menuBackendUrl })] })));
+};
+export default Widget;

package/dist/Pages/Dashboard/CreatePage.css

@@ -0,0 +1,23 @@
+.crt-pge-st{
+    margin-top: 15px;
+    margin-bottom: 15px;
+    .form-group{
+        margin-bottom: 15px;
+        label{
+            font-size: 13px;
+            font-weight: 500;
+            opacity: .8;
+        }
+        input{
+            font-size: 13px;
+        }
+    }
+    .add-btn{
+        width: 50%;
+        background: linear-gradient(45deg, #fd746c, #ff9068);
+        padding: 8px;
+        font-size: 13px;
+        color: #fff;
+        text-transform: uppercase;
+    }
+}

package/dist/Pages/Dashboard/CreatePage.js

@@ -0,0 +1,115 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from "react";
+import './CreatePage.css';
+import { create } from "../../Services/Routing";
+import { toast } from "react-toastify";
+import { PopUpContext } from "../../Utility/Contexts";
+export var CreatePage = function (props) {
+    var _a;
+    var _b = useState(props === null || props === void 0 ? void 0 : props.data), data = _b[0], setData = _b[1];
+    var _c = useContext(PopUpContext), setshowPopup = _c.setshowPopup, setRoutePages = _c.setRoutePages, routePages = _c.routePages;
+    var handleChange = function (e) {
+        var _a;
+        var _b = e.target, name = _b.name, value = _b.value;
+        if (name === 'title') {
+            data['title'] = __assign(__assign({}, data['title']), { name: value });
+            setData(__assign({}, data));
+        }
+        else {
+            setData(__assign(__assign({}, data), (_a = {}, _a[name] = value, _a)));
+        }
+    };
+    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
+        var config, result, obj, getIds, getMaxId, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 4, , 5]);
+                    if (!((data === null || data === void 0 ? void 0 : data.title) && (data === null || data === void 0 ? void 0 : data.route))) return [3 /*break*/, 3];
+                    config = {
+                        method: 'POST',
+                        body: JSON.stringify(data),
+                        headers: __assign({ "Content-Type": "application/json" }, props === null || props === void 0 ? void 0 : props.headers)
+                    };
+                    return [4 /*yield*/, create(props === null || props === void 0 ? void 0 : props.backendUrl, config)];
+                case 2:
+                    result = _a.sent();
+                    toast.success(result === null || result === void 0 ? void 0 : result.message);
+                    obj = data;
+                    getIds = (routePages === null || routePages === void 0 ? void 0 : routePages.map(function (it) { return it === null || it === void 0 ? void 0 : it.id; })) || [];
+                    getMaxId = (getIds === null || getIds === void 0 ? void 0 : getIds.length) > 0 ? Math.max.apply(Math, getIds) : 0;
+                    obj['id'] = (result === null || result === void 0 ? void 0 : result.id) || getMaxId + 1;
+                    setRoutePages(__spreadArray(__spreadArray([], routePages, true), [obj], false));
+                    setshowPopup(false);
+                    _a.label = 3;
+                case 3: return [3 /*break*/, 5];
+                case 4:
+                    error_1 = _a.sent();
+                    toast.error(error_1 === null || error_1 === void 0 ? void 0 : error_1.toString());
+                    return [3 /*break*/, 5];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", __assign({ className: "crt-pge-st col-md-6" }, { children: [_jsxs("div", __assign({ className: "form-group" }, { children: [_jsx("label", { children: "Title:" }), _jsx("input", { type: "text", name: "title", className: "form-control", value: (_a = data === null || data === void 0 ? void 0 : data.title) === null || _a === void 0 ? void 0 : _a.name, onChange: function (e) { return handleChange(e); } })] })), _jsxs("div", __assign({ className: "form-group" }, { children: [_jsx("label", { children: "Route:" }), _jsx("input", { type: "text", name: "route", className: "form-control", value: data === null || data === void 0 ? void 0 : data.route, onChange: function (e) { return handleChange(e); } })] })), _jsx("div", __assign({ className: "button" }, { children: _jsx("button", __assign({ className: "btn add-btn", onClick: function (e) { return handleSubmit(e); } }, { children: "Submit" })) }))] })));
+};
+export default CreatePage;