import * as d3 from "https://cdn.skypack.dev/[email protected]";
const { assetAllocation } = window.utilities.color;

/*
Donut is a chart example built using MDS Chart Elements based on the Asset Allocation breakdown chart from the SAL (Signature Asset Library) team for the Vanguard Global Wellington Fund Admiral Shares (VGWAX) fund.

The chart shows the allocation breakdown across asset classes for the Vanguard Global Wellington Fund Admiral Shares (VGWAX) fund. The fund is well diversified across asset classes with 37% allocated to U.S. Equity, 29% Fixed Income, 27% Non-U.S. Equity, and around 5% Cash.
*/

// Prepare chart source data
const rawData = [
    {
        id: "AssetAllocCash",
        label: "Cash",
        value: 4.74688,
    },
    {
        id: "AssetAllocNotClassified",
        label: "Not Classified",
        value: 1.53654,
    },
    {
        id: "AssetAllocNonUSEquity",
        label: "Non-U.S. Equity",
        value: 27.24799,
    },
    {
        id: "AssetAllocOther",
        label: "Other",
        value: 0.0,
    },
    {
        id: "AssetAllocUSEquity",
        label: "U.S. Equity",
        value: 37.11866,
    },
    {
        id: "AssetAllocBond",
        label: "Fixed Income",
        value: 29.34991,
    }
];

const chartColors = {
    AssetAllocCash: assetAllocation.cash,
    AssetAllocNotClassified: assetAllocation['not-classified'],
    AssetAllocNonUSEquity: assetAllocation.alternative,
    AssetAllocOther: assetAllocation.other,
    AssetAllocUSEquity: assetAllocation.equity,
    AssetAllocBond: assetAllocation['fixed-income'],
};

// Initialize and render chart
const app = new Vue({
    el: "#app",
    data() {
        return {
            plotHeight: 450,
            plotWidth: 450,
            legendRightWidth: 170,
            chartColors,
            mouseData: {},
            mousePosition: {},
            focusedData: null,
            flagVisible: false,
            showTopLegend: false,

            // Descriptive Labels
            chartAriaLabel:
                "Vanguard Global Wellington Fund Admiral Shares (VGWAX)",
            chartAriaDescription:
                "The allocation breakdown across asset classes for the Vanguard Global Wellington Fund Admiral Shares (VGWAX) fund. The fund is well diversified across asset classes with 37% allocated to U.S. Equity, 29% Fixed Income, 27% Non-U.S. Equity, and around 5% Cash."
        };
    },
    computed: {
        fullData() {
            // Show all values, including zero, in the legend
            return rawData.sort((a, b) => b.value - a.value);
        },
        chartData() {
            // Ignore zero values to avoid unwanted pie padAngle slices
            return this.fullData.filter((d) => d.value > 0);
        },
    },
    filters: {
        format(value) {
            return d3.format(",.2%")(value / 100);
        }
    },
    methods: {
        setSize() {
            const donutMinHeight = 150;
            const donutMaxHeight = 400;
            const donutMinWidth = 200;
            const donutMaxWidth = 400;
            const elem = this.$refs.wrapper;
            const { offsetWidth, offsetHeight } = elem;
            const tooSkinny =
                offsetWidth - this.legendRightWidth < donutMinWidth;
            const tooWide = offsetWidth - this.legendRightWidth > donutMaxWidth;
            const tooShort = offsetHeight < donutMinHeight;
            const tooTall = offsetHeight > donutMaxHeight;
            const targetWidth = tooSkinny
                ? donutMinWidth
                : tooWide
                ? donutMaxWidth
                : offsetWidth - this.legendRightWidth;
            const targetHeight = tooShort
                ? donutMinHeight
                : tooTall
                ? donutMaxHeight
                : offsetHeight;
            const targetDimension = Math.min(targetWidth, targetHeight);

            // 12 = left padding on right legend
            if (offsetWidth < donutMinWidth + 12 + this.legendRightWidth) {
                this.showTopLegend = true;
            } else {
                this.showTopLegend = false;
            }

            this.plotWidth = targetDimension;
            this.plotHeight = targetDimension;
        },
        onResize() {
            this.setSize();
        },
        onMousemovePlot(e) {            
            const { data, position } = e;

            this.mouseData = data;
            this.mousePosition = position;
            this.focusedData = [data._itemId];
        },
        onMouseleavePlot() {
            this.focusedData = null;
        }
    },
    mounted() {
        // Add event listener for resize
        window.addEventListener("resize", () => {
            this.onResize();
        });

        // Calls setSize method once chart is mounted
        this.setSize();
    }
});