mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-29 08:07:59 +01:00
Moved chart.js to npm
This commit is contained in:
Josef Citrine
parent
a6c9393e3d
commit
2a7e774df5
4 changed files with 4 additions and 9552 deletions
|
|
@ -10,7 +10,9 @@
|
||||||
"dependencies": {},
|
"dependencies": {},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"angular": "^1.5.0",
|
"angular": "^1.5.0",
|
||||||
|
"angular-chart.js": "^1.0.0-alpha6",
|
||||||
"angular-ui-router": "^0.2.18",
|
"angular-ui-router": "^0.2.18",
|
||||||
|
"chart.js": "^2.1.0",
|
||||||
"coffee-loader": "^0.7.2",
|
"coffee-loader": "^0.7.2",
|
||||||
"coffee-script": "^1.10.0",
|
"coffee-script": "^1.10.0",
|
||||||
"gulp": "^3.9.0",
|
"gulp": "^3.9.0",
|
||||||
|
|
|
||||||
|
|
@ -40,11 +40,11 @@ require '../base/jquery.timeago'
|
||||||
require '../base/jquery.viewport'
|
require '../base/jquery.viewport'
|
||||||
require 'script!../base/marked'
|
require 'script!../base/marked'
|
||||||
require 'script!../base/moment'
|
require 'script!../base/moment'
|
||||||
require 'script!../base/chart'
|
|
||||||
require '../base/angular-chart'
|
|
||||||
require '../base/soundmanager2-nodebug'
|
require '../base/soundmanager2-nodebug'
|
||||||
require 'script!../base/tumblr'
|
require 'script!../base/tumblr'
|
||||||
require '../base/ui-bootstrap-tpls-0.4.0'
|
require '../base/ui-bootstrap-tpls-0.4.0'
|
||||||
|
require 'chart.js';
|
||||||
|
require 'angular-chart.js';
|
||||||
|
|
||||||
require '../shared/pfm-angular-marked'
|
require '../shared/pfm-angular-marked'
|
||||||
require '../shared/pfm-angular-sanitize'
|
require '../shared/pfm-angular-sanitize'
|
||||||
|
|
|
||||||
336
resources/assets/scripts/base/angular-chart.js
vendored
336
resources/assets/scripts/base/angular-chart.js
vendored
|
|
@ -1,336 +0,0 @@
|
||||||
(function (factory) {
|
|
||||||
'use strict';
|
|
||||||
if (typeof exports === 'object') {
|
|
||||||
// Node/CommonJS
|
|
||||||
module.exports = factory(
|
|
||||||
typeof angular !== 'undefined' ? angular : require('angular'),
|
|
||||||
typeof Chart !== 'undefined' ? Chart : require('chart.js'));
|
|
||||||
} else if (typeof define === 'function' && define.amd) {
|
|
||||||
// AMD. Register as an anonymous module.
|
|
||||||
define(['angular', 'chart'], factory);
|
|
||||||
} else {
|
|
||||||
// Browser globals
|
|
||||||
if (typeof angular === 'undefined' || typeof Chart === 'undefined') throw new Error('Chart.js library needs to included, ' +
|
|
||||||
'see http://jtblin.github.io/angular-chart.js/');
|
|
||||||
factory(angular, Chart);
|
|
||||||
}
|
|
||||||
}(function (angular, Chart) {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
Chart.defaults.global.multiTooltipTemplate = '<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>';
|
|
||||||
Chart.defaults.global.elements.line.borderWidth = 2;
|
|
||||||
Chart.defaults.global.elements.rectangle.borderWidth = 2;
|
|
||||||
Chart.defaults.global.legend.display = false;
|
|
||||||
Chart.defaults.global.colors = [
|
|
||||||
'#97BBCD', // blue
|
|
||||||
'#DCDCDC', // light grey
|
|
||||||
'#F7464A', // red
|
|
||||||
'#46BFBD', // green
|
|
||||||
'#FDB45C', // yellow
|
|
||||||
'#949FB1', // grey
|
|
||||||
'#4D5360' // dark grey
|
|
||||||
];
|
|
||||||
|
|
||||||
var usingExcanvas = typeof window.G_vmlCanvasManager === 'object' &&
|
|
||||||
window.G_vmlCanvasManager !== null &&
|
|
||||||
typeof window.G_vmlCanvasManager.initElement === 'function';
|
|
||||||
|
|
||||||
if (usingExcanvas) Chart.defaults.global.animation = false;
|
|
||||||
|
|
||||||
return angular.module('chart.js', [])
|
|
||||||
.provider('ChartJs', ChartJsProvider)
|
|
||||||
.factory('ChartJsFactory', ['ChartJs', '$timeout', ChartJsFactory])
|
|
||||||
.directive('chartBase', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory(); }])
|
|
||||||
.directive('chartLine', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('line'); }])
|
|
||||||
.directive('chartBar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('bar'); }])
|
|
||||||
.directive('chartRadar', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('radar'); }])
|
|
||||||
.directive('chartDoughnut', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('doughnut'); }])
|
|
||||||
.directive('chartPie', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('pie'); }])
|
|
||||||
.directive('chartPolarArea', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('polarArea'); }]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wrapper for chart.js
|
|
||||||
* Allows configuring chart js using the provider
|
|
||||||
*
|
|
||||||
* angular.module('myModule', ['chart.js']).config(function(ChartJsProvider) {
|
|
||||||
* ChartJsProvider.setOptions({ responsive: true });
|
|
||||||
* ChartJsProvider.setOptions('Line', { responsive: false });
|
|
||||||
* })))
|
|
||||||
*/
|
|
||||||
function ChartJsProvider () {
|
|
||||||
var options = {};
|
|
||||||
var ChartJs = {
|
|
||||||
Chart: Chart,
|
|
||||||
getOptions: function (type) {
|
|
||||||
var typeOptions = type && options[type] || {};
|
|
||||||
return angular.extend({}, options, typeOptions);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Allow to set global options during configuration
|
|
||||||
*/
|
|
||||||
this.setOptions = function (type, customOptions) {
|
|
||||||
// If no type was specified set option for the global object
|
|
||||||
if (! customOptions) {
|
|
||||||
customOptions = type;
|
|
||||||
options = angular.extend(options, customOptions);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Set options for the specific chart
|
|
||||||
options[type] = angular.extend(options[type] || {}, customOptions);
|
|
||||||
};
|
|
||||||
|
|
||||||
this.$get = function () {
|
|
||||||
return ChartJs;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function ChartJsFactory (ChartJs, $timeout) {
|
|
||||||
return function chart (type) {
|
|
||||||
return {
|
|
||||||
restrict: 'CA',
|
|
||||||
scope: {
|
|
||||||
chartGetColor: '=?',
|
|
||||||
chartType: '=',
|
|
||||||
chartData: '=?',
|
|
||||||
chartLabels: '=?',
|
|
||||||
chartOptions: '=?',
|
|
||||||
chartSeries: '=?',
|
|
||||||
chartColors: '=?',
|
|
||||||
chartClick: '=?',
|
|
||||||
chartHover: '=?',
|
|
||||||
chartYAxes: '=?'
|
|
||||||
},
|
|
||||||
link: function (scope, elem/*, attrs */) {
|
|
||||||
var chart;
|
|
||||||
|
|
||||||
if (usingExcanvas) window.G_vmlCanvasManager.initElement(elem[0]);
|
|
||||||
|
|
||||||
// Order of setting "watch" matter
|
|
||||||
|
|
||||||
scope.$watch('chartData', function (newVal, oldVal) {
|
|
||||||
if (! newVal || ! newVal.length || (Array.isArray(newVal[0]) && ! newVal[0].length)) {
|
|
||||||
destroyChart(chart, scope);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var chartType = type || scope.chartType;
|
|
||||||
if (! chartType) return;
|
|
||||||
|
|
||||||
if (chart && canUpdateChart(newVal, oldVal))
|
|
||||||
return updateChart(chart, newVal, scope);
|
|
||||||
|
|
||||||
createChart(chartType);
|
|
||||||
}, true);
|
|
||||||
|
|
||||||
scope.$watch('chartSeries', resetChart, true);
|
|
||||||
scope.$watch('chartLabels', resetChart, true);
|
|
||||||
scope.$watch('chartOptions', resetChart, true);
|
|
||||||
scope.$watch('chartColors', resetChart, true);
|
|
||||||
|
|
||||||
scope.$watch('chartType', function (newVal, oldVal) {
|
|
||||||
if (isEmpty(newVal)) return;
|
|
||||||
if (angular.equals(newVal, oldVal)) return;
|
|
||||||
createChart(newVal);
|
|
||||||
});
|
|
||||||
|
|
||||||
scope.$on('$destroy', function () {
|
|
||||||
destroyChart(chart, scope);
|
|
||||||
});
|
|
||||||
|
|
||||||
function resetChart (newVal, oldVal) {
|
|
||||||
if (isEmpty(newVal)) return;
|
|
||||||
if (angular.equals(newVal, oldVal)) return;
|
|
||||||
var chartType = type || scope.chartType;
|
|
||||||
if (! chartType) return;
|
|
||||||
|
|
||||||
// chart.update() doesn't work for series and labels
|
|
||||||
// so we have to re-create the chart entirely
|
|
||||||
createChart(chartType);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createChart (type) {
|
|
||||||
// TODO: check parent?
|
|
||||||
if (isResponsive(type, scope) && elem[0].clientHeight === 0) {
|
|
||||||
return $timeout(function () {
|
|
||||||
createChart(type);
|
|
||||||
}, 50, false);
|
|
||||||
}
|
|
||||||
if (! scope.chartData || ! scope.chartData.length) return;
|
|
||||||
scope.chartGetColor = typeof scope.chartGetColor === 'function' ? scope.chartGetColor : getRandomColor;
|
|
||||||
var colors = getColors(type, scope);
|
|
||||||
var cvs = elem[0], ctx = cvs.getContext('2d');
|
|
||||||
var data = Array.isArray(scope.chartData[0]) ?
|
|
||||||
getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartYAxes) :
|
|
||||||
getData(scope.chartLabels, scope.chartData, colors);
|
|
||||||
|
|
||||||
var options = angular.extend({}, ChartJs.getOptions(type), scope.chartOptions);
|
|
||||||
// Destroy old chart if it exists to avoid ghost charts issue
|
|
||||||
// https://github.com/jtblin/angular-chart.js/issues/187
|
|
||||||
destroyChart(chart, scope);
|
|
||||||
|
|
||||||
chart = new ChartJs.Chart(ctx, {
|
|
||||||
type: type,
|
|
||||||
data: data,
|
|
||||||
options: options
|
|
||||||
});
|
|
||||||
scope.$emit('chart-create', chart);
|
|
||||||
|
|
||||||
// Bind events
|
|
||||||
cvs.onclick = scope.chartClick ? getEventHandler(scope, chart, 'chartClick', false) : angular.noop;
|
|
||||||
cvs.onmousemove = scope.chartHover ? getEventHandler(scope, chart, 'chartHover', true) : angular.noop;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
function canUpdateChart (newVal, oldVal) {
|
|
||||||
if (newVal && oldVal && newVal.length && oldVal.length) {
|
|
||||||
return Array.isArray(newVal[0]) ?
|
|
||||||
newVal.length === oldVal.length && newVal.every(function (element, index) {
|
|
||||||
return element.length === oldVal[index].length; }) :
|
|
||||||
oldVal.reduce(sum, 0) > 0 ? newVal.length === oldVal.length : false;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function sum (carry, val) {
|
|
||||||
return carry + val;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEventHandler (scope, chart, action, triggerOnlyOnChange) {
|
|
||||||
var lastState = null;
|
|
||||||
return function (evt) {
|
|
||||||
var atEvent = chart.getElementsAtEvent || chart.getPointsAtEvent;
|
|
||||||
if (atEvent) {
|
|
||||||
var activePoints = atEvent.call(chart, evt);
|
|
||||||
if (triggerOnlyOnChange === false || angular.equals(lastState, activePoints) === false) {
|
|
||||||
lastState = activePoints;
|
|
||||||
scope[action](activePoints, evt);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getColors (type, scope) {
|
|
||||||
var colors = angular.copy(scope.chartColors ||
|
|
||||||
ChartJs.getOptions(type).chartColors ||
|
|
||||||
Chart.defaults.global.colors
|
|
||||||
);
|
|
||||||
var notEnoughColors = colors.length < scope.chartData.length;
|
|
||||||
while (colors.length < scope.chartData.length) {
|
|
||||||
colors.push(scope.chartGetColor());
|
|
||||||
}
|
|
||||||
// mutate colors in this case as we don't want
|
|
||||||
// the colors to change on each refresh
|
|
||||||
if (notEnoughColors) scope.chartColors = colors;
|
|
||||||
return colors.map(convertColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
function convertColor (color) {
|
|
||||||
if (typeof color === 'object' && color !== null) return color;
|
|
||||||
if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
|
|
||||||
return getRandomColor();
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRandomColor () {
|
|
||||||
var color = [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
|
|
||||||
return getColor(color);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getColor (color) {
|
|
||||||
return {
|
|
||||||
backgroundColor: rgba(color, 0.2),
|
|
||||||
borderColor: rgba(color, 1),
|
|
||||||
pointBackgroundColor: rgba(color, 1),
|
|
||||||
pointBorderColor: '#fff',
|
|
||||||
pointHoverBackgroundColor: '#fff',
|
|
||||||
pointHoverBorderColor: rgba(color, 0.8)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getRandomInt (min, max) {
|
|
||||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
||||||
}
|
|
||||||
|
|
||||||
function rgba (color, alpha) {
|
|
||||||
if (usingExcanvas) {
|
|
||||||
// rgba not supported by IE8
|
|
||||||
return 'rgb(' + color.join(',') + ')';
|
|
||||||
} else {
|
|
||||||
return 'rgba(' + color.concat(alpha).join(',') + ')';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Credit: http://stackoverflow.com/a/11508164/1190235
|
|
||||||
function hexToRgb (hex) {
|
|
||||||
var bigint = parseInt(hex, 16),
|
|
||||||
r = (bigint >> 16) & 255,
|
|
||||||
g = (bigint >> 8) & 255,
|
|
||||||
b = bigint & 255;
|
|
||||||
|
|
||||||
return [r, g, b];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDataSets (labels, data, series, colors, yaxis) {
|
|
||||||
return {
|
|
||||||
labels: labels,
|
|
||||||
datasets: data.map(function (item, i) {
|
|
||||||
var dataset = angular.extend({}, colors[i], {
|
|
||||||
label: series[i],
|
|
||||||
data: item
|
|
||||||
});
|
|
||||||
if (yaxis) {
|
|
||||||
dataset.yAxisID = yaxis[i];
|
|
||||||
}
|
|
||||||
return dataset;
|
|
||||||
})
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getData (labels, data, colors) {
|
|
||||||
return {
|
|
||||||
labels: labels,
|
|
||||||
datasets: [{
|
|
||||||
data: data,
|
|
||||||
backgroundColor: colors.map(function (color) {
|
|
||||||
return color.pointBackgroundColor;
|
|
||||||
}),
|
|
||||||
hoverBackgroundColor: colors.map(function (color) {
|
|
||||||
return color.backgroundColor;
|
|
||||||
})
|
|
||||||
}]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateChart (chart, values, scope) {
|
|
||||||
if (Array.isArray(scope.chartData[0])) {
|
|
||||||
chart.data.datasets.forEach(function (dataset, i) {
|
|
||||||
dataset.data = values[i];
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
chart.data.datasets[0].data = values;
|
|
||||||
}
|
|
||||||
|
|
||||||
chart.update();
|
|
||||||
scope.$emit('chart-update', chart);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isEmpty (value) {
|
|
||||||
return ! value ||
|
|
||||||
(Array.isArray(value) && ! value.length) ||
|
|
||||||
(typeof value === 'object' && ! Object.keys(value).length);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isResponsive (type, scope) {
|
|
||||||
var options = angular.extend({}, Chart.defaults.global, ChartJs.getOptions(type), scope.chartOptions);
|
|
||||||
return options.responsive;
|
|
||||||
}
|
|
||||||
|
|
||||||
function destroyChart(chart, scope) {
|
|
||||||
if(! chart) return;
|
|
||||||
chart.destroy();
|
|
||||||
scope.$emit('chart-destroy', chart);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue