feat: add liquid, funnel, organization-chart

Author: hustcc

__tests__/api.spec.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 import * as API from "../src/sdk";
 
 describe("sdk API", () => {
@@ -12,18 +12,21 @@ describe("sdk API", () => {
       "area",
       "bar",
       "column",
+      "dual-axes",
       "fishbone-diagram",
       "flow-diagram",
+      "funnel",
       "histogram",
       "line",
+      "liquid",
       "mind-map",
       "network-graph",
+      "organization-chart",
       "pie",
       "radar",
       "scatter",
       "treemap",
       "word-cloud",
-      "dual-axes",
     ]);
   });
 

__tests__/charts/charts.spec.ts

@@ -9,10 +9,10 @@ describe("charts schema check", () => {
   // Create a separate test case for each chart
   for (const chartName of chartNames) {
     it(`should check schema for ${chartName} chart`, () => {
-      const schema = actualCharts[chartName].tool.inputSchema;
+      const schema = actualCharts[chartName].tool;
       const rightChart = expectedCharts[chartName];
 
-      expect(schema).toEqual(rightChart.inputSchema);
+      expect(schema).toEqual(rightChart);
     });
   }
 });

__tests__/charts/funnel.json

@@ -0,0 +1,49 @@
+{
+  "name": "generate_funnel_chart",
+  "description": "Generate a funnel chart to visualize the progressive reduction of data as it passes through stages, such as, the conversion rates of users from visiting a website to completing a purchase.",
+  "inputSchema": {
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "properties": {
+      "data": {
+        "description": "Data for funnel chart, such as, [{ category: '浏览网站', value: 50000 }, { category: '放入购物车', value: 35000 }, { category: '生成订单', value: 25000 }, { category: '支付订单', value: 15000 }, { category: '完成交易', value: 8000 }].",
+        "items": {
+          "properties": {
+            "category": {
+              "type": "string"
+            },
+            "value": {
+              "type": "number"
+            }
+          },
+          "required": ["category", "value"],
+          "type": "object"
+        },
+        "minItems": 1,
+        "type": "array"
+      },
+      "height": {
+        "default": 400,
+        "description": "Set the height of chart, default is 400.",
+        "type": "number"
+      },
+      "theme": {
+        "default": "default",
+        "description": "Set the theme for the chart, optional, default is 'default'.",
+        "enum": ["default", "academy"],
+        "type": "string"
+      },
+      "title": {
+        "default": "",
+        "description": "Set the title of chart.",
+        "type": "string"
+      },
+      "width": {
+        "default": 600,
+        "description": "Set the width of chart, default is 600.",
+        "type": "number"
+      }
+    },
+    "required": ["data"],
+    "type": "object"
+  }
+}

__tests__/charts/index.ts

@@ -1,15 +1,18 @@
-export { default as line } from "./line.json";
-export { default as column } from "./column.json";
-export { default as pie } from "./pie.json";
 export { default as area } from "./area.json";
 export { default as bar } from "./bar.json";
-export { default as histogram } from "./histogram.json";
-export { default as scatter } from "./scatter.json";
-export { default as "word-cloud" } from "./word-cloud.json";
-export { default as radar } from "./radar.json";
-export { default as treemap } from "./treemap.json";
+export { default as column } from "./column.json";
 export { default as "dual-axes" } from "./dual-axes.json";
+export { default as "fishbone-diagram" } from "./fishbone-diagram.json";
+export { default as "flow-diagram" } from "./flow-diagram.json";
+export { default as funnel } from "./funnel.json";
+export { default as histogram } from "./histogram.json";
+export { default as line } from "./line.json";
+export { default as liquid } from "./liquid.json";
 export { default as "mind-map" } from "./mind-map.json";
 export { default as "network-graph" } from "./network-graph.json";
-export { default as "flow-diagram" } from "./flow-diagram.json";
-export { default as "fishbone-diagram" } from "./fishbone-diagram.json";
+export { default as "organization-chart" } from "./organization-chart.json";
+export { default as pie } from "./pie.json";
+export { default as radar } from "./radar.json";
+export { default as scatter } from "./scatter.json";
+export { default as treemap } from "./treemap.json";
+export { default as "word-cloud" } from "./word-cloud.json";

__tests__/charts/liquid.json

