Merge pull request #3324 from Vizzuality/fix/country-widget-fixes

Fix/country widget fixes

Author: edbrett

app/javascript/components/map/map-reducers.js

@@ -1,6 +1,7 @@
 export const initialState = {
   loading: false,
   error: false,
+  options: {},
   layerSpec: {},
   settings: {}
 };
@@ -18,11 +19,11 @@ const setLayerSpec = (state, { payload }) => ({
 
 const setMapSettings = (state, { payload }) => ({
   ...state,
-  settings: payload
+  options: payload
 });
 
 const setMapZoom = (state, { payload }) => {
-  let zoom = !payload.sum ? payload.value : state.settings.zoom + payload.value;
+  let zoom = !payload.sum ? payload.value : state.options.zoom + payload.value;
   if (zoom > 20) {
     zoom = 20;
   } else if (zoom < 1) {
@@ -31,8 +32,8 @@ const setMapZoom = (state, { payload }) => {
 
   return {
     ...state,
-    settings: {
-      ...state.settings,
+    options: {
+      ...state.options,
       zoom
     }
   };

app/javascript/components/map/map.js

@@ -28,7 +28,8 @@ const mapStateToProps = (
     error: map.error,
     bounds: countryData.geostore.bounds,
     layerSpec: map.layerSpec,
-    settings: map.settings,
+    settings: { ...map.settings, ...parentSettings },
+    options: map.options,
     layers: getLayers({ layers: activeLayers, layerSpec: map.layerSpec }),
     layersKeys: activeLayers
   };
@@ -43,23 +44,29 @@ class MapContainer extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    const { isParentLoading, bounds, layersKeys, settings } = nextProps;
+    const {
+      isParentLoading,
+      bounds,
+      layersKeys,
+      settings,
+      options
+    } = nextProps;
     if (isParentLoading !== this.props.isParentLoading && bounds) {
       this.boundMap(nextProps.bounds);
       this.setAreaHighlight();
-      this.updateLayers(layersKeys);
+      this.updateLayers(layersKeys, settings);
       this.setEvents();
     }
 
-    if (!isEqual(layersKeys, this.props.layersKeys)) {
-      this.updateLayers(layersKeys);
-    }
-
     if (
-      this.props.settings.zoom &&
-      this.props.settings.zoom !== settings.zoom
+      !isEqual(layersKeys, this.props.layersKeys) ||
+      !isEqual(settings, this.props.settings)
     ) {
-      this.updateZoom(settings.zoom);
+      this.updateLayers(layersKeys, settings);
+    }
+
+    if (this.props.options.zoom && this.props.options.zoom !== options.zoom) {
+      this.updateZoom(options.zoom);
     }
   }
 
@@ -114,9 +121,9 @@ class MapContainer extends PureComponent {
     }
   }
 
-  updateLayers(layers, layerSpec) {
+  updateLayers(layers, settings) {
     this.removeLayers();
-    this.setLayers(layers, layerSpec);
+    this.setLayers(layers, settings);
   }
 
   updateZoom(zoom) {
@@ -153,6 +160,7 @@ MapContainer.propTypes = {
   layers: PropTypes.array,
   layersKeys: PropTypes.array,
   settings: PropTypes.object,
+  options: PropTypes.object,
   mapOptions: PropTypes.object.isRequired,
   getLayerSpec: PropTypes.func.isRequired,
   setMapZoom: PropTypes.func.isRequired,

app/javascript/pages/country/data/indicators.json

@@ -26,7 +26,7 @@
   {
     "label": "Primary Forests",
     "value": "primary_forest",
-    "metaKey": "primary_forests",
+    "metaKey": "primary_forest",
     "category": "general"
   },
   {

app/javascript/pages/country/widget/components/widget-composed-chart/widget-composed-chart-component.js

@@ -41,14 +41,15 @@ class WidgetComposedChart extends PureComponent {
       gradients,
       tooltip,
       unit,
-      unitFormat
+      unitFormat,
+      height
     } = this.props.config;
     const { className, data, config, handleMouseMove } = this.props;
     const { lines, bars, areas } = yKeys;
     const maxYValue = this.findMaxValue(data, config);
 
     return (
-      <div className={`c-composed-chart ${className}`}>
+      <div className={`c-composed-chart ${className}`} style={{ height }}>
         <ResponsiveContainer>
           <ComposedChart
             data={data}

app/javascript/pages/country/widget/components/widget-dynamic-sentence/widget-dynamic-sentence-component.jsx

@@ -5,18 +5,19 @@ import './widget-dynamic-sentence-styles.scss';
 
 class WidgetDynamicSentence extends PureComponent {
   render() {
-    const { sentence } = this.props;
+    const { sentence, className } = this.props;
 
     return (
       <p
-        className="c-widget-dynamic-sentence"
+        className={`c-widget-dynamic-sentence ${className || ''}`}
         dangerouslySetInnerHTML={{ __html: sentence }}
       />
     );
   }
 }
 
 WidgetDynamicSentence.propTypes = {
+  className: PropTypes.string,
   sentence: PropTypes.string.isRequired
 };
 

app/javascript/pages/country/widget/components/widget-header/widget-header-component.js

@@ -4,6 +4,7 @@ import { Tooltip } from 'react-tippy';
 import isEmpty from 'lodash/isEmpty';
 import { COUNTRY } from 'pages/country/router';
 import { isTouch } from 'utils/browser';
+import { SCREEN_L } from 'utils/constants';
 
 import Button from 'components/button';
 import Icon from 'components/icon';
@@ -29,6 +30,7 @@ class WidgetHeader extends PureComponent {
       title,
       settingsConfig,
       locationNames,
+      modalClosing,
       widget,
       location,
       query,
@@ -43,7 +45,7 @@ class WidgetHeader extends PureComponent {
     } = this.props;
     const { tooltipOpen } = this.state;
     const widgetSize = settingsConfig.config.size;
-    const isDeviceTouch = isTouch();
+    const isDeviceTouch = isTouch() || window.innerWidth < SCREEN_L;
     const haveMapLayers =
       settingsConfig.settings &&
       settingsConfig.settings.layers &&
@@ -62,7 +64,7 @@ class WidgetHeader extends PureComponent {
           {!embed &&
             haveMapLayers && (
               <Button
-                className="map-button"
+                className={`map-button ${active ? '-active' : ''}`}
                 theme={`theme-button-small ${
                   widgetSize === 'small' || isDeviceTouch ? 'square' : ''
                 }`}
@@ -115,7 +117,9 @@ class WidgetHeader extends PureComponent {
                 trigger="click"
                 interactive
                 onRequestClose={() => {
-                  this.setState({ tooltipOpen: false });
+                  if (!modalClosing) {
+                    this.setState({ tooltipOpen: false });
+                  }
                 }}
                 onShow={() => this.setState({ tooltipOpen: true })}
                 arrow

app/javascript/pages/country/widget/components/widget-header/widget-header-styles.scss

@@ -26,6 +26,14 @@
     .map-button {
       position: relative;
 
+      &.-active {
+        cursor: default;
+
+        &:hover {
+          background-color: $green-gfw;
+        }
+      }
+
       .map-icon {
         width: rem(20px);
         height: rem(20px);

app/javascript/pages/country/widget/components/widget-settings-statement/widget-settings-statement-component.jsx

@@ -7,7 +7,9 @@ class WidgetSettingsStatement extends PureComponent {
   render() {
     const { statement } = this.props;
 
-    return <div className="c-widget-settings-statement">{statement}</div>;
+    return statement ? (
+      <div className="c-widget-settings-statement">{statement}</div>
+    ) : null;
   }
 }
 

app/javascript/pages/country/widget/components/widget-settings/widget-settings-component.jsx

@@ -59,9 +59,11 @@ class WidgetSettings extends PureComponent {
                     className="theme-button-small square info-button"
                     onClick={() =>
                       setModalMeta(
-                        option.metaKey === 'primary_forests'
+                        option.metaKey === 'primary_forest'
                           ? `${lowerCase(locationNames.country.value)}_${
                             option.metaKey
+                          }${
+                            locationNames.country.value === 'DRC' ? 's' : ''
                           }`
                           : option.metaKey
                       )

app/javascript/pages/country/widget/widgets/widget-fires/widget-fires-actions.js

@@ -8,33 +8,27 @@ const setFiresData = createAction('setFiresData');
 const setFiresSettings = createAction('setFiresSettings');
 const setFiresLoading = createAction('setFiresLoading');
 
-const getFiresData = createThunkAction(
-  'getFiresData',
-  params => (dispatch, state) => {
-    if (!state().widgetFires.loading) {
-      dispatch(setFiresLoading({ loading: true, error: false }));
-
-      const dates = [
-        moment().format('YYYY-MM-DD'),
-        moment()
-          .subtract(params.periodValue, params.period)
-          .format('YYYY-MM-DD')
-      ];
-      fetchViirsAlerts({ ...params, dates })
-        .then(response => {
-          dispatch(
-            setFiresData({
-              fires: response.data.data
-            })
-          );
+const getFiresData = createThunkAction('getFiresData', params => dispatch => {
+  dispatch(setFiresLoading({ loading: true, error: false }));
+  const dates = [
+    moment().format('YYYY-MM-DD'),
+    moment()
+      .subtract(params.periodValue, params.period)
+      .format('YYYY-MM-DD')
+  ];
+  fetchViirsAlerts({ ...params, dates })
+    .then(response => {
+      dispatch(
+        setFiresData({
+          fires: response.data.data
         })
-        .catch(error => {
-          dispatch(setFiresLoading({ loading: false, error: true }));
-          console.error(error);
-        });
-    }
-  }
-);
+      );
+    })
+    .catch(error => {
+      dispatch(setFiresLoading({ loading: false, error: true }));
+      console.error(error);
+    });
+});
 
 export default {
   setFiresData,

app/javascript/pages/country/widget/widgets/widget-fires/widget-fires-reducers.js

@@ -1,7 +1,7 @@
 import WIDGETS_CONFIG from 'pages/country/data/widgets-config.json';
 
 export const initialState = {
-  loading: false,
+  loading: true,
   error: false,
   data: {},
   ...WIDGETS_CONFIG.fires

app/javascript/pages/country/widget/widgets/widget-fires/widget-fires-selectors.js

@@ -69,6 +69,7 @@ export const chartConfig = createSelector(
       xAxis: {
         tickCount: 2,
         interval: data.length - 2,
+        padding: { right: 8 },
         tickFormatter: t => moment(t).format('Do MMM')
       },
       tooltip: [

app/javascript/pages/country/widget/widgets/widget-glad-alerts/widget-glad-alerts-component.js

@@ -12,7 +12,9 @@ class WidgetGladAlerts extends PureComponent {
 
     return (
       <div className="c-widget-glad-alerts">
-        {sentence && <WidgetDynamicSentence sentence={sentence} />}
+        {sentence && (
+          <WidgetDynamicSentence className="sentence" sentence={sentence} />
+        )}
         {data && (
           <WidgetComposedChart
             className="loss-chart"

app/javascript/pages/country/widget/widgets/widget-glad-alerts/widget-glad-alerts-selectors.js

@@ -234,7 +234,8 @@ export const chartConfig = createSelector(
       yAxis: {
         domain: [0, 'auto'],
         allowDataOverflow: true
-      }
+      },
+      height: '280px'
     };
   }
 );

app/javascript/pages/country/widget/widgets/widget-glad-alerts/widget-glad-alerts-styles.scss

@@ -2,6 +2,18 @@
 
 .c-widget-glad-alerts {
   .loss-chart {
-    padding-top: rem(40px);
+    padding-top: rem(20px);
+  }
+
+  .sentence {
+    height: rem(180px);
+
+    @media screen and (min-width: $screen-m) {
+      height: rem(140px);
+    }
+
+    @media screen and (min-width: $screen-l) {
+      height: rem(90px);
+    }
   }
 }