From a4ec593f7f4e5e390c3c08411291aa625c1210b1 Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Tue, 6 Jun 2023 20:53:59 +0800
Subject: [PATCH 1/2] fix(dashboard): viz-root's overflow behavior is causing
 ghost scrollbar

---
 .../settings/content/edit-panel/preview-viz.tsx          | 7 ++++++-
 dashboard/src/panel/index.tsx                            | 8 +++++---
 dashboard/src/panel/viz/index.tsx                        | 9 ++++-----
 .../src/plugins/viz-components/cartesian/option/grid.ts  | 5 ++++-
 .../src/plugins/viz-components/cartesian/option/index.ts | 7 -------
 .../src/plugins/viz-components/heatmap/option/grid.ts    | 1 +
 .../src/plugins/viz-components/heatmap/option/index.ts   | 3 ---
 .../plugins/viz-components/scatter-chart/option/grid.ts  | 2 +-
 8 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/dashboard/src/main/dashboard-editor/settings/content/edit-panel/preview-viz.tsx b/dashboard/src/main/dashboard-editor/settings/content/edit-panel/preview-viz.tsx
index 3aa399a2a..284f064cf 100644
--- a/dashboard/src/main/dashboard-editor/settings/content/edit-panel/preview-viz.tsx
+++ b/dashboard/src/main/dashboard-editor/settings/content/edit-panel/preview-viz.tsx
@@ -1,3 +1,4 @@
+import { Flex } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useContentModelContext, usePanelContext } from '../../../../../contexts';
 import { Viz } from '../../../../../panel/viz';
@@ -11,5 +12,9 @@ export const PreviewViz = observer(({ height }: { height: string }) => {
     panel: { viz, queryID },
   } = usePanelContext();
   const query = content.queries.findByID(queryID);
-  return <Viz viz={viz} data={data} loading={loading} error={error} query={query} height={height} />;
+  return (
+    <Flex direction="column" sx={{ width: '100%', height }}>
+      <Viz viz={viz} data={data} loading={loading} error={error} query={query} />
+    </Flex>
+  );
 });
