Ghost/ghost/admin/app/components/dashboard/charts/paid-mix.js

/* globals Chart */

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';

const MODE_OPTIONS = [{
    name: 'Cadence',
    value: 'cadence'
}, {
    name: 'Tiers',
    value: 'tiers'
}];

// Custom ChartJS rounded rectangle
Chart.elements.Rectangle.prototype.draw = function () {
    var ctx = this._chart.ctx;
    var vm = this._view;
    var left, right, top, bottom, borderSkipped, radius;

    // If radius is less than 0 or is large enough to cause drawing errors a max
    // radius is imposed. If cornerRadius is not defined set it to 0.
    var cornerRadius = this._chart.config.options.cornerRadius;
    var fullCornerRadius = this._chart.config.options.fullCornerRadius;
    var stackedRounded = this._chart.config.options.stackedRounded;
    var typeOfChart = this._chart.config.type;

    if (cornerRadius < 0) {
        cornerRadius = 0;
    }
    if (typeof cornerRadius === 'undefined') {
        cornerRadius = 0;
    }
    if (typeof fullCornerRadius === 'undefined') {
        fullCornerRadius = true;
    }
    if (typeof stackedRounded === 'undefined') {
        stackedRounded = false;
    }

    if (!vm.horizontal) {
        // bar
        left = vm.x - vm.width / 2;
        right = vm.x + vm.width / 2;
        top = vm.y;
        bottom = vm.base;
        borderSkipped = vm.borderSkipped || 'bottom';
    } else {
        // horizontal bar
        left = vm.base;
        right = vm.x;
        top = vm.y - vm.height / 2;
        bottom = vm.y + vm.height / 2;
        borderSkipped = vm.borderSkipped || 'left';
    }
    
    ctx.beginPath();
    ctx.fillStyle = vm.backgroundColor;
    ctx.strokeStyle = vm.borderColor;

    // Corner points, from bottom-left to bottom-right clockwise
    // | 1 2 |
    // | 0 3 |
    var corners = [
        [left, bottom],
        [left, top],
        [right, top],
        [right, bottom]
    ];

    // Find first (starting) corner with fallback to 'bottom'
    var borders = ['bottom', 'left', 'top', 'right'];
    var startCorner = borders.indexOf(borderSkipped, 0);
    if (startCorner === -1) {
        startCorner = 0;
    }

    function cornerAt(index) {
        return corners[(startCorner + index) % 4];
    }

    // Draw rectangle from 'startCorner'
    var corner = cornerAt(0);
    ctx.moveTo(corner[0], corner[1]);

    var nextCornerId, width, height, x, y;
    for (var i = 1; i < 4; i++) {
        corner = cornerAt(i);
        nextCornerId = i + 1;
        if (nextCornerId === 4) {
            nextCornerId = 0;
        }

        width = corners[2][0] - corners[1][0];
        height = corners[0][1] - corners[1][1];
        x = corners[1][0];
        y = corners[1][1];

        radius = cornerRadius;
        // Fix radius being too large
        if (radius > Math.abs(height) / 2) {
            radius = Math.floor(Math.abs(height) / 2);
        }
        if (radius > Math.abs(width) / 2) {
            radius = Math.floor(Math.abs(width) / 2);
        }

        var xTL, xTR, yTL, yTR, xBL, xBR, yBL, yBR;
        if (width < 0) {
            // Negative values in a horizontal bar chart
            xTL = x + width;
            xTR = x;
            yTL = y;
            yTR = y;

            xBL = x + width;
            xBR = x;
            yBL = y + height;
            yBR = y + height;

            // Draw
            ctx.moveTo(xBL + radius, yBL);
            ctx.lineTo(xBR - radius, yBR);

            //  Bottom right corner
            fullCornerRadius ? ctx.quadraticCurveTo(xBR, yBR, xBR, yBR - radius) : ctx.lineTo(xBR, yBR, xBR, yBR - radius);
            ctx.lineTo(xTR, yTR + radius);

            // top right Corner
            fullCornerRadius ? ctx.quadraticCurveTo(xTR, yTR, xTR - radius, yTR) : ctx.lineTo(xTR, yTR, xTR - radius, yTR);
            ctx.lineTo(xTL + radius, yTL);

            // top left corner
            ctx.quadraticCurveTo(xTL, yTL, xTL, yTL + radius);
            ctx.lineTo(xBL, yBL - radius);

            //  bttom left corner
            ctx.quadraticCurveTo(xBL, yBL, xBL + radius, yBL);
        } else {
            var lastVisible = 0;
            for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
                if (!this._chart.getDatasetMeta(findLast).hidden) {
                    lastVisible = findLast;
                }
            }
            var rounded = this._datasetIndex === lastVisible;

            if (rounded) {
                //Positive Value
                ctx.moveTo(x + radius, y);
                ctx.lineTo(x + width - radius, y);

                // top right
                ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
                ctx.lineTo(x + width, y + height - radius);

                // bottom right
                if (fullCornerRadius || typeOfChart === 'horizontalBar') {
                    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
                } else {
                    ctx.lineTo(x + width, y + height, x + width - radius, y + height);
                }

                ctx.lineTo(x + radius, y + height);

                // bottom left
                if (fullCornerRadius) {
                    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
                } else {
                    ctx.lineTo(x, y + height, x, y + height - radius);
                }

                ctx.lineTo(x, y + radius);

                // top left
                if (fullCornerRadius || typeOfChart === 'bar') {
                    ctx.quadraticCurveTo(x, y, x + radius, y);
                } else {
                    ctx.lineTo(x, y, x + radius, y);
                }
            } else {
                ctx.moveTo(x, y);
                ctx.lineTo(x + width, y);
                ctx.lineTo(x + width, y + height);
                ctx.lineTo(x, y + height);
                ctx.lineTo(x, y);
            }
        }
    }

    ctx.fill();
};

