diff --git a/.prettierignore b/.prettierignore index 50f3079b6..76da16617 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,5 +2,4 @@ **/*/dist api/swagger *.json -*.html -*.css \ No newline at end of file +*.html \ No newline at end of file diff --git a/api/package.json b/api/package.json index 2ddc270c1..10f201af0 100644 --- 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 index 3062a79dc..b4869efd6 100644 --- 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 index ddd54d363..b679e169f 100644 --- 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 }) - + }> diff --git a/dashboard/src/components/panel/panel-render/dropdown-menu/index.tsx b/dashboard/src/components/panel/panel-render/dropdown-menu/index.tsx index 6c9b4a63d..4a38ae498 100644 --- 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 }) - + }> diff --git a/dashboard/src/components/panel/panel-render/panel-render-base.css b/dashboard/src/components/panel/panel-render/panel-render-base.css index c4d354dbe..2de7bce31 100644 --- 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; - } - \ No newline at end of file + 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 index a1fc98112..70a992f44 100644 --- 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 ( - + {dropdownContent} - + ); diff --git a/dashboard/src/components/panel/panel-render/title-bar/index.css b/dashboard/src/components/panel/panel-render/title-bar/index.css deleted file mode 100644 index 3a0255b51..000000000 --- a/dashboard/src/components/panel/panel-render/title-bar/index.css +++ /dev/null @@ -1,8 +0,0 @@ -.panel-dropdown-target { - text-align: center; - transition: background-color 300ms ease; -} -.panel-dropdown-target:hover { - cursor: pointer; - background-color: rgba(100, 100, 100, 0.05); -} diff --git a/dashboard/src/components/panel/panel-render/title-bar/index.tsx b/dashboard/src/components/panel/panel-render/title-bar/index.tsx index 925bf6ca6..b9ca47f75 100644 --- 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 ( - - + + {title} 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 index 89b39de25..5e9f5330c 100644 --- 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 ( - + {!panel.canRenderViz && } {panel.canRenderViz && } 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 index c8268db79..7691994ae 100644 --- 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(context.instanceData, 'config'); const data = context.data; @@ -94,5 +102,16 @@ export function VizBar3dChart({ context }: VizViewProps) { if (!conf) { return null; } - return ; + + return ( + + + + ); } 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 index 998a91f48..3a8b171e6 100644 --- 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 ( - + + + ); } 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 index fde11bbc1..fc6f5a462 100644 --- 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 ( + + + ); } 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 index 622959bff..01304a631 100644 --- 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 ( - <> + {c} ))} - + ); } diff --git a/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx b/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx index a91fd1c39..b7f3f7ccd 100644 --- a/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/funnel/viz-funnel-chart.tsx @@ -9,6 +9,7 @@ import { useStorageData } from '~/components/plugins/hooks'; import { VizViewProps } from '~/types/plugin'; import { getOption } from './option'; import { DEFAULT_CONFIG, IFunnelConf } from './type'; +import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; echarts.use([FunnelChart, DataZoomComponent, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]); @@ -17,9 +18,6 @@ function Chart({ conf, data, width, height }: { conf: IFunnelConf; data: TPanelD return getOption(conf, data); }, [conf, data]); - if (!width || !height) { - return null; - } return ; } @@ -29,5 +27,13 @@ export function VizFunnelChart({ context }: VizViewProps) { const data = context.data; const { width, height } = context.viewport; - return ; + if (!width || !height) { + return null; + } + + return ( + + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx b/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx index 9d99b1340..225ad0af7 100644 --- a/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx +++ b/dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx @@ -13,6 +13,7 @@ import _, { defaults } from 'lodash'; import React, { useCallback, useMemo } from 'react'; import { useStorageData } from '~/components/plugins/hooks'; import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions'; +import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; import { AnyObject } from '~/types'; import { IVizInteractionManager, VizViewProps } from '~/types/plugin'; import { parseDataKey } from '~/utils/data'; @@ -86,9 +87,6 @@ function Chart({ return getOption(conf, data, variables, width, height); }, [conf, data, width, height]); - if (!width || !height) { - return null; - } return ( + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx b/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx index 2575de7fc..18c866a24 100644 --- a/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/horizontal-bar-chart/viz-horizontal-bar-chart.tsx @@ -20,6 +20,7 @@ import { ITemplateVariable } from '~/utils/template'; import { ClickEchartSeries } from '../cartesian/triggers'; import { getOption } from './option'; import { DEFAULT_CONFIG, IHorizontalBarChartConf } from './type'; +import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; interface IClickEchartsSeries { type: 'click'; @@ -86,9 +87,6 @@ function Chart({ return getOption(conf, data, variables); }, [conf, data]); - if (!width || !height) { - return null; - } return ( defaults({}, confValue, DEFAULT_CONFIG), [confValue]); const data = context.data; const { width, height } = context.viewport; + if (!width || !height) { + return null; + } + return ( - + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx b/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx index b99560932..051f36086 100644 --- a/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/merico-estimation-chart/viz-merico-estimation-chart.tsx @@ -7,10 +7,11 @@ import { CanvasRenderer } from 'echarts/renderers'; import { defaults } from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; import { useStorageData } from '~/components/plugins/hooks'; +import { getBoxContentHeight, getBoxContentWidth, paddings } from '~/styles/viz-box'; import { VizViewProps } from '~/types/plugin'; import { getOption } from './option'; -import { DEFAULT_CONFIG, IMericoEstimationChartConf } from './type'; import { Toolbox } from './toolbox'; +import { DEFAULT_CONFIG, IMericoEstimationChartConf } from './type'; echarts.use([ BarChart, @@ -61,10 +62,16 @@ export function VizMericoEstimationChart({ context }: VizViewProps) { if (!width || !height) { return null; } - const finalWidth = Math.max(width, 300); - const finalHeight = Math.max(height, 370); + const finalWidth = Math.max(getBoxContentWidth(width), 300); + const finalHeight = Math.max(getBoxContentHeight(height), 370); return ( - + diff --git a/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx b/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx index ebe588cf4..17de76079 100644 --- a/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx +++ b/dashboard/src/components/plugins/viz-components/merico-heatmap/render/index.tsx @@ -1,4 +1,3 @@ -import { Box, ScrollArea } from '@mantine/core'; import ReactEChartsCore from 'echarts-for-react/lib/core'; import { HeatmapChart } from 'echarts/charts'; import { @@ -12,15 +11,16 @@ 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 { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; 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 { ClickHeatBlock } from '../triggers'; import { DEFAULT_CONFIG, TMericoHeatmapConf } from '../type'; +import { getOption } from './option'; interface IClickHeatBlock { type: 'click'; @@ -87,10 +87,6 @@ function Chart({ return getOption(conf, data, variables); }, [conf, data]); - if (!width || !height) { - return null; - } - return ( + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx b/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx index f981e7ca6..3bb891ee0 100644 --- a/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/pareto-chart/viz-pareto-chart.tsx @@ -5,13 +5,14 @@ import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; import _, { defaults } from 'lodash'; import { useCallback, useMemo } from 'react'; +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 { useStorageData } from '../../hooks'; import { getOption } from './option'; import { ClickParetoSeries } from './triggers'; import { DEFAULT_CONFIG, IParetoChartConf } from './type'; -import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map'; echarts.use([BarChart, LineChart, DataZoomComponent, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]); @@ -63,13 +64,15 @@ export function VizParetoChart({ context, instance }: VizViewProps) { return null; } return ( - + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx b/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx index 97cd464ca..5d94fade3 100644 --- a/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart.tsx @@ -11,6 +11,7 @@ import { IVizInteractionManager, VizViewProps } from '~/types/plugin'; import { getOption } from './option'; import { ClickPieChart } from './triggers'; import { DEFAULT_CONFIG, IPieChartConf } from './type'; +import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; echarts.use([PieChart, CanvasRenderer]); @@ -87,5 +88,15 @@ export function VizPieChart({ context, instance }: VizViewProps) { if (!width || !height) { return null; } - return ; + return ( + + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx b/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx index 255416646..d7c871a2d 100644 --- a/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/radar-chart/viz-radar-chart.tsx @@ -7,6 +7,7 @@ import _, { defaultsDeep, isEmpty } from 'lodash'; import { useCallback, useMemo } from 'react'; import { useStorageData } from '~/components/plugins/hooks'; import { useCurrentInteractionManager, useTriggerSnapshotList } from '~/interactions'; +import { DefaultVizBox, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; import { AnyObject } from '~/types'; import { IVizInteractionManager, VizViewProps } from '~/types/plugin'; import { parseDataKey } from '~/utils/data'; @@ -106,13 +107,15 @@ export function VizRadarChart({ context, instance }: VizViewProps) { return null; } return ( - + + + ); } diff --git a/dashboard/src/components/plugins/viz-components/regression-chart/toolbox/index.tsx b/dashboard/src/components/plugins/viz-components/regression-chart/toolbox/index.tsx index 0272526d4..c868a754f 100644 --- a/dashboard/src/components/plugins/viz-components/regression-chart/toolbox/index.tsx +++ b/dashboard/src/components/plugins/viz-components/regression-chart/toolbox/index.tsx @@ -1,9 +1,13 @@ import { Group } from '@mantine/core'; import { IRegressionDescription, RegressionDescription } from './regression-description'; +import { paddings } from '~/styles/viz-box'; export function Toolbox(props: IRegressionDescription) { return ( - + ); diff --git a/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx b/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx index 78f6d82fc..a4a427b98 100644 --- a/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/regression-chart/viz-regression-chart.tsx @@ -1,4 +1,3 @@ -import { Box } from '@mantine/core'; import { EChartsInstance } from 'echarts-for-react'; import ReactEChartsCore from 'echarts-for-react/lib/core'; import { ScatterChart } from 'echarts/charts'; @@ -8,11 +7,12 @@ import { CanvasRenderer } from 'echarts/renderers'; import { defaultsDeep } from 'lodash'; import { useMemo, useRef } from 'react'; import { useStorageData } from '~/components/plugins/hooks'; +import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box'; import { VizViewProps } from '~/types/plugin'; +import { parseDataKey } from '~/utils/data'; import { getOption } from './option'; import { Toolbox } from './toolbox'; import { DEFAULT_CONFIG, IRegressionChartConf } from './type'; -import { parseDataKey } from '~/utils/data'; echarts.use([DataZoomComponent, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]); @@ -55,16 +55,16 @@ export function VizRegressionChart({ context }: VizViewProps) { return null; } return ( - + - + ); } diff --git a/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx b/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx index 93606bd37..99616f7ac 100644 --- a/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx +++ b/dashboard/src/components/plugins/viz-components/scatter-chart/viz-scatter-chart.tsx @@ -1,8 +1,7 @@ -import { Box, Text } from '@mantine/core'; +import { Text } from '@mantine/core'; import { useElementSize } from '@mantine/hooks'; import ReactEChartsCore from 'echarts-for-react/lib/core'; import { BarChart, LineChart, ScatterChart } from 'echarts/charts'; -import * as echarts from 'echarts/core'; import { DataZoomComponent, GridComponent, @@ -11,19 +10,20 @@ import { MarkLineComponent, TooltipComponent, } from 'echarts/components'; +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 { defaults } from 'lodash'; +import React, { 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, getBoxContentHeight, getBoxContentWidth } from '~/styles/viz-box'; import { AnyObject } from '~/types'; import { IVizInteractionManager, VizViewProps } from '~/types/plugin'; import { ITemplateVariable, templateToJSX } from '~/utils/template'; import { getOption } from './option'; import { ClickScatterChartSeries } from './triggers'; import { DEFAULT_CONFIG, IScatterChartConf } from './type'; -import { parseDataKey } from '~/utils/data'; -import { useRowDataMap } from '~/components/plugins/hooks/use-row-data-map'; interface IClickScatterChartSeries { type: 'click'; @@ -130,13 +130,13 @@ export function VizScatterChart({ context, instance }: VizViewProps) { }; }, [conf, data]); - const finalHeight = Math.max(0, height - topStatsHeight - bottomStatsHeight); + const finalHeight = Math.max(0, getBoxContentHeight(height) - topStatsHeight - bottomStatsHeight); if (!width || !height) { return null; } return ( - <> + {Object.values(templates.bottom).map((c) => c)} - + ); } diff --git a/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx b/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx index d91b65e0b..be3e70f63 100644 --- a/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx +++ b/dashboard/src/components/plugins/viz-components/sunburst/viz-sunburst.tsx @@ -2,13 +2,14 @@ import ReactEChartsCore from 'echarts-for-react/lib/core'; import { SunburstChart } from 'echarts/charts'; import * as echarts from 'echarts/core'; import { CanvasRenderer } from 'echarts/renderers'; -import { defaults, maxBy, merge } from 'lodash'; +import { defaults } from 'lodash'; import { useMemo } from 'react'; -import { VizViewProps } from '~/types/plugin'; import { useStorageData } from '~/components/plugins/hooks'; -import { DEFAULT_CONFIG, ISunburstConf } from './type'; +import { DefaultVizBox, getBoxContentStyle } from '~/styles/viz-box'; +import { VizViewProps } from '~/types/plugin'; import { getOption } from './option'; +import { DEFAULT_CONFIG, ISunburstConf } from './type'; echarts.use([SunburstChart, CanvasRenderer]); @@ -25,5 +26,15 @@ export function VizSunburst({ context }: VizViewProps) { if (!width || !height) { return null; } - return ; + return ( + + + + ); } diff --git a/dashboard/src/dashboard-editor/index.css b/dashboard/src/dashboard-editor/index.css index c44f9860c..309975db4 100644 --- a/dashboard/src/dashboard-editor/index.css +++ b/dashboard/src/dashboard-editor/index.css @@ -27,11 +27,13 @@ } .mantine-RichTextEditor-content .ProseMirror { - padding: .5em .5em 0; + padding: 12px 12px 0; } .dashboard-root - *:not(.mantine-RichTextEditor-root):not(.dashboard-view):not(.mantine-Modal-body):not([data-enable-scrollbar])::-webkit-scrollbar { + *:not(.mantine-RichTextEditor-root):not(.dashboard-view):not(.mantine-Modal-body):not( + [data-enable-scrollbar] + )::-webkit-scrollbar { width: 0 !important; height: 0 !important; } diff --git a/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/preview-panel.tsx b/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/preview-panel.tsx index 11a9d0216..bf37ccb41 100644 --- a/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/preview-panel.tsx +++ b/dashboard/src/dashboard-editor/ui/settings/content/edit-panel/preview-panel.tsx @@ -33,8 +33,8 @@ export const PreviewPanel = observer(() => { - - + + diff --git a/dashboard/src/dashboard-render/index.css b/dashboard/src/dashboard-render/index.css index 51170c2bd..dcfd66eaa 100644 --- a/dashboard/src/dashboard-render/index.css +++ b/dashboard/src/dashboard-render/index.css @@ -27,11 +27,13 @@ } .mantine-RichTextEditor-content .ProseMirror { - padding: .5em .5em 0; + padding: 12px 12px 0; } .dashboard-root - *:not(.mantine-RichTextEditor-root):not(.dashboard-view):not(.mantine-Modal-body):not([data-enable-scrollbar])::-webkit-scrollbar { + *:not(.mantine-RichTextEditor-root):not(.dashboard-view):not(.mantine-Modal-body):not( + [data-enable-scrollbar] + )::-webkit-scrollbar { width: 0 !important; height: 0 !important; } diff --git a/dashboard/src/styles/viz-box.tsx b/dashboard/src/styles/viz-box.tsx new file mode 100644 index 000000000..608860056 --- /dev/null +++ b/dashboard/src/styles/viz-box.tsx @@ -0,0 +1,35 @@ +import { Box } from '@mantine/core'; +import { ReactNode } from 'react'; + +export const paddings = { + top: 16, + right: 16, + bottom: 16, + left: 16, +}; + +export const getBoxContentWidth = (width: number) => { + return Math.max(0, width - paddings.left - paddings.right); +}; +export const getBoxContentHeight = (height: number) => { + return Math.max(0, height - paddings.top - paddings.bottom); +}; +export const getBoxContentStyle = (width: number, height: number) => { + return { + width: getBoxContentWidth(width), + height: getBoxContentHeight(height), + }; +}; +export const DefaultVizBox = ({ width, height, children }: { width: number; height: number; children: ReactNode }) => { + return ( + + {children} + + ); +}; diff --git a/package.json b/package.json index e9b94817b..af2532616 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtable/root", - "version": "10.33.3", + "version": "10.34.1", "private": true, "workspaces": [ "api", diff --git a/settings-form/package.json b/settings-form/package.json index 9527b0fd9..96f82953b 100644 --- a/settings-form/package.json +++ b/settings-form/package.json @@ -1,6 +1,6 @@ { "name": "@devtable/settings-form", - "version": "10.33.3", + "version": "10.34.1", "license": "Apache-2.0", "publishConfig": { "access": "public", diff --git a/website/package.json b/website/package.json index 8b311c6f6..69955083c 100644 --- a/website/package.json +++ b/website/package.json @@ -2,7 +2,7 @@ "name": "@devtable/website", "private": true, "license": "Apache-2.0", - "version": "10.33.3", + "version": "10.34.1", "scripts": { "dev": "vite", "preview": "vite preview"