WebBuild/wwwroot/platform/analytics/components/chartbuilder/chartbuilder.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 ChartBuilder extends Analytics.Components._Chart {
                    constructor() {
                        super();
                        this.colorColumn = [];
                        this.colorApplyColumn = [];
                        this.ColorPickerRightNav = true;
                        this.IsclickedSelect2Caret = false;
                        this._chartBuilder = this;
                        this._reportBuilderTemplate = Analytics.Reports.ReportBuilder_Template.Instance();
                        this._pivot = Analytics.Reports.Pivot.Instance();
                    }
                    loadChartIcons() {
                        var instance = this;
                        let html = `<button class="btn btn-icon btn-icon-circle text-white ChartIcons bg-success" disabled="true" id="ChartIcon_Default"><i class="fa fa-home"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3" id="ChartIcon_FullScreen"><i class="fa fa-expand"></i></button><button class="btn btn-icon btn-icon-circle text-white ChartIcons bg-success" disabled="true" id="ChartIcon_edit"><i class="fa fa-pencil-square-o"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3 hidden" id="ChartIcon_PaintBrush"><i class="fa fa-paint-brush"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3 ChartIcons hidden" id="ChartIcon_ToolTip"><i class="fa fa-comment"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3 ChartIcons hidden" id="ChartIcon_ChartSettings"><i class="fa fa-cog"> </i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3 ChartIcons hidden" id="ChartIcon_Forms"><i class="fa fa-bookmark"></i></button></button>`;
                        $("#bl-nav-chart").html(html);
                        $("#bl-nav-chart").height($("#chart-container").height());
                        $(".ChartIcons").click(function () {
                            $(".ChartIcons").addClass("btn-icon-style-3").removeClass("text-white bg-success").removeAttr("disabled");
                            $(this).removeClass("btn-icon-style-3").addClass("text-white bg-success").attr("disabled", "true");
                        });
                        $("#ChartIcon_Default").click(function () {
                            instance.changeRightNav("Default");
                        });
                        $("#ChartIcon_FullScreen").click(function () {
                            let panel = '_modal_bizgaze_popup_ChartFullScreen' + moment().unix();
                            let margin = "mt-70 mb-70 ml-100 mr-100";
                            let colSpan = "col-sm-10";
                            var modalhtml = `<div class="_bizgaze_popup_container shadow-left shadow-xl modal right bg-light ` + colSpan + ` p-0 ` + margin + `" id="` + panel + `"><div class="card">
                          <div class="modal-header"> <span class="text-center col-sm-11" style="text-align:center"> Chart Preview </span> <span class="pull-right" id="Close_ChartFullScreen"> <i class="fa fa-close"> </i> </span> </div>
                          <div class="modal-body" style="height:500px">
                          <div id="legend_FullScreen"></div>
                            <div id="ChartCanvasDiv_FullScreen" style="position: relative; height: 67vh; width: 67vw;" class="ml-30">
                            <canvas id="myChart_FullScreen" class="ml-10"></canvas> 
                            </div>
                            </div></div></div>`;
                            $("#_bizgaze_modal").before(modalhtml);
                            instance.chartType("myChart_FullScreen");
                            $('#' + panel).modal('show');
                            $("#Close_ChartFullScreen").click(function () {
                                $(".modal-backdrop").remove();
                                $('#' + panel).remove();
                            });
                        });
                        $("#ChartIcon_PaintBrush").click(function () {
                            instance.changeRightNav("PaintBrush");
                        });
                        $("#ChartIcon_ToolTip").click(function () {
                            instance.changeRightNav("ToolTip");
                        });
                        $("#ChartIcon_ChartSettings").click(function () {
                            instance.changeRightNav("ChartSettings");
                        });
                        $("#ChartIcon_Forms").click(function () {
                        });
                        $('input[name="customRadio1"]:radio').on('change', function (e) {
                            var type = $('input[type=radio][name=customRadio1]:checked').attr('id');
                            if (type == "rowRadio") {
                                instance.colorAppliedOn = Unibase.Platform.Analytics.Enums.ColorType.row;
                            }
                            else if (type == "columnRadio") {
                                instance.colorAppliedOn = Unibase.Platform.Analytics.Enums.ColorType.column;
                            }
                            instance.chart_dataSet();
                        });
                        $('input[name="lagendtypedataradio"]:radio').on('change', (e) => {
                            var type = e.currentTarget.id;
                            if (type == "lagendtypecolumn") {
                                instance.legendTitleTypeId = Unibase.Platform.Analytics.Enums.LegendTitleType.Column;
                            }
                            else if (type == "lagendtypedata") {
                                instance.legendTitleTypeId = Unibase.Platform.Analytics.Enums.LegendTitleType.Data;
                            }
                            instance.chart_dataSet();
                        });
                        $("#isdatalabel").change((e) => {
                            this.isDataLabel = e.target.checked;
                        });
                        $("#showtooltipheader_checkbox").change((e) => {
                            this.isTooltipHeader = e.target.checked;
                        });
                        $("#label_length").change((e) => {
                            this.tickLabelLength = Number(e.target.value);
                        });
                        $('body').on('click', '#theme_pre .color-block', function () {
                            instance.IsColorPalette = true;
                            instance.ColumnColors = [];
                            instance.RowColors = [];
                            var selected_color_block = $(this);
                            $(selected_color_block).find('div').each(function () {
                                var colorClassName = $(this).attr('class');
                                var rgb = $(this).css('background-color');
                                var color = '';
                                var parts = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                                delete (parts[0]);
                                for (var i = 1; i <= 3; ++i) {
                                    parts[i] = parseInt(parts[i]).toString(16);
                                    if (parts[i].length == 1)
                                        parts[i] = '0' + parts[i];
                                }
                                color = '#' + parts.join('');
                                instance.ColumnColors.push(color);
                                instance.RowColors.push(color);
                            });
                            instance.chartData();
                        });
                    }
                    changeRightNav(IconName) {
                        var instance = this;
                        $(".bl-nav-right").addClass("hidden");
                        if (IconName == "Default") {
                            $("#bl-nav-right-default").removeClass("hidden");
                            if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Table) {
                                $("#XAxis").addClass("hidden");
                                $("#YAxis").addClass("hidden");
                            }
                        }
                        else if (IconName == "ToolTip") {
                            $("#bl-nav-right-tooltip").removeClass("hidden");
                            instance.loadToolTipRightNav();
                            instance.addColumnColors();
                        }
                        else {
                            $("#bl-nav-right-charttypes").removeClass("hidden");
                            instance.loadChartTypesRightNav();
                        }
                        instance.rightNavSlimScroll();
                    }
                    rightNavSlimScroll() {
                        let elem;
                        elem = $(".rightnav_body");
                        var height = parseInt($(".report-builder-body").css("height").replace("px", "")) + $(".modal-footer").height() + 'px';
                        elem.slimscroll({ height: height, color: '#d6d9da', disableFadeOut: true, borderRadius: 0, size: '6px', enableKeyNavigation: true, opacity: .8 });
                    }
                    loadChartTypesRightNav() {
                        var instance = this;
                        let html = `<div class="bg-white card"> <div class="card-header"><span>Chart Types</span></div> <div class="card-body col-sm-1"><div class=" btn-group-xs pt-24"><table><tr><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick=Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('bar',1)><span><i><img src="platform/analytics/components/chartbuilder/images/bar-chart.png" height="30" width="30" onerror="ReloadImage(event)"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('horizontalBar',2)"><span><i><img src="platform/analytics/components/chartbuilder/images/horizontalbar-chart.png" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('area',3)"><span id="AreaChart" value="2"><i aria-hidden="true"><img src="platform/analytics/components/chartbuilder/images/area-chart.png" height="30" width="30"></i></span></button></td></tr><tr><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('doughnut',4)"><span><i><img src="platform/analytics/components/chartbuilder/images/doughnut-chart.png" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('line',5)"><span><i aria-hidden="true"><img src="platform/analytics/components/chartbuilder/images/line-chart.png" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('pie',6)"><span><i aria-hidden="true"><img src="platform/analytics/components/chartbuilder/images/pie-chart.png" height="30" width="30"></i></span></button></td><tr><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('stackedBar',7)"><span><i><img src="platform/analytics/components/chartbuilder/images/stacked-bar-chart.png" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('stackedHorizontalBar',8)"><span><i><img src="platform/analytics/components/chartbuilder/images/stacked-horizontalbar-chart.png" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('bubble',9)"><span><i><img src="platform/analytics/components/chartbuilder/images/bubble-chart.png" height="30" width="30"></i></span></button></td><tr class="hidden"><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview()"><span><i><img src="" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('rangeColumn',10)"><span><i><img src="" height="30" width="30"></i></span></button></td><td class="pr-2 pb-2"><button type="button" class="btn btn-outline-primary" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().chartPreview('zoomcolumn')"><span><i><img src="" height="30" width="30"></i></span></button></td></tr></table></div> </div> </div>`;
                        $("#bl-nav-right-charttypes").html(html);
                    }
                    loadReportTypeChart(id) {
                        var instance = this;
                        if (id != "fa fa-bar-chart-o") {
                            $('.biz-bldr-wrap').removeClass('chart_view');
                            $('#chart-container').addClass('hidden');
                            $("#Categories").removeClass("hidden");
                            $("#chartPivotBtn").addClass("hidden");
                            $(".bldr-body").removeClass("biz-body-margin-right");
                            $(this).attr('title', 'Table View');
                            let pivotHtml = instance._reportBuilderTemplate.loadPivotForm();
                            $('#reportBuilderRightNav').html(pivotHtml);
                            setTimeout(function () { $("#pivot-close-btn").click(); }, 1);
                            $("#no_of_records").closest(".card").first().addClass("hidden");
                            $("#linechart").addClass("hidden");
                            $("#div_base_column").addClass("hidden");
                            instance._reportBuilder.loadDynmaicFilters(this._reportBuilder.reportid);
                        }
                        else {
                            $('.biz-bldr-wrap').addClass('chart_view');
                            $('#chart-container').removeClass('hidden');
                            instance.loadChartContent();
                            $("#XAxis").removeClass("hidden");
                            $("#YAxis").removeClass("hidden");
                            $("#Categories").addClass("hidden");
                            $("#chartPivotBtn").removeClass("hidden");
                            $(".bldr-body").addClass("biz-body-margin-right");
                            $(this).attr('data-original-title', 'Chart View');
                            instance._reportBuilderTemplate.loadChartSideBar();
                            this.sortTooltipColumnsEvent();
                            instance.select2TooltipDataBinding();
                            instance._chartBuilder.loadPalettes();
                            $("#no_of_records").closest(".card").first().removeClass("hidden");
                            $("#div_base_column").removeClass("hidden");
                        }
                        if (instance._reportBuilder.isEdit == true) {
                            instance.setChartTypeIconActive(instance.ChartTypeId);
                            $('#biz-wrapper').addClass('biz-drawer-pushright');
                        }
                        instance._reportBuilder.reportTypeChange(id);
                        if ($("#QueryBuilder").parent().hasClass("slimScrollDiv")) {
                            $("#QueryBuilder").parent().addClass("hidden");
                        }
                        instance.enableOrDisableChartIcons();
                        $("#legend-select").val(instance._reportBuilder.legendTypeId);
                        instance._chartBuilder.loadSelectedLegend(instance._reportBuilder.legendTypeId, false);
                    }
                    setChartTypeIconActive(chartTypeId) {
                        switch (chartTypeId) {
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.bar:
                                $("#chart_type").find('.bar-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.horizontalBar:
                                $("#chart_type").find('.horizontalbar-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.area:
                                $("#chart_type").find('.area-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.doughnut:
                                $("#chart_type").find('.doughnut-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.line:
                                $("#chart_type").find('.line-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.pie:
                                $("#chart_type").find('.pie-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedBar:
                                $("#chart_type").find('.stackedbar-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.stackedHorizontalBar:
                                $("#chart_type").find('.stackedhorizontalbar-chart-icon').closest('label').addClass('active');
                                break;
                            case Unibase.Platform.Analytics.Charts.Enums.ChartType.bubble:
                                $("#chart_type").find('.bubble-chart-icon').closest('label').addClass('active');
                                break;
                        }
                    }
                    loadTopIcons() {
                        var instance = this;
                        let html = `<a class="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover drawer-toggle-link ml-1" id="ReportTypeChart" href="javascript:;" data-tooltip="true" title="Table View"><span class="btn-icon-wrap"><span class="font-awesome-icon"><i class="fa fa-table"></i></span></span></a>`;
                        $("#bl-report-title").html(html);
                        let pivotHtml = instance._reportBuilderTemplate.loadPivotForm();
                        $('#reportBuilderRightNav').html(pivotHtml);
                        $("#ReportTypeChart").click(function () {
                            var id = $(this).find('i').toggleClass('fa-table fa-bar-chart-o');
                            instance.loadReportTypeChart(id[0].className);
                            $('#tabulatorReportbuilder').toggleClass('contains-chartview');
                        });
                        $("#chartPivotBtn").click(function () {
                            $("#chart-pivot-container").removeClass('hidden');
                            $("#chart-pivot-container.biz-drawer.drawer-right").css('right', '0px');
                            $("#chart-appearance-container").addClass('hidden');
                        });
                        $('body').on('click', '#chart-pivot-container #pivot-close-btn', function () {
                            $(this).removeClass('drawer-close');
                            $("#chart-pivot-container").addClass('hidden');
                            $("#chart-appearance-container").removeClass('hidden');
                        });
                        $("#ReportFilter").click(function () {
                            $(".report-builder-body").toggleClass("hidden");
                            instance._reportBuilder.loadQueryBuilderDiv();
                        });
                        $("#reset_pivot_details").click(() => {
                            $("#txt_TimeIntervals").val("0").trigger("change");
                            $("#PivotColumns_AutoComplete").val("0").trigger("change");
                            $("#PivotDateType").val("0").trigger("change");
                            $("#PivotAggrColumn").val("0").trigger("change");
                            $("#PivotAggrType").val("-1").trigger("change");
                            $("#PivotRows_Select2").val("").trigger("change").empty();
                            $("#chktreeexpand_checkbox").prop("checked", false);
                            $("#PivotChildColumnName_AutoComplete").val("0").trigger("change");
                            $("#PivotValue_AutoComplete").val("-1").trigger("change");
                            $("#PivotParentColumnName_AutoComplete").val("0").trigger("change");
                            $("#pivotType_Select2").val("0").trigger("change");
                            $("#div_Intervals, #div_PivotDateType, #div_PivotColumns, #div_PivotAggrColumn, #div_PivotAggrType, #div_PivotRows, #div_datatreeexpand, #div_PivotChildColumnName, #div_PivotValue, #div_PivotParentColumnName").addClass("hidden");
                            if (this._reportBuilder.pivot)
                                this._reportBuilder.pivot = new PivotColumns();
                            this._reportBuilder.load_data(this._reportBuilder.table);
                        });
                    }
                    loadChartContent() {
                        let html = `
                            <div class="card-header border-0 justify-content-end card-header-action">
                              <div class="card-action-wrap">
                                <a href="#" class="inline-block full-screen">
                                  <i class="ion ion-md-expand"></i>
                                </a>
                              </div>
                            </div>
                            <div class="card-body h-100">
                               <div id="ChartCanvasDiv" class="h-100 w-100">
                                    <canvas id="myChart"></canvas>
                               </div>
                            </div>
                         `;
                        $("#chart-container").html(html);
                    }
                    formatResultData(data) {
                        var instance = Unibase.Platform.Analytics.Charts.ChartBuilder.Instance();
                        if (!data.id || isNaN(Number(data.id))) {
                            var index = instance.getIndexByDisplayText(data.text, "YAxis");
                            if (index != -1) {
                                var ColId = instance.yaxisColumns[index].ColumnId;
                                data.id = ColId;
                                return data.text;
                            }
                            else
                                return data.text;
                        }
                        if (data.element.selected)
                            return;
                        return data.text;
                    }
                    ;
                    formatResult(data) {
                        return data.text;
                    }
                    ;
                    selectedDatalistColumns() {
                        var instance = this;
                        var data = [];
                        for (let i = 0; i < instance._reportBuilder.datalistColumnsResponseData.length; i++) {
                            data.push({ id: instance._reportBuilder.datalistColumnsResponseData[i].ColumnId, text: instance._reportBuilder.datalistColumnsResponseData[i].ColumnName });
                        }
                        return data;
                    }
                    loadSearchSelect2() {
                        var instance = this;
                        var data = instance._reportBuilder.getSelectedColumns_Select2_Data_AliasName_As_TextValue();
                        $("#searchcolumns").empty().unbind().select2({
                            placeholder: 'Select Search columns',
                            data: data,
                            allowClear: true,
                        }).on('select2:unselect', (e) => {
                            let removedCol = e.params.data.text;
                            if (instance._reportBuilder.SearchColumns) {
                                let searchColumns = instance._reportBuilder.SearchColumns.split('|');
                                let srchIdx = searchColumns.indexOf(removedCol);
                                if (srchIdx != -1) {
                                    searchColumns.splice(srchIdx, 1);
                                    instance._reportBuilder.SearchColumns = searchColumns.join("|");
                                }
                            }
                        }).on('select2:select', (e) => {
                            let selectedCol = e.params.data.text;
                            if (instance._reportBuilder.SearchColumns) {
                                instance._reportBuilder.SearchColumns += "|" + selectedCol;
                            }
                            else
                                instance._reportBuilder.SearchColumns = selectedCol;
                        });
                        this._reportBuilder.bindSearchColumns();
                    }
                    identityColumns() {
                        var instance = this;
                        var data = [];
                        var identityinfo = Unibase.Platform.Membership.Infos.Identity.currentUser;
                        var keys = Object.keys(identityinfo);
                        for (let i = 0; i < keys.length; i++) {
                            data.push({ id: identityinfo[keys[i]], text: "Identity_" + keys[i] });
                        }
                        instance._reportBuilder.identityColumnsResponseData = data;
                        return data;
                    }
                    loadIdentitySelect2() {
                        var instance = this;
                        var data = [];
                        var data = instance.identityColumns();
                        $("#identitycolumns").select2({
                            placeholder: 'Select Indentity columns',
                            data: data,
                        });
                    }
                    loadSortColumnsSelect2() {
                        var instance = this;
                        let sortData = [{ id: "0", text: "- Select -" }];
                        sortData = instance._reportBuilder.getSelectedColumns_Select2_Data();
                        if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                            for (var i = 0; i < instance.ChartSelectedColumns.length; i++) {
                                let chtCol = instance.ChartSelectedColumns[i];
                                let idx = sortData.findIndex(x => x.text == instance.ChartSelectedColumns[i].AliasName);
                                if (idx == -1)
                                    sortData.push({ id: chtCol.ChartColumnId || chtCol.ColumnId && chtCol.ColumnId.toString(), text: chtCol.AliasName });
                            }
                        }
                        $("#sortColumns_select").html("").unbind().select2({
                            placeholder: 'Select Sort columns',
                            data: sortData,
                        }).on('select2:select', function (e) {
                            let data = e.params.data;
                            let dataType = instance._reportBuilder.dataType($("#allDatalistColumns #li_" + parseInt(data.id) + " span.datalist_column").attr('data-column-datatype'));
                            var sortIndex = instance._reportBuilder.getIndexByDisplayText_sortColumnsArray(data.text);
                            if (sortIndex > -1) {
                                $("#sortColumns_select").select2('close');
                                alert("Column - " + data.text + " already exists in sortcolumns select2");
                                $('#sortColumns_select').val('0').trigger('change');
                                $('.select2-selection__clear').hide();
                                return false;
                            }
                            var html = instance._reportBuilderTemplate.loadSortSelect2Column(Number(e.params.data.id), e.params.data.text, dataType);
                            $("#sort_selected_columns").append(html);
                            instance._reportBuilder.setSelectOption("sortColumns_select");
                            var selcolIndex = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(data.text);
                            instance._reportBuilder.selectedColumns[selcolIndex].SortOrder = "Desc";
                            instance._reportBuilder.selectedColumns[selcolIndex].SortIndex = instance._reportBuilder.SortColumns.length;
                            instance._reportBuilder.SortColumns.push({ DisplayText: data.text, SortOrder: "Desc", SortIndex: instance._reportBuilder.SortColumns.length });
                            var _sort = [];
                            if (instance._reportBuilder.SortColumns.length > 0) {
                                for (var s = 0; s < instance._reportBuilder.SortColumns.length; s++) {
                                    _sort.push({ Name: instance._reportBuilder.SortColumns[s].DisplayText, Order: instance._reportBuilder.SortColumns[s].SortOrder });
                                }
                            }
                            instance._reportBuilder.stringifyed_SortColumns = JSON.stringify(_sort);
                            instance._reportBuilder.load_data(instance._reportBuilder.table);
                            if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                                var cindex = instance.getIndexByDisplayText_ChartSelectedColumns(data.text);
                                if (cindex > -1) {
                                    instance.ChartSelectedColumns[cindex].SortOrder = "Desc";
                                    instance.ChartSelectedColumns[cindex].SortIndex = instance._reportBuilder.SortColumns.length;
                                }
                                if (instance._reportBuilder.TenureReport.length != 0) {
                                    Unibase.Platform.Analytics.Reports.Tenure.Instance().CheckedTenure();
                                    instance._chartBuilder.tenureChart('myChart', instance._reportBuilder.reportid);
                                }
                                else {
                                    instance._chartBuilder.chartPreview(instance._chartBuilder.ChartTypeName, instance._chartBuilder.ChartTypeId);
                                }
                            }
                        });
                    }
                    loadDynamicFilterSelect(loadDatalistColumns) {
                        var instance = this;
                        var data;
                        if (loadDatalistColumns) {
                            data = this._reportBuilder.getSelect2DataForDynamicFiltersDatalistColumns();
                        }
                        else {
                            data = this._reportBuilder.getSelectedColumns_Select2_Data();
                        }
                        $("#dynamicFilter_select").html("").unbind().select2({
                            placeholder: 'Select Dynamic Filter',
                            data: data,
                        }).on('select2:select', function (e) {
                            let data = e.params.data;
                            let dataType = Number($("#allDatalistColumns #li_" + parseInt(data.id) + " span.datalist_column").attr('data-column-datatype'));
                            var dfillindex = Unibase.Platform.Analytics.Reports.DynamicFilter.Instance().getIndexByDisplayText_dynamicFilterColumns(data.text);
                            if (dfillindex > -1) {
                                return MessageHelper.Instance().showError("Column - " + data.text + " already exists in DynamicFilters select2.", "div_ReportBuilderErrorMessage");
                            }
                            let rptCol = instance._reportBuilder.selectedColumns.find(x => x.AliasName == data.text);
                            if (rptCol) {
                                if (rptCol.ColumnFormat != "" && rptCol.ColumnFormat != "Default") {
                                    instance._reportBuilder.setSelectOption("dynamicFilter_select");
                                    return MessageHelper.Instance().showError("Unable to add formated column in DynamicFilters", "div_ReportBuilderErrorMessage");
                                }
                            }
                            var html = instance._reportBuilderTemplate.loadDynamicFilterColumn(Number(e.params.data.id), e.params.data.text, dataType);
                            $("#dynamic-list-group-wrapper").append(html);
                            if (dataType == Unibase.Platform.Analytics.Reports.Enums.DataType.dateTime) {
                                if ($('[data-toggle="tooltip"]').length > 0)
                                    $('[data-toggle="tooltip"]').tooltip();
                                var datefill = instance._reportBuilder.dynamicFilters.find(d => d.IsFilterableColumn == data.text) ? true : false;
                                if (!datefill) {
                                    var model = new DynamicFilterModel();
                                    model.IsFilterableColumn = data.text;
                                    model.DataType = dataType;
                                    model.DisplayName = data.text;
                                    model.Index = instance._reportBuilder.dynamicFilters.length;
                                    model.IsDefault = $('.dynamicfilter-defaultdate_' + data.text).is(':checked');
                                    instance._reportBuilder.dynamicFilters.push(model);
                                }
                            }
                            Unibase.Platform.Analytics.Reports.DynamicFilter.Instance().sortDynamicFilter();
                            instance._reportBuilder.setSelectOption("dynamicFilter_select");
                        });
                    }
                    select2DataBinding(Event) {
                        var instance = this;
                        var data = instance.selectedDatalistColumns();
                        if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                            instance.coordinate_data(instance.ChartAxis.Horizontal, data);
                            instance.coordinate_data(instance.ChartAxis.Vertical, data);
                            instance.select2TooltipDataBinding();
                            instance.bindChartBaseColumnSelect2();
                        }
                        instance.loadSearchSelect2();
                        instance.loadIdentitySelect2();
                        instance.loadSortColumnsSelect2();
                        instance.loadDynamicFilterSelect(instance._reportBuilder.showDynamicFilters);
                        if (Event == "") {
                            instance.loadCategoriesSelect2();
                            $("#groupby_select").off('select2:select').off('select2:unselect').off('select2:selecting');
                            $("#groupby_select").select2({
                                placeholder: 'Select GroupBy columns',
                                data: data,
                            }).on('select2:select', function (e) {
                                let data = e.params.data;
                                let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                                if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                                    let gObj = {
                                        ColumnId: Number(data.id),
                                        ColumnName: data.text,
                                        DisplayText: data.text,
                                        AliasName: data.text,
                                        DataType: dataType,
                                        CoordinateTypeId: instance.ChartAxis.GroupBy,
                                        ColorType: Unibase.Platform.Analytics.Enums.ColorType.row,
                                        divId: "groupby_selected_columns"
                                    };
                                    instance.selected_Coordinate(gObj);
                                    instance.addColumnColors();
                                    instance.loadSortColumnsSelect2();
                                }
                                else {
                                    let dataTypeString = $("#allDatalistColumns #li_" + parseInt(data.id) + " span.datalist_column").attr('data-column-datatype');
                                    let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                                    let Index = instance._reportBuilder.getIndexByColumnName_selectedColumnsArray(data.text);
                                    var sel_Col = instance._reportBuilder.selectedColumns[Index];
                                    if (sel_Col)
                                        var grpCol = sel_Col.GroupBy;
                                    if (!grpCol) {
                                        if (Index != -1) {
                                            instance._reportBuilder.selectedColumns[Index].GroupBy = true;
                                        }
                                        else {
                                            var selCol = new SelectedColumns();
                                            selCol.ColumnId = parseInt(data.id);
                                            selCol.ColumnName = data.text;
                                            selCol.DlColumnName = instance._reportBuilder.getDlColumn_ByColumnId_datalistColumnsArray(parseInt(data.id));
                                            selCol.ColumnIndex = instance._reportBuilder.selectedColumns.length;
                                            selCol.DataType = dataType;
                                            selCol.Isvisible = true;
                                            selCol.GroupBy = true;
                                            selCol.AliasName = data.text;
                                            selCol.DisplayText = data.text;
                                            selCol.GroupByCategory = false;
                                            instance._reportBuilder._selectedColumns(selCol);
                                        }
                                        var html = instance._reportBuilderTemplate.loadSelect2Column(parseInt(data.id), data.text, dataType);
                                        $("#groupby_selected_columns").append(html);
                                        instance._reportBuilder.setSelectOption("groupby_select");
                                        $(".dsl_column_filters").addClass('hidden');
                                        instance._reportBuilder.load_data(instance._reportBuilder.table);
                                    }
                                    else {
                                        $("#groupby_select").select2('close');
                                        alert("Column - " + data.text + " already exists in groupby select2. Please change display text and try again");
                                        return false;
                                    }
                                }
                            }).on('select2:selecting', function (e) {
                                let data = e.params.args.data;
                                var index = -1;
                                index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(data.text);
                                let x_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.Horizontal);
                                let y_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.Vertical);
                                let grp_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.GroupBy);
                                let Select2Type = "";
                                if (x_index != -1) {
                                    Select2Type = instance.ChartAxis.Horizontal;
                                }
                                if (y_index != -1) {
                                    Select2Type = instance.ChartAxis.Vertical;
                                }
                                if (grp_index != -1) {
                                    Select2Type = instance.ChartAxis.GroupBy;
                                }
                            });
                            $("#line_chart_select").off('select2:select').off('select2:unselect').off('select2:selecting');
                            $("#line_chart_select").select2({
                                placeholder: 'Select Line Chart columns',
                                data: data,
                            }).on("select2:select", (e) => {
                                let data = e.params.data;
                                let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                                if (instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                                    let gObj = {
                                        ColumnId: Number(data.id),
                                        ColumnName: data.text,
                                        DisplayText: data.text,
                                        AliasName: data.text,
                                        DataType: dataType,
                                        CoordinateTypeId: instance.ChartAxis.LineChart,
                                        ColorType: Unibase.Platform.Analytics.Enums.ColorType.row,
                                        divId: "line_chart_selected_columns"
                                    };
                                    instance.selected_Coordinate(gObj);
                                    instance.addColumnColors();
                                    instance.loadSortColumnsSelect2();
                                    instance.coordinate_Elements(false, false, false, false, true, false);
                                    instance.ChartTypeId = Unibase.Platform.Analytics.Charts.Enums.ChartType.barWithLine;
                                }
                            });
                            instance.bindChartBaseColumnSelect2();
                        }
                    }
                    coordinate_data(CoordinateType, data) {
                        var instance = this;
                        var divId = "";
                        let tmpRsltData = instance.formatResult;
                        if (CoordinateType == instance.ChartAxis.Vertical) {
                            tmpRsltData = instance.formatResultData;
                        }
                        $("#" + CoordinateType.toLowerCase() + "_select").off('select2:selecting').off('select2:select');
                        $("#" + CoordinateType.toLowerCase() + "_select").select2({
                            placeholder: 'Select ' + CoordinateType + ' columns',
                            data: data,
                            templateResult: tmpRsltData,
                            sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
                        }).on('select2:selecting', function (e) {
                            let data = e.params.args.data;
                            var index = -1;
                            index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(data.text);
                            let x_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.Horizontal);
                            let y_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.Vertical);
                            let grp_index = instance.getIndexByDisplayText(data.text, instance.ChartAxis.GroupBy);
                            let Select2Type = "";
                            if (x_index != -1) {
                                Select2Type = instance.ChartAxis.Horizontal;
                            }
                            if (y_index != -1) {
                                Select2Type = instance.ChartAxis.Vertical;
                            }
                            if (grp_index != -1) {
                                Select2Type = instance.ChartAxis.GroupBy;
                            }
                            if (Select2Type != "" && instance._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Chart) {
                                $("#" + Select2Type.toLowerCase() + "_select").select2('close');
                                alert("Column - " + data.text + " already exists in " + Select2Type + " select2. Please change display text and try again");
                                return false;
                            }
                        }).on('select2:select', function (e) {
                            let data = e.params.data;
                            let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                            if (CoordinateType == instance.ChartAxis.Vertical) {
                                divId = "yaxis_selected_columns";
                            }
                            else if (CoordinateType == instance.ChartAxis.Horizontal) {
                                divId = "xaxis_selected_columns";
                            }
                            else {
                                divId = "groupby_selected_columns";
                            }
                            let obj = {
                                ColumnId: Number(data.id),
                                ColumnName: data.text,
                                AliasName: data.text,
                                DisplayText: data.text,
                                DataType: dataType,
                                CoordinateTypeId: CoordinateType,
                                ColorType: Unibase.Platform.Analytics.Enums.ColorType.column,
                                divId: divId
                            };
                            instance.selected_Coordinate(obj);
                            if (instance._reportBuilder.TenureReport.length == 0)
                                instance.chartPreview('bar', Unibase.Platform.Analytics.Charts.Enums.ChartType.bar);
                        });
                    }
                    coordinate_Elements(XAxis, YAxis, GroupBy, ToolTip, LineChart, BaseColumn) {
                        var instance = this;
                        let chartArray = [];
                        if (XAxis == true) {
                            for (var i = 0; i < instance.xaxisColumns.length; i++) {
                                chartArray.push(instance.xaxisColumns[i]);
                            }
                        }
                        if (YAxis == true) {
                            for (var i = 0; i < instance.yaxisColumns.length; i++) {
                                chartArray.push(instance.yaxisColumns[i]);
                            }
                        }
                        if (GroupBy == true) {
                            for (var i = 0; i < instance.groupColumns.length; i++) {
                                chartArray.push(instance.groupColumns[i]);
                            }
                        }
                        if (LineChart) {
                            for (var i = 0; i < instance.lineChartColumns.length; i++) {
                                chartArray.push(instance.lineChartColumns[i]);
                            }
                        }
                        if (BaseColumn) {
                            for (var i = 0; i < instance.chartBaseColumns.length; i++) {
                                let cIdx = chartArray.findIndex(x => x.AliasName == instance.chartBaseColumns[i].AliasName);
                                if (cIdx == -1) {
                                    instance.chartBaseColumns[i].IsBaseColumn = true;
                                    chartArray.push(instance.chartBaseColumns[i]);
                                }
                                else {
                                    chartArray[cIdx].IsBaseColumn = true;
                                }
                            }
                        }
                        if (ToolTip == true) {
                            if (instance.toolTipArray.length > 0) {
                                for (var i = 0; i < instance.toolTipArray.length; i++) {
                                    var tolcol = chartArray.find(x => x.AliasName == instance.toolTipArray[i].AliasName) ? true : false;
                                    if (tolcol != true) {
                                        chartArray.push(instance.toolTipArray[i]);
                                    }
                                }
                            }
                        }
                        return chartArray;
                    }
                    coordinate_DropDown(Select2Id) {
                        var instance = this;
                        $("#" + Select2Id).find(".select2-selection__choice span").removeClass('select2-selection__choice__remove');
                        $("#" + Select2Id).find(".select2-selection__choice span").empty();
                        $("#" + Select2Id).find(".select2-selection__choice span").css('float', 'right');
                        var arry = [];
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            arry = instance.xaxisColumns;
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            arry = instance.yaxisColumns;
                        }
                        else if (Select2Id == instance.ChartAxis.GroupBy) {
                            arry = instance.groupColumns;
                        }
                        else if (Select2Id == instance.ChartAxis.LineChart) {
                            arry = instance.lineChartColumns;
                        }
                        else if (Select2Id == instance.ChartAxis.BaseColumn) {
                            arry = instance.chartBaseColumns;
                        }
                        for (var i = 0; i < arry.length; i++) {
                            var ElementName = arry[i].ColumnName;
                            var ElementId = arry[i].ColumnId;
                            var DisplayText = arry[i].DisplayText;
                            var len = $("#" + Select2Id).find(".select2-selection__rendered").find(".select2-selection__choice").length;
                            for (var l = 0; l <= len; l++) {
                                var m = l + 1;
                                var DisplayText_length = $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']:nth-child(" + m + ")").length;
                                var length = $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + ElementName + "']:nth-child(" + m + ")").length;
                                if (DisplayText_length != 0) {
                                    break;
                                }
                                if (length > 0) {
                                    $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + ElementName + "']:nth-child(" + m + ")").attr("title", DisplayText);
                                    break;
                                }
                            }
                            let html = `<div class="dropdown mb-100"><span class="dropdown-toggle caret" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().clickedSelect2Caret(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `')" data-toggle="dropdown" aria-expanded="false"></span><ul class="dropdown-menu dropdown-menu_` + DisplayText + `" style='position:relative;'><li><a class="dropdown-item font-13 text-primary text-center" href="javascript:;" onclick="" style="cursor:not-allowed"><strong>` + ElementName + `</strong></a></li><div class="dropdown-divider"></div></li><li id="dropdown_Aggregation_` + DisplayText + `"><div class="sub-dropdown-menu show-on-hover"><a class="dropdown-item font-13" href="javascript:;" onclick='' ><span id = "AggregateOperation"> Aggregation </span></a><div class="dropdown-menu open-left-side"></div></div></li><li><div class="sub-dropdown-menu show-on-hover"><a class="dropdown-item font-13" href="javascript:;" onclick=''><span id = "SortTableColumn"> Sort By </span></a><div class="dropdown-menu open-left-side w-10"><a class="dropdown-item font-13 pr-0 pl-0 SortOrder_` + DisplayText + `" id="SortOrder_` + DisplayText + `_Asc" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeSortBy_chart(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `','Asc');" href="javascript:;"><span class="pl-20">Asc<i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-1" style="font-size:12px;" id="DropDown_IsAscInSelect2_` + DisplayText + `"></i></span></a><a class="dropdown-item font-13 pr-0 pl-0 SortOrder_` + DisplayText + `" id="SortOrder_` + DisplayText + `_Desc" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeSortBy_chart(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `','Desc');" href="javascript:;"><span class="pl-15">Desc<i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-1" style="font-size:12px;" id="DropDown_IsDescInSelect2_` + DisplayText + `"></i></span></a></div></div></li><li><a class="dropdown-item font-13" href="javascript:;" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().showOrHideColumns_chart(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `')"><i class="dropdown-icon fa fa-eye-slash" id="DropDown_Eye_EyeSlash"></i><span id="ShowOrHideColumn">Hide Column</span> </a></li> <li><a class="dropdown-item font-13" href="javascript:;" onchange="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeDisplayText_chart('` + DisplayText + `','` + Select2Id + `')"><input type="text" placeholder="Display Text" class="w-100" id="DisplayText_` + DisplayText + `"> </a></li> <li><a class="dropdown-item font-13" href="javascript:;" class="select2-selection__choice__remove" onclick=''><span id="RemoveSelectedColumnInSelect2" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().removeColumn_Select2(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `')"> Remove Column </span></a></li><li><a class="dropdown-item font-13 pr-0" href="javascript:;" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().IsFilterableColumnInSelect2_chart(` + ElementId + `,'` + DisplayText + `','` + Select2Id + `')"><span id="IsFilterableColumnInSelect2">IsFilterable<i class="dropdown-icon fa fa-check pl-5 hidden text-primary" style="font-size:15px" id="DropDown_IsFilterableInSelect2_` + DisplayText + `"></i></span> </a></li></ul></div>`;
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").html(`<span class="" role="presentation" style="float: right;"></span>` + DisplayText);
                            $("#" + Select2Id).find("[title='" + DisplayText + "'] [role='presentation']").append(html);
                            $("#" + Select2Id).find("[title='" + DisplayText + "'] [role='presentation']").addClass("ml-2 mr-2");
                        }
                        $(".select2-selection__choice").addClass("bg-primary");
                    }
                    clickedSelect2Caret(ElementId, DisplayText, Select2Id) {
                        var instance = this;
                        $('#' + Select2Id.toLowerCase() + '_select').select2('close');
                        if ($("#" + Select2Id).find(".dropdown-menu_" + DisplayText).hasClass('show')) {
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                        }
                        $("#" + Select2Id).find(".select2-selection__rendered").find(".select2-selection__choice").removeClass("bg-success");
                        $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").addClass("bg-success");
                        instance.IsclickedSelect2Caret = true;
                        $('#xaxis_select').on('select2:opening', function (e) {
                            instance.select2_Opening(e, ElementId, DisplayText, instance.ChartAxis.Horizontal);
                        });
                        $('#yaxis_select').on('select2:opening', function (e) {
                            instance.select2_Opening(e, ElementId, DisplayText, instance.ChartAxis.Vertical);
                        });
                        $('#groupby_select').on('select2:opening', function (e) {
                            instance.select2_Opening(e, ElementId, DisplayText, instance.ChartAxis.GroupBy);
                        });
                        let html = "";
                        var Aggr = Unibase.Platform.Analytics.Reports.Enums.AggregationType.none;
                        var Sortby = "none";
                        var DisplayText = DisplayText;
                        var Aggregation = instance._reportBuilder.getAggregationsByDataTypes($("#li_" + ElementId).find("#ColDataType").text());
                        for (var i = 0; i < Aggregation.length; i++) {
                            if (i == 0) {
                                Aggr = Aggregation[i].Value;
                            }
                            if (Select2Id == instance.ChartAxis.GroupBy && Aggregation[i].AggrType == "year") {
                                var html2 = `<div class="dropdown-menu open-right-side" style="width:120px">      
                                <a class="dropdown-item font-13 pr-0 pl-0 Aggregation_Year_` + DisplayText + `" id="Aggr_Year_` + DisplayText + `_Prev_1Yr" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeAggregationYear_chart(` + ElementId + `, '` + DisplayText + `', '` + Aggregation[i].Value + `',1); " href="javascript: "><i class="dropdown-icon"></i><span> Prev 1 Year <i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-2 mr-0" style="font-size:12px;" id="DropDown_Year_Prev_1Yr_InSelect2_` + DisplayText + `"></i></span></a>
                                <a class="dropdown-item font-13 pr-0 pl-0 Aggregation_Year_` + DisplayText + `" id="Aggr_Year_` + DisplayText + `_Prev_2Yrs" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeAggregationYear_chart(` + ElementId + `, '` + DisplayText + `', '` + Aggregation[i].Value + `',2); " href="javascript: "><i class="dropdown-icon"></i><span> Prev 2 Years <i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-2 mr-0" style="font-size:12px;" id="DropDown_Year_Prev_2Yrs_InSelect2_` + DisplayText + `"></i></span></a>
                                <a class="dropdown-item font-13 pr-0 pl-0 Aggregation_Year_` + DisplayText + `" id="Aggr_Year_` + DisplayText + `_Prev_3Yrs" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeAggregationYear_chart(` + ElementId + `, '` + DisplayText + `', '` + Aggregation[i].Value + `',3); " href="javascript: "><i class="dropdown-icon"></i><span> Prev 3 Years <i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-2 mr-0" style="font-size:12px;" id="DropDown_Year_Prev_3Yrs_InSelect2_` + DisplayText + `"></i></span></a>
                                <a class="dropdown-item font-13 pr-0 pl-0 Aggregation_Year_` + DisplayText + `" id="Aggr_Year_` + DisplayText + `_Prev_4Yrs" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeAggregationYear_chart(` + ElementId + `, '` + DisplayText + `', '` + Aggregation[i].Value + `',4); " href="javascript: "><i class="dropdown-icon"></i><span> Prev 4 Years <i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-2 mr-0" style="font-size:12px;" id="DropDown_Year_Prev_4Yrs_InSelect2_` + DisplayText + `"></i></span></a>
                                </div>`;
                            }
                            html += `<a class="dropdown-item font-13 pr-0 pl-0 Aggregation_` + DisplayText + `" id="Aggr_` + DisplayText + `_` + Aggregation[i].Value + `" onclick="javascript: Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().changeAggregation_chart(` + ElementId + `, '` + DisplayText + `', '` + Select2Id + `',` + Aggregation[i].Value + `); " href="javascript: "><i class="dropdown-icon"></i><span>` + Aggregation[i].AggrType + `<i class="dropdown-icon fa fa-check pull-right hidden text-primary mt-2 mr-0" style="font-size:12px;" id="DropDown_` + Aggregation[i].Value + `_InSelect2_` + DisplayText + `"></i></span></a>`;
                        }
                        $("#" + Select2Id).find('#dropdown_Aggregation_' + DisplayText).find(".dropdown-menu").html(html);
                        if (Select2Id == instance.ChartAxis.GroupBy && Aggregation[i - 1].AggrType == "year") {
                            $("#" + Select2Id).find('#dropdown_Aggregation_' + DisplayText).find("#Aggr_" + DisplayText + "_" + Analytics.Reports.Enums.AggregationType.year).prepend(html2);
                            $("#" + Select2Id).find('#dropdown_Aggregation_' + DisplayText).find("#Aggr_" + DisplayText + "_" + Analytics.Reports.Enums.AggregationType.year).addClass("sub-dropdown-menu show-on-hover").removeAttr("onclick");
                        }
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            $("#YAxis").css("z-index", "0");
                            $("#GroupBy").css("z-index", "0");
                            $("#XAxis").removeAttr("style");
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                            Aggr = instance.xaxisColumns[Index].Aggregation;
                            Sortby = instance.xaxisColumns[Index].SortOrder;
                            DisplayText = instance.xaxisColumns[Index].DisplayText;
                            let IsFilterable = instance.xaxisColumns[Index].IsFilterable;
                            instance.DropDownValueSetInSelect2_chart(DisplayText, IsFilterable, Aggr, Sortby);
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            $("#GroupBy").css("z-index", "0");
                            $("#XAxis").css("z-index", "0");
                            $("#YAxis").removeAttr("style");
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                            Aggr = instance.yaxisColumns[Index].Aggregation;
                            Sortby = instance.yaxisColumns[Index].SortOrder;
                            DisplayText = instance.yaxisColumns[Index].DisplayText;
                            let IsFilterable = instance.yaxisColumns[Index].IsFilterable;
                            instance.DropDownValueSetInSelect2_chart(DisplayText, IsFilterable, Aggr, Sortby);
                        }
                        else {
                            $("#XAxis, #YAxis, #GroupBy").removeAttr("style");
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                            Aggr = instance.groupColumns[Index].Aggregation;
                            Sortby = instance.groupColumns[Index].SortOrder;
                            DisplayText = instance.groupColumns[Index].DisplayText;
                            let IsFilterable = instance.groupColumns[Index].IsFilterable;
                            instance.DropDownValueSetInSelect2_chart(DisplayText, IsFilterable, Aggr, Sortby);
                        }
                        $("#" + Select2Id).find("#DisplayText_" + DisplayText).val(DisplayText);
                        $("#" + Select2Id).find("#DisplayText_" + DisplayText).focus();
                    }
                    select2_Opening(e, ElementId, DisplayText, Select2Id) {
                        var instance = this;
                        for (var i = 0; i < $("#" + Select2Id).find(".dropdown-menu_" + DisplayText).children().length; i++) {
                            if ($("#" + Select2Id).find("[title='" + DisplayText + "']").find(".dropdown-toggle").attr("aria-expanded") == "true") {
                                e.preventDefault();
                            }
                            else {
                                $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                            }
                        }
                        if (instance.IsclickedSelect2Caret == true) {
                            e.preventDefault();
                            instance.IsclickedSelect2Caret = false;
                        }
                        else {
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                        }
                    }
                    DropDownValueSetInSelect2_chart(DisplayText, IsFilterable, Aggr, Sortby) {
                        var instance = this;
                        if (IsFilterable == true)
                            $("#DropDown_IsFilterableInSelect2_" + DisplayText).removeClass('hidden');
                        else
                            $("#DropDown_IsFilterableInSelect2_" + DisplayText).addClass('hidden');
                        if (Aggr == 0)
                            $("#DropDown_" + Aggr + "_InSelect2_" + DisplayText).removeClass('hidden');
                        else
                            $("#DropDown_" + Aggr + "_InSelect2_" + DisplayText).removeClass('hidden');
                        $("#DropDown_IsAscInSelect2_" + DisplayText).addClass('hidden');
                        $("#DropDown_IsDescInSelect2_" + DisplayText).addClass('hidden');
                        if (Sortby == "Asc") {
                            $("#DropDown_IsAscInSelect2_" + DisplayText).removeClass('hidden');
                            $("#DropDown_IsDesc_" + DisplayText).addClass('hidden');
                        }
                        else if (Sortby == "Desc") {
                            $("#DropDown_IsDescInSelect2_" + DisplayText).removeClass('hidden');
                            $("#DropDown_IsAsc_" + DisplayText).addClass('hidden');
                        }
                        else {
                            $("#DropDown_IsAscInSelect2_" + DisplayText).addClass('hidden');
                            $("#DropDown_IsDescInSelect2_" + DisplayText).addClass('hidden');
                        }
                    }
                    showOrHideColumns_chart(ColumnId, DisplayText, Select2Id) {
                        var instance = this;
                        let IsHidden = false;
                        let ColumnName = "";
                        if ($("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").find("#ShowOrHideColumn").text() == "Hide Column") {
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").find("#ShowOrHideColumn").text("Show Column");
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").find("#DropDown_Eye_EyeSlash").removeClass("fa-eye-slash").addClass("fa-eye");
                            IsHidden = true;
                        }
                        else {
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").find("#ShowOrHideColumn").text("Hide Column");
                            $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").find("#DropDown_Eye_EyeSlash").addClass("fa-eye-slash").removeClass("fa-eye");
                            if (DisplayText == "") {
                                DisplayText = DisplayText;
                            }
                            IsHidden = false;
                        }
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                            instance.xaxisColumns[Index].IsHidden = IsHidden;
                            ColumnName = instance.xaxisColumns[Index].ColumnName;
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                            instance.yaxisColumns[Index].IsHidden = IsHidden;
                            ColumnName = instance.yaxisColumns[Index].ColumnName;
                        }
                        else {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                            instance.groupColumns[Index].IsHidden = IsHidden;
                            ColumnName = instance.groupColumns[Index].ColumnName;
                        }
                        instance._reportBuilder.table.toggleColumn(ColumnName);
                        $(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                    }
                    changeDisplayText_chart(DisplayText, Select2Id) {
                        var instance = this;
                        let ColId = 0;
                        let ColName = "";
                        let DisplayText_New = $("#" + Select2Id).find("#DisplayText_" + DisplayText).val().toString();
                        var Index_DisplayTextExists = -1;
                        var Index = -1;
                        var arryName = [];
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            Index_DisplayTextExists = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.Horizontal);
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                            arryName = instance.xaxisColumns;
                            ColId = instance.xaxisColumns[Index].ColumnId;
                            ColName = instance.xaxisColumns[Index].ColumnName;
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            Index_DisplayTextExists = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.Vertical);
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                            arryName = instance.yaxisColumns;
                            ColId = instance.yaxisColumns[Index].ColumnId;
                            ColName = instance.yaxisColumns[Index].ColumnName;
                        }
                        else {
                            Index_DisplayTextExists = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.GroupBy);
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                            arryName = instance.groupColumns;
                            ColId = instance.groupColumns[Index].ColumnId;
                            ColName = instance.groupColumns[Index].ColumnName;
                        }
                        if (DisplayText_New != "" && DisplayText_New.indexOf(" ") == -1) {
                            let selCol_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(DisplayText_New);
                            if (selCol_Index == -1) {
                                arryName[Index].DisplayText = DisplayText_New;
                                $("#" + Select2Id).find(".select2-selection__rendered").find("[title='" + DisplayText + "']").attr("title", DisplayText_New);
                                instance.coordinate_DropDown(Select2Id);
                            }
                            else {
                                let x_index = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.Horizontal);
                                let y_index = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.Vertical);
                                let grp_index = instance.getIndexByDisplayText(DisplayText_New, instance.ChartAxis.GroupBy);
                                let Select2Id = "";
                                if (x_index != -1) {
                                    Select2Id = instance.ChartAxis.Horizontal;
                                }
                                if (y_index != -1) {
                                    Select2Id = instance.ChartAxis.Vertical;
                                }
                                if (grp_index != -1) {
                                    Select2Id = instance.ChartAxis.GroupBy;
                                }
                                $("#DisplayText_" + DisplayText).val(DisplayText);
                                alert("Column - " + DisplayText_New + " already exists in " + Select2Id + " select2. Please change display text and try again");
                                return false;
                            }
                        }
                        else {
                            $("#DisplayText_" + DisplayText).val(DisplayText);
                            alert("Display text of column - '" + ColName + "' shouldn't be empty and shouldn't contain spaces");
                            return false;
                        }
                        let SelCols_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(DisplayText);
                        instance._reportBuilder.selectedColumns[SelCols_Index].DisplayText = DisplayText_New;
                        instance._reportBuilder.load_data(instance._reportBuilder.table);
                        var len = 0;
                        instance.removeColumn_ColorsArray(DisplayText);
                        instance.addColumnColors();
                    }
                    resetSelect2Columns(elementId) {
                        var instance = this;
                        switch (elementId) {
                            case 'sortby_select':
                                instance._reportBuilder.SortColumns = [];
                                instance._reportBuilder.stringifyed_SortColumns = "";
                                $("#sort_selected_columns").html("");
                                instance._reportBuilder.load_data(instance._reportBuilder.table);
                                break;
                            case 'groupby_select':
                                instance._chartBuilder.groupColumns = [];
                                for (var i = 0; i < instance._reportBuilder.selectedColumns.length; i++) {
                                    var s_col = instance._reportBuilder.selectedColumns[i];
                                    if (s_col.GroupBy) {
                                        s_col.GroupBy = false;
                                    }
                                    else {
                                        s_col.Aggregation = Analytics.Reports.Enums.AggregationType.none;
                                    }
                                }
                                $("#groupby_selected_columns").html("");
                                instance._reportBuilder.load_data(instance._reportBuilder.table);
                                break;
                            case 'categories_select':
                                $("#categories_selected_columns").html("");
                                instance._reportBuilder.Categories = [];
                                for (var i = 0; i < instance._reportBuilder.selectedColumns.length; i++) {
                                    var s_col = instance._reportBuilder.selectedColumns[i];
                                    if (s_col.GroupByCategory)
                                        s_col.GroupByCategory = false;
                                }
                                instance._reportBuilder.load_data(instance._reportBuilder.table);
                                break;
                            case 'xaxis_select':
                                instance._chartBuilder.xaxisColumns = [];
                                $("#xaxis_selected_columns").html("");
                                break;
                            case 'yaxis_select':
                                instance._chartBuilder.yaxisColumns = [];
                                $("#yaxis_selected_columns").html("");
                                break;
                            case 'dynamicFilter_select':
                                instance._reportBuilder.dynamicFilters = [];
                                $("#dynamic-list-group-wrapper").html("");
                                instance._reportBuilder.load_data(instance._reportBuilder.table);
                                break;
                        }
                    }
                    removeColumn_ColorsArray(DisplayText) {
                        var instance = this;
                        var ApplColValueColor = instance.appliedColumnValueColor;
                        for (var key in ApplColValueColor) {
                            if (key.includes(DisplayText)) {
                                delete ApplColValueColor[key];
                                ApplColValueColor.length = ApplColValueColor.length - 1;
                            }
                        }
                        var ApplColColor = instance.appliedColumnColor;
                        for (var key in ApplColColor) {
                            if (key.includes(DisplayText)) {
                                delete ApplColColor[key];
                                ApplColColor.length = ApplColColor.length - 1;
                            }
                        }
                    }
                    removeColumn_Select2(ColumnId, aliasName, Select2Id) {
                        var instance = this;
                        instance.removeColumn_ColorsArray(aliasName);
                        if (Select2Id == instance.ChartAxis.GroupBy) {
                            instance._reportBuilder.pivot.PivotRows = [];
                        }
                        let value = $('#' + Select2Id.toLowerCase() + '_select').val();
                        let index = 0;
                        let XAxis_Index = -1, YAxis_Index = -1, GroupBy_Index = -1;
                        for (var i = 0; i < value.length; i++) {
                            if (parseInt(value[i]) == ColumnId) {
                                index = i;
                                break;
                            }
                        }
                        let Sel_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(aliasName);
                        let ColName = instance._reportBuilder.selectedColumns[Sel_Index].ColumnName;
                        value.splice(index, 1);
                        $(".select2-selection__rendered").find("[title='" + aliasName + "']").removeClass("bg-success");
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            XAxis_Index = instance.getIndexByDisplayText(aliasName, instance.ChartAxis.Horizontal);
                            instance.xaxisColumns.splice(XAxis_Index, 1);
                            $('#' + Select2Id.toLowerCase() + '_select').val(value).trigger("change");
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            YAxis_Index = instance.getIndexByDisplayText(aliasName, instance.ChartAxis.Vertical);
                            instance.yaxisColumns.splice(YAxis_Index, 1);
                            var len = $("#" + Select2Id.toLowerCase() + "_select").find("option[value='" + ColumnId + "']").length;
                            if (len >= 2) {
                                $("#" + Select2Id.toLowerCase() + "_select").find("option[value='" + ColumnId + "']")[len - 2].remove();
                                $("#" + Select2Id.toLowerCase() + "_select").find("option[value='" + ColumnId + "']")[len - 2].remove();
                            }
                            else {
                                $('#' + Select2Id.toLowerCase() + '_select').val(value).trigger("change");
                            }
                        }
                        else {
                            GroupBy_Index = instance.getIndexByDisplayText(aliasName, "GroupBy");
                            instance.groupColumns.splice(GroupBy_Index, 1);
                            $('#' + Select2Id.toLowerCase() + '_select').val(value).trigger("change");
                        }
                        XAxis_Index = instance.getIndexByDisplayText(aliasName, instance.ChartAxis.Horizontal);
                        YAxis_Index = instance.getIndexByDisplayText(aliasName, instance.ChartAxis.Vertical);
                        GroupBy_Index = instance.getIndexByDisplayText(aliasName, instance.ChartAxis.GroupBy);
                        if (XAxis_Index == -1 && YAxis_Index == -1 && GroupBy_Index == -1) {
                            instance._reportBuilder.selectedColumns.splice(Sel_Index, 1);
                            instance._reportBuilder.table.deleteColumn(aliasName);
                            instance._reportBuilder.load_data(instance._reportBuilder.table);
                        }
                        setTimeout(function () {
                            instance.coordinate_DropDown(Select2Id);
                            if (Select2Id == "YAxis") {
                                $("#" + Select2Id.toLowerCase() + "_select").append('<option value="' + ColumnId + '">' + ColName + '</option>');
                            }
                        }, 100);
                    }
                    changeAggregation_chart(ColumnId, DisplayText, Select2Id, AggrValue) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var instance = this;
                            if (Select2Id == instance.ChartAxis.Horizontal) {
                                let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                                instance.xaxisColumns[Index].Aggregation = AggrValue;
                            }
                            else if (Select2Id == instance.ChartAxis.Vertical) {
                                let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                                instance.yaxisColumns[Index].Aggregation = AggrValue;
                            }
                            else {
                                let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                                instance.groupColumns[Index].Aggregation = AggrValue;
                            }
                            let sel_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(DisplayText);
                            instance._reportBuilder.selectedColumns[sel_Index].Aggregation = AggrValue;
                            $(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                            yield instance._reportBuilder.load_data(instance._reportBuilder.table);
                            instance.addColumnColors();
                        });
                    }
                    changeAggregationYear_chart(ColumnId, DisplayText, AggrValue, YearComparisonType) {
                        return __awaiter(this, void 0, void 0, function* () {
                            var instance = this;
                            let Index = instance.getIndexByDisplayText(DisplayText, "GroupBy");
                            let ColumnName = instance.groupColumns[Index].ColumnName;
                            instance.groupColumns[Index].YearComparisonType = YearComparisonType;
                            instance.groupColumns[Index].Aggregation = Number(AggrValue);
                            let sel_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(DisplayText);
                            instance._reportBuilder.selectedColumns[sel_Index].YearComparisonType = YearComparisonType;
                            instance._reportBuilder.selectedColumns[sel_Index].Aggregation = Number(AggrValue);
                            yield instance._reportBuilder.getDistinctData(ColumnId, ColumnName, Number(AggrValue));
                            $(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                            yield instance._reportBuilder.load_data(instance._reportBuilder.table);
                            instance.addColumnColors();
                        });
                    }
                    IsFilterableColumnInSelect2_chart(ColumnId, DisplayText, Select2Id) {
                        var instance = this;
                        let Index = 0;
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                            let IsFilterable = instance.xaxisColumns[Index].IsFilterable;
                            instance.xaxisColumns[Index].IsFilterable = !IsFilterable;
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                            let IsFilterable = instance.yaxisColumns[Index].IsFilterable;
                            instance.yaxisColumns[Index].IsFilterable = !IsFilterable;
                        }
                        else {
                            Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                            let IsFilterable = instance.groupColumns[Index].IsFilterable;
                            instance.groupColumns[Index].IsFilterable = !IsFilterable;
                        }
                        Unibase.Platform.Analytics.Components.ReportViewer.Instance().navigationHelper.popup(Index, "", Unibase.Platform.Analytics.Reports.DynamicFilter.Instance(), null, Platform.Helpers.Size.Auto);
                        $(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                    }
                    changeSortBy_chart(ColumnId, DisplayText, Select2Id, SortByType) {
                        var instance = this;
                        for (var i = 0; i < instance.xaxisColumns.length; i++) {
                            instance.xaxisColumns[i].SortOrder = "none";
                        }
                        for (var i = 0; i < instance.yaxisColumns.length; i++) {
                            instance.yaxisColumns[i].SortOrder = "none";
                        }
                        for (var i = 0; i < instance.groupColumns.length; i++) {
                            instance.groupColumns[i].SortOrder = "none";
                        }
                        if (Select2Id == instance.ChartAxis.Horizontal) {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Horizontal);
                            instance.xaxisColumns[Index].SortOrder = SortByType;
                        }
                        else if (Select2Id == instance.ChartAxis.Vertical) {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.Vertical);
                            instance.yaxisColumns[Index].SortOrder = SortByType;
                        }
                        else {
                            let Index = instance.getIndexByDisplayText(DisplayText, instance.ChartAxis.GroupBy);
                            instance.groupColumns[Index].SortOrder = SortByType;
                        }
                        let Sel_Index = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(DisplayText);
                        instance._reportBuilder.selectedColumns[Sel_Index].SortOrder = SortByType;
                        $(".select2-selection__rendered").find("[title='" + DisplayText + "']").removeClass("bg-success");
                        instance._reportBuilder.load_data(instance._reportBuilder.table);
                    }
                    getindexByTooltipArray(ColumnId) {
                        var instance = this;
                        return instance.toolTipArray.findIndex(x => x.ColumnId == ColumnId);
                    }
                    pushPivotData() {
                        var instance = this;
                        var Pivot = instance.groupColumns.filter(g => g.Aggregation == Analytics.Reports.Enums.AggregationType.month || g.Aggregation == Analytics.Reports.Enums.AggregationType.year);
                        if (Pivot.length > 0) {
                            instance._reportBuilder.pivot.ColumnName = "";
                            let Pivot_Agg = instance.yaxisColumns[0];
                            if (instance.yaxisColumns.length > 1) {
                                alert("While Pivot, need to select only one Y-Axis Column");
                                return false;
                            }
                            if (Pivot_Agg.Aggregation == Analytics.Reports.Enums.AggregationType.none) {
                                alert("While Pivot, need to apply aggregation for Y-Axis Column");
                                return false;
                            }
                            instance._reportBuilder.pivot.ColumnName = Pivot[0].ColumnName;
                            instance._reportBuilder.pivot.AggColumnName = Pivot_Agg.ColumnName;
                            instance._reportBuilder.pivot.AggFuncId = Pivot_Agg.Aggregation;
                            instance._reportBuilder.pivot.DateType = Number(Pivot[0].Aggregation);
                        }
                        else {
                            var tenure_len = instance._reportBuilder.TenureReport.length;
                        }
                    }
                    bindChartColumns(chartColumns) {
                        var instance = this;
                        var _x = [], _y = [], _g = [], _b = [];
                        instance.xaxisColumns = [], instance.yaxisColumns = [], instance.groupColumns = [], instance.SelectedValueColorColumns = [], instance.chartBaseColumns = [];
                        for (var i = 0; i < chartColumns.length; i++) {
                            var chartCol = chartColumns[i];
                            let ColId = chartCol.ColumnValue;
                            let ColName = chartCol.Name;
                            let Color = chartCol.Color;
                            const IsNumAbb = chartCol.IsNumAbb;
                            var colorType = Unibase.Platform.Analytics.Enums.ColorType;
                            instance.CoordinateDisplayText = chartCol.AliasName;
                            if (chartCol.IsXaxis == true) {
                                _x.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let xObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    DataType: chartCol.DataType,
                                    CoordinateTypeId: instance.ChartAxis.Horizontal,
                                    ColorType: chartCol.ColorAppliedOn,
                                    divId: "xaxis_selected_columns"
                                };
                                instance.selected_Coordinate(xObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.Horizontal);
                                if (chartCol.AggregationValue != Analytics.Reports.Enums.AggregationType.none) {
                                    instance.xaxisColumns[index].Aggregation = chartCol.AggregationValue;
                                }
                                if (chartCol.SortBy != "none") {
                                    instance.xaxisColumns[index].SortOrder = chartCol.SortBy;
                                }
                                instance.xaxisColumns[index].IsNumAbb = IsNumAbb;
                                $(`#IsNumberAbbrevation_x`).prop('checked', IsNumAbb);
                            }
                            else if (chartCol.IsYaxis == true) {
                                _y.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let yObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    DataType: chartCol.DataType,
                                    CoordinateTypeId: instance.ChartAxis.Vertical,
                                    ColorType: 0,
                                    divId: "yaxis_selected_columns"
                                };
                                instance.selected_Coordinate(yObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.Vertical);
                                if (chartCol.AggregationValue != Analytics.Reports.Enums.AggregationType.none) {
                                    instance.yaxisColumns[index].Aggregation = chartCol.AggregationValue;
                                }
                                if (chartCol.SortBy != "none") {
                                    instance.yaxisColumns[index].SortOrder = chartCol.SortBy;
                                }
                                instance.yaxisColumns[index].IsNumAbb = IsNumAbb;
                                $(`#IsNumberAbbrevation_y`).prop('checked', IsNumAbb);
                            }
                            else if (chartCol.IsGroupBy == true) {
                                _g.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let gObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DataType: chartCol.DataType,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    CoordinateTypeId: instance.ChartAxis.GroupBy,
                                    ColorType: chartCol.ColorAppliedOn,
                                    divId: "groupby_selected_columns"
                                };
                                instance.selected_Coordinate(gObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.GroupBy);
                                if (chartCol.AggregationValue != Analytics.Reports.Enums.AggregationType.none) {
                                    instance.groupColumns[index].Aggregation = chartCol.AggregationValue;
                                }
                                if (chartCol.SortBy != "none") {
                                    instance.groupColumns[index].SortOrder = chartCol.SortBy;
                                }
                            }
                            else if (chartCol.IsLineChart == true) {
                                _g.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let lObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DataType: chartCol.DataType,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    CoordinateTypeId: instance.ChartAxis.LineChart,
                                    ColorType: chartCol.ColorAppliedOn,
                                    divId: "line_chart_selected_columns"
                                };
                                instance.selected_Coordinate(lObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.LineChart);
                                if (chartCol.AggregationValue != Analytics.Reports.Enums.AggregationType.none) {
                                    instance.groupColumns[index].Aggregation = chartCol.AggregationValue;
                                }
                                if (chartCol.SortBy != "none") {
                                    instance.lineChartColumns[index].SortOrder = chartCol.SortBy;
                                }
                            }
                            if (chartCol.IsChartBaseColumn) {
                                _b.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let lObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DataType: chartCol.DataType,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    CoordinateTypeId: instance.ChartAxis.BaseColumn,
                                    ColorType: chartCol.ColorAppliedOn,
                                    divId: "base_column_selected_columns"
                                };
                                instance.selected_Coordinate(lObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.BaseColumn);
                                if (chartCol.SortBy && chartCol.SortBy != "none") {
                                    instance.lineChartColumns[index].SortOrder = chartCol.SortBy;
                                }
                                instance.coordinate_DropDown(instance.ChartAxis.ChartBase);
                            }
                            if (chartCol.Color != null) {
                                instance.chartViewer_Colors(chartCol.Color, chartCol.ColumnValue, chartCol.Name);
                            }
                            if (chartCol.IsLineChart == true) {
                                _g.push(chartCol.ColumnValue);
                                if (chartCol.IsFilterable == true) {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).removeClass('hidden');
                                    if (chartCol.IsFilterable) {
                                        instance.isFilterable[ColName] = {
                                            ColumnName: ColName,
                                            IsFilterable: true
                                        };
                                    }
                                }
                                else {
                                    $("#DropDown_IsFilterableInSelect2_" + chartCol.AliasName).addClass('hidden');
                                }
                                let lObj = {
                                    ColumnId: chartCol.ColumnValue,
                                    ColumnName: chartCol.Name,
                                    DataType: chartCol.DataType,
                                    DisplayText: chartCol.AliasName,
                                    AliasName: chartCol.AliasName,
                                    CoordinateTypeId: instance.ChartAxis.LineChart,
                                    ColorType: chartCol.ColorAppliedOn,
                                    divId: "line_chart_selected_columns"
                                };
                                instance.selected_Coordinate(lObj);
                                var index = instance.getIndexByDisplayText(chartCol.AliasName, instance.ChartAxis.LineChart);
                                if (chartCol.AggregationValue != Analytics.Reports.Enums.AggregationType.none) {
                                    instance.groupColumns[index].Aggregation = chartCol.AggregationValue;
                                }
                                if (chartCol.SortBy != "none") {
                                    instance.lineChartColumns[index].SortOrder = chartCol.SortBy;
                                }
                            }
                        }
                        instance.coordinate_DropDown(instance.ChartAxis.Horizontal);
                        instance.coordinate_DropDown(instance.ChartAxis.Vertical);
                        instance.coordinate_DropDown(instance.ChartAxis.GroupBy);
                        instance.CoordinateDisplayText = "";
                    }
                    reportColumns(crtObj, columns) {
                        var instance = this;
                        let isTable = this._reportBuilder.reportType == Unibase.Platform.Analytics.Reports.Enums.ReportType.Table ? true : false;
                        for (var i = 0; i < columns.length; i++) {
                            var col = crtObj.ReportColumns.find(x => x.AliasName == columns[i]["DisplayText"]) ? true : false;
                            let rpCol = instance._reportBuilder.selectedColumns.find(x => x.AliasName == columns[i].AliasName);
                            if (col != true) {
                                var aggr = instance._reportBuilder.selectedColumns.find(x => x.DisplayText == columns[i]["DisplayText"]);
                                var sort = instance._reportBuilder.SortColumns.find(x => x.DisplayText == columns[i]["DisplayText"]);
                                let ccol = new ReportColumn();
                                ccol.ColumnValue = Number(isTable ? columns[i]["ColumnId"] : rpCol.ColumnId);
                                ccol.ReportColumnName = columns[i]["ColumnName"];
                                ccol.AliasName = columns[i]["AliasName"];
                                ccol.DisplayText = columns[i]["DisplayText"];
                                ccol.Isvisible = columns[i]["IsHidden"];
                                ccol.AggrFuncId = (aggr) ? aggr.Aggregation : columns[i]["Aggregation"];
                                ccol.GroupBy = columns[i]["GroupBy"];
                                ccol.SortType = (sort) ? sort.SortOrder : columns[i]["SortOrder"];
                                ccol.YearComparisonType = columns[i]["YearComparisonType"];
                                ccol.DlColumnName = rpCol && rpCol.DlColumnName;
                                ccol.DataListColumnName = rpCol && rpCol.DataListColumnName;
                                crtObj.ReportColumns.push(ccol);
                            }
                        }
                        return crtObj;
                    }
                    chartPreview(ChartTypeName, ChartTypeId) {
                        var instance = this;
                        instance.ChartTypeId = ChartTypeId, instance.ChartTypeName = ChartTypeName;
                        instance.Dataset = [], instance.XaxisData = [];
                        if (instance._reportBuilder.pivot.ColumnName) {
                            instance.chartType('myChart');
                        }
                        else {
                            instance.ChartSelectedColumns = instance._chartBuilder.coordinate_Elements(true, true, true, true, true, true);
                            instance._reportBuilder.load_data(instance._reportBuilder.table);
                            instance.loadSortColumnsSelect2();
                        }
                    }
                    chartData() {
                        var instance = this;
                        var sortColumns = [];
                        var totalColumns = [];
                        instance.fileCacheHelper.loadJsFile("platform/analytics/managers/reportmanager.js", function () {
                            instance.fileCacheHelper.loadJsFile('platform/analytics/enums/charttype.js', function () {
                                instance.fileCacheHelper.loadJsFile("platform/core/infos/status.js", function () {
                                    instance.ChartSelectedColumns = instance._chartBuilder.coordinate_Elements(true, true, true, true, true, true);
                                    for (var i = 0; i < instance._reportBuilder.SortColumns.length; i++) {
                                        var colName = instance._reportBuilder.SortColumns[i].DisplayText;
                                        let chartIdx = instance.ChartSelectedColumns.findIndex(x => x.AliasName == colName);
                                        let reportIdx = instance._reportBuilder.selectedColumns.findIndex(x => x.AliasName == colName);
                                        if (chartIdx == -1 && reportIdx != -1) {
                                            let rpCol = instance._reportBuilder.selectedColumns[reportIdx];
                                            sortColumns.push({
                                                Aggregation: rpCol.Aggregation,
                                                AliasName: rpCol.AliasName,
                                                ChartColumnId: 0,
                                                ColorType: 1,
                                                ColumnId: 0,
                                                ColumnValue: 0,
                                                ColumnName: rpCol.ColumnName,
                                                DataType: rpCol.DataType,
                                                DisplayText: rpCol.DisplayText,
                                                GroupBy: rpCol.GroupBy,
                                                IsBaseColumn: false,
                                                IsFilterable: false,
                                                IsHidden: !rpCol.Isvisible,
                                                IsLineChart: false,
                                                SortOrder: instance._reportBuilder.SortColumns[i].SortOrder,
                                                XAxis: true,
                                                YAxis: false,
                                            });
                                        }
                                    }
                                    let crtObj = new ReportObject();
                                    crtObj.DataListId = instance._reportBuilder.DataListId;
                                    crtObj.TopRecords = Number($("#txt_totalrecords").val());
                                    crtObj.StaticFilter = instance._reportBuilder.queryBuilderString;
                                    crtObj.SortColumns = instance._reportBuilder.stringifyed_SortColumns;
                                    crtObj.FromDate = Unibase.Platform.Helpers.NavigationHelper.commonFilter_FromDate;
                                    crtObj.ToDate = Unibase.Platform.Helpers.NavigationHelper.commonFilter_ToDate;
                                    crtObj.TopRecords = instance._reportBuilder.topRecords;
                                    crtObj.ReportTypeId = instance._reportBuilder.reportType;
                                    totalColumns = instance.ChartSelectedColumns.concat(sortColumns);
                                    instance.reportColumns(crtObj, totalColumns);
                                    if (crtObj.ReportColumns.length != 0) {
                                        instance._reportManager.getTableData(crtObj).then(function (response) {
                                            if (response.status == Unibase.Data.Status.Success) {
                                                if (response.result != "") {
                                                    var res = JSON.parse(response.result);
                                                    if (res.Data != "")
                                                        var data = JSON.parse(res.Data);
                                                    if (instance.isColumnRename)
                                                        instance._reportBuilder.load_data(instance._reportBuilder.table);
                                                    else if (instance.yaxisColumns.length != 0)
                                                        instance._reportBuilder.table.replaceData(data);
                                                    instance.ChartData = data;
                                                    instance.chart_dataSet();
                                                }
                                            }
                                            else {
                                                return MessageHelper.Instance().showError(response.message, "div_ReportBuilderErrorMessage");
                                            }
                                        });
                                    }
                                });
                            });
                        });
                    }
                    chartColumns() {
                        var instance = this;
                        instance._reportBuilder.ChartColumns = [];
                        for (var c = 0; c < instance.ChartSelectedColumns.length; c++) {
                            var TableColors = false;
                            let chartSelectedColumn = instance.ChartSelectedColumns[c];
                            if (instance.colorApplyColumn.length > 0)
                                TableColors = instance.colorApplyColumn.find(x => x.ColumnName == chartSelectedColumn.ColumnName) ? true : false;
                            var Columncolor = null;
                            var ColumnValueColors = null;
                            let colors;
                            if ((chartSelectedColumn.IsXAxis != undefined && chartSelectedColumn.IsXAxis != true) || (chartSelectedColumn.XAxis != undefined && chartSelectedColumn.XAxis != true)) {
                                var col = instance.Colors[chartSelectedColumn.DisplayText];
                                if (col != undefined)
                                    colors = col.colors;
                            }
                            else {
                                colors = "";
                            }
                            var tooltip = instance.toolTipArray.find(x => x.AliasName == chartSelectedColumn.AliasName);
                            instance._reportBuilder.ChartColumns.push({
                                Name: chartSelectedColumn.ColumnName || chartSelectedColumn.Name,
                                AliasName: chartSelectedColumn.AliasName,
                                ColumnValue: Number(chartSelectedColumn.ColumnId) || Number(chartSelectedColumn.ColumnValue),
                                DataType: chartSelectedColumn.DataType,
                                AggregationValue: chartSelectedColumn.Aggregation || chartSelectedColumn.AggregationValue,
                                Color: colors,
                                SortBy: chartSelectedColumn.SortOrder,
                                IsToolTip: tooltip ? true : false,
                                IsXaxis: chartSelectedColumn.XAxis || chartSelectedColumn.IsXaxis,
                                IsYaxis: chartSelectedColumn.YAxis || chartSelectedColumn.IsYaxis,
                                IsGroupBy: chartSelectedColumn.GroupBy || chartSelectedColumn.IsGroupBy,
                                IsLineChart: chartSelectedColumn.IsLineChart,
                                IsFilterable: chartSelectedColumn.IsFilterable,
                                ColorAppliedOn: chartSelectedColumn.ColorType || chartSelectedColumn.ColorAppliedOn,
                                IsChartBaseColumn: chartSelectedColumn.IsBaseColumn,
                                IsNumAbb: chartSelectedColumn.IsNumAbb == undefined ? true : chartSelectedColumn.IsNumAbb,
                            });
                        }
                    }
                    colourNameToHex(colour) {
                        var colours = {
                            "aliceblue": "#f0f8ff", "antiquewhite": "#faebd7", "aqua": "#00ffff", "aquamarine": "#7fffd4", "azure": "#f0ffff",
                            "beige": "#f5f5dc", "bisque": "#ffe4c4", "black": "#000000", "blanchedalmond": "#ffebcd", "blue": "#0000ff", "blueviolet": "#8a2be2", "brown": "#a52a2a", "burlywood": "#deb887",
                            "cadetblue": "#5f9ea0", "chartreuse": "#7fff00", "chocolate": "#d2691e", "coral": "#ff7f50", "cornflowerblue": "#6495ed", "cornsilk": "#fff8dc", "crimson": "#dc143c", "cyan": "#00ffff",
                            "darkblue": "#00008b", "darkcyan": "#008b8b", "darkgoldenrod": "#b8860b", "darkgray": "#a9a9a9", "darkgreen": "#006400", "darkkhaki": "#bdb76b", "darkmagenta": "#8b008b", "darkolivegreen": "#556b2f",
                            "darkorange": "#ff8c00", "darkorchid": "#9932cc", "darkred": "#8b0000", "darksalmon": "#e9967a", "darkseagreen": "#8fbc8f", "darkslateblue": "#483d8b", "darkslategray": "#2f4f4f", "darkturquoise": "#00ced1",
                            "darkviolet": "#9400d3", "deeppink": "#ff1493", "deepskyblue": "#00bfff", "dimgray": "#696969", "dodgerblue": "#1e90ff",
                            "firebrick": "#b22222", "floralwhite": "#fffaf0", "forestgreen": "#228b22", "fuchsia": "#ff00ff",
                            "gainsboro": "#dcdcdc", "ghostwhite": "#f8f8ff", "gold": "#ffd700", "goldenrod": "#daa520", "gray": "#808080", "green": "#008000", "greenyellow": "#adff2f",
                            "honeydew": "#f0fff0", "hotpink": "#ff69b4",
                            "indianred ": "#cd5c5c", "indigo": "#4b0082", "ivory": "#fffff0", "khaki": "#f0e68c",
                            "lavender": "#e6e6fa", "lavenderblush": "#fff0f5", "lawngreen": "#7cfc00", "lemonchiffon": "#fffacd", "lightblue": "#add8e6", "lightcoral": "#f08080", "lightcyan": "#e0ffff", "lightgoldenrodyellow": "#fafad2",
                            "lightgrey": "#d3d3d3", "lightgreen": "#90ee90", "lightpink": "#ffb6c1", "lightsalmon": "#ffa07a", "lightseagreen": "#20b2aa", "lightskyblue": "#87cefa", "lightslategray": "#778899", "lightsteelblue": "#b0c4de",
                            "lightyellow": "#ffffe0", "lime": "#00ff00", "limegreen": "#32cd32", "linen": "#faf0e6",
                            "magenta": "#ff00ff", "maroon": "#800000", "mediumaquamarine": "#66cdaa", "mediumblue": "#0000cd", "mediumorchid": "#ba55d3", "mediumpurple": "#9370d8", "mediumseagreen": "#3cb371", "mediumslateblue": "#7b68ee",
                            "mediumspringgreen": "#00fa9a", "mediumturquoise": "#48d1cc", "mediumvioletred": "#c71585", "midnightblue": "#191970", "mintcream": "#f5fffa", "mistyrose": "#ffe4e1", "moccasin": "#ffe4b5",
                            "navajowhite": "#ffdead", "navy": "#000080",
                            "oldlace": "#fdf5e6", "olive": "#808000", "olivedrab": "#6b8e23", "orange": "#ffa500", "orangered": "#ff4500", "orchid": "#da70d6",
                            "palegoldenrod": "#eee8aa", "palegreen": "#98fb98", "paleturquoise": "#afeeee", "palevioletred": "#d87093", "papayawhip": "#ffefd5", "peachpuff": "#ffdab9", "peru": "#cd853f", "pink": "#ffc0cb", "plum": "#dda0dd", "powderblue": "#b0e0e6", "purple": "#800080",
                            "rebeccapurple": "#663399", "red": "#ff0000", "rosybrown": "#bc8f8f", "royalblue": "#4169e1",
                            "saddlebrown": "#8b4513", "salmon": "#fa8072", "sandybrown": "#f4a460", "seagreen": "#2e8b57", "seashell": "#fff5ee", "sienna": "#a0522d", "silver": "#c0c0c0", "skyblue": "#87ceeb", "slateblue": "#6a5acd", "slategray": "#708090", "snow": "#fffafa", "springgreen": "#00ff7f", "steelblue": "#4682b4",
                            "tan": "#d2b48c", "teal": "#008080", "thistle": "#d8bfd8", "tomato": "#ff6347", "turquoise": "#40e0d0",
                            "violet": "#ee82ee",
                            "wheat": "#f5deb3", "white": "#ffffff", "whitesmoke": "#f5f5f5",
                            "yellow": "#ffff00", "yellowgreen": "#9acd32", "sky": "#87cefa", "grey": "#808080", "neon": "#eb0450", "pumpkin": "#ff7518", "sun": "#FDB813", "primary": "#007bff", "dark": "#a9a9a9", "smoke": "#738276", "rose": "#ff007f"
                        };
                        let hexCode = [{ color: "indian red", code: { hex: "#B0171F" }, id: 1 }, { color: "crimson ", code: { hex: "#DC143C " }, id: 2 }, { color: "lightpink ", code: { hex: "#FFB6C1 " }, id: 4 }, { color: "lightpink 1 ", code: { hex: "#FFAEB9 " }, id: 4 }, { color: "lightpink 2 ", code: { hex: "#EEA2AD " }, id: 5 }, { color: "lightpink 3 ", code: { hex: "#CD8C95 " }, id: 6 }, { color: "lightpink 4 ", code: { hex: "#8B5F65 " }, id: 7 }, { color: "pink ", code: { hex: "#FFC0CB " }, id: 8 }, { color: "pink 1", code: { hex: "#FFB5C5 " }, id: 9 }, { color: "pink 2", code: { hex: "#EEA9B8 " }, id: 10 }, { color: "pink 3", code: { hex: "#CD919E " }, id: 11 }, { color: "pink 4", code: { hex: "#8B636C" }, id: 12 }, { color: "palevioletred ", code: { hex: "#DB7093" }, id: 13 }, { color: "palevioletred 1 ", code: { hex: "#FF82AB" }, id: 14 }, { color: "palevioletred 2 ", code: { hex: "#EE799F" }, id: 15 }, { color: "palevioletred 3 ", code: { hex: "#CD6889" }, id: 16 }, { color: "palevioletred 4 ", code: { hex: "#8B475D" }, id: 17 }, { color: "lavenderblush 1 (lavenderblush) ", code: { hex: "#FFF0F5" }, id: 18 }, { color: "lavenderblush 2 ", code: { hex: "#EEE0E5" }, id: 19 }, { color: "lavenderblush 3 ", code: { hex: "#CDC1C5" }, id: 20 }, { color: "lavenderblush 4 ", code: { hex: "#8B8386" }, id: 21 }, { color: "violetred 1 ", code: { hex: "#FF3E96" }, id: 22 }, { color: "violetred 2 ", code: { hex: "#EE3A8C" }, id: 23 }, { color: "violetred 3 ", code: { hex: "#CD3278" }, id: 24 }, { color: "violetred 4 ", code: { hex: "#8B2252" }, id: 25 }, { color: "hotpink ", code: { hex: "#FF69B4" }, id: 26 }, { color: "hotpink 1 ", code: { hex: "#FF6EB4" }, id: 27 }, { color: "hotpink 2 ", code: { hex: "#EE6AA7" }, id: 28 }, { color: "hotpink 3 ", code: { hex: "#CD6090" }, id: 29 }, { color: "hotpink 4 ", code: { hex: "#8B3A62" }, id: 30 }, { color: "raspberry ", code: { hex: "#872657" }, id: 31 }, { color: "deeppink 1 (deeppink) ", code: { hex: "#FF1493" }, id: 32 }, { color: "deeppink 2 ", code: { hex: "#EE1289" }, id: 33 }, { color: "deeppink 3 ", code: { hex: "#CD1076" }, id: 34 }, { color: "deeppink 4 ", code: { hex: "#8B0A50" }, id: 35 }, { color: "maroon 1 ", code: { hex: "#FF34B3" }, id: 36 }, { color: "maroon 2 ", code: { hex: "#EE30A7" }, id: 37 }, { color: "maroon 3 ", code: { hex: "#CD2990" }, id: 38 }, { color: "mediumvioletred", code: { hex: "#C71585" }, id: 39 }, { color: "violetred ", code: { hex: "#D02090" }, id: 40 }, { color: "orchid ", code: { hex: "#DA70D6" }, id: 41 }, { color: "orchid 1 ", code: { hex: "#FF83FA" }, id: 42 }, { color: "orchid 2 ", code: { hex: "#EE7AE9" }, id: 43 }, { color: "orchid 3 ", code: { hex: "#CD69C9" }, id: 44 }, { color: "orchid 4 ", code: { hex: "#8B4789" }, id: 45 }, { color: "thistle ", code: { hex: "#D8BFD8" }, id: 46 }, { color: "thistle 1 ", code: { hex: "#FFE1FF" }, id: 47 }, { color: "thistle 2 ", code: { hex: "#EED2EE" }, id: 48 }, { color: "thistle 3 ", code: { hex: "#CDB5CD" }, id: 49 }, { color: "thistle 4 ", code: { hex: "#8B7B8B" }, id: 50 }, { color: "plum 1 ", code: { hex: "#FFBBFF" }, id: 51 }, { color: "plum 2 ", code: { hex: "#EEAEEE" }, id: 52 }, { color: "plum 3 ", code: { hex: "#CD96CD" }, id: 53 }, { color: "plum 4 ", code: { hex: "#8B668B" }, id: 54 }, { color: "plum ", code: { hex: "#DDA0DD" }, id: 55 }, { color: "violet ", code: { hex: "#EE82EE" }, id: 56 }, { color: "magenta (fuchsia*) ", code: { hex: "#FF00FF" }, id: 57 }, { color: "magenta 2 ", code: { hex: "#EE00EE" }, id: 58 }, { color: "magenta 3 ", code: { hex: "#CD00CD" }, id: 59 }, { color: "magenta 4 (darkmagenta) ", code: { hex: "#8B008B" }, id: 60 }, { color: "purple* ", code: { hex: "#800080" }, id: 61 }, { color: "mediumorchid ", code: { hex: "#BA55D3" }, id: 62 }, { color: "mediumorchid 1 ", code: { hex: "#E066FF" }, id: 63 }, { color: "mediumorchid 2 ", code: { hex: "#D15FEE" }, id: 64 }, { color: "mediumorchid 3 ", code: { hex: "#B452CD" }, id: 65 }, { color: "mediumorchid 4 ", code: { hex: "#7A378B" }, id: 66 }, { color: "darkviolet ", code: { hex: "#9400D3" }, id: 67 }, { color: "darkorchid ", code: { hex: "#9932CC" }, id: 68 }, { color: "darkorchid 1 ", code: { hex: "#BF3EFF" }, id: 69 }, { color: "darkorchid 2 ", code: { hex: "#B23AEE" }, id: 70 }, { color: "darkorchid 3 ", code: { hex: "#9A32CD" }, id: 71 }, { color: "darkorchid 4 ", code: { hex: "#68228B" }, id: 72 }, { color: "indigo ", code: { hex: "#4B0082" }, id: 73 }, { color: "blueviolet ", code: { hex: "#8A2BE2" }, id: 74 }, { color: "purple 1 ", code: { hex: "#9B30FF" }, id: 75 }, { color: "purple 2 ", code: { hex: "#912CEE" }, id: 76 }, { color: "purple 3 ", code: { hex: "#7D26CD" }, id: 77 }, { color: "purple 4 ", code: { hex: "#551A8B" }, id: 78 }, { color: "mediumpurple ", code: { hex: "#9370DB" }, id: 79 }, { color: "mediumpurple 1 ", code: { hex: "#AB82FF" }, id: 80 }, { color: "mediumpurple 2 ", code: { hex: "#9F79EE" }, id: 81 }, { color: "mediumpurple 3 ", code: { hex: "#8968CD" }, id: 82 }, { color: "mediumpurple 4 ", code: { hex: "#5D478B" }, id: 83 }, { color: "darkslateblue ", code: { hex: "#483D8B" }, id: 84 }, { color: "lightslateblue ", code: { hex: "#8470FF" }, id: 85 }, { color: "mediumslateblue ", code: { hex: "#7B68EE" }, id: 86 }, { color: "slateblue ", code: { hex: "#6A5ACD" }, id: 87 }, { color: "slateblue 1 ", code: { hex: "#836FFF" }, id: 88 }, { color: "slateblue 2 ", code: { hex: "#7A67EE" }, id: 89 }, { color: "slateblue 3 ", code: { hex: "#6959CD" }, id: 90 }, { color: "slateblue 4 ", code: { hex: "#473C8B" }, id: 91 }, { color: "ghostwhite ", code: { hex: "#F8F8FF" }, id: 92 }, { color: "lavender ", code: { hex: "#E6E6FA" }, id: 93 }, { color: "blue* ", code: { hex: "#0000FF" }, id: 94 }, { color: "blue 2 ", code: { hex: "#0000EE" }, id: 95 }, { color: "blue 3 (mediumblue) ", code: { hex: "#0000CD" }, id: 96 }, { color: "blue 4 (darkblue) ", code: { hex: "#00008B" }, id: 97 }, { color: "navy* ", code: { hex: "#000080" }, id: 98 }, { color: "midnightblue ", code: { hex: "#191970" }, id: 99 }, { color: "cobalt ", code: { hex: "#3D59AB" }, id: 100 }, { color: "royalblue ", code: { hex: "#4169E1" }, id: 101 }, { color: "royalblue 1 ", code: { hex: "#4876FF" }, id: 102 }, { color: "royalblue 2 ", code: { hex: "#436EEE" }, id: 103 }, { color: "royalblue 3 ", code: { hex: "#3A5FCD" }, id: 104 }, { color: "royalblue 4 ", code: { hex: "#27408B" }, id: 105 }, { color: "cornflowerblue ", code: { hex: "#6495ED" }, id: 106 }, { color: "lightsteelblue ", code: { hex: "#B0C4DE" }, id: 107 }, { color: "lightsteelblue 1 ", code: { hex: "#CAE1FF" }, id: 108 }, { color: "lightsteelblue 2 ", code: { hex: "#BCD2EE" }, id: 109 }, { color: "lightsteelblue 3 ", code: { hex: "#A2B5CD" }, id: 110 }, { color: "lightsteelblue 4 ", code: { hex: "#6E7B8B" }, id: 111 }, { color: "lightslategray ", code: { hex: "#778899" }, id: 112 }, { color: "slategray ", code: { hex: "#708090" }, id: 113 }, { color: "slategray 1 ", code: { hex: "#C6E2FF" }, id: 114 }, { color: "slategray 2 ", code: { hex: "#B9D3EE" }, id: 115 }, { color: "slategray 3 ", code: { hex: "#9FB6CD" }, id: 116 }, { color: "slategray 4 ", code: { hex: "#6C7B8B" }, id: 117 }, { color: "dodgerblue 1 (dodgerblue)", code: { hex: "#1E90FF" }, id: 118 }, { color: "dodgerblue 2", code: { hex: "#1C86EE" }, id: 119 }, { color: "dodgerblue 3", code: { hex: "#1874CD" }, id: 120 }, { color: "dodgerblue 4", code: { hex: "#104E8B" }, id: 121 }, { color: "aliceblue", code: { hex: "#F0F8FF" }, id: 122 }, { color: "steelblue", code: { hex: "#4682B4" }, id: 123 }, { color: "steelblue 1", code: { hex: "#63B8FF" }, id: 124 }, { color: "steelblue 2", code: { hex: "#5CACEE" }, id: 125 }, { color: "steelblue 3", code: { hex: "#4F94CD" }, id: 126 }, { color: "steelblue 4", code: { hex: "#36648B" }, id: 127 }, { color: "lightskyblue", code: { hex: "#87CEFA" }, id: 128 }, { color: "lightskyblue 1", code: { hex: "#B0E2FF" }, id: 129 }, { color: "lightskyblue 2", code: { hex: "#A4D3EE" }, id: 130 }, { color: "lightskyblue 3", code: { hex: "#8DB6CD" }, id: 131 }, { color: "lightskyblue 4", code: { hex: "#607B8B" }, id: 132 }, { color: "skyblue 1", code: { hex: "#87CEFF" }, id: 133 }, { color: "skyblue 2", code: { hex: "#7EC0EE" }, id: 134 }, { color: "skyblue 3", code: { hex: "#6CA6CD" }, id: 135 }, { color: "skyblue 4", code: { hex: "#4A708B" }, id: 136 }, { color: "skyblue", code: { hex: "#87CEEB" }, id: 137 }, { color: "deepskyblue 1 (deepskyblue)", code: { hex: "#00BFFF" }, id: 138 }, { color: "deepskyblue 2", code: { hex: "#00B2EE" }, id: 139 }, { color: "deepskyblue 3", code: { hex: "#009ACD" }, id: 140 }, { color: "deepskyblue 4", code: { hex: "#00688B" }, id: 141 }, { color: "peacock", code: { hex: "#33A1C9" }, id: 142 }, { color: "lightblue", code: { hex: "#ADD8E6" }, id: 143 }, { color: "lightblue 1", code: { hex: "#BFEFFF" }, id: 144 }, { color: "lightblue 2", code: { hex: "#B2DFEE" }, id: 145 }, { color: "lightblue 3", code: { hex: "#9AC0CD" }, id: 146 }, { color: "lightblue 4", code: { hex: "#68838B" }, id: 147 }, { color: "powderblue", code: { hex: "#B0E0E6" }, id: 148 }, { color: "cadetblue 1", code: { hex: "#98F5FF" }, id: 149 }, { color: "cadetblue 2", code: { hex: "#8EE5EE" }, id: 150 }, { color: "cadetblue 3", code: { hex: "#7AC5CD" }, id: 151 }, { color: "cadetblue 4", code: { hex: "#53868B" }, id: 152 }, { color: "turquoise 1", code: { hex: "#00F5FF" }, id: 153 }, { color: "turquoise 2", code: { hex: "#00E5EE" }, id: 154 }, { color: "turquoise 3", code: { hex: "#00C5CD" }, id: 155 }, { color: "turquoise 4", code: { hex: "#00868B" }, id: 156 }, { color: "cadetblue", code: { hex: "#5F9EA0" }, id: 157 }, { color: "darkturquoise", code: { hex: "#00CED1" }, id: 158 }, { color: "azure 1 (azure)", code: { hex: "#F0FFFF" }, id: 159 }, { color: "azure 2", code: { hex: "#E0EEEE" }, id: 160 }, { color: "azure 3", code: { hex: "#C1CDCD" }, id: 161 }, { color: "azure 4", code: { hex: "#838B8B" }, id: 162 }, { color: "lightcyan 1 (lightcyan)", code: { hex: "#E0FFFF" }, id: 163 }, { color: "lightcyan 2", code: { hex: "#D1EEEE" }, id: 164 }, { color: "lightcyan 3", code: { hex: "#B4CDCD" }, id: 165 }, { color: "lightcyan 4", code: { hex: "#7A8B8B" }, id: 166 }, { color: "paleturquoise 1", code: { hex: "#BBFFFF" }, id: 167 }, { color: "paleturquoise 2 (paleturquoise)", code: { hex: "#AEEEEE" }, id: 168 }, { color: "paleturquoise 3", code: { hex: "#96CDCD" }, id: 169 }, { color: "paleturquoise 4", code: { hex: "#668B8B" }, id: 170 }, { color: "darkslategray", code: { hex: "#2F4F4F" }, id: 171 }, { color: "darkslategray 1", code: { hex: "#97FFFF" }, id: 172 }, { color: "darkslategray 2", code: { hex: "#8DEEEE" }, id: 173 }, { color: "darkslategray 3", code: { hex: "#79CDCD" }, id: 174 }, { color: "darkslategray 4", code: { hex: "#528B8B" }, id: 175 }, { color: "cyan / aqua*", code: { hex: "#00FFFF" }, id: 176 }, { color: "cyan 2", code: { hex: "#00EEEE" }, id: 177 }, { color: "cyan 3", code: { hex: "#00CDCD" }, id: 178 }, { color: "cyan 4 (darkcyan)", code: { hex: "#008B8B" }, id: 179 }, { color: "teal*", code: { hex: "#008080" }, id: 180 }, { color: "mediumturquoise", code: { hex: "#48D1CC" }, id: 181 }, { color: "lightseagreen", code: { hex: "#20B2AA" }, id: 182 }, { color: "manganeseblue", code: { hex: "#03A89E" }, id: 183 }, { color: "turquoise", code: { hex: "#40E0D0" }, id: 184 }, { color: "coldgrey", code: { hex: "#808A87" }, id: 185 }, { color: "turquoiseblue", code: { hex: "#00C78C" }, id: 186 }, { color: "aquamarine 1 (aquamarine)", code: { hex: "#7FFFD4" }, id: 187 }, { color: "aquamarine 2", code: { hex: "#76EEC6" }, id: 188 }, { color: "aquamarine 3 (mediumaquamarine)", code: { hex: "#66CDAA" }, id: 189 }, { color: "aquamarine 4", code: { hex: "#458B74" }, id: 190 }, { color: "mediumspringgreen", code: { hex: "#00FA9A" }, id: 191 }, { color: "mintcream", code: { hex: "#F5FFFA" }, id: 192 }, { color: "springgreen", code: { hex: "#00FF7F" }, id: 193 }, { color: "springgreen 1", code: { hex: "#00EE76" }, id: 194 }, { color: "springgreen 2", code: { hex: "#00CD66" }, id: 195 }, { color: "springgreen 3", code: { hex: "#008B45" }, id: 196 }, { color: "mediumseagreen", code: { hex: "#3CB371" }, id: 197 }, { color: "seagreen 1", code: { hex: "#54FF9F" }, id: 198 }, { color: "seagreen 2", code: { hex: "#4EEE94" }, id: 199 }, { color: "seagreen 3", code: { hex: "#43CD80" }, id: 200 }, { color: "seagreen 4 (seagreen)", code: { hex: "#2E8B57" }, id: 201 }, { color: "emeraldgreen", code: { hex: "#00C957" }, id: 202 }, { color: "mint", code: { hex: "#BDFCC9" }, id: 203 }, { color: "cobaltgreen", code: { hex: "#3D9140" }, id: 204 }, { color: "honeydew 1 (honeydew)", code: { hex: "#F0FFF0" }, id: 205 }, { color: "honeydew 2", code: { hex: "#E0EEE0" }, id: 206 }, { color: "honeydew 3", code: { hex: "#C1CDC1" }, id: 207 }, { color: "honeydew 4", code: { hex: "#838B83" }, id: 208 }, { color: "darkseagreen", code: { hex: "#8FBC8F" }, id: 209 }, { color: "darkseagreen 1", code: { hex: "#C1FFC1" }, id: 210 }, { color: "darkseagreen 2", code: { hex: "#B4EEB4" }, id: 211 }, { color: "darkseagreen 3", code: { hex: "#9BCD9B" }, id: 212 }, { color: "darkseagreen 4", code: { hex: "#698B69" }, id: 213 }, { color: "palegreen", code: { hex: "#98FB98" }, id: 214 }, { color: "palegreen 1", code: { hex: "#9AFF9A" }, id: 215 }, { color: "palegreen 2 (lightgreen)", code: { hex: "#90EE90" }, id: 216 }, { color: "palegreen 3", code: { hex: "#7CCD7C" }, id: 217 }, { color: "palegreen 4", code: { hex: "#548B54" }, id: 218 }, { color: "limegreen", code: { hex: "#32CD32" }, id: 219 }, { color: "forestgreen", code: { hex: "#228B22" }, id: 220 }, { color: "green 1 (lime*)", code: { hex: "#00FF00" }, id: 221 }, { color: "green 2", code: { hex: "#00EE00" }, id: 222 }, { color: "green 3", code: { hex: "#00CD00" }, id: 223 }, { color: "green 4", code: { hex: "#008B00" }, id: 224 }, { color: "green*", code: { hex: "#008000" }, id: 225 }, { color: "darkgreen", code: { hex: "#006400" }, id: 226 }, { color: "sapgreen", code: { hex: "#308014" }, id: 227 }, { color: "lawngreen", code: { hex: "#7CFC00" }, id: 228 }, { color: "chartreuse 1 (chartreuse)", code: { hex: "#7FFF00" }, id: 229 }, { color: "chartreuse 2", code: { hex: "#76EE00" }, id: 230 }, { color: "chartreuse 3", code: { hex: "#66CD00" }, id: 231 }, { color: "chartreuse 4", code: { hex: "#458B00" }, id: 232 }, { color: "greenyellow", code: { hex: "#ADFF2F" }, id: 233 }, { color: "darkolivegreen 1", code: { hex: "#CAFF70" }, id: 234 }, { color: "darkolivegreen 2", code: { hex: "#BCEE68" }, id: 235 }, { color: "darkolivegreen 3", code: { hex: "#A2CD5A" }, id: 236 }, { color: "darkolivegreen 4", code: { hex: "#6E8B3D" }, id: 237 }, { color: "darkolivegreen", code: { hex: "#556B2F" }, id: 238 }, { color: "olivedrab", code: { hex: "#6B8E23" }, id: 239 }, { color: "olivedrab 1", code: { hex: "#C0FF3E" }, id: 240 }, { color: "olivedrab 2", code: { hex: "#B3EE3A" }, id: 241 }, { color: "olivedrab 3 (yellowgreen)", code: { hex: "#9ACD32" }, id: 242 }, { color: "olivedrab 4", code: { hex: "#698B22" }, id: 243 }, { color: "ivory 1 (ivory)", code: { hex: "#FFFFF0" }, id: 244 }, { color: "ivory 2", code: { hex: "#EEEEE0" }, id: 245 }, { color: "ivory 3", code: { hex: "#CDCDC1" }, id: 246 }, { color: "ivory 4", code: { hex: "#8B8B83" }, id: 247 }, { color: "beige", code: { hex: "#F5F5DC" }, id: 248 }, { color: "lightyellow 1 (lightyellow)", code: { hex: "#FFFFE0" }, id: 249 }, { color: "lightyellow 2", code: { hex: "#EEEED1" }, id: 250 }, { color: "lightyellow 3", code: { hex: "#CDCDB4" }, id: 251 }, { color: "lightyellow 4", code: { hex: "#8B8B7A" }, id: 252 }, { color: "lightgoldenrodyellow", code: { hex: "#FAFAD2" }, id: 253 }, { color: "yellow 1 (yellow*)", code: { hex: "#FFFF00" }, id: 254 }, { color: "yellow 2", code: { hex: "#EEEE00" }, id: 255 }, { color: "yellow 3", code: { hex: "#CDCD00" }, id: 256 }, { color: "yellow 4", code: { hex: "#8B8B00" }, id: 257 }, { color: "warmgrey", code: { hex: "#808069" }, id: 258 }, { color: "olive*", code: { hex: "#808000" }, id: 259 }, { color: "darkkhaki", code: { hex: "#BDB76B" }, id: 260 }, { color: "khaki 1", code: { hex: "#FFF68F" }, id: 261 }, { color: "khaki 2", code: { hex: "#EEE685" }, id: 262 }, { color: "khaki 3", code: { hex: "#CDC673" }, id: 263 }, { color: "khaki 4", code: { hex: "#8B864E" }, id: 264 }, { color: "khaki", code: { hex: "#F0E68C" }, id: 265 }, { color: "palegoldenrod", code: { hex: "#EEE8AA" }, id: 266 }, { color: "lemonchiffon 1 (lemonchiffon)", code: { hex: "#FFFACD" }, id: 267 }, { color: "lemonchiffon 2", code: { hex: "#EEE9BF" }, id: 268 }, { color: "lemonchiffon 3", code: { hex: "#CDC9A5" }, id: 269 }, { color: "lemonchiffon 4", code: { hex: "#8B8970" }, id: 270 }, { color: "lightgoldenrod 1", code: { hex: "#FFEC8B" }, id: 271 }, { color: "lightgoldenrod 2", code: { hex: "#EEDC82" }, id: 272 }, { color: "lightgoldenrod 3", code: { hex: "#CDBE70" }, id: 273 }, { color: "lightgoldenrod 4", code: { hex: "#8B814C" }, id: 274 }, { color: "banana", code: { hex: "#E3CF57" }, id: 275 }, { color: "gold 1 (gold)", code: { hex: "#FFD700" }, id: 276 }, { color: "gold 2", code: { hex: "#EEC900" }, id: 277 }, { color: "gold 3", code: { hex: "#CDAD00" }, id: 278 }, { color: "gold 4", code: { hex: "#8B7500" }, id: 279 }, { color: "cornsilk 1 (cornsilk)", code: { hex: "#FFF8DC" }, id: 280 }, { color: "cornsilk 2", code: { hex: "#EEE8CD" }, id: 281 }, { color: "cornsilk 3", code: { hex: "#CDC8B1" }, id: 282 }, { color: "cornsilk 4", code: { hex: "#8B8878" }, id: 283 }, { color: "goldenrod", code: { hex: "#DAA520" }, id: 284 }, { color: "goldenrod 1", code: { hex: "#FFC125" }, id: 285 }, { color: "goldenrod 2", code: { hex: "#EEB422" }, id: 286 }, { color: "goldenrod 3", code: { hex: "#CD9B1D" }, id: 287 }, { color: "goldenrod 4", code: { hex: "#8B6914" }, id: 288 }, { color: "darkgoldenrod", code: { hex: "#B8860B" }, id: 289 }, { color: "darkgoldenrod 1", code: { hex: "#FFB90F" }, id: 290 }, { color: "darkgoldenrod 2", code: { hex: "#EEAD0E" }, id: 291 }, { color: "darkgoldenrod 3", code: { hex: "#CD950C" }, id: 292 }, { color: "darkgoldenrod 4", code: { hex: "#8B6508" }, id: 293 }, { color: "orange 1 (orange)", code: { hex: "#FFA500" }, id: 294 }, { color: "orange 2", code: { hex: "#EE9A00" }, id: 295 }, { color: "orange 3", code: { hex: "#CD8500" }, id: 296 }, { color: "orange 4", code: { hex: "#8B5A00" }, id: 297 }, { color: "floralwhite", code: { hex: "#FFFAF0" }, id: 298 }, { color: "oldlace", code: { hex: "#FDF5E6" }, id: 299 }, { color: "wheat", code: { hex: "#F5DEB3" }, id: 300 }, { color: "wheat 1", code: { hex: "#FFE7BA" }, id: 301 }, { color: "wheat 2", code: { hex: "#EED8AE" }, id: 302 }, { color: "wheat 3", code: { hex: "#CDBA96" }, id: 303 }, { color: "wheat 4", code: { hex: "#8B7E66" }, id: 304 }, { color: "moccasin", code: { hex: "#FFE4B5" }, id: 305 }, { color: "papayawhip", code: { hex: "#FFEFD5" }, id: 306 }, { color: "blanchedalmond", code: { hex: "#FFEBCD" }, id: 307 }, { color: "navajowhite 1 (navajowhite)", code: { hex: "#FFDEAD" }, id: 308 }, { color: "navajowhite 2", code: { hex: "#EECFA1" }, id: 309 }, { color: "navajowhite 3", code: { hex: "#CDB38B" }, id: 310 }, { color: "navajowhite 4", code: { hex: "#8B795E" }, id: 311 }, { color: "eggshell", code: { hex: "#FCE6C9" }, id: 312 }, { color: "tan", code: { hex: "#D2B48C" }, id: 313 }, { color: "brick", code: { hex: "#9C661F" }, id: 314 }, { color: "cadmiumyellow", code: { hex: "#FF9912" }, id: 315 }, { color: "antiquewhite", code: { hex: "#FAEBD7" }, id: 316 }, { color: "antiquewhite 1", code: { hex: "#FFEFDB" }, id: 317 }, { color: "antiquewhite 2", code: { hex: "#EEDFCC" }, id: 318 }, { color: "antiquewhite 3", code: { hex: "#CDC0B0" }, id: 319 }, { color: "antiquewhite 4", code: { hex: "#8B8378" }, id: 320 }, { color: "burlywood", code: { hex: "#DEB887" }, id: 321 }, { color: "burlywood 1", code: { hex: "#FFD39B" }, id: 322 }, { color: "burlywood 2", code: { hex: "#EEC591" }, id: 323 }, { color: "burlywood 3", code: { hex: "#CDAA7D" }, id: 324 }, { color: "burlywood 4", code: { hex: "#8B7355" }, id: 325 }, { color: "bisque 1 (bisque)", code: { hex: "#FFE4C4" }, id: 326 }, { color: "bisque 2", code: { hex: "#EED5B7" }, id: 327 }, { color: "bisque 3", code: { hex: "#CDB79E" }, id: 328 }, { color: "bisque 4", code: { hex: "#8B7D6B" }, id: 329 }, { color: "melon", code: { hex: "#E3A869" }, id: 330 }, { color: "carrot", code: { hex: "#ED9121" }, id: 331 }, { color: "darkorange", code: { hex: "#FF8C00" }, id: 332 }, { color: "darkorange 1", code: { hex: "#FF7F00" }, id: 333 }, { color: "darkorange 2", code: { hex: "#EE7600" }, id: 334 }, { color: "darkorange 3", code: { hex: "#CD6600" }, id: 335 }, { color: "darkorange 4", code: { hex: "#8B4500" }, id: 336 }, { color: "orange", code: { hex: "#FF8000" }, id: 337 }, { color: "tan 1", code: { hex: "#FFA54F" }, id: 338 }, { color: "tan 2", code: { hex: "#EE9A49" }, id: 339 }, { color: "tan 3 (peru)", code: { hex: "#CD853F" }, id: 340 }, { color: "tan 4", code: { hex: "#8B5A2B" }, id: 341 }, { color: "linen", code: { hex: "#FAF0E6" }, id: 342 }, { color: "peachpuff 1 (peachpuff)", code: { hex: "#FFDAB9" }, id: 343 }, { color: "peachpuff 2", code: { hex: "#EECBAD" }, id: 344 }, { color: "peachpuff 3", code: { hex: "#CDAF95" }, id: 345 }, { color: "peachpuff 4", code: { hex: "#8B7765" }, id: 346 }, { color: "seashell 1 (seashell)", code: { hex: "#FFF5EE" }, id: 347 }, { color: "seashell 2", code: { hex: "#EEE5DE" }, id: 348 }, { color: "seashell 3", code: { hex: "#CDC5BF" }, id: 349 }, { color: "seashell 4", code: { hex: "#8B8682" }, id: 350 }, { color: "sandybrown", code: { hex: "#F4A460" }, id: 351 }, { color: "rawsienna", code: { hex: "#C76114" }, id: 352 }, { color: "chocolate", code: { hex: "#D2691E" }, id: 353 }, { color: "chocolate 1", code: { hex: "#FF7F24" }, id: 354 }, { color: "chocolate 2", code: { hex: "#EE7621" }, id: 355 }, { color: "chocolate 3", code: { hex: "#CD661D" }, id: 356 }, { color: "chocolate 4 (saddlebrown)", code: { hex: "#8B4513" }, id: 357 }, { color: "ivoryblack", code: { hex: "#292421" }, id: 358 }, { color: "flesh", code: { hex: "#FF7D40" }, id: 359 }, { color: "cadmiumorange", code: { hex: "#FF6103" }, id: 360 }, { color: "burntsienna", code: { hex: "#8A360F" }, id: 361 }, { color: "sienna", code: { hex: "#A0522D" }, id: 362 }, { color: "sienna 1", code: { hex: "#FF8247" }, id: 363 }, { color: "sienna 2", code: { hex: "#EE7942" }, id: 364 }, { color: "sienna 3", code: { hex: "#CD6839" }, id: 365 }, { color: "sienna 4", code: { hex: "#8B4726" }, id: 366 }, { color: "lightsalmon 1 (lightsalmon)", code: { hex: "#FFA07A" }, id: 367 }, { color: "lightsalmon 2", code: { hex: "#EE9572" }, id: 368 }, { color: "lightsalmon 3", code: { hex: "#CD8162" }, id: 369 }, { color: "lightsalmon 4", code: { hex: "#8B5742" }, id: 370 }, { color: "coral", code: { hex: "#FF7F50" }, id: 371 }, { color: "orangered 1 (orangered)", code: { hex: "#FF4500" }, id: 372 }, { color: "orangered 2", code: { hex: "#EE4000" }, id: 373 }, { color: "orangered 3", code: { hex: "#CD3700" }, id: 374 }, { color: "orangered 4", code: { hex: "#8B2500" }, id: 375 }, { color: "sepia", code: { hex: "#5E2612" }, id: 376 }, { color: "darksalmon", code: { hex: "#E9967A" }, id: 377 }, { color: "salmon 1", code: { hex: "#FF8C69" }, id: 378 }, { color: "salmon 2", code: { hex: "#EE8262" }, id: 379 }, { color: "salmon 3", code: { hex: "#CD7054" }, id: 380 }, { color: "salmon 4", code: { hex: "#8B4C39" }, id: 381 }, { color: "coral 1", code: { hex: "#FF7256" }, id: 382 }, { color: "coral 2", code: { hex: "#EE6A50" }, id: 383 }, { color: "coral 3", code: { hex: "#CD5B45" }, id: 384 }, { color: "coral 4", code: { hex: "#8B3E2F" }, id: 385 }, { color: "burntumber", code: { hex: "#8A3324" }, id: 386 }, { color: "tomato 1 (tomato)", code: { hex: "#FF6347" }, id: 387 }, { color: "tomato 2", code: { hex: "#EE5C42" }, id: 388 }, { color: "tomato 3", code: { hex: "#CD4F39" }, id: 389 }, { color: "tomato 4", code: { hex: "#8B3626" }, id: 390 }, { color: "salmon", code: { hex: "#FA8072" }, id: 391 }, { color: "mistyrose 1 (mistyrose)", code: { hex: "#FFE4E1" }, id: 392 }, { color: "mistyrose 2", code: { hex: "#EED5D2" }, id: 393 }, { color: "mistyrose 3", code: { hex: "#CDB7B5" }, id: 394 }, { color: "mistyrose 4", code: { hex: "#8B7D7B" }, id: 395 }, { color: "snow 1 (snow)", code: { hex: "#FFFAFA" }, id: 396 }, { color: "snow 2", code: { hex: "#EEE9E9" }, id: 397 }, { color: "snow 3", code: { hex: "#CDC9C9" }, id: 398 }, { color: "snow 4", code: { hex: "#8B8989" }, id: 399 }, { color: "rosybrown", code: { hex: "#BC8F8F" }, id: 400 }, { color: "rosybrown 1", code: { hex: "#FFC1C1" }, id: 401 }, { color: "rosybrown 2", code: { hex: "#EEB4B4" }, id: 402 }, { color: "rosybrown 3", code: { hex: "#CD9B9B" }, id: 403 }, { color: "rosybrown 4", code: { hex: "#8B6969" }, id: 404 }, { color: "lightcoral", code: { hex: "#F08080" }, id: 405 }, { color: "indianred", code: { hex: "#CD5C5C" }, id: 406 }, { color: "indianred 1", code: { hex: "#FF6A6A" }, id: 407 }, { color: "indianred 2", code: { hex: "#EE6363" }, id: 408 }, { color: "indianred 4", code: { hex: "#8B3A3A" }, id: 409 }, { color: "indianred 3", code: { hex: "#CD5555" }, id: 410 }, { color: "brown", code: { hex: "#A52A2A" }, id: 411 }, { color: "brown 1", code: { hex: "#FF4040" }, id: 412 }, { color: "brown 2", code: { hex: "#EE3B3B" }, id: 413 }, { color: "brown 3", code: { hex: "#CD3333" }, id: 414 }, { color: "brown 4", code: { hex: "#8B2323" }, id: 415 }, { color: "firebrick", code: { hex: "#B22222" }, id: 416 }, { color: "firebrick 1", code: { hex: "#FF3030" }, id: 417 }, { color: "firebrick 2", code: { hex: "#EE2C2C" }, id: 418 }, { color: "firebrick 3", code: { hex: "#CD2626" }, id: 419 }, { color: "firebrick 4", code: { hex: "#8B1A1A" }, id: 420 }, { color: "red 1 (red*)", code: { hex: "#FF0000" }, id: 421 }, { color: "red 2", code: { hex: "#EE0000" }, id: 422 }, { color: "red 3", code: { hex: "#CD0000" }, id: 423 }, { color: "red 4 (darkred)", code: { hex: "#8B0000" }, id: 424 }, { color: "maroon*", code: { hex: "#800000" }, id: 425 }, { color: "sgi beet", code: { hex: "#8E388E" }, id: 426 }, { color: "sgi slateblue", code: { hex: "#7171C6" }, id: 427 }, { color: "sgi lightblue", code: { hex: "#7D9EC0" }, id: 428 }, { color: "sgi teal", code: { hex: "#388E8E" }, id: 429 }, { color: "sgi chartreuse", code: { hex: "#71C671" }, id: 430 }, { color: "sgi olivedrab", code: { hex: "#8E8E38" }, id: 431 }, { color: "sgi brightgray", code: { hex: "#C5C1AA" }, id: 432 }, { color: "sgi salmon", code: { hex: "#C67171" }, id: 433 }, { color: "sgi darkgray", code: { hex: "#555555" }, id: 434 }, { color: "sgi gray 12", code: { hex: "#1E1E1E" }, id: 435 }, { color: "sgi gray 16", code: { hex: "#282828" }, id: 436 }, { color: "sgi gray 32", code: { hex: "#515151" }, id: 437 }, { color: "sgi gray 36", code: { hex: "#5B5B5B" }, id: 438 }, { color: "sgi gray 52", code: { hex: "#848484" }, id: 439 }, { color: "sgi gray 56", code: { hex: "#8E8E8E" }, id: 440 }, { color: "sgi lightgray", code: { hex: "#AAAAAA" }, id: 441 }, { color: "sgi gray 72", code: { hex: "#B7B7B7" }, id: 442 }, { color: "sgi gray 76", code: { hex: "#C1C1C1" }, id: 443 }, { color: "sgi gray 92", code: { hex: "#EAEAEA" }, id: 444 }, { color: "sgi gray 96", code: { hex: "#F4F4F4" }, id: 445 }, { color: "white*", code: { hex: "#FFFFFF" }, id: 446 }, { color: "white smoke (gray 96)", code: { hex: "#F5F5F5" }, id: 447 }, { color: "gainsboro", code: { hex: "#DCDCDC" }, id: 448 }, { color: "lightgrey", code: { hex: "#D3D3D3" }, id: 449 }, { color: "silver*", code: { hex: "#C0C0C0" }, id: 450 }, { color: "darkgray", code: { hex: "#A9A9A9" }, id: 451 }, { color: "gray*", code: { hex: "#808080" }, id: 452 }, { color: "dimgray (gray 42)", code: { hex: "#696969" }, id: 453 }, { color: "black*", code: { hex: "#000000" }, id: 454 }, { color: "gray 99", code: { hex: "#FCFCFC" }, id: 455 }, { color: "gray 98", code: { hex: "#FAFAFA" }, id: 456 }, { color: "gray 97", code: { hex: "#F7F7F7" }, id: 457 }, { color: "white smoke (gray 96)", code: { hex: "#F5F5F5" }, id: 458 }, { color: "gray 95", code: { hex: "#F2F2F2" }, id: 459 }, { color: "gray 94", code: { hex: "#F0F0F0" }, id: 460 }, { color: "gray 93", code: { hex: "#EDEDED" }, id: 461 }, { color: "gray 92", code: { hex: "#EBEBEB" }, id: 462 }, { color: "gray 91", code: { hex: "#E8E8E8" }, id: 463 }, { color: "gray 90", code: { hex: "#E5E5E5" }, id: 464 }, { color: "gray 89", code: { hex: "#E3E3E3" }, id: 465 }, { color: "gray 88", code: { hex: "#E0E0E0" }, id: 466 }, { color: "gray 87", code: { hex: "#DEDEDE" }, id: 467 }, { color: "gray 86", code: { hex: "#DBDBDB" }, id: 468 }, { color: "gray 85", code: { hex: "#D9D9D9" }, id: 469 }, { color: "gray 84", code: { hex: "#D6D6D6" }, id: 470 }, { color: "gray 83", code: { hex: "#D4D4D4" }, id: 471 }, { color: "gray 82", code: { hex: "#D1D1D1" }, id: 472 }, { color: "gray 81", code: { hex: "#CFCFCF" }, id: 473 }, { color: "gray 80", code: { hex: "#CCCCCC" }, id: 474 }, { color: "gray 79", code: { hex: "#C9C9C9" }, id: 475 }, { color: "gray 78", code: { hex: "#C7C7C7" }, id: 476 }, { color: "gray 77", code: { hex: "#C4C4C4" }, id: 477 }, { color: "gray 76", code: { hex: "#C2C2C2" }, id: 478 }, { color: "gray 75", code: { hex: "#BFBFBF" }, id: 479 }, { color: "gray 74", code: { hex: "#BDBDBD" }, id: 480 }, { color: "gray 73", code: { hex: "#BABABA" }, id: 481 }, { color: "gray 72", code: { hex: "#B8B8B8" }, id: 482 }, { color: "gray 71", code: { hex: "#B5B5B5" }, id: 483 }, { color: "gray 70", code: { hex: "#B3B3B3" }, id: 484 }, { color: "gray 69", code: { hex: "#B0B0B0" }, id: 485 }, { color: "gray 68", code: { hex: "#ADADAD" }, id: 486 }, { color: "gray 67", code: { hex: "#ABABAB" }, id: 487 }, { color: "gray 66", code: { hex: "#A8A8A8" }, id: 488 }, { color: "gray 65", code: { hex: "#A6A6A6" }, id: 489 }, { color: "gray 64", code: { hex: "#A3A3A3" }, id: 490 }, { color: "gray 63", code: { hex: "#A1A1A1" }, id: 491 }, { color: "gray 62", code: { hex: "#9E9E9E" }, id: 492 }, { color: "gray 61", code: { hex: "#9C9C9C" }, id: 493 }, { color: "gray 60", code: { hex: "#999999" }, id: 494 }, { color: "gray 59", code: { hex: "#969696" }, id: 495 }, { color: "gray 58", code: { hex: "#949494" }, id: 496 }, { color: "gray 57", code: { hex: "#919191" }, id: 497 }, { color: "gray 56", code: { hex: "#8F8F8F" }, id: 498 }, { color: "gray 55", code: { hex: "#8C8C8C" }, id: 499 }, { color: "gray 54", code: { hex: "#8A8A8A" }, id: 500 }, { color: "gray 53", code: { hex: "#878787" }, id: 501 }, { color: "gray 52", code: { hex: "#858585" }, id: 502 }, { color: "gray 51", code: { hex: "#828282" }, id: 503 }, { color: "gray 50", code: { hex: "#7F7F7F" }, id: 504 }, { color: "gray 49", code: { hex: "#7D7D7D" }, id: 505 }, { color: "gray 48", code: { hex: "#7A7A7A" }, id: 506 }, { color: "gray 47", code: { hex: "#787878" }, id: 507 }, { color: "gray 46", code: { hex: "#757575" }, id: 508 }, { color: "gray 45", code: { hex: "#737373" }, id: 509 }, { color: "gray 44", code: { hex: "#707070" }, id: 510 }, { color: "gray 43", code: { hex: "#6E6E6E" }, id: 511 }, { color: "gray 42", code: { hex: "#6B6B6B" }, id: 512 }, { color: "dimgray (gray 42)", code: { hex: "#696969" }, id: 513 }, { color: "gray 40", code: { hex: "#666666" }, id: 514 }, { color: "gray 39", code: { hex: "#636363" }, id: 515 }, { color: "gray 38", code: { hex: "#616161" }, id: 516 }, { color: "gray 37", code: { hex: "#5E5E5E" }, id: 517 }, { color: "gray 36", code: { hex: "#5C5C5C" }, id: 518 }, { color: "gray 35", code: { hex: "#595959" }, id: 519 }, { color: "gray 34", code: { hex: "#575757" }, id: 520 }, { color: "gray 33", code: { hex: "#545454" }, id: 521 }, { color: "gray 32", code: { hex: "#525252" }, id: 522 }, { color: "gray 31", code: { hex: "#4F4F4F" }, id: 523 }, { color: "gray 30", code: { hex: "#4D4D4D" }, id: 524 }, { color: "gray 29", code: { hex: "#4A4A4A" }, id: 525 }, { color: "gray 28", code: { hex: "#474747" }, id: 526 }, { color: "gray 27", code: { hex: "#454545" }, id: 527 }, { color: "gray 26", code: { hex: "#424242" }, id: 528 }, { color: "gray 25", code: { hex: "#404040" }, id: 529 }, { color: "gray 24", code: { hex: "#3D3D3D" }, id: 530 }, { color: "gray 23", code: { hex: "#3B3B3B" }, id: 531 }, { color: "gray 22", code: { hex: "#383838" }, id: 532 }, { color: "gray 21", code: { hex: "#363636" }, id: 533 }, { color: "gray 20", code: { hex: "#333333" }, id: 534 }, { color: "gray 19", code: { hex: "#303030" }, id: 535 }, { color: "gray 18", code: { hex: "#2E2E2E" }, id: 536 }, { color: "gray 17", code: { hex: "#2B2B2B" }, id: 537 }, { color: "gray 16", code: { hex: "#292929" }, id: 538 }, { color: "gray 15", code: { hex: "#262626" }, id: 539 }, { color: "gray 14", code: { hex: "#242424" }, id: 540 }, { color: "gray 13", code: { hex: "#212121" }, id: 541 }, { color: "gray 12", code: { hex: "#1F1F1F" }, id: 542 }, { color: "gray 11", code: { hex: "#1C1C1C" }, id: 543 }, { color: "gray 10", code: { hex: "#1A1A1A" }, id: 544 }, { color: "gray 9", code: { hex: "#171717" }, id: 545 }, { color: "gray 8", code: { hex: "#141414" }, id: 546 }, { color: "gray 7", code: { hex: "#121212" }, id: 547 }, { color: "gray 6", code: { hex: "#0F0F0F" }, id: 548 }, { color: "gray 5", code: { hex: "#0D0D0D" }, id: 549 }, { color: "gray 4", code: { hex: "#0A0A0A" }, id: 550 }, { color: "gray 3", code: { hex: "#080808" }, id: 551 }, { color: "gray 2", code: { hex: "#050505" }, id: 552 }, { color: "gray 1", code: { hex: "#030303" }, id: 553 }];
                        let clr = hexCode.find(x => x.color.toLowerCase().trim() == colour.toLowerCase().trim());
                        let clr2 = hexCode.find(x => x.color.toLowerCase().trim().indexOf(colour) > 0);
                        if (typeof colours[colour.toLowerCase()]) {
                            return colours[colour.toLowerCase()];
                        }
                        else if (clr) {
                            return clr.code.hex;
                        }
                        else if (clr2) {
                            return clr2.code.hex;
                        }
                        else {
                            return false;
                        }
                    }
                    select2TooltipDataBinding() {
                        var instance = this;
                        var data = instance.selectedDatalistColumns();
                        $("#tooltip_select").off('select2:select').off('select2:unselect').off('select2:selecting');
                        $("#tooltip_select").select2({
                            placeholder: 'Select ToolTip columns',
                            data: data,
                        }).on('select2:select', function (e) {
                            let data = e.params.data;
                            let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                            var sIndex = instance._reportBuilder.getIndexByAliasName_selectedColumnsArray(data.text);
                            if (sIndex == -1) {
                                var selCol = new SelectedColumns();
                                selCol.ColumnId = Number(data.id);
                                selCol.ColumnName = data.text;
                                selCol.DisplayText = data.text;
                                selCol.AliasName = data.text;
                                selCol.DataType = dataType;
                                selCol.Isvisible = true;
                                instance._reportBuilder._selectedColumns(selCol);
                            }
                            var tIndex = instance.getIndexByDisplayText_tooltipColumnsArray(data.text);
                            if (tIndex == -1) {
                                instance.toolTipArray.push({ ColumnId: Number(data.id), ColumnName: data.text, DisplayText: data.text, AliasName: data.text });
                            }
                            instance.ChartSelectedColumns = instance.coordinate_Elements(true, true, true, true, true, true);
                            instance.chartData();
                            var html = instance._reportBuilderTemplate.loadToolTipColumn(Number(data.id), data.text, dataType, data.text);
                            $("#tab_tooltip #tooltip_selected_columns").append(html);
                            instance._reportBuilder.setSelectOption("tooltip_select");
                        });
                    }
                    bindChartBaseColumnSelect2() {
                        var data = this.selectedDatalistColumns();
                        $("#base_column_select").off('select2:select').off('select2:unselect').off('select2:selecting');
                        $("#base_column_select").select2({
                            placeholder: 'Select Base Column',
                            data: data,
                        }).on('select2:select', (e) => {
                            let data = e.params.data;
                            let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                            var sIndex = this.getIndexByAliasName_ChartSelectedColumns(data.text);
                            if (sIndex == -1) {
                                var selCol = new SelectedColumns();
                                selCol.ColumnId = Number(data.id);
                                selCol.ColumnName = data.text;
                                selCol.DisplayText = data.text;
                                selCol.AliasName = data.text;
                                selCol.DataType = dataType;
                                selCol.Isvisible = true;
                                this._reportBuilder._selectedColumns(selCol);
                            }
                            var tIndex = this.getIndexByDisplayText_BaseColumnsArray(data.text);
                            if (tIndex == -1) {
                                this.chartBaseColumns.push({ ColumnId: Number(data.id), ColumnName: data.text, DisplayText: data.text, AliasName: data.text });
                            }
                            this.ChartSelectedColumns = this.coordinate_Elements(true, true, true, true, true, true);
                            this.chartData();
                            var html = this._reportBuilderTemplate.loadSelect2Column(Number(data.id), data.text, dataType);
                            $("#base_column #base_column_selected_columns").append(html);
                            this._reportBuilder.setSelectOption("base_column_select");
                        });
                    }
                    loadToolTipRightNav() {
                        var instance = this;
                        let html = `<div class="bg-white card"> <div class="card-header"><span>Tool Tip</span><button class="btn btn-icon btn-icon-circle btn-icon-style-3 ChartToolTipForm" id="Chart_ToolTip"><i class="fa fa-comment"></i></button></div><div class="card-body pl-2 pr-2 rightnav_body"> <ul id="ultooltips"> </ul> </div> </div>`;
                        $("#bl-nav-right-tooltip").html(html);
                        instance.loadSelectedColumnsInToolTip_RightNav();
                    }
                    loadSelectedColumnsInToolTip_RightNav() {
                        var instance = this;
                        let html = "";
                        for (var i = 0; i < instance._reportBuilder.datalistColumnsResponseData.length; i++) {
                            var datalistcolumn = instance._reportBuilder.datalistColumnsResponseData[i];
                            let checked = "";
                            let disabled = "disabled";
                            let Index = instance.getindexByTooltipArray(datalistcolumn.ColumnId);
                            let displayText = datalistcolumn.ColumnName;
                            if (Index != -1) {
                                displayText = instance.toolTipArray[Index].DisplayText;
                                checked = "checked";
                                disabled = "";
                            }
                            html += `<li class="list-group-item pl-2 pr-2" id="li_tooltip_` + datalistcolumn.ColumnId + `"><div class="btn-group pull-right" style="margin-top:-8px" id="divtooltip_` + datalistcolumn.ColumnId + `"><a class="btn pl-1 pr-1 ` + disabled + `" id="btnEditName" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().showTooltipEditMode(` + datalistcolumn.ColumnId + `)"><span><i class="fa fa-pencil"></i></span></a><span class="btn pl-1 pr-1"><input type="checkbox" class="chktooltips" ` + checked + ` onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().toolTipCheckBox(` + datalistcolumn.ColumnId + `,'` + datalistcolumn.ColumnName + `')" id="tooltip_checkbox"></span></div><div id="divcolumnname_` + datalistcolumn.ColumnId + `" class="col-sm-9 pl-1 pr-1 input-icons"><span id="tooltipcolumnname"> ` + displayText + ` </span> <input id="tooltipcolumnname_displaytext" class="hidden col-sm-12 form-control" value="` + displayText + `"> <span id="closebutton_tooltip" onclick="Unibase.Platform.Analytics.Charts.ChartBuilder.Instance().closeTooltipEditMode(` + datalistcolumn.ColumnId + `,'` + datalistcolumn.ColumnName + `')" class="fa fa-close font-15 mr-10 field-icon hidden"></span> </div></li>`;
                        }
                        $("#ultooltips").html(html);
                    }
                    removeSelectedToolTip(AliasName) {
                        var instance = this;
                        $("#tooltip_selected_columns #dsl_tool_column_" + AliasName).remove();
                        var tIndex = instance.getIndexByDisplayText_tooltipColumnsArray(AliasName);
                        var cIdx = instance.getIndexByAliasName_ChartSelectedColumns(AliasName);
                        if (tIndex > -1)
                            instance.toolTipArray.splice(tIndex, 1);
                        if (cIdx > -1)
                            instance.ChartSelectedColumns[cIdx].IsToolTip = false;
                    }
                    toolTipEdit(AliasName) {
                        var instance = this;
                        var tIndex = instance.getIndexByDisplayText_tooltipColumnsArray(AliasName);
                        var sIndex = instance._reportBuilder.getIndexByColumnName_selectedColumnsArray(AliasName);
                        var toolTipName = $("#dsl_tool_column_" + AliasName + " #txttooltipedit").val();
                        if (tIndex > -1 && sIndex > -1) {
                            instance.toolTipArray[tIndex].DisplayText = toolTipName;
                            instance._reportBuilder.selectedColumns[sIndex].DisplayText = toolTipName;
                            instance.isColumnRename = true;
                        }
                        instance.chartData();
                    }
                    loadCategoriesSelect2() {
                        var instance = this;
                        var data;
                        $("#categories_select").off('select2:select').off('select2:unselect').empty();
                        data = instance._reportBuilder.getSelectedColumns_Select2_Data();
                        $("#categories_select").select2({
                            placeholder: 'Select categories columns',
                            data: data,
                        }).on('select2:select', function (e) {
                            let data = e.params.data;
                            let dataType = Number($("#allDatalistColumns #li_" + e.params.data.id + " span.datalist_column").attr('data-column-datatype'));
                            let Index = instance._reportBuilder.getIndexByColumnName_selectedColumnsArray(data.text);
                            if (Index != -1) {
                                var sel_col = instance._reportBuilder.selectedColumns[Index];
                                if (sel_col)
                                    var catCol = sel_col.GroupByCategory;
                                if (!catCol) {
                                    if (Index != -1) {
                                        instance._reportBuilder.selectedColumns[Index].GroupByCategory = true;
                                    }
                                    else {
                                        var selCol = new SelectedColumns();
                                        selCol.ColumnId = parseInt(data.id);
                                        selCol.ColumnName = data.text;
                                        selCol.ColumnIndex = instance._reportBuilder.selectedColumns.length;
                                        selCol.DataType = dataType;
                                        selCol.Isvisible = true;
                                        selCol.GroupBy = false;
                                        selCol.AliasName = data.text;
                                        selCol.DisplayText = data.text;
                                        selCol.GroupByCategory = true;
                                        instance._reportBuilder._selectedColumns(selCol);
                                    }
                                    instance._reportBuilder.Categories = $('#categories_select').select2('data');
                                    var html = instance._reportBuilderTemplate.loadSelect2Column(Number(e.params.data.id), e.params.data.text, dataType);
                                    $("#categories_selected_columns").append(html);
                                    instance._reportBuilder.setSelectOption("categories_select");
                                    $(".dsl_column_filters").addClass('hidden');
                                    instance._reportBuilder.stringifyed_SortColumns = instance._reportBuilder.getSortColumnsStringify();
                                    instance._reportBuilder.load_data(instance._reportBuilder.table);
                                }
                                else {
                                    instance._reportBuilder.setSelectOption("categories_select");
                                    $("#categories_select").select2('close').val("");
                                    alert("Column - " + data.text + " already exists in categories select2. Please change display text and try again");
                                    return false;
                                }
                            }
                        });
                    }
                    sortTooltipColumnsEvent() {
                        var tooltipContainer = $("#tooltip_selected_columns");
                        if (!tooltipContainer)
                            return;
                        $("#tooltip_selected_columns").sortable({
                            connectWith: "#tooltip_selected_columns",
                            cursor: 'move',
                            update: (event, ui) => {
                                var tooltipColumnElements = $(event.target).children();
                                tooltipColumnElements.each((index, ele) => {
                                    let aliasName = ele.id.replace("dsl_tool_column_", "");
                                    let colIdx = this.toolTipArray.findIndex(x => x.AliasName == aliasName);
                                    if (colIdx > -1) {
                                        this.changeIndexOfElementsInArray(this.toolTipArray, colIdx, index);
                                    }
                                });
                            }
                        });
                    }
                    changeIndexOfElementsInArray(arr, fromIndex, toIndex) {
                        let element = arr[fromIndex];
                        arr.splice(fromIndex, 1);
                        arr.splice(toIndex, 0, element);
                    }
                    updateshowTooltipTitleProp(showTooltip) {
                        $("#showtooltipheader_checkbox").prop("checked", showTooltip);
                    }
                    updateIsDataLabelProp(isDataLabel) {
                        $("#isdatalabel").prop("checked", isDataLabel);
                    }
                    isNumberAbbreviation(axis) {
                        const instance = this;
                        if (axis) {
                            const axisProperty = axis === 'x' ? 'IsXaxis' : 'IsYaxis';
                            const isChecked = $(`#IsNumberAbbrevation_${axis}`).prop("checked");
                            for (const column of instance._chartBuilder.ChartSelectedColumns) {
                                if (column[axisProperty]) {
                                    column.IsNumAbb = isChecked;
                                }
                            }
                        }
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new ChartBuilder();
                        }
                        return this.instance;
                    }
                }
                Charts.ChartBuilder = ChartBuilder;
            })(Charts = Analytics.Charts || (Analytics.Charts = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));