export default class PaidMix extends Component {
    @service dashboardStats;

    /**
     * Call this method when you need to fetch new data from the server. 
     */
    @action
    loadCharts() {
        this.dashboardStats.loadMemberCountStats();
        // The dashboard stats service will take care or reusing and limiting API-requests between charts
        if (this.mode === 'cadence') {
            this.dashboardStats.loadPaidMembersByCadence();
        } else {
            this.dashboardStats.loadPaidMembersByTier();
        }
    }

    @tracked mode = 'cadence';
    modeOptions = MODE_OPTIONS;

    get selectedModeOption() {
        return this.modeOptions.find(option => option.value === this.mode);
    }

    get hasMultipleTiers() {
        return this.dashboardStats.siteStatus?.hasMultipleTiers;
    } 

    get totalMembers() {
        return this.dashboardStats.memberCounts?.total ?? 0;
    }

    get isTotalMembersZero() {
        return this.dashboardStats.memberCounts?.total === 0;
    }

    @action 
    onSwitchMode(selected) {
        this.mode = selected.value;

        if (this.loading) {
            // We don't have the data yet for the newly selected mode
            this.loadCharts();
        }
    }

    get loading() {
        if (this.mode === 'cadence') {
            return this.dashboardStats.paidMembersByCadence === null;
        }
        return this.dashboardStats.paidMembersByTier === null;
    }
    
    get chartType() {
        return 'horizontalBar';
    }

    get areTiersAllZero() {
        if (this.dashboardStats.paidMembersByTier === null || this.dashboardStats.paidMembersByTier.length === 0) {
            return true;
        }
        const data = this.dashboardStats.paidMembersByTier.map(stat => stat.members);
        let areAllTiersZero = true;
        for (let i = 0; i < data.length; i++) {
            if (data[i] > 0) {
                areAllTiersZero = false;
            }
        }
        return areAllTiersZero;
    }

    get chartData() {
        const totalCadence = this.dashboardStats.paidMembersByCadence.month + this.dashboardStats.paidMembersByCadence.year;
        const monthlyPercentage = Math.round(this.dashboardStats.paidMembersByCadence.month / totalCadence * 100);
        const annualPercentage = Math.round(this.dashboardStats.paidMembersByCadence.year / totalCadence * 100);
        const barThickness = 5;

        if (this.mode === 'cadence') {    
            // there has to be negative values to make rounded corners work
            // empty chart render when there is no data
            if (totalCadence === 0 && !this.isTotalMembersZero) {
                return {
                    labels: ['Cadence'],
                    datasets: [{
                        label: 'Monthly',
                        data: [-50],
                        backgroundColor: '#F3F6F8',
                        barThickness
                    },{
                        label: 'Annual',
                        data: [50],
                        backgroundColor: '#EBEEF0',
                        barThickness
                    }]
                };

            // fake colorful data for underneath empty state
            } else if (this.isTotalMembersZero) {
                return {
                    labels: ['Cadence'],
                    datasets: [{
                        label: 'Monthly',
                        data: [-40],
                        backgroundColor: '#8E42FF',
                        barThickness
                    },{
                        label: 'Annual',
                        data: [60],
                        backgroundColor: '#FB76B4',
                        barThickness
                    }]
                };
            }

            return {
                labels: ['Cadence'],
                datasets: [{
                    label: 'Monthly',
                    data: [-monthlyPercentage],
                    backgroundColor: '#8E42FF',
                    barThickness
                }, {
                    label: 'Annual',
                    data: [annualPercentage],
                    backgroundColor: '#FB76B4',
                    barThickness
                }]
            };
        }

        // if it's for tiers...
        const labels = this.dashboardStats.paidMembersByTier.map(stat => stat.tier.name);
        const data = this.dashboardStats.paidMembersByTier.map(stat => stat.members);
        const colors = ['#853EED', '#CA3FED', '#E993CC', '#DB7777', '#EE9696', '#FEC7C0', '#853EED', '#CA3FED', '#E993CC', '#DB7777', '#EE9696', '#FEC7C0'];
        const zeroColors = ['#E6E9EB', '#EEF1F2', '#F6F8FA', '#EEF1F2', '#E6E9EB', '#EEF1F2', '#F6F8FA', '#EEF1F2', '#E6E9EB', '#EEF1F2', '#F6F8FA', '#EEF1F2'];
        let datasets = [];
        let totalTiersAmount;

        // tiers all have 0 data
        if (this.areTiersAllZero) {
            totalTiersAmount = 100;
            let equalPercentageData = Math.round(100 / data.length);
            for (let i = 0; i < data.length; i++) {
                data[i] = equalPercentageData;
            }
        // tiers have good data
        } else {
            totalTiersAmount = 0;
            for (let i = 0; i < data.length; i++) {
                totalTiersAmount += data[i];
            }
        }

        for (let i = 0; i < data.length; i++) {
            if (!this.areTiersAllZero && data[i] === 0) {
                // If not all tiers are zero, hide tiers with 0 members, because
                // they are not visible in the graph and can break rounded corners
                continue;
            }

            let tierPercentage = Math.round(data[i] / totalTiersAmount * 100);

            // The first value has to be negative to make rounded corners work
            if (i === 0) { 
                tierPercentage = -tierPercentage;
            }
            datasets.push({
                data: [tierPercentage],
                label: labels[i],
                backgroundColor: this.areTiersAllZero ? zeroColors[i] : colors[i],
                barThickness
            });
        }

        return {
            labels: ['Tiers'],
            datasets
        };
    }