diff --git a/dashboard/src/panel/index.tsx b/dashboard/src/panel/index.tsx
index 2b6b64947..6bbdc74e5 100644
--- a/dashboard/src/panel/index.tsx
+++ b/dashboard/src/panel/index.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mantine/core';
+import { Box, Flex } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import { PanelModelInstance } from '~/model/panels';
@@ -54,7 +54,7 @@ export const Panel = observer(function _Panel({ panel, view }: IPanel) {
   const panelNeedData = doesVizRequiresData(panel.viz.type);
   const loading = panelNeedData && state === 'loading';
 
-  const vizHeight = !panel.title ? '100%' : 'calc(100% - 25px - 5px)';
+  const contentHeight = !panel.title ? '100%' : 'calc(100% - 25px - 5px)';
   const panelStyle = getPanelBorderStyle(panel, panelNeedData, inEditMode);
   const needDropdownMenu = panelNeedData || inEditMode;
   return (
@@ -72,7 +72,9 @@ export const Panel = observer(function _Panel({ panel, view }: IPanel) {
         </Box>
         {needDropdownMenu && <PanelDropdownMenu view={view} />}
         <PanelTitleBar />
-        <Viz viz={panel.viz} data={data} loading={loading} error={error} height={vizHeight} query={query} />
+        <Flex direction="column" sx={{ height: contentHeight }}>
+          <Viz viz={panel.viz} data={data} loading={loading} error={error} query={query} />
+        </Flex>
       </Box>
     </PanelContextProvider>
   );
diff --git a/dashboard/src/panel/viz/index.tsx b/dashboard/src/panel/viz/index.tsx
index 7f877db8c..ef67f67e7 100644
--- a/dashboard/src/panel/viz/index.tsx
+++ b/dashboard/src/panel/viz/index.tsx
@@ -54,19 +54,18 @@ interface IViz {
   viz: IVizConfig;
   data: TVizData;
   loading: boolean;
-  height: string;
   error?: string;
   query?: QueryModelInstance;
 }
 
-export const Viz = observer(function _Viz({ height: vizRootHeight, viz, data, loading, error, query }: IViz) {
+export const Viz = observer(function _Viz({ viz, data, loading, error, query }: IViz) {
   const { ref, width, height } = useElementSize();
 
   const pluginViz = usePluginViz(data, { w: width, h: height });
   const dontNeedData = typesDontNeedData.includes(viz.type);
   if (dontNeedData) {
     return (
-      <div className="viz-root" style={{ height: vizRootHeight }} ref={ref}>
+      <div className="viz-root" ref={ref}>
         <ErrorBoundary>{pluginViz}</ErrorBoundary>
       </div>
     );
@@ -74,7 +73,7 @@ export const Viz = observer(function _Viz({ height: vizRootHeight, viz, data, lo
 
   if (loading) {
     return (
-      <div className="viz-root" style={{ height: vizRootHeight, position: 'relative' }} ref={ref}>
+      <div className="viz-root" style={{ position: 'relative' }} ref={ref}>
         <LoadingOverlay visible={loading} exitTransitionDuration={0} />
       </div>
     );
@@ -83,7 +82,7 @@ export const Viz = observer(function _Viz({ height: vizRootHeight, viz, data, lo
   const showStateMessage = !showError && !!query?.stateMessage;
   const showViz = !showError && !showStateMessage;
   return (
-    <div className="viz-root" style={{ height: vizRootHeight }} ref={ref}>
+    <div className="viz-root" ref={ref}>
       {showError && (
         <Text color="red" size="md" align="center" sx={{ fontFamily: 'monospace' }}>
           {error}
diff --git a/dashboard/src/plugins/viz-components/cartesian/option/grid.ts b/dashboard/src/plugins/viz-components/cartesian/option/grid.ts
index 2f8d8869f..3041c6ab7 100644
--- a/dashboard/src/plugins/viz-components/cartesian/option/grid.ts
+++ b/dashboard/src/plugins/viz-components/cartesian/option/grid.ts
@@ -2,7 +2,7 @@ import { ICartesianChartConf } from '../type';
 
 export function getGrid(conf: ICartesianChartConf) {
   const hasYAxisName = conf.y_axes.some((y) => !!y.name);
-  let top = 10;
+  let top = 15;
   if (hasYAxisName) {
     top += 20;
   }
@@ -20,6 +20,9 @@ export function getGrid(conf: ICartesianChartConf) {
 
   return {
     top,
+    right: 15,
     bottom,
+    left: 20,
+    containLabel: true,
   };
 }
diff --git a/dashboard/src/plugins/viz-components/cartesian/option/index.ts b/dashboard/src/plugins/viz-components/cartesian/option/index.ts
index 887ca28ac..422de654e 100644
--- a/dashboard/src/plugins/viz-components/cartesian/option/index.ts
+++ b/dashboard/src/plugins/viz-components/cartesian/option/index.ts
@@ -34,13 +34,6 @@ const defaultOption = {
       },
     },
   ],
-  grid: {
-    top: 10,
-    left: 20,
-    right: 15,
-    bottom: 25,
-    containLabel: true,
-  },
 };
 
 export function getOption(conf: ICartesianChartConf, data: TVizData, variables: ITemplateVariable[]) {
diff --git a/dashboard/src/plugins/viz-components/heatmap/option/grid.ts b/dashboard/src/plugins/viz-components/heatmap/option/grid.ts
index ca381a536..6af35f5ba 100644
--- a/dashboard/src/plugins/viz-components/heatmap/option/grid.ts
+++ b/dashboard/src/plugins/viz-components/heatmap/option/grid.ts
@@ -11,5 +11,6 @@ export function getGrid(conf: IHeatmapConf) {
     left: 5,
     right: 5,
     bottom,
+    containLabel: true,
   };
 }
diff --git a/dashboard/src/plugins/viz-components/heatmap/option/index.ts b/dashboard/src/plugins/viz-components/heatmap/option/index.ts
index 1de086d23..594887493 100644
--- a/dashboard/src/plugins/viz-components/heatmap/option/index.ts
+++ b/dashboard/src/plugins/viz-components/heatmap/option/index.ts
@@ -13,9 +13,6 @@ const defaultOption = {
   tooltip: {
     confine: true,
   },
-  grid: {
-    containLabel: true,
-  },
 };
 
 export function getOption(conf: IHeatmapConf, data: TVizData, variables: ITemplateVariable[]) {
diff --git a/dashboard/src/plugins/viz-components/scatter-chart/option/grid.ts b/dashboard/src/plugins/viz-components/scatter-chart/option/grid.ts
index 3eee3f895..265a93539 100644
--- a/dashboard/src/plugins/viz-components/scatter-chart/option/grid.ts
+++ b/dashboard/src/plugins/viz-components/scatter-chart/option/grid.ts
@@ -2,7 +2,7 @@ import { IScatterChartConf } from '../type';
 
 export function getGrid(conf: IScatterChartConf) {
   const hasYAxisName = conf.y_axes.some((y) => !!y.name);
-  let top = 10;
+  let top = 15;
   if (hasYAxisName) {
     top += 20;
   }

From 797cbd983e41abd13e40adc9d969dc36a4d6a818 Mon Sep 17 00:00:00 2001
From: Leto <gerile.tu@merico.dev>
Date: Tue, 6 Jun 2023 20:56:31 +0800
Subject: [PATCH 2/2] chore: publish v9.14.2

---
 api/package.json           | 2 +-
 dashboard/package.json     | 2 +-
 package.json               | 2 +-
 settings-form/package.json | 2 +-
 website/package.json       | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/api/package.json b/api/package.json
index d9e7941fd..464057d39 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "description": "",
   "main": "index.js",
   "scripts": {
diff --git a/dashboard/package.json b/dashboard/package.json
index e2d6bc63c..b8264e63d 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/package.json b/package.json
index 94705fa57..1e4da5ed6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "private": true,
   "workspaces": [
     "api",
diff --git a/settings-form/package.json b/settings-form/package.json
index e2147d56e..d72157e7d 100644
--- a/settings-form/package.json
+++ b/settings-form/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
diff --git a/website/package.json b/website/package.json
index 3ff40b8e1..18214240d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.3.11",
-    "@devtable/dashboard": "9.14.1",
-    "@devtable/settings-form": "9.14.1",
+    "@devtable/dashboard": "9.14.2",
+    "@devtable/settings-form": "9.14.2",
     "@emotion/react": "11.10.6",
     "@faker-js/faker": "7.6.0",
     "@mantine/core": "5.9.5",