Merge pull request #1184 from merico-dev/1183-adjust-panel-style-by-n…

…ew-ui-design 1183 adjust panel style by new UI design
merico-dev · Sep 18, 2023 · d1e7be3 · d1e7be3
2 parents e62fb21 + 008bc5f
commit d1e7be3
Show file tree

Hide file tree

Showing 33 changed files with 313 additions and 158 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,5 +2,4 @@
 **/*/dist
 api/swagger
 *.json
-*.html
-*.css
+*.html
diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.33.3",
+  "version": "10.34.1",
   "description": "",
   "main": "index.js",
   "scripts": {

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.33.3",
+  "version": "10.34.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

diff --git a/dashboard/src/components/panel/panel-editor/dropdown-menu/index.tsx b/dashboard/src/components/panel/panel-editor/dropdown-menu/index.tsx
@@ -45,7 +45,7 @@ export const PanelDropdownMenu = observer(({ view }: { view: ViewMetaInstance })
       <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 300 }}>
         <Menu withinPortal>
           <Menu.Target>
-            <Box className="panel-dropdown-target" sx={{ width: '100%', height: '25px' }}></Box>
+            <Box className="panel-dropdown-target" sx={{ width: '100%' }}></Box>
           </Menu.Target>
           <Menu.Dropdown>
             <Menu.Item onClick={panel.refreshData} icon={<Refresh size={14} />}>

diff --git a/dashboard/src/components/panel/panel-render/dropdown-menu/index.tsx b/dashboard/src/components/panel/panel-render/dropdown-menu/index.tsx
@@ -28,7 +28,7 @@ export const PanelDropdownMenu = observer(({ view }: { view: ViewMetaInstance })
     <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 300 }}>
       <Menu withinPortal>
         <Menu.Target>
-          <Box className="panel-dropdown-target" sx={{ width: '100%', height: '25px' }}></Box>
+          <Box className="panel-dropdown-target" />
         </Menu.Target>
         <Menu.Dropdown>
           <Menu.Item onClick={panel.refreshData} icon={<Refresh size={14} />}>

diff --git a/dashboard/src/components/panel/panel-render/panel-render-base.css b/dashboard/src/components/panel/panel-render/panel-render-base.css
@@ -1,9 +1,53 @@
 .panel-root {
-    height: 100%;
-    width: 100%;
-    max-width: 100%;
-    background: transparent;
-    border-radius: 4px;
-    position: relative;
-  }
-
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  background: transparent;
+  border-radius: 4px;
+  position: relative;
+}
+
+.panel-title-wrapper {
+  padding: 16px 32px;
+}
+.panel-title-wrapper .panel-title-text {
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: bold;
+}
+.panel-description-popover-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 28px;
+  z-index: 310;
+}
+
+.panel-dropdown-target {
+  width: 100%;
+  height: 28px;
+  text-align: center;
+  transition: background-color 300ms ease;
+}
+.panel-dropdown-target:hover {
+  cursor: pointer;
+  background-color: rgba(100, 100, 100, 0.05);
+}
+
+.panel-root.panel-root--show-title .panel-dropdown-target {
+  height: 60px;
+}
+.panel-root.panel-root--show-title .panel-description-popover-wrapper {
+  left: 16px;
+  top: 16px;
+}
+.panel-root.panel-root--show-title .panel-description-popover-wrapper {
+  left: 16px;
+  top: 16px;
+}
+.panel-root .panel-viz-section {
+  height: 100%;
+}
+.panel-root.panel-root--show-title .panel-viz-section {
+  height: calc(100% - 60px);
+}
diff --git a/dashboard/src/components/panel/panel-render/panel-render-base.tsx b/dashboard/src/components/panel/panel-render/panel-render-base.tsx
@@ -19,7 +19,9 @@ 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)';
+  const showTitle = !!panel.title;
+  const titleHeight = showTitle ? '60px' : '28px';
+  const contentHeight = !panel.title ? '100%' : `calc(100% - ${titleHeight})`;
   return (
     <PanelContextProvider
       value={{
@@ -31,20 +33,20 @@ export const PanelRenderBase = observer(({ panel, panelStyle, dropdownContent }:
       }}
     >
       <Box
-        className="panel-root"
+        className={`panel-root ${showTitle ? 'panel-root--show-title' : ''}`}
         ref={ref}
         p={0}
         sx={{
           ...baseStyle,
           ...panelStyle,
         }}
       >
-        <Box sx={{ position: 'absolute', left: 0, top: 0, height: 28, zIndex: 310 }}>
+        <Box className="panel-description-popover-wrapper">
           <DescriptionPopover />
         </Box>
         {dropdownContent}
         <PanelTitleBar />
-        <PanelVizSection panel={panel} height={contentHeight} />
+        <PanelVizSection panel={panel} />
       </Box>
     </PanelContextProvider>
   );

diff --git a/dashboard/src/components/panel/panel-render/title-bar/index.css b/dashboard/src/components/panel/panel-render/title-bar/index.css
diff --git a/dashboard/src/components/panel/panel-render/title-bar/index.tsx b/dashboard/src/components/panel/panel-render/title-bar/index.tsx
@@ -1,7 +1,6 @@
 import { Group, Text } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useRenderPanelContext } from '~/contexts';
-import './index.css';
 
 export const PanelTitleBar = observer(function _PanelTitleBar() {
   const { panel } = useRenderPanelContext();
@@ -11,8 +10,8 @@ export const PanelTitleBar = observer(function _PanelTitleBar() {
     return null;
   }
   return (
-    <Group grow position="center" px={20} className="panel-title-wrapper" sx={{ flexGrow: 1 }}>
-      <Text align="center" lineClamp={1} weight="bold">
+    <Group grow position="center" className="panel-title-wrapper" sx={{ flexGrow: 1 }}>
+      <Text align="center" lineClamp={1} className="panel-title-text">
         {title}
       </Text>
     </Group>

diff --git a/dashboard/src/components/panel/panel-render/viz/panel-viz-section.tsx b/dashboard/src/components/panel/panel-render/viz/panel-viz-section.tsx
@@ -4,9 +4,9 @@ import { PanelRenderModelInstance } from '~/model';
 import { PanelErrorOrStateMessage } from './panel-error-or-state-message';
 import { Viz } from './viz';
 
-export const PanelVizSection = observer(({ panel, height }: { panel: PanelRenderModelInstance; height: string }) => {
+export const PanelVizSection = observer(({ panel }: { panel: PanelRenderModelInstance }) => {
   return (
-    <Flex direction="column" sx={{ height, position: 'relative', width: '100%' }}>
+    <Flex className="panel-viz-section" direction="column" sx={{ position: 'relative', width: '100%' }}>
       <LoadingOverlay visible={panel.dataLoading} exitTransitionDuration={0} />
       {!panel.canRenderViz && <PanelErrorOrStateMessage panel={panel} />}
       {panel.canRenderViz && <Viz data={panel.data} />}

diff --git a/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx b/dashboard/src/components/plugins/viz-components/bar-3d-chart/viz-bar-3d-chart.tsx
@@ -1,17 +1,25 @@
+import ReactEChartsCore from 'echarts-for-react/lib/core';
 import 'echarts-gl';
-import * as echarts from 'echarts/core';
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
-import ReactEChartsCore from 'echarts-for-react/lib/core';
 import { defaults, get, maxBy, minBy } from 'lodash';
 import { useMemo } from 'react';
-import { VizViewProps } from '~/types/plugin';
 import { useStorageData } from '~/components/plugins/hooks';
-import { DEFAULT_CONFIG, IBar3dChartConf } from './type';
+import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
+import { VizViewProps } from '~/types/plugin';
 import { extractFullQueryData, parseDataKey } from '~/utils/data';
+import { DEFAULT_CONFIG, IBar3dChartConf } from './type';
 
 echarts.use([GridComponent, VisualMapComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
 
+const paddings = {
+  top: 16,
+  right: 16,
+  bottom: 16,
+  left: 16,
+};
+
 export function VizBar3dChart({ context }: VizViewProps) {
   const { value: conf } = useStorageData<IBar3dChartConf>(context.instanceData, 'config');
   const data = context.data;
@@ -94,5 +102,16 @@ export function VizBar3dChart({ context }: VizViewProps) {
   if (!conf) {
     return null;
   }
-  return <ReactEChartsCore echarts={echarts} option={option} style={{ width, height }} notMerge theme="merico-light" />;
+
+  return (
+    <DefaultVizBox width={width} height={height}>
+      <ReactEChartsCore
+        echarts={echarts}
+        option={option}
+        style={getBoxContentStyle(width, height)}
+        notMerge
+        theme="merico-light"
+      />
+    </DefaultVizBox>
+  );
 }
diff --git a/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx b/dashboard/src/components/plugins/viz-components/boxplot-chart/viz-boxplot-chart.tsx
@@ -1,4 +1,3 @@
-import { Box } from '@mantine/core';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
 import 'echarts-gl';
 import { BoxplotChart } from 'echarts/charts';
@@ -16,6 +15,7 @@ import { useCallback, useMemo } from 'react';
 import { useStorageData } from '~/components/plugins/hooks';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
+import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box';
 import { VizViewProps } from '~/types/plugin';
 import { getOption } from './option';
 import { ClickBoxplotSeries } from './triggers';
@@ -79,13 +79,15 @@ export function VizBoxplotChart({ context, instance }: VizViewProps) {
     return null;
   }
   return (
-    <ReactEChartsCore
-      echarts={echarts}
-      option={option}
-      style={{ width, height }}
-      onEvents={onEvents}
-      notMerge
-      theme="merico-light"
-    />
+    <DefaultVizBox width={width} height={height}>
+      <ReactEChartsCore
+        echarts={echarts}
+        option={option}
+        style={getBoxContentStyle(width, height)}
+        onEvents={onEvents}
+        notMerge
+        theme="merico-light"
+      />
+    </DefaultVizBox>
   );
 }
diff --git a/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx b/dashboard/src/components/plugins/viz-components/calendar-heatmap/viz-calendar-heatmap.tsx
@@ -22,6 +22,7 @@ import { getOption } from './option';
 import { ClickCalendarDate } from './triggers';
 import { DEFAULT_CONFIG, ICalendarHeatmapConf } from './type';
 import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
+import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 
 echarts.use([
   DataZoomComponent,
@@ -100,10 +101,6 @@ function Chart({
     return getOption(conf, data, variables);
   }, [conf, data]);
 
-  if (!width || !height) {
-    return null;
-  }
-
   return (
     <ReactEChartsCore
       echarts={echarts}
@@ -133,14 +130,20 @@ export function VizCalendarHeatmap({ context, instance }: VizViewProps) {
     return null;
   }
 
+  if (!width || !height) {
+    return null;
+  }
+
   return (
-    <Chart
-      variables={variables}
-      width={width}
-      height={height}
-      data={data}
-      conf={conf}
-      interactionManager={interactionManager}
-    />
+    <DefaultVizBox width={width} height={height}>
+      <Chart
+        variables={variables}
+        width={getBoxContentWidth(width)}
+        height={getBoxContentHeight(height)}
+        data={data}
+        conf={conf}
+        interactionManager={interactionManager}
+      />
+    </DefaultVizBox>
   );
 }
diff --git a/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx b/dashboard/src/components/plugins/viz-components/cartesian/viz-cartesian-chart.tsx
@@ -1,4 +1,4 @@
-import { Box, Text } from '@mantine/core';
+import { Text } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import type { EChartsInstance } from 'echarts-for-react';
 import ReactEChartsCore from 'echarts-for-react/lib/core';
@@ -15,16 +15,16 @@ import * as echarts from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
 import _, { defaults } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
 import { useStorageData } from '~/components/plugins/hooks';
+import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
+import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions';
+import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box';
 import { IVizInteractionManager, VizViewProps } from '~/types/plugin';
 import { ITemplateVariable, templateToJSX } from '~/utils/template';
 import { getOption } from './option';
 import { updateRegressionLinesColor } from './option/events';
 import { ClickEchartSeries } from './triggers/click-echart';
 import { DEFAULT_CONFIG, ICartesianChartConf } from './type';
-import { parseDataKey } from '~/utils/data';
-import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map';
 
 interface IClickEchartsSeries {
   type: 'click';
@@ -142,9 +142,10 @@ export function VizCartesianChart({ context, instance }: VizViewProps) {
     };
   }, [conf, data]);
 
-  const finalHeight = Math.max(0, height - topStatsHeight - bottomStatsHeight);
+  const finalHeight = Math.max(0, getBoxContentHeight(height) - topStatsHeight - bottomStatsHeight);
+  const finalWidth = getBoxContentWidth(width);
   return (
-    <>
+    <DefaultVizBox width={width} height={height}>
       <Text
         ref={topStatsRef}
         align="left"
@@ -159,7 +160,7 @@ export function VizCartesianChart({ context, instance }: VizViewProps) {
 
       <Chart
         variables={variables}
-        width={width}
+        width={finalWidth}
         height={finalHeight}
         data={data}
         conf={conf}
@@ -177,6 +178,6 @@ export function VizCartesianChart({ context, instance }: VizViewProps) {
           <React.Fragment key={i}>{c}</React.Fragment>
         ))}
       </Text>
-    </>
+    </DefaultVizBox>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,5 +2,4 @@ @@
     **/*/dist
     api/swagger
     *.json
-    *.html
-    *.css
+    *.html