diff --git a/components/charts/composed-chart/axis-label.jsx b/components/charts/composed-chart/axis-label.jsx index 8bf4b9aac4..40a828e3fa 100644 --- a/components/charts/composed-chart/axis-label.jsx +++ b/components/charts/composed-chart/axis-label.jsx @@ -1,7 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import cx from 'classnames'; -const AxisLabel = ({ label, direction }) => ( +const AxisLabel = ({ label, direction, isSimple = false }) => ( <> ( className={`${direction}-label-container`} >
- {label} + + {label} +
@@ -18,6 +25,7 @@ const AxisLabel = ({ label, direction }) => ( AxisLabel.propTypes = { label: PropTypes.string, direction: PropTypes.string, + isSimple: PropTypes.bool, }; export default AxisLabel; diff --git a/components/charts/composed-chart/component.jsx b/components/charts/composed-chart/component.jsx index d726c5a6c2..c95d23bfae 100644 --- a/components/charts/composed-chart/component.jsx +++ b/components/charts/composed-chart/component.jsx @@ -177,6 +177,7 @@ class CustomComposedChart extends PureComponent {
, + label: ( + + ), })} /> {(!simple || simpleNeedsAxis) && ( diff --git a/components/charts/composed-chart/styles.scss b/components/charts/composed-chart/styles.scss index edd0eee7f2..c9b3aac083 100644 --- a/components/charts/composed-chart/styles.scss +++ b/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; + } } } diff --git a/components/widget/components/widget-footer/styles.scss b/components/widget/components/widget-footer/styles.scss index 2993c87966..9accdc6d5c 100644 --- a/components/widget/components/widget-footer/styles.scss +++ b/components/widget/components/widget-footer/styles.scss @@ -23,6 +23,7 @@ } &.simple { + margin-top: 1.25rem; font-size: rem(10px); p { diff --git a/components/widgets/land-cover/tree-cover-density/index.js b/components/widgets/land-cover/tree-cover-density/index.js index e1dcff3881..d8e37bc1c5 100644 --- a/components/widgets/land-cover/tree-cover-density/index.js +++ b/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: [