EnVisageOnline/Main/Source/EnVisage/Views/Shared/amCharts/_cardDonut2_InitScripts.cshtml

<script>
    var donutData = null;
    var otherDonutData = null;
    var disableDonutReload = false;

    init.push(function () {
        initDonutMenu();

        $('#doubleDonutChartMode').select2({
            allowClear: false,
            minimumResultsForSearch: Infinity
        });

        $("#chartDonut1").donutChart({
            dataSourceUrl: "@Url.Action("GetClassPieDataForNewDashboard", "ForecastDashboard")",
            legendDivId: "legenddiv",
            getColorFromPaletteFunction: getColorFromPalette,
            colors: _bigColorPalette,
            costMode: $('#pieModeForecast').prop('checked'),
            mode: $('#doubleDonutChartMode').val(),
            related: $("#doubleDonutRelated").val() == "true",
            clearFilterButtonBackground: "@Url.Content("~/Content/images/amCharts/xRectIconH.png")",
            formatTotal: function (total) {
                return $('#pieModeForecast').prop('checked') ? '$' + total.formatNumber() : total.formatNumber(0) + ' weeks';
            },
            onTotalClick: function () {
                var donut = $("#chartDonut1").data("donutChart");
                donut.updateData();
                clearFilters();
            },
            onLegendItemClick: function (dataItem, index, groupType) {
                if (dataItem.TypeId.length != 1) {
                    return;
                }
                var donut = $("#chartDonut1").data("donutChart");
                if (groupType == "Goal") {
                    var index = donut.goalsFilterArray.indexOf(dataItem.TypeId[0]);
                    if (index > -1) {
                        donut.goalsFilterArray.splice(index, 1);
                        removeArrayFromFilter("s2id_StrategicGoals", dataItem.TypeId[0]);
                        applyForecastDashboardFilter();
                    }
                }
                if(groupType == "ProjectType") {
                    var index = donut.projectsFilterArray.indexOf(dataItem.TypeId[0]);
                    if (index > -1) {
                        donut.projectsFilterArray.splice(index, 1);
                        removeArrayFromFilter("s2id_ProjectTypes", dataItem.TypeId[0]);
                        applyForecastDashboardFilter();
                    }
                }
            },
            addFilter: addFilter,
            onLoadBegin: function() {
                $("#doubleDonutContainer").block({
                    overlayCSS: { backgroundColor: "#fff", opacity: 0.9 },
                    css: { border: "none", backgroundColor: "transparent" },
                    message: "<span><img class='valign-middle' src='@Url.Content("~/Content/images/loadFA.gif")' />&nbsp;&nbsp;loading...</span>"
                });
            },
            onLoadEnd: function () {
                var donut = $("#chartDonut1").data("donutChart");
                donut.projectsFilterArray = $("#s2id_ProjectTypes").select2('val'),
                donut.goalsFilterArray = $("#s2id_StrategicGoals").select2('val'),
                donut.changeFromFilterPanel();

                var allFilter = donut.projectsFilterArray.concat(donut.goalsFilterArray);
                $.each(allFilter, function (index, id) {
                    $("#legend-item-" + id).css("text-decoration", "underline");
                    $("#legend-item-" + id).css("cursor", "pointer");
                });

                $("#doubleDonutContainer").unblock();
            }
        });

        @if (Request.Browser.Browser == "IE" && Request.Browser.MajorVersion < 11)
        {
        <text>AmCharts.ready(function (a) { loadDonutData(); });</text>
        }
        else
        {
        <text>loadDonutData();</text>
        }
    });

    function addFilter(typeId, groupType) {
        if (typeId != undefined && typeId != '00000000-0000-0000-0000-000000000000') {
            var donut = $("#chartDonut1").data("donutChart");
            if (groupType == "ProjectType") {
                if (donut.projectsFilterArray.includes(typeId)) {
                    //removeArrayFromFilter('s2id_ProjectTypes', typeId);
                    //var index = this.projectsFilterArray.indexOf(typeId);
                    //if (index > -1) {
                    //    this.projectsFilterArray.splice(index, 1);
                    //}
                } else {
                    addArrayToFilter('s2id_ProjectTypes', typeId);
                    donut.projectsFilterArray.push(typeId);
                }
            }
            else if (groupType == "Goal") {
                if (donut.goalsFilterArray.includes(typeId)) {
                    //removeArrayFromFilter('s2id_StrategicGoals', typeId);
                    //var index = this.goalsFilterArray.indexOf(typeId);
                    //if (index > -1) {
                    //    this.goalsFilterArray.splice(index, 1);
                    //}
                } else {
                    addArrayToFilter('s2id_StrategicGoals', typeId);
                    donut.goalsFilterArray.push(typeId);
                }
            }
        }
        applyForecastDashboardFilter();
    }

    function addArrayToFilter(filterId, item) {
        var filterArray = $("#" + filterId).select2('val');
        filterArray.push(item);
        $('#' + filterId).select2('val', filterArray);
    };

    function removeArrayFromFilter(filterId, item) {
        var filterArray = $("#" + filterId).select2('val');
        var index = filterArray.indexOf(item);
        if (index > -1) {
            filterArray.splice(index, 1);
        }
        $('#' + filterId).select2('val', filterArray);
    };

    function clearFilters() {
        $("#s2id_StrategicGoals").select2('val', []);
        $("#s2id_ProjectTypes").select2('val', []);
        applyForecastDashboardFilter();
    };

    function loadDonutData(filterData) {
        var filter = filterData || getFilterDataObject();
        filter["IsLaborMode"] = $('#expendituresMode').prop('checked');

        var donut = $("#chartDonut1").data("donutChart");
        donut.options.mode = $('#doubleDonutChartMode').val();
        donut.options.costMode = $('#pieModeForecast').prop('checked');
        //donut.options.related = $("#doubleDonutRelated").val() == "true";
        donut.loadData(filter);
    }

    function setDonutMode(select) {
        var donut = $("#chartDonut1").data("donutChart");
        if (select.value == "goal" || select.value == "type") {
            $("#doubleDonutRelatedSwitcher").hide();
        } else {
            $("#doubleDonutRelatedSwitcher").show();
        }
        donut.setMode(select.value);
        $(select).parent().parent().dropdown("toggle");
        saveForecastDashboardPreferences();
    }

    function setDonutRelation(button) {
        var related = $("#doubleDonutRelated").val() == "true";
        $("#doubleDonutRelated").val(!related);
        toggleRelationState();
        var donut = $("#chartDonut1").data("donutChart");
        donut.setRelation(!related);
        saveForecastDashboardPreferences();
    }

    function toggleRelationState() {
        var icon = $("#doubleDonutRelatedSwitcher i");
        if ($("#doubleDonutRelated").val() == "true") {
            $("#doubleDonutRelatedSwitcher").attr("title", "Separate project goal and type");
            icon.removeClass("fa-chain");
            icon.addClass("fa-chain-broken");
        } else {
            $("#doubleDonutRelatedSwitcher").attr("title", "Relate project goal and type");
            icon.removeClass("fa-chain-broken");
            icon.addClass("fa-chain");
        }
    }

    function initDonutMenu() {
        $('#pieModeForecast').switcher({
            on_state_content: 'Cost',
            off_state_content: 'Time'
        });
        $('#expendituresMode').switcher({
            on_state_content: 'Labor',
            off_state_content: 'Non-labor'
        });
        $('#pieModeForecast').change(function () {
            var donut = $("#chartDonut1").data("donutChart");
            var costMode = $('#pieModeForecast').prop("checked");
            donut.setCostMode(costMode);
            if (!costMode) {
                $('#expendituresMode').val(true);
                $('#expendituresMode').switcher('disable');
            } else {
                $('#expendituresMode').switcher('enable');
            }
            saveForecastDashboardPreferences();
        });
        $('#expendituresMode').change(function () {
            $(this).parent().parent().dropdown("toggle");
            saveForecastDashboardPreferences();
            loadDonutData();
        });
        if (!$('#pieModeForecast').prop("checked")) {
            $('#expendituresMode').val(true);
            $('#expendituresMode').switcher('disable');
        }
        toggleRelationState();
    }
</script>