From de1994521a23f0b8553ff0a7af7717124a09c348 Mon Sep 17 00:00:00 2001 From: YANG QIA <2013xile@gmail.com> Date: Wed, 24 Jul 2024 21:34:52 +0800 Subject: [PATCH] feat(data-vi): optimize style settings for chart blocks (#4940) * feat(data-vi): adapt styles to mobile client * fix: style * chore: update * fix: bug * fix: bug --- .../src/client/block/ChartBlock.tsx | 24 ++++-- .../src/client/block/ChartBlockDesigner.tsx | 50 +++++++++++ .../client/block/ChartBlockInitializer.tsx | 5 ++ .../src/client/chart/g2plot/AntChart.tsx | 21 ++++- .../src/client/chart/g2plot/configs.ts | 85 +++++++++++++++++++ .../src/client/chart/g2plot/g2plot.ts | 2 +- .../client/renderer/ChartRendererProvider.tsx | 8 +- .../src/locale/en-US.json | 9 +- .../src/locale/zh-CN.json | 9 +- .../src/client/mobile/Mobile.tsx | 1 - 10 files changed, 196 insertions(+), 18 deletions(-) diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlock.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlock.tsx index 0bd934da4f..95a7b09a2a 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlock.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlock.tsx @@ -14,6 +14,7 @@ import { ChartDataProvider } from './ChartDataProvider'; import { ChartRenderer, ChartRendererProvider } from '../renderer'; import { ChartFilterBlockProvider, ChartFilterBlockDesigner } from '../filter'; import { ChartFilterProvider } from '../filter/FilterProvider'; +import { css } from '@emotion/css'; export const ChartV2Block: React.FC = (props) => { const [initialVisible, setInitialVisible] = useState(false); @@ -25,11 +26,24 @@ export const ChartV2Block: React.FC = (props) => { - - - {props.children} - - +
button:last-child { + margin-bottom: 24px !important; + } + `} + > + + + {props.children} + + +
); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlockDesigner.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlockDesigner.tsx index 5632f6a0d7..6730d0e7fe 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlockDesigner.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/block/ChartBlockDesigner.tsx @@ -12,15 +12,65 @@ import { SchemaSettingsBlockTitleItem, SchemaSettingsDivider, SchemaSettingsRemove, + SchemaSettingsSelectItem, + SchemaSettingsSwitchItem, + useDesignable, + useToken, } from '@nocobase/client'; import React from 'react'; import { useChartsTranslation } from '../locale'; +import { useField, useFieldSchema } from '@formily/react'; export const ChartV2BlockDesigner: React.FC = () => { const { t } = useChartsTranslation(); + const field = useField(); + const fieldSchema = useFieldSchema(); + const { dn } = useDesignable(); + const { token } = useToken(); + return ( + { + const style = { + ...field.componentProps.style, + background: v ? token.colorBgContainer : 'none', + boxShadow: v ? token.boxShadowTertiary : 'none', + }; + field.componentProps.style = style; + field.componentProps.bordered = v; + fieldSchema['x-component-props'] = field.componentProps; + dn.emit('patch', { + schema: { + ['x-uid']: fieldSchema['x-uid'], + 'x-component-props': field.componentProps, + }, + }); + dn.refresh(); + }} + /> + { + const style = { + ...field.componentProps.bodyStyle, + padding: v ? `${token.paddingLG}px ${token.paddingLG}px 0` : '5px 0 0', + }; + field.componentProps.bodyStyle = style; + fieldSchema['x-component-props'] = field.componentProps; + dn.emit('patch', { + schema: { + ['x-uid']: fieldSchema['x-uid'], + 'x-component-props': field.componentProps, + }, + }); + dn.refresh(); + }} + /> { const itemConfig = useSchemaInitializerItem(); const { insert } = useSchemaInitializer(); + const { token } = useToken(); return ( { 'x-component': 'CardItem', 'x-component-props': { name: 'charts', + bodyStyle: { + padding: `${token.paddingLG}px ${token.paddingLG}px 0`, + }, }, 'x-designer': 'ChartV2BlockDesigner', properties: { diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx index d194a301d7..2120db19e3 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/AntChart.tsx @@ -11,25 +11,38 @@ import React, { useContext, useEffect, useRef } from 'react'; import { ChartRendererContext } from '../../renderer'; export const getAntChart = (Component: React.FC) => (props: any) => { + const { size = {} } = props; + let { height: fixedHeight } = props; + if (!fixedHeight && size.type === 'fixed') { + fixedHeight = size.fixed; + } const { service } = useContext(ChartRendererContext); const chartRef = useRef(null); const [height, setHeight] = React.useState(0); useEffect(() => { const el = chartRef.current; - if (!el || service.loading === true || props.height) { + if (!el || service.loading === true || fixedHeight) { return; } + let ratio = 0; + if (size.type === 'ratio' && size.ratio?.width && size.ratio?.height) { + ratio = size.ratio.height / size.ratio.width; + } const observer = new ResizeObserver((entries) => { entries.forEach((entry) => { + if (ratio) { + setHeight(entry.contentRect.width * ratio); + return; + } setHeight(entry.contentRect.height); }); }); observer.observe(el); return () => observer.disconnect(); - }, [service.loading, props.height]); + }, [service.loading, fixedHeight, size.type, size.ratio?.width, size.ratio?.height]); return ( -
- +
+
); }; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/configs.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/configs.ts index a43af373e9..edbbce55e7 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/configs.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/configs.ts @@ -9,10 +9,95 @@ import config, { FieldConfigProps } from '../configs'; const { booleanField } = config; +import { lang } from '../../locale'; export default { isStack: (props: FieldConfigProps) => booleanField({ name: 'isStack', title: 'isStack', ...props }), smooth: (props: FieldConfigProps) => booleanField({ name: 'smooth', title: 'smooth', ...props }), isPercent: (props: FieldConfigProps) => booleanField({ name: 'isPercent', title: 'isPercent', ...props }), isGroup: (props: FieldConfigProps) => booleanField({ name: 'isGroup', title: 'isGroup', ...props }), + size: () => ({ + size: { + title: lang('Size'), + type: 'object', + 'x-decorator': 'FormItem', + 'x-component': 'Space', + properties: { + type: { + 'x-component': 'Select', + 'x-component-props': { + allowClear: false, + }, + default: 'ratio', + enum: [ + { + label: lang('Aspect ratio'), + value: 'ratio', + }, + { + label: lang('Fixed height'), + value: 'fixed', + }, + ], + }, + fixed: { + type: 'number', + 'x-component': 'InputNumber', + 'x-component-props': { + min: 0, + addonAfter: 'px', + }, + 'x-reactions': [ + { + dependencies: ['.type'], + fulfill: { + state: { + visible: "{{$deps[0] === 'fixed'}}", + }, + }, + }, + ], + }, + ratio: { + type: 'object', + 'x-component': 'Space', + 'x-reactions': [ + { + dependencies: ['.type'], + fulfill: { + state: { + visible: "{{$deps[0] === 'ratio'}}", + }, + }, + }, + ], + properties: { + width: { + type: 'number', + 'x-component': 'InputNumber', + 'x-component-props': { + placeholder: lang('Width'), + min: 1, + }, + }, + colon: { + type: 'void', + 'x-component': 'Text', + 'x-component-props': { + children: ':', + }, + }, + height: { + type: 'number', + 'x-component': 'InputNumber', + 'x-component-props': { + placeholder: lang('Height'), + min: 1, + }, + }, + }, + }, + }, + }, + }), }; diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts index 1589b36b88..605e3349a4 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/chart/g2plot/g2plot.ts @@ -17,7 +17,7 @@ export class G2PlotChart extends Chart { name, title, Component: getAntChart(Component), - config: ['xField', 'yField', 'seriesField', ...(config || [])], + config: ['xField', 'yField', 'seriesField', 'size', ...(config || [])], }); this.addConfigs(configs); } diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx index 8e6779859d..1aa8bf9963 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRendererProvider.tsx @@ -147,11 +147,9 @@ export const ChartRendererProvider: React.FC = (props) => { return ( - - - {props.children} - - + + {props.children} + ); diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/locale/en-US.json b/packages/plugins/@nocobase/plugin-data-visualization/src/locale/en-US.json index a67ba9c8fc..88902e283b 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/locale/en-US.json +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/locale/en-US.json @@ -87,5 +87,12 @@ "Show border": "Show border", "Transformation tip": "Fields allow multiple transformations, applied sequentially. Pay attention to data type changes after each transformation. Drag-and-drop functionality enables adjustment of transformation order.", "Type conversion": "Type conversion", - "Transformer": "Transformer" + "Transformer": "Transformer", + "Size": "Size", + "Width": "Width", + "Height": "Height", + "Aspect ratio": "Aspect ratio", + "Fixed height": "Fixed height", + "Show background": "Show background", + "Show padding": "Show padding" } diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/locale/zh-CN.json b/packages/plugins/@nocobase/plugin-data-visualization/src/locale/zh-CN.json index 686fae82e7..c1c9d272a7 100644 --- a/packages/plugins/@nocobase/plugin-data-visualization/src/locale/zh-CN.json +++ b/packages/plugins/@nocobase/plugin-data-visualization/src/locale/zh-CN.json @@ -88,5 +88,12 @@ "Show border": "显示边框", "Transformation tip": "一个字段可以应用多次转换，会按照顺序执行，请注意每次转换后的数据类型，拖动可以调整转换顺序。", "Type conversion": "类型转换", - "Transformer": "转换方法" + "Transformer": "转换方法", + "Size": "尺寸", + "Width": "宽", + "Height": "高", + "Aspect ratio": "宽高比", + "Fixed height": "固定高度", + "Show background": "显示背景", + "Show padding": "显示内边距" } diff --git a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx index 87ca23e234..ffe39d81ad 100644 --- a/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx +++ b/packages/plugins/@nocobase/plugin-mobile/src/client/mobile/Mobile.tsx @@ -53,7 +53,6 @@ export const Mobile = () => { marginBlock: 18, borderRadiusBlock: 0, boxShadowBlock: 'none', - borderBottomBlock: '1px solid var(--adm-color-border)', }, }} >