(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
'use strict';

var _charts = require('./charts');

// initialize all elements
var componentsList = document.querySelectorAll(_charts.Charts.getSelector()); // Import all components

for (var i = 0; i < componentsList.length; i++) {
	new _charts.Charts(componentsList[i]);
}
},{"./charts":2}],2:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});
exports.Charts = undefined;

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; }; }(); /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * charts.js
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * load google charts based on table element
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */

var _elementHelpers = require('../helpers/element-helpers');

var _elementHelpers2 = _interopRequireDefault(_elementHelpers);

var _googleChartsApi = require('./charts/google-charts-api');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

/**
* Declare constants
*/
var attributeBase = 'data-rs-charts';

var Charts = exports.Charts = function () {
	function Charts(element) {
		_classCallCheck(this, Charts);

		this.element = element;
		this.type = this.getType();
		this.initializeChart();
	}

	/**
 * Declare types
 */


	_createClass(Charts, [{
		key: 'getType',


		/**
   * Get type - get type of chart from base attribute
   */
		value: function getType() {
			var type = null;
			var typeRaw = this.element.getAttribute(attributeBase);
			if (typeof typeRaw === 'string' && typeof this.types[typeRaw.toLowerCase()] !== 'undefined') {
				type = this.types[typeRaw.toLowerCase()];
			}
			if (type === null) {
				throw Error('Chart type is invalid');
			}
			return type;
		}

		/**
   * Initialize chart - Load Google Maps API
   */

	}, {
		key: 'initializeChart',
		value: function initializeChart() {
			var _this = this;

			// get elements
			this.chartElement = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.placeholder);
			// create map, controls and markers after the API is ready
			var chartsApi = new _googleChartsApi.GoogleChartsApi();
			chartsApi.load().then(function () {
				_this.createChart();
				_this.createLegend();
			}).catch(function (reason) {
				console.error(reason);
			});
		}

		/**
   * Create chart - create Google Visualization chart based on type
   */

	}, {
		key: 'createChart',
		value: function createChart() {
			// get source element
			var sourceElement = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.source);

			// create Google Visualization chart based on type
			switch (this.type) {
				case this.types.column:
					this.chart = new google.visualization.ColumnChart(this.chartElement);
					this.options = this.getColumnOptions();
					break;
				case this.types.donut:
					this.chart = new google.visualization.PieChart(this.chartElement);
					this.options = this.getDonutOptions();
					break;
				case this.types.line:
					this.chart = new google.visualization.LineChart(this.chartElement);
					this.options = this.getLineOptions();
					break;
			}
			// draw chart
			this.data = this.getData(sourceElement);
			this.chart.draw(this.data, this.options);
		}

		/**
   * Get data - parse data from source table in to data table
   * @param sourceTable
   */

	}, {
		key: 'getData',
		value: function getData(sourceTable) {
			this.sourceData = this.parseData(sourceTable);
			var data = google.visualization.arrayToDataTable(this.sourceData);
			return data;
		}

		/**
   * Parse data from table to array
   * @param sourceTable
   */

	}, {
		key: 'parseData',
		value: function parseData(sourceTable) {
			var _this2 = this;

			var sourceData = [];

			// parse header text from th nodes and convert to array
			var thNodes = [].concat(_toConsumableArray(sourceTable.querySelectorAll('thead th')));
			var headers = thNodes.map(function (thNode) {
				return thNode.innerText;
			});
			// push header with 'string' and 'style' for column and donut chart
			if (this.type !== this.types.line) {
				headers.push({ type: 'string', role: 'style' });
			}
			sourceData.push(headers);

			// parse graph data from body
			var trNodes = [].concat(_toConsumableArray(sourceTable.querySelectorAll('tbody tr')));
			trNodes.forEach(function (trNode, index) {
				var row = [].concat(_toConsumableArray(trNode.querySelectorAll('td'))).map(function (tdNode, index) {
					// first item is used for display, other are used as values
					return index === 0 ? tdNode.innerText : parseInt(tdNode.innerText);
				});
				// push 'color' row for column and donut chart
				if (_this2.type !== _this2.types.line) {
					row.push('color: ' + _this2.options.colors[index]);
				}
				sourceData.push(row);
			});
			return sourceData;
		}

		/**
   * Get default options -  options for all charts
   */

	}, {
		key: 'getDefaultOptions',
		value: function getDefaultOptions() {
			return {
				backgroundColor: 'transparent',
				colors: ['#f0f0f0', '#e8e8e8', '#e0e0e0', '#dcdcdc', '#d8d8d8', '#d3d3d3', '#d0d0d0', '#c8c8c8', '#c0c0c0', '#bebebe', '#b8b8b8', '#b0b0b0', '#a9a9a9', '#a8a8a8', '#a0a0a0'],
				fontSize: 18,
				legend: { position: 'none' },
				tooltip: {
					textStyle: {
						color: '#000000',
						bold: false
					},
					isHtml: false,
					trigger: 'selection'
				}
			};
		}

		/**
   * Get options for column chart
   */

	}, {
		key: 'getColumnOptions',
		value: function getColumnOptions() {
			var options = this.getDefaultOptions();
			var chartWidth = this.chartElement.offsetWidth;
			var chartHeight = this.chartElement.offsetHeight;

			options.chartArea = { width: chartWidth - 50, left: 50, top: 20, height: chartHeight - 100 };
			options.hAxis = { textPosition: 'none' };
			return options;
		}

		/**
   * Get options for donut chart
   */

	}, {
		key: 'getDonutOptions',
		value: function getDonutOptions() {
			var options = this.getDefaultOptions();
			var chartWidth = this.chartElement.offsetWidth;

			options.chartArea = { width: chartWidth, left: 0, top: 0, height: chartWidth };
			options.height = chartWidth + 70;
			options.width = chartWidth;
			options.pieHole = .5;
			options.pieSliceBorderColor = 'transparent';
			return options;
		}

		/**
   * Get options for line chart
   */

	}, {
		key: 'getLineOptions',
		value: function getLineOptions() {
			var options = this.getDefaultOptions();
			var chartWidth = this.chartElement.offsetWidth;
			var chartHeight = this.chartElement.offsetHeight;

			options.chartArea = { width: chartWidth - 50, left: 50, top: 20, height: chartHeight - 130 };
			options.curveType = 'function';
			return options;
		}

		/**
   * Create legend - create customized legend 
   */

	}, {
		key: 'createLegend',
		value: function createLegend() {
			// get legend element
			var legend = _elementHelpers2.default.getElementByAttributeWithinElement(this.element, this.attributes.legend);

			// create legend based on chart type
			switch (this.type) {
				case this.types.donut:
				case this.types.column:
					this.createDonutOrColumnLegend(legend);
					break;
				case this.types.line:
					this.createLineLegend(legend);
					break;
			}
		}

		/**
   * Create legend for donut or column chart
   * @param legend
   */

	}, {
		key: 'createDonutOrColumnLegend',
		value: function createDonutOrColumnLegend(legend) {
			var _this3 = this;

			// delete irrelevant first object from source data array
			this.sourceData.shift();
			// bind each value to li item
			this.sourceData.forEach(function (dataArray, index) {
				if (legend !== null) {
					_this3.appendListItemsToList(index, legend, dataArray[0]);
				}
			});
		}

		/**
   * Create legend for line chart
   * @param legend
   */

	}, {
		key: 'createLineLegend',
		value: function createLineLegend(legend) {
			var _this4 = this;

			// delete irrelevant first object from source data array
			this.sourceData[0].shift();
			// bind each value to li item
			this.sourceData[0].forEach(function (string, index) {
				if (legend !== null) {
					_this4.appendListItemsToList(index, legend, string);
				}
			});
		}

		/**
   * Append list items to list - create li node and add to list
   * @param index
   * @param list
   * @param listItemText
   */

	}, {
		key: 'appendListItemsToList',
		value: function appendListItemsToList(index, list, listItemText) {
			// create a <li> node
			var node = document.createElement('li');
			node.setAttribute(this.attributes.legendItem, this.options.colors[index]);
			// create a text node
			var textnode = document.createTextNode(listItemText);
			node.appendChild(textnode);
			list.appendChild(node);
		}

		/**
   * Get selector
   */

	}, {
		key: 'types',
		get: function get() {
			return {
				column: 'column',
				donut: 'donut',
				line: 'line'
			};
		}

		/**
  * Declare attributes
  */

	}, {
		key: 'attributes',
		get: function get() {
			return {
				placeholder: attributeBase + '-placeholder',
				source: attributeBase + '-source',
				legend: attributeBase + '-legend',
				legendItem: attributeBase + '-legend-item'
			};
		}
	}], [{
		key: 'getSelector',
		value: function getSelector() {
			return '[' + attributeBase + ']';
		}
	}]);

	return Charts;
}();
},{"../helpers/element-helpers":4,"./charts/google-charts-api":3}],3:[function(require,module,exports){
'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

/**
 * Use this class to ensure Google charts API javascript is loaded before running any google chart specific code.
 */
var isLoading = false;

var GoogleChartsApi = exports.GoogleChartsApi = function () {

	/**
  * Constructor
  */
	function GoogleChartsApi() {
		_classCallCheck(this, GoogleChartsApi);

		this.api = 'https://www.gstatic.com/charts/loader.js';
		this.scriptElement = this.getScriptElement();
	}

	/**
  * Load the Google Maps API javascript
  */


	_createClass(GoogleChartsApi, [{
		key: 'load',
		value: function load() {
			var _this = this;

			return new Promise(function (resolve) {
				if (isLoading === false) {
					isLoading = true;
					_this.scriptElement = document.createElement('script');
					document.body.appendChild(_this.scriptElement);
					_this.scriptElement.addEventListener('load', function () {
						// load google charts
						_this.loadPackages().then(function () {
							resolve();
						});
					});
					_this.scriptElement.async = true;
					_this.scriptElement.src = _this.api;
				} else {
					_this.scriptElement.addEventListener('load', function () {
						_this.loadPackages().then(function () {
							resolve();
						});
					});
				}
			});
		}
	}, {
		key: 'loadPackages',
		value: function loadPackages() {
			return google.charts.load('current', { 'packages': ['corechart', 'bar'] });
		}
	}, {
		key: 'getScriptElement',
		value: function getScriptElement() {
			return document.querySelector('script[src=\'' + this.api + '\']');
		}
	}]);

	return GoogleChartsApi;
}();
},{}],4:[function(require,module,exports){
'use strict';

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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var ElementHelpers = function () {
	function ElementHelpers() {
		_classCallCheck(this, ElementHelpers);
	}

	_createClass(ElementHelpers, null, [{
		key: 'triggerEvent',


		/**
   * Trigger an event on a specified element
   * @param element {Node}
   * @param eventType
   */
		value: function triggerEvent(element, eventType) {
			var event = void 0;

			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			element.dispatchEvent(event);
		}

		/**
   * Get element by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttribute',
		value: function getElementByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * Get multiple elements by attribute and optional by attribute value
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttribute',
		value: function getElementsByAttribute(attributeName, attributeValue) {
			if (attributeValue) {
				return document.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return document.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementByAttributeWithinElement',
		value: function getElementByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelector('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelector('[' + attributeName + ']');
			}
		}

		/**
   * check if mouse pointer is on element
   * @param element
   */

	}, {
		key: 'isMouseOver',
		value: function isMouseOver(element) {
			return Array.prototype.slice.call(element.parentElement.querySelectorAll(':hover')).filter(function () {
				return element[0] == this;
			}).length > 0;
		}

		/**
   * Get multiple elements by attribute and optional by attribute value, within an element
   * @param element
   * @param attributeName
   * @param attributeValue - optional
   */

	}, {
		key: 'getElementsByAttributeWithinElement',
		value: function getElementsByAttributeWithinElement(element, attributeName, attributeValue) {
			if (attributeValue) {
				return element.querySelectorAll('[' + attributeName + '="' + attributeValue + '"]');
			} else {
				return element.querySelectorAll('[' + attributeName + ']');
			}
		}

		/**
   * Get element by class, within an element
   * @param element
   * @param className
   */

	}, {
		key: 'getElementByClassWithinElement',
		value: function getElementByClassWithinElement(element, className) {
			return element.querySelector('.' + className);
		}

		/**
   * get max width for mobile viewports 
   */

	}, {
		key: 'maxWidthMobileViewports',
		value: function maxWidthMobileViewports() {
			return 940;
		}

		/**
   * Create an event
   * @param eventType
   */

	}, {
		key: 'createEvent',
		value: function createEvent(eventType) {
			var event = void 0;
			if (typeof Event === 'function') {
				event = new Event(eventType);
			} else {
				event = document.createEvent('Event');
				event.initEvent(eventType, true, true);
			}
			return event;
		}

		/**
   * checks if viewport is desktop size
   */

	}, {
		key: 'isDesktop',
		value: function isDesktop() {
			return Math.max(document.documentElement.clientWidth, window.innerWidth || 0) > this.maxWidthMobileViewports();
		}
	}, {
		key: 'isIE11',
		value: function isIE11() {
			return navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1;
		}

		/**
   * Get keycode on keydown event, as fallback if event.code is not supported yet by the browser
   * @param event
   */

	}, {
		key: 'getKeyCodeOnKeyDownEvent',
		value: function getKeyCodeOnKeyDownEvent(event) {
			var keyCode = void 0;
			if (event != null) {
				if (typeof event.code === 'undefined') {
					switch (event.keyCode) {
						case 13:
							keyCode = 'Enter';
							break;
						case 38:
							keyCode = 'ArrowUp';
							break;
						case 40:
							keyCode = 'ArrowDown';
							break;
						case 9:
							keyCode = 'Tab';
							break;
						case 27:
							keyCode = 'Escape';
							break;
						case 33:
							keyCode = 'PageUp';
							break;
						case 34:
							keyCode = 'PageDown';
							break;
						default:
							keyCode = undefined;
							break;
					}
				} else {
					keyCode = event.code;
				}
			}
			return keyCode;
		}
	}]);

	return ElementHelpers;
}();

module.exports = ElementHelpers;
},{}]},{},[1]);
