Fix #2807 and add a tool to create chart from feature grid

web/client/actions/__tests__/widgets-test.js

@@ -23,6 +23,7 @@ const {
     EXPORT_CSV,
     EXPORT_IMAGE,
     DEPENDENCY_SELECTOR_KEY,
+    createChart, NEW_CHART,
     exportCSV,
     exportImage,
     openFilterEditor,
@@ -176,5 +177,10 @@ describe('Test correctness of the widgets actions', () => {
         expect(retval.value.setup).toBe("setup");
         expect(retval.value.active).toBe(true);
     });
+    it('createChart', () => {
+        const retval = createChart(true);
+        expect(retval).toExist();
+        expect(retval.type).toBe(NEW_CHART);
+    });
 
 });

web/client/actions/widgets.js

@@ -27,6 +27,7 @@ const OPEN_FILTER_EDITOR = "WIDGETS:OPEN_FILTER_EDITOR";
 const EXPORT_CSV = "WIDGETS:EXPORT_CSV";
 const EXPORT_IMAGE = "WIDGETS:EXPORT_IMAGE";
 const WIDGET_SELECTED = "WIDGETS:WIDGET_SELECTED";
+const NEW_CHART = "WIDGETS:NEW_CHART";
 const DEFAULT_TARGET = "floating";
 const DEPENDENCY_SELECTOR_KEY = "dependencySelector";
 const WIDGETS_REGEX = /^widgets\["?([^"\]]*)"?\]\.?(.*)$/;
@@ -42,6 +43,14 @@ const createWidget = (widget) => ({
     widget
 });
 
+/**
+ * Intent to create a new chart Widget
+ * @return {object}        action with type `WIDGETS:NEW_CHART`
+ */
+const createChart = () => ({
+    type: NEW_CHART
+});
+
 /**
  * Add a new widget to the target
  * @param  {object} widget The widget template to start with
@@ -260,6 +269,7 @@ module.exports = {
     EXPORT_IMAGE,
     TOGGLE_CONNECTION,
     WIDGET_SELECTED,
+    createChart, NEW_CHART,
     exportCSV,
     exportImage,
     openFilterEditor,

web/client/components/data/featuregrid/toolbars/Toolbar.jsx

@@ -115,4 +115,11 @@ module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeo
             visible={mode === "VIEW"}
             onClick={events.sync}
             glyph="map-filter"/>
+        <TButton
+            id="grid-map-chart"
+            tooltip={<Message msgId="featuregrid.toolbar.createNewChart"/>}
+            disabled={disableToolbar}
+            visible={mode === "VIEW"}
+            onClick={events.chart}
+            glyph="stats"/>
     </ButtonGroup>);

web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx

@@ -316,4 +316,16 @@ describe('Featuregrid toolbar component', () => {
         zoomAllButton = document.getElementById("fg-zoom-all");
         expect(el.children[2].disabled).toBe(false);
     });
+    it('check chart button', () => {
+        const events = {
+            chart: () => {}
+        };
+        spyOn(events, "chart");
+        ReactDOM.render(<Toolbar events={events} mode="VIEW"/>, document.getElementById("container"));
+        const el = document.getElementsByClassName("featuregrid-toolbar")[0];
+        expect(el).toExist();
+        let chart = document.getElementById("fg-grid-map-chart");
+        expect(isVisibleButton(chart)).toBe(true);
+
+    });
 });

web/client/epics/__tests__/widgetsbuilder-test.js

@@ -11,14 +11,18 @@ const {
     openWidgetEditor,
     initEditorOnNew,
     closeWidgetEditorOnFinish,
-    handleWidgetsFilterPanel
+    handleWidgetsFilterPanel,
+    initEditorOnNewChart
 } = require('../widgetsbuilder');
 const {
     createWidget, editWidget, insertWidget,
-    openFilterEditor,
+    openFilterEditor, createChart,
     EDIT_NEW,
     EDITOR_CHANGE
 } = require('../../actions/widgets');
+const {
+    CLOSE_FEATURE_GRID
+} = require('../../actions/featuregrid');
 
 const {FEATURE_TYPE_SELECTED} = require('../../actions/wfsquery');
 const {LOAD_FILTER, search} = require('../../actions/queryform');
@@ -170,6 +174,33 @@ describe('widgetsbuilder epic', () => {
             }
         });
     });
+    it('initEditorOnNewChart', (done) => {
+        const startActions = [createChart()];
+        testEpic(initEditorOnNewChart, 2, startActions, actions => {
+            expect(actions.length).toBe(2);
+            actions.map((action) => {
+                switch (action.type) {
+                    case EDIT_NEW:
+                        expect(action.widget).toExist();
+                        // verify default mapSync
+                        expect(action.widget.mapSync).toBe(true);
+                        break;
+                    case CLOSE_FEATURE_GRID:
+                        expect(action.type).toBe(CLOSE_FEATURE_GRID);
+                        break;
+                    default:
+                        done(new Error("Action not recognized"));
+                }
+            }, );
+            done();
+        }, {
+            controls: {
+                widgetBuilder: {
+                    available: true
+                }
+            }
+        });
+    });
     it('handleWidgetsFilterPanel', (done) => {
         const startActions = [openFilterEditor()];
         testEpic(handleWidgetsFilterPanel, 4, startActions, actions => {

web/client/epics/widgetsbuilder.js

@@ -7,10 +7,11 @@
  */
 const Rx = require('rxjs');
 const {
-    NEW, INSERT, EDIT, OPEN_FILTER_EDITOR,
+    NEW, INSERT, EDIT, OPEN_FILTER_EDITOR, NEW_CHART,
     editNewWidget,
     onEditorChange
 } = require('../actions/widgets');
