Added rounded corners to Paid mix

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

@@ -1,3 +1,5 @@
+/* globals Chart */
+
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
@@ -11,6 +13,190 @@ const MODE_OPTIONS = [{
     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;
 
@@ -91,11 +277,12 @@ export default class PaidMix extends Component {
         }
 
         if (this.mode === 'cadence') {
+            // The first value has to be negative to make rounded corners work
             return {
                 labels: ['Cadence'],
                 datasets: [{
                     label: 'Monthly',
-                    data: [monthlyPercentage],
+                    data: [-monthlyPercentage],
                     backgroundColor: '#8E42FF',
                     barThickness
                 }, {
@@ -119,6 +306,11 @@ export default class PaidMix extends Component {
         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],
@@ -134,9 +326,28 @@ export default class PaidMix extends Component {
     }
 
     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
             },
@@ -192,7 +403,10 @@ export default class PaidMix extends Component {
                             tooltipTextEl.innerHTML = 'Currently has no data';
                         } else {
                             const label = data.datasets[tooltipItems.datasetIndex].label || '';
-                            const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
+                            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>`;
                         }
                     },
@@ -216,9 +430,7 @@ export default class PaidMix extends Component {
                     gridLines: {
                         display: false
                     },
-                    ticks: {
+                    ticks: ticksY
-                        display: false
-                    }
                 }]
             }
         };