1021 lines
32 KiB
JavaScript
1021 lines
32 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
function __$styleInject(css, ref) {
|
|
if ( ref === void 0 ) ref = {};
|
|
var insertAt = ref.insertAt;
|
|
|
|
if (!css || typeof document === 'undefined') { return; }
|
|
|
|
var head = document.head || document.getElementsByTagName('head')[0];
|
|
var style = document.createElement('style');
|
|
style.type = 'text/css';
|
|
|
|
if (insertAt === 'top') {
|
|
if (head.firstChild) {
|
|
head.insertBefore(style, head.firstChild);
|
|
} else {
|
|
head.appendChild(style);
|
|
}
|
|
} else {
|
|
head.appendChild(style);
|
|
}
|
|
|
|
if (style.styleSheet) {
|
|
style.styleSheet.cssText = css;
|
|
} else {
|
|
style.appendChild(document.createTextNode(css));
|
|
}
|
|
}
|
|
|
|
var asyncGenerator = function () {
|
|
function AwaitValue(value) {
|
|
this.value = value;
|
|
}
|
|
|
|
function AsyncGenerator(gen) {
|
|
var front, back;
|
|
|
|
function send(key, arg) {
|
|
return new Promise(function (resolve, reject) {
|
|
var request = {
|
|
key: key,
|
|
arg: arg,
|
|
resolve: resolve,
|
|
reject: reject,
|
|
next: null
|
|
};
|
|
|
|
if (back) {
|
|
back = back.next = request;
|
|
} else {
|
|
front = back = request;
|
|
resume(key, arg);
|
|
}
|
|
});
|
|
}
|
|
|
|
function resume(key, arg) {
|
|
try {
|
|
var result = gen[key](arg);
|
|
var value = result.value;
|
|
|
|
if (value instanceof AwaitValue) {
|
|
Promise.resolve(value.value).then(function (arg) {
|
|
resume("next", arg);
|
|
}, function (arg) {
|
|
resume("throw", arg);
|
|
});
|
|
} else {
|
|
settle(result.done ? "return" : "normal", result.value);
|
|
}
|
|
} catch (err) {
|
|
settle("throw", err);
|
|
}
|
|
}
|
|
|
|
function settle(type, value) {
|
|
switch (type) {
|
|
case "return":
|
|
front.resolve({
|
|
value: value,
|
|
done: true
|
|
});
|
|
break;
|
|
|
|
case "throw":
|
|
front.reject(value);
|
|
break;
|
|
|
|
default:
|
|
front.resolve({
|
|
value: value,
|
|
done: false
|
|
});
|
|
break;
|
|
}
|
|
|
|
front = front.next;
|
|
|
|
if (front) {
|
|
resume(front.key, front.arg);
|
|
} else {
|
|
back = null;
|
|
}
|
|
}
|
|
|
|
this._invoke = send;
|
|
|
|
if (typeof gen.return !== "function") {
|
|
this.return = undefined;
|
|
}
|
|
}
|
|
|
|
if (typeof Symbol === "function" && Symbol.asyncIterator) {
|
|
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
|
|
return this;
|
|
};
|
|
}
|
|
|
|
AsyncGenerator.prototype.next = function (arg) {
|
|
return this._invoke("next", arg);
|
|
};
|
|
|
|
AsyncGenerator.prototype.throw = function (arg) {
|
|
return this._invoke("throw", arg);
|
|
};
|
|
|
|
AsyncGenerator.prototype.return = function (arg) {
|
|
return this._invoke("return", arg);
|
|
};
|
|
|
|
return {
|
|
wrap: function (fn) {
|
|
return function () {
|
|
return new AsyncGenerator(fn.apply(this, arguments));
|
|
};
|
|
},
|
|
await: function (value) {
|
|
return new AwaitValue(value);
|
|
}
|
|
};
|
|
}();
|
|
|
|
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
|
|
|
function $(expr, con) {
|
|
return typeof expr === "string" ? (con || document).querySelector(expr) : expr || null;
|
|
}
|
|
|
|
|
|
|
|
$.create = function (tag, o) {
|
|
var element = document.createElement(tag);
|
|
|
|
for (var i in o) {
|
|
var val = o[i];
|
|
|
|
if (i === "inside") {
|
|
$(val).appendChild(element);
|
|
} else if (i === "around") {
|
|
var ref = $(val);
|
|
ref.parentNode.insertBefore(element, ref);
|
|
element.appendChild(ref);
|
|
} else if (i === "onClick") {
|
|
element.addEventListener('click', val);
|
|
} else if (i === "styles") {
|
|
if ((typeof val === "undefined" ? "undefined" : _typeof(val)) === "object") {
|
|
Object.keys(val).map(function (prop) {
|
|
element.style[prop] = val[prop];
|
|
});
|
|
}
|
|
} else if (i in element) {
|
|
element[i] = val;
|
|
} else {
|
|
element.setAttribute(i, val);
|
|
}
|
|
}
|
|
|
|
return element;
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/
|
|
|
|
|
|
|
|
|
|
function insertAfter(newNode, referenceNode) {
|
|
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
|
|
}
|
|
|
|
// Playing around with dates
|
|
|
|
|
|
|
|
|
|
var NO_OF_MILLIS = 1000;
|
|
var SEC_IN_DAY = 86400;
|
|
|
|
|
|
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function clone(date) {
|
|
return new Date(date.getTime());
|
|
}
|
|
|
|
function timestampSec(date) {
|
|
return date.getTime() / NO_OF_MILLIS;
|
|
}
|
|
|
|
function timestampToMidnight(timestamp) {
|
|
var roundAhead = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
|
|
var midnightTs = Math.floor(timestamp - timestamp % SEC_IN_DAY);
|
|
if (roundAhead) {
|
|
return midnightTs + SEC_IN_DAY;
|
|
}
|
|
return midnightTs;
|
|
}
|
|
|
|
// export function getMonthsBetween(startDate, endDate) {}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// mutates
|
|
|
|
|
|
// mutates
|
|
function addDays(date, numberOfDays) {
|
|
date.setDate(date.getDate() + numberOfDays);
|
|
}
|
|
|
|
// Fixed 5-color theme,
|
|
// More colors are difficult to parse visually
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var HEATMAP_COLORS_BLUE = ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'];
|
|
var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'];
|
|
|
|
|
|
|
|
// Universal constants
|
|
|
|
/**
|
|
* Returns the value of a number upto 2 decimal places.
|
|
* @param {Number} d Any number
|
|
*/
|
|
|
|
|
|
/**
|
|
* Returns whether or not two given arrays are equal.
|
|
* @param {Array} arr1 First array
|
|
* @param {Array} arr2 Second array
|
|
*/
|
|
|
|
|
|
/**
|
|
* Shuffles array in place. ES6 version
|
|
* @param {Array} array An array containing the items.
|
|
*/
|
|
function shuffle(array) {
|
|
// Awesomeness: https://bost.ocks.org/mike/shuffle/
|
|
// https://stackoverflow.com/a/2450976/6495043
|
|
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
|
|
|
|
for (var i = array.length - 1; i > 0; i--) {
|
|
var j = Math.floor(Math.random() * (i + 1));
|
|
var _ref = [array[j], array[i]];
|
|
array[i] = _ref[0];
|
|
array[j] = _ref[1];
|
|
}
|
|
|
|
return array;
|
|
}
|
|
|
|
/**
|
|
* Fill an array with extra points
|
|
* @param {Array} array Array
|
|
* @param {Number} count number of filler elements
|
|
* @param {Object} element element to fill with
|
|
* @param {Boolean} start fill at start?
|
|
*/
|
|
|
|
|
|
/**
|
|
* Returns pixel width of string.
|
|
* @param {String} string
|
|
* @param {Number} charWidth Width of single char in pixels
|
|
*/
|
|
|
|
|
|
|
|
|
|
// https://stackoverflow.com/a/29325222
|
|
function getRandomBias(min, max, bias, influence) {
|
|
var range = max - min;
|
|
var biasValue = range * bias + min;
|
|
var rnd = Math.random() * range + min,
|
|
// random in range
|
|
mix = Math.random() * influence; // random mixer
|
|
return rnd * (1 - mix) + biasValue * mix; // mix full range and bias
|
|
}
|
|
|
|
|
|
|
|
function toTitleCase(str) {
|
|
return str.replace(/\w*/g, function (txt) {
|
|
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
|
});
|
|
}
|
|
|
|
// Composite Chart
|
|
// ================================================================================
|
|
var reportCountList = [152, 222, 199, 287, 534, 709, 1179, 1256, 1632, 1856, 1850];
|
|
|
|
var lineCompositeData = {
|
|
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017"],
|
|
|
|
yMarkers: [{
|
|
label: "Average 100 reports/month",
|
|
value: 1200,
|
|
options: { labelPos: 'left' }
|
|
}],
|
|
|
|
datasets: [{
|
|
"name": "Events",
|
|
"values": reportCountList
|
|
}]
|
|
};
|
|
|
|
var fireball_5_25 = [[4, 0, 3, 1, 1, 2, 1, 1, 1, 0, 1, 1], [2, 3, 3, 2, 1, 3, 0, 1, 2, 7, 10, 4], [5, 6, 2, 4, 0, 1, 4, 3, 0, 2, 0, 1], [0, 2, 6, 2, 1, 1, 2, 3, 6, 3, 7, 8], [6, 8, 7, 7, 4, 5, 6, 5, 22, 12, 10, 11], [7, 10, 11, 7, 3, 2, 7, 7, 11, 15, 22, 20], [13, 16, 21, 18, 19, 17, 12, 17, 31, 28, 25, 29], [24, 14, 21, 14, 11, 15, 19, 21, 41, 22, 32, 18], [31, 20, 30, 22, 14, 17, 21, 35, 27, 50, 117, 24], [32, 24, 21, 27, 11, 27, 43, 37, 44, 40, 48, 32], [31, 38, 36, 26, 23, 23, 25, 29, 26, 47, 61, 50]];
|
|
var fireball_2_5 = [[22, 6, 6, 9, 7, 8, 6, 14, 19, 10, 8, 20], [11, 13, 12, 8, 9, 11, 9, 13, 10, 22, 40, 24], [20, 13, 13, 19, 13, 10, 14, 13, 20, 18, 5, 9], [7, 13, 16, 19, 12, 11, 21, 27, 27, 24, 33, 33], [38, 25, 28, 22, 31, 21, 35, 42, 37, 32, 46, 53], [50, 33, 36, 34, 35, 28, 27, 52, 58, 59, 75, 69], [54, 67, 67, 45, 66, 51, 38, 64, 90, 113, 116, 87], [84, 52, 56, 51, 55, 46, 50, 87, 114, 83, 152, 93], [73, 58, 59, 63, 56, 51, 83, 140, 103, 115, 265, 89], [106, 95, 94, 71, 77, 75, 99, 136, 129, 154, 168, 156], [81, 102, 95, 72, 58, 91, 89, 122, 124, 135, 183, 171]];
|
|
var fireballOver25 = [
|
|
// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0], [1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 2], [3, 2, 1, 3, 2, 0, 2, 2, 2, 3, 0, 1], [2, 3, 5, 2, 1, 3, 0, 2, 3, 5, 1, 4], [7, 4, 6, 1, 9, 2, 2, 2, 20, 9, 4, 9], [5, 6, 1, 2, 5, 4, 5, 5, 16, 9, 14, 9], [5, 4, 7, 5, 1, 5, 3, 3, 5, 7, 22, 2], [5, 13, 11, 6, 1, 7, 9, 8, 14, 17, 16, 3], [8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]];
|
|
|
|
var barCompositeData = {
|
|
labels: MONTH_NAMES_SHORT,
|
|
datasets: [{
|
|
name: "Over 25 reports",
|
|
values: fireballOver25[9]
|
|
}, {
|
|
name: "5 to 25 reports",
|
|
values: fireball_5_25[9]
|
|
}, {
|
|
name: "2 to 5 reports",
|
|
values: fireball_2_5[9]
|
|
}]
|
|
};
|
|
|
|
// Demo Chart multitype Chart
|
|
// ================================================================================
|
|
var typeData = {
|
|
labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
|
|
|
|
yMarkers: [{
|
|
label: "Marker",
|
|
value: 43,
|
|
options: { labelPos: 'left'
|
|
// type: 'dashed'
|
|
} }],
|
|
|
|
yRegions: [{
|
|
label: "Region",
|
|
start: -10,
|
|
end: 50,
|
|
options: { labelPos: 'right' }
|
|
}],
|
|
|
|
datasets: [{
|
|
name: "Some Data",
|
|
values: [18, 40, 30, 35, 8, 52, 17, -4],
|
|
axisPosition: 'right',
|
|
chartType: 'bar'
|
|
}, {
|
|
name: "Another Set",
|
|
values: [30, 50, -10, 15, 18, 32, 27, 14],
|
|
axisPosition: 'right',
|
|
chartType: 'bar'
|
|
}, {
|
|
name: "Yet Another",
|
|
values: [15, 20, -3, -15, 58, 12, -17, 37],
|
|
chartType: 'line'
|
|
}]
|
|
};
|
|
|
|
var updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
|
|
|
|
var baseLength = 10;
|
|
var fullLength = 30;
|
|
|
|
var getRandom = function getRandom() {
|
|
return Math.floor(getRandomBias(-40, 60, 0.8, 1));
|
|
};
|
|
var updateDataAllValues = Array.from({ length: fullLength }, getRandom);
|
|
|
|
// We're gonna be shuffling this
|
|
var updateDataAllIndices = updateDataAllLabels.map(function (d, i) {
|
|
return i;
|
|
});
|
|
|
|
var getUpdateArray = function getUpdateArray(sourceArray) {
|
|
var length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
|
|
|
|
var indices = updateDataAllIndices.slice(0, length);
|
|
return indices.map(function (index) {
|
|
return sourceArray[index];
|
|
});
|
|
};
|
|
|
|
var currentLastIndex = baseLength;
|
|
|
|
function getUpdateData() {
|
|
shuffle(updateDataAllIndices);
|
|
var value = getRandom();
|
|
var start = getRandom();
|
|
var end = getRandom();
|
|
currentLastIndex = baseLength;
|
|
|
|
return {
|
|
labels: updateDataAllLabels.slice(0, baseLength),
|
|
datasets: [{
|
|
values: getUpdateArray(updateDataAllValues)
|
|
}],
|
|
yMarkers: [{
|
|
label: "Altitude",
|
|
value: value,
|
|
type: 'dashed'
|
|
}],
|
|
yRegions: [{
|
|
label: "Range",
|
|
start: start,
|
|
end: end
|
|
}]
|
|
};
|
|
}
|
|
|
|
function getAddUpdateData() {
|
|
if (currentLastIndex >= fullLength) return;
|
|
|
|
// TODO: Fix update on removal
|
|
currentLastIndex++;
|
|
var c = currentLastIndex - 1;
|
|
|
|
return [updateDataAllLabels[c], [updateDataAllValues[c]]];
|
|
|
|
// updateChart.addDataPoint(
|
|
// updateDataAllLabels[index], [updateDataAllValues[index]]
|
|
// );
|
|
}
|
|
|
|
var trendsData = {
|
|
labels: [1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
|
datasets: [{
|
|
values: [132.9, 150.0, 149.4, 148.0, 94.4, 97.6, 54.1, 49.2, 22.5, 18.4, 39.3, 131.0, 220.1, 218.9, 198.9, 162.4, 91.0, 60.5, 20.6, 14.8, 33.9, 123.0, 211.1, 191.8, 203.3, 133.0, 76.1, 44.9, 25.1, 11.6, 28.9, 88.3, 136.3, 173.9, 170.4, 163.6, 99.3, 65.3, 45.8, 24.7, 12.6, 4.2, 4.8, 24.9, 80.8, 84.5, 94.0, 113.3, 69.8, 39.8]
|
|
}]
|
|
};
|
|
|
|
var moonData = {
|
|
names: ["Ganymede", "Callisto", "Io", "Europa"],
|
|
masses: [14819000, 10759000, 8931900, 4800000],
|
|
distances: [1070.412, 1882.709, 421.700, 671.034],
|
|
diameters: [5262.4, 4820.6, 3637.4, 3121.6]
|
|
};
|
|
|
|
var eventsData = {
|
|
labels: ["Ganymede", "Callisto", "Io", "Europa"],
|
|
datasets: [{
|
|
"values": moonData.distances,
|
|
"formatted": moonData.distances.map(function (d) {
|
|
return d * 1000 + " km";
|
|
})
|
|
}]
|
|
};
|
|
|
|
// const jupiterMoons = {
|
|
// 'Ganymede': {
|
|
// mass: '14819000 x 10^16 kg',
|
|
// 'semi-major-axis': '1070412 km',
|
|
// 'diameter': '5262.4 km'
|
|
// },
|
|
// 'Callisto': {
|
|
// mass: '10759000 x 10^16 kg',
|
|
// 'semi-major-axis': '1882709 km',
|
|
// 'diameter': '4820.6 km'
|
|
// },
|
|
// 'Io': {
|
|
// mass: '8931900 x 10^16 kg',
|
|
// 'semi-major-axis': '421700 km',
|
|
// 'diameter': '3637.4 km'
|
|
// },
|
|
// 'Europa': {
|
|
// mass: '4800000 x 10^16 kg',
|
|
// 'semi-major-axis': '671034 km',
|
|
// 'diameter': '3121.6 km'
|
|
// },
|
|
// };
|
|
|
|
// ================================================================================
|
|
|
|
var today = new Date();
|
|
var start = clone(today);
|
|
addDays(start, 4);
|
|
var end = clone(start);
|
|
start.setFullYear(start.getFullYear() - 2);
|
|
end.setFullYear(end.getFullYear() - 1);
|
|
|
|
var dataPoints = {};
|
|
|
|
var startTs = timestampSec(start);
|
|
var endTs = timestampSec(end);
|
|
|
|
startTs = timestampToMidnight(startTs);
|
|
endTs = timestampToMidnight(endTs, true);
|
|
|
|
while (startTs < endTs) {
|
|
dataPoints[parseInt(startTs)] = Math.floor(getRandomBias(0, 5, 0.2, 1));
|
|
startTs += SEC_IN_DAY;
|
|
}
|
|
|
|
var heatmapData = {
|
|
dataPoints: dataPoints,
|
|
start: start,
|
|
end: end
|
|
};
|
|
|
|
var lineComposite = {
|
|
config: {
|
|
title: "Fireball/Bolide Events - Yearly (reported)",
|
|
data: lineCompositeData,
|
|
type: "line",
|
|
height: 190,
|
|
colors: ["green"],
|
|
isNavigable: 1,
|
|
valuesOverPoints: 1,
|
|
|
|
lineOptions: {
|
|
dotSize: 8
|
|
}
|
|
}
|
|
};
|
|
|
|
var barComposite = {
|
|
config: {
|
|
data: barCompositeData,
|
|
type: "bar",
|
|
height: 210,
|
|
colors: ["violet", "light-blue", "#46a9f9"],
|
|
valuesOverPoints: 1,
|
|
axisOptions: {
|
|
xAxisMode: "tick"
|
|
},
|
|
barOptions: {
|
|
stacked: 1
|
|
}
|
|
}
|
|
};
|
|
|
|
var demoSections = [{
|
|
title: "Create a Chart",
|
|
name: "demo-main",
|
|
contentBlocks: [{
|
|
type: "code",
|
|
lang: "html",
|
|
content: ' <!--HTML-->\n <figure id="frost-chart"></figure>'
|
|
}, {
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ' // Javascript\n let chart = new frappe.Chart( "#frost-chart", { // or DOM element\n data: {\n labels: ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",\n "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],\n\n datasets: [\n {\n name: "Some Data", chartType: \'bar\',\n values: [25, 40, 30, 35, 8, 52, 17, -4]\n },\n {\n name: "Another Set", chartType: \'bar\',\n values: [25, 50, -10, 15, 18, 32, 27, 14]\n },\n {\n name: "Yet Another", chartType: \'line\',\n values: [15, 20, -3, -15, 58, 12, -17, 37]\n }\n ],\n\n yMarkers: [{ label: "Marker", value: 70,\n options: { labelPos: \'left\' }}],\n yRegions: [{ label: "Region", start: -10, end: 50,\n options: { labelPos: \'right\' }}]\n },\n\n title: "My Awesome Chart",\n type: \'axis-mixed\', // or \'bar\', \'line\', \'pie\', \'percentage\'\n height: 300,\n colors: [\'purple\', \'#ffa3ef\', \'light-blue\'],\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n });\n\n chart.export();'
|
|
}, {
|
|
type: "demo",
|
|
config: {
|
|
title: "My Awesome Chart",
|
|
data: typeData,
|
|
type: "axis-mixed",
|
|
height: 300,
|
|
colors: ["purple", "magenta", "light-blue"],
|
|
maxSlices: 10,
|
|
|
|
tooltipOptions: {
|
|
formatTooltipX: function formatTooltipX(d) {
|
|
return (d + '').toUpperCase();
|
|
},
|
|
formatTooltipY: function formatTooltipY(d) {
|
|
return d + ' pts';
|
|
}
|
|
}
|
|
},
|
|
options: [{
|
|
name: "type",
|
|
path: ["type"],
|
|
type: "string",
|
|
states: {
|
|
"Mixed": 'axis-mixed',
|
|
"Line": 'line',
|
|
"Bar": 'bar',
|
|
"Pie Chart": 'pie',
|
|
"Percentage Chart": 'percentage'
|
|
},
|
|
activeState: "Mixed"
|
|
}],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
|
}]
|
|
}, {
|
|
title: "Update Values",
|
|
name: "updates-chart",
|
|
contentBlocks: [{
|
|
type: "demo",
|
|
config: {
|
|
data: getUpdateData(),
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#ff6c03'],
|
|
lineOptions: {
|
|
regionFill: 1
|
|
}
|
|
},
|
|
actions: [{
|
|
name: "Random Data",
|
|
fn: "update",
|
|
args: [getUpdateData()]
|
|
}, {
|
|
name: "Add Value",
|
|
fn: "addDataPoint",
|
|
args: getAddUpdateData()
|
|
}, {
|
|
name: "Remove Value",
|
|
fn: "removeDataPoint",
|
|
args: []
|
|
}, {
|
|
name: "Export ...",
|
|
fn: "export",
|
|
args: []
|
|
}]
|
|
}]
|
|
}, {
|
|
title: "Plot Trends",
|
|
name: "trends-plot",
|
|
contentBlocks: [{
|
|
type: "demo",
|
|
config: {
|
|
title: "Mean Total Sunspot Count - Yearly",
|
|
data: trendsData,
|
|
type: 'line',
|
|
height: 300,
|
|
colors: ['#238e38'],
|
|
axisOptions: {
|
|
xAxisMode: 'tick',
|
|
yAxisMode: 'span',
|
|
xIsSeries: 1
|
|
}
|
|
},
|
|
options: [{
|
|
name: "lineOptions",
|
|
path: ["lineOptions"],
|
|
type: "map",
|
|
mapKeys: ['hideLine', 'hideDots', 'heatline', 'regionFill'],
|
|
states: {
|
|
"Line": [0, 1, 0, 0],
|
|
"Dots": [1, 0, 0, 0],
|
|
"HeatLine": [0, 1, 1, 0],
|
|
"Region": [0, 1, 0, 1]
|
|
},
|
|
activeState: "HeatLine"
|
|
}],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
|
}]
|
|
}, {
|
|
title: "Listen to state change",
|
|
name: "state-change",
|
|
contentBlocks: [{
|
|
type: "demo",
|
|
config: {
|
|
title: "Jupiter's Moons: Semi-major Axis (1000 km)",
|
|
data: eventsData,
|
|
type: 'bar',
|
|
height: 330,
|
|
colors: ['grey'],
|
|
isNavigable: 1
|
|
},
|
|
sideContent: '<div class="image-container border">\n <img class="moon-image" src="./assets/img/europa.jpg">\n </div>\n <div class="content-data mt1">\n <h6 class="moon-name">Europa</h6>\n <p>Semi-major-axis: <span class="semi-major-axis">671034</span> km</p>\n <p>Mass: <span class="mass">4800000</span> x 10^16 kg</p>\n <p>Diameter: <span class="diameter">3121.6</span> km</p>\n </div>',
|
|
postSetup: function postSetup(chart, figure, row) {
|
|
chart.parent.addEventListener('data-select', function (e) {
|
|
var i = e.index;
|
|
var name = moonData.names[i];
|
|
row.querySelector('.moon-name').innerHTML = name;
|
|
row.querySelector('.semi-major-axis').innerHTML = moonData.distances[i] * 1000;
|
|
row.querySelector('.mass').innerHTML = moonData.masses[i];
|
|
row.querySelector('.diameter').innerHTML = moonData.diameters[i];
|
|
row.querySelector('img').src = "./assets/img/" + name.toLowerCase() + ".jpg";
|
|
});
|
|
}
|
|
}, {
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ' ...\n isNavigable: 1, // Navigate across data points; default 0\n ...\n\n chart.parent.addEventListener(\'data-select\', (e) => {\n update_moon_data(e.index); // e contains index and value of current datapoint\n });'
|
|
}]
|
|
}, {
|
|
title: "And a Month-wise Heatmap",
|
|
name: "heatmap",
|
|
contentBlocks: [{
|
|
type: "demo",
|
|
config: {
|
|
title: "Monthly Distribution",
|
|
data: heatmapData,
|
|
type: 'heatmap',
|
|
discreteDomains: 1,
|
|
countLabel: 'Level',
|
|
colors: HEATMAP_COLORS_BLUE,
|
|
legendScale: [0, 1, 2, 4, 5]
|
|
},
|
|
options: [{
|
|
name: "Discrete domains",
|
|
path: ["discreteDomains"],
|
|
type: 'boolean',
|
|
// boolNames: ["Continuous", "Discrete"],
|
|
states: { "Discrete": 1, "Continuous": 0 }
|
|
}, {
|
|
name: "Colors",
|
|
path: ["colors"],
|
|
type: "object",
|
|
states: {
|
|
"Green (Default)": [],
|
|
"Blue": HEATMAP_COLORS_BLUE,
|
|
"GitHub's Halloween": HEATMAP_COLORS_YELLOW
|
|
}
|
|
}],
|
|
actions: [{ name: "Export ...", fn: "export", args: [] }]
|
|
}, {
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ' let heatmap = new frappe.Chart("#heatmap", {\n type: \'heatmap\',\n title: "Monthly Distribution",\n data: {\n dataPoints: {\'1524064033\': 8, /* ... */},\n // object with timestamp-value pairs\n start: startDate\n end: endDate // Date objects\n },\n countLabel: \'Level\',\n discreteDomains: 0 // default: 1\n colors: [\'#ebedf0\', \'#c0ddf9\', \'#73b3f3\', \'#3886e1\', \'#17459e\'],\n // Set of five incremental colors,\n // preferably with a low-saturation color for zero data;\n // def: [\'#ebedf0\', \'#c6e48b\', \'#7bc96f\', \'#239a3b\', \'#196127\']\n });'
|
|
}]
|
|
}, {
|
|
title: "Demo",
|
|
name: "codepen",
|
|
contentBlocks: [{
|
|
type: "custom",
|
|
html: '<p data-height="299" data-theme-id="light" data-slug-hash="wjKBoq" data-default-tab="js,result"\n data-user="pratu16x7" data-embed-version="2" data-pen-title="Frappe Charts Demo" class="codepen">\n See the Pen <a href="https://codepen.io/pratu16x7/pen/wjKBoq/">Frappe Charts Demo</a>\n by Prateeksha Singh (<a href="https://codepen.io/pratu16x7">@pratu16x7</a>) on\n <a href="https://codepen.io">CodePen</a>.\n </p>'
|
|
}]
|
|
}, {
|
|
title: "Available Options",
|
|
name: "options",
|
|
contentBlocks: [{
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: '\n ...\n {\n data: {\n labels: [],\n datasets: [],\n yRegions: [],\n yMarkers: []\n }\n title: \'\',\n colors: [],\n height: 200,\n\n tooltipOptions: {\n formatTooltipX: d => (d + \'\').toUpperCase(),\n formatTooltipY: d => d + \' pts\',\n }\n\n // Axis charts\n isNavigable: 1, // default: 0\n valuesOverPoints: 1, // default: 0\n barOptions: {\n spaceRatio: 1 // default: 0.5\n stacked: 1 // default: 0\n }\n\n lineOptions: {\n dotSize: 6, // default: 4\n hideLine: 0, // default: 0\n hideDots: 1, // default: 0\n heatline: 1, // default: 0\n regionFill: 1 // default: 0\n }\n\n axisOptions: {\n yAxisMode: \'span\', // Axis lines, default\n xAxisMode: \'tick\', // No axis lines, only short ticks\n xIsSeries: 1 // Allow skipping x values for space\n // default: 0\n },\n\n // Pie/Percentage charts\n maxLegendPoints: 6, // default: 20\n maxSlices: 10, // default: 20\n\n // Percentage chart\n barOptions: {\n height: 15 // default: 20\n depth: 5 // default: 2\n }\n\n // Heatmap\n discreteDomains: 1, // default: 1\n }\n ...\n\n // Updating values\n chart.update(data);\n\n // Axis charts:\n chart.addDataPoint(label, valueFromEachDataset, index)\n chart.removeDataPoint(index)\n chart.updateDataset(datasetValues, index)\n\n // Exporting\n chart.export();\n\n // Unbind window-resize events\n chart.unbindWindowEvents();\n\n '
|
|
}]
|
|
}, {
|
|
title: "Install",
|
|
name: "installation",
|
|
contentBlocks: [{ type: "text", content: 'Install via npm' }, { type: "code", lang: "console", content: ' npm install frappe-charts' }, { type: "text", content: 'And include it in your project' }, { type: "code", lang: "javascript", content: ' import { Chart } from "frappe-charts' }, { type: "text", content: 'Use as:' }, {
|
|
type: "code",
|
|
lang: "javascript",
|
|
content: ' new Chart(); // ES6 module\n // or\n new frappe.Chart(); // Browser'
|
|
}, { type: "text", content: '... or include it directly in your HTML' }, {
|
|
type: "code",
|
|
lang: "html",
|
|
content: ' <script src="https://unpkg.com/frappe-charts@1.1.0"></script>'
|
|
}]
|
|
}];
|
|
|
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
|
|
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
var docsBuilder = function () {
|
|
function docsBuilder(LIB_OBJ) {
|
|
_classCallCheck(this, docsBuilder);
|
|
|
|
this.LIB_OBJ = LIB_OBJ;
|
|
}
|
|
|
|
_createClass(docsBuilder, [{
|
|
key: 'makeSection',
|
|
value: function makeSection(parent, sys) {
|
|
console.log('parent here?', parent);
|
|
return new docSection(this.LIB_OBJ, parent, sys);
|
|
}
|
|
}]);
|
|
|
|
return docsBuilder;
|
|
}();
|
|
|
|
var docSection = function () {
|
|
function docSection(LIB_OBJ, parent, sys) {
|
|
_classCallCheck(this, docSection);
|
|
|
|
this.LIB_OBJ = LIB_OBJ;
|
|
this.parent = parent; // should be preferably a section
|
|
this.sys = sys;
|
|
this.blockMap = {};
|
|
this.demos = [];
|
|
|
|
this.make();
|
|
}
|
|
|
|
_createClass(docSection, [{
|
|
key: 'make',
|
|
value: function make() {
|
|
// const section = document.querySelector(this.parent);
|
|
var s = this.sys;
|
|
// if(s.title) {
|
|
// $.create('h6', { inside: this.parent, innerHTML: s.title });
|
|
// }
|
|
|
|
// s.contentBlocks.forEach((blockConf, index) => {
|
|
// this.blockMap[index] = this.getBlock(blockConf);
|
|
// });
|
|
|
|
this.blockMap['test'] = this.getDemo(s);
|
|
}
|
|
}, {
|
|
key: 'getBlock',
|
|
value: function getBlock(blockConf) {
|
|
var fnName = 'get' + toTitleCase(blockConf.type);
|
|
if (this[fnName]) {
|
|
return this[fnName](blockConf);
|
|
} else {
|
|
throw new Error('Unknown section block type \'' + blockConf.type + '\'.');
|
|
}
|
|
}
|
|
}, {
|
|
key: 'getText',
|
|
value: function getText(blockConf) {
|
|
return $.create('p', {
|
|
inside: this.parent,
|
|
className: 'new-context',
|
|
innerHTML: blockConf.content
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getCode',
|
|
value: function getCode(blockConf) {
|
|
var pre = $.create('pre', { inside: this.parent });
|
|
var lang = blockConf.lang || 'javascript';
|
|
var code = $.create('code', {
|
|
inside: pre,
|
|
className: 'hljs ' + lang,
|
|
innerHTML: blockConf.content
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getCustom',
|
|
value: function getCustom(blockConf) {
|
|
this.parent.innerHTML += blockConf.html;
|
|
}
|
|
}, {
|
|
key: 'getDemo',
|
|
value: function getDemo(blockConf) {
|
|
var bc = blockConf;
|
|
var args = bc.config;
|
|
var figure = void 0,
|
|
row = void 0;
|
|
if (!bc.sideContent) {
|
|
figure = $.create('figure', { inside: this.parent });
|
|
} else {
|
|
row = $.create('div', {
|
|
inside: this.parent,
|
|
className: "row",
|
|
innerHTML: '<div class="col-sm-8"></div>\n\t\t\t\t\t<div class="col-sm-4"></div>'
|
|
});
|
|
figure = $.create('figure', { inside: row.querySelector('.col-sm-8') });
|
|
row.querySelector('.col-sm-4').innerHTML += bc.sideContent;
|
|
}
|
|
|
|
var libObj = new this.LIB_OBJ(figure, args);
|
|
var demoIndex = this.demos.length;
|
|
this.demos.push(libObj);
|
|
|
|
if (bc.postSetup) {
|
|
bc.postSetup(this.demos[demoIndex], figure, row);
|
|
}
|
|
|
|
this.getDemoOptions(demoIndex, bc.options, args, figure);
|
|
this.getDemoActions(demoIndex, bc.actions, args);
|
|
}
|
|
}, {
|
|
key: 'getDemoOptions',
|
|
value: function getDemoOptions(demoIndex) {
|
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
|
|
var _this = this;
|
|
|
|
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
var figure = arguments[3];
|
|
|
|
options.forEach(function (o) {
|
|
var btnGroup = $.create('div', {
|
|
inside: _this.parent,
|
|
className: 'btn-group ' + o.name
|
|
});
|
|
var mapKeys = o.mapKeys;
|
|
|
|
if (o.type === "map") {
|
|
args[o.path[0]] = {};
|
|
}
|
|
|
|
var inputGroup = $.create('input', {
|
|
inside: btnGroup
|
|
// className: `form-control`,
|
|
// innerHTML: `<input type="text" class="form-control" placeholder="Username"
|
|
// aria-label="Username" aria-describedby="basic-addon1">`
|
|
});
|
|
|
|
Object.keys(o.states).forEach(function (key) {
|
|
var state = o.states[key];
|
|
var activeClass = key === o.activeState ? 'active' : '';
|
|
|
|
var button = $.create('button', {
|
|
inside: btnGroup,
|
|
className: 'btn btn-sm btn-secondary ' + activeClass,
|
|
innerHTML: key,
|
|
onClick: function onClick(e) {
|
|
// map
|
|
if (o.type === "map") {
|
|
mapKeys.forEach(function (attr, i) {
|
|
args[o.path[0]][attr] = state[i];
|
|
});
|
|
} else {
|
|
// boolean, string, number, object
|
|
args[o.path[0]] = state;
|
|
}
|
|
_this.demos[demoIndex] = new _this.LIB_OBJ(figure, args);
|
|
}
|
|
});
|
|
|
|
if (activeClass) {
|
|
button.click();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}, {
|
|
key: 'getDemoActions',
|
|
value: function getDemoActions(demoIndex) {
|
|
var _this2 = this;
|
|
|
|
var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
actions.forEach(function (o) {
|
|
var args = o.args || [];
|
|
$.create('button', {
|
|
inside: _this2.parent,
|
|
className: 'btn btn-action btn-sm btn-secondary',
|
|
innerHTML: o.name,
|
|
onClick: function onClick() {
|
|
var _demos$demoIndex;
|
|
|
|
(_demos$demoIndex = _this2.demos[demoIndex])[o.fn].apply(_demos$demoIndex, _toConsumableArray(args));
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return docSection;
|
|
}();
|
|
|
|
var Chart = frappe.Chart; // eslint-disable-line no-undef
|
|
var dbd = new docsBuilder(Chart);
|
|
var currentElement = document.querySelector('header');
|
|
var sections = [];
|
|
|
|
if (document.querySelectorAll('#line-composite-1').length) {
|
|
var lineCompositeChart = new Chart("#line-composite-1", lineComposite.config);
|
|
var barCompositeChart = new Chart("#bar-composite-1", barComposite.config);
|
|
|
|
lineCompositeChart.parent.addEventListener('data-select', function (e) {
|
|
var i = e.index;
|
|
barCompositeChart.updateDatasets([fireballOver25[i], fireball_5_25[i], fireball_2_5[i]]);
|
|
});
|
|
|
|
sections = demoSections;
|
|
}
|
|
|
|
// else {
|
|
// sections = docSections;
|
|
// }
|
|
|
|
sections.forEach(function (sectionConf) {
|
|
var sectionEl = $.create('section', { className: sectionConf.name || sectionConf.title });
|
|
insertAfter(sectionEl, currentElement);
|
|
currentElement = sectionEl;
|
|
dbd.makeSection(sectionEl, sectionConf);
|
|
});
|
|
|
|
}());
|