+const {closeFeatureGrid} = require('../actions/featuregrid');
 
 const {
     drawSupportReset
@@ -22,6 +23,7 @@ const {LOCATION_CHANGE} = require('react-router-redux');
 
 const {featureTypeSelected} = require('../actions/wfsquery');
 const {getWidgetLayer, getEditingWidgetFilter} = require('../selectors/widgets');
+const {wfsFilter} = require('../selectors/query');
 const {widgetBuilderAvailable} = require('../selectors/controls');
 const getFTSelectedArgs = (state) => {
     let layer = getWidgetLayer(state);
@@ -30,7 +32,7 @@ const getFTSelectedArgs = (state) => {
     return [url, typeName];
 };
 module.exports = {
-    openWidgetEditor: (action$, {getState = () => {}} = {}) => action$.ofType(NEW, EDIT)
+    openWidgetEditor: (action$, {getState = () => {}} = {}) => action$.ofType(NEW, EDIT, NEW_CHART)
         .filter(() => widgetBuilderAvailable(getState()))
         .switchMap(() => Rx.Observable.of(
             setControlProperty("widgetBuilder", "enabled", true),
@@ -48,6 +50,17 @@ module.exports = {
             // override action's type
             type: undefined
         }, {step: 0}))),
+    initEditorOnNewChart: (action$, {getState = () => {}} = {}) => action$.ofType(NEW_CHART)
+        .filter(() => widgetBuilderAvailable(getState()))
+        .switchMap((w) => Rx.Observable.of(closeFeatureGrid(), editNewWidget({
+            legend: false,
+            mapSync: true,
+            widgetType: "chart",
+            filter: wfsFilter(getState()),
+            ...w,
+            // override action's type
+            type: undefined
+        }, {step: 0}))),
     /**
      * Manages interaction with QueryPanel and widgetBuilder
      */

web/client/plugins/featuregrid/toolbarEvents.js

@@ -11,6 +11,9 @@ const {toggleTool,
     openAdvancedSearch,
     zoomAll
 } = require('../../actions/featuregrid');
+const {
+    createChart
+} = require('../../actions/widgets');
 const {toggleSyncWms} = require('../../actions/wfsquery');
 
 module.exports = {
@@ -28,5 +31,6 @@ module.exports = {
     onClose: () => closeFeatureGridConfirm(),
     showQueryPanel: () => openAdvancedSearch(),
     zoomAll: () => zoomAll(),
-    sync: () => toggleSyncWms()
+    sync: () => toggleSyncWms(),
+    chart: () => createChart()
 };

web/client/translations/data.de-DE

@@ -1058,7 +1058,8 @@
                 "downloadGridData": "Daten herunterladen",
                 "hideShowColumns": "Spalten ausblenden / anzeigen",
                 "zoomAll": "Zoom zur Erweterung der Seite",
-                "syncOnMap": "Karte mit Filter synchronisieren"
+                "syncOnMap": "Karte mit Filter synchronisieren",
+                "createNewChart": "Erstellen Sie ein Diagramm für die ausgewählte Ebene"
             }
         },
         "wfsdownload": {

web/client/translations/data.en-US

@@ -1059,7 +1059,8 @@
                 "downloadGridData": "Download grid data",
                 "hideShowColumns": "Hide/show columns",
                 "zoomAll": "Zoom to page extent",
-                "syncOnMap": "Sync map with fitler"
+                "syncOnMap": "Sync map with fitler",
+                "createNewChart": "Create a chart for the selected layer"
             }
         },
         "wfsdownload": {

web/client/translations/data.es-ES

@@ -1058,7 +1058,8 @@
                 "downloadGridData": "Descargar datos",
                 "hideShowColumns": "Ocultar / mostrar columnas",
                 "zoomAll": "Zoom a la extensión de la página",
-                "syncOnMap": "Sincronizar mapa con filtro"
+                "syncOnMap": "Sincronizar mapa con filtro",
+                "createNewChart": "Crea un gráfico para la capa seleccionada"
             }
         },
         "wfsdownload": {

web/client/translations/data.fr-FR

@@ -1059,7 +1059,8 @@
                 "downloadGridData": "Télécharger les données",
                 "hideShowColumns": "Masquer / afficher les colonnes",
                 "zoomAll": "Zoom sur la page",
-                "syncOnMap": "Synchroniser la carte avec un filtre"
+                "syncOnMap": "Synchroniser la carte avec un filtre",
+                "createNewChart": "Créer un graphique pour le calque sélectionné"
             }
         },
         "wfsdownload": {

web/client/translations/data.it-IT

@@ -1058,7 +1058,8 @@
                 "downloadGridData": "Esporta i dati della griglia",
                 "hideShowColumns": "Nascondi/mostra colonne",
                 "zoomAll": "Zoom all'estensione della pagina",
-                "syncOnMap": "Sincronizza la mappa con i filtri"
+                "syncOnMap": "Sincronizza la mappa con i filtri",
+                "createNewChart": "crea un grafico per il livello selezionato"
             }
         },
         "wfsdownload": {