From 61d197f915161e7e04c024744f90eec3c54f58e4 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:04:39 +0100
Subject: [PATCH 01/39] Update core.js
---
lib/core.js | 37 +++++++++++++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/lib/core.js b/lib/core.js
index 5334e68..15015a5 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,6 +57,43 @@ module.exports = {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
+ Chart.types.Doughnut.extend({
+ name: "DoughnutTextInside",
+ showTooltip: () => {
+ this.state.chart.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
+ this.state.chart.chart.ctx.restore();
+ },
+ draw: () => {
+
+ Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
+ var width = this.state.chart.chart.width,
+ height = this.state.chart.chart.height;
+
+ var fontSize = (height / 114).toFixed(2);
+ this.state.chart.chart.ctx.fillStyle = '#000';
+ this.state.chart.chart.ctx.font = fontSize + "em Verdana";
+ this.state.chart.chart.ctx.textBaseline = "middle";
+
+ var total = 0;
+ var filled = 0;
+ var clone = arguments[0].data.slice();
+ clone.map((val) => {
+ total = total + val.value;
+ })
+ clone.pop();
+ clone.map((val) => {
+ filled = filled + val.value;
+ })
+
+ var text = Math.round((100 / total) * filled) + "%",
+ textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+ textY = height / 2;
+
+ this.state.chart.chart.ctx.fillText(text, textX, textY);
+ }
+ });
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
From 7d471ff6efbc2a33524c3e65195824d899e67a21 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:34 +0100
Subject: [PATCH 02/39] Create doughnutTextInside.js
---
lib/var-vars-require-./doughnutTextInside.js | 3 +++
1 file changed, 3 insertions(+)
create mode 100644 lib/var-vars-require-./doughnutTextInside.js
diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/var-vars-require-./doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From 246a5fad02bc0b837339401a5eb7fd64650fa1e7 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:56 +0100
Subject: [PATCH 03/39] Create doughnutTextInside.js
---
lib/doughnutTextInside.js | 3 +++
1 file changed, 3 insertions(+)
create mode 100644 lib/doughnutTextInside.js
diff --git a/lib/doughnutTextInside.js b/lib/doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From 8d055e65cd8d0b09835f3a3abe81bdb780da9d2c Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:18 +0100
Subject: [PATCH 04/39] Delete doughnutTextInside.js
---
lib/var-vars-require-./doughnutTextInside.js | 3 ---
1 file changed, 3 deletions(-)
delete mode 100644 lib/var-vars-require-./doughnutTextInside.js
diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
deleted file mode 100644
index 1ea3c0a..0000000
--- a/lib/var-vars-require-./doughnutTextInside.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var vars = require('./core');
-
-module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From 3e934e0484243ab88ef68dfee17547ec4b369af8 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:54 +0100
Subject: [PATCH 05/39] Update index.js
---
index.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/index.js b/index.js
index beaedd0..ad4c48b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
module.exports = {
Bar: require('./lib/bar'),
Doughnut: require('./lib/doughnut'),
+ DoughnutTextInside: require('./lib/doughnutTextInside'),
Line: require('./lib/line'),
Pie: require('./lib/pie'),
PolarArea: require('./lib/polar-area'),
From d9032d7ef9587aed95d6537577e1c9b75539df7d Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:10:09 +0100
Subject: [PATCH 06/39] Update README.md
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index 228485c..51a2ffa 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o
* Polar area chart
* Pie chart
* Doughnut chart
+* Doughnut chart with text inside
[view chart examples](http://jhudson8.github.io/react-chartjs/index.html)
From 0e0f560f8ec130816c675c6b51dc6f89e9356a0f Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 10:21:44 +0100
Subject: [PATCH 07/39] Update core.js
---
lib/core.js | 38 +++++++++++++++++++-------------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 15015a5..fbb73ae 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,42 +57,42 @@ module.exports = {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
- Chart.types.Doughnut.extend({
+Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: () => {
- this.state.chart.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
- this.state.chart.chart.ctx.restore();
+ showTooltip: function() {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
},
- draw: () => {
-
- Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
- var width = this.state.chart.chart.width,
- height = this.state.chart.chart.height;
+ draw: function() {
+ Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ var width = this.chart.width,
+ height = this.chart.height;
var fontSize = (height / 114).toFixed(2);
- this.state.chart.chart.ctx.fillStyle = '#000';
- this.state.chart.chart.ctx.font = fontSize + "em Verdana";
- this.state.chart.chart.ctx.textBaseline = "middle";
+ this.chart.ctx.fillStyle = '#000';
+ this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.textBaseline = "middle";
var total = 0;
var filled = 0;
- var clone = arguments[0].data.slice();
- clone.map((val) => {
+ var clone = this.segments.slice();
+ clone.map(function(val) {
total = total + val.value;
})
clone.pop();
- clone.map((val) => {
+ clone.map(function(val) {
filled = filled + val.value;
})
var text = Math.round((100 / total) * filled) + "%",
- textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+ textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
- this.state.chart.chart.ctx.fillText(text, textX, textY);
+ this.chart.ctx.fillText(text, textX, textY);
}
- });
+ });
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
From 100e762f3dcb4b27ba9494ee4d7da807cb7814ef Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 21:03:12 +0100
Subject: [PATCH 08/39] Update core.js
---
lib/core.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index fbb73ae..789383b 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -142,7 +142,7 @@ var updatePoints = function(nextProps, chart, dataKey) {
}
});
} else {
- while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
nextProps.data.datasets.forEach(function(set, setIndex) {
From 6f7b119458875611645b83a58d801c01f47f763c Mon Sep 17 00:00:00 2001
From: Raymond <rsvvuuren@hotmail.com>
Date: Fri, 5 Feb 2016 00:41:10 +0100
Subject: [PATCH 09/39] Minor fixes
---
dist/react-chartjs.js | 63 +++++++++++++++++++++++++++++-----
lib/core.js | 79 +++++++++++++++++++++++--------------------
2 files changed, 98 insertions(+), 44 deletions(-)
diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index 17f2fd9..861300c 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -57,10 +57,11 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = {
Bar: __webpack_require__(1),
Doughnut: __webpack_require__(6),
- Line: __webpack_require__(7),
- Pie: __webpack_require__(8),
- PolarArea: __webpack_require__(9),
- Radar: __webpack_require__(10),
+ DoughnutTextInside: __webpack_require__(7),
+ Line: __webpack_require__(8),
+ Pie: __webpack_require__(9),
+ PolarArea: __webpack_require__(10),
+ Radar: __webpack_require__(11),
createClass: __webpack_require__(2).createClass
};
@@ -137,6 +138,43 @@ return /******/ (function(modules) { // webpackBootstrap
var Chart = __webpack_require__(5);
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
+ Chart.types.Doughnut.extend({
+ name: "DoughnutTextInside",
+ showTooltip: function() {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
+ },
+ draw: function() {
+ Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ var width = this.chart.width,
+ height = this.chart.height;
+
+ var fontSize = (height / 114).toFixed(2);
+ this.chart.ctx.fillStyle = '#000';
+ this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.textBaseline = "middle";
+
+ var total = 0;
+ var filled = 0;
+ var clone = this.segments.slice();
+ clone.map(function(val) {
+ total = total + val.value;
+ })
+ clone.pop();
+ clone.map(function(val) {
+ filled = filled + val.value;
+ })
+
+ var text = Math.round((100 / total) * filled) + "%",
+ textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+ textY = height / 2;
+
+ this.chart.ctx.fillText(text, textX, textY);
+ }
+ });
+
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
@@ -185,7 +223,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
});
} else {
- while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
nextProps.data.datasets.forEach(function(set, setIndex) {
@@ -242,7 +280,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('Line', ['getPointsAtEvent']);
+ module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
/***/ },
@@ -251,7 +289,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
+ module.exports = vars.createClass('Line', ['getPointsAtEvent']);
/***/ },
@@ -260,7 +298,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+ module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
/***/ },
@@ -269,6 +307,15 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
+ module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var vars = __webpack_require__(2);
+
module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
diff --git a/lib/core.js b/lib/core.js
index 789383b..6de548e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -2,11 +2,13 @@ var React = require('react');
var ReactDOM = require('react-dom');
module.exports = {
- createClass: function(chartType, methodNames, dataKey) {
+ createClass: function (chartType, methodNames, dataKey) {
var classData = {
displayName: chartType + 'Chart',
- getInitialState: function() { return {}; },
- render: function() {
+ getInitialState: function () {
+ return {};
+ },
+ render: function () {
var _props = {
ref: 'canvass'
};
@@ -22,22 +24,23 @@ module.exports = {
};
var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+
function extra(type) {
- classData[type] = function() {
+ classData[type] = function () {
return this.state.chart[type].apply(this.state.chart, arguments);
};
}
- classData.componentDidMount = function() {
+ classData.componentDidMount = function () {
this.initializeChart(this.props);
};
- classData.componentWillUnmount = function() {
+ classData.componentWillUnmount = function () {
var chart = this.state.chart;
chart.destroy();
};
- classData.componentWillReceiveProps = function(nextProps) {
+ classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart;
if (nextProps.redraw) {
chart.destroy();
@@ -53,19 +56,19 @@ module.exports = {
}
};
- classData.initializeChart = function(nextProps) {
+ classData.initializeChart = function (nextProps) {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
-Chart.types.Doughnut.extend({
+ Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: function() {
+ showTooltip: function () {
this.chart.ctx.save();
Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
this.chart.ctx.restore();
},
- draw: function() {
- Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ draw: function () {
+ Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
var width = this.chart.width,
height = this.chart.height;
@@ -77,44 +80,44 @@ Chart.types.Doughnut.extend({
var total = 0;
var filled = 0;
var clone = this.segments.slice();
- clone.map(function(val) {
+ clone.map(function (val) {
total = total + val.value;
})
clone.pop();
- clone.map(function(val) {
+ clone.map(function (val) {
filled = filled + val.value;
})
- var text = Math.round((100 / total) * filled) + "%",
- textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+ var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+ var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
this.chart.ctx.fillText(text, textX, textY);
}
});
-
-
+
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
// return the chartjs instance
- classData.getChart = function() {
+ classData.getChart = function () {
return this.state.chart;
};
// return the canvass element that contains the chart
- classData.getCanvass = function() {
+ classData.getCanvass = function () {
return this.refs.canvass;
};
classData.getCanvas = classData.getCanvass;
var i;
- for (i=0; i<extras.length; i++) {
+ for (i = 0; i < extras.length; i++) {
extra(extras[i]);
}
- for (i=0; i<methodNames.length; i++) {
+ for (i = 0; i < methodNames.length; i++) {
extra(methodNames[i]);
}
@@ -128,11 +131,11 @@ var dataKeys = {
'Bar': 'bars'
};
-var updatePoints = function(nextProps, chart, dataKey) {
+var updatePoints = function (nextProps, chart, dataKey) {
var name = chart.name;
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
- nextProps.data.forEach(function(segment, segmentIndex) {
+ nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
} else {
@@ -142,24 +145,28 @@ var updatePoints = function(nextProps, chart, dataKey) {
}
});
} else {
- while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
- chart.removeData();
+ if (chart.scale) {
+ while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ chart.removeData();
+ }
}
- nextProps.data.datasets.forEach(function(set, setIndex) {
- set.data.forEach(function(val, pointIndex) {
- if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
- addData(nextProps, chart, setIndex, pointIndex);
- } else {
- chart.datasets[setIndex][dataKey][pointIndex].value = val;
- }
+ if (nextProps.data && nextProps.data.datasets) {
+ nextProps.data.datasets.forEach(function (set, setIndex) {
+ set.data.forEach(function (val, pointIndex) {
+ if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+ addData(nextProps, chart, setIndex, pointIndex);
+ } else {
+ chart.datasets[setIndex][dataKey][pointIndex].value = val;
+ }
+ });
});
- });
+ }
}
};
-var addData = function(nextProps, chart, setIndex, pointIndex) {
+var addData = function (nextProps, chart, setIndex, pointIndex) {
var values = [];
- nextProps.data.datasets.forEach(function(set) {
+ nextProps.data.datasets.forEach(function (set) {
values.push(set.data[pointIndex]);
});
chart.addData(values, nextProps.data.labels[setIndex]);
From c2a15175f830dd9d12588704789dac6e30294490 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 16:25:25 -0600
Subject: [PATCH 10/39] Modified update function and added labelScale to chart
options for the DoughnutWithTextInside component
---
lib/core.js | 29 +++++++++++------------------
1 file changed, 11 insertions(+), 18 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 6de548e..ee0000c 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,20 +40,10 @@ module.exports = {
chart.destroy();
};
- classData.componentWillReceiveProps = function (nextProps) {
+ classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
- if (nextProps.redraw) {
- chart.destroy();
- this.initializeChart(nextProps);
- } else {
- dataKey = dataKey || dataKeys[chart.name];
- updatePoints(nextProps, chart, dataKey);
- if (chart.scale) {
- chart.scale.xLabels = nextProps.data.labels;
- chart.scale.calculateXLabelRotation();
- }
- chart.update();
- }
+ chart.data = nextProps.data;
+ chart.update();
};
classData.initializeChart = function (nextProps) {
@@ -62,17 +52,20 @@ module.exports = {
var ctx = el.getContext("2d");
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: function () {
- this.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- this.chart.ctx.restore();
+ // showTooltip: function () {
+ // this.chart.ctx.save();
+ // Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ // this.chart.ctx.restore();
+ // },
+ defaults: {
+ labelScale: 100
},
draw: function () {
Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
var width = this.chart.width,
height = this.chart.height;
- var fontSize = (height / 114).toFixed(2);
+ var fontSize = (height / this.options.labelScale).toFixed(2);
this.chart.ctx.fillStyle = '#000';
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
From a76cf64fbb64b331c52b8e2fedd9dba4bc4c3f6f Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:01:43 -0600
Subject: [PATCH 11/39] Working towards changing the font size
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index ee0000c..b3fdc03 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
var width = this.chart.width,
height = this.chart.height;
- var fontSize = (height / this.options.labelScale).toFixed(2);
+ //var fontSize = height.toFixed(2);
this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.font = "1em 'Open Sans'";
this.chart.ctx.textBaseline = "middle";
var total = 0;
From 5ac0501c8dfa001a63028555592f0164d65977d4 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:05:30 -0600
Subject: [PATCH 12/39] testing
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index b3fdc03..0aef609 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
var width = this.chart.width,
height = this.chart.height;
- //var fontSize = height.toFixed(2);
+ var fontSize = (height / this.options.labelScale).toFixed(2);
this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = "1em 'Open Sans'";
+ this.chart.ctx.font = fontSize + "em 'Open Sans'";
this.chart.ctx.textBaseline = "middle";
var total = 0;
From a5857156450994d23c7883c5cb171973dfa69483 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 18:42:15 -0600
Subject: [PATCH 13/39] updating
---
lib/core.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 0aef609..468b204 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -52,11 +52,11 @@ module.exports = {
var ctx = el.getContext("2d");
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- // showTooltip: function () {
- // this.chart.ctx.save();
- // Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- // this.chart.ctx.restore();
- // },
+ showTooltip: function () {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
+ },
defaults: {
labelScale: 100
},
From 03fd79eb65b238ff7a883c1240f0eb7140d9f5c1 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 20:09:44 -0600
Subject: [PATCH 14/39] looking into animation fix
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 468b204..ad89138 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,7 +40,7 @@ module.exports = {
chart.destroy();
};
- classData.componentWillReceiveProps = function(nextProps) {
+ classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
chart.data = nextProps.data;
chart.update();
@@ -127,7 +127,7 @@ var dataKeys = {
var updatePoints = function (nextProps, chart, dataKey) {
var name = chart.name;
- if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+ if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
From d491ddf88262b15861f5c44f8fbee749b46cfb06 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 21:21:05 -0600
Subject: [PATCH 15/39] modifying core.js
---
lib/core.js | 161 +++++++++++++++++++++++++++-------------------------
1 file changed, 85 insertions(+), 76 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index ad89138..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -1,166 +1,175 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
+var React = require('react')
+var ReactDOM = require('react-dom')
module.exports = {
createClass: function (chartType, methodNames, dataKey) {
var classData = {
displayName: chartType + 'Chart',
getInitialState: function () {
- return {};
+ return {}
},
render: function () {
var _props = {
ref: 'canvass'
- };
+ }
for (var name in this.props) {
if (this.props.hasOwnProperty(name)) {
if (name !== 'data' && name !== 'options') {
- _props[name] = this.props[name];
+ _props[name] = this.props[name]
}
}
}
- return React.createElement('canvas', _props);
+ return React.createElement('canvas', _props)
}
- };
+ }
- var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+ var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData']
- function extra(type) {
+ function extra (type) {
classData[type] = function () {
- return this.state.chart[type].apply(this.state.chart, arguments);
- };
+ return this.state.chart[type].apply(this.state.chart, arguments)
+ }
}
classData.componentDidMount = function () {
- this.initializeChart(this.props);
- };
+ this.initializeChart(this.props)
+ }
classData.componentWillUnmount = function () {
- var chart = this.state.chart;
- chart.destroy();
- };
+ var chart = this.state.chart
+ chart.destroy()
+ }
- classData.componentWillReceiveProps = function(nextProps) {
- var chart = this.state.chart;
- chart.data = nextProps.data;
- chart.update();
- };
+ classData.componentWillReceiveProps = function (nextProps) {
+ var chart = this.state.chart
+ if (nextProps.redraw) {
+ chart.destroy()
+ this.initializeChart(nextProps)
+ } else {
+ dataKey = dataKey || dataKeys[chart.name]
+ updatePoints(nextProps, chart, dataKey)
+ if (chart.scale) {
+ chart.scale.xLabels = nextProps.data.labels
+ chart.scale.calculateXLabelRotation()
+ }
+ chart.update()
+ }
+ }
classData.initializeChart = function (nextProps) {
- var Chart = require('chart.js');
- var el = ReactDOM.findDOMNode(this);
- var ctx = el.getContext("2d");
+ var Chart = require('chart.js')
+ var el = ReactDOM.findDOMNode(this)
+ var ctx = el.getContext('2d')
Chart.types.Doughnut.extend({
- name: "DoughnutTextInside",
+ name: 'DoughnutTextInside',
showTooltip: function () {
- this.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- this.chart.ctx.restore();
+ this.chart.ctx.save()
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments)
+ this.chart.ctx.restore()
},
defaults: {
labelScale: 100
},
draw: function () {
- Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
+ Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
var width = this.chart.width,
- height = this.chart.height;
+ height = this.chart.height
- var fontSize = (height / this.options.labelScale).toFixed(2);
- this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = fontSize + "em 'Open Sans'";
- this.chart.ctx.textBaseline = "middle";
+ var fontSize = (height / this.options.labelScale).toFixed(2)
+ this.chart.ctx.fillStyle = '#000'
+ this.chart.ctx.font = fontSize + "em 'Open Sans'"
+ this.chart.ctx.textBaseline = 'middle'
- var total = 0;
- var filled = 0;
- var clone = this.segments.slice();
+ var total = 0
+ var filled = 0
+ var clone = this.segments.slice()
clone.map(function (val) {
- total = total + val.value;
+ total = total + val.value
})
- clone.pop();
+ clone.pop()
clone.map(function (val) {
- filled = filled + val.value;
+ filled = filled + val.value
})
- var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+ var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
- textY = height / 2;
+ textY = height / 2
- this.chart.ctx.fillText(text, textX, textY);
+ this.chart.ctx.fillText(text, textX, textY)
}
- });
-
+ })
- var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
- this.state.chart = chart;
- };
+ var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {})
+ this.state.chart = chart
+ }
// return the chartjs instance
classData.getChart = function () {
- return this.state.chart;
- };
+ return this.state.chart
+ }
// return the canvass element that contains the chart
classData.getCanvass = function () {
- return this.refs.canvass;
- };
+ return this.refs.canvass
+ }
- classData.getCanvas = classData.getCanvass;
+ classData.getCanvas = classData.getCanvass
- var i;
+ var i
for (i = 0; i < extras.length; i++) {
- extra(extras[i]);
+ extra(extras[i])
}
for (i = 0; i < methodNames.length; i++) {
- extra(methodNames[i]);
+ extra(methodNames[i])
}
- return React.createClass(classData);
+ return React.createClass(classData)
}
-};
+}
var dataKeys = {
'Line': 'points',
'Radar': 'points',
'Bar': 'bars'
-};
+}
var updatePoints = function (nextProps, chart, dataKey) {
- var name = chart.name;
+ var name = chart.name
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
- chart.addData(segment);
+ chart.addData(segment)
} else {
Object.keys(segment).forEach(function (key) {
- chart.segments[segmentIndex][key] = segment[key];
- });
+ chart.segments[segmentIndex][key] = segment[key]
+ })
}
- });
+ })
} else {
if (chart.scale) {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
- chart.removeData();
+ chart.removeData()
}
}
if (nextProps.data && nextProps.data.datasets) {
nextProps.data.datasets.forEach(function (set, setIndex) {
set.data.forEach(function (val, pointIndex) {
- if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
- addData(nextProps, chart, setIndex, pointIndex);
+ if (typeof (chart.datasets[setIndex][dataKey][pointIndex]) == 'undefined') {
+ addData(nextProps, chart, setIndex, pointIndex)
} else {
- chart.datasets[setIndex][dataKey][pointIndex].value = val;
+ chart.datasets[setIndex][dataKey][pointIndex].value = val
}
- });
- });
+ })
+ })
}
}
-};
+}
var addData = function (nextProps, chart, setIndex, pointIndex) {
- var values = [];
+ var values = []
nextProps.data.datasets.forEach(function (set) {
- values.push(set.data[pointIndex]);
- });
- chart.addData(values, nextProps.data.labels[setIndex]);
-};
+ values.push(set.data[pointIndex])
+ })
+ chart.addData(values, nextProps.data.labels[setIndex])
+}
From cf57c5fd54cb570fc0c20df740cd002ad81216e7 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:39:03 -0600
Subject: [PATCH 16/39] testing
---
lib/core.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index ea64d05..fecbd93 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,7 +39,10 @@ module.exports = {
var chart = this.state.chart
chart.destroy()
}
-
+ classData.componentDidUpdate = function () {
+ var chart = this.state.chart
+ chart.update()
+ }
classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart
if (nextProps.redraw) {
From 0d95f33640aa6f949722dd33cab6d82198f526e7 Mon Sep 17 00:00:00 2001
From: MalachiM <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:43:46 -0600
Subject: [PATCH 17/39] Revert "testing"
---
lib/core.js | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index fecbd93..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,10 +39,7 @@ module.exports = {
var chart = this.state.chart
chart.destroy()
}
- classData.componentDidUpdate = function () {
- var chart = this.state.chart
- chart.update()
- }
+
classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart
if (nextProps.redraw) {
From a8f6e57f8ef6639f46bdd381a1995bb0d3c4d8f0 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 10:52:10 -0600
Subject: [PATCH 18/39] updating the draw function
---
lib/core.js | 12 ++++--------
1 file changed, 4 insertions(+), 8 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index ea64d05..40416c8 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -80,16 +80,12 @@ module.exports = {
this.chart.ctx.font = fontSize + "em 'Open Sans'"
this.chart.ctx.textBaseline = 'middle'
- var total = 0
- var filled = 0
+ var total = this.total
var clone = this.segments.slice()
- clone.map(function (val) {
- total = total + val.value
- })
clone.pop()
- clone.map(function (val) {
- filled = filled + val.value
- })
+ var filled = clone.reduce(function (a, val) {
+ return a + val.value
+ }, 0)
var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
From f4d2cef0a6aaba33b67ccbc5d448621b667cada9 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 11:04:01 -0600
Subject: [PATCH 19/39] updating draw function's apply call
---
lib/core.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index 40416c8..6c68f0e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -71,7 +71,7 @@ module.exports = {
labelScale: 100
},
draw: function () {
- Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
+ Chart.types.Doughnut.prototype.draw.apply(this, arguments)
var width = this.chart.width,
height = this.chart.height
From b19eee8f9bced9d16166ea926ccbbdd4a77b5811 Mon Sep 17 00:00:00 2001
From: John Crowe <thecrow1213@gmail.com>
Date: Sun, 20 Mar 2016 15:08:08 -0500
Subject: [PATCH 20/39] Fixing update function, removes old segments on update.
---
dist/react-chartjs.js | 4 ++++
dist/react-chartjs.min.js | 2 +-
lib/core.js | 4 ++++
3 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index 17f2fd9..db0b58b 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -184,6 +184,10 @@ return /******/ (function(modules) { // webpackBootstrap
});
}
});
+
+ while(nextProps.data.length < chart.segments.length) {
+ chart.removeData();
+ }
} else {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js
index 3051eff..d3a77fc 100644
--- a/dist/react-chartjs.min.js
+++ b/dist/react-chartjs.min.js
@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;l<f.length;l++)c(f[l]);for(l=0;l<e.length;l++)c(e[l]);return r.createClass(u)}};var s={Line:"points",Radar:"points",Bar:"bars"},o=function(t,e,a){var r=e.name;if("PolarArea"===r||"Pie"===r||"Doughnut"===r)t.data.forEach(function(t,a){e.segments[a]?Object.keys(t).forEach(function(r){e.segments[a][r]=t[r]}):e.addData(t)});else{for(;e.scale.xLabels.length>t.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react"),require("react-dom"),require("Chartjs")):"function"==typeof define&&define.amd?define(["react","react-dom","Chartjs"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("react"),require("react-dom"),require("Chartjs")):t["react-chartjs"]=e(t.React,t.ReactDOM,t.Chart)}(this,function(t,e,a){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(6),Line:a(7),Pie:a(8),PolarArea:a(9),Radar:a(10),createClass:a(2).createClass}},function(t,e,a){var r=a(2);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(3),n=a(4);t.exports={createClass:function(t,e,i){function c(t){u[t]=function(){return this.state.chart[t].apply(this.state.chart,arguments)}}var u={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return r.createElement("canvas",t)}},f=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];u.componentDidMount=function(){this.initializeChart(this.props)},u.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},u.componentWillReceiveProps=function(t){var e=this.state.chart;t.redraw?(e.destroy(),this.initializeChart(t)):(i=i||s[e.name],o(t,e,i),e.scale&&(e.scale.xLabels=t.data.labels,e.scale.calculateXLabelRotation()),e.update())},u.initializeChart=function(e){var r=a(5),s=n.findDOMNode(this),o=s.getContext("2d"),i=new r(o)[t](e.data,e.options||{});this.state.chart=i},u.getChart=function(){return this.state.chart},u.getCanvass=function(){return this.refs.canvass},u.getCanvas=u.getCanvass;var l;for(l=0;l<f.length;l++)c(f[l]);for(l=0;l<e.length;l++)c(e[l]);return r.createClass(u)}};var s={Line:"points",Radar:"points",Bar:"bars"},o=function(t,e,a){var r=e.name;if("PolarArea"===r||"Pie"===r||"Doughnut"===r)for(t.data.forEach(function(t,a){e.segments[a]?Object.keys(t).forEach(function(r){e.segments[a][r]=t[r]}):e.addData(t)});t.data.length<e.segments.length;)e.removeData();else{for(;e.scale.xLabels.length>t.data.labels.length;)e.removeData();t.data.datasets.forEach(function(r,n){r.data.forEach(function(r,s){"undefined"==typeof e.datasets[n][a][s]?i(t,e,n,s):e.datasets[n][a][s].value=r})})}},i=function(t,e,a,r){var n=[];t.data.datasets.forEach(function(t){n.push(t.data[r])}),e.addData(n,t.data.labels[a])}},function(e,a){e.exports=t},function(t,a){t.exports=e},function(t,e){t.exports=a},function(t,e,a){var r=a(2);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(2);t.exports=r.createClass("Radar",["getPointsAtEvent"])}])});
\ No newline at end of file
diff --git a/lib/core.js b/lib/core.js
index 5334e68..9ef0bce 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -104,6 +104,10 @@ var updatePoints = function(nextProps, chart, dataKey) {
});
}
});
+
+ while(nextProps.data.length < chart.segments.length) {
+ chart.removeData();
+ }
} else {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
From a0e8895758920523f728c6234f9e50b25e5e84b3 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:04:39 +0100
Subject: [PATCH 21/39] Update core.js
---
lib/core.js | 37 +++++++++++++++++++++++++++++++++++++
1 file changed, 37 insertions(+)
diff --git a/lib/core.js b/lib/core.js
index 9ef0bce..b0ebcd0 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,6 +57,43 @@ module.exports = {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
+ Chart.types.Doughnut.extend({
+ name: "DoughnutTextInside",
+ showTooltip: () => {
+ this.state.chart.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
+ this.state.chart.chart.ctx.restore();
+ },
+ draw: () => {
+
+ Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
+ var width = this.state.chart.chart.width,
+ height = this.state.chart.chart.height;
+
+ var fontSize = (height / 114).toFixed(2);
+ this.state.chart.chart.ctx.fillStyle = '#000';
+ this.state.chart.chart.ctx.font = fontSize + "em Verdana";
+ this.state.chart.chart.ctx.textBaseline = "middle";
+
+ var total = 0;
+ var filled = 0;
+ var clone = arguments[0].data.slice();
+ clone.map((val) => {
+ total = total + val.value;
+ })
+ clone.pop();
+ clone.map((val) => {
+ filled = filled + val.value;
+ })
+
+ var text = Math.round((100 / total) * filled) + "%",
+ textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+ textY = height / 2;
+
+ this.state.chart.chart.ctx.fillText(text, textX, textY);
+ }
+ });
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
From 3df5d0e984677d53d4477a663c54d4023b6ca00c Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:34 +0100
Subject: [PATCH 22/39] Create doughnutTextInside.js
---
lib/var-vars-require-./doughnutTextInside.js | 3 +++
1 file changed, 3 insertions(+)
create mode 100644 lib/var-vars-require-./doughnutTextInside.js
diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/var-vars-require-./doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From 31ad743cc807bb9564fb38d6fb521fe3f5548560 Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:05:56 +0100
Subject: [PATCH 23/39] Create doughnutTextInside.js
---
lib/doughnutTextInside.js | 3 +++
1 file changed, 3 insertions(+)
create mode 100644 lib/doughnutTextInside.js
diff --git a/lib/doughnutTextInside.js b/lib/doughnutTextInside.js
new file mode 100644
index 0000000..1ea3c0a
--- /dev/null
+++ b/lib/doughnutTextInside.js
@@ -0,0 +1,3 @@
+var vars = require('./core');
+
+module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From b9260dc534ed9b2592c39e5be5f240e8b7e581bf Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:18 +0100
Subject: [PATCH 24/39] Delete doughnutTextInside.js
---
lib/var-vars-require-./doughnutTextInside.js | 3 ---
1 file changed, 3 deletions(-)
delete mode 100644 lib/var-vars-require-./doughnutTextInside.js
diff --git a/lib/var-vars-require-./doughnutTextInside.js b/lib/var-vars-require-./doughnutTextInside.js
deleted file mode 100644
index 1ea3c0a..0000000
--- a/lib/var-vars-require-./doughnutTextInside.js
+++ /dev/null
@@ -1,3 +0,0 @@
-var vars = require('./core');
-
-module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
From 7dceb8332f442e27f2f27a0fe8c997b5bbca225b Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:06:54 +0100
Subject: [PATCH 25/39] Update index.js
---
index.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/index.js b/index.js
index beaedd0..ad4c48b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
module.exports = {
Bar: require('./lib/bar'),
Doughnut: require('./lib/doughnut'),
+ DoughnutTextInside: require('./lib/doughnutTextInside'),
Line: require('./lib/line'),
Pie: require('./lib/pie'),
PolarArea: require('./lib/polar-area'),
From 8d860fda13e4fbbbf709040d1bbe5ea80d815f5b Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 00:10:09 +0100
Subject: [PATCH 26/39] Update README.md
---
README.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/README.md b/README.md
index 228485c..51a2ffa 100644
--- a/README.md
+++ b/README.md
@@ -9,6 +9,7 @@ rich interactive react charting components using [chart.js](http://www.chartjs.o
* Polar area chart
* Pie chart
* Doughnut chart
+* Doughnut chart with text inside
[view chart examples](http://jhudson8.github.io/react-chartjs/index.html)
From e80813541e5164e58f44c3d73c7360bc829bfada Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 10:21:44 +0100
Subject: [PATCH 27/39] Update core.js
---
lib/core.js | 38 +++++++++++++++++++-------------------
1 file changed, 19 insertions(+), 19 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index b0ebcd0..f420b71 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -57,42 +57,42 @@ module.exports = {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
- Chart.types.Doughnut.extend({
+Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: () => {
- this.state.chart.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this.state.chart, arguments);
- this.state.chart.chart.ctx.restore();
+ showTooltip: function() {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
},
- draw: () => {
-
- Chart.types.Doughnut.prototype.draw.apply(this.state.chart,chart, arguments);
- var width = this.state.chart.chart.width,
- height = this.state.chart.chart.height;
+ draw: function() {
+ Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ var width = this.chart.width,
+ height = this.chart.height;
var fontSize = (height / 114).toFixed(2);
- this.state.chart.chart.ctx.fillStyle = '#000';
- this.state.chart.chart.ctx.font = fontSize + "em Verdana";
- this.state.chart.chart.ctx.textBaseline = "middle";
+ this.chart.ctx.fillStyle = '#000';
+ this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.textBaseline = "middle";
var total = 0;
var filled = 0;
- var clone = arguments[0].data.slice();
- clone.map((val) => {
+ var clone = this.segments.slice();
+ clone.map(function(val) {
total = total + val.value;
})
clone.pop();
- clone.map((val) => {
+ clone.map(function(val) {
filled = filled + val.value;
})
var text = Math.round((100 / total) * filled) + "%",
- textX = Math.round((width - this.state.chart.chart.ctx.measureText(text).width) / 2),
+ textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
- this.state.chart.chart.ctx.fillText(text, textX, textY);
+ this.chart.ctx.fillText(text, textX, textY);
}
- });
+ });
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
From b85abeb32ab6d276b05f3834cd07059d37c9a9ea Mon Sep 17 00:00:00 2001
From: lemonCMS <rsvvuuren@hotmail.com>
Date: Thu, 4 Feb 2016 21:03:12 +0100
Subject: [PATCH 28/39] Update core.js
---
lib/core.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index f420b71..f871cd9 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -146,7 +146,7 @@ var updatePoints = function(nextProps, chart, dataKey) {
chart.removeData();
}
} else {
- while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
nextProps.data.datasets.forEach(function(set, setIndex) {
From 6eb1a638e6dea5464dbf2ff892582e740cae88f2 Mon Sep 17 00:00:00 2001
From: Raymond <rsvvuuren@hotmail.com>
Date: Fri, 5 Feb 2016 00:41:10 +0100
Subject: [PATCH 29/39] Minor fixes
---
dist/react-chartjs.js | 63 +++++++++++++++++++++++++++++-----
lib/core.js | 79 +++++++++++++++++++++++--------------------
2 files changed, 98 insertions(+), 44 deletions(-)
diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
index db0b58b..69561d1 100644
--- a/dist/react-chartjs.js
+++ b/dist/react-chartjs.js
@@ -57,10 +57,11 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = {
Bar: __webpack_require__(1),
Doughnut: __webpack_require__(6),
- Line: __webpack_require__(7),
- Pie: __webpack_require__(8),
- PolarArea: __webpack_require__(9),
- Radar: __webpack_require__(10),
+ DoughnutTextInside: __webpack_require__(7),
+ Line: __webpack_require__(8),
+ Pie: __webpack_require__(9),
+ PolarArea: __webpack_require__(10),
+ Radar: __webpack_require__(11),
createClass: __webpack_require__(2).createClass
};
@@ -137,6 +138,43 @@ return /******/ (function(modules) { // webpackBootstrap
var Chart = __webpack_require__(5);
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
+ Chart.types.Doughnut.extend({
+ name: "DoughnutTextInside",
+ showTooltip: function() {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
+ },
+ draw: function() {
+ Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ var width = this.chart.width,
+ height = this.chart.height;
+
+ var fontSize = (height / 114).toFixed(2);
+ this.chart.ctx.fillStyle = '#000';
+ this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.textBaseline = "middle";
+
+ var total = 0;
+ var filled = 0;
+ var clone = this.segments.slice();
+ clone.map(function(val) {
+ total = total + val.value;
+ })
+ clone.pop();
+ clone.map(function(val) {
+ filled = filled + val.value;
+ })
+
+ var text = Math.round((100 / total) * filled) + "%",
+ textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+ textY = height / 2;
+
+ this.chart.ctx.fillText(text, textX, textY);
+ }
+ });
+
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
@@ -189,7 +227,7 @@ return /******/ (function(modules) { // webpackBootstrap
chart.removeData();
}
} else {
- while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
chart.removeData();
}
nextProps.data.datasets.forEach(function(set, setIndex) {
@@ -246,7 +284,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('Line', ['getPointsAtEvent']);
+ module.exports = vars.createClass('DoughnutTextInside', ['getSegmentsAtEvent']);
/***/ },
@@ -255,7 +293,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
+ module.exports = vars.createClass('Line', ['getPointsAtEvent']);
/***/ },
@@ -264,7 +302,7 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
- module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+ module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
/***/ },
@@ -273,6 +311,15 @@ return /******/ (function(modules) { // webpackBootstrap
var vars = __webpack_require__(2);
+ module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 11 */
+/***/ function(module, exports, __webpack_require__) {
+
+ var vars = __webpack_require__(2);
+
module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
diff --git a/lib/core.js b/lib/core.js
index f871cd9..b567771 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -2,11 +2,13 @@ var React = require('react');
var ReactDOM = require('react-dom');
module.exports = {
- createClass: function(chartType, methodNames, dataKey) {
+ createClass: function (chartType, methodNames, dataKey) {
var classData = {
displayName: chartType + 'Chart',
- getInitialState: function() { return {}; },
- render: function() {
+ getInitialState: function () {
+ return {};
+ },
+ render: function () {
var _props = {
ref: 'canvass'
};
@@ -22,22 +24,23 @@ module.exports = {
};
var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+
function extra(type) {
- classData[type] = function() {
+ classData[type] = function () {
return this.state.chart[type].apply(this.state.chart, arguments);
};
}
- classData.componentDidMount = function() {
+ classData.componentDidMount = function () {
this.initializeChart(this.props);
};
- classData.componentWillUnmount = function() {
+ classData.componentWillUnmount = function () {
var chart = this.state.chart;
chart.destroy();
};
- classData.componentWillReceiveProps = function(nextProps) {
+ classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart;
if (nextProps.redraw) {
chart.destroy();
@@ -53,19 +56,19 @@ module.exports = {
}
};
- classData.initializeChart = function(nextProps) {
+ classData.initializeChart = function (nextProps) {
var Chart = require('chart.js');
var el = ReactDOM.findDOMNode(this);
var ctx = el.getContext("2d");
-Chart.types.Doughnut.extend({
+ Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: function() {
+ showTooltip: function () {
this.chart.ctx.save();
Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
this.chart.ctx.restore();
},
- draw: function() {
- Chart.types.Doughnut.prototype.draw.apply(this,chart, arguments);
+ draw: function () {
+ Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
var width = this.chart.width,
height = this.chart.height;
@@ -77,44 +80,44 @@ Chart.types.Doughnut.extend({
var total = 0;
var filled = 0;
var clone = this.segments.slice();
- clone.map(function(val) {
+ clone.map(function (val) {
total = total + val.value;
})
clone.pop();
- clone.map(function(val) {
+ clone.map(function (val) {
filled = filled + val.value;
})
- var text = Math.round((100 / total) * filled) + "%",
- textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
+ var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+ var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
textY = height / 2;
this.chart.ctx.fillText(text, textX, textY);
}
});
-
-
+
+
var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
this.state.chart = chart;
};
// return the chartjs instance
- classData.getChart = function() {
+ classData.getChart = function () {
return this.state.chart;
};
// return the canvass element that contains the chart
- classData.getCanvass = function() {
+ classData.getCanvass = function () {
return this.refs.canvass;
};
classData.getCanvas = classData.getCanvass;
var i;
- for (i=0; i<extras.length; i++) {
+ for (i = 0; i < extras.length; i++) {
extra(extras[i]);
}
- for (i=0; i<methodNames.length; i++) {
+ for (i = 0; i < methodNames.length; i++) {
extra(methodNames[i]);
}
@@ -128,11 +131,11 @@ var dataKeys = {
'Bar': 'bars'
};
-var updatePoints = function(nextProps, chart, dataKey) {
+var updatePoints = function (nextProps, chart, dataKey) {
var name = chart.name;
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
- nextProps.data.forEach(function(segment, segmentIndex) {
+ nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
} else {
@@ -146,24 +149,28 @@ var updatePoints = function(nextProps, chart, dataKey) {
chart.removeData();
}
} else {
- while (chart.scale && chart.scale.xLabels.length > nextProps.data.labels.length) {
- chart.removeData();
+ if (chart.scale) {
+ while (chart.scale.xLabels.length > nextProps.data.labels.length) {
+ chart.removeData();
+ }
}
- nextProps.data.datasets.forEach(function(set, setIndex) {
- set.data.forEach(function(val, pointIndex) {
- if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
- addData(nextProps, chart, setIndex, pointIndex);
- } else {
- chart.datasets[setIndex][dataKey][pointIndex].value = val;
- }
+ if (nextProps.data && nextProps.data.datasets) {
+ nextProps.data.datasets.forEach(function (set, setIndex) {
+ set.data.forEach(function (val, pointIndex) {
+ if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
+ addData(nextProps, chart, setIndex, pointIndex);
+ } else {
+ chart.datasets[setIndex][dataKey][pointIndex].value = val;
+ }
+ });
});
- });
+ }
}
};
-var addData = function(nextProps, chart, setIndex, pointIndex) {
+var addData = function (nextProps, chart, setIndex, pointIndex) {
var values = [];
- nextProps.data.datasets.forEach(function(set) {
+ nextProps.data.datasets.forEach(function (set) {
values.push(set.data[pointIndex]);
});
chart.addData(values, nextProps.data.labels[setIndex]);
From d002f2f97a8d8c658fd981ddadb36dbae3522720 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 16:25:25 -0600
Subject: [PATCH 30/39] Modified update function and added labelScale to chart
options for the DoughnutWithTextInside component
---
lib/core.js | 29 +++++++++++------------------
1 file changed, 11 insertions(+), 18 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index b567771..6a90cbe 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,20 +40,10 @@ module.exports = {
chart.destroy();
};
- classData.componentWillReceiveProps = function (nextProps) {
+ classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
- if (nextProps.redraw) {
- chart.destroy();
- this.initializeChart(nextProps);
- } else {
- dataKey = dataKey || dataKeys[chart.name];
- updatePoints(nextProps, chart, dataKey);
- if (chart.scale) {
- chart.scale.xLabels = nextProps.data.labels;
- chart.scale.calculateXLabelRotation();
- }
- chart.update();
- }
+ chart.data = nextProps.data;
+ chart.update();
};
classData.initializeChart = function (nextProps) {
@@ -62,17 +52,20 @@ module.exports = {
var ctx = el.getContext("2d");
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- showTooltip: function () {
- this.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- this.chart.ctx.restore();
+ // showTooltip: function () {
+ // this.chart.ctx.save();
+ // Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ // this.chart.ctx.restore();
+ // },
+ defaults: {
+ labelScale: 100
},
draw: function () {
Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
var width = this.chart.width,
height = this.chart.height;
- var fontSize = (height / 114).toFixed(2);
+ var fontSize = (height / this.options.labelScale).toFixed(2);
this.chart.ctx.fillStyle = '#000';
this.chart.ctx.font = fontSize + "em Verdana";
this.chart.ctx.textBaseline = "middle";
From 6021af9e26f141e9d08e123a8d73b5a0d6a8ec51 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:01:43 -0600
Subject: [PATCH 31/39] Working towards changing the font size
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 6a90cbe..128498f 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
var width = this.chart.width,
height = this.chart.height;
- var fontSize = (height / this.options.labelScale).toFixed(2);
+ //var fontSize = height.toFixed(2);
this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = fontSize + "em Verdana";
+ this.chart.ctx.font = "1em 'Open Sans'";
this.chart.ctx.textBaseline = "middle";
var total = 0;
From 5732f9a9b4f18c912353c0410688069deafedaa6 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 17:05:30 -0600
Subject: [PATCH 32/39] testing
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 128498f..1b4129e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -65,9 +65,9 @@ module.exports = {
var width = this.chart.width,
height = this.chart.height;
- //var fontSize = height.toFixed(2);
+ var fontSize = (height / this.options.labelScale).toFixed(2);
this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = "1em 'Open Sans'";
+ this.chart.ctx.font = fontSize + "em 'Open Sans'";
this.chart.ctx.textBaseline = "middle";
var total = 0;
From 0dfb1f0eea887578af9ac55c312328acfb354226 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 18:42:15 -0600
Subject: [PATCH 33/39] updating
---
lib/core.js | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index 1b4129e..ee8c0c9 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -52,11 +52,11 @@ module.exports = {
var ctx = el.getContext("2d");
Chart.types.Doughnut.extend({
name: "DoughnutTextInside",
- // showTooltip: function () {
- // this.chart.ctx.save();
- // Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- // this.chart.ctx.restore();
- // },
+ showTooltip: function () {
+ this.chart.ctx.save();
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
+ this.chart.ctx.restore();
+ },
defaults: {
labelScale: 100
},
From a0faeb1383d7612667f7efc8e80bec298d222ed3 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 20:09:44 -0600
Subject: [PATCH 34/39] looking into animation fix
---
lib/core.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index ee8c0c9..c869762 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -40,7 +40,7 @@ module.exports = {
chart.destroy();
};
- classData.componentWillReceiveProps = function(nextProps) {
+ classData.componentWillReceiveProps = function(nextProps) {
var chart = this.state.chart;
chart.data = nextProps.data;
chart.update();
@@ -127,7 +127,7 @@ var dataKeys = {
var updatePoints = function (nextProps, chart, dataKey) {
var name = chart.name;
- if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+ if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
chart.addData(segment);
From 51e1bb8bc97c299fe31b398b4533c5ca9b83b3d9 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 21:21:05 -0600
Subject: [PATCH 35/39] modifying core.js
---
lib/core.js | 165 +++++++++++++++++++++++++++-------------------------
1 file changed, 85 insertions(+), 80 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index c869762..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -1,170 +1,175 @@
-var React = require('react');
-var ReactDOM = require('react-dom');
+var React = require('react')
+var ReactDOM = require('react-dom')
module.exports = {
createClass: function (chartType, methodNames, dataKey) {
var classData = {
displayName: chartType + 'Chart',
getInitialState: function () {
- return {};
+ return {}
},
render: function () {
var _props = {
ref: 'canvass'
- };
+ }
for (var name in this.props) {
if (this.props.hasOwnProperty(name)) {
if (name !== 'data' && name !== 'options') {
- _props[name] = this.props[name];
+ _props[name] = this.props[name]
}
}
}
- return React.createElement('canvas', _props);
+ return React.createElement('canvas', _props)
}
- };
+ }
- var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+ var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData']
- function extra(type) {
+ function extra (type) {
classData[type] = function () {
- return this.state.chart[type].apply(this.state.chart, arguments);
- };
+ return this.state.chart[type].apply(this.state.chart, arguments)
+ }
}
classData.componentDidMount = function () {
- this.initializeChart(this.props);
- };
+ this.initializeChart(this.props)
+ }
classData.componentWillUnmount = function () {
- var chart = this.state.chart;
- chart.destroy();
- };
+ var chart = this.state.chart
+ chart.destroy()
+ }
- classData.componentWillReceiveProps = function(nextProps) {
- var chart = this.state.chart;
- chart.data = nextProps.data;
- chart.update();
- };
+ classData.componentWillReceiveProps = function (nextProps) {
+ var chart = this.state.chart
+ if (nextProps.redraw) {
+ chart.destroy()
+ this.initializeChart(nextProps)
+ } else {
+ dataKey = dataKey || dataKeys[chart.name]
+ updatePoints(nextProps, chart, dataKey)
+ if (chart.scale) {
+ chart.scale.xLabels = nextProps.data.labels
+ chart.scale.calculateXLabelRotation()
+ }
+ chart.update()
+ }
+ }
classData.initializeChart = function (nextProps) {
- var Chart = require('chart.js');
- var el = ReactDOM.findDOMNode(this);
- var ctx = el.getContext("2d");
+ var Chart = require('chart.js')
+ var el = ReactDOM.findDOMNode(this)
+ var ctx = el.getContext('2d')
Chart.types.Doughnut.extend({
- name: "DoughnutTextInside",
+ name: 'DoughnutTextInside',
showTooltip: function () {
- this.chart.ctx.save();
- Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
- this.chart.ctx.restore();
+ this.chart.ctx.save()
+ Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments)
+ this.chart.ctx.restore()
},
defaults: {
labelScale: 100
},
draw: function () {
- Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments);
+ Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
var width = this.chart.width,
- height = this.chart.height;
+ height = this.chart.height
- var fontSize = (height / this.options.labelScale).toFixed(2);
- this.chart.ctx.fillStyle = '#000';
- this.chart.ctx.font = fontSize + "em 'Open Sans'";
- this.chart.ctx.textBaseline = "middle";
+ var fontSize = (height / this.options.labelScale).toFixed(2)
+ this.chart.ctx.fillStyle = '#000'
+ this.chart.ctx.font = fontSize + "em 'Open Sans'"
+ this.chart.ctx.textBaseline = 'middle'
- var total = 0;
- var filled = 0;
- var clone = this.segments.slice();
+ var total = 0
+ var filled = 0
+ var clone = this.segments.slice()
clone.map(function (val) {
- total = total + val.value;
+ total = total + val.value
})
- clone.pop();
+ clone.pop()
clone.map(function (val) {
- filled = filled + val.value;
+ filled = filled + val.value
})
- var text = Math.round(total > 0 ? (100 / total) * filled : 0) + "%";
+ var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
- textY = height / 2;
+ textY = height / 2
- this.chart.ctx.fillText(text, textX, textY);
+ this.chart.ctx.fillText(text, textX, textY)
}
- });
-
+ })
- var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
- this.state.chart = chart;
- };
+ var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {})
+ this.state.chart = chart
+ }
// return the chartjs instance
classData.getChart = function () {
- return this.state.chart;
- };
+ return this.state.chart
+ }
// return the canvass element that contains the chart
classData.getCanvass = function () {
- return this.refs.canvass;
- };
+ return this.refs.canvass
+ }
- classData.getCanvas = classData.getCanvass;
+ classData.getCanvas = classData.getCanvass
- var i;
+ var i
for (i = 0; i < extras.length; i++) {
- extra(extras[i]);
+ extra(extras[i])
}
for (i = 0; i < methodNames.length; i++) {
- extra(methodNames[i]);
+ extra(methodNames[i])
}
- return React.createClass(classData);
+ return React.createClass(classData)
}
-};
+}
var dataKeys = {
'Line': 'points',
'Radar': 'points',
'Bar': 'bars'
-};
+}
var updatePoints = function (nextProps, chart, dataKey) {
- var name = chart.name;
+ var name = chart.name
if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut' || name === 'DoughnutTextInside') {
nextProps.data.forEach(function (segment, segmentIndex) {
if (!chart.segments[segmentIndex]) {
- chart.addData(segment);
+ chart.addData(segment)
} else {
Object.keys(segment).forEach(function (key) {
- chart.segments[segmentIndex][key] = segment[key];
- });
+ chart.segments[segmentIndex][key] = segment[key]
+ })
}
- });
-
- while(nextProps.data.length < chart.segments.length) {
- chart.removeData();
- }
+ })
} else {
if (chart.scale) {
while (chart.scale.xLabels.length > nextProps.data.labels.length) {
- chart.removeData();
+ chart.removeData()
}
}
if (nextProps.data && nextProps.data.datasets) {
nextProps.data.datasets.forEach(function (set, setIndex) {
set.data.forEach(function (val, pointIndex) {
- if (typeof(chart.datasets[setIndex][dataKey][pointIndex]) == "undefined") {
- addData(nextProps, chart, setIndex, pointIndex);
+ if (typeof (chart.datasets[setIndex][dataKey][pointIndex]) == 'undefined') {
+ addData(nextProps, chart, setIndex, pointIndex)
} else {
- chart.datasets[setIndex][dataKey][pointIndex].value = val;
+ chart.datasets[setIndex][dataKey][pointIndex].value = val
}
- });
- });
+ })
+ })
}
}
-};
+}
var addData = function (nextProps, chart, setIndex, pointIndex) {
- var values = [];
+ var values = []
nextProps.data.datasets.forEach(function (set) {
- values.push(set.data[pointIndex]);
- });
- chart.addData(values, nextProps.data.labels[setIndex]);
-};
+ values.push(set.data[pointIndex])
+ })
+ chart.addData(values, nextProps.data.labels[setIndex])
+}
From f6085125d3172fd447798400df93fa4ff837de7a Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:39:03 -0600
Subject: [PATCH 36/39] testing
---
lib/core.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index ea64d05..fecbd93 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,7 +39,10 @@ module.exports = {
var chart = this.state.chart
chart.destroy()
}
-
+ classData.componentDidUpdate = function () {
+ var chart = this.state.chart
+ chart.update()
+ }
classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart
if (nextProps.redraw) {
From c97c93dddfe055d5c892820a68e67909c1cc9f0d Mon Sep 17 00:00:00 2001
From: MalachiM <malachimart@gmail.com>
Date: Wed, 10 Feb 2016 23:43:46 -0600
Subject: [PATCH 37/39] Revert "testing"
---
lib/core.js | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index fecbd93..ea64d05 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -39,10 +39,7 @@ module.exports = {
var chart = this.state.chart
chart.destroy()
}
- classData.componentDidUpdate = function () {
- var chart = this.state.chart
- chart.update()
- }
+
classData.componentWillReceiveProps = function (nextProps) {
var chart = this.state.chart
if (nextProps.redraw) {
From 1969f3a0af357b794cace718231b5343b2df8941 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 10:52:10 -0600
Subject: [PATCH 38/39] updating the draw function
---
lib/core.js | 12 ++++--------
1 file changed, 4 insertions(+), 8 deletions(-)
diff --git a/lib/core.js b/lib/core.js
index ea64d05..40416c8 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -80,16 +80,12 @@ module.exports = {
this.chart.ctx.font = fontSize + "em 'Open Sans'"
this.chart.ctx.textBaseline = 'middle'
- var total = 0
- var filled = 0
+ var total = this.total
var clone = this.segments.slice()
- clone.map(function (val) {
- total = total + val.value
- })
clone.pop()
- clone.map(function (val) {
- filled = filled + val.value
- })
+ var filled = clone.reduce(function (a, val) {
+ return a + val.value
+ }, 0)
var text = Math.round(total > 0 ? (100 / total) * filled : 0) + '%'
var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
From fd29a752ac109e9ea8c21c81b4046fa88aad4df1 Mon Sep 17 00:00:00 2001
From: Malachi <malachimart@gmail.com>
Date: Thu, 11 Feb 2016 11:04:01 -0600
Subject: [PATCH 39/39] updating draw function's apply call
---
lib/core.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/lib/core.js b/lib/core.js
index 40416c8..6c68f0e 100644
--- a/lib/core.js
+++ b/lib/core.js
@@ -71,7 +71,7 @@ module.exports = {
labelScale: 100
},
draw: function () {
- Chart.types.Doughnut.prototype.draw.apply(this, chart, arguments)
+ Chart.types.Doughnut.prototype.draw.apply(this, arguments)
var width = this.chart.width,
height = this.chart.height