add chart block

xc2f · xc2f · commit 7100c53b558e · 2026-01-18T01:06:14.000+08:00
diff --git a/README.md b/README.md
@@ -4,11 +4,12 @@
 
 A personal research project forked from the Payload CMS [website](https://github.com/payloadcms/website). Based on the official example, the following features have been added:
 
-- Email sending by SES
-- Subscription API
-- Notes recording
-- Scheduled database backups
-- File upload to R2/S3
+- Integrated Amazon SES for email delivery (Admin Panel).
+- API subscription (Admin Panel).
+- Note-taking and content recording support (Admin Panel).
+- Scheduled database backups (Admin Panel).
+- File and media uploads to Cloudflare R2 or AWS S3 (Admin Panel).
+- Built-in chart block for visual data analysis and presentation.
 
 ## Develop
 
diff --git a/src/blocks/ChartBlock/Component.tsx b/src/blocks/ChartBlock/Component.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Chart, ChartProps } from './charts'
+
+type Props = ChartProps & {
+  className?: string
+}
+
+export const ChartBlock: React.FC<Props> = ({ className, ...restProps }) => {
+  return (
+    <div className={[className, 'not-prose'].filter(Boolean).join(' ')}>
+      <Chart {...restProps} />
+    </div>
+  )
+}
diff --git a/src/blocks/ChartBlock/charts/ComposedChart.tsx b/src/blocks/ChartBlock/charts/ComposedChart.tsx
@@ -0,0 +1,84 @@
+'use client'
+
+import React from 'react'
+
+import { ComposedChart, XAxis, YAxis, CartesianGrid, Area, Bar, Line } from 'recharts'
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+
+type SeriesItem = {
+  key: string
+  label: string
+  type: 'line' | 'bar' | 'area'
+  color?: string | undefined
+}
+
+type SeriesConfigMap = Record<string, Partial<SeriesItem>>
+
+export type ComposedChartProps = {
+  title: string
+  description?: string
+  xAxisKey: string
+  series: SeriesItem[]
+  config?: SeriesConfigMap
+  dataset: []
+}
+
+const Chart: React.FC<ComposedChartProps> = (props) => {
+  const { dataset = [], xAxisKey, series = [], config = {} } = props
+
+  const seriesConfig = series.reduce<Record<string, SeriesItem>>((prev, curr) => {
+    const { key } = curr
+    prev[key] = curr
+    return prev
+  }, {})
+
+  const chartConfig: Record<string, SeriesItem> = {}
+  for (const key in seriesConfig) {
+    if (!Object.hasOwn(seriesConfig, key)) continue
+    const element = seriesConfig[key]
+    chartConfig[key] = {
+      ...element,
+      ...config?.[key],
+    }
+  }
+
+  const renderSeries = (item: SeriesItem, idx: number) => {
+    const { type, key, label } = item
+    const color = chartConfig[key]?.color || `var(--chart-${idx + 1})`
+
+    switch (type) {
+      case 'line':
+        return <Line dataKey={key} label={label} fill={color} stroke={color} type="monotone" />
+      case 'bar':
+        return <Bar dataKey={key} label={label} fill={color} stroke={color} radius={4} />
+      case 'area':
+        return <Area dataKey={key} label={label} fill={color} stroke={color} type="monotone" />
+
+      default:
+        break
+    }
+
+    return null
+  }
+
+  return (
+    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+      <ComposedChart data={dataset}>
+        <CartesianGrid vertical={false} stroke="#f5f5f5" />
+        <XAxis dataKey={xAxisKey} />
+        <YAxis />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        {series.map((item, idx) => renderSeries(item, idx))}
+      </ComposedChart>
+    </ChartContainer>
+  )
+}
+
+export default Chart
diff --git a/src/blocks/ChartBlock/charts/index.tsx b/src/blocks/ChartBlock/charts/index.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import React from 'react'
+import ComposedChart, { ComposedChartProps } from './ComposedChart'
+
+export type ChartProps =
+  | ({ type: 'composed' } & ComposedChartProps)
+  | { type: 'line' | 'bar' | 'area' | 'pie' }
+
+export const Chart: React.FC<ChartProps> = (props) => {
+  switch (props.type) {
+    case 'composed':
+      return <ComposedChart {...props} />
+  }
+  return null
+}
diff --git a/src/blocks/ChartBlock/config.ts b/src/blocks/ChartBlock/config.ts
@@ -0,0 +1,129 @@
+import type { Block } from 'payload'
+
+export const ChartBlock = (options?: { slug?: string; label?: string }): Block => {
+  return {
+    slug: options?.slug ?? 'chart',
+    interfaceName: 'ChartBlock',
+    fields: [
+      {
+        type: 'row',
+        fields: [
+          {
+            name: 'title',
+            type: 'text',
+            label: 'Chart Title',
+            required: true,
+            admin: { width: '50%' },
+          },
+          {
+            name: 'description',
+            type: 'text',
+            label: 'Description',
+            admin: { width: '50%' },
+          },
+        ],
+      },
+      {
+        name: 'type',
+        label: 'Chart Type',
+        type: 'select',
+        required: true,
+        options: [
+          { label: 'Line', value: 'line' },
+          { label: 'Bar', value: 'bar' },
+          { label: 'Area', value: 'area' },
+          { label: 'Pie', value: 'pie' },
+          { label: 'Composed', value: 'composed' },
+        ],
+        defaultValue: 'line',
+      },
+
+      // Dataset JSON
+      {
+        name: 'dataset',
+        label: 'Dataset (JSON)',
+        type: 'json',
+        required: true,
+        admin: {
+          description: '数组对象格式，例如: [{ "time": "1:51", "Seoul": 97, "Tokyo": 86 }]',
+        },
+        validate: (value) => {
+          if (!Array.isArray(value)) return 'Dataset 必须是数组'
+          if (value.length === 0) return 'Dataset 不能为空'
+          return true
+        },
+      },
+
+      {
+        name: 'xAxisKey',
+        type: 'text',
+        label: 'X轴字段名',
+        required: true,
+      },
+      {
+        name: 'series',
+        label: 'Series 配置',
+        type: 'array',
+        minRows: 1,
+        fields: [
+          {
+            name: 'key',
+            type: 'text',
+            label: '字段名',
+            required: true,
+          },
+          {
+            name: 'label',
+            type: 'text',
+            label: '显示名称',
+          },
+          {
+            name: 'type',
+            type: 'select',
+            label: 'Series 类型',
+            options: [
+              { label: 'Line', value: 'line' },
+              { label: 'Bar', value: 'bar' },
+              { label: 'Area', value: 'area' },
+            ],
+            defaultValue: 'line',
+          },
+          {
+            name: 'yAxis',
+            type: 'select',
+            label: 'Y轴位置',
+            options: [
+              { label: 'Left', value: 'left' },
+              { label: 'Right', value: 'right' },
+            ],
+            defaultValue: 'left',
+          },
+          {
+            name: 'color',
+            type: 'text',
+            label: '颜色',
+            admin: { description: '可填十六进制或 color 名称' },
+          },
+        ],
+      },
+
+      // 高级 Chart 配置
+      {
+        name: 'config',
+        label: 'Advanced Chart Options (JSON)',
+        type: 'json',
+        admin: {
+          description: '透传给图表库的原生配置项',
+        },
+      },
+
+      // 数据来源
+      {
+        name: 'dataSource',
+        type: 'text',
+        label: 'Data Source',
+        defaultValue: 'xc2f.com',
+      },
+    ],
+  }
+}
diff --git a/src/collections/Posts/index.ts b/src/collections/Posts/index.ts
@@ -14,6 +14,7 @@ import { authenticatedOrPublished } from '../../access/authenticatedOrPublished'
 import { Banner } from '../../blocks/Banner/config'
 import { Code } from '../../blocks/Code/config'
 import { MediaBlock } from '../../blocks/MediaBlock/config'
