mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added rounded corners to Paid mix
This commit is contained in:
Peter Zimon
parent
260d516ad5
commit
02ccf5fe1a
1 changed files with 217 additions and 5 deletions
|
|
@ -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: {
|
||||
display: false
|
||||
}
|
||||
ticks: ticksY
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue