WebBuild/wwwroot/platform/analytics/components/chartviewer/chartviewer.js

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 Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Analytics;
        (function (Analytics) {
            let Charts;
            (function (Charts) {
                class ChartViewer extends Analytics.Components._Chart {
                    constructor() {
                        super();
                        this.dynamicParameters = [];
                        this.reportManager = Analytics.Managers.ReportManager.Instance();
                        this.Filter = [];
                    }
                    jsFiles() {
                        return ["libs/chartjs/chart.min.js"];
                    }
                    cssFiles() {
                        return [
                            'libs/tabulator-tables/css/bootstrap/tabulator_bootstrap4.min.css'
                        ];
                    }
                    html(id, containerid) {
                        const instance = this;
                        var reportid = id;
                        let hidden = 'd-none';
                        if (containerid.includes("div_kpireport_") || containerid.includes("_previewreport_")) {
                            hidden = '';
                        }
                        let isRestrictHidden = '';
                        if (Unibase.Platform.Membership.Infos.Identity.currentUser.isRestrictedUser) {
                            isRestrictHidden = 'd-none';
                        }
                        let html = `<div class="card mb-0" id="chartViewerWrap_${containerid}"><div class="card-header h-50p pa-10 d-flex justify-content-between align-items-center p-relative viewer-header ViewerHeader_${containerid}"><div class="chart-header-left d-flex align-items-center text-truncate"><a href="javascript:void(0);" id="reportCloseBtn_${containerid}" class="report-close-btn btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-30p h-30p mr-10 text-dark d-none" onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().closeReportPopup('${containerid}');" data-tooltip="true" title="Close"><span class="btn-icon-wrap"><i data-icon="l"></i></span></a><strong class="ChartName_${containerid} hidden">Chart</strong><span id="ReportTitle_${containerid}" class="font-weight-600 biz-highlight-bg-color text-truncate">Title</span><strong id = "Reportid_${containerid}" class="pl-15 Reportid__dynamicfilter hidden"> Title </strong><strong id = "Reportid_${containerid}" class="pl-15 Reportid__commonfilter hidden"> Title </strong>
                          ${instance.currentUser.isAdmin ? `<a class="dp-toggle-icon btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-20p h-20p flex-shrink-0 d-none ${!isRestrictHidden ? 'd-xl-block' : ''}" href="javascript:;" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="ViewerTypes_${containerid}" class="ViewerTypes_${containerid}"><span class="btn-icon-wrap"><i class="fa fa-caret-down" aria-hidden="true"></i></span></a>
                        <div class="dropdown-menu dropdown-menu-left ViewerTypes_dropdown" id="dp_${containerid}_viewertypes"><a class="dropdown-item ddbtn_Edit" href = "javascript:;" title = "Edit" id = "edit_" onclick = "Unibase.Platform.Analytics.Components.ReportViewer.Instance().EditReport(${reportid},0,0,0,'${containerid}');">Edit</a>
                            <a href="javascript:;" class="dropdown-item" id="DuplicateTable_${containerid}" onclick = "Unibase.Platform.Analytics.Components.ReportViewer.Instance().EditReport(${reportid},1,0,0,'${containerid}')";>Duplicate</a>
                            </div>` : ''}<span class="dropdown pull-right mr-30 sp_widget_create_${containerid}" style = "position:static"></span></div>
                            <div class="card-header-right d-flex align-items-center"><a class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-30p h-30p mr-1 chart-maximize-btn" href="javascript:;" id="chartMaximizeBtn_${containerid}" onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().report_ViewAll(${reportid}, 0, 'fullscreen_${containerid}','${containerid}');" data-tooltip="true" title="Maximize Chart"><span class="btn-icon-wrap"><i class="las la-expand font-18"></i></span></a><a class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-30p h-30p mr-1 chart-minimize-btn d-none" href="javascript:;" id="chartMinimizeBtn_${containerid}" onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().closeReportPopup('${containerid}');" data-tooltip="true" title="Minimize Chart"><span class="btn-icon-wrap"><i class="las la-compress font-18"></i></span></a><a class="btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-30p h-30p mr-1 d-none link-report-icon" id="linkreport${containerid}" href="javascript:;"><span class="btn-icon-wrap"><i class="las la-table font-18"></i></span></a><div class="filter-dp-wrapper biz-dropdown ${isRestrictHidden} d-none" id="filterDpWrap_${containerid}">
                            <a href="javascript:;" class="filter-icon btn btn-icon btn-flush-biz-theme btn-rounded flush-soft-hover w-30p h-30p" id="filter-icon${containerid}"
                            onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().loadDynamicFilters(${reportid},'${containerid}','.BindData_${containerid}')" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-tooltip="true" title="Dynamic Filters"><span class="btn-icon-wrap"><i class="las la-filter font-18"></i></span></a>
                            <div class="dropdown-menu biz-custom-dropdown biz-filter-dropdown"
                                id="biz-filter-dropdown${containerid}" onclick="event.stopPropagation();">
                                <div class="filter-dropdown-body biz-custom-scrollbar" id="filter-dropdown-body${containerid}">
                                    <div id="dynamic-filters${containerid}" class="dynamic-filters-list row mx-0"></div>
                                </div>
                                <div class="filter-dropdown-footer d-none" id="filter-dropdown-footer${containerid}"><a
                                        href="javascript:;" class="btn btn-outline-danger btn-sm Filterbuttons"
                                        id="btn_ClearFilter${containerid}"
                                        onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().clearDynamicFilters(${reportid},'${containerid}')">Clear</a>
                                    <div class="actions-btn-group"><a href="javascript:;"
                                            class="btn btn-outline-primary btn-sm create-filter-btn saveViewAs${containerid}"
                                            onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().saveViewAs(${reportid})">Create</a>
                                        <div class="btn-group apply-btn-group toggle-btn ml-15"><a href="javascript:;"
                                                class="btn btn-outline-primary btn-sm Filterbuttons"
                                                id="ApplyGlobalFilter${containerid}"
                                                onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance()._applyfilter(${reportid},'${containerid}')">Apply</a><a
                                                href="javascript:;"
                                                class="btn btn-outline-primary btn-sm save-filter-btn saveViewAs${containerid} d-none"
                                                id="saveViewAs${containerid}"
                                                onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().saveViewAs(${reportid})">Save</a><button
                                                type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                                id="applyToggleBtn${containerid}"></button></div>
                                    </div>
                                </div>
                                <div class="filter-dropdown-errmessage text-center d-none"
                                    id="filter-dropdown-errmessage${containerid}">
                                    <p class="text-danger">No Filters Found!</p><a href="javascript:;"
                                        class="btn btn-outline-primary btn-sm mt-10 create-filter-btn saveViewAs${containerid}"
                                        onclick="Unibase.Platform.Analytics.Components.ReportViewer.Instance().saveViewAs(${reportid})">Create
                                        Filter</a>
                                </div>
                                </div>
                            </div>
                            </div></div>
                            <div class="card-body ChartViewer_${containerid} pa-20"><section class="modal-body pa-0 card_section" id="chartSection_${containerid}"><div class="d-none w-100" id="noChartDataMsg_${containerid}"></div><div class="p-relative" id="ChartCanvasDiv${containerid}"><canvas id="${containerid}-chart-canvas" class="chart-canvas"></canvas></div></section></div>
                            </div>`;
                        return html;
                    }
                    load(id, containerid, callback) {
                        return __awaiter(this, void 0, void 0, function* () {
                            const instance = this;
                            this.reportManager = Analytics.Managers.ReportManager.Instance();
                            this._reportBuilder = Analytics.Reports.ReportBuilder.Instance();
                            this._reportBuilder.pivot = new PivotColumns();
                            var reportid = id;
                            containerid = containerid;
                            $("#Reportid_" + containerid).empty();
                            $('.Reportid__dynamicfilter').text("");
                            $("#Reportid_" + containerid).text(reportid);
                            $(`#applyToggleBtn${containerid}`).click(() => {
                                $(`#ApplyGlobalFilter${containerid}`).toggleClass('d-none');
                                $(`#saveViewAs${containerid}`).toggleClass('d-none');
                            });
                            if (containerid.indexOf("dashboardportletwidget") > 0) {
                                let widgetheight = $("#" + containerid).siblings('#hf_portletwidgetheight').val();
                                if (widgetheight == 'undefined' || widgetheight == null || widgetheight == '0px') {
                                    widgetheight = '240px';
                                }
                                $(".ChartViewer_" + containerid).find(".card_section").css({ "height": widgetheight, "overflow": "hidden" });
                                $(".ChartViewer_" + containerid).find("#ChartCanvasDiv" + containerid).addClass('h-100 w-100');
                            }
                            if ($(`#${containerid}`).hasClass('_bizgaze_popup_container') || $(`#${containerid}`).hasClass('_bizgaze_detail_container')) {
                                $(`#chartViewerWrap_${containerid}`).addClass('chart-viewer-card');
                                $(`#chartMaximizeBtn_${containerid}`).addClass('d-none');
                                $(`#reportCloseBtn_${containerid},#filterDpWrap_${containerid}`).removeClass('d-none');
                                $(`#chartSection_${containerid}`).css('height', '100%');
                                if (containerid.includes('div_dashboardportletwidget')) {
                                    $(`#chartMinimizeBtn_${containerid}`).removeClass('d-none');
                                }
                                if (Unibase.Themes.Compact.Components.Index.Instance().tabMode) {
                                    $(`#ChartCanvasDiv${containerid}`).addClass('h-100 w-100');
                                }
                                else {
                                    $(`#chartSection_${containerid}`).addClass('d-flex flex-column justify-content-center');
                                    $(`#ChartCanvasDiv${containerid}`).removeClass('h-100').addClass('h-50 w-100');
                                }
                            }
                            instance.xaxisColumns = [], instance.yaxisColumns = [], instance.groupColumns = [];
                            instance.loadData(containerid, reportid);
                        });
                    }
                    loadData(containerid, reporId) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var instance = this;
                            instance.ChartDivId = containerid + "-chart-canvas";
                            instance.chartContainerId = containerid;
                            let rv_instance;
                            if (Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.length > 0) {
                                let reportviewerInstance = Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.find(x => x.childcontainerid == containerid);
                                if (reportviewerInstance != undefined)
                                    rv_instance = reportviewerInstance.instance;
                                else
                                    rv_instance = instance;
                            }
                            else {
                                rv_instance = instance;
                            }
                            Unibase.Platform.Helpers.NavigationHelper.Instance().hideLoading();
                            let reportInfo = rv_instance.reportResponse.result.ReportInfo;
                            instance._reportBuilder.reportid = reporId;
                            instance._reportBuilder.DataListId = reportInfo.DataListId;
                            instance.IsChartBuilder = false;
                            instance.displayLegend = reportInfo.IsLegend;
                            instance.isDataLabel = reportInfo.IsDataLabel;
                            instance.isTooltipHeader = reportInfo.IsTooltipHeader;
                            instance.tickLabelLength = reportInfo.TickLabelLength;
                            instance.loadSelectedLegend(reportInfo.LegendTypeId, false);
                            if (containerid.indexOf("dashboardportletwidget") > 0) {
                                if (containerid.includes('fullscreen')) {
                                    const widgetContainerId = containerid.replace('fullscreen_', '');
                                    const widgetName = $(`#${widgetContainerId}`).siblings('[id^=hf_widgetName]').val().toString();
                                    $("#ReportTitle_" + containerid).text(widgetName);
                                }
                                else {
                                    $("#ReportTitle_" + containerid).text(instance.WidgetName);
                                }
                            }
                            else {
                                $("#ReportTitle_" + containerid).text(reportInfo.ReportName);
                            }
                            var reportColumns = reportInfo.ReportColumns;
                            instance._reportBuilder.TenureReport = [], instance._reportBuilder.pivot.ColumnName = "";
                            var tenure;
                            var pivot;
                            if (reportColumns.length != 0) {
                                tenure = reportColumns.find(x => x.IsTenureApplied == true);
                                pivot = reportColumns.find(x => x.IsPivotColumn == true);
                            }
                            if (tenure) {
                                instance._reportBuilder.TenureReport[tenure.DisplayText] = {
                                    TimeInterval: tenure.TimeInterval,
                                };
                                var Values_len = instance._reportBuilder.TenureReport.length;
                                instance._reportBuilder.TenureReport.length = Values_len + 1;
                                instance._reportBuilder.tenureTimeIntervalCol = tenure.DisplayText;
                                return instance.tenureChart(instance.ChartDivId, reporId);
                            }
                            if (reportInfo.ChartColumns.length != 0 && instance._reportBuilder.TenureReport.length == 0) {
                                instance.ChartTypeId = reportInfo.ChartTypeId;
                                var chartcolumns = reportInfo.ChartColumns;
                                instance.loadchart(rv_instance.reportData, chartcolumns, reportColumns, pivot);
                            }
                            instance.colorAppliedOn = reportInfo.ColorAppliedTypeId;
                            if (!reportInfo.LegendTitleTypeId)
                                instance.legendTitleTypeId = Unibase.Platform.Analytics.Enums.LegendTitleType.Data;
                            else if (reportInfo.LegendTitleTypeId)
                                instance.legendTitleTypeId = reportInfo.LegendTitleTypeId;
                            if (reportInfo.ChartBaseValue)
                                instance.chartBaseValue = reportInfo.ChartBaseValue;
                            const indexInstance = Unibase.Themes.Compact.Components.Index.Instance();
                            if (reportInfo.PaletteId !== 0 || indexInstance.currentTheme.paletteId) {
                                let paletteId = reportInfo.PaletteId;
                                if (!paletteId) {
                                    instance.paletteColors.push(...indexInstance.themePalette);
                                }
                                else {
                                    instance.getpaletteColors(paletteId, false);
                                }
                            }
                            instance.chart_dataSet();
                            if (reportInfo.LinkReportId != 0)
                                $(`#linkreport${containerid}`).removeClass("d-none");
                            $(`#linkreport${containerid}`).click(function () {
                                let widgetId = Number($(this).closest(".dashboardwidget-addeditem").find("#hf_widgetId").val());
                                var commonFilters = Unibase.Platform.Analytics.Components._CommonFilter.Instance().appliedFilters;
                                let filters = [];
                                if (commonFilters && commonFilters.length) {
                                    var fil = commonFilters.find(x => x.WidgetId == widgetId);
                                    if (fil && fil.AutocompleteFilter && fil.AutocompleteFilter.length) {
                                        filters = fil.AutocompleteFilter;
                                    }
                                }
                                var rv_instance = Unibase.Platform.Helpers.NavigationHelper.reportViewerInstance.find(x => x.childcontainerid == containerid);
                                var dynamicfilters = (rv_instance.instance) ? rv_instance.instance.dynamicFilters : [];
                                if (dynamicfilters && dynamicfilters.length) {
                                    filters = dynamicfilters;
                                }
                                (reportInfo.LinkReportId == reportInfo.ReportId) && (reportInfo.LinkReportId = 0);
                                instance.linkReport(reportInfo.LinkReportId, filters, "div_linkreport" + containerid.substr(containerid.lastIndexOf("_")) + "_viewall");
                            });
                        });
                    }
                    loadchart(chartdata, chartcolumns, reportColumns, pivot) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var instance = this;
                            var data = chartdata;
                            instance.ChartData = data;
                            const containerid = instance.chartContainerId;
                            var chartCols = [];
                            if (reportColumns != null && reportColumns.length != 0) {
                                reportColumns.map(function (element) {
                                    var cCol = chartcolumns.find(c => c.AliasName == element.AliasName);
                                    if (cCol) {
                                        chartCols.push(cCol);
                                    }
                                });
                            }
                            else {
                                chartCols = chartcolumns;
                            }
                            if (data.length > 0) {
                                for (var i = 0; i < chartCols.length; i++) {
                                    let chartCol = chartCols[i];
                                    let ColumnValue = chartCol.ColumnValue;
                                    let Field = chartCol.Name;
                                    let AliasName = chartCol.AliasName;
                                    let DataType = chartCol.DataType;
                                    let Name = AliasName != null ? AliasName : Field;
                                    let IsNumAbb = chartCol.IsNumAbb;
                                    if (chartCol.IsXaxis == true) {
                                        let xObj = {
                                            ColumnId: ColumnValue,
                                            ColumnName: Name,
                                            DisplayText: AliasName,
                                            AliasName: AliasName,
                                            DataType: DataType,
                                            ColorType: chartCol.ColorAppliedOn,
                                            CoordinateTypeId: instance.ChartAxis.Horizontal,
                                            divId: "",
                                            IsNumAbb: IsNumAbb
                                        };
                                        instance.selected_Coordinate(xObj);
                                    }
                                    else if (chartCol.IsYaxis == true && chartCol.IsGroupBy != true) {
                                        let yObj = {
                                            ColumnId: ColumnValue,
                                            ColumnName: Name,
                                            DisplayText: AliasName,
                                            AliasName: AliasName,
                                            DataType: DataType,
                                            ColorType: chartCol.ColorAppliedOn,
                                            CoordinateTypeId: instance.ChartAxis.Vertical,
                                            divId: "",
                                            IsNumAbb: IsNumAbb
                                        };
                                        instance.selected_Coordinate(yObj);
                                    }
                                    else if (chartCol.IsGroupBy == true) {
                                        if (chartCol.Color != null) {
                                            instance.chartViewer_Colors(chartCol.Color, ColumnValue, Name);
                                        }
                                        let gObj = {
                                            ColumnId: ColumnValue,
                                            ColumnName: Name,
                                            DisplayText: AliasName,
                                            AliasName: AliasName,
                                            DataType: DataType,
                                            ColorType: chartCol.ColorAppliedOn,
                                            CoordinateTypeId: instance.ChartAxis.GroupBy,
                                            divId: ""
                                        };
                                        instance.selected_Coordinate(gObj);
                                        if (pivot) {
                                            yield instance._reportBuilder.getDistinctData(ColumnValue, Name, chartCol.AggregationValue);
                                        }
                                    }
                                    else if (chartCol.IsLineChart == true) {
                                        let lObj = {
                                            ColumnId: ColumnValue,
                                            ColumnName: Name,
                                            DisplayText: AliasName,
                                            AliasName: AliasName,
                                            DataType: DataType,
                                            ColorType: chartCol.ColorAppliedOn,
                                            CoordinateTypeId: instance.ChartAxis.LineChart,
                                            divId: ""
                                        };
                                        instance.selected_Coordinate(lObj);
                                    }
                                    if (chartCol.IsChartBaseColumn == true) {
                                        let lObj = {
                                            ColumnId: ColumnValue,
                                            ColumnName: Name,
                                            DisplayText: AliasName,
                                            AliasName: AliasName,
                                            DataType: DataType,
                                            ColorType: chartCol.ColorAppliedOn,
                                            CoordinateTypeId: instance.ChartAxis.BaseColumn,
                                            divId: ""
                                        };
                                        instance.selected_Coordinate(lObj);
                                    }
                                }
                            }
                            else {
                                $(`#ChartCanvasDiv${containerid}`).addClass('d-none');
                                $(`#chartSection_${containerid}`).removeClass('d-flex');
                                $(`#noChartDataMsg_${containerid}`).html('<div class="alert alert-primary border-0 font-14 mb-0 rounded-0 text-center w-100">No data available</div>').removeClass('d-none');
                            }
                            this.prepareAndBindToolTipColumns(chartCols);
                        });
                    }
                    static Instance() {
                        this._instance = new ChartViewer();
                        return this._instance;
                    }
                }
                Charts.ChartViewer = ChartViewer;
            })(Charts = Analytics.Charts || (Analytics.Charts = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));