@fe-free/core 2.3.3 → 2.3.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.3.4
+
+### Patch Changes
+
+- feat: markdown chart
+  - @fe-free/tool@2.3.4
+
 ## 2.3.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.3.3"
+    "@fe-free/tool": "2.3.4"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/markdown/code.tsx

@@ -1,6 +1,7 @@
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { ChartBlock } from './chart';
+import { HMChartBlock } from './hm_chart';
 
 function CodeBlock(props: any) {
   const { children, className, ...rest } = props;
@@ -11,6 +12,11 @@ function CodeBlock(props: any) {
     return <ChartBlock>{children}</ChartBlock>;
   }
 
+  // 如果是 hmchart 类型的代码块，使用 HMChartBlock 组件
+  if (match && match[1] === 'hmchart') {
+    return <HMChartBlock>{children}</HMChartBlock>;
+  }
+
   return (
     <div className="markdown-body-code-block">
       {match ? (

package/src/markdown/hm_chart.tsx

@@ -0,0 +1,176 @@
+import { Column, Line, Pie, Scatter } from '@ant-design/plots';
+import React, { useMemo } from 'react';
+
+enum EnumType {
+  /** 折线图 */
+  LINE = 'line',
+  /** 柱状图 */
+  BAR = 'bar',
+  /** 饼图 */
+  PIE = 'pie',
+  /** 散点图 */
+  SCATTER = 'scatter',
+}
+
+interface HMChartConfigLine<D> {
+  /** 折线图 */
+  type: EnumType.LINE;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 系列字段，多折线图用 */
+  seriesField?: keyof D;
+}
+
+interface HMChartConfigBar<D> {
+  /** 柱状图 */
+  type: EnumType.BAR;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 系列字段，多折线图用 */
+  seriesField?: keyof D;
+}
+
+interface HMChartConfigPie<D> {
+  /** 饼图 */
+  type: EnumType.PIE;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 角度字段 */
+  angleField: keyof D;
+  /** 颜色字段 */
+  colorField: keyof D;
+}
+
+interface HMChartConfigScatter<D> {
+  /** 散点图 */
+  type: EnumType.SCATTER;
+  /** 标题 */
+  title?: string;
+  /** 就是纯粹的数据 */
+  data: D[];
+  /** 横坐标字段 */
+  xField: keyof D;
+  /** 纵坐标字段 */
+  yField: keyof D;
+  /** 颜色字段 */
+  colorField?: keyof D;
+}
+
+type HMChartConfig<D> =
+  | HMChartConfigLine<D>
+  | HMChartConfigBar<D>
+  | HMChartConfigPie<D>
+  | HMChartConfigScatter<D>;
+
+// 错误处理组件
+function ChartError(props: { children?: React.ReactNode }) {
+  const { children } = props;
+  return (
+    <div className="markdown-body-hmchart-block">
+      <div style={{ textAlign: 'center', padding: '20px' }}>{children || '图表发生错误'}</div>
+    </div>
+  );
+}
+
+class ErrorBoundary extends React.Component {
+  state = { hasError: false };
+
+  static getDerivedStateFromError(error) {
+    console.error('ErrorBoundary:', error);
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    console.error('Error caught:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <ChartError />;
+    }
+    return this.props.children;
+  }
+}
+
+function ChartOfLine(props: { config: HMChartConfigLine<any> }) {
+  return <Line colorField={props.config.seriesField} {...props.config} />;
+}
+
+function ChartOfBar(props: { config: HMChartConfigBar<any> }) {
+  return <Column colorField={props.config.seriesField} {...props.config} />;
+}
+
+function ChartOfPie(props: { config: HMChartConfigPie<any> }) {
+  return <Pie {...props.config} />;
+}
+
+function ChartOfScatter(props: { config: HMChartConfigScatter<any> }) {
+  return <Scatter {...props.config} />;
+}
+
+// 主 ChartBlock 组件
+function HMChartBlockBase(props: any) {
+  const { children } = props;
+
+  const chartConfig = useMemo(() => {
+    try {
+      return JSON.parse(children);
+    } catch (error) {
+      console.error('Failed to parse chart data:', error);
+      return null;
+    }
+  }, [children]);
+
+  if (!chartConfig) {
+    return <ChartError />;
+  }
+
+  const { type, ...config } = chartConfig;
+
+  switch (type) {
+    case EnumType.LINE:
+      return <ChartOfLine config={config} />;
+
+    case EnumType.BAR:
+      return <ChartOfBar config={config} />;
+
+    case EnumType.PIE:
+      return <ChartOfPie config={config} />;
+
+    case EnumType.SCATTER:
+      return <ChartOfScatter config={config} />;
+
+    default:
+      return <ChartError>不支持的图表类型：{type}</ChartError>;
+  }
+}
+
+function HMChartBlock(props: any) {
+  const { children } = props;
+
+  // eslint-disable-next-line no-irregular-whitespace
+  const content = children?.replace(/ /g, '');
+
+  return (
+    <ErrorBoundary>
+      <HMChartBlockBase>{content}</HMChartBlockBase>
+    </ErrorBoundary>
+  );
+}
+
+export { HMChartBlock };
+export type { HMChartConfig };

package/src/markdown/markdown.stories.tsx

@@ -141,8 +141,7 @@ export const DeepSeekPending: Story = {
 
 export const Chart: Story = {
   args: {
-    children: `这是一个使用 @ant-design/plots 的 chart 示例
-
+    children: `
 ## 折线图示例
 
 \`\`\`chart
@@ -320,3 +319,179 @@ export const Chart: Story = {
 `,
   },
 };
+
+export const HMChart: Story = {
+  args: {
+    children: `
+类型定义见：https://github.com/frontend-free/free/blob/main/packages/core/src/markdown/hm_chart.tsx
+
+## 折线图示例
+
+\`\`\`hmchart
+{
+  "title": "趋势变化",
+  "type": "line",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "xField": "year",
+  "yField": "value"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "多条趋势变化",
+  "type": "line",
+  "data": [
+    { "year": "1991", "type": "A", "value": 3 },
+    { "year": "1991", "type": "B", "value": 4 },
+    { "year": "1992", "type": "A", "value": 4 },
+    { "year": "1992", "type": "B", "value": 4.5 },
+    { "year": "1993", "type": "A", "value": 3.5 },
+    { "year": "1993", "type": "B", "value": 6 }
+  ],
+  "xField": "year",
+  "yField": "value",
+  "seriesField": "type"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "柱状图",
+  "type": "bar",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "xField": "year",
+  "yField": "value"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "多条柱状图",
+  "type": "bar",
+  "data": [
+    { "year": "1991", "type": "A", "value": 3 },
+    { "year": "1991", "type": "B", "value": 4 },
+    { "year": "1992", "type": "A", "value": 4 },
+    { "year": "1992", "type": "B", "value": 4.5 },
+    { "year": "1993", "type": "A", "value": 3.5 },
+    { "year": "1993", "type": "B", "value": 6 }
+  ],
+  "xField": "year",
+  "yField": "value",
+  "seriesField": "type"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "饼图",
+  "type": "pie",
+  "data": [
+    { "year": "1991", "value": 3 },
+    { "year": "1992", "value": 4 },
+    { "year": "1993", "value": 3.5 }
+  ],
+  "angleField": "value",
+  "colorField": "year"
+}
+\`\`\`
+
+\`\`\`hmchart
+{
+  "title": "散点图示例",
+  "type": "scatter",
+  "data": [
+    {
+        "gender": "female",
+        "height": 161.2,
+        "weight": 51.6
+    },
+    {
+        "gender": "male",
+        "height": 167.5,
+        "weight": 59
+    },
+    {
+        "gender": "female",
+        "height": 159.5,
+        "weight": 49.2
+    },
+    {
+        "gender": "male",
+        "height": 157,
+        "weight": 63
+    },
+    {
+        "gender": "male",
+        "height": 155.8,
+        "weight": 53.6
+    },
+    {
+        "gender": "female",
+        "height": 170,
+        "weight": 59
+    },
+    {
+        "gender": "female",
+        "height": 159.1,
+        "weight": 47.6
+    },
+    {
+        "gender": "female",
+        "height": 166,
+        "weight": 69.8
+    },
+    {
+        "gender": "female",
+        "height": 176.2,
+        "weight": 66.8
+    },
+    {
+        "gender": "female",
+        "height": 160.2,
+        "weight": 75.2
+    },
+    {
+        "gender": "female",
+        "height": 172.5,
+        "weight": 55.2
+    },
+    {
+        "gender": "female",
+        "height": 170.9,
+        "weight": 54.2
+    },
+    {
+        "gender": "female",
+        "height": 172.9,
+        "weight": 62.5
+    },
+    {
+        "gender": "male",
+        "height": 153.4,
+        "weight": 42
+    },
+    {
+        "gender": "male",
+        "height": 160,
+        "weight": 50
+    }
+  ],
+  "xField": "height",
+  "yField": "weight",
+  "colorField": "gender"
+}
+\`\`\`
+
+`,
+  },
+};