@eeacms/volto-arcgis-block 0.1.37 → 0.1.38

package/CHANGELOG.md

@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38)
+
+- Bugs n improvements [`#114`](https://github.com/eea/volto-arcgis-block/pull/114)
+- change clms-utils version [`029f7af`](https://github.com/eea/volto-arcgis-block/commit/029f7afae5aa03dd732ea8b6e01f59eceec5c281)
+- ESLint fix [`dcdd9e7`](https://github.com/eea/volto-arcgis-block/commit/dcdd9e7b9fa206def9ff3f8173632c548ae83c59)
+- ESLint fix [`6e0cba5`](https://github.com/eea/volto-arcgis-block/commit/6e0cba5ecc450deec0deded854f7ad46c6eb7cf8)
+- Info widget table [`65da92c`](https://github.com/eea/volto-arcgis-block/commit/65da92c048bd363a7070c9e63f3c199f5be61721)
+
 #### [0.1.37](https://github.com/eea/volto-arcgis-block/compare/0.1.36...0.1.37)
 
+> 15 March 2022
+
+- Develop [`#113`](https://github.com/eea/volto-arcgis-block/pull/113)
 - Download flow [`#112`](https://github.com/eea/volto-arcgis-block/pull/112)
 
 #### [0.1.36](https://github.com/eea/volto-arcgis-block/compare/0.1.35...0.1.36)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.37",
+  "version": "0.1.38",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -40,7 +40,7 @@
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
     "@fortawesome/react-fontawesome": "0.1.14",
-    "@eeacms/volto-clms-utils": "0.1.1",
+    "@eeacms/volto-clms-utils": "*",
     "highcharts": "^9.3.2",
     "highcharts-react-official": "^3.1.0"
   },

package/src/components/MapViewer/AreaWidget.jsx

@@ -81,7 +81,7 @@ class AreaWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-cursor-marquee');
+        .classList.replace('esri-icon-close', 'esri-icon-cursor-marquee');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -95,7 +95,7 @@ class AreaWidget extends React.Component {
         'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-cursor-marquee', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-cursor-marquee', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/BasemapWidget.jsx

@@ -65,7 +65,7 @@ class BasemapWidget extends React.Component {
       this.basemapGallery.domNode.style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-basemap');
+        .classList.replace('esri-icon-close', 'esri-icon-basemap');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -75,7 +75,7 @@ class BasemapWidget extends React.Component {
       this.basemapGallery.domNode.style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-basemap', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-basemap', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/InfoWidget.jsx

@@ -50,7 +50,7 @@ class InfoWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-description');
+        .classList.replace('esri-icon-close', 'esri-icon-description');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({
@@ -64,7 +64,7 @@ class InfoWidget extends React.Component {
       this.props.mapViewer.setActiveWidget(this);
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-description', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-description', 'esri-icon-close');
       this.container.current.querySelector('.info-panel').style.display =
         'block';
       // By invoking the setState, we notify the state we want to reach
@@ -433,13 +433,17 @@ class InfoWidget extends React.Component {
   }
 
   transformWmsData(obj) {
-    let values = { timeFields: {}, data: {}, variables: {} };
+    let values = { timeFields: {}, data: {}, variables: {}, tableData: {} };
     let startField = Object.keys(obj[0]).find(
       (a, i) =>
         a.toUpperCase().includes('DATE') &&
         !isNaN(parseInt(Object.values(obj[0])[i])),
     );
     values.timeFields['start'] = startField;
+    values.tableData['fields'] = Object.keys(obj[0]);
+    values.tableData['values'] = obj.map((a) => {
+      return Object.entries(a);
+    });
     let fields = Object.keys(obj[0]).filter((a, i) => {
       return (
         !isNaN(parseInt(Object.values(obj[0])[i])) &&
@@ -510,10 +514,13 @@ class InfoWidget extends React.Component {
   }
 
   identify(layer, evt) {
-    let values = { timeFields: {}, data: {}, variables: {} };
+    let values = { timeFields: {}, data: {}, variables: {}, tableData: {} };
     //Complete time data
     values.timeFields['start'] = layer.timeInfo.startField;
     values.timeFields['end'] = layer.timeInfo.endField;
+    values.tableData['fields'] = layer.fields.map((a) => {
+      return a.name;
+    });
     let timeQuery = layer.createQuery();
     timeQuery.outFields = [layer.timeInfo.startField];
     let fields = layer.fields
@@ -552,7 +559,7 @@ class InfoWidget extends React.Component {
     query.units = 'meters';
     query.spatialRelationship = 'intersects'; // this is the default
     query.returnGeometry = true;
-    query.outFields = [fields.toString()]; // Information to be returned
+    query.outFields = [values.tableData.fields.toString()]; // Information to be returned
     values.data['outFields'] = [fields.toString()];
 
     let p2 = layer.queryFeatures(query).then((response) => {
@@ -579,8 +586,16 @@ class InfoWidget extends React.Component {
           e.geometry.latitude === point.latitude &&
           e.geometry.longitude === point.longitude,
       );
+      values.tableData['values'] = values.data['values'] = info.map((e) => {
+        return Object.entries(e.attributes);
+      });
       values.data['values'] = info.map((e) => {
-        return e.attributes;
+        let attributes = e.attributes;
+        return Object.fromEntries(
+          Object.entries(attributes).filter(([key]) =>
+            values.data.outFields[0].split(',').includes(key),
+          ),
+        );
       });
     });
 
@@ -695,6 +710,27 @@ class InfoWidget extends React.Component {
     );
   }
 
+  loadTimeInfoTable(index) {
+    let properties = this.infoData[index].data.tableData.values;
+    let table = properties.map((item) => {
+      let rows = item.map((row) => {
+        return (
+          <tr key={row}>
+            {Object.values(row).map((val) => (
+              <td key={val}>{val}</td>
+            ))}
+          </tr>
+        );
+      });
+      return (
+        <table className="info-table">
+          <tbody>{rows}</tbody>
+        </table>
+      );
+    });
+    return <>{table}</>;
+  }
+
   loadVariableSelector(index) {
     let response = this.infoData[index].data;
     let variables = response.variables.options;
@@ -913,6 +949,7 @@ class InfoWidget extends React.Component {
                       options={this.loadInfoChart(this.state.layerIndex)}
                     />
                     {this.loadStatisticsSelector(this.state.layerIndex)}
+                    {this.loadTimeInfoTable(this.state.layerIndex)}
                   </>
                 )}
                 {this.state.popup &&

package/src/components/MapViewer/LegendWidget.jsx

@@ -38,7 +38,7 @@ class LegendWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-legend');
+        .classList.replace('esri-icon-close', 'esri-icon-legend');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -46,7 +46,7 @@ class LegendWidget extends React.Component {
       this.props.mapViewer.setActiveWidget(this);
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-legend', 'esri-icon-close');
       this.container.current.querySelector('.legend-panel').style.display =
         'block';
       // By invoking the setState, we notify the state we want to reach

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -38,7 +38,7 @@ class MeasurementWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-measure');
+        .classList.replace('esri-icon-close', 'esri-icon-measure');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -56,7 +56,7 @@ class MeasurementWidget extends React.Component {
         'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-measure', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-measure', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
@@ -111,7 +111,7 @@ class MeasurementWidget extends React.Component {
 
   showCoordinates(pt) {
     this.setState({
-      latlong: pt.latitude.toFixed(3) + ' ' + pt.longitude.toFixed(3),
+      latlong: pt.latitude.toFixed(4) + ' ' + pt.longitude.toFixed(4),
     });
   }
 

package/src/components/MapViewer/MenuWidget.jsx

@@ -360,7 +360,7 @@ class MenuWidget extends React.Component {
       this.container.current.querySelector('#paneles').style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-left-arrow', 'esri-icon-drag-horizontal');
+        .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
       if (document.contains(document.querySelector('.timeslider-container')))
         document.querySelector('.timeslider-container').style.display = 'none';
 
@@ -373,7 +373,7 @@ class MenuWidget extends React.Component {
       this.container.current.querySelector('#paneles').style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-drag-horizontal', 'esri-icon-left-arrow');
+        .classList.replace('esri-icon-drag-horizontal', 'esri-icon-close');
       if (document.contains(document.querySelector('.timeslider-container')))
         document.querySelector('.timeslider-container').style.display = 'block';
 

package/src/components/MapViewer/PrintWidget.jsx

@@ -43,7 +43,7 @@ class PrintWidget extends React.Component {
       this.print.domNode.style.display = 'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-printer');
+        .classList.replace('esri-icon-close', 'esri-icon-printer');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: false });
@@ -52,7 +52,7 @@ class PrintWidget extends React.Component {
       this.print.domNode.style.display = 'block';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-printer', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-printer', 'esri-icon-close');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });

package/src/components/MapViewer/css/ArcgisMap.css

@@ -647,6 +647,7 @@
 
 .info-table {
   width: 100%;
+  margin-bottom: 1rem;
   table-layout: fixed;
 }
 
@@ -666,6 +667,10 @@
   background-color: #ebebeb;
 }
 
+.info-statistics-panel {
+  margin-bottom: 1rem;
+}
+
 /* Time slider*/
 .esri-ui-bottom-right.esri-ui-corner {
   width: 100%;

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -35,14 +35,14 @@ class LegendWidget extends React.Component {
         'none';
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-right-arrow', 'esri-icon-legend');
+        .classList.replace('esri-icon-close', 'esri-icon-legend');
       // By invoking the setState, we notify the state we want to reach
       // and ensure that the component is rendered again
       this.mapViewer.setState({ showMapMenu: false });
     } else {
       this.container.current
         .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-legend', 'esri-icon-right-arrow');
+        .classList.replace('esri-icon-legend', 'esri-icon-close');
       this.container.current.querySelector('.legend-panel').style.display =
         'block';