@@ -0,0 +1,44 @@
+{
+  "name": "generate_liquid_chart",
+  "description": "Generate a liquid chart to visualize a single value as a percentage, such as, the current occupancy rate of a reservoir or the completion percentage of a project.",
+  "inputSchema": {
+    "type": "object",
+    "properties": {
+      "data": {
+        "type": "number",
+        "minimum": 0,
+        "maximum": 1,
+        "description": "The percentage value to display in the liquid chart, should be a number between 0 and 1, where 1 represents 100%. For example, 0.75 represents 75%."
+      },
+      "shape": {
+        "type": "string",
+        "enum": ["circle", "rect", "pin", "triangle"],
+        "default": "circle",
+        "description": "The shape of the liquid chart, can be 'circle', 'rect', 'pin', or 'triangle'. Default is 'circle'."
+      },
+      "theme": {
+        "type": "string",
+        "enum": ["default", "academy"],
+        "default": "default",
+        "description": "Set the theme for the chart, optional, default is 'default'."
+      },
+      "width": {
+        "type": "number",
+        "default": 600,
+        "description": "Set the width of chart, default is 600."
+      },
+      "height": {
+        "type": "number",
+        "default": 400,
+        "description": "Set the height of chart, default is 400."
+      },
+      "title": {
+        "type": "string",
+        "default": "",
+        "description": "Set the title of chart."
+      }
+    },
+    "required": ["data"],
+    "$schema": "http://json-schema.org/draft-07/schema#"
+  }
+}

__tests__/charts/organization-chart.json

@@ -0,0 +1,67 @@
+{
+  "name": "generate_organization_chart",
+  "description": "Generate an organization chart to visualize the hierarchical structure of an organization, such as, a diagram showing the relationship between a CEO and their direct reports.",
+  "inputSchema": {
+    "type": "object",
+    "properties": {
+      "data": {
+        "type": "object",
+        "properties": {
+          "name": {
+            "type": "string"
+          },
+          "description": {
+            "type": "string"
+          },
+          "children": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string"
+                },
+                "description": {
+                  "type": "string"
+                },
+                "children": {
+                  "type": "array",
+                  "items": {
+                    "$ref": "#/properties/data/properties/children/items"
+                  }
+                }
+              },
+              "required": ["name"]
+            }
+          }
+        },
+        "required": ["name"],
+        "description": "Data for organization chart, such as, { name: 'CEO', description: 'Chief Executive Officer', children: [{ name: 'CTO', description: 'Chief Technology Officer', children: [{ name: 'Dev Manager', description: 'Development Manager' }] }] }."
+      },
+      "orient": {
+        "type": "string",
+        "enum": ["horizontal", "vertical"],
+        "default": "vertical",
+        "description": "Orientation of the organization chart, either horizontal or vertical, default is vertical."
+      },
+      "theme": {
+        "type": "string",
+        "enum": ["default", "academy"],
+        "default": "default",
+        "description": "Set the theme for the chart, optional, default is 'default'."
+      },
+      "width": {
+        "type": "number",
+        "default": 600,
+        "description": "Set the width of chart, default is 600."
+      },
+      "height": {
+        "type": "number",
+        "default": 400,
+        "description": "Set the height of chart, default is 400."
+      }
+    },
+    "required": ["data"],
+    "$schema": "http://json-schema.org/draft-07/schema#"
+  }
+}