    get chartOptions() {
        let that = this;
        let ticksY = {display: false};
        let totalCadence = this.dashboardStats.paidMembersByCadence.month + this.dashboardStats.paidMembersByCadence.year;
        let minTickValue = -(Math.round(this.dashboardStats.paidMembersByCadence.month / totalCadence * 100));
        let maxTickValue = Math.round(this.dashboardStats.paidMembersByCadence.year / totalCadence * 100);

        // this is for cadence...
        if (this.mode === 'cadence') {
            // for when it's empty
            if (totalCadence === 0) {
                minTickValue = -50;
                maxTickValue = 50;
            }

            ticksY = {
                display: false,
                min: minTickValue,
                max: maxTickValue
            };

        // this is for tiers...
        } else {
            if (!this.areTiersAllZero) {
                let data = this.dashboardStats.paidMembersByTier.map(stat => stat.members);
                let totalTiersAmount = 0;

                for (let i = 0; i < data.length; i++) {
                    totalTiersAmount += data[i];
                }

                let negativeTierPercentage = Math.round(data[0] / totalTiersAmount * 100);

                ticksY = {
                    display: false,
                    min: -negativeTierPercentage,
                    max: 100 - negativeTierPercentage // take the negative away from 100 to create a full width bar
                };
            }
        }

        return {
            responsive: true,
            maintainAspectRatio: false,
            cornerRadius: 50,
            fullCornerRadius: false,
            legend: {
                display: false
            },
            layout: {
                padding: {
                    top: 72,
                    bottom: 0,
                    left: 0,
                    right: 4
                }
            },
            animation: false,
            responsiveAnimationDuration: 1,
            hover: {
                onHover: function (e) {
                    e.target.style.cursor = 'pointer';
                }
            },
            tooltips: {
                enabled: false,
                intersect: false,
                mode: 'single',
                custom: function (tooltip) {
                    // get tooltip element
                    const tooltipEl = document.getElementById('gh-dashboard-mix-tooltip');
                    const chartContainerEl = tooltipEl.parentElement;
                    const chartWidth = chartContainerEl.offsetWidth;
                    const tooltipWidth = tooltipEl.offsetWidth;

                    // only show tooltip when active
                    if (tooltip.opacity === 0) {
                        tooltipEl.style.opacity = 0;
                        return; 
                    }

                    let offsetX = 0;

                    if (that.mode === 'cadence') {
                        // these adjustments should match the special width and margin values in css
                        if (tooltip.x > (chartWidth * 0.69) - tooltipWidth) {
                            offsetX = tooltipWidth - 10;
                        }
                        offsetX -= (chartWidth * 0.30);
                    } else {
                        if (tooltip.x > chartWidth - tooltipWidth) {
                            offsetX = tooltipWidth - 10;
                        } 
                    }

                    // update tooltip styles
                    tooltipEl.style.opacity = 1;
                    tooltipEl.style.position = 'absolute';
                    tooltipEl.style.left = tooltip.x - offsetX + 'px';
                    tooltipEl.style.top = '30px';
                },
                callbacks: {
                    label: (tooltipItems, data) => {
                        const tooltipTextEl = document.querySelector('#gh-dashboard-mix-tooltip .gh-dashboard-tooltip-value');
                        const label = data.datasets[tooltipItems.datasetIndex].label || '';
                        var value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
                        if (value < 0) {
                            value = -value;
                        }
                        if (that.isTotalMembersZero || totalCadence === 0) {
                            value = 0;
                        } else {
                            value += '%';
                        }
                        tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="value">${value}</span><span class="metric">${label}</span>`;
                    },
                    title: () => {
                        return null;
                    }
                }
            },
            scales: {
                yAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: false
                    }
                }],
                xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false
                    },
                    ticks: ticksY
                }]
            }
        };
    }

    get isChartCadence() {
        return (this.mode === 'cadence');
    }

    get isChartTiers() {
        return (this.mode === 'tiers');
    }
}