mirrors/Cloudlog
1
0
Fork 0
mirror of https://github.com/magicbug/Cloudlog synced 2024-11-22 17:52:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
d41e524dbd
Cloudlog/assets/js/chartjs-plugin-piechart-outlabels.js

793 lines
22 KiB
JavaScript
Raw Blame History

/*!
* @energiency/chartjs-plugin-piechart-outlabels v1.3.1
* http://www.chartjs.org
* (c) 2017-2022 @energiency/chartjs-plugin-piechart-outlabels contributors
* Released under the MIT license
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('chart.js'), require('chart.js/helpers')) :
typeof define === 'function' && define.amd ? define(['chart.js', 'chart.js/helpers'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChartPieChartOutlabels = factory(global.Chart, global.Chart.helpers));
})(this, (function (chart_js, helpers) { 'use strict';
/**
* @module Options
*/
var customDefaults = {
PLUGIN_KEY: '$outlabels',
/**
* The color used to draw the background of the label rect.
* @member {String|Array|Function|null}
* @default null (adaptive background)
*/
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
/**
* The color used to draw the border of the label rect.
* @member {String|Array|Function|null}
* @default null (adaptive border color)
*/
borderColor: function(context) {
return context.dataset.backgroundColor;
},
/**
* The color used to draw the line between label and arc of the chart.
* @member {String|Array|Function|null}
* @default null (adaptive line color)
*/
lineColor: function(context) {
return context.dataset.backgroundColor;
},
/**
* The border radius used to add rounded corners to the label rect.
* @member {Number|Array|Function}
* @default 0 (not rounded)
*/
borderRadius: 0,
/**
* The border width of the surrounding frame.
* @member {Number|Array|Function}
* @default 0 (no border)
*/
borderWidth: 0,
/**
* The width (thickness) of the line between label and chart arc.
* @member {Number|Array|Function}
* @default 2
*/
lineWidth: 2,
/**
* The color used to draw the label text.
* @member {String|Array|Function}
* @default white
*/
color: 'white',
/**
* Whether to display labels global (boolean) or per data (function)
* @member {Boolean|Array|Function}
* @default true
*/
display: true,
/**
* The font options used to draw the label text.
* @member {Object|Array|Function}
* @prop {Boolean} font.family - defaults to Chart.defaults.global.defaultFontFamily
* @prop {Boolean} font.size - defaults to Chart.defaults.global.defaultFontSize
* @prop {Boolean} font.style - defaults to Chart.defaults.global.defaultFontStyle
* @prop {Boolean} font.weight - defaults to 'normal'
* @prop {Boolean} font.maxSize - defaults to undefined (unlimited)
* @prop {Boolean} font.minSize - defaults to undefined (unlimited)
* @prop {Boolean} font.resizable - defaults to true
* @default Chart.defaults.global.defaultFont.*
*/
font: {
family: undefined,
size: undefined,
style: undefined,
weight: null,
maxSize: null,
minSize: null,
resizable: true,
},
/**
* The line height (in pixel) to use for multi-lines labels.
* @member {Number|Array|Function|undefined}
* @default 1.2
*/
lineHeight: 1.2,
/**
* The padding (in pixels) to apply between the text and the surrounding frame.
* @member {Number|Object|Array|Function}
* @prop {Number} padding.top - Space above the text.
* @prop {Number} padding.right - Space on the right of the text.
* @prop {Number} padding.bottom - Space below the text.
* @prop {Number} padding.left - Space on the left of the text.
* @default 4 (all values)
*/
padding: {
top: 2,
right: 2,
bottom: 2,
left: 2
},
/**
* Text alignment for multi-lines labels ('left'|'right'|'start'|'center'|'end').
* @member {String|Array|Function}
* @default 'center'
*/
textAlign: 'center',
/**
* The radius of distance where the label will be drawn
* @member {Number|Array|Function|undefined}
* @default 30
*/
stretch: 12,
/**
* The length of the horizontal part of line between label and chart arc.
* @member {Number}
* @default 30
*/
horizontalStrechPad: 12,
/**
* The text of the label.
* @member {String}
* @default '%l %p' (label name and value percentage)
*/
text: '%l %p',
/**
* The max level of zoom (out) for pie/doughnut chart in percent.
* @member {Number}
* @default 50 (%)
*/
maxZoomOutPercentage: 50,
/**
* The count of numbers after the point separator for float values of percent property
* @member {Number}
* @default 1
*/
percentPrecision: 1,
/**
* The count of numbers after the point separator for float values of value property
* @member {Number}
* @default 3
*/
valuePrecision: 3
};
var positioners = {
center: function(arc, stretch) {
var angle = (arc.startAngle + arc.endAngle) / 2;
var cosA = Math.cos(angle);
var sinA = Math.sin(angle);
var d = arc.outerRadius;
var stretchedD = d + stretch;
return {
x: arc.x + cosA * stretchedD,
y: arc.y + sinA * stretchedD,
d: stretchedD,
arc: arc,
anchor: {
x: arc.x + cosA * d,
y: arc.y + sinA * d,
},
copy: {
x: arc.x + cosA * stretchedD,
y: arc.y + sinA * stretchedD
}
};
},
moveFromAnchor: function(center, dist) {
var arc = center.arc;
var d = center.d;
var angle = (arc.startAngle + arc.endAngle) / 2;
var cosA = Math.cos(angle);
var sinA = Math.sin(angle);
d += dist;
return {
x: arc.x + cosA * d,
y: arc.y + sinA * d,
d: d,
arc: arc,
anchor: center.anchor,
copy: {
x: arc.x + cosA * d,
y: arc.y + sinA * d
}
};
}
};
function toFontString(font) {
if (!font || helpers.isNullOrUndef(font.size) || helpers.isNullOrUndef(font.family)) {
return null;
}
return (font.style ? font.style + ' ' : '')
+ (font.weight ? font.weight + ' ' : '')
+ font.size + 'px '
+ font.family;
}
function textSize(ctx, lines, font) {
var items = [].concat(lines);
var ilen = items.length;
var prev = ctx.font;
var width = 0;
var i;
ctx.font = font.string;
for (i = 0; i < ilen; ++i) {
width = Math.max(ctx.measureText(items[i]).width, width);
}
ctx.font = prev;
return {
height: ilen * font.lineHeight,
width: width
};
}
function adaptTextSizeToHeight(height, minimum, maximum) {
var size = (height / 100) * 2.5;
if (minimum && size < minimum) {
return minimum;
}
if (maximum && size > maximum) {
return maximum;
}
return size;
}
function parseFont(value, height) {
var size = helpers.valueOrDefault(value.size, chart_js.Chart.defaults.defaultFontSize);
if (value.resizable) {
size = adaptTextSizeToHeight(height, value.minSize, value.maxSize);
}
var font = {
family: helpers.valueOrDefault(value.family, chart_js.Chart.defaults.defaultFontFamily),
lineHeight: helpers.toLineHeight(value.lineHeight, size),
size: size,
style: helpers.valueOrDefault(value.style, chart_js.Chart.defaults.defaultFontStyle),
weight: helpers.valueOrDefault(value.weight, null),
string: ''
};
font.string = toFontString(font);
return font;
}
var PLUGIN_KEY$1 = customDefaults.PLUGIN_KEY;
var classes = {
OutLabel: function(chart, index, ctx, config, context) {
// Check whether the label should be displayed
if (!helpers.resolve([config.display, true], context, index)) {
throw new Error('Label display property is set to false.');
}
// Init text
var value = context.dataset.data[index];
var label = context.labels[index];
var text = helpers.resolve([config.text, customDefaults.text], context, index);
/* Replace label marker */
text = text.replace(/%l/gi, label);
/* Replace value marker with possible precision value */
(text.match(/%v\.?(\d*)/gi) || []).map(function(val) {
var prec = val.replace(/%v\./gi, '');
if (prec.length) {
return +prec;
}
return config.valuePrecision || customDefaults.valuePrecision;
}).forEach(function(val) {
text = text.replace(/%v\.?(\d*)/i, value.toFixed(val));
});
/* Replace percent marker with possible precision value */
(text.match(/%p\.?(\d*)/gi) || []).map(function(val) {
var prec = val.replace(/%p\./gi, '');
if (prec.length) {
return +prec;
}
return config.percentPrecision || customDefaults.percentPrecision;
}).forEach(function(val) {
text = text.replace(/%p\.?(\d*)/i, (context.percent * 100).toFixed(val) + '%');
});
// Count lines
var lines = text.match(/[^\r\n]+/g) || [];
// Remove unnecessary spaces
for (var i = 0; i < lines.length; ++i) {
lines[i] = lines[i].trim();
}
/* ===================== CONSTRUCTOR ==================== */
this.init = function(text, lines) {
// If everything ok -> begin initializing
this.encodedText = config.text;
this.text = text;
this.lines = lines;
this.label = label;
this.value = value;
this.ctx = ctx;
// Init style
this.style = {
backgroundColor: helpers.resolve([config.backgroundColor, customDefaults.backgroundColor, 'black'], context, index),
borderColor: helpers.resolve([config.borderColor, customDefaults.borderColor, 'black'], context, index),
borderRadius: helpers.resolve([config.borderRadius, 0], context, index),
borderWidth: helpers.resolve([config.borderWidth, 0], context, index),
lineWidth: helpers.resolve([config.lineWidth, 2], context, index),
lineColor: helpers.resolve([config.lineColor, customDefaults.lineColor, 'black'], context, index),
color: helpers.resolve([config.color, 'white'], context, index),
font: parseFont(helpers.resolve([config.font, {resizable: true}]), ctx.canvas.style.height.slice(0, -2)),
padding: helpers.toPadding(helpers.resolve([config.padding, 0], context, index)),
textAlign: helpers.resolve([config.textAlign, 'left'], context, index),
};
this.stretch = helpers.resolve([config.stretch, customDefaults.stretch], context, index);
this.horizontalStrechPad = helpers.resolve([config.horizontalStrechPad, customDefaults.horizontalStrechPad], context, index);
this.size = textSize(ctx, this.lines, this.style.font);
this.offsetStep = this.size.width / 20;
this.offset = {
x: 0,
y: 0
};
this.predictedOffset = this.offset;
/*var angle = -((el._model.startAngle + el._model.endAngle) / 2) / (Math.PI);
var val = Math.abs(angle - Math.trunc(angle));
if (val > 0.45 && val < 0.55) {
this.predictedOffset.x = 0;
} else if (angle <= 0.45 && angle >= -0.45) {
this.predictedOffset.x = this.size.width / 2;
} else if (angle >= -1.45 && angle <= -0.55) {
this.predictedOffset.x = -this.size.width / 2;
}*/
};
this.init(text, lines);
/* COMPUTING RECTS PART */
this.computeLabelRect = function() {
var width = this.textRect.width + 2 * this.style.borderWidth + this.style.padding.left + this.style.padding.right;
var height = this.textRect.height + 2 * this.style.borderWidth + this.style.padding.top + this.style.padding.bottom;
var x = this.textRect.x - this.style.borderWidth;
var y = this.textRect.y - this.style.borderWidth;
return {
x: x,
y: y,
width: width,
height: height,
isLeft: this.textRect.isLeft,
isTop: this.textRect.isTop
};
};
this.computeTextRect = function() {
const isLeft = this.center.x - this.center.anchor.x < 0;
const isTop = this.center.y - this.center.anchor.y < 0;
const shift = isLeft ? -(this.horizontalStrechPad + this.size.width) : this.horizontalStrechPad;
return {
x: this.center.x - this.style.padding.left + shift,
y: this.center.y - (this.size.height / 2),
width: this.size.width,
height: this.size.height,
isLeft,
isTop
};
};
this.roundedRect = function (ctx, x, y, width, height, radius) {
var TL, TR, BR, BL;
// Minimum horizontal value: half of the width
var mH = r => Math.min(r, width / 2);
// Minimum vertical value: half of the width
var mV = r => Math.min(r, height / 2);
if (radius instanceof Array) {
// [TL, TR, BR, BL]
TL = radius[0];
TR = radius[1];
BR = radius[2];
BL = radius[3];
} else {
TL = TR = BR = BL = radius;
}
ctx.beginPath();
ctx.moveTo(x + mH(TL), y);
ctx.lineTo(x + width - mH(TR), y);
ctx.quadraticCurveTo(x + width, y, x + width, y + mV(TR));
ctx.lineTo(x + width, y + height - mV(BR));
ctx.quadraticCurveTo(x + width, y + height, x + width - mH(BR), y + height);
ctx.lineTo(x + mH(BL), y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - mV(BL));
ctx.lineTo(x, y + mV(TL));
ctx.quadraticCurveTo(x, y, x + mH(TL), y);
ctx.closePath();
}
this.getPoints = function() {
return [
{
x: this.labelRect.x,
y: this.labelRect.y
},
{
x: this.labelRect.x + this.labelRect.width,
y: this.labelRect.y
},
{
x: this.labelRect.x + this.labelRect.width,
y: this.labelRect.y + this.labelRect.height
},
{
x: this.labelRect.x,
y: this.labelRect.y + this.labelRect.height
}
];
};
this.containsPoint = function(point) {
let offset = 5;
return this.labelRect.x - offset <= point.x && point.x <= this.labelRect.x + this.labelRect.width + offset
&&
this.labelRect.y - offset <= point.y && point.y <= this.labelRect.y + this.labelRect.height + offset;
};
/* ======================= DRAWING ======================= */
// Draw label text
this.drawText = function() {
var align = this.style.textAlign;
var font = this.style.font;
var lh = font.lineHeight;
var color = this.style.color;
var ilen = this.lines.length;
var x, y, idx;
if (!ilen || !color) {
return;
}
x = this.textRect.x;
y = this.textRect.y + lh / 2;
if (align === 'center') {
x += this.textRect.width / 2;
} else if (align === 'end' || align === 'right') {
x += this.textRect.width;
}
this.ctx.font = this.style.font.string;
this.ctx.fillStyle = color;
this.ctx.textAlign = align;
this.ctx.textBaseline = 'middle';
for (idx = 0; idx < ilen; ++idx) {
this.ctx.fillText(
this.lines[idx],
Math.round(x) + this.style.padding.left,
Math.round(y),
Math.round(this.textRect.width)
);
y += lh;
}
};
this.ccw = function(A, B, C) {
return (C.y - A.y) * (B.x - A.x) > (B.y - A.y) * (C.x - A.x);
};
this.intersects = function(A, B, C, D) {
return this.ccw(A, C, D) !== this.ccw(B, C, D) && this.ccw(A, B, C) !== this.ccw(A, B, D);
};
// Draw label box
this.drawLabel = function() {
ctx.beginPath();
this.roundedRect(
this.ctx,
Math.round(this.labelRect.x),
Math.round(this.labelRect.y),
Math.round(this.labelRect.width),
Math.round(this.labelRect.height),
this.style.borderRadius
);
this.ctx.closePath();
if (this.style.backgroundColor) {
this.ctx.fillStyle = this.style.backgroundColor || 'black';
this.ctx.fill();
}
if (this.style.borderColor && this.style.borderWidth) {
this.ctx.strokeStyle = this.style.borderColor;
this.ctx.lineWidth = this.style.borderWidth;
this.ctx.lineJoin = 'miter';
this.ctx.stroke();
}
};
this.drawLine = function() {
if (!this.lines.length) {
return;
}
this.ctx.save();
this.ctx.strokeStyle = this.style.lineColor;
this.ctx.lineWidth = this.style.lineWidth;
this.ctx.lineJoin = 'miter';
this.ctx.beginPath();
this.ctx.moveTo(this.center.anchor.x, this.center.anchor.y);
this.ctx.lineTo(this.center.copy.x, this.center.copy.y);
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(this.center.copy.x, this.center.copy.y);
const xOffset = this.textRect.width + this.style.padding.width;
const intersect = this.intersects(this.textRect, {
x: this.textRect.x + this.textRect.width,
y: this.textRect.y + this.textRect.height,
}, this.center.copy, {
x: this.textRect.x,
y: this.textRect.y + this.textRect.height / 2
});
this.ctx.lineTo(this.textRect.x + (intersect ? xOffset : 0), this.textRect.y + this.textRect.height / 2);
this.ctx.stroke();
this.ctx.restore();
};
this.draw = function() {
if (chart.getDataVisibility(index)) {
this.drawLabel();
this.drawText();
this.drawLine();
}
};
// eslint-disable-next-line max-statements
this.update = function(view, elements, max) {
this.center = positioners.center(view, this.stretch);
this.moveLabelToOffset();
this.center.x += this.offset.x;
this.center.y += this.offset.y;
var valid = false;
while (!valid) {
this.textRect = this.computeTextRect();
this.labelRect = this.computeLabelRect();
var rectPoints = this.getPoints();
valid = true;
for (var e = 0; e < max; ++e) {
var element = elements[e][PLUGIN_KEY$1];
if (!element || !chart.getDataVisibility(index)) {
continue;
}
var elPoints = element.getPoints();
for (var p = 0; p < rectPoints.length; ++p) {
if (element.containsPoint(rectPoints[p])) {
valid = false;
break;
}
if (this.containsPoint(elPoints[p])) {
valid = false;
break;
}
}
}
if (!valid) {
this.center = positioners.moveFromAnchor(this.center, 1);
this.center.x += this.offset.x;
this.center.y += this.offset.y;
}
}
};
this.moveLabelToOffset = function() {
if (this.predictedOffset.x <= 0 && this.offset.x > this.predictedOffset.x) {
this.offset.x -= this.offsetStep;
if (this.offset.x <= this.predictedOffset.x) {
this.offset.x = this.predictedOffset.x;
}
} else if (this.predictedOffset.x >= 0 && this.offset.x < this.predictedOffset.x) {
this.offset.x += this.offsetStep;
if (this.offset.x >= this.predictedOffset.x) {
this.offset.x = this.predictedOffset.x;
}
}
};
}
};
chart_js.defaults.plugins.outlabels = customDefaults;
var PLUGIN_KEY = customDefaults.PLUGIN_KEY;
function configure(dataset, options) {
var override = dataset.outlabels;
var config = {};
if (override === false) {
return null;
}
if (override === true) {
override = {};
}
return Object.assign({}, config, options, override);
}
var plugin = {
id: 'outlabels',
resize: function(chart) {
chart.sizeChanged = true;
},
afterUpdate: (chart) => {
const ctrl = chart._metasets[0].controller;
var meta = ctrl.getMeta();
var elements = meta.data || [];
const rect = {
x1: Infinity,
x2: 0,
y1: Infinity,
y2: 0
};
elements.forEach((el, index) => {
const outlabelPlugin = el[PLUGIN_KEY];
if (!outlabelPlugin) {
return;
}
outlabelPlugin.update(el, elements, index);
const x = outlabelPlugin.labelRect.x + (!outlabelPlugin.labelRect.isLeft ? 0 : outlabelPlugin.labelRect.width);
const y = outlabelPlugin.labelRect.y + (outlabelPlugin.labelRect.isTop ? 0 : outlabelPlugin.labelRect.height);
if (x < rect.x1) {
rect.x1 = x;
}
if (x > rect.x2) {
rect.x2 = x;
}
if (y < rect.y1) {
rect.y1 = y;
}
if (y > rect.y2) {
rect.y2 = y;
}
});
var max = chart.options.maxZoomOutPercentage || customDefaults.maxZoomOutPercentage;
const maxDeltas = [
chart.chartArea.left - rect.x1,
chart.chartArea.top - rect.y1,
rect.x2 - chart.chartArea.right,
rect.y2 - chart.chartArea.bottom
];
const diff = Math.max(...maxDeltas.filter(x => x > 0), 0);
const percent = diff * 100 / ctrl.outerRadius;
ctrl.outerRadius -= percent < max ? diff : max * 100 / ctrl.outerRadius;
ctrl.innerRadius = ctrl.outerRadius / 2;
ctrl.updateElements(meta.data, 0, meta.data.length, 'resize');
},
afterDatasetUpdate: function(chart, args, options) {
var labels = chart.config.data.labels;
var dataset = chart.data.datasets[args.index];
var config = configure(dataset, options);
var display = config && config.display;
var elements = args.meta.data || [];
var ctx = chart.ctx;
var el, label, percent, newLabel, context, i;
ctx.save();
for (i = 0; i < elements.length; ++i) {
el = elements[i];
label = el[PLUGIN_KEY];
percent = dataset.data[i] / args.meta.total;
newLabel = null;
if (display && el && !el.hidden) {
try {
context = {
chart: chart,
dataIndex: i,
dataset: dataset,
labels: labels,
datasetIndex: args.index,
percent: percent
};
newLabel = new classes.OutLabel(chart, i, ctx, config, context);
} catch (e) {
newLabel = null;
}
}
if (
label && newLabel && !chart.sizeChanged &&
(label.label === newLabel.label) && (label.encodedText === newLabel.encodedText)
) {
newLabel.offset = label.offset;
}
el[PLUGIN_KEY] = newLabel;
}
ctx.restore();
chart.sizeChanged = false;
},
afterDatasetDraw: function(chart, args) {
var elements = args.meta.data || [];
var ctx = chart.ctx;
elements.forEach((el, index) => {
const outlabelPlugin = el[PLUGIN_KEY];
if (!outlabelPlugin) {
return;
}
outlabelPlugin.update(el, elements, index);
outlabelPlugin.draw(ctx);
});
},
};
return plugin;
}));
Reference in New Issue View Git Blame Copy Permalink