src/charts/funnel.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils";
+import { HeightSchema, ThemeSchema, TitleSchema, WidthSchema } from "./base";
+
+const data = z.object({
+  category: z.string(),
+  value: z.number(),
+});
+
+const schema = {
+  data: z
+    .array(data)
+    .describe(
+      "Data for funnel chart, such as, [{ category: '浏览网站', value: 50000 }, { category: '放入购物车', value: 35000 }, { category: '生成订单', value: 25000 }, { category: '支付订单', value: 15000 }, { category: '完成交易', value: 8000 }].",
+    )
+    .nonempty({ message: "Funnel chart data cannot be empty." }),
+  theme: ThemeSchema,
+  width: WidthSchema,
+  height: HeightSchema,
+  title: TitleSchema,
+};
+
+const tool = {
+  name: "generate_funnel_chart",
+  description:
+    "Generate a funnel chart to visualize the progressive reduction of data as it passes through stages, such as, the conversion rates of users from visiting a website to completing a purchase.",
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const funnel = {
+  schema,
+  tool,
+};

src/charts/index.ts

@@ -1,18 +1,21 @@
 /**
  * export all charts as named exports to match the chart type
  */
-export { area as "area" } from "./area";
-export { bar as "bar" } from "./bar";
-export { column as "column" } from "./column";
+export { area } from "./area";
+export { bar } from "./bar";
+export { column } from "./column";
+export { dualAxes as "dual-axes" } from "./dual-axes";
 export { fishboneDiagram as "fishbone-diagram" } from "./fishbone-diagram";
 export { flowDiagram as "flow-diagram" } from "./flow-diagram";
-export { histogram as "histogram" } from "./histogram";
-export { line as "line" } from "./line";
+export { funnel } from "./funnel";
+export { histogram } from "./histogram";
+export { line } from "./line";
+export { liquid } from "./liquid";
 export { mindMap as "mind-map" } from "./mind-map";
 export { networkGraph as "network-graph" } from "./network-graph";
-export { pie as "pie" } from "./pie";
-export { radar as "radar" } from "./radar";
-export { scatter as "scatter" } from "./scatter";
-export { treemap as "treemap" } from "./treemap";
+export { organizationChart as "organization-chart" } from "./organization-chart";
+export { pie } from "./pie";
+export { radar } from "./radar";
+export { scatter } from "./scatter";
+export { treemap } from "./treemap";
 export { wordCloud as "word-cloud" } from "./word-cloud";
-export { dualAxes as "dual-axes" } from "./dual-axes";

src/charts/liquid.ts

@@ -0,0 +1,36 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils";
+import { HeightSchema, ThemeSchema, TitleSchema, WidthSchema } from "./base";
+
+const schema = {
+  data: z
+    .number()
+    .describe(
+      "The percentage value to display in the liquid chart, should be a number between 0 and 1, where 1 represents 100%. For example, 0.75 represents 75%.",
+    )
+    .min(0, { message: "Value must be at least 0." })
+    .max(1, { message: "Value must be at most 1." }),
+  shape: z
+    .enum(["circle", "rect", "pin", "triangle"])
+    .optional()
+    .default("circle")
+    .describe(
+      "The shape of the liquid chart, can be 'circle', 'rect', 'pin', or 'triangle'. Default is 'circle'.",
+    ),
+  theme: ThemeSchema,
+  width: WidthSchema,
+  height: HeightSchema,
+  title: TitleSchema,
+};
+
+const tool = {
+  name: "generate_liquid_chart",
+  description:
+    "Generate a liquid chart to visualize a single value as a percentage, such as, the current occupancy rate of a reservoir or the completion percentage of a project.",
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const liquid = {
+  schema,
+  tool,
+};

src/charts/organization-chart.ts

@@ -0,0 +1,45 @@
+import { z } from "zod";
+import { zodToJsonSchema } from "../utils";
+import { HeightSchema, ThemeSchema, WidthSchema } from "./base";
+
+export type OrganizationChartDatumType = {
+  name: string;
+  description?: string;
+  children?: OrganizationChartDatumType[];
+};
+
+const OrganizationChartNodeSchema: z.ZodType<OrganizationChartDatumType> =
+  z.lazy(() =>
+    z.object({
+      name: z.string(),
+      description: z.string().optional(),
+      children: z.array(OrganizationChartNodeSchema).optional(),
+    }),
+  );
+
+const schema = {
+  data: OrganizationChartNodeSchema.describe(
+    "Data for organization chart, such as, { name: 'CEO', description: 'Chief Executive Officer', children: [{ name: 'CTO', description: 'Chief Technology Officer', children: [{ name: 'Dev Manager', description: 'Development Manager' }] }] }.",
+  ),
+  orient: z
+    .enum(["horizontal", "vertical"])
+    .default("vertical")
+    .describe(
+      "Orientation of the organization chart, either horizontal or vertical, default is vertical.",
+    ),
+  theme: ThemeSchema,
+  width: WidthSchema,
+  height: HeightSchema,
+};
+
+const tool = {
+  name: "generate_organization_chart",
+  description:
+    "Generate an organization chart to visualize the hierarchical structure of an organization, such as, a diagram showing the relationship between a CEO and their direct reports.",
+  inputSchema: zodToJsonSchema(schema),
+};
+
+export const organizationChart = {
+  schema,
+  tool,
+};