1153 some viz have flashing scrollbars

api/package.json

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

dashboard/package.json

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

dashboard/src/components/panel/panel-render/panel-render-base.tsx

@@ -19,7 +19,7 @@ const baseStyle: Sx = { border: '1px solid #e9ecef' };
 
 export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }: IPanelBase) => {
   const { ref, downloadPanelScreenshot } = useDownloadPanelScreenshot(panel);
-  const contentHeight = !panel.title ? '100%' : 'calc(100% - 25px - 5px)';
+  const contentHeight = !panel.title ? '100%' : 'calc(100% - 25px)';
   return (
     <PanelContextProvider
       value={{
@@ -33,8 +33,7 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
       <Box
         className="panel-root"
         ref={ref}
-        p={5}
-        pt={0}
+        p={0}
         sx={{
           ...baseStyle,
           ...panelStyle,

dashboard/src/components/panel/panel-render/viz/viz.tsx

@@ -10,6 +10,7 @@ import { useRenderPanelContext } from '../../../../contexts';
 import { IViewPanelInfo, PluginContext } from '../../../plugins';
 import { PluginVizViewComponent } from '../../plugin-adaptor';
 import './viz.css';
+import { Box } from '@mantine/core';
 
 function usePluginViz(data: TPanelData, layout: IViewPanelInfo['layout']): ReactNode | null {
   const { vizManager } = useContext(PluginContext);
@@ -57,7 +58,7 @@ export const Viz = observer(function _Viz({ data }: IViz) {
   const canRender = width > 0 && height > 0;
   return (
     <div className="viz-root" ref={ref}>
-      {canRender && <ErrorBoundary>{pluginViz}</ErrorBoundary>}
+      <Box sx={{ width, height, overflow: 'hidden' }}>{canRender && <ErrorBoundary>{pluginViz}</ErrorBoundary>}</Box>
     </div>
   );
 });

dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx

@@ -79,15 +79,13 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
     return null;
   }
   return (
-    <Box sx={{ width, height, overflow: 'hidden' }}>
-      <ReactEChartsCore
-        echarts={echarts}
-        option={option}
-        style={{ width, height }}
-        onEvents={onEvents}
-        notMerge
-        theme="merico-light"
-      />
-    </Box>
+    <ReactEChartsCore
+      echarts={echarts}
+      option={option}
+      style={{ width, height }}
+      onEvents={onEvents}
+      notMerge
+      theme="merico-light"
+    />
   );
 }

dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx

@@ -134,15 +134,13 @@ export function VizCalendarHeatmap({ context, instance }: VizViewProps) {
   }
 
   return (
-    <Box>
-      <Chart
-        variables={variables}
-        width={width}
-        height={height}
-        data={data}
-        conf={conf}
-        interactionManager={interactionManager}
-      />
-    </Box>
+    <Chart
+      variables={variables}
+      width={width}
+      height={height}
+      data={data}
+      conf={conf}
+      interactionManager={interactionManager}
+    />
   );
 }

dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx

@@ -144,7 +144,7 @@ export function VizCartesianChart({ context, instance }: VizViewProps) {
 
   const finalHeight = Math.max(0, height - topStatsHeight - bottomStatsHeight);
   return (
-    <Box sx={{ width, height, overflow: 'hidden' }}>
+    <>
       <Text
         ref={topStatsRef}
         align="left"
@@ -177,6 +177,6 @@ export function VizCartesianChart({ context, instance }: VizViewProps) {
           <React.Fragment key={i}>{c}</React.Fragment>
         ))}
       </Text>
-    </Box>
+    </>
   );
 }

dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx

@@ -1,8 +1,7 @@
-import { Box } from '@mantine/core';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { FunnelChart } from 'echarts/charts';
-import * as echarts from 'echarts/core';
 import { DataZoomComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import { defaults } from 'lodash';
 import React, { useMemo } from 'react';
@@ -30,9 +29,5 @@ export function VizFunnelChart({ context }: VizViewProps) {
   const data = context.data;
   const { width, height } = context.viewport;
 
-  return (
-    <Box>
-      <Chart width={width} height={height} data={data} conf={conf} />
-    </Box>
-  );
+  return <Chart width={width} height={height} data={data} conf={conf} />;
 }

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

@@ -1,4 +1,3 @@
-import { Box } from '@mantine/core';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { HeatmapChart } from 'echarts/charts';
 import {
@@ -12,8 +11,8 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import _, { defaults } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
-import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { useStorageData } from '~/components/plugins/hooks';
+import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { AnyObject } from '~/types';
 import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
 import { parseDataKey } from '~/utils/data';
@@ -115,15 +114,13 @@ export function VizHeatmap({ context, instance }: VizViewProps) {
   const { width, height } = context.viewport;
 
   return (
-    <Box>
-      <Chart
-        variables={variables}
-        width={width}
-        height={height}
-        data={data}
-        conf={conf}
-        interactionManager={interactionManager}
-      />
-    </Box>
+    <Chart
+      variables={variables}
+      width={width}
+      height={height}
+      data={data}
+      conf={conf}
+      interactionManager={interactionManager}
+    />
   );
 }

dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx

@@ -1,7 +1,5 @@
-import { Box } from '@mantine/core';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { BarChart, LineChart, ScatterChart } from 'echarts/charts';
-import * as echarts from 'echarts/core';
 import {
   DataZoomComponent,
   GridComponent,
@@ -10,18 +8,18 @@ import {
   MarkLineComponent,
   TooltipComponent,
 } from 'echarts/components';
+import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import _, { defaults } from 'lodash';
 import React, { useCallback, useMemo } from 'react';
-import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { useStorageData } from '~/components/plugins/hooks';
-import { AnyObject } from '~/types';
+import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
+import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable } from '~/utils/template';
 import { ClickEchartSeries } from '../cartesian/triggers';
 import { getOption } from './option';
 import { DEFAULT_CONFIG, IHorizontalBarChartConf } from './type';
-import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 
 interface IClickEchartsSeries {
   type: 'click';
@@ -115,15 +113,13 @@ export function VizHorizontalBarChart({ context, instance }: VizViewProps) {
   const data = context.data;
   const { width, height } = context.viewport;
   return (
-    <Box>
-      <Chart
-        variables={variables}
-        width={width}
-        height={height}
-        data={data}
-        conf={conf}
-        interactionManager={interactionManager}
-      />
-    </Box>
+    <Chart
+      variables={variables}
+      width={width}
+      height={height}
+      data={data}
+      conf={conf}
+      interactionManager={interactionManager}
+    />
   );
 }

dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx

@@ -1,21 +1,19 @@
-import { Box } from '@mantine/core';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { RadarChart } from 'echarts/charts';
 import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import _, { defaultsDeep, isEmpty } from 'lodash';
 import { useCallback, useMemo } from 'react';
-import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { useStorageData } from '~/components/plugins/hooks';
+import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { AnyObject } from '~/types';
 import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
+import { parseDataKey } from '~/utils/data';
 import { ITemplateVariable } from '~/utils/template';
 import { getOption } from './option';
 import { ClickRadarChartSeries } from './triggers/click-radar-chart';
 import { DEFAULT_CONFIG, IRadarChartConf } from './type';
-import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
-import { parseDataKey } from '~/utils/data';
 
 interface IClickRadarSeries {
   type: 'click';
@@ -108,15 +106,13 @@ export function VizRadarChart({ context, instance }: VizViewProps) {
     return null;
   }
   return (
-    <Box>
-      <Chart
-        variables={variables}
-        width={width}
-        height={height}
-        data={data}
-        conf={conf}
-        interactionManager={interactionManager}
-      />
-    </Box>
+    <Chart
+      variables={variables}
+      width={width}
+      height={height}
+      data={data}
+      conf={conf}
+      interactionManager={interactionManager}
+    />
   );
 }

dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx

@@ -136,7 +136,7 @@ export function VizScatterChart({ context, instance }: VizViewProps) {
     return null;
   }
   return (
-    <Box>
+    <>
       <Text
         ref={topStatsRef}
         align="left"
@@ -165,6 +165,6 @@ export function VizScatterChart({ context, instance }: VizViewProps) {
       >
         {Object.values(templates.bottom).map((c) => c)}
       </Text>
-    </Box>
+    </>
   );
 }

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

@@ -141,7 +141,7 @@ function VizTableComponent({ data, width, height, conf, context, instance }: IVi
   return (
     <div
       ref={tableContainerRef}
-      style={{ height, width }}
+      style={{ height, width, padding: '0 5px' }}
       data-enable-scrollbar
       className={cx(classes.root, { 'table-highlight-on-hover': conf.highlightOnHover })}
     >

package.json

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

settings-form/package.json

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

website/package.json

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