Ext.define('Ext.ux.frappe.charts.Charts', {
	extend: 'Ext.Component',

	alias: "widget.ux.frappe.charts.charts",

	mixins: [
		"Ext.mixin.Mashup"
	],
	requiredScripts: [
		"/portfolio/app/ux/frappe/frappe-gantt.js",
		"/portfolio/app/ux/frappe/moment.js",
		"/portfolio/app/ux/frappe/snap.svg-min.js",
		"/portfolio/app/ux/frappe/ganttstyle.css"
	],
	config: {
		chartApi: null,
		visualizationApi: null,
		chartOptions: null
	},

	autoEl: {
		tag: 'svg',
		style: 'border: none;'
	},

	listeners: {
		render: {
			fn: function(i_component) {
				var i_element = i_component.getEl();
				var i_dom = i_element.dom;

				if (i_dom) {
					if (i_dom.clientHeight) {
						if (!i_dom.offsetHeight) {
							i_dom.offsetHeight = i_dom.clientHeight;
						}
					}
				}
			}
		},
		destroy: {
			fn: function (i_container) {
				i_container.setChartOptions(null);
			}
		}
	},

	initComponent: function () {
		this.callParent(arguments);
		if (this.getChartOptions() == null) {
			this.setChartOptions({});
		}
	}
});
