diff --git a/.travis.yml b/.travis.yml index cdb70857d..2e66dc7b4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,7 +1,6 @@ language: node_js node_js: - - "5.6" - - "4.3" + - "5.10" before_install: - "export CHROME_BIN=/usr/bin/google-chrome" diff --git a/docs/00-Getting-Started.md b/docs/00-Getting-Started.md index b8d5ec40b..82d2349d2 100644 --- a/docs/00-Getting-Started.md +++ b/docs/00-Getting-Started.md @@ -145,13 +145,13 @@ position | String | 'top' | Position of the legend. Options are 'top' or 'bottom fullWidth | Boolean | true | Marks that this box should take the full width of the canvas (pushing down other boxes) onClick | Function | `function(event, legendItem) {}` | A callback that is called when a click is registered on top of a label item labels |-|-|- -*labels*boxWidth | Number | 40 | Width of coloured box -*labels*fontSize | Number | 12 | Font size -*labels*fontStyle | String | "normal" | -*labels*fontColor | Color | "#666" | -*labels*fontFamily | String | "Helvetica Neue" | -*labels*padding | Number | 10 | Padding between rows of colored boxes -*labels*generateLabels: | Function | `function(data) { }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case. +*labels*.boxWidth | Number | 40 | Width of coloured box +*labels*.fontSize | Number | 12 | Font size +*labels*.fontStyle | String | "normal" | +*labels*.fontColor | Color | "#666" | +*labels*.fontFamily | String | "Helvetica Neue" | +*labels*.padding | Number | 10 | Padding between rows of colored boxes +*labels*.generateLabels: | Function | `function(data) { }` | Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. Styles that can be returned are `fillStyle`, `strokeStyle`, `lineCap`, `lineDash`, `lineDashOffset`, `lineWidth`, `lineJoin`. Return a `hidden` attribute to indicate that the label refers to something that is not visible. A strikethrough style will be given to the text in this case. The global options for tooltips are defined in `Chart.defaults.global.tooltips`. diff --git a/docs/02-Line-Chart.md b/docs/02-Line-Chart.md index 6cdcd419c..50aefb8fa 100644 --- a/docs/02-Line-Chart.md +++ b/docs/02-Line-Chart.md @@ -39,13 +39,15 @@ var data = { // Boolean - if true fill the area under the line fill: false, + // Tension - bezier curve tension of the line. Set to 0 to draw straight lines connecting points + // Used to be called "tension" but was renamed for consistency. The old option name continues to work for compatibility. + lineTension: 0.1, + // String - the color to fill the area under the line with if fill is true - backgroundColor: "rgba(220,220,220,0.2)", + backgroundColor: "rgba(75,192,192,0.4)", - // The properties below allow an array to be specified to change the value of the item at the given index - - // String or array - Line color - borderColor: "rgba(220,220,220,1)", + // String - Line color + borderColor: "rgba(75,192,192,1)", // String - cap style of the line. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap borderCapStyle: 'butt', @@ -59,32 +61,37 @@ var data = { // String - line join style. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin borderJoinStyle: 'miter', - // String or array - Point stroke color - pointBorderColor: "rgba(220,220,220,1)", + // The properties below allow an array to be specified to change the value of the item at the given index - // String or array - Point fill color + // String or Array - Point stroke color + pointBorderColor: "rgba(75,192,192,1)", + + // String or Array - Point fill color pointBackgroundColor: "#fff", - // Number or array - Stroke width of point border + // Number or Array - Stroke width of point border pointBorderWidth: 1, - // Number or array - Radius of point when hovered + // Number or Array - Radius of point when hovered pointHoverRadius: 5, - // String or array - point background color when hovered - pointHoverBackgroundColor: "rgba(220,220,220,1)", + // String or Array - point background color when hovered + pointHoverBackgroundColor: "rgba(75,192,192,1)", - // Point border color when hovered + // String or Array - Point border color when hovered pointHoverBorderColor: "rgba(220,220,220,1)", - // Number or array - border width of point when hovered + // Number or Array - border width of point when hovered pointHoverBorderWidth: 2, - // Tension - bezier curve tension of the line. Set to 0 to draw straight Wlines connecting points - tension: 0.1, + // Number or Array - the pixel size of the point shape. Can be set to 0 to not render a circle over the point + // Used to be called "radius" but was renamed for consistency. The old option name continues to work for compatibility. + pointRadius: 1, - // Number - the pixel size of the point shape. Can be set to 0 to not render a circle over the point - radius: 1, + // Number or Array - the pixel size of the non-displayed point that reacts to mouse hover events + // + // Used to be called "hitRadius" but was renamed for consistency. The old option name continues to work for compatibility. + pointHitRadius: 10, // The actual data data: [65, 59, 80, 81, 56, 55, 40], @@ -95,14 +102,14 @@ var data = { { label: "My Second dataset", fill: false, - backgroundColor: "rgba(220,220,220,0.2)", - borderColor: "rgba(220,220,220,1)", - pointBorderColor: "rgba(220,220,220,1)", + backgroundColor: "rgba(255,205,86,0.4)", + borderColor: "rgba(255,205,86,1)", + pointBorderColor: "rgba(255,205,86,1)", pointBackgroundColor: "#fff", pointBorderWidth: 1, pointHoverRadius: 5, - pointHoverBackgroundColor: "rgba(220,220,220,1)", - pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBackgroundColor: "rgba(255,205,86,1)", + pointHoverBorderColor: "rgba(255,205,86,1)", pointHoverBorderWidth: 2, data: [28, 48, 40, 19, 86, 27, 90] } @@ -119,7 +126,7 @@ The label key on each dataset is optional, and can be used when generating a sca These are the customisation options specific to Line charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart. -The default options for line chart are defined in `Chart.defaults.Line`. +The default options for line chart are defined in `Chart.defaults.line`. Name | Type | Default | Description --- | --- | --- | --- @@ -135,7 +142,7 @@ scales | - | - | - type | String | "category" | As defined in ["Category"](#scales-category-scale). id | String | "x-axis-1" | Id of the axis so that data can bind to it. | | | - *scales*.yAxes | Array | `[{type:"linear","id":"y-axis-1"}]` | Defines all of the x axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. + *scales*.yAxes | Array | `[{type:"linear","id":"y-axis-1"}]` | Defines all of the y axes used in the chart. See the [scale documentation](#getting-started-scales) for details on the available options. *Options for yAxes* | | | type | String | "linear" | As defined in ["Linear"](#scales-linear-scale). id | String | "y-axis-1" | Id of the axis so that data can bind to it. diff --git a/docs/03-Bar-Chart.md b/docs/03-Bar-Chart.md index d59a63715..3c2948204 100644 --- a/docs/03-Bar-Chart.md +++ b/docs/03-Bar-Chart.md @@ -32,19 +32,19 @@ var data = { // The properties below allow an array to be specified to change the value of the item at the given index // String or array - the bar color - backgroundColor: "rgba(220,220,220,0.2)", + backgroundColor: "rgba(255,99,132,0.2)", // String or array - bar stroke color - borderColor: "rgba(220,220,220,1)", + borderColor: "rgba(255,99,132,1)", // Number or array - bar border width borderWidth: 1, // String or array - fill color when hovered - hoverBackgroundColor: "rgba(220,220,220,0.2)", + hoverBackgroundColor: "rgba(255,99,132,0.4)", // String or array - border color when hovered - hoverBorderColor: "rgba(220,220,220,1)", + hoverBorderColor: "rgba(255,99,132,1)", // The actual data data: [65, 59, 80, 81, 56, 55, 40], @@ -54,11 +54,11 @@ var data = { }, { label: "My Second dataset", - backgroundColor: "rgba(220,220,220,0.2)", - borderColor: "rgba(220,220,220,1)", + backgroundColor: "rgba(54,162,235,0.2)", + borderColor: "rgba(54,162,235,1)", borderWidth: 1, - hoverBackgroundColor: "rgba(220,220,220,0.2)", - hoverBorderColor: "rgba(220,220,220,1)", + hoverBackgroundColor: "rgba(54,162,235,0.4)", + hoverBorderColor: "rgba(54,162,235,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] @@ -73,7 +73,7 @@ The label key on each dataset is optional, and can be used when generating a sca These are the customisation options specific to Bar charts. These options are merged with the [global chart configuration options](#getting-started-global-chart-configuration), and form the options of the chart. -The default options for bar chart are defined in `Chart.defaults.Bar`. +The default options for bar chart are defined in `Chart.defaults.bar`. Name | Type | Default | Description --- |:---:| --- | --- @@ -128,7 +128,7 @@ new Chart(ctx, { // for both x and y axes. ``` -We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.Bar`. +We can also change these defaults values for each Bar type that is created, this object is available at `Chart.defaults.bar`. #### barPercentage vs categoryPercentage diff --git a/docs/04-Radar-Chart.md b/docs/04-Radar-Chart.md index 939a69e55..cdf04f395 100644 --- a/docs/04-Radar-Chart.md +++ b/docs/04-Radar-Chart.md @@ -29,22 +29,22 @@ var data = { datasets: [ { label: "My First dataset", - backgroundColor: "rgba(220,220,220,0.2)", - borderColor: "rgba(220,220,220,1)", - pointBackgroundColor: "rgba(220,220,220,1)", + backgroundColor: "rgba(179,181,198,0.2)", + borderColor: "rgba(179,181,198,1)", + pointBackgroundColor: "rgba(179,181,198,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", - pointHoverBorderColor: "rgba(220,220,220,1)", + pointHoverBorderColor: "rgba(179,181,198,1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "My Second dataset", - backgroundColor: "rgba(151,187,205,0.2)", - borderColor: "rgba(151,187,205,1)", - pointBackgroundColor: "rgba(151,187,205,1)", + backgroundColor: "rgba(255,99,132,0.2)", + borderColor: "rgba(255,99,132,1)", + pointBackgroundColor: "rgba(255,99,132,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", - pointHoverBorderColor: "rgba(151,187,205,1)", + pointHoverBorderColor: "rgba(255,99,132,1)", data: [28, 48, 40, 19, 96, 27, 100] } ] diff --git a/docs/05-Polar-Area-Chart.md b/docs/05-Polar-Area-Chart.md index fb2a44a3a..c3d696d87 100644 --- a/docs/05-Polar-Area-Chart.md +++ b/docs/05-Polar-Area-Chart.md @@ -27,18 +27,18 @@ new Chart(ctx, { var data = { datasets: [{ data: [ - 10, - 32, - 53, - 14, - 22, + 11, + 16, + 7, + 3, + 14 ], backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C", - "#949FB1", - "#4D5360", + "#FF6384", + "#4BC0C0", + "#FFCE56", + "#E7E9ED", + "#36A2EB" ], label: 'My dataset' // for legend }], @@ -47,7 +47,7 @@ var data = { "Green", "Yellow", "Grey", - "Dark Grey" + "Blue" ] }; ``` diff --git a/docs/06-Pie-Doughnut-Chart.md b/docs/06-Pie-Doughnut-Chart.md index 64fd9b8a4..4252a7b48 100644 --- a/docs/06-Pie-Doughnut-Chart.md +++ b/docs/06-Pie-Doughnut-Chart.md @@ -7,7 +7,7 @@ Pie and doughnut charts are probably the most commonly used chart there are. The They are excellent at showing the relational proportions between data. -Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their `percentageInnerCutout`. This equates what percentage of the inner should be cut out. This defaults to `0` for pie charts, and `50` for doughnuts. +Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their `cutoutPercentage`. This equates what percentage of the inner should be cut out. This defaults to `0` for pie charts, and `50` for doughnuts. They are also registered under two aliases in the `Chart` core. Other than their different default value, and different alias, they are exactly the same. @@ -24,15 +24,17 @@ They are also registered under two aliases in the `Chart` core. Other than their ```javascript // For a pie chart -var myPieChart = new Chart(ctx[0],{ - type:'pie', +var myPieChart = new Chart(ctx,{ + type: 'pie', data: data, options: options }); +``` +```javascript // And for a doughnut chart -var myDoughnutChart = new Chart(ctx[1], { - type:'doughnut', +var myDoughnutChart = new Chart(ctx, { + type: 'doughnut', data: data, options: options }); @@ -51,20 +53,20 @@ var data = { { data: [300, 50, 100], backgroundColor: [ - "#F7464A", - "#46BFBD", - "#FDB45C" + "#FF6384", + "#36A2EB", + "#FFCE56" ], hoverBackgroundColor: [ - "#FF5A5E", - "#5AD3D1", - "#FFC870" + "#FF6384", + "#36A2EB", + "#FFCE56" ] }] }; ``` -For a pie chart, you must pass in an array of objects with a value and an optional color property. The value attribute should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. The color attribute should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL. +For a pie chart, datasets need to contain an array of data points. The data points should be a number, Chart.js will total all of the numbers and calculate the relative proportion of each. You can also add an array of background colors. The color attributes should be a string. Similar to CSS, for this string you can use HEX notation, RGB, RGBA or HSL. ### Chart options @@ -98,4 +100,4 @@ new Chart(ctx,{ // and the Doughnut chart defaults but this particular instance will have `animateScale` set to `true`. ``` -We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.pie`, with the only difference being `percentageInnerCutout` being set to 0. \ No newline at end of file +We can also change these default values for each Doughnut type that is created, this object is available at `Chart.defaults.doughnut`. Pie charts also have a clone of these defaults available to change at `Chart.defaults.pie`, with the only difference being `cutoutPercentage` being set to 0. \ No newline at end of file diff --git a/docs/07-Advanced.md b/docs/07-Advanced.md index 706f54b2d..4bedca3e0 100644 --- a/docs/07-Advanced.md +++ b/docs/07-Advanced.md @@ -143,7 +143,7 @@ var myPieChart = new Chart(ctx, { // Otherwise, tooltip will be an object with all tooltip properties like: - // tooltip.caretHeight + // tooltip.caretSize // tooltip.caretPadding // tooltip.chart // tooltip.cornerRadius @@ -390,6 +390,10 @@ Plugins should derive from Chart.PluginBase and implement the following interfac beforeUpdate: function(chartInstance) { }, afterUpdate: function(chartInstance) { }, + // This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw + // to do something on each animation frame + beforeRender: function(chartInstance) { }, + // Easing is for animation beforeDraw: function(chartInstance, easing) { }, afterDraw: function(chartInstance, easing) { } diff --git a/docs/08-Notes.md b/docs/08-Notes.md index 8ba5a59dd..638a22e51 100644 --- a/docs/08-Notes.md +++ b/docs/08-Notes.md @@ -4,25 +4,11 @@ anchor: notes --- ### Browser support -Browser support for the canvas element is available in all modern & major mobile browsers (caniuse.com/canvas). -For IE8 & below, I would recommend using the polyfill ExplorerCanvas - available at https://code.google.com/p/explorercanvas/. It falls back to Internet explorer's format VML when canvas support is not available. Example use: +Chart.js offers support for all browsers where canvas is supported. -```html - - - -``` +Browser support for the canvas element is available in all modern & major mobile browsers (http://caniuse.com/#feat=canvas). -Usually I would recommend feature detection to choose whether or not to load a polyfill, rather than IE conditional comments, however in this case, VML is a Microsoft proprietary format, so it will only work in IE. - -Some important points to note in my experience using ExplorerCanvas as a fallback. - -- Initialise charts on load rather than DOMContentReady when using the library, as sometimes a race condition will occur, and it will result in an error when trying to get the 2d context of a canvas. -- New VML DOM elements are being created for each animation frame and there is no hardware acceleration. As a result animation is usually slow and jerky, with flashing text. It is a good idea to dynamically turn off animation based on canvas support. I recommend using the excellent Modernizr to do this. -- When declaring fonts, the library explorercanvas requires the font name to be in single quotes inside the string. For example, instead of your scaleFontFamily property being simply "Arial", explorercanvas support, use "'Arial'" instead. Chart.js does this for default values. ### Bugs & issues diff --git a/gulpfile.js b/gulpfile.js index 5b64a1920..aed4b55fa 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,6 +7,7 @@ var gulp = require('gulp'), connect = require('gulp-connect'), replace = require('gulp-replace'), htmlv = require('gulp-html-validator'), + insert = require('gulp-insert'), inquirer = require('inquirer'), semver = require('semver'), exec = require('child_process').exec, @@ -23,6 +24,16 @@ var srcDir = './src/'; var outDir = './dist/'; var testDir = './test/'; +var header = "/*!\n\ + * Chart.js\n\ + * http://chartjs.org/\n\ + * Version: {{ version }}\n\ + *\n\ + * Copyright 2016 Nick Downie\n\ + * Released under the MIT license\n\ + * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md\n\ + */\n"; + var preTestFiles = [ './node_modules/moment/min/moment.min.js', ]; @@ -54,9 +65,10 @@ gulp.task('default', ['build', 'watch']); function buildTask() { - var bundled = browserify('./src/Chart.js') + var bundled = browserify('./src/chart.js') .bundle() .pipe(source('Chart.bundle.js')) + .pipe(insert.prepend(header)) .pipe(streamify(replace('{{ version }}', package.version))) .pipe(gulp.dest(outDir)) .pipe(streamify(uglify({ @@ -65,10 +77,11 @@ function buildTask() { .pipe(streamify(concat('Chart.bundle.min.js'))) .pipe(gulp.dest(outDir)); - var nonBundled = browserify('./src/Chart.js') + var nonBundled = browserify('./src/chart.js') .ignore('moment') .bundle() .pipe(source('Chart.js')) + .pipe(insert.prepend(header)) .pipe(streamify(replace('{{ version }}', package.version))) .pipe(gulp.dest(outDir)) .pipe(streamify(uglify({ diff --git a/package.json b/package.json index c8830d93e..6a57df061 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "gulp-concat": "~2.1.x", "gulp-connect": "~2.0.5", "gulp-html-validator": "^0.0.2", + "gulp-insert": "~0.5.0", "gulp-jshint": "~1.5.1", "gulp-karma": "0.0.4", "gulp-replace": "^0.4.0", diff --git a/samples/different-point-sizes.html b/samples/different-point-sizes.html new file mode 100644 index 000000000..926eecfba --- /dev/null +++ b/samples/different-point-sizes.html @@ -0,0 +1,154 @@ + + + + + Line Chart + + + + + + +
+ +
+
+
+ + + + + + + diff --git a/samples/line-legend.html b/samples/line-legend.html index e454eb08f..92e5e5b5a 100644 --- a/samples/line-legend.html +++ b/samples/line-legend.html @@ -52,8 +52,9 @@ fill: false, borderDash: [5, 5], }, { - label: "My Third dataset", + label: "My Third dataset - No bezier", data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()], + lineTension: 0, fill: false, }, { label: "My Fourth dataset", diff --git a/src/chart.js b/src/chart.js index 8f1b42855..6c2d8c51b 100644 --- a/src/chart.js +++ b/src/chart.js @@ -1,14 +1,3 @@ -/*! - * Chart.js - * http://chartjs.org/ - * Version: {{ version }} - * - * Copyright 2015 Nick Downie - * Released under the MIT license - * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md - */ - - var Chart = require('./core/core.js')(); require('./core/core.helpers')(Chart); diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index 9574ed2e3..d0761f5b4 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -184,6 +184,12 @@ module.exports = function(Chart) { var categoryWidth = tickWidth * xScale.options.categoryPercentage; var categorySpacing = (tickWidth - (tickWidth * xScale.options.categoryPercentage)) / 2; var fullBarWidth = categoryWidth / datasetCount; + + if (xScale.ticks.length !== this.chart.data.labels.length) { + var perc = xScale.ticks.length / this.chart.data.labels.length; + fullBarWidth = fullBarWidth * perc; + } + var barWidth = fullBarWidth * xScale.options.barPercentage; var barSpacing = fullBarWidth - (fullBarWidth * xScale.options.barPercentage); diff --git a/src/controllers/controller.doughnut.js b/src/controllers/controller.doughnut.js index de5c041c2..d43234375 100644 --- a/src/controllers/controller.doughnut.js +++ b/src/controllers/controller.doughnut.js @@ -21,11 +21,11 @@ module.exports = function(Chart) { if (chart.data.datasets.length) { for (var i = 0; i < chart.data.datasets[0].data.length; ++i) { - text.push('
  • '); + text.push('
  • '); if (chart.data.labels[i]) { text.push(chart.data.labels[i]); } - text.push('
    • '); + text.push(''); } } @@ -285,4 +285,4 @@ module.exports = function(Chart) { } } }); -}; \ No newline at end of file +}; diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index dcce78f99..a62b285ac 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -86,9 +86,16 @@ module.exports = function(Chart) { // Data line._children = points; // Model + + // Compatibility: If the properties are defined with only the old name, use those values + if ((this.getDataset().tension !== undefined) && (this.getDataset().lineTension === undefined)) + { + this.getDataset().lineTension = this.getDataset().tension; + } + line._model = { // Appearance - tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), + tension: line.custom && line.custom.tension ? line.custom.tension : helpers.getValueOrDefault(this.getDataset().lineTension, this.chart.options.elements.line.tension), backgroundColor: line.custom && line.custom.backgroundColor ? line.custom.backgroundColor : (this.getDataset().backgroundColor || this.chart.options.elements.line.backgroundColor), borderWidth: line.custom && line.custom.borderWidth ? line.custom.borderWidth : (this.getDataset().borderWidth || this.chart.options.elements.line.borderWidth), borderColor: line.custom && line.custom.borderColor ? line.custom.borderColor : (this.getDataset().borderColor || this.chart.options.elements.line.borderColor), @@ -178,18 +185,28 @@ module.exports = function(Chart) { point._index = index; // Desired view properties + + // Compatibility: If the properties are defined with only the old name, use those values + if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined)) + { + this.getDataset().pointRadius = this.getDataset().radius; + } + if ((this.getDataset().hitRadius !== undefined) && (this.getDataset().pointHitRadius === undefined)) + { + this.getDataset().pointHitRadius = this.getDataset().hitRadius; + } + point._model = { x: xScale.getPixelForValue(this.getDataset().data[index], index, this.index, this.chart.isCombo), y: reset ? scaleBase : this.calculatePointY(this.getDataset().data[index], index, this.index, this.chart.isCombo), // Appearance - tension: point.custom && point.custom.tension ? point.custom.tension : helpers.getValueOrDefault(this.getDataset().tension, this.chart.options.elements.line.tension), - radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius), + radius: point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius), pointStyle: point.custom && point.custom.pointStyle ? point.custom.pointStyle : helpers.getValueAtIndexOrDefault(this.getDataset().pointStyle, index, this.chart.options.elements.point.pointStyle), backgroundColor: this.getPointBackgroundColor(point, index), borderColor: this.getPointBorderColor(point, index), borderWidth: this.getPointBorderWidth(point, index), // Tooltip - hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().hitRadius, index, this.chart.options.elements.point.hitRadius) + hitRadius: point.custom && point.custom.hitRadius ? point.custom.hitRadius : helpers.getValueAtIndexOrDefault(this.getDataset().pointHitRadius, index, this.chart.options.elements.point.hitRadius) }; point._model.skip = point.custom && point.custom.skip ? point.custom.skip : (isNaN(point._model.x) || isNaN(point._model.y)); @@ -233,7 +250,7 @@ module.exports = function(Chart) { helpers.previousItem(this.getDataset().metaData, index)._model, point._model, helpers.nextItem(this.getDataset().metaData, index)._model, - point._model.tension + this.getDataset().metaDataset._model.tension ); // Prevent the bezier going outside of the bounds of the graph @@ -281,7 +298,13 @@ module.exports = function(Chart) { var dataset = this.chart.data.datasets[point._datasetIndex]; var index = point._index; - point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().radius, index, this.chart.options.elements.point.radius); + // Compatibility: If the properties are defined with only the old name, use those values + if ((this.getDataset().radius !== undefined) && (this.getDataset().pointRadius === undefined)) + { + this.getDataset().pointRadius = this.getDataset().radius; + } + + point._model.radius = point.custom && point.custom.radius ? point.custom.radius : helpers.getValueAtIndexOrDefault(this.getDataset().pointRadius, index, this.chart.options.elements.point.radius); point._model.backgroundColor = this.getPointBackgroundColor(point, index); point._model.borderColor = this.getPointBorderColor(point, index); point._model.borderWidth = this.getPointBorderWidth(point, index); diff --git a/src/core/core.controller.js b/src/core/core.controller.js index dd1245940..3791b105d 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -250,6 +250,11 @@ module.exports = function(Chart) { // Make sure dataset controllers are updated and new controllers are reset var newControllers = this.buildOrUpdateControllers(); + // Make sure all dataset controllers have correct meta data counts + helpers.each(this.data.datasets, function(dataset, datasetIndex) { + dataset.controller.buildOrUpdateElements(); + }); + Chart.layoutService.update(this, this.chart.width, this.chart.height); // Can only reset the new controllers after the scales have been updated @@ -257,11 +262,6 @@ module.exports = function(Chart) { controller.reset(); }); - // Make sure all dataset controllers have correct meta data counts - helpers.each(this.data.datasets, function(dataset, datasetIndex) { - dataset.controller.buildOrUpdateElements(); - }); - // This will loop through any data and do the appropriate element update for the type helpers.each(this.data.datasets, function(dataset, datasetIndex) { dataset.controller.update(); @@ -272,6 +272,7 @@ module.exports = function(Chart) { }, render: function render(duration, lazy) { + Chart.pluginService.notifyPlugins('beforeRender', [this]); if (this.options.animation && ((typeof duration !== 'undefined' && duration !== 0) || (typeof duration === 'undefined' && this.options.animation.duration !== 0))) { var animation = new Chart.Animation(); @@ -422,7 +423,7 @@ module.exports = function(Chart) { canvas.style.width = this.chart.originalCanvasStyleWidth; canvas.style.height = this.chart.originalCanvasStyleHeight; - Chart.pluginService.notifyPlugins('destory', [this]); + Chart.pluginService.notifyPlugins('destroy', [this]); delete Chart.instances[this.id]; }, diff --git a/src/core/core.plugin.js b/src/core/core.plugin.js index 8a82e4e94..35479098f 100644 --- a/src/core/core.plugin.js +++ b/src/core/core.plugin.js @@ -53,6 +53,6 @@ module.exports = function(Chart) { afterDraw: helpers.noop, // Called during destroy - destory: helpers.noop, + destroy: helpers.noop, }); -}; \ No newline at end of file +}; diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js index ddf78f62a..4b742d3a8 100644 --- a/src/core/core.tooltip.js +++ b/src/core/core.tooltip.js @@ -250,7 +250,7 @@ module.exports = function(Chart) { datasetIndex: datasetIndex }); } - }, null, element._yScale.options.stacked); + }, null); helpers.each(this._active, function(active) { if (active) { @@ -259,10 +259,9 @@ module.exports = function(Chart) { backgroundColor: active._view.backgroundColor }); } - }, null, element._yScale.options.stacked); + }, null); tooltipPosition = this.getAveragePosition(this._active); - tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5); } // Build the Text Lines diff --git a/test/controller.line.tests.js b/test/controller.line.tests.js index a4d12bdb3..0d93cd2fb 100644 --- a/test/controller.line.tests.js +++ b/test/controller.line.tests.js @@ -284,7 +284,6 @@ describe('Line controller tests', function() { radius: 3, pointStyle: 'circle', skip: false, - tension: 0.1, // Point x: 82, @@ -300,7 +299,6 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[1]._model).toEqual({ x: 132, y: 15, - tension: 0.1, radius: 3, pointStyle: 'circle', backgroundColor: 'rgba(0,0,0,0.1)', @@ -317,7 +315,6 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[2]._model).toEqual({ x: 182, y: 156, - tension: 0.1, radius: 3, pointStyle: 'circle', backgroundColor: 'rgba(0,0,0,0.1)', @@ -339,7 +336,6 @@ describe('Line controller tests', function() { radius: 3, pointStyle: 'circle', skip: false, - tension: 0.1, // Point x: 232, @@ -391,7 +387,6 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[0]._model).toEqual({ x: 82, y: 62, - tension: 0, radius: 22, pointStyle: 'circle', backgroundColor: 'rgb(128, 129, 130)', @@ -408,7 +403,6 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[1]._model).toEqual({ x: 132, y: 15, - tension: 0, radius: 22, pointStyle: 'circle', backgroundColor: 'rgb(128, 129, 130)', @@ -430,7 +424,6 @@ describe('Line controller tests', function() { radius: 22, pointStyle: 'circle', skip: false, - tension: 0, // Point x: 182, @@ -451,7 +444,6 @@ describe('Line controller tests', function() { radius: 22, pointStyle: 'circle', skip: false, - tension: 0, // Point x: 232, @@ -464,9 +456,174 @@ describe('Line controller tests', function() { controlPointNextY: 194, }); + // Use the consistent name "lineTension", setting but overwriting + // another value in "tension" + chart.data.datasets[0].lineTension = 0.5; + chart.data.datasets[0].tension = 0.7; + + controller.update(); + + expect(chart.data.datasets[0].metaDataset._model).toEqual({ + backgroundColor: 'rgb(98, 98, 98)', + borderCapStyle: 'butt', + borderColor: 'rgb(8, 8, 8)', + borderDash: [2, 3], + borderDashOffset: 7, + borderJoinStyle: 'miter', + borderWidth: 0.55, + fill: false, + tension: 0.5, + + scaleTop: 0, + scaleBottom: 200, + scaleZero: 156, + }); + + expect(chart.data.datasets[0].metaData[0]._model).toEqual({ + x: 82, + y: 62, + radius: 22, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 3.3, + skip: false, + controlPointPreviousX: 82, + controlPointPreviousY: 62, + controlPointNextX: 107, + controlPointNextY: 38.5 + }); + + expect(chart.data.datasets[0].metaData[1]._model).toEqual({ + x: 132, + y: 15, + radius: 22, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 3.3, + skip: false, + controlPointPreviousX: 116.2771987579006, + controlPointPreviousY: 0.22056683242656483, + controlPointNextX: 166.2771987579006, + controlPointNextY: 47.22056683242656 + }); + + // Use the consistent name "pointRadius", setting but overwriting + // another value in "radius" + chart.data.datasets[0].pointRadius = 250; + chart.data.datasets[0].radius = 20; + + controller.update(); + + expect(chart.data.datasets[0].metaDataset._model).toEqual({ + backgroundColor: 'rgb(98, 98, 98)', + borderCapStyle: 'butt', + borderColor: 'rgb(8, 8, 8)', + borderDash: [2, 3], + borderDashOffset: 7, + borderJoinStyle: 'miter', + borderWidth: 0.55, + fill: false, + tension: 0.5, + + scaleTop: 0, + scaleBottom: 200, + scaleZero: 156, + }); + + expect(chart.data.datasets[0].metaData[0]._model).toEqual({ + x: 82, + y: 62, + radius: 250, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 3.3, + skip: false, + controlPointPreviousX: 82, + controlPointPreviousY: 62, + controlPointNextX: 107, + controlPointNextY: 38.5 + }); + + expect(chart.data.datasets[0].metaData[1]._model).toEqual({ + x: 132, + y: 15, + radius: 250, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 3.3, + skip: false, + controlPointPreviousX: 116.2771987579006, + controlPointPreviousY: 0.22056683242656483, + controlPointNextX: 166.2771987579006, + controlPointNextY: 47.22056683242656 + }); + + // Use the consistent name "pointHitRadius", setting but overwriting + // another value in "hitRadius" + chart.data.datasets[0].pointHitRadius = 123; + chart.data.datasets[0].hitRadius = 23; + + controller.update(); + + expect(chart.data.datasets[0].metaDataset._model).toEqual({ + backgroundColor: 'rgb(98, 98, 98)', + borderCapStyle: 'butt', + borderColor: 'rgb(8, 8, 8)', + borderDash: [2, 3], + borderDashOffset: 7, + borderJoinStyle: 'miter', + borderWidth: 0.55, + fill: false, + tension: 0.5, + + scaleTop: 0, + scaleBottom: 200, + scaleZero: 156, + }); + + expect(chart.data.datasets[0].metaData[0]._model).toEqual({ + x: 82, + y: 62, + radius: 250, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 123, + skip: false, + controlPointPreviousX: 82, + controlPointPreviousY: 62, + controlPointNextX: 107, + controlPointNextY: 38.5 + }); + + expect(chart.data.datasets[0].metaData[1]._model).toEqual({ + x: 132, + y: 15, + radius: 250, + pointStyle: 'circle', + backgroundColor: 'rgb(128, 129, 130)', + borderColor: 'rgb(56, 57, 58)', + borderWidth: 1.123, + hitRadius: 123, + skip: false, + controlPointPreviousX: 116.2771987579006, + controlPointPreviousY: 0.22056683242656483, + controlPointNextX: 166.2771987579006, + controlPointNextY: 47.22056683242656 + }); + // Use custom styles for lines & first point chart.data.datasets[0].metaDataset.custom = { - tension: 0.25, + tension: 0.15, backgroundColor: 'rgb(55, 55, 54)', borderColor: 'rgb(8, 7, 6)', borderWidth: 0.3, @@ -483,7 +640,6 @@ describe('Line controller tests', function() { backgroundColor: 'rgb(0, 1, 3)', borderColor: 'rgb(4, 6, 8)', borderWidth: 0.787, - tension: 0.15, skip: true, hitRadius: 5, }; @@ -499,7 +655,7 @@ describe('Line controller tests', function() { borderJoinStyle: 'round', borderWidth: 0.3, fill: true, - tension: 0.25, + tension: 0.15, scaleTop: 0, scaleBottom: 200, @@ -509,7 +665,6 @@ describe('Line controller tests', function() { expect(chart.data.datasets[0].metaData[0]._model).toEqual({ x: 82, y: 62, - tension: 0.15, radius: 2.2, pointStyle: 'circle', backgroundColor: 'rgb(0, 1, 3)', @@ -1281,6 +1436,17 @@ describe('Line controller tests', function() { expect(point._model.borderWidth).toBe(2.1); expect(point._model.radius).toBe(3.3); + // Use the consistent name "pointRadius", setting but overwriting + // another value in "radius" + chart.data.datasets[0].pointRadius = 250; + chart.data.datasets[0].radius = 20; + + controller.setHoverStyle(point); + expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); + expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); + expect(point._model.borderWidth).toBe(2.1); + expect(point._model.radius).toBe(3.3); + // Custom style point.custom = { hoverRadius: 4.4, @@ -1423,6 +1589,17 @@ describe('Line controller tests', function() { expect(point._model.borderWidth).toBe(2.1); expect(point._model.radius).toBe(3.3); + // Use the consistent name "pointRadius", setting but overwriting + // another value in "radius" + chart.data.datasets[0].pointRadius = 250; + chart.data.datasets[0].radius = 20; + + controller.removeHoverStyle(point); + expect(point._model.backgroundColor).toBe('rgb(77, 79, 81)'); + expect(point._model.borderColor).toBe('rgb(123, 125, 127)'); + expect(point._model.borderWidth).toBe(2.1); + expect(point._model.radius).toBe(250); + // Custom style point.custom = { radius: 4.4, diff --git a/test/defaultConfig.tests.js b/test/defaultConfig.tests.js index d285265f6..0123f420f 100644 --- a/test/defaultConfig.tests.js +++ b/test/defaultConfig.tests.js @@ -63,7 +63,7 @@ describe('Test the doughnut chart default config', function() { }] } }; - var expectedLegend = ''; + var expectedLegend = ''; expect(config.legendCallback(chart)).toBe(expectedLegend); }); @@ -290,4 +290,4 @@ describe('Test the polar area chart default config', function() { config.legend.onClick.call(scope, null, legendItem); expect(chart.data.datasets[0].data).toEqual([10, 20, NaN]); }); -}); \ No newline at end of file +});