Ext.define('amdaUI.PlotlyContainer', {
    extend: 'Ext.container.Container',
    
    alias: 'widget.PlotlyContainer',

    constructor: function(config) {
            this.init(config);
            this.callParent(arguments);
    },

    plot : function(data,layout) {
        Plotly.newPlot( this.getEl().dom, data,layout,{displaylogo: false,modeBarButtonsToRemove: ['lasso2d','select2d']});
    },

    init : function(config) {
            var me = this;

            var myConf = {
                    width: 200,
                    height: 200,
                    listeners: {
                            afterrender: function(container, eOpts) {
                                    if (config.data) {
                                            me.plot(config.data, config.layout);
                                    }
                            },
                            resize: function(container, eOpts) {
                                   var update = {
                                            width: me.getEl().getWidth(),
                                            height: me.getEl().getHeight()
                                    };
                                if (config.data)
                                    Plotly.relayout(me.getEl().dom, update);
                            }
                    }
            };

            Ext.apply (this , Ext.apply (arguments, myConf));
    }
});