Merge pull request #1537 from merico-dev/1536-add-scale-option-to-stats

1536 add scale option to stats

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "13.40.1",
+  "version": "13.41.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "13.40.1",
+  "version": "13.41.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/plugins/viz-components/stats/viz-stats.tsx

@@ -1,5 +1,5 @@
 import { Box, Flex, Sx } from '@mantine/core';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { defaults } from 'lodash';
 import { observer } from 'mobx-react-lite';
@@ -32,6 +32,7 @@ function getWrapperSx(triggersCount: number) {
 }
 
 export const VizStats = observer(({ context, instance }: VizViewProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const interactionManager = useCurrentInteractionManager({
     vizManager: context.vizManager,
     instance,
@@ -59,6 +60,22 @@ export const VizStats = observer(({ context, instance }: VizViewProps) => {
     });
   }, [panel.variableValueMap, triggers, interactionManager]);
 
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const p: HTMLParagraphElement | null = ref.current.querySelector('.ProseMirror > p');
+    if (!p) {
+      return;
+    }
+
+    const { offsetWidth, offsetHeight } = p;
+    const scaleW = width / offsetWidth;
+    const scaleH = height / offsetHeight;
+    const scale = Math.min(scaleW, scaleH);
+    p.style.transform = `scale(${scale})`;
+  }, [ref.current, width, height, richTextContent]);
   return (
     <Flex
       className="viz-stats"
@@ -71,19 +88,28 @@ export const VizStats = observer(({ context, instance }: VizViewProps) => {
     >
       <Box className="viz-stats--clickable-wrapper" sx={getWrapperSx(triggers.length)} onClick={handleContentClick}>
         <ReadonlyRichText
+          ref={ref}
           value={richTextContent}
           styles={{
             root: {
               border: 'none',
               maxWidth: width,
               maxHeight: height,
               '&.mantine-RichTextEditor-root': {
-                overflow: 'auto !important',
+                overflow: 'hidden !important',
               },
             },
             content: {
               '&.mantine-RichTextEditor-content .ProseMirror': {
                 padding: 0,
+                height,
+              },
+              '&.mantine-RichTextEditor-content .ProseMirror > p': {
+                display: 'table',
+                margin: '0 auto !important',
+                transformOrigin: 'top center',
+                fontSize: 'initial',
+                lineHeight: 'initial',
               },
             },
           }}

dashboard/src/components/view/layout/edit-layout.tsx

@@ -62,7 +62,6 @@ export const EditLayout = observer(({ view, className = 'layout' }: IEditLayout)
   const gridLayouts = layoutsModel.gridLayouts(view.panelIDs);
 
   const onResize = (_layout: any, _oldLayoutItem: any, layoutItem: any, placeholder: any) => {
-    console.log('🔴 onResize', _layout);
     if (layoutItem.h < 30) {
       layoutItem.h = 30;
       placeholder.h = 30;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "13.40.1",
+  "version": "13.41.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "13.40.1",
+  "version": "13.41.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "13.40.1",
+  "version": "13.41.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"