Add the widget Graph, Property and Summary.

static/app.js

@@ -24,8 +24,10 @@ Ext.require('Ext.direct.RemotingProvider');
 Ext.require('Ext.EventManager');
 Ext.require('Ext.tip.QuickTipManager');
 
+Ext.require('Event.form.field.Graph');
 Ext.require('Event.form.field.UserData');
 Ext.require('Event.form.field.UserDataMultiDefault');
+Ext.require('Event.form.field.Summary');
 Ext.require('Event.form.plugin.UserDataConsistency');
 Ext.require('Event.grid.HistoryFilter');
 Ext.require('Event.grid.plugin.HistoryContextMenu');
@@ -44,6 +46,11 @@ Ext.onReady(function(){
     // Expose the remote methods
     Ext.direct.Manager.addProvider(Dbui.REMOTE_API);
 
+    // Register dedicated fields
+    Dbui.registerExtraTypesForField(["xpropertyfield"]);
+    Dbui.registerFieldsToJSON(["xsummaryfield"]);
+    Dbui.registerFieldsToJSON(["xgraphfield"]);
+
     // define the models
     Dbui.defineModels();
 

static/plugin_event/src/form/field/Graph.js

+/**
+ * Dedicated form field to render the 'graph' field.
+ *
+ * The field has many properties corresponding to the keywords arguments of
+ * the method pandas.DataFrame.plot. This widget tuned two properties: kind
+ * and colormap. Their values can be select from a predefined set.
+ *
+ * @since 0.7.0
+ *
+ */
+Ext.define("Event.form.field.Graph", {
+
+    extend: "Event.form.field.Property",
+    alias: "widget.xgraphfield",
+    uses: "Ext.form.field.Combobox",
+
+    /**
+     * @cfg {String[]}
+     * Possible values for the colorMap property.
+     * See: http://matplotlib.org/examples/color/colormaps_reference.html
+     *
+     */
+    colormap: [
+        // Perceptually Uniform Sequential
+        "viridis", "inferno", "plasma", "magma",
+
+        // Sequential
+        "Blues", "BuGn", "BuPu",
+        "GnBu", "Greens", "Greys", "Oranges", "OrRd",
+        "PuBu", "PuBuGn", "PuRd", "Purples", "RdPu",
+        "Reds", "YlGn", "YlGnBu", "YlOrBr", "YlOrRd",
+
+        // Sequential (2)
+        "afmhot", "autumn", "bone", "cool",
+        "copper", "gist_heat", "gray", "hot",
+        "pink", "spring", "summer", "winter",
+
+        // Diverging
+        "BrBG", "bwr", "coolwarm", "PiYG", "PRGn", "PuOr",
+        "RdBu", "RdGy", "RdYlBu", "RdYlGn", "Spectral",
+        "seismic",
+
+        // Qualitative
+        "Accent", "Dark2", "Paired", "Pastel1",
+        "Pastel2", "Set1", "Set2", "Set3", "Vega10",
+        "Vega20", "Vega20b", "Vega20c",
+
+        // Miscellaneous
+        "gist_earth", "terrain", "ocean", "gist_stern",
+        "brg", "CMRmap", "cubehelix",
+        "gnuplot", "gnuplot2", "gist_ncar",
+        "nipy_spectral", "jet", "rainbow",
+        "gist_rainbow", "hsv", "flag", "prism"
+    ],
+
+    /**
+     * @cfg {String[]}
+     * Possible values for the kind property.
+     *
+     */
+    kind: ["area",
+           "bar",
+           "barh",
+           "hexbin",
+           "hist",
+           "line",
+           "pie",
+           "scatter"
+    ],
+
+    // private properties for internationalization
+    textSelect: 'select...',
+    textFunctions: "function(s)",
+    textLabels: "label(s)",
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this;
+
+        // setup the property editors
+        me.sourceConfig = {
+            colormap: {
+                editor: Ext.create("Ext.form.field.ComboBox", {
+                    store: me.colormap
+                }),
+                type: "string"
+            },
+            kind: {
+                editor: Ext.create("Ext.form.field.ComboBox", {
+                    store: me.kind
+                }),
+                type: "string"
+            }
+        };
+
+        // instantiate the base class
+        me.callParent(arguments);
+    }
+
+    // jshint strict: true
+});
\ No newline at end of file

static/plugin_event/src/form/field/Property.js

+/**
+ * Form field encapsulating an {@link Ext.grid.property.Property}.
+ *
+ * It is a basic widget which can be used to interact a json field
+ * containing a dictionary.
+ *
+ * It is possible to configure the editor assoiated to each (key, pair) value
+ * via the configuration parameter sourceConfig.
+ *
+ * @since 0.7.0
+ *
+ */
+Ext.define("Event.form.field.Property", {
+
+    extend: "Ext.form.FieldContainer",
+    mixins: {
+        field: "Ext.form.field.Field"
+    },
+    alias: "widget.xpropertyfield",
+    uses: "Ext.grid.property.Grid",
+
+    /**
+     * @cfg {Object} sourceConfig
+     * This option allows various configurations to be set for each field
+     * in the property grid. None of these configurations are required.
+     *
+     * For more details {@link Ext.grid.property.Property#sourceConfig}
+     *
+     */
+
+    /**
+     * @event change
+     * Fires when a value has changed.
+     * @param {Dbui.form.field.Dict} this This field
+     */
+
+    // Predefined configuration options
+    layout: "anchor",
+    defaults: {
+        anchor: "100%"
+    },
+
+    // private short cuts
+    grid: null,
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this,
+            source = me.value || {};
+
+        // configure the property grid embedded in the container
+        me.items = [{
+            xtype: "propertygrid",
+            hideHeaders: true,
+            source: source,
+            sourceConfig: me.sourceConfig
+        }];
+
+        // instantiate the base class
+        me.callParent(arguments);
+
+        // short cut to the grid
+        me.grid = me.child("propertygrid");
+
+        // event change
+        me.grid.on("propertychange", me.onPropertyChange, me);
+
+        // initialize the mixin Field
+        me.initField();
+    },
+
+    // private method requests by the component model of ExtJS
+    beforeDestroy: function () {
+
+        var me = this;
+
+        me.grid.un("propertychange", me.onPropertyChange, me);
+        Ext.destroyMembers(me, "grid");
+
+        me.callParent(arguments);
+    },
+
+    // jshint strict: true
+
+    /**
+     * Return the value of me field.
+     *
+     * @return {Object} the content of the dictionary.
+     *
+     */
+    getValue: function () {
+
+        "use strict";
+        var me = this,
+            source = me.grid.getSource();
+
+        return source;
+    },
+
+    /**
+     * Grid property has change
+     * Trigger the change event
+     */
+    onPropertyChange: function () {
+
+        "use strict";
+        var me = this;
+
+        me.fireEvent("change", me);
+    },
+
+    /**
+     * Set the value for the dictionary.
+     * Load the default dictionary when the value is null.
+     *
+     * @param {Object} value
+     * A key, value object which is loaded in the configuration grid.
+     *
+     */
+    setValue: function (value) {
+
+        "use strict";
+
+        var me = this,
+            source = value || me.originalValue;
+
+        me.grid.setSource(source);
+
+        // the standard way to set the value for a field
+        // extract from Ext.form.field.Base
+        return me.mixins.field.setValue.call(me, source);
+    }
+});
\ No newline at end of file

