Merge pull request #3997 from Vizzuality/feature/fires-within-setting…

…s-btn Feature/fires within settings btn
wri · May 26, 2020 · 371fc23 · 371fc23
2 parents ffb25fc + 77669e6
commit 371fc23
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 37 deletions.
diff --git a/app/javascript/components/charts/components/chart-tooltip/chart-tooltip-component.js b/app/javascript/components/charts/components/chart-tooltip/chart-tooltip-component.js
@@ -23,7 +23,10 @@ class ChartTooltip extends PureComponent {
                 : values[d.key];
 
               return hideZeros && (!values || !value) ? null : (
-                <div key={d.key} className={`data-line ${d.position || ''}`}>
+                <div
+                  key={d.key || d.labelKey}
+                  className={`data-line ${d.position || ''}`}
+                >
                   {label && (
                     <div className="data-label">
                       {d.color && (

diff --git a/app/javascript/components/widget/component.jsx b/app/javascript/components/widget/component.jsx
@@ -49,7 +49,8 @@ class Widget extends PureComponent {
     location: PropTypes.object,
     adminLevel: PropTypes.string,
     preventRenderKeys: PropTypes.array,
-    geostore: PropTypes.object
+    geostore: PropTypes.object,
+    settingsBtnConfig: PropTypes.object
   };
 
   state = {
@@ -97,7 +98,8 @@ class Widget extends PureComponent {
       locationData,
       location,
       preventRenderKeys,
-      geostore
+      geostore,
+      settingsBtnConfig
     } = this.props;
     const { main } = colors || {};
 
@@ -167,6 +169,7 @@ class Widget extends PureComponent {
           handleChangeSettings={handleChangeSettings}
           parseInteraction={parseInteraction}
           toggleSettingsMenu={toggleSettingsMenu}
+          settingsBtnConfig={settingsBtnConfig}
         />
         {sentence &&
           data && (

diff --git a/app/javascript/components/widget/components/widget-numbered-list/component.jsx b/app/javascript/components/widget/components/widget-numbered-list/component.jsx
@@ -36,7 +36,7 @@ WidgetNumberedList.propTypes = {
   className: PropTypes.string,
   data: PropTypes.array,
   settings: PropTypes.object.isRequired,
-  settingsConfig: PropTypes.object,
+  settingsConfig: PropTypes.array,
   handleChangeSettings: PropTypes.func.isRequired,
   embed: PropTypes.bool
 };

diff --git a/app/javascript/components/widget/components/widget-pie-chart-legend/component.jsx b/app/javascript/components/widget/components/widget-pie-chart-legend/component.jsx
@@ -4,40 +4,64 @@ import { format } from 'd3-format';
 
 import PieChart from 'components/charts/pie-chart';
 import PieChartLegend from 'components/charts/components/pie-chart-legend';
+import Button from 'components/ui/button';
 
 import './styles';
 
 class WidgetPieChart extends PureComponent {
   render() {
-    const { data, settings, simple } = this.props;
+    const {
+      data,
+      settings,
+      simple,
+      toggleSettingsMenu,
+      settingsBtnConfig
+    } = this.props;
+    const showSettingsBtn =
+      settingsBtnConfig &&
+      settingsBtnConfig.shouldShowButton &&
+      settingsBtnConfig.shouldShowButton(this.props);
 
     return (
       <div className="c-pie-chart-legend-widget">
-        <PieChartLegend
-          className="cover-legend"
-          data={data}
-          config={{
-            format: '.3s',
-            unit: 'ha',
-            key: 'value',
-            ...settings
-          }}
-          simple={simple}
-        />
-        <PieChart
-          className="cover-pie-chart"
-          data={data}
-          maxSize={140}
-          tooltip={[
-            {
-              key: 'percentage',
-              unit: '%',
-              labelKey: 'label',
-              unitFormat: value => format('.1f')(value)
-            }
-          ]}
-          simple={simple}
-        />
+        {settings &&
+          showSettingsBtn &&
+          toggleSettingsMenu && (
+          <Button
+            theme="theme-button-small theme-button-light"
+            className="pie-contextual-settings-btn"
+            onClick={() => toggleSettingsMenu()}
+          >
+            {settingsBtnConfig.text}
+          </Button>
+        )}
+        <div className="pie-and-legend">
+          <PieChartLegend
+            className="cover-legend"
+            data={data}
+            config={{
+              format: '.3s',
+              unit: 'ha',
+              key: 'value',
+              ...settings
+            }}
+            simple={simple}
+          />
+          <PieChart
+            className="cover-pie-chart"
+            data={data}
+            maxSize={140}
+            tooltip={[
+              {
+                key: 'percentage',
+                unit: '%',
+                labelKey: 'label',
+                unitFormat: value => format('.1f')(value)
+              }
+            ]}
+            simple={simple}
+          />
+        </div>
       </div>
     );
   }
@@ -46,7 +70,9 @@ class WidgetPieChart extends PureComponent {
 WidgetPieChart.propTypes = {
   data: PropTypes.array,
   simple: PropTypes.bool,
-  settings: PropTypes.object.isRequired
+  settings: PropTypes.object.isRequired,
+  toggleSettingsMenu: PropTypes.func,
+  settingsBtnConfig: PropTypes.object
 };
 
 export default WidgetPieChart;
diff --git a/app/javascript/components/widget/components/widget-pie-chart-legend/styles.scss b/app/javascript/components/widget/components/widget-pie-chart-legend/styles.scss
@@ -1,10 +1,17 @@
 .c-pie-chart-legend-widget {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
   padding-top: rem(30px);
 
-  .cover-legend {
-    min-width: 50%;
+  .pie-and-legend {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .cover-legend {
+      min-width: 50%;
+    }
+  }
+
+  .pie-contextual-settings-btn {
+    margin: 0 10px 20px auto;
   }
 }
diff --git a/app/javascript/components/widgets/fires/fires-within/index.js b/app/javascript/components/widgets/fires/fires-within/index.js
@@ -28,7 +28,6 @@ export default {
       label: 'Forest Type',
       type: 'select',
       placeholder: 'All categories',
-      // TODO: default option -> Primary Forests if available, IFL otherwise.
       clearable: true,
       border: false
     },
@@ -80,6 +79,11 @@ export default {
     dataset: 'viirs',
     confidence: 'h'
   },
+  settingsBtnConfig: {
+    text: '+ Select an intersection',
+    shouldShowButton: props =>
+      !props.settings.forestType && !props.settings.landCategory
+  },
   refetchKeys: ['weeks', 'confidence', 'landCategory', 'forestType'],
   sentences: {
     noIndicator: