Merge pull request mykola-digtiar#1 from energiency/chartjs-v3-enhanc…

…ed-visuals

Handling v3 and cleaning the visuals

gulpfile.js

@@ -6,7 +6,7 @@ var file = require('gulp-file');
 var rename = require('gulp-rename');
 var replace = require('gulp-replace');
 var streamify = require('gulp-streamify');
-var uglify = require('gulp-uglify');
+var uglify = require('gulp-uglify-es').default;
 var gutil = require('gulp-util');
 var zip = require('gulp-zip');
 var merge = require('merge2');
@@ -42,7 +42,7 @@ gulp.task('build', function() {
 			.pipe(source(pkg.name + '.js'))
 			.pipe(gulp.dest(out))
 			.pipe(rename(pkg.name + '.min.js'))
-			.pipe(streamify(uglify({preserveComments: 'license'})))
+			.pipe(streamify(uglify()))
 			.pipe(gulp.dest(out));
 	};
 

package.json

@@ -9,7 +9,17 @@
     "type": "git",
     "url": "https://github.com/Neckster/chartjs-plugin-piechart-outlabels"
   },
+  "scripts": {
+    "build": "gulp build",
+    "build:watch": "gulp build --watch",
+    "lint": "gulp lint",
+    "package": "gulp package"
+  },
+  "resolutions": {
+    "graceful-fs": "^4.2.9"
+  },
   "devDependencies": {
+    "chart.js": "^3.8.0",
     "gitbook-cli": "^2.3.2",
     "gulp": "^3.9.1",
     "gulp-eslint": "^3.0.0",
@@ -18,6 +28,7 @@
     "gulp-replace": "^0.5.4",
     "gulp-streamify": "^1.0.2",
     "gulp-uglify": "^1.5.3",
+    "gulp-uglify-es": "^3.0.0",
     "gulp-util": "^3.0.7",
     "gulp-zip": "^3.2.0",
     "merge2": "^1.0.2",
@@ -29,6 +40,6 @@
     "yargs": "^4.7.1"
   },
   "peerDependencies": {
-    "chart.js": ">= 2.7.0 < 3"
+    "chart.js": "> 3"
   }
 }

sample/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" type="text/css" href="./style.css">
 	<link rel="icon" type="image/ico" href="./favicon.ico">
-	<script src="https://rawgit.com/chartjs/chartjs.github.io/master/dist/master/Chart.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
 	<script src="../dist/chartjs-plugin-piechart-outlabels.js"></script>
 	<script src="./utils.js"></script>
 	<script src="./jscolor.min.js"></script>
@@ -45,7 +45,7 @@
 					<div class="input-group">
 						<label class="input-group-addon">Border Width</label>
 						<span class="input-group-addon" style="width: 100%">
-							<input oninput="changeParam('borderWidth', +this.value)" type="range" min="0" max="20" value="2" step="1" class="slider">
+							<input oninput="changeParam('borderWidth', +this.value)" type="range" min="0" max="20" value="0" step="1" class="slider">
 						</span>
 					</div>
 
@@ -64,7 +64,7 @@
 								Adapt
 							</label>
 						</span>
-						<input class="form-control jscolor" value="FFFFFF" onchange="changeParam('backgroundColor', '#' + this.value)" id="backgroundColor">
+						<input class="form-control jscolor" value="transparent" onchange="changeParam('backgroundColor', '#' + this.value)" id="backgroundColor">
 					</div>
 					<div class="input-group">
 						<span class="input-group-addon">Color</span>
@@ -129,7 +129,7 @@
 		</div>
 		<div class="col-9">
 			<div>
-				<canvas id="pieChart"></canvas>
+				<canvas id="pieChart" style="height:100vh;"></canvas>
 			</div>
 
 			<!-- Modal -->
@@ -169,10 +169,11 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
 			count: DATA_COUNT
 		});
 