static/plugin_event/src/form/field/Summary.js

+/**
+ * Dedicated form field to render the 'summary' field.
+ *
+ * The field has two properties: functions and labels. The former is a list
+ * of string which can be choosen from a reference set while the latter is
+ * a string of labels separated by a comma.
+ *
+ * @since 0.7.0
+ *
+ */
+Ext.define("Event.form.field.Summary", {
+
+    extend: "Event.form.field.Property",
+    alias: "widget.xsummaryfield",
+    uses: "Ext.form.field.Tag",
+
+    /**
+     * @cfg {String[]}
+     * the list of aggregation functions.
+     *
+     */
+    functions: ["max",
+                "mean",
+                "median",
+                "min",
+                "sem",
+                "size",
+                "sum",
+                "std",
+                "var"],
+
+    // private properties for internationalization
+    textSelect: 'select...',
+    textFunctions: "function(s)",
+    textLabels: "label(s)",
+
+    // jshint strict: false
+
+    // private method requests by the component model of ExtJS
+    initComponent: function () {
+
+        var me = this;
+
+        // setup the property editors
+        me.sourceConfig = {
+            functions: {
+                displayName: me.textFunctions,
+                editor: Ext.create("Ext.form.field.Tag", {
+                    allowBlank: true,
+                    emptyText: me.textSelect,
+                    filterPickList: true,
+                    stacked: true,
+                    store: me.functions
+                })
+            },
+            labels: {
+                displayName: me.textLabels,
+                type: "string"
+            }
+
+        };
+
+        // instantiate the base class
+        me.callParent(arguments);
+    }
+
+    // jshint strict: true
+});
\ No newline at end of file