Merge pull request #4683 from wri/feat/add-tree-cover-density-to-ttc-layer-FLAG-844

[FLAG-844] Add tree cover density to analysis

Author: willian-viana

components/charts/composed-chart/axis-label.jsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-const AxisLabel = ({ label, direction }) => (
+const AxisLabel = ({ label, direction, isSimple = false }) => (
   <>
     <foreignObject
       width="100%"
       height="100%"
       className={`${direction}-label-container`}
     >
       <div className={`${direction}-label`}>
-        <span>{label}</span>
+        <span
+          className={cx({
+            'simple-mode-label': isSimple,
+          })}
+        >
+          {label}
+        </span>
       </div>
     </foreignObject>
   </>
@@ -18,6 +25,7 @@ const AxisLabel = ({ label, direction }) => (
 AxisLabel.propTypes = {
   label: PropTypes.string,
   direction: PropTypes.string,
+  isSimple: PropTypes.bool,
 };
 
 export default AxisLabel;

components/charts/composed-chart/component.jsx

@@ -177,6 +177,7 @@ class CustomComposedChart extends PureComponent {
       <div
         className={cx('c-composed-chart', className, {
           'overflow-x-visible': hasLabels,
+          'no-padding': simple,
         })}
         style={{
           height: simple ? 110 : height || 250,
@@ -237,7 +238,13 @@ class CustomComposedChart extends PureComponent {
               interval="preserveStartEnd"
               {...xAxis}
               {...(config?.xAxis?.label && {
-                label: <AxisLabel label={config?.xAxis?.label} direction="x" />,
+                label: (
+                  <AxisLabel
+                    label={config?.xAxis?.label}
+                    direction="x"
+                    isSimple={simple}
+                  />
+                ),
               })}
             />
             {(!simple || simpleNeedsAxis) && (

components/charts/composed-chart/styles.scss

@@ -49,6 +49,10 @@ $layout-breakpoint-3xl: 1536px;
   overflow-x: visible !important;
 }
 
+.no-padding {
+  padding: 0 !important;
+}
+
 .x-label-container,
 .y-label-container {
   position: relative;
@@ -58,6 +62,10 @@ $layout-breakpoint-3xl: 1536px;
 
   span {
     font-size: 0.8125rem;
+
+    &.simple-mode-label {
+      font-size: 0.625rem !important;
+    }
   }
 }
 

components/widget/components/widget-footer/styles.scss

@@ -23,6 +23,7 @@
   }
 
   &.simple {
+    margin-top: 1.25rem;
     font-size: rem(10px);
 
     p {

components/widgets/land-cover/tree-cover-density/index.js

@@ -19,7 +19,7 @@ export default {
   types: ['country', 'wdpa', 'aoi'],
   admins: ['adm0', 'adm1', 'adm2'],
   large: true,
-  visible: ['dashboard'],
+  visible: ['dashboard', 'analysis'],
   chartType: 'composedChart',
   colors: 'density',
   settingsConfig: [