teableio · tea-artist · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/apps/nextjs-app/src/features/app/dashboard/TestBaseQuery.tsx b/apps/nextjs-app/src/features/app/dashboard/TestBaseQuery.tsx
@@ -0,0 +1,23 @@
+import type { IBaseQuery } from '@teable/openapi';
+import { BaseQueryBuilder } from '@teable/sdk/components';
+import { Button, Dialog, DialogContent, DialogTrigger } from '@teable/ui-lib/shadcn';
+import { useState } from 'react';
+
+export const TestBaseQuery = () => {
+  const [query, setQuery] = useState<IBaseQuery>();
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button size={'xs'} variant={'ghost'}>
+          Open Dialog
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <Button className="w-7" size={'xs'} variant={'ghost'} onClick={() => setQuery(undefined)}>
+          Clear Query
+        </Button>
+        <BaseQueryBuilder query={query} onChange={setQuery} />
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/packages/common-i18n/src/locales/zh/dashboard.json b/packages/common-i18n/src/locales/zh/dashboard.json
@@ -1,16 +1,16 @@
 {
   "empty": {
-    "title": "暂无仪表板",
-    "description": "看起来您还没有创建任何仪表板。仪表板可以帮助您更有效地可视化和管理数据。",
-    "create": "创建您的第一个仪表板"
+    "title": "暂无仪表盘",
+    "description": "看起来您还没有创建任何仪表盘。仪表盘可以帮助您更有效地可视化和管理数据。",
+    "create": "创建您的第一个仪表盘"
   },
   "addPlugin": "添加插件",
   "createDashboard": {
-    "button": "创建仪表板",
-    "title": "创建新仪表板",
-    "placeholder": "输入仪表板名称"
+    "button": "创建仪表盘",
+    "title": "创建新仪表盘",
+    "placeholder": "输入仪表盘名称"
   },
-  "findDashboard": "查找仪表板...",
+  "findDashboard": "查找仪表盘...",
   "pluginUrlEmpty": "插件未设置 URL",
   "install": "安装",
   "publisher": "发布者",

diff --git a/packages/sdk/src/components/base-query/QueryBuilder.tsx b/packages/sdk/src/components/base-query/QueryBuilder.tsx
@@ -73,9 +73,17 @@ const QueryBuilderContainer = forwardRef<
 
   useEffect(() => {
     if (query) {
-      setFromType(typeof query.from === 'string' ? 'table' : 'query');
+      if (query.from == undefined) {
+        setFromType(undefined);
+        return;
+      }
+      setFromType(
+        typeof query.from === 'string' && fromType !== 'query' && query.from ? 'table' : 'query'
+      );
+    } else {
+      setFromType(undefined);
     }
-  }, [query]);
+  }, [query, fromType]);
 
   useImperativeHandle(ref, () => ({
     validateQuery: () => {
@@ -277,12 +285,10 @@ const QueryBuilderContainer = forwardRef<
 
   const onFromQueryChange = (query?: IBaseQuery) => {
     if (!query) {
-      onQueryChange('from', '');
+      setChildContext([]);
       setFromType(undefined);
       // if tableId is undefined, clear from
-      onChange({
-        from: '',
-      });
+      onChange(undefined);
       return;
     }
     onQueryChange('from', query ?? '');

diff --git a/packages/sdk/src/components/base-query/query-from/QueryFrom.tsx b/packages/sdk/src/components/base-query/query-from/QueryFrom.tsx
@@ -38,19 +38,21 @@ export const QueryFrom = (props: {
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-56">
                 {maxDepth ? (
-                  tables.map((table) => (
-                    <DropdownMenuItem key={table.id} onClick={() => onClick?.('table', table.id)}>
-                      {table.name}
-                    </DropdownMenuItem>
-                  ))
+                  <div className="max-h-80 overflow-y-auto">
+                    {tables.map((table) => (
+                      <DropdownMenuItem key={table.id} onClick={() => onClick?.('table', table.id)}>
+                        {table.name}
+                      </DropdownMenuItem>
+                    ))}
+                  </div>
                 ) : (
                   <>
                     <DropdownMenuSub>
                       <DropdownMenuSubTrigger>
                         {t('baseQuery.from.fromTable')}
                       </DropdownMenuSubTrigger>
                       <DropdownMenuPortal>
-                        <DropdownMenuSubContent>
+                        <DropdownMenuSubContent className="max-h-80 overflow-y-auto">
                           {tables.map((table) => (
                             <DropdownMenuItem
                               key={table.id}

diff --git a/plugins/chart/src/components/chart/chart-config/common/PaddingEditor.tsx b/plugins/chart/src/components/chart/chart-config/common/PaddingEditor.tsx
@@ -0,0 +1,77 @@
+import { Input, Label } from '@teable/ui-lib';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { IChartPadding } from '../../../types';
+
+export const PaddingEditor = (props: {
+  value?: IChartPadding;
+  onChange: (value?: IChartPadding) => void;
+}) => {
+  const { value, onChange } = props;
+  const { t } = useTranslation();
+  const [padding, setPadding] = useState(value);
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        <Label className="w-14 text-right text-xs">{t('form.padding.top')}</Label>
+        <Input
+          type="number"
+          className="h-7 text-[13px]"
+          value={padding?.top || ''}
+          onBlur={() => onChange(padding)}
+          onChange={(e) => {
+            setPadding({
+              ...padding,
+              top: e.target.value ? parseFloat(e.target.value) : undefined,
+            });
+          }}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Label className="w-14 text-right text-xs">{t('form.padding.right')}</Label>
+        <Input
+          type="number"
+          className="h-7 text-[13px]"
+          value={padding?.right || ''}
+          onBlur={() => onChange(padding)}
+          onChange={(e) => {
+            setPadding({
+              ...padding,
+              right: e.target.value ? parseFloat(e.target.value) : undefined,
+            });
+          }}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Label className="w-14 text-right text-xs">{t('form.padding.bottom')}</Label>
+        <Input
+          type="number"
+          className="h-7 text-[13px]"
+          value={padding?.bottom || ''}
+          onBlur={() => onChange(padding)}
+          onChange={(e) => {
+            setPadding({
+              ...padding,
+              bottom: e.target.value ? parseFloat(e.target.value) : undefined,
+            });
+          }}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <Label className="w-14 text-right text-xs">{t('form.padding.left')}</Label>
+        <Input
+          type="number"
+          className="h-7 text-[13px]"
+          value={padding?.left || ''}
+          onBlur={() => onChange(padding)}
+          onChange={(e) => {
+            setPadding({
+              ...padding,
+              left: e.target.value ? parseFloat(e.target.value) : undefined,
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/plugins/chart/src/components/chart/chart-config/form/ComboForm.tsx b/plugins/chart/src/components/chart/chart-config/form/ComboForm.tsx
@@ -18,6 +18,7 @@ import { ComboXAxisDisplayEditor } from '../common/ComboXAxisDisplayEditor';
 import { ComboYAxisDisplayEditor } from '../common/ComboYAisxDisplayEditor';
 import { ConfigItem } from '../common/ConfigItem';
 import { GoalLineEditor } from '../common/GoalLineEditor';
+import { PaddingEditor } from '../common/PaddingEditor';
 import { SwitchEditor } from '../common/SwitchEditor';
 import { ComboXAxisEditor } from './ComboXAxisEditor';
 import { ComboYAxisEditor } from './ComboYAxisEditor';
@@ -217,6 +218,20 @@ export const ComboForm = (props: {
               />
             </AccordionContent>
           </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>{t('form.padding.label')}</AccordionTrigger>
+            <AccordionContent>
+              <PaddingEditor
+                value={config.padding}
+                onChange={(val) => {
+                  onChange({
+                    ...config,
+                    padding: val,
+                  });
+                }}
+              />
+            </AccordionContent>
+          </AccordionItem>
         </Accordion>
       </div>
       <SwitchEditor

diff --git a/plugins/chart/src/components/chart/chart-config/form/ComboYAxisEditor.tsx b/plugins/chart/src/components/chart/chart-config/form/ComboYAxisEditor.tsx
@@ -107,8 +107,17 @@ const YAxisConfigEditor = (props: {
           <Input
             value={decimal ?? ''}
             type="number"
-            onBlur={() => onChange({ ...value, decimal })}
-            onChange={(e) => setDecimal(e.target.value ? Number(e.target.value) : undefined)}
+            onBlur={() => {
+              const newValue = decimal ? Math.max(0, Math.min(decimal, 10)) : undefined;
+              onChange({
+                ...value,
+                decimal: newValue,
+              });
+              setDecimal(newValue);
+            }}
+            onChange={(e) =>
+              setDecimal(e.target.value != undefined ? parseInt(e.target.value) : undefined)
+            }
           />
         </ConfigItem>
       </PopoverContent>

diff --git a/plugins/chart/src/components/chart/chart-config/form/PieForm.tsx b/plugins/chart/src/components/chart/chart-config/form/PieForm.tsx
@@ -7,6 +7,7 @@ import { useFilterNumberColumns } from '../../../../hooks/useFilterNumberColumns
 import type { IPieConfig } from '../../../types';
 import { ColumnSelector } from '../common/ColumnSelector';
 import { ConfigItem } from '../common/ConfigItem';
+import { PaddingEditor } from '../common/PaddingEditor';
 import { SwitchEditor } from '../common/SwitchEditor';
 
 export const PieForm = (props: { config: IPieConfig; onChange: (config: IPieConfig) => void }) => {
@@ -60,16 +61,21 @@ export const PieForm = (props: { config: IPieConfig; onChange: (config: IPieConf
                     step={1}
                     value={decimal ?? ''}
                     onBlur={() => {
+                      const newValue = decimal ? Math.max(0, Math.min(decimal, 10)) : undefined;
+
                       onChange({
                         ...config,
                         measure: {
                           ...config.measure!,
-                          decimal,
+                          decimal: newValue,
                         },
                       });
+                      setDecimal(newValue);
                     }}
                     onChange={(e) => {
-                      setDecimal(e.target.value ? parseInt(e.target.value) : undefined);
+                      setDecimal(
+                        e.target.value != undefined ? parseInt(e.target.value) : undefined
+                      );
                     }}
                   />
                 </ConfigItem>
@@ -144,6 +150,17 @@ export const PieForm = (props: { config: IPieConfig; onChange: (config: IPieConf
           });
         }}
       />
+      <ConfigItem label={t('form.padding.label')}>
+        <PaddingEditor
+          value={config.padding}
+          onChange={(val) => {
+            onChange({
+              ...config,
+              padding: val,
+            });
+          }}
+        />
+      </ConfigItem>
     </div>
   );
 };
diff --git a/plugins/chart/src/components/chart/chart-show/combo/Combo.tsx b/plugins/chart/src/components/chart/chart-show/combo/Combo.tsx
@@ -98,6 +98,19 @@ export const ChartCombo = (props: { config: IComboConfig; defaultType?: IComboTy
   const showGoalLine = defaultYAxisId && config.goalLine?.enabled;
   const xAxisConfig = config.xAxis?.[0];
 
+  const defaultMargin = isExpand
+    ? {
+        top: 20,
+        left: 12,
+        right: 12,
+        bottom: 25,
+      }
+    : {
+        top: 10,
+        left: 10,
+        right: 4,
+        bottom: 25,
+      };
   return (
     <div
       className={cn('size-full', {
@@ -106,21 +119,10 @@ export const ChartCombo = (props: { config: IComboConfig; defaultType?: IComboTy
     >
       <ChartContainer className="size-full" config={chartConfig}>
         <ComposedChart
-          margin={
-            isExpand
-              ? {
-                  top: 20,
-                  left: 12,
-                  right: 12,
-                  bottom: 25,
-                }
-              : {
-                  top: 10,
-                  left: -10,
-                  right: 4,
-                  bottom: 25,
-                }
-          }
+          margin={{
+            ...defaultMargin,
+            ...config.padding,
+          }}
           accessibilityLayer
           data={queryData?.rows}
         >
@@ -139,7 +141,12 @@ export const ChartCombo = (props: { config: IComboConfig; defaultType?: IComboTy
             <YAxis
               key={column}
               yAxisId={column}
-              label={config.yAxisDisplay?.label}
+              label={{
+                value: config.yAxisDisplay?.label,
+                offset: config?.padding?.left ? defaultMargin.left - config.padding.left + 5 : 5,
+                angle: -90,
+                position: 'insideLeft',
+              }}
               domain={
                 index === 0
                   ? [
@@ -186,6 +193,7 @@ export const ChartCombo = (props: { config: IComboConfig; defaultType?: IComboTy
           />
           {Object.keys(chartConfig).map((column) => {
             const display = yAxisMap[column]?.display;
+            const { prefix, decimal, suffix } = yAxisMap[column];
             const type = display.type || defaultType;
             const lineStyle = (display as IChartBaseAxisDisplayLine).lineStyle;
             const yAxisId = chartYAxis.find((axis) => axis.column === column)
@@ -225,6 +233,9 @@ export const ChartCombo = (props: { config: IComboConfig; defaultType?: IComboTy
                         offset={12}
                         className="fill-foreground"
                         fontSize={12}
+                        formatter={(value: number) => {
+                          return `${prefix ?? ''}${decimal ? value.toFixed(decimal) : value}${suffix ?? ''}`;
+                        }}
                       />
                     )}
                   </Bar>