Allow using either moment or luxon in pluggable fashion

docs/getting-started/installation.md

@@ -1,22 +1,48 @@
 # Installation
-Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.
 
-## npm
+Chart.js can be installed as a dependency of your application via [npm](https://www.npmjs.com/package/chart.js) or [bower](https://libraries.io/bower/chartjs). It is recommended to get Chart.js this way.
+
+## Including as a dependency in your build
+
+### Optional Chart.js dependencies
+
+If you are using the time scale you will need to include either [Moment.js](https://momentjs.com) or [Luxon](https://moment.github.io/luxon/docs/manual/install.html#node) in your dependencies. If you do not include Moment.js you will receive a warning that it is missing from your build. You may ignore this warning if you are not using the time scale or have included Luxon.
+
+### npm
 [![npm](https://img.shields.io/npm/v/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js)
 [![npm](https://img.shields.io/npm/dm/chart.js.svg?style=flat-square&maxAge=600)](https://npmjs.com/package/chart.js)
 
 ```bash
 npm install chart.js --save
 ```
 
-## Bower
+### Bower
 [![bower](https://img.shields.io/bower/v/chartjs.svg?style=flat-square&maxAge=600)](https://libraries.io/bower/chartjs)
 
 ```bash
 bower install chart.js --save
 ```
 
-## CDN
+## Pre-built scripts
+
+Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
+
+### Stand-Alone Build
+Files:
+* `dist/Chart.js`
+* `dist/Chart.min.js`
+
+The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](http://momentjs.com/) before Chart.js for the functionality of the time axis.
+
+### Bundled Build
+Files:
+* `dist/Chart.bundle.js`
+* `dist/Chart.bundle.min.js`
+
+The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
+
+You can get these builds from the CDNs below.
+
 ### CDNJS
 [![cdnjs](https://img.shields.io/cdnjs/v/Chart.js.svg?style=flat-square&maxAge=600)](https://cdnjs.com/libraries/Chart.js)
 
@@ -31,27 +57,9 @@ Chart.js built files are also available through [jsDelivr](https://www.jsdelivr.
 
 https://www.jsdelivr.com/package/npm/chart.js?path=dist
 
-## Github
+### Github
 [![github](https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/Chart.js/releases/latest)
 
 You can download the latest version of [Chart.js on GitHub](https://github.com/chartjs/Chart.js/releases/latest).
 
 If you download or clone the repository, you must [build](../developers/contributing.md#building-and-testing) Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is **strongly** advised.
-
-# Selecting the Correct Build
-
-Chart.js provides two different builds for you to choose: `Stand-Alone Build`, `Bundled Build`.
-
-## Stand-Alone Build
-Files:
-* `dist/Chart.js`
-* `dist/Chart.min.js`
-
-The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include [Moment.js](https://momentjs.com/) before Chart.js for the functionality of the time axis.
-
-## Bundled Build
-Files:
-* `dist/Chart.bundle.js`
-* `dist/Chart.bundle.min.js`
-
-The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.

package.json

@@ -47,6 +47,8 @@
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
     "karma-rollup-preprocessor": "^6.1.1",
+    "moment": "^2.10.2",
+    "luxon": "^1.2.1",
     "merge-stream": "^1.0.1",
     "pixelmatch": "^4.0.2",
     "rollup": "^0.67.4",
@@ -58,7 +60,9 @@
     "yargs": "^12.0.5"
   },
   "dependencies": {
-    "chartjs-color": "^2.1.0",
+    "chartjs-color": "^2.1.0"
+  },
+  "peerDependencies": {
     "moment": "^2.10.2"
   }
 }

samples/samples.js

@@ -113,8 +113,11 @@
 			title: 'Line (point data)',
 			path: 'scales/time/line-point-data.html'
 		}, {
-			title: 'Time Series',
+			title: 'Time Series - Moment',
 			path: 'scales/time/financial.html'
+		}, {
+			title: 'Time Series - Luxon',
+			path: 'scales/time/financial-luxon.html'
 		}, {
 			title: 'Combo',
 			path: 'scales/time/combo.html'

samples/scales/time/financial-luxon.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+
+<head>
+	<title>Line Chart</title>
+	<script src="https://moment.github.io/luxon/global/luxon.min.js"></script>
+	<script src="../../../dist/Chart.js"></script>
+	<script src="../../utils.js"></script>
+	<style>
+		canvas {
+			-moz-user-select: none;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>
+</head>
+
+<body>
+	<div style="width:1000px">
+		<canvas id="chart1"></canvas>
+	</div>
+	<br>
+	<br>
+	Chart Type:
+	<select id="type">
+		<option value="line">Line</option>
+		<option value="bar">Bar</option>
+	</select>
+	<button id="update">update</button>
+	<script>
+		function randomNumber(min, max) {
+			return Math.random() * (max - min) + min;
+		}
+
+		function randomBar(date, lastClose) {
+			var open = randomNumber(lastClose * 0.95, lastClose * 1.05);
+			var close = randomNumber(open * 0.95, open * 1.05);
+			return {
+				t: date.valueOf(),
+				y: close
+			};
+		}
+
+		var date = window.luxon.DateTime.local(2017, 4, 1, 0, 0);
+		var data = [randomBar(date, 30)];
+		var labels = [date.valueOf()];
+		while (data.length < 60) {
+			date = date.plus({days: 1});
+			if (date.weekday <= 5) {
+				data.push(randomBar(date, data[data.length - 1].y));
+				labels.push(date.valueOf());
+			}
+		}
+
+		var ctx = document.getElementById('chart1').getContext('2d');
+		ctx.canvas.width = 1000;
+		ctx.canvas.height = 300;
+
+		var color = Chart.helpers.color;
+		var cfg = {
+			type: 'bar',
+			data: {
+				labels: labels,
+				datasets: [{
+					label: 'CHRT - Chart.js Corporation',
+					backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
+					borderColor: window.chartColors.red,
+					data: data,
+					type: 'line',
+					pointRadius: 0,
+					fill: false,
+					lineTension: 0,
+					borderWidth: 2
+				}]
+			},
+			options: {
+				scales: {
+					xAxes: [{
+						type: 'time',
+						distribution: 'series',
+						ticks: {
+							source: 'labels'
+						}
+					}],
+					yAxes: [{
+						scaleLabel: {
+							display: true,
+							labelString: 'Closing price ($)'
+						}
+					}]
+				}
+			}
+		};
+		var chart = new Chart(ctx, cfg);
+
+		document.getElementById('update').addEventListener('click', function() {
+			var type = document.getElementById('type').value;
+			chart.config.data.datasets[0].type = type;
+			chart.update();
+		});
+
+	</script>
+</body>
+
+</html>

src/helpers/helpers.date.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var luxonHelpers = require('./helpers.luxon');
+var momentHelpers = require('./helpers.moment');
+
+module.exports = momentHelpers.moment ? momentHelpers : (luxonHelpers.luxon ? luxonHelpers : undefined);

src/helpers/helpers.luxon.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var luxon, DateTime;
+try {
+	luxon = require('luxon'); // eslint-disable-line global-require
+	luxon = (luxon && luxon.DateTime) ? luxon : window.luxon;
+	DateTime = luxon.DateTime;
+} catch (lxe) {
+	// swallow the error here
+}
+
+
+module.exports = {
+
+	luxon: luxon,
+
+	createDate: function(value) {
+		if (value === undefined) {
+			value = new Date();
+		}
+
+		if (typeof value === 'number') {
+			return DateTime.fromMillis(value);
+		}
+		if (value instanceof Date) {
+			return DateTime.fromJSDate(value);
+		}
+		if (value instanceof DateTime) {
+			return value;
+		}
+		return undefined;
+	},
+
+	isValid: function(date) {
+		return date.isValid;
+	},
+
+	millisecond: function(date) {
+		return date.millisecond;
+	},
+
+	second: function(date) {
+		return date.second;
+	},
+
+	minute: function(date) {
+		return date.minute;
+	},
+
+	hour: function(date) {
+		return date.hour;
+	},
+
+	isoWeekday: function(date, value) {
+		return date.isoWeekday(value);
+	},
+
+	startOf: function(date, value) {
+		return date.startOf(value);
+	},
+
+	endOf: function(date, value) {
+		return date.endOf(value);
+	},
+
+	valueOf: function(date) {
+		return date.valueOf();
+	},
+
+	toFormat: function(date, format) {
+		return date.toFormat(format);
+	},
+
+	add: function(date, value, type) {
+		var arg = {};
+		arg[type] = value;
+		return date.plus(arg);
+	},
+
+	diff: function(date, other, unit) {
+		var duration = date.diff(other);
+		return duration.as(unit);
+	},
+
+	defaultDisplayFormats: {
+		millisecond: 'h:mm:ss.SSS a', // 11:20:01.123 AM,
+		second: 'h:mm:ss a', // 11:20:01 AM
+		minute: 'h:mm a', // 11:20 AM
+		hour: 'ha', // 5PM
+		day: 'MMM d', // Sep 4
+		week: 'WW', // Week 46, or maybe "[W]WW - YYYY" ?
+		month: 'MMM yyyy', // Sept 2015
+		quarter: '\'Q\'q - yyyy', // Q3 - 2015
+		year: 'yyyy' // 2015
+	}
+};