fix(simple-mode): Fix responsiveness when widget is on simple mode (a…

…nalisys)
wri · Sep 7, 2023 · f78a89b · f78a89b
1 parent 7176244
commit f78a89b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/components/charts/composed-chart/axis-label.jsx b/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;
diff --git a/components/charts/composed-chart/component.jsx b/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) && (

diff --git 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
@@ -23,6 +23,7 @@
   }
 
   &.simple {
+    margin-top: 1.25rem;
     font-size: rem(10px);
 
     p {
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ @@
       }
       &.simple {
+        margin-top: 1.25rem;
         font-size: rem(10px);
         p {
@@ Expand Down @@