Revert "Render counter widgets using relative font size" (#6566)

getredash · Oct 31, 2023 · 8b8dd4f · 8b8dd4f
1 parent ae77e72
commit 8b8dd4f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/client/app/components/dashboards/dashboard-grid.less b/client/app/components/dashboards/dashboard-grid.less
@@ -123,6 +123,7 @@
       right: 10px;
       bottom: 15px;
       height: auto;
+      overflow: hidden;
       padding: 0;
     }
   }

diff --git a/viz-lib/src/visualizations/counter/Renderer.tsx b/viz-lib/src/visualizations/counter/Renderer.tsx
@@ -10,18 +10,17 @@ import "./render.less";
 
 function getCounterStyles(scale: any) {
   return {
-    fontSize: `${scale}pt`,
+    msTransform: `scale(${scale})`,
+    MozTransform: `scale(${scale})`,
+    WebkitTransform: `scale(${scale})`,
+    transform: `scale(${scale})`,
   };
 }
 
 function getCounterScale(container: any) {
-  // size of font in base container
-  // children use a relative font size (em)
-  if (container.closest('.visualization-preview') || container.closest('.ant-tabs-tabpane')) {
-    return "60";
-  }
-  const fontSize = 12 + container.clientHeight / 5;
-  return fontSize > 60 ? "60" : fontSize.toFixed();
+  const inner = container.firstChild;
+  const scale = Math.min(container.offsetWidth / inner.offsetWidth, container.offsetHeight / inner.offsetHeight);
+  return Number(isFinite(scale) ? scale : 1).toFixed(2); // keep only two decimal places
 }
 
 export default function Renderer({ data, options, visualizationName }: any) {

diff --git a/viz-lib/src/visualizations/counter/render.less b/viz-lib/src/visualizations/counter/render.less
@@ -2,14 +2,15 @@
   display: block;
   text-align: center;
   padding: 15px 10px;
-  position: relative;
   overflow: hidden;
+  position: relative;
 
   .counter-visualization-content {
     margin: 0;
     padding: 0;
-    font-size: 2em;
+    font-size: 80px;
     line-height: normal;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;