Merge pull request #959 from merico-dev/958-add-vertical-alignment-op…

…tion-to-viz-stats

958 add vertical alignment option to viz stats

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/plugins/viz-components/stats/index.ts

@@ -7,7 +7,7 @@ import { VizStatsEditor } from './viz-stats-editor';
 export const StatsVizComponent: VizComponent = {
   createConfig() {
     return {
-      version: 2,
+      version: 3,
       config: DEFAULT_CONFIG,
     };
   },

dashboard/src/plugins/viz-components/stats/type.ts

@@ -1,9 +1,10 @@
-export const DEFAULT_CONFIG: IVizStatsConf = {
-  align: 'center',
-  template: 'The variable ${value} is defined in Variables section',
-};
-
 export interface IVizStatsConf {
-  align: 'center';
   template: string;
+  vertical_align: 'top' | 'center' | 'bottom';
+  horizontal_align: 'left' | 'center' | 'right';
 }
+export const DEFAULT_CONFIG: IVizStatsConf = {
+  template: 'The variable ${value} is defined in Variables section',
+  vertical_align: 'center',
+  horizontal_align: 'left',
+};

dashboard/src/plugins/viz-components/stats/update/index.ts

@@ -60,6 +60,17 @@ function updateSchema2(legacyConf: IVizStatsConf & { variables: ITemplateVariabl
   return omit(legacyConf, ['variables']);
 }
 
+// align -> horizontal_align
+// add vertical_align
+function v3(legacyConf: $TSFixMe): IVizStatsConf {
+  const { align, ...rest } = legacyConf;
+  return {
+    horizontal_align: align,
+    vertical_align: 'center',
+    ...rest,
+  };
+}
+
 /**
  * used when moving variables from stats to `panel.variables`
  */
@@ -96,5 +107,9 @@ export class VizStatsMigrator extends VersionBasedMigrator {
       });
       return { ...data, version: 2, config: updateSchema2(config) };
     });
+    this.version(3, (data) => {
+      const { config } = data;
+      return { ...data, version: 3, config: v3(config) };
+    });
   }
 }

dashboard/src/plugins/viz-components/stats/viz-stats-editor.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Group, Select, Stack, Text } from '@mantine/core';
+import { ActionIcon, Group, Select, SimpleGrid, Stack, Text } from '@mantine/core';
 import React from 'react';
 import { DeviceFloppy } from 'tabler-icons-react';
 import { VizConfigProps } from '~/types/plugin';
@@ -14,15 +14,17 @@ const horizontalAlignmentOptions = [
   { label: 'Right', value: 'right' },
 ];
 
+const verticalAlignmentOptions = [
+  { label: 'Top', value: 'top' },
+  { label: 'Center', value: 'center' },
+  { label: 'Bottom', value: 'bottom' },
+];
+
 export function VizStatsEditor({ context }: VizConfigProps) {
   const { value: conf, set: setConf } = useStorageData<IVizStatsConf>(context.instanceData, 'config');
 
   const defaultValues = React.useMemo(() => {
-    const { align, template = '' } = defaultsDeep({}, conf, DEFAULT_CONFIG);
-    return {
-      template,
-      align,
-    };
+    return defaultsDeep({}, conf, DEFAULT_CONFIG);
   }, [conf]);
 
   const { control, handleSubmit, watch, getValues, reset } = useForm<IVizStatsConf>({ defaultValues });
@@ -31,7 +33,7 @@ export function VizStatsEditor({ context }: VizConfigProps) {
     reset(defaultValues);
   }, [defaultValues]);
 
-  watch(['template', 'align']);
+  watch(['template', 'horizontal_align', 'vertical_align']);
   const values = getValues();
   const changed = React.useMemo(() => {
     return !_.isEqual(values, conf);
@@ -51,11 +53,18 @@ export function VizStatsEditor({ context }: VizConfigProps) {
           control={control}
           render={({ field }) => <TemplateInput label="Template" py="md" sx={{ flexGrow: 1 }} {...field} />}
         />
-        <Controller
-          name="align"
-          control={control}
-          render={({ field }) => <Select label="Horizontal Alignment" data={horizontalAlignmentOptions} {...field} />}
-        />
+        <SimpleGrid cols={2}>
+          <Controller
+            name="horizontal_align"
+            control={control}
+            render={({ field }) => <Select label="Horizontal Alignment" data={horizontalAlignmentOptions} {...field} />}
+          />
+          <Controller
+            control={control}
+            name="vertical_align"
+            render={({ field }) => <Select label="Vertical Alignment" data={verticalAlignmentOptions} {...field} />}
+          />
+        </SimpleGrid>
       </form>
     </Stack>
   );

dashboard/src/plugins/viz-components/stats/viz-stats.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Text } from '@mantine/core';
+import { Box, Center, Text } from '@mantine/core';
 
 import { VizViewProps } from '~/types/plugin';
 import { templateToJSX } from '~/utils/template';
@@ -9,11 +9,24 @@ import { observer } from 'mobx-react-lite';
 import { useContentModelContext } from '~/contexts';
 import _ from 'lodash';
 
+const horizontalAlignments = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+const verticalAlignments = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+};
+
 export const VizStats = observer(({ context }: VizViewProps) => {
   const contentModel = useContentModelContext();
   const { value: conf = DEFAULT_CONFIG } = useStorageData<IVizStatsConf>(context.instanceData, 'config');
   const { variables } = context;
-  const { template, align } = conf;
+  const { template, horizontal_align, vertical_align } = conf;
+  const { width, height } = context.viewport;
 
   const semiTemplate = useMemo(() => {
     try {
@@ -32,10 +45,19 @@ export const VizStats = observer(({ context }: VizViewProps) => {
   }, [semiTemplate, variables, context.data, context]);
 
   return (
-    <Text align={align}>
-      {Object.values(contents).map((c, i) => (
-        <React.Fragment key={i}>{c}</React.Fragment>
-      ))}
-    </Text>
+    <Center
+      sx={{
+        width,
+        height,
+        justifyContent: horizontalAlignments[horizontal_align],
+        alignItems: verticalAlignments[vertical_align],
+      }}
+    >
+      <Box>
+        {Object.values(contents).map((c, i) => (
+          <React.Fragment key={i}>{c}</React.Fragment>
+        ))}
+      </Box>
+    </Center>
   );
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,16 +2,16 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "9.2.1",
+  "version": "9.3.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.3.11",
-    "@devtable/dashboard": "9.2.1",
-    "@devtable/settings-form": "9.2.1",
+    "@devtable/dashboard": "9.3.0",
+    "@devtable/settings-form": "9.3.0",
     "@emotion/react": "11.10.6",
     "@faker-js/faker": "7.6.0",
     "@mantine/core": "5.9.5",