Ghost/ghost/admin/app/components/dashboard/v5/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();
};

// Chart.defaults.roundedBar = Chart.defaults.bar;
// Chart.controllers.roundedBar = Chart.controllers.bar.extend({
//     dataElementType: Chart.elements.RoundedRectangle
// });

export default class PaidMix extends Component {
    @service dashboardStats;

    /**
     * Call this method when you need to fetch new data from the server. 
     */
    @action
    loadCharts() {
        // 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 && this.totalMembers === 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 hasData() {
        return (this.dashboardStats.paidMembersByCadence.month + this.dashboardStats.paidMembersByCadence.year) > 0;
    }

    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;

        // fake empty data
        if (this.isTotalMembersZero) {
            return {
                labels: ['Cadence'],
                datasets: [{
                    label: 'All',
                    data: [100],
                    backgroundColor: '#EBEEF0',
                    barThickness
                }]
            };
        }

        if (this.mode === 'cadence') {
            // The first value has to be negative to make rounded corners work
            return {
                labels: ['Cadence'],
                datasets: [{
                    label: 'Monthly',
                    data: [-monthlyPercentage],
                    backgroundColor: '#8E42FF',
                    barThickness
                }, {
                    label: 'Annual',
                    data: [annualPercentage],
                    backgroundColor: '#FB76B4',
                    barThickness
                }]
            };
        }

        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'];

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

        let datasets = [];
        for (let i = 0; i < data.length; i++) {
            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: colors[i],
                barThickness
            });
        }

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

    get chartOptions() {
        let minTickValue, maxTickValue, ticksY;

        if (this.mode === 'cadence') {
            const totalCadence = this.dashboardStats.paidMembersByCadence.month + this.dashboardStats.paidMembersByCadence.year;
            minTickValue = -(Math.round(this.dashboardStats.paidMembersByCadence.month / totalCadence * 100));
            maxTickValue = Math.round(this.dashboardStats.paidMembersByCadence.year / totalCadence * 100);
            ticksY = {
                display: false,
                min: minTickValue,
                max: maxTickValue
            };
        } else {
            ticksY = {
                display: false
            };
        }

        return {
            responsive: true,
            maintainAspectRatio: false,
            cornerRadius: 50,
            fullCornerRadius: false,
            legend: {
                display: false
            },
            layout: {
                padding: {
                    top: 72,
                    bottom: 0,
                    left: 0,
                    right: 4
                }
            },
            animation: {
                duration: 0
            },
            responsiveAnimationDuration: 0,
            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-dashboard5-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 (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-dashboard5-mix-tooltip .gh-dashboard5-tooltip-value');
                        if (this.isTotalMembersZero) {
                            tooltipTextEl.innerHTML = 'Currently has no data';
                        } else {
                            const label = data.datasets[tooltipItems.datasetIndex].label || '';
                            var value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
                            if (value < 0) {
                                value = -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');
    }
}