From: Evert Timberg Date: Sat, 5 Dec 2015 21:45:31 +0000 (-0500) Subject: Add tooltipFormat option to time scale options. X-Git-Tag: 2.0.0-beta2~30^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F1744%2Fhead;p=thirdparty%2FChart.js.git Add tooltipFormat option to time scale options. Fix bars when displayed on a time scale. Updated sample files. --- diff --git a/docs/01-Scales.md b/docs/01-Scales.md index be4872dd0..428a911e8 100644 --- a/docs/01-Scales.md +++ b/docs/01-Scales.md @@ -153,16 +153,18 @@ The time scale extends the core scale class with the following tick template: // Moment js for each of the units. Replaces `displayFormat` // To override, use a pattern string from http://momentjs.com/docs/#/displaying/format/ displayFormats: { - 'millisecond': 'SSS [ms]', - 'second': 'h:mm:ss a', // 11:20:01 AM - 'minute': 'h:mm:ss a', // 11:20:01 AM - 'hour': 'MMM D, hA', // Sept 4, 5PM - 'day': 'll', // Sep 4 2015 - 'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ? - 'month': 'MMM YYYY', // Sept 2015 - 'quarter': '[Q]Q - YYYY', // Q3 - 'year': 'YYYY', // 2015 - }, + 'millisecond': 'SSS [ms]', + 'second': 'h:mm:ss a', // 11:20:01 AM + 'minute': 'h:mm:ss a', // 11:20:01 AM + 'hour': 'MMM D, hA', // Sept 4, 5PM + 'day': 'll', // Sep 4 2015 + 'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ? + 'month': 'MMM YYYY', // Sept 2015 + 'quarter': '[Q]Q - YYYY', // Q3 + 'year': 'YYYY', // 2015 + }, + // Sets the display format used in tooltip generation + tooltipFormat: '' }, } ``` diff --git a/samples/timeScale/combo-time-scale.html b/samples/timeScale/combo-time-scale.html index 939be9282..590c2a90e 100644 --- a/samples/timeScale/combo-time-scale.html +++ b/samples/timeScale/combo-time-scale.html @@ -2,190 +2,179 @@ - Line Chart - - - - + Line Chart + + + + -
- -
-
-
- - - - - -
-

Legend

-
-
-
- +
+ +
+
+
+ + + + + +
+

Legend

+
+
+
+ diff --git a/samples/timeScale/line-time-point-data.html b/samples/timeScale/line-time-point-data.html index 2d8077acf..d02805ecc 100644 --- a/samples/timeScale/line-time-point-data.html +++ b/samples/timeScale/line-time-point-data.html @@ -2,163 +2,171 @@ - Time Scale Point Data - - - - + Time Scale Point Data + + + + -
- -
-
-
- - - -
-

Legend

-
-
-
- +
+ +
+
+
+ + + +
+

Legend

+
+
+
+ diff --git a/samples/timeScale/line-time-scale.html b/samples/timeScale/line-time-scale.html index ecde87573..85cc9fde6 100644 --- a/samples/timeScale/line-time-scale.html +++ b/samples/timeScale/line-time-scale.html @@ -2,205 +2,210 @@ - Line Chart - - - - + Line Chart + + + + -
- -
-
-
- - - - - -
-

Legend

-
-
-
- +
+ +
+
+
+ + + + + +
+

Legend

