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

* Fix #2807 and add a tool to create chart from feature grid * add a flag for disabling chart creation from feature grid * fix feature grid toolbar test * update flag used to show char in feature grid
geosolutions-it · Apr 11, 2018 · ecccca0 · ecccca0
1 parent b6d66a2
commit ecccca0
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 12 deletions.
diff --git a/web/client/actions/__tests__/widgets-test.js b/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);
+    });
 
 });
diff --git a/web/client/actions/widgets.js b/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,

diff --git a/web/client/components/data/featuregrid/toolbars/Toolbar.jsx b/web/client/components/data/featuregrid/toolbars/Toolbar.jsx
@@ -16,7 +16,7 @@ const getSaveMessageId = ({saving, saved}) => {
     return "featuregrid.toolbar.saveChanges";
 };
 
-module.exports = ({events = {}, mode = "VIEW", selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false, isDownloadOpen, isColumnsOpen, disableToolbar, isSearchAllowed, disableDownload, displayDownload, isSyncActive = false, hasSupportedGeometry = true, disableZoomAll = false} = {}) =>
+module.exports = ({events = {}, mode = "VIEW", showChartButton = true, selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false, isDownloadOpen, isColumnsOpen, disableToolbar, isSearchAllowed, disableDownload, displayDownload, isSyncActive = false, hasSupportedGeometry = true, disableZoomAll = false} = {}) =>
 
     (<ButtonGroup id="featuregrid-toolbar" className="featuregrid-toolbar featuregrid-toolbar-margin">
         <TButton
@@ -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" && showChartButton}
+            onClick={events.chart}
+            glyph="stats"/>
     </ButtonGroup>);
diff --git a/web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx b/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" showChartButton />, 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);
+
+    });
 });
diff --git a/web/client/epics/__tests__/widgetsbuilder-test.js b/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 => {

diff --git a/web/client/epics/widgetsbuilder.js b/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
      */

diff --git a/web/client/plugins/featuregrid/panels/index.jsx b/web/client/plugins/featuregrid/panels/index.jsx
@@ -10,11 +10,12 @@ const React = require('react');
 const {connect} = require('react-redux');
 const {bindActionCreators} = require('redux');
 const {createSelector, createStructuredSelector} = require('reselect');
-const {wfsDownloadAvailable} = require('../../../selectors/controls');
+const {widgetBuilderAvailable, wfsDownloadAvailable} = require('../../../selectors/controls');
 const {paginationInfo, featureLoadingSelector, resultsSelector, isSyncWmsActive, featureCollectionResultSelector} = require('../../../selectors/query');
 const {getTitleSelector, modeSelector, selectedFeaturesCount, hasChangesSelector, hasGeometrySelector, isSimpleGeomSelector, hasNewFeaturesSelector, isSavingSelector, isSavedSelector, isDrawingSelector, canEditSelector, getAttributeFilter, hasSupportedGeometry, editingAllowedRolesSelector} = require('../../../selectors/featuregrid');
 const {userRoleSelector} = require('../../../selectors/security');
 const {isCesium} = require('../../../selectors/maptype');
+const {chartDisabledSelector} = require('../../../selectors/featuregrid');
 const {deleteFeatures, toggleTool, clearChangeConfirmed, closeFeatureGridConfirmed, closeFeatureGrid} = require('../../../actions/featuregrid');
 const {toolbarEvents, pageEvents} = require('../index');
 const {getAttributeFields} = require('../../../utils/FeatureGridUtils');
@@ -35,6 +36,7 @@ const Toolbar = connect(
         hasNewFeatures: hasNewFeaturesSelector,
         hasGeometry: hasGeometrySelector,
         isDrawing: isDrawingSelector,
+        showChartButton: state => !chartDisabledSelector(state) && widgetBuilderAvailable(state),
         isSimpleGeom: isSimpleGeomSelector,
         selectedCount: selectedFeaturesCount,
         disableToolbar: state => state && state.featuregrid && state.featuregrid.disableToolbar,

diff --git a/web/client/plugins/featuregrid/toolbarEvents.js b/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()
 };
diff --git a/web/client/selectors/featuregrid.js b/web/client/selectors/featuregrid.js
@@ -16,6 +16,7 @@ const {toChangesMap} = require('../utils/FeatureGridUtils');
 const getLayerById = (state, id) => head(layersSelector(state).filter(l => l.id === id));
 const getTitle = (layer = {}) => layer.title || layer.name;
 const selectedLayerIdSelector = state => get(state, "featuregrid.selectedLayer");
+const chartDisabledSelector = state => get(state, "featuregrid.chartDisabled", false);
 const getCustomAttributeSettings = (state, att) => get(state, `featuregrid.attributes[${att.name || att.attribute}]`);
 const {attributesSelector} = require('./query');
 const selectedFeaturesSelector = state => state && state.featuregrid && state.featuregrid.select;
@@ -126,6 +127,7 @@ module.exports = {
     isSavedSelector: state => state && state.featuregrid && state.featuregrid.saved,
     isDrawingSelector: state => state && state.featuregrid && state.featuregrid.drawing,
     geomTypeSelectedFeatureSelector,
+    chartDisabledSelector,
     hasNewFeaturesOrChanges: state => hasNewFeaturesSelector(state) || hasChangesSelector(state),
     isSimpleGeomSelector: state => isSimpleGeomType(geomTypeSelectedFeatureSelector(state)),
     canEditSelector: state => state && state.featuregrid && state.featuregrid.canEdit,

diff --git a/web/client/translations/data.de-DE b/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": {

diff --git a/web/client/translations/data.en-US b/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": {

diff --git a/web/client/translations/data.es-ES b/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": {

diff --git a/web/client/translations/data.fr-FR b/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": {

diff --git a/web/client/translations/data.it-IT b/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": {