+import { ChartBlock } from '../../blocks/ChartBlock/config'
 import { generatePreviewPath } from '../../utilities/generatePreviewPath'
 import { populateAuthors } from './hooks/populateAuthors'
 import { revalidateDelete, revalidatePost } from './hooks/revalidatePost'
@@ -91,7 +92,9 @@ export const Posts: CollectionConfig<'posts'> = {
                   return [
                     ...rootFeatures,
                     HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
-                    BlocksFeature({ blocks: [Banner, Code, MediaBlock] }),
+                    BlocksFeature({
+                      blocks: [Banner, Code, MediaBlock, ChartBlock()],
+                    }),
                     FixedToolbarFeature(),
                     InlineToolbarFeature(),
                     HorizontalRuleFeature(),
diff --git a/src/components/RichText/index.tsx b/src/components/RichText/index.tsx
@@ -12,6 +12,7 @@ import {
 } from '@payloadcms/richtext-lexical/react'
 
 import { CodeBlock, CodeBlockProps } from '@/blocks/Code/Component'
+import { ChartBlock, ChartBlockProps } from '@/blocks/ChartBlock/Component'
 
 import type {
   BannerBlock as BannerBlockProps,
@@ -24,7 +25,9 @@ import { cn } from '@/utilities/ui'
 
 type NodeTypes =
   | DefaultNodeTypes
-  | SerializedBlockNode<CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps>
+  | SerializedBlockNode<
+      CTABlockProps | MediaBlockProps | BannerBlockProps | CodeBlockProps | ChartBlockProps
+    >
 
 const internalDocToHref = ({ linkNode }: { linkNode: SerializedLinkNode }) => {
   const { value, relationTo } = linkNode.fields.doc!
@@ -52,6 +55,7 @@ const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters })
     ),
     code: ({ node }) => <CodeBlock className="col-start-2" {...node.fields} />,
     cta: ({ node }) => <CallToActionBlock {...node.fields} />,
+    chart: ({ node }) => <ChartBlock {...node.fields} />,
   },
 })
 
diff --git a/src/payload-types.ts b/src/payload-types.ts
@@ -2039,6 +2039,57 @@ export interface BannerBlock {
   blockName?: string | null;
   blockType: 'banner';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "ChartBlock".
+ */
+export interface ChartBlock {
+  title: string;
+  description?: string | null;
+  type: 'line' | 'bar' | 'area' | 'pie' | 'composed';
+  /**
+   * 数组对象格式，例如: [{ "time": "1:51", "Seoul": 97, "Tokyo": 86 }]
+   */
+  dataset:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  xAxisKey: string;
+  series?:
+    | {
+        key: string;
+        label?: string | null;
+        type?: ('line' | 'bar' | 'area') | null;
+        yAxis?: ('left' | 'right') | null;
+        /**
+         * 可填十六进制或 color 名称
+         */
+        color?: string | null;
+        id?: string | null;
+      }[]
+    | null;
+  /**
+   * 透传给图表库的原生配置项
+   */
+  config?:
+    | {
+        [k: string]: unknown;
+      }
+    | unknown[]
+    | string
+    | number
+    | boolean
+    | null;
+  dataSource?: string | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'chart';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".
