chartjs-plugin-doughnutlabel - npm Package Compare versions

Comparing version 1.0.5 to 2.0.0

package.json

 {
   "name": "chartjs-plugin-doughnutlabel",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "Chart.js plugin for doughnut chart to display lines of text in the center",
@@ -5,0 +5,0 @@ "main": "dist/chartjs-plugin-doughnutlabel.js",

README.md

@@ -6,3 +6,3 @@ # Chart.js Doughnut plugin to allow for lines of text in the middle
 ## Demo
-https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html
+Have a look at the [Demo page](https://ciprianciurea.github.io/chartjs-plugin-doughnutlabel/samples/index.html).
 
@@ -32,10 +32,31 @@ ## Table of contents
       doughnutlabel: {
-        labels: ['The title', 'The subtitle', '$100.000', '95%'],
-        font: {
-					size: '60',
-					family: 'Arial, Helvetica, sans-serif',
-					style: 'italic',
-					weight: 'bold'
-        },
-        color: 'grey'						
+        labels: [
+          {
+            text: 'The title',
+            font: {
+              size: '60'
+            }
+          },
+          {
+            text: 'The subtitle',
+            font: {
+              size: '50'
+            },
+            color: 'grey'
+          },
+          {
+            text: '$100.000',
+            font: {
+              size: '30'
+            },
+            color: 'red'
+          },
+          {
+            text: '95%',
+            font: {
+              size: '45'
+            },
+          color: 'green'
+          }
+        ]
       }
@@ -69,3 +90,3 @@ }
     > gulp build --watch    // build and watch for changes
-		> gulp package          // create an archive with dist files and samples
+    > gulp package          // create an archive with dist files and samples
 
@@ -72,0 +93,0 @@ ## License

samples/index.js

@@ -0,1 +1,3 @@
+'use strict';
+
 var DEFAULT_COLORS1 = ['#f08700', '#f49f0a', '#efca08', '#00a6a6', '#bbdef0'];
@@ -33,7 +35,31 @@ var DEFAULT_COLORS2 = ['#7fb7be', '#357266', '#dacc3e', '#bc2c1a', '#7d1538'];
 			doughnutlabel: {
-				labels: ['The title', 'The subtitle', '$100.000', '95%'],
-				font: {
-					size: '60'
-				},
-				color: 'grey'
+				labels: [
+					{
+						text: 'The title',
+						font: {
+							size: '60'
+						}
+					},
+					{
+						text: 'The subtitle',
+						font: {
+							size: '50'
+						},
+						color: 'grey'
+					},
+					{
+						text: '$100.000',
+						font: {
+							size: '30'
+						},
+						color: 'red'
+					},
+					{
+						text: '95%',
+						font: {
+							size: '45'
+						},
+						color: 'green'
+					}
+				]
 			}
@@ -73,10 +99,14 @@ }
 			doughnutlabel: {
-				labels: ['This is one line of text'],
-				font: {
-					size: '60',
-					family: 'Arial, Helvetica, sans-serif',
-					style: 'italic',
-					weight: 'bold'
-				},
-				color: '#bc2c1a'
+				labels: [
+					{
+						text: 'This is one line of text',
+						font: {
+							size: '60',
+							family: 'Arial, Helvetica, sans-serif',
+							style: 'italic',
+							weight: 'bold'
+						},
+						color: '#bc2c1a'
+					}
+				]
 			}
@@ -83,0 +113,0 @@ }

samples/utils.js

@@ -1,2 +0,2 @@
-// Google Analytics 
+// Google Analytics
 /* eslint-disable */
@@ -11,2 +11,2 @@ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 /* eslint-enable */
-// End Google Analytics 
+// End Google Analytics

src/plugin.js

@@ -15,6 +15,15 @@ 'use strict';
 		var resolve = helpers.options.resolve;
-		var color = resolve([options.color, Chart.defaults.global.defaultFontColor], ctx, 0);
-		var font = utils.parseFont(resolve([options.font, {}], ctx, 0));
-		var textAreaSize = utils.textSize(ctx, options.labels, font);
 
+		var innerLabels = [];
+		options.labels.forEach(function(label) {
+			var innerLabel = {
+				text: label.text,
+				font: utils.parseFont(resolve([label.font, options.font, {}], ctx, 0)),
+				color: resolve([label.color, options.color, Chart.defaults.global.defaultFontColor], ctx, 0)
+			};
+			innerLabels.push(innerLabel);
+		});
+
+		var textAreaSize = utils.textSize(ctx, innerLabels);
+
 		// Calculate the adjustment ratio to fit the text area into the doughnut inner circle
@@ -27,6 +36,9 @@ var hypotenuse = Math.sqrt(Math.pow(textAreaSize.width, 2) + Math.pow(textAreaSize.height, 2));
 		if (fitRatio < 1) {
-			font.size = Math.floor(font.size * fitRatio);
-			font.lineHeight = undefined;
-			font = utils.parseFont(resolve([font, {}], ctx, 0));
-			textAreaSize = utils.textSize(ctx, options.labels, font);
+			innerLabels.forEach(function(innerLabel) {
+				innerLabel.font.size = Math.floor(innerLabel.font.size * fitRatio);
+				innerLabel.font.lineHeight = undefined;
+				innerLabel.font = utils.parseFont(resolve([innerLabel.font, {}], ctx, 0));
+			});
+
+			textAreaSize = utils.textSize(ctx, innerLabels);
 		}
@@ -36,4 +48,2 @@
 		ctx.textBaseline = 'middle';
-		ctx.fillStyle = color;
-		ctx.font = font.string;
 
@@ -48,9 +58,14 @@ // The center of the inner circle
 		var i;
-		var ilen = options.labels.length;
+		var ilen = innerLabels.length;
+		var currentHeight = 0;
 		for (i = 0; i < ilen; ++i) {
+			ctx.fillStyle = innerLabels[i].color;
+			ctx.font = innerLabels[i].font.string;
+
 			// The Y center of each line
-			var lineCenterY = topY + font.lineHeight / 2 + font.lineHeight * i;
+			var lineCenterY = topY + innerLabels[i].font.lineHeight / 2 + currentHeight;
+			currentHeight += innerLabels[i].font.lineHeight;
 
 			// Draw each line of text
-			ctx.fillText(options.labels[i], centerX, lineCenterY);
+			ctx.fillText(innerLabels[i].text, centerX, lineCenterY);
 		}
@@ -57,0 +72,0 @@ }

src/utils.js

@@ -36,13 +36,14 @@ 'use strict';
 
-	textSize: function(ctx, lines, font) {
-		var items = [].concat(lines);
+	textSize: function(ctx, labels) {
+		var items = [].concat(labels);
 		var ilen = items.length;
 		var prev = ctx.font;
 		var width = 0;
+		var height = 0;
 		var i;
 
-		ctx.font = font.string;
-
 		for (i = 0; i < ilen; ++i) {
-			width = Math.max(ctx.measureText(items[i]).width, width);
+			ctx.font = items[i].font.string;
+			width = Math.max(ctx.measureText(items[i].text).width, width);
+			height += items[i].font.lineHeight;
 		}
@@ -53,3 +54,3 @@
 		var result = {
-			height: ilen * font.lineHeight,
+			height: height,
 			width: width
@@ -56,0 +57,0 @@ };

No alert changes

Improved metrics

Number of lines in readme file

93

increased by29.17%

Worsened metrics

Total package byte prevSize

53451

decreased by-5.48%

Number of package files

15

decreased by-6.25%

Lines of code

593

decreased by-11.49%

No dependency changes