+
+
+
+ diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index a1c631271..a97e284e0 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -233,9 +233,9 @@ var datasetCount = this.getBarCount(); var tickWidth = (function() { - var min = xScale.getPixelForValue(null, 1) - xScale.getPixelForValue(null, 0); + var min = xScale.getPixelForTick(1) - xScale.getPixelForTick(0); for (var i = 2; i < this.getDataset().data.length; i++) { - min = Math.min(xScale.getPixelForValue(null, i) - xScale.getPixelForValue(null, i - 1), min); + min = Math.min(xScale.getPixelForTick(i) - xScale.getPixelForTick(i - 1), min); } return min; }).call(this); @@ -290,7 +290,7 @@ var barIndex = this.getBarIndex(datasetIndex); var ruler = this.getRuler(); - var leftTick = xScale.getPixelForValue(null, index, barIndex, this.chart.isCombo); + var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo); leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0; if (xScale.options.stacked) { diff --git a/src/core/core.scale.js b/src/core/core.scale.js index b7e47102b..ed25a3694 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -334,7 +334,11 @@ } // If it is in fact an object, dive in one more level if (typeof(rawValue) === "object") { - return getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y); + if (rawValue instanceof Date) { + return rawValue; + } else { + return getRightValue(this.isHorizontal() ? rawValue.x : rawValue.y); + } } // Value is good, return it diff --git a/src/scales/scale.time.js b/src/scales/scale.time.js index 7c132d306..8c957beb0 100644 --- a/src/scales/scale.time.js +++ b/src/scales/scale.time.js @@ -164,9 +164,9 @@ if (helpers.isArray(unitDefinition.steps) && Math.ceil(this.tickRange / labelCapacity) < helpers.max(unitDefinition.steps)) { // Use one of the prefedined steps - for (var idx = 1; idx < unitDefinition.steps.length; ++idx) { + for (var idx = 0; idx < unitDefinition.steps.length; ++idx) { if (unitDefinition.steps[idx] > Math.ceil(this.tickRange / labelCapacity)) { - this.unitScale = unitDefinition.steps[idx - 1]; + this.unitScale = unitDefinition.steps[idx]; break; } } @@ -224,11 +224,16 @@ label = this.getRightValue(this.chart.data.datasets[datasetIndex].data[index]); } + // Format nicely + if (this.options.time.tooltipFormat) { + label = this.parseTime(label).format(this.options.time.tooltipFormat); + } + return label; }, convertTicksToLabels: function() { this.ticks = this.ticks.map(function(tick, index, ticks) { - var formattedTick = tick.format(this.options.time.displayFormat ? this.options.time.displayFormat : this.options.time.displayFormats[this.tickUnit]); + var formattedTick = tick.format(this.displayFormat); if (this.options.ticks.userCallback) { return this.options.ticks.userCallback(formattedTick, index, ticks); @@ -250,7 +255,6 @@ return this.left + Math.round(valueOffset); } else { - //return this.top + (decimal * (this.height / this.ticks.length)); var innerHeight = this.height - (this.paddingTop + this.paddingBottom); var valueHeight = innerHeight / Math.max(this.ticks.length - 1, 1); var heightOffset = (innerHeight * decimal) + this.paddingTop; diff --git a/test/scale.time.tests.js b/test/scale.time.tests.js index a8a6c1a27..c67b92908 100644 --- a/test/scale.time.tests.js +++ b/test/scale.time.tests.js @@ -92,7 +92,35 @@ describe('Time scale tests', function() { scale.update(400, 50); // Counts down because the lines are drawn top to bottom - expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 2, 2015', 'Jan 3, 2015', 'Jan 4, 2015', 'Jan 5, 2015', 'Jan 6, 2015', 'Jan 7, 2015', 'Jan 8, 2015', 'Jan 9, 2015', 'Jan 10, 2015', 'Jan 11, 2015']); + expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 3, 2015', 'Jan 5, 2015', 'Jan 7, 2015', 'Jan 9, 2015', 'Jan 11, 2015']); + }); + + it('should build ticks using date objects', function() { + // Helper to build date objects + function newDateFromRef(days) { + return moment('01/01/2015 12:00', 'DD/MM/YYYY HH:mm').add(days, 'd').toDate(); + } + + var scaleID = 'myScale'; + var mockData = { + labels: [newDateFromRef(0), newDateFromRef(1), newDateFromRef(2), newDateFromRef(4), newDateFromRef(6), newDateFromRef(7), newDateFromRef(9)], // days + }; + + var mockContext = window.createMockContext(); + var Constructor = Chart.scaleService.getScaleConstructor('time'); + var scale = new Constructor({ + ctx: mockContext, + options: Chart.scaleService.getScaleDefaults('time'), // use default config for scale + chart: { + data: mockData + }, + id: scaleID + }); + + scale.update(400, 50); + + // Counts down because the lines are drawn top to bottom + expect(scale.ticks).toEqual(['Jan 1, 2015', 'Jan 3, 2015', 'Jan 5, 2015', 'Jan 7, 2015', 'Jan 9, 2015', 'Jan 11, 2015', 'Jan 13, 2015']); }); it('should build ticks using the config unit', function() {