feat: plugin settings add padding

teableio · Sep 19, 2024 · ca153b0 · ca153b0
1 parent bcaa7d1
commit ca153b0
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 39 deletions.
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/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>

diff --git a/plugins/chart/src/components/chart/chart-show/pie/Pie.tsx b/plugins/chart/src/components/chart/chart-show/pie/Pie.tsx
@@ -51,6 +51,19 @@ export const ChartPie = (props: { config: IPieConfig }) => {
   };
 
   const [totalRef, { width: totalWidth }] = useRefObserve();
+  const defaultMargin = isExpand
+    ? {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+      }
+    : {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      };
   return (
     <div className="flex size-full items-center justify-center">
       {/* calculate total width */}
@@ -71,21 +84,10 @@ export const ChartPie = (props: { config: IPieConfig }) => {
       </svg>
       <ChartContainer config={pieConfig} className="size-full">
         <PieChart
-          margin={
-            isExpand
-              ? {
-                  top: 20,
-                  right: 20,
-                  bottom: 20,
-                  left: 20,
-                }
-              : {
-                  top: 0,
-                  right: 0,
-                  bottom: 0,
-                  left: 0,
-                }
-          }
+          margin={{
+            ...defaultMargin,
+            ...config.padding,
+          }}
         >
           <ChartTooltip
             cursor={false}

diff --git a/plugins/chart/src/components/types.ts b/plugins/chart/src/components/types.ts
@@ -47,6 +47,15 @@ export const goalLineSchema = z.object({
   label: z.string().optional(),
 });
 
+export const chartPaddingSchema = z.object({
+  top: z.number().optional(),
+  right: z.number().optional(),
+  bottom: z.number().optional(),
+  left: z.number().optional(),
+});
+
+export type IChartPadding = z.infer<typeof chartPaddingSchema>;
+
 export type IGoalLine = z.infer<typeof goalLineSchema>;
 
 export const comboConfigSchema = z.object({
@@ -64,14 +73,15 @@ export const comboConfigSchema = z.object({
         .extend({
           prefix: z.string().optional(),
           suffix: z.string().optional(),
-          decimal: z.number().optional(),
+          decimal: z.number().max(10).min(0).optional(),
         })
         .extend({ display: chartBaseAxisDisplaySchema })
     )
     .optional(),
   yAxisDisplay: chartYAxisDisplaySchema.optional(),
   goalLine: goalLineSchema.optional(),
   showLabel: z.boolean().optional(),
+  padding: chartPaddingSchema.optional(),
 });
 
 export type IComboConfig = z.infer<typeof comboConfigSchema>;
@@ -106,14 +116,15 @@ export const pieConfigSchema = z.object({
   measure: z
     .object({
       column: z.string(),
-      decimal: z.number().optional(),
+      decimal: z.number().max(10).min(0).optional(),
       prefix: z.string().optional(),
       suffix: z.string().optional(),
     })
     .optional(),
   showLabel: z.boolean().optional(),
   showTotal: z.boolean().optional(),
   showLegend: z.boolean().optional(),
+  padding: chartPaddingSchema.optional(),
 });
 
 export type IPieConfig = z.infer<typeof pieConfigSchema>;

diff --git a/plugins/chart/src/locales/en.json b/plugins/chart/src/locales/en.json
@@ -77,7 +77,14 @@
     "showLabel": "Show values label on chart",
     "showLegend": "Show legend",
     "value": "Value",
-    "label": "Label"
+    "label": "Label",
+    "padding": {
+      "label": "Padding",
+      "top": "Top",
+      "right": "Right",
+      "bottom": "Bottom",
+      "left": "Left"
+    }
   },
   "reloadQuery": "Reload Query",
   "noStorage": "Please configure the chart plugin first",