charts/docs/assets/js/index.min.js

(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"];




// https://stackoverflow.com/a/11252167/6495043


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 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();
	});
}

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 sampleData = {
	0: {
		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
		datasets: [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]
	},
	1: {
		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
		datasets: [{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] }, { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }]
	},
	2: {
		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
		datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710] }]
	},
	3: {
		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		datasets: [{ values: [300, 250, 720, 560, 370, 610, 690, 410, 370, 480, 620, 260, 170, 510, 630, 710, 560, 370, 610, 260, 170] }]
	}
};

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: '  &lt!--HTML--&gt;\n  &lt;figure id="frost-chart"&gt;&lt;/figure&gt;'
    }, {
        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: '  &lt;script src="https://unpkg.com/frappe-charts@1.1.0"&gt;&lt;/script&gt;'
    }]
}];

var docSections = [{
	name: "start",
	contentBlocks: [
	// Intro
	{
		type: "text",
		content: "A chart is generally a 2D rendition of data. For example,\n\t\t\t\t\tfor a set of values across items, the data could look like:"
	}, {
		type: "code",
		content: "  data = {\n    labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n    datasets: [\n\t  { values: [18, 40, 30, 35, 8, 52, 17, -4] }\n    ]\n  }"
	},

	// type: 'bar'
	{
		type: "text",
		content: "Plug that in with a type <b>bar</b>, a color and height:"
	}, {
		type: "code",
		content: "  new frappe.Chart( \"#chart\", {\n    data: data,\n    type: 'bar',\n    height: 140,\n    colors: ['red']\n  });"
	}, {
		type: "demo",
		config: {
			data: sampleData[0],
			type: 'bar',
			height: 140,
			colors: ['red']
		}
	},

	// type: 'line'
	{
		type: "text",
		content: "And similarly, a <b>line</b> chart:"
	}, {
		type: "code",
		content: "  ...\n  type: 'line',\n  ..."
	}, {
		type: "demo",
		config: {
			data: sampleData[0],
			type: 'line',
			height: 140,
			colors: ['red']
		}
	},

	// Axes lines:
	{
		type: "text",
		content: "Axes lines are configurable. By default they are long\n\t\t\t\t\t<b>span</b>ning lines, but can also be short <b>tick</b>s:"
	}, {
		type: "code",
		content: "  ...\n  axisOptions: {\n    xAxisMode: 'tick' // default: 'span'\n  },\n  ..."
	}, {
		type: "demo",
		config: {
			data: sampleData[2],
			type: 'bar',
			height: 140,
			colors: ['blue'],
			axisOptions: {
				xAxisMode: "tick"
			}
		}
	},

	// Bar width:
	{
		type: "text",
		content: "The bar <b>width</b> can be set by defining the <b>ratio of the space</b>\n\t\t\t\t\tbetween bars to the bar width."
	}, {
		type: "code",
		content: "  ...\n  barOptions: {\n    spaceRatio: 0.2 // default: 1\n  },\n  ..."
	}, {
		type: "demo",
		config: {
			data: sampleData[3],
			type: 'bar',
			height: 140,
			colors: ['orange'],
			axisOptions: {
				xAxisMode: "tick"
			},
			barOptions: {
				spaceRatio: 0.2
			}
		},
		options: [{
			name: "barOptions",
			path: ["barOptions"],
			type: "map",
			mapKeys: ['spaceRatio'],
			states: {
				"0.2": [0.2],
				"0.5": [0.5],
				"1": [1],
				"1.5": [1.5]
			},
			activeState: "0.2"
		}]
	},

	// Dot radius:
	{
		type: "text",
		content: 'So can the <b>dot size</b> on a line graph, with the `dotSize` property in `lineOptions`.'
	}, {
		type: "code",
		content: "  ...\n  lineOptions: {\n    dotRadius: 8 // default: 4\n  },\n  ..."
	}, {
		type: "demo",
		config: {
			data: sampleData[2],
			type: 'line',
			height: 140,
			colors: ['orange'],
			axisOptions: {
				xAxisMode: "tick"
			},
			lineOptions: {
				dotSize: 8
			}
		},
		options: [{
			name: "lineOptions",
			path: ["lineOptions"],
			type: "map",
			mapKeys: ['dotSize'],
			states: {
				"3": [3],
				"4": [4],
				"8": [8],
				"10": [10]
			},
			activeState: "8"
		}]
	}]
}, {
	title: "Trends and region charts",
	name: "trends-and-region",
	contentBlocks: [{
		type: "text",
		content: 'lineOptions` have a bunch of other properties too. Region charts are'
	}, {
		type: "code",
		content: "  ...\n  data: {\n    labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n    datasets: [\n      { name: \"Dataset 1\", values: [18, 40, 30, 35, 8, 52, 17, -4] },\n      { name: \"Dataset 2\", values: [30, 50, -10, 15, 18, 32, 27, 14] }\n    ]\n  },\n  ..."
	}, {
		type: "demo",
		config: {
			data: trendsData,
			type: 'line',
			height: 180,
			colors: ['violet'],
			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"
		}]
	}]
}, {
	title: "Adding more datasets",
	name: "multi-dataset",
	contentBlocks: [{
		type: "text",
		content: "A chart can have multiple datasets. In an axis chart, every dataset is represented individually."
	}, {
		type: "code",
		content: "  ...\n  data: {\n    labels: [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n    datasets: [\n      { name: \"Dataset 1\", values: [18, 40, 30, 35, 8, 52, 17, -4] },\n      { name: \"Dataset 2\", values: [30, 50, -10, 15, 18, 32, 27, 14] }\n    ]\n  },\n  ..."
	}, {
		type: "demo",
		config: {
			data: sampleData[1],
			type: 'line',
			height: 200,
			colors: ['green', 'light-green']
		},
		options: [{
			name: "type",
			path: ["type"],
			type: "string",
			states: {
				"Line": 'line',
				"Bar": 'bar'
			},
			activeState: "Mixed"
		}]
	}]
}];

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) {
			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() {
			var _this = this;

			// const section = document.querySelector(this.parent);
			var s = this.sys;
			if (s.title) {
				$.create('h6', { inside: this.parent, innerHTML: s.title });
			}

			s.contentBlocks.forEach(function (blockConf, index) {
				_this.blockMap[index] = _this.getBlock(blockConf);
			});
		}
	}, {
		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 _this2 = this;

			var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
			var figure = arguments[3];

			options.forEach(function (o) {
				var btnGroup = $.create('div', {
					inside: _this2.parent,
					className: 'btn-group ' + o.name
				});
				var mapKeys = o.mapKeys;

				if (o.type === "map") {
					args[o.path[0]] = {};
				}

				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;
							}
							_this2.demos[demoIndex] = new _this2.LIB_OBJ(figure, args);
						}
					});

					if (activeClass) {
						button.click();
					}
				});
			});
		}
	}, {
		key: 'getDemoActions',
		value: function getDemoActions(demoIndex) {
			var _this3 = this;

			var actions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
			actions.forEach(function (o) {
				var args = o.args || [];
				$.create('button', {
					inside: _this3.parent,
					className: 'btn btn-action btn-sm btn-secondary',
					innerHTML: o.name,
					onClick: function onClick() {
						var _demos$demoIndex;

						(_demos$demoIndex = _this3.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 = void 0;

if (window.location.pathname.split("/").pop().includes('index')) {
	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);
});

}());