feat: monitor add trending mode

src/client/api/model/monitor.ts

@@ -8,6 +8,11 @@ export function useMonitorUpsert() {
         workspaceId: data.workspaceId,
       });
 
+      utils.monitor.get.refetch({
+        workspaceId: data.workspaceId,
+        monitorId: data.id,
+      });
+
       defaultSuccessHandler();
     },
     onError: defaultErrorHandler,

src/client/components/monitor/MonitorDataChart.tsx

@@ -1,7 +1,7 @@
 import { AreaConfig, Area } from '@ant-design/charts';
 import { Select } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
-import { uniqBy } from 'lodash-es';
+import { max, min, uniqBy } from 'lodash-es';
 import React, { useState, useMemo } from 'react';
 import { useSocketSubscribeList } from '../../api/socketio';
 import { trpc } from '../../api/trpc';
@@ -97,6 +97,16 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
     }, [_recentData, _data, subscribedDataList]);
 
     const config = useMemo<AreaConfig>(() => {
+      const values = data.map((d) => d.value);
+      const maxValue = max(values) ?? 0;
+      const minValue = min(values) ?? 0;
+
+      const isTrendingMode = monitorInfo?.trendingMode ?? false; // if true, y axis not start from 0
+
+      const yMin = isTrendingMode
+        ? Math.max(minValue - (maxValue - minValue) / 10, 0)
+        : 0;
+
       return {
         data,
         height: 200,
@@ -104,6 +114,9 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
         yField: 'value',
         smooth: true,
         meta: {
+          value: {
+            min: yMin,
+          },
           time: {
             formatter(value) {
               return dayjs(value).format(
@@ -112,6 +125,10 @@ export const MonitorDataChart: React.FC<{ monitorId: string }> = React.memo(
             },
           },
         },
+        // need explore how to display null data
+        // xAxis: {
+        //   type: 'time',
+        // },
         color: 'rgb(34 197 94 / 0.8)',
         areaStyle: () => {
           return {

src/client/components/monitor/MonitorInfoEditor.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import type { Monitor } from '../../../server/types/prisma';
-import { Button, Form, Input, InputNumber, Select } from 'antd';
+import { Button, Form, Input, InputNumber, Select, Switch } from 'antd';
 import { getMonitorProvider, monitorProviders } from './provider';
 import { useEventWithLoading } from '../../hooks/useEvent';
 import { NotificationPicker } from '../notification/NotificationPicker';
@@ -12,6 +12,7 @@ export type MonitorInfoEditorValues = Omit<
 > & {
   id?: string;
   payload: Record<string, any>;
+  trendingMode: boolean;
   notificationIds?: string[];
 };
 
@@ -21,6 +22,7 @@ const defaultValues: Omit<MonitorInfoEditorValues, 'payload'> = {
   active: true,
   interval: 60,
   maxRetries: 0,
+  trendingMode: false,
 };
 
 interface MonitorInfoEditorProps {
@@ -105,6 +107,15 @@ export const MonitorInfoEditor: React.FC<MonitorInfoEditorProps> = React.memo(
 
           {formEl}
 
+          <Form.Item
+            label={t('Trending Mode')}
+            name="trendingMode"
+            valuePropName="checked"
+            tooltip={t('Y Axis will not start from zero')}
+          >
+            <Switch />
+          </Form.Item>
+
           <Form.Item label={t('Notification')} name="notificationIds">
             <NotificationPicker allowClear={true} mode="multiple" />
           </Form.Item>

src/server/model/monitor/manager.ts

@@ -5,7 +5,7 @@ import { logger } from '../../utils/logger';
 
 export type MonitorUpsertData = Pick<
   Monitor,
-  'workspaceId' | 'name' | 'type' | 'interval' | 'maxRetries'
+  'workspaceId' | 'name' | 'type' | 'interval' | 'maxRetries' | 'trendingMode'
 > & {
   id?: string;
   active?: boolean;

src/server/prisma/migrations/20240502082154_add_monitor_trending_mode/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Monitor" ADD COLUMN     "trendingMode" BOOLEAN NOT NULL DEFAULT false;

src/server/prisma/schema.prisma

@@ -284,20 +284,21 @@ model Notification {
 }
 
 model Monitor {
-  id          String   @id() @default(cuid()) @db.VarChar(30)
+  id           String   @id() @default(cuid()) @db.VarChar(30)
-  workspaceId String   @db.VarChar(30)
+  workspaceId  String   @db.VarChar(30)
-  name        String   @db.VarChar(100)
+  name         String   @db.VarChar(100)
-  type        String   @db.VarChar(100)
+  type         String   @db.VarChar(100)
-  active      Boolean  @default(true) @db.Boolean
+  active       Boolean  @default(true) @db.Boolean
-  interval    Int      @default(20) @db.Integer
+  interval     Int      @default(20) @db.Integer
-  maxRetries  Int      @default(0) @db.Integer
+  maxRetries   Int      @default(0) @db.Integer
   // TODO
   // retryInterval Int       @default(0) @db.Integer
   /// [CommonPayload]
   /// @zod.custom(imports.CommonPayloadSchema)
-  payload     Json     @db.Json
+  payload      Json     @db.Json
-  createdAt   DateTime @default(now()) @db.Timestamptz(6)
+  trendingMode Boolean  @default(false) @db.Boolean
-  updatedAt   DateTime @default(now()) @updatedAt @db.Timestamptz(6)
+  createdAt    DateTime @default(now()) @db.Timestamptz(6)
+  updatedAt    DateTime @default(now()) @updatedAt @db.Timestamptz(6)
 
   workspace Workspace @relation(fields: [workspaceId], references: [id])
 

src/server/prisma/zod/monitor.ts

@@ -20,6 +20,7 @@ export const MonitorModelSchema = z.object({
    * [CommonPayload]
    */
   payload: imports.CommonPayloadSchema,
+  trendingMode: z.boolean(),
   createdAt: z.date(),
   updatedAt: z.date(),
 })

src/server/trpc/routers/monitor.ts

@@ -128,6 +128,7 @@ export const monitorRouter = router({
         active: z.boolean().default(true),
         interval: z.number().int().min(5).max(10000).default(20),
         maxRetries: z.number().int().min(0).max(10).default(0),
+        trendingMode: z.boolean().default(false),
         notificationIds: z.array(z.string()).default([]),
         payload: z.object({}).passthrough(),
       })
@@ -142,6 +143,7 @@ export const monitorRouter = router({
         active,
         interval,
         maxRetries,
+        trendingMode,
         notificationIds,
         payload,
       } = input;
@@ -154,6 +156,7 @@ export const monitorRouter = router({
         active,
         interval,
         maxRetries,
+        trendingMode,
         notificationIds,
         payload,
       });