Merge pull request #1416 from ClimateWatch-Vizzuality/feature/enhance…

…ments-flag

Feature/enhancements flag

.env.sample

@@ -17,4 +17,5 @@ USER_SURVEY_SPREADSHEET_URL=
 USER_NEWSLETTER_URL=
 REDIS_SERVER=redis://localhost:6379/0
 
-FEATURE_POP_UP=
+FEATURE_POP_UP=
+FEATURE_NDC_ENHANCEMENTS=

Dockerfile

@@ -28,6 +28,9 @@ ENV ONE_SIGNAL_ID $ONE_SIGNAL_ID
 ARG FEATURE_POP_UP
 ENV FEATURE_POP_UP $FEATURE_POP_UP
 
+ARG FEATURE_NDC_ENHANCEMENTS
+ENV FEATURE_NDC_ENHANCEMENTS $FEATURE_NDC_ENHANCEMENTS
+
 ARG POP_UP
 ENV POP_UP $POP_UP
 

Jenkinsfile

@@ -27,7 +27,7 @@ node {
     cw_files_prefix = 'climatewatch.org/www.climatewatch.org/climate-watch/'
     user_report_key = '81f6ea43-5c9f-48e0-bdb2-56fc59aafbb4'
   } else {
-    feature_flags_env = feature_flags_env + ' --build-arg FEATURE_POP_UP=false'
+    feature_flags_env = feature_flags_env + ' --build-arg FEATURE_POP_UP=false --build-arg FEATURE_NDC_ENHANCEMENTS=true'
   }
 
   // env vars with build-arg

app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-legacy-viz.js

@@ -0,0 +1,189 @@
+import { PureComponent, createElement } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import PropTypes from 'prop-types';
+import qs from 'query-string';
+import { handleAnalytics } from 'utils/analytics';
+import { isCountryIncluded } from 'app/utils';
+import { getLocationParamUpdated } from 'utils/navigation';
+import { europeSlug, europeanCountries } from 'app/data/european-countries';
+
+import { actions as fetchActions } from 'pages/ndcs-enhancements';
+import { actions as modalActions } from 'components/modal-metadata';
+
+import Component from './ndcs-enhancements-viz-component';
+
+import {
+  getMapIndicator,
+  getIndicatorsParsed,
+  getPathsWithStyles,
+  getISOCountries,
+  getLinkToDataExplorer,
+  summarizeIndicators,
+  MAP_COLORS
+} from './ndcs-enhancements-viz-selectors';
+
+const actions = { ...fetchActions, ...modalActions };
+
+const mapStateToProps = (state, { location }) => {
+  const { data, loading } = state.ndcsEnhancements;
+  const { countries } = state;
+  const search = qs.parse(location.search);
+  const ndcsEnhancementsWithSelection = {
+    ...data,
+    countries: countries.data,
+    query: search.search,
+    search
+  };
+  return {
+    loading,
+    query: ndcsEnhancementsWithSelection.query,
+    paths: getPathsWithStyles(ndcsEnhancementsWithSelection),
+    countries: countries.data,
+    isoCountries: getISOCountries(ndcsEnhancementsWithSelection),
+    indicator: getMapIndicator(ndcsEnhancementsWithSelection),
+    indicators: getIndicatorsParsed(ndcsEnhancementsWithSelection),
+    summaryData: summarizeIndicators(ndcsEnhancementsWithSelection),
+    downloadLink: getLinkToDataExplorer(ndcsEnhancementsWithSelection),
+    mapColors: MAP_COLORS
+  };
+};
+
+class NDCSEnhancementsVizContainer extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      geometryIdHover: null,
+      country: null
+    };
+  }
+
+  componentWillMount() {
+    this.props.fetchNDCSEnhancements();
+  }
+
+  getTooltipValues() {
+    const { geometryIdHover } = this.state;
+    const { indicator, indicators } = this.props;
+    if (!geometryIdHover || !indicator) return null;
+
+    const isEuropeanCountry = europeanCountries.includes(geometryIdHover);
+    const id = isEuropeanCountry ? europeSlug : geometryIdHover;
+
+    const dateIndicator = indicators.find(i => i.value === 'ndce_date');
+    const statementIndicator = indicators.find(
+      i => i.value === 'ndce_statement'
+    );
+
+    if (
+      indicator.locations &&
+      indicator.locations[id] &&
+      indicator.locations[id].label_slug !== 'no_info_2020'
+    ) {
+      const tooltipValues = {
+        label: this.getTooltipLabel(),
+        value: undefined,
+        statement: undefined,
+        note: 'Learn more in table below'
+      };
+      if (statementIndicator.locations[id]) { tooltipValues.statement = `${statementIndicator.locations[id].value}`; }
+      tooltipValues.value =
+        indicator.locations[id].label_slug === 'submitted_2020'
+          ? `Submitted a 2020 NDC on ${dateIndicator.locations[id].value}.`
+          : `${indicator.locations[id].value}`;
+
+      return tooltipValues;
+    }
+    return null;
+  }
+
+  getTooltipLabel() {
+    const { geometryIdHover } = this.state;
+    const { indicator, countries } = this.props;
+    if (!geometryIdHover || !indicator) return '';
+    if (europeanCountries.includes(geometryIdHover)) {
+      return countries.find(c => c.iso_code3 === 'EUU').wri_standard_name;
+    }
+    const country = countries.find(c => c.iso_code3 === geometryIdHover);
+    return country ? country.wri_standard_name : '';
+  }
+
+  handleSearchChange = query => {
+    this.updateUrlParam({ name: 'search', value: query });
+  };
+
+  handleCountryClick = geography => {
+    // Click action has been disabled for countries on this map per WRI request
+    const { isoCountries } = this.props;
+    const iso = geography.properties && geography.properties.id;
+    if (iso && isCountryIncluded(isoCountries, iso)) {
+      this.props.history.push(`/ndcs/country/${iso}`);
+      handleAnalytics(
+        'NDC Content Map',
+        'Use map to find country',
+        geography.properties.name
+      );
+    }
+  };
+
+  handleCountryEnter = geography => {
+    const iso = geography.properties && geography.properties.id;
+    if (iso) this.setState({ geometryIdHover: iso });
+    this.setState({ country: geography.properties });
+  };
+
+  handleSearchChange = query => {
+    this.updateUrlParam({ name: 'search', value: query });
+  };
+
+  handleInfoClick = () => {
+    this.props.setModalMetadata({
+      customTitle: 'NDC Content',
+      category: 'NDC Content Map',
+      slugs: ['ndc_cw', 'ndc_wb', 'ndc_die'],
+      open: true
+    });
+  };
+
+  updateUrlParam(param, clear) {
+    const { history, location } = this.props;
+    history.replace(getLocationParamUpdated(location, param, clear));
+  }
+
+  render() {
+    const tooltipValues = this.getTooltipValues();
+    const { query } = this.props;
+    const noContentMsg = query
+      ? 'No results found'
+      : 'There is no data for this indicator';
+    return createElement(Component, {
+      ...this.props,
+      tooltipValues,
+      handleCountryClick: this.handleCountryClick,
+      handleCountryEnter: this.handleCountryEnter,
+      handleInfoClick: this.handleInfoClick,
+      noContentMsg,
+      handleSearchChange: this.handleSearchChange,
+      indicator: this.props.indicator,
+      countryData: this.state.country,
+      summaryData: this.props.summaryData
+    });
+  }
+}
+
+NDCSEnhancementsVizContainer.propTypes = {
+  history: PropTypes.object.isRequired,
+  query: PropTypes.string,
+  indicator: PropTypes.object,
+  indicators: PropTypes.array,
+  summaryData: PropTypes.object,
+  location: PropTypes.object.isRequired,
+  isoCountries: PropTypes.array.isRequired,
+  countries: PropTypes.array,
+  setModalMetadata: PropTypes.func.isRequired,
+  fetchNDCSEnhancements: PropTypes.func.isRequired
+};
+
+export default withRouter(
+  connect(mapStateToProps, actions)(NDCSEnhancementsVizContainer)
+);

