first commit

WebRoot/node_modules/chart.js/docs/general/README.md

@@ -0,0 +1,10 @@
+# General Configuration
+
+These sections describe general configuration options that can apply elsewhere in the documentation.
+
+* [Responsive](./responsive.md) defines responsive chart options that apply to all charts.
+* [Device Pixel Ratio](./device-pixel-ratio.md) defines the ratio between display pixels and rendered pixels.
+* [Interactions](./interactions/README.md) defines options that reflect how hovering chart elements works.
+* [Options](./options.md) scriptable and indexable options syntax.
+* [Colors](./colors.md) defines acceptable color values.
+* [Font](./fonts.md) defines various font options.

WebRoot/node_modules/chart.js/docs/general/colors.md

@@ -0,0 +1,49 @@
+# Colors
+
+When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`
+
+You can also pass a [CanvasGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.
+
+## Patterns and Gradients
+
+An alternative option is to pass a [CanvasPattern](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern) or [CanvasGradient](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient) object instead of a string colour.
+
+For example, if you wanted to fill a dataset with a pattern from an image you could do the following.
+
+```javascript
+var img = new Image();
+img.src = 'https://example.com/my_image.png';
+img.onload = function() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    var fillPattern = ctx.createPattern(img, 'repeat');
+
+    var chart = new Chart(ctx, {
+        data: {
+            labels: ['Item 1', 'Item 2', 'Item 3'],
+            datasets: [{
+                data: [10, 20, 30],
+                backgroundColor: fillPattern
+            }]
+        }
+    })
+}
+```
+
+Using pattern fills for data graphics can help viewers with vision deficiencies (e.g. color-blindness or partial sight) to [more easily understand your data](http://betweentwobrackets.com/data-graphics-and-colour-vision/).
+
+Using the [Patternomaly](https://github.com/ashiguruma/patternomaly) library you can generate patterns to fill datasets.
+
+```javascript
+var chartData = {
+    datasets: [{
+        data: [45, 25, 20, 10],
+        backgroundColor: [
+            pattern.draw('square', '#ff6384'),
+            pattern.draw('circle', '#36a2eb'),
+            pattern.draw('diamond', '#cc65fe'),
+            pattern.draw('triangle', '#ffce56'),
+        ]
+    }],
+    labels: ['Red', 'Blue', 'Purple', 'Yellow']
+};
+```

WebRoot/node_modules/chart.js/docs/general/device-pixel-ratio.md

@@ -0,0 +1,13 @@
+# Device Pixel Ratio
+
+By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).
+
+For applications where a chart will be converted to a bitmap, or printed to a higher DPI medium it can be desirable to render the chart at a higher resolution than the default.
+
+Setting `devicePixelRatio` to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.
+
+## Configuration Options
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio.

WebRoot/node_modules/chart.js/docs/general/fonts.md

@@ -0,0 +1,32 @@
+# Fonts
+
+There are 4 special global settings that can change all of the fonts on the chart. These options are in `Chart.defaults.global`. The global font settings only apply when more specific options are not included in the config.
+
+For example, in this chart the text will all be red except for the labels in the legend.
+
+```javascript
+Chart.defaults.global.defaultFontColor = 'red';
+let chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        legend: {
+            labels: {
+                // This more specific font property overrides the global property
+                fontColor: 'black'
+            }
+        }
+    }
+});
+```
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `defaultFontColor` | `Color` | `'#666'` | Default font color for all text.
+| `defaultFontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text.
+| `defaultFontSize` | `Number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels.
+| `defaultFontStyle` | `String` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title.
+
+## Non-Existant Fonts
+
+If a font is specified for a chart that does exist on the system, the browser will not apply the font when it is set. If you notice odd fonts appearing in your charts, check that the font you are applying exists on your system. See [issue 3318](https://github.com/chartjs/Chart.js/issues/3318) for more details.

WebRoot/node_modules/chart.js/docs/general/interactions/README.md

@@ -0,0 +1,10 @@
+# Interactions
+
+The hover configuration is passed into the `options.hover` namespace. The global hover configuration is at `Chart.defaults.global.hover`. To configure which events trigger chart interactions, see [events](./events.md#events).
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `mode` | `String` | `'nearest'` | Sets which elements appear in the tooltip. See [Interaction Modes](./modes.md#interaction-modes) for details.
+| `intersect` | `Boolean` | `true` | if true, the hover mode only applies when the mouse position intersects an item on the chart.
+| `axis` | `String` | `'x'` | Can be set to `'x'`, `'y'`, or `'xy'` to define which directions are used in calculating distances. Defaults to `'x'` for `index` mode and `'xy'` in `dataset` and `nearest` modes.
+| `animationDuration` | `Number` | `400` | Duration in milliseconds it takes to animate hover style changes.

WebRoot/node_modules/chart.js/docs/general/interactions/events.md

@@ -0,0 +1,21 @@
+# Events
+The following properties define how the chart interacts with events.
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `events` | `String[]` | `["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"]` | The `events` option defines the browser events that the chart should listen to for tooltips and hovering. [more...](#event-option)
+| `onHover` | `Function` | `null` | Called when any of the events fire. Called in the context of the chart and passed the event and an array of active elements (bars, points, etc).
+| `onClick` | `Function` | `null` | Called if the event is of type 'mouseup' or 'click'. Called in the context of the chart and passed the event and an array of active elements
+
+## Event Option
+For example, to have the chart only respond to click events, you could do
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        // This chart will not respond to mousemove, etc
+        events: ['click']
+    }
+});
+```

WebRoot/node_modules/chart.js/docs/general/interactions/modes.md