-		Chart.helpers.merge(Chart.defaults.global, {
-			tooltips: false,
+		Chart.helpers.merge(Chart.defaults, {
+			responsive: false,
 			layout: {
 				padding: 10
+
 			},
 			elements: {
 				line: {
@@ -184,35 +185,31 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
 				}
 			},
 			plugins: {
-				legend: false,
-				title: true
+				legend: { display: false },
+				title: true,
+				tooltip: {
+					enabled: false,
+				},
 			}
 		});
 
 		var params = {
 			display: true,
-			text: [
-				'%l (%p.3) \n VALUE: (%v.3)',
-				'%l (%p) \n VALUE: (%v)',
-				'SIMPLE VALUE \n => %v',
-				'VALUE WITH PRECISION 4 \n => %v.4',
-				'SIMPLE PERCENT \n => %p',
-				'PERCENT WITH PRECISION 3 \n => %p.3',
-				'JUST LABEL \n => %l',
-				'JUST TEXT'
-			],
-			borderWidth: 2,
-			lineWidth: 2,
-			padding: 3,
-			textAlign: 'center',
+			lineWidth: 1,
+			padding: 8,
+			textAlign: 'left',
 			stretch: 45,
 			font: {
 				resizable: true,
 				minSize: 12,
-				maxSize: 18
+				maxSize: 16
 			},
-			valuePrecision: 1,
-			percentPrecision: 2
+			color: '#565656',
+			lineColor: '#BFBFBF',
+			backgroundColor: 'transparent',
+			valuePrecision: 0,
+			percentPrecision: 2,
+			text: '%v (%p)',
 		}
 
 		var data = Samples.numbers({
@@ -232,7 +229,7 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
 
 	<script id="script-construct">
 		var chart = new Chart('pieChart', {
-			type: 'outlabeledPie',
+			type: 'outlabeledDoughnut',
 			data: {
 				labels: Samples.LABELS,
 				datasets: [{
@@ -241,6 +238,7 @@ <h5 class="modal-title" id="dataModelLabel">Data Set Editor</h5>
 				}]
 			},
 			options: {
+				responsive: true,
 				zoomOutPercentage: 60,
 				plugins: {
 					outlabels: params

sample/style.css

@@ -11,6 +11,9 @@ html, body {
 	height: 100%;
 }
 
+canvas {
+	border: 1px dotted red;
+  }
 .side {
 	-webkit-box-shadow: 4px 0px 4px -2px rgba(0,0,0,0.2);
 	-moz-box-shadow: 4px 0px 4px -2px rgba(0,0,0,0.2);

sample/utils.js

@@ -40,7 +40,7 @@
 	Samples.LABELS = "crow;cut;gabby;mute;soak;telephone;iron;steel;numberless;shirt;mind;knowledgeable;icy;bath;spurious;stove;chickens;knock;squealing;shelter;apologise;tire;visit;endurable;truck;curtain;lumpy;wren;spot;common;plate;view;true;stranger;last;picture;poke;sweater;chew;hesitant;thing;war;bored;faithful;undress;simplistic;numerous;talk;stale;leather".match(/[^;]+/g);
 
 	Samples.LABELS.forEach(function(item, i, arr) {
-		arr[i] = item.trim().toUpperCase();
+		arr[i] = item.trim();
 	})
 
 	// Adapted from http://indiegamr.com/generate-repeatable-random-numbers-in-js/

src/classes.js

@@ -9,7 +9,7 @@ var LABEL_KEY = defaults.LABEL_KEY;
 
 export default {
 	OutLabel: function(el, index, ctx, config, context) {
-		var resolve = Chart.helpers.options.resolve;
+		var resolve = Chart.helpers.resolve;
 		// Check whether the label should be displayed
 		if (!resolve([config.display, true], context, index)) {
 			throw new Error('Label display property is set to false.');
@@ -27,9 +27,8 @@ export default {
 			var prec = val.replace(/%v\./gi, '');
 			if (prec.length) {
 				return +prec;
-			} else {
-				return config.valuePrecision || defaults.valuePrecision;
 			}
+			return config.valuePrecision || defaults.valuePrecision;
 		}).forEach(function(val) {
 			text = text.replace(/%v\.?(\d*)/i, value.toFixed(val));
 		});
@@ -39,9 +38,8 @@ export default {
 			var prec = val.replace(/%p\./gi, '');
 			if (prec.length) {
 				return +prec;
-			} else  {
-				return config.percentPrecision || defaults.percentPrecision;
 			}
+			return config.percentPrecision || defaults.percentPrecision;
 		}).forEach(function(val) {
 			text = text.replace(/%p\.?(\d*)/i, (context.percent * 100).toFixed(val) + '%');
 		});
@@ -79,7 +77,7 @@ export default {
 				lineColor: resolve([config.lineColor, defaults.lineColor, 'black'], context, index),
 				color: resolve([config.color, 'white'], context, index),
 				font: helpers.parseFont(resolve([config.font, {resizable: true}]), ctx.canvas.style.height.slice(0, -2)),
-				padding: helpers.options.toPadding(resolve([config.padding, 0], context, index)),
+				padding: helpers.toPadding(resolve([config.padding, 0], context, index)),
 				textAlign: resolve([config.textAlign, 'left'], context, index),
 			};
 
@@ -93,7 +91,8 @@ export default {
 			};
 			this.predictedOffset = this.offset;
 
-			var angle = -((el._model.startAngle + el._model.endAngle) / 2) / (Math.PI);
+
+			var angle = -((el.startAngle + el.endAngle) / 2) / (Math.PI);
 			var val = Math.abs(angle - Math.trunc(angle));
 
 			if (val > 0.45 && val < 0.55) {
@@ -109,14 +108,11 @@ export default {
 
 		/* COMPUTING RECTS PART */
 		this.computeLabelRect = function() {
-			var width = this.textRect.width + 2 * this.style.borderWidth;
+			var width = this.textRect.width + 2 * this.style.borderWidth + this.style.padding.left * 2;
 			var height = this.textRect.height + 2 * this.style.borderWidth;
 
-			var x = this.textRect.x - this.style.padding.left - this.style.borderWidth;
-			var y = this.textRect.y - this.style.padding.top - this.style.borderWidth;
-
-			width += this.style.padding.width;
-			height += this.style.padding.height;
+			var x = this.textRect.x - this.style.borderWidth;
+			var y = this.textRect.y - this.style.borderWidth;
 
 			return {
 				x: x,
@@ -125,13 +121,15 @@ export default {
 				height: height
 			};
 		};
+		const pad = 60;
 
 		this.computeTextRect = function() {
+			const shift = (this.center.x - this.center.copy.x < 0 ? -pad : pad);
 			return {
-				x: this.center.x - (this.size.width / 2),
-				y: this.center.y - (this.size.height / 2),
+				x: this.center.x - (this.size.width / 2) - this.style.padding.left + shift,
+				y: this.center.y - (this.size.height / 2) - this.style.padding.top,
 				width: this.size.width,
-				height: this.size.height
+				height: this.size.height + this.style.padding.height
 			};
 		};
 
@@ -198,19 +196,18 @@ export default {
 			for (idx = 0; idx < ilen; ++idx) {
 				this.ctx.fillText(
 					this.lines[idx],
-					Math.round(x),
-					Math.round(y),
+					Math.round(x) + this.style.padding.left,
+					Math.round(y) + this.style.padding.top,
 					Math.round(this.textRect.width)
 				);
-
 				y += lh;
 			}
 		};
 
 		// Draw label box
 		this.drawLabel = function() {
 			ctx.beginPath();
-			helpers.canvas.roundedRect(
+			this.ctx.fillRect(
 				this.ctx,
 				Math.round(this.labelRect.x),
 				Math.round(this.labelRect.y),
@@ -233,6 +230,13 @@ export default {
 			}
 		};
 
+		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);
+		};
 
 		this.drawLine = function() {
 			this.ctx.save();
@@ -245,6 +249,18 @@ export default {
 			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();
 		};
 
@@ -284,7 +300,7 @@ export default {
 							break;
 						}
 
-						if(this.containsPoint(elPoints[p])) {
+						if (this.containsPoint(elPoints[p])) {
 							valid = false;
 							break;
 						}

src/helpers.js

@@ -43,18 +43,16 @@ export default helpers.merge(helpers, {
 
 	// @todo move this method in Chart.helpers.options.toFont
 	parseFont: function(value, height) {
-
-		var global = Chart.defaults.global;
+		var global = Chart.defaults;
 		var size = helpers.valueOrDefault(value.size, global.defaultFontSize);
 
-
 		if (value.resizable) {
 			size = this.adaptTextSizeToHeight(height, value.minSize, value.maxSize);
 		}
 
 		var font = {
 			family: helpers.valueOrDefault(value.family, global.defaultFontFamily),
-			lineHeight: helpers.options.toLineHeight(value.lineHeight, size),
+			lineHeight: helpers.toLineHeight(value.lineHeight, size),
 			size: size,
 			style: helpers.valueOrDefault(value.style, global.defaultFontStyle),
 			weight: helpers.valueOrDefault(value.weight, null),
@@ -67,10 +65,10 @@ export default helpers.merge(helpers, {
 
 	adaptTextSizeToHeight: function(height, min, max) {
 		var size = (height / 100) * 2.5;
-		if(min && size < min) {
+		if (min && size < min) {
 			return min;
 		}
-		if(max && size > max) {
+		if (max && size > max) {
 			return max;
 		}
 		return size;