app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss

@@ -0,0 +1,15 @@
+@import '~styles/settings.scss';
+
+.tooltipContainer {
+  p {
+    margin-bottom: 1em;
+  }
+}
+
+.tooltipValue {
+  font-weight: $font-weight-bold;
+}
+
+.tooltipNote {
+  font-style: italic;
+}

app/javascript/app/components/ndcs/ndcs-enhancements-legacy-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import cx from 'classnames';
+import Icon from 'components/icon';
+import accordionArrow from 'assets/icons/accordion-arrow.svg';
+
+import tooltipTheme from 'styles/themes/map-tooltip/map-tooltip.scss';
+import styles from 'components/ndcs/ndcs-enhancements-viz/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss';
+
+const NDCSEnhancementsTooltip = props => {
+  const { isTablet, tooltipValues, id } = props;
+  return (
+    <ReactTooltip
+      className={cx(tooltipTheme.tooltipContainer, styles.tooltipContainer)}
+      id={id}
+      delayHide={isTablet ? 0 : 3000}
+    >
+      <div className={tooltipTheme.countryName}>{tooltipValues.label}</div>
+      {tooltipValues.value && (
+        <p
+          className={cx(tooltipTheme.text, styles.tooltipValue)}
+          dangerouslySetInnerHTML={{ __html: tooltipValues.value }} // eslint-disable-line
+        />
+      )}
+      {tooltipValues.statement && (
+        <p className={tooltipTheme.text}>{tooltipValues.statement}</p>
+      )}
+      {tooltipValues.note && (
+        <p className={cx(tooltipTheme.text, styles.tooltipNote)}>
+          {tooltipValues.note}
+        </p>
+      )}
+      <Icon icon={accordionArrow} className={tooltipTheme.icon} />
+    </ReactTooltip>
+  );
+};
+
+NDCSEnhancementsTooltip.propTypes = {
+  isTablet: PropTypes.bool,
+  tooltipValues: PropTypes.object,
+  id: PropTypes.string
+};
+
+export default NDCSEnhancementsTooltip;