@@ -0,0 +1,119 @@
+# Interaction Modes
+
+When configuring interaction with the graph via hover or tooltips, a number of different modes are available.
+
+The modes are detailed below and how they behave in conjunction with the `intersect` setting.
+
+## point
+Finds all of the items that intersect the point.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'point'
+        }
+    }
+})
+```
+
+## nearest
+Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'nearest'
+        }
+    }
+})
+```
+
+## single (deprecated)
+Finds the first item that intersects the point and returns it. Behaves like 'nearest' mode with intersect = true.
+
+## label (deprecated)
+See `'index'` mode
+
+## index
+Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'index'
+        }
+    }
+})
+```
+
+To use index mode in a chart like the horizontal bar chart, where we search along the y direction, you can use the `axis` setting introduced in v2.7.0. By setting this value to `'y'` on the y direction is used.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'horizontalBar',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'index',
+            axis: 'y'
+        }
+    }
+})
+```
+
+## x-axis (deprecated)
+Behaves like `'index'` mode with `intersect = false`.
+
+## dataset
+Finds items in the same dataset. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item is used to determine the index.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'dataset'
+        }
+    }
+})
+```
+
+## x
+Returns all items that would intersect based on the `X` coordinate of the position only. Would be useful for a vertical cursor implementation. Note that this only applies to cartesian charts
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'x'
+        }
+    }
+})
+```
+
+## y
+Returns all items that would intersect based on the `Y` coordinate of the position. This would be useful for a horizontal cursor implementation. Note that this only applies to cartesian charts.
+
+```javascript
+var chart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+        tooltips: {
+            mode: 'y'
+        }
+    }
+})
+```

WebRoot/node_modules/chart.js/docs/general/options.md

@@ -0,0 +1,48 @@
+# Options
+
+## Scriptable Options
+
+Scriptable options also accept a function which is called for each data and that takes the unique argument `context` representing contextual information (see [option context](options.md#option-context)).
+
+Example:
+
+```javascript
+color: function(context) {
+    var index = context.dataIndex;
+    var value = context.dataset.data[index];
+    return value < 0 ? 'red' :  // draw negative values in red
+        index % 2 ? 'blue' :    // else, alternate values in blue and green
+        'green';
+}
+```
+
+> **Note:** scriptable options are only supported by a few bubble chart options.
+
+## Indexable Options
+
+Indexable options also accept an array in which each item corresponds to the element at the same index. Note that this method requires to provide as many items as data, so, in most cases, using a [function](#scriptable-options) is more appropriated if supported.
+
+Example:
+
+```javascript
+color: [
+    'red',    // color for data at index 0
+    'blue',   // color for data at index 1
+    'green',  // color for data at index 2
+    'black',  // color for data at index 3
+    //...
+]
+```
+
+## Option Context
+
+The option context is used to give contextual information when resolving options and currently only applies to [scriptable options](#scriptable-options).
+
+The context object contains the following properties:
+
+- `chart`: the associated chart
+- `dataIndex`: index of the current data
+- `dataset`: dataset at index `datasetIndex`
+- `datasetIndex`: index of the current dataset
+
+**Important**: since the context can represent different types of entities (dataset, data, etc.), some properties may be `undefined` so be sure to test any context property before using it.

WebRoot/node_modules/chart.js/docs/general/responsive.md

@@ -0,0 +1,47 @@
+# Responsive Charts
+
+When it comes to change the chart size based on the window size, a major limitation is that the canvas *render* size (`canvas.width` and `.height`) can **not** be expressed with relative values, contrary to the *display* size (`canvas.style.width` and `.height`). Furthermore, these sizes are independent from each other and thus the canvas *render* size does not adjust automatically based on the *display* size, making the rendering inaccurate.
+
+The following examples **do not work**:
+
+- `<canvas height="40vh" width="80vw">`: **invalid** values, the canvas doesn't resize ([example](https://codepen.io/chartjs/pen/oWLZaR))
+- `<canvas style="height:40vh; width:80vw">`: **invalid** behavior, the canvas is resized but becomes blurry ([example](https://codepen.io/chartjs/pen/WjxpmO))
+
+Chart.js provides a [few options](#configuration-options) to enable responsiveness and control the resize behavior of charts by detecting when the canvas *display* size changes and update the *render* size accordingly.
+
+## Configuration Options
+
+| Name | Type | Default | Description
+| ---- | ---- | ------- | -----------
+| `responsive` | `Boolean` | `true` | Resizes the chart canvas when its container does ([important note...](#important-note)).
+| `responsiveAnimationDuration` | `Number` | `0` | Duration in milliseconds it takes to animate to new size after a resize event.
+| `maintainAspectRatio` | `Boolean` | `true` | Maintain the original canvas aspect ratio `(width / height)` when resizing.
+| `onResize` | `Function` | `null` | Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.
+
+## Important Note
+
+Detecting when the canvas size changes can not be done directly from the `CANVAS` element. Chart.js uses its parent container to update the canvas *render* and *display* sizes. However, this method requires the container to be **relatively positioned** and **dedicated to the chart canvas only**. Responsiveness can then be achieved by setting relative values for the container size ([example](https://codepen.io/chartjs/pen/YVWZbz)):
+
+```html
+<div class="chart-container" style="position: relative; height:40vh; width:80vw">
+    <canvas id="chart"></canvas>
+</div>
+```
+
+The chart can also be programmatically resized by modifying the container size:
+
+```javascript
+chart.canvas.parentNode.style.height = '128px';
+```
+
+## Printing Resizeable Charts
+
+CSS media queries allow changing styles when printing a page. The CSS applied from these media queries may cause charts to need to resize. However, the resize won't happen automatically. To support resizing charts when printing, one needs to hook the [onbeforeprint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) event and manually trigger resizing of each chart.
+
+```javascript
+function beforePrintHandler () {
+  for (var id in Chart.instances) {
+    Chart.instances[id].resize()
+  }
+}
+```