@standby/mcp-server-chart 0.9.10

package/build/utils/spec-translator.js

@@ -0,0 +1,515 @@
+"use strict";
+/**
+ * Translates MCP server chart input arguments into @antv/g2 spec format.
+ * Each chart type's custom schema is mapped to a G2 declarative spec
+ * that can be rendered by @antv/g2-ssr.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.translateToG2Spec = translateToG2Spec;
+/**
+ * Translate an MCP chart type + args into a G2 spec.
+ * Returns null for unknown chart types.
+ */
+function translateToG2Spec(chartType, args) {
+    const translator = TRANSLATORS[chartType];
+    if (!translator)
+        return null;
+    return translator(args);
+}
+function applyCommonStyle(spec, args) {
+    var _a, _b;
+    if (args.title) {
+        spec.title = { title: args.title };
+    }
+    if ((_a = args.style) === null || _a === void 0 ? void 0 : _a.palette) {
+        spec.scale = Object.assign(Object.assign({}, spec.scale), { color: { range: args.style.palette } });
+    }
+    if ((_b = args.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) {
+        spec.viewStyle = { viewFill: args.style.backgroundColor };
+    }
+}
+function applyAxisTitles(spec, args) {
+    if (args.axisXTitle || args.axisYTitle) {
+        spec.axis = spec.axis || {};
+        if (args.axisXTitle) {
+            spec.axis.x = Object.assign(Object.assign({}, (spec.axis.x || {})), { title: args.axisXTitle });
+        }
+        if (args.axisYTitle) {
+            spec.axis.y = Object.assign(Object.assign({}, (spec.axis.y || {})), { title: args.axisYTitle });
+        }
+    }
+}
+const TRANSLATORS = {
+    line: (args) => {
+        var _a, _b, _c;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "line",
+            data: args.data,
+            encode: Object.assign({ x: "time", y: "value" }, (hasGroup ? { color: "group" } : {})),
+            style: Object.assign({}, (((_b = args.style) === null || _b === void 0 ? void 0 : _b.lineWidth) ? { lineWidth: args.style.lineWidth } : {})),
+        };
+        if ((_c = args.style) === null || _c === void 0 ? void 0 : _c.startAtZero) {
+            spec.scale = { y: { domainMin: 0 } };
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    area: (args) => {
+        var _a, _b;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "area",
+            data: args.data,
+            encode: Object.assign({ x: "time", y: "value" }, (hasGroup ? { color: "group" } : {})),
+            style: Object.assign({ fillOpacity: 0.5 }, (((_b = args.style) === null || _b === void 0 ? void 0 : _b.lineWidth) ? { lineWidth: args.style.lineWidth } : {})),
+        };
+        if (args.stack && hasGroup) {
+            spec.transform = [{ type: "stackY" }];
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    bar: (args) => {
+        var _a;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "interval",
+            data: args.data,
+            encode: Object.assign({ x: "category", y: "value" }, (hasGroup ? { color: "group" } : {})),
+            coordinate: { transform: [{ type: "transpose" }] },
+        };
+        if (hasGroup) {
+            if (args.group) {
+                spec.transform = [{ type: "dodgeX" }];
+            }
+            else if (args.stack !== false) {
+                spec.transform = [{ type: "stackY" }];
+            }
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    column: (args) => {
+        var _a;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "interval",
+            data: args.data,
+            encode: Object.assign({ x: "category", y: "value" }, (hasGroup ? { color: "group" } : {})),
+        };
+        if (hasGroup) {
+            if (args.stack) {
+                spec.transform = [{ type: "stackY" }];
+            }
+            else if (args.group !== false) {
+                spec.transform = [{ type: "dodgeX" }];
+            }
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    scatter: (args) => {
+        var _a;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "point",
+            data: args.data,
+            encode: Object.assign({ x: "x", y: "y" }, (hasGroup ? { color: "group" } : {})),
+        };
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    pie: (args) => {
+        const spec = {
+            type: "interval",
+            data: args.data,
+            encode: { y: "value", color: "category" },
+            transform: [{ type: "stackY" }],
+            coordinate: Object.assign({ type: "theta" }, (args.innerRadius ? { innerRadius: args.innerRadius } : {})),
+            legend: { color: { position: "right" } },
+            labels: [{ text: "value" }],
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    funnel: (args) => {
+        const spec = {
+            type: "interval",
+            data: args.data,
+            encode: { x: "category", y: "value", color: "category", shape: "funnel" },
+            transform: [{ type: "symmetryY" }],
+            coordinate: { transform: [{ type: "transpose" }] },
+            scale: { x: { padding: 0 } },
+            axis: false,
+            legend: { color: { position: "bottom" } },
+            labels: [
+                { text: (d) => `${d.category} ${d.value}`, position: "inside" },
+            ],
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    radar: (args) => {
+        var _a, _b, _c;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const children = [];
+        if (hasGroup) {
+            children.push({
+                type: "area",
+                encode: { x: "name", y: "value", color: "group" },
+                style: { fillOpacity: 0.3 },
+            });
+            children.push({
+                type: "line",
+                encode: { x: "name", y: "value", color: "group" },
+                style: Object.assign({}, (((_b = args.style) === null || _b === void 0 ? void 0 : _b.lineWidth) ? { lineWidth: args.style.lineWidth } : {})),
+            });
+            children.push({
+                type: "point",
+                encode: { x: "name", y: "value", color: "group" },
+            });
+        }
+        else {
+            children.push({
+                type: "area",
+                encode: { x: "name", y: "value" },
+                style: Object.assign({ fillOpacity: 0.5 }, (((_c = args.style) === null || _c === void 0 ? void 0 : _c.lineWidth) ? { lineWidth: args.style.lineWidth } : {})),
+            });
+            children.push({
+                type: "line",
+                encode: { x: "name", y: "value" },
+            });
+        }
+        const spec = {
+            type: "view",
+            data: args.data,
+            coordinate: { type: "polar" },
+            scale: { x: { padding: 0.5, align: 0 } },
+            axis: { y: { title: false } },
+            children,
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    histogram: (args) => {
+        // histogram data is an array of numbers; convert to objects for G2
+        const data = args.data.map((v) => ({ value: v }));
+        const spec = {
+            type: "rect",
+            data,
+            encode: { x: "value" },
+            transform: [
+                Object.assign({ type: "binX", y: "count" }, (args.binNumber ? { thresholds: args.binNumber } : {})),
+            ],
+        };
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    boxplot: (args) => {
+        var _a, _b;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "boxplot",
+            data: args.data,
+            encode: Object.assign({ x: "category", y: "value" }, (hasGroup ? { color: "group" } : { color: "category" })),
+        };
+        if ((_b = args.style) === null || _b === void 0 ? void 0 : _b.startAtZero) {
+            spec.scale = { y: { domainMin: 0 } };
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    violin: (args) => {
+        var _a, _b;
+        const hasGroup = (_a = args.data) === null || _a === void 0 ? void 0 : _a.some((d) => d.group);
+        const spec = {
+            type: "boxplot",
+            data: args.data,
+            encode: Object.assign({ x: "category", y: "value", shape: "violin" }, (hasGroup ? { color: "group" } : { color: "category" })),
+            style: { opacity: 0.5, strokeOpacity: 0.5, point: false },
+        };
+        if ((_b = args.style) === null || _b === void 0 ? void 0 : _b.startAtZero) {
+            spec.scale = { y: { domainMin: 0 } };
+        }
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    waterfall: (args) => {
+        var _a;
+        // Pre-process waterfall data to compute cumulative start/end
+        const waterfallData = [];
+        let cumulative = 0;
+        for (const item of args.data) {
+            if (item.isTotal) {
+                waterfallData.push({
+                    category: item.category,
+                    start: 0,
+                    end: cumulative,
+                    value: cumulative,
+                    type: "total",
+                });
+            }
+            else if (item.isIntermediateTotal) {
+                waterfallData.push({
+                    category: item.category,
+                    start: 0,
+                    end: cumulative,
+                    value: cumulative,
+                    type: "total",
+                });
+            }
+            else {
+                const start = cumulative;
+                cumulative += item.value;
+                waterfallData.push({
+                    category: item.category,
+                    start,
+                    end: cumulative,
+                    value: item.value,
+                    type: item.value >= 0 ? "positive" : "negative",
+                });
+            }
+        }
+        const palette = ((_a = args.style) === null || _a === void 0 ? void 0 : _a.palette) || {};
+        const positiveColor = palette.positiveColor || "#FF4D4F";
+        const negativeColor = palette.negativeColor || "#2EBB59";
+        const totalColor = palette.totalColor || "#1783FF";
+        const spec = {
+            type: "interval",
+            data: waterfallData,
+            encode: {
+                x: "category",
+                y: ["start", "end"],
+                color: "type",
+            },
+            scale: {
+                color: {
+                    domain: ["positive", "negative", "total"],
+                    range: [positiveColor, negativeColor, totalColor],
+                },
+            },
+            labels: [{ text: "value" }],
+        };
+        applyCommonStyle(spec, args);
+        applyAxisTitles(spec, args);
+        return spec;
+    },
+    liquid: (args) => {
+        var _a;
+        const spec = {
+            type: "liquid",
+            data: args.percent,
+            style: Object.assign({ shape: args.shape || "circle" }, (((_a = args.style) === null || _a === void 0 ? void 0 : _a.color) ? { fill: args.style.color } : {})),
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    "word-cloud": (args) => {
+        const spec = {
+            type: "wordCloud",
+            data: args.data,
+            layout: { spiral: "rectangular" },
+            encode: { color: "text" },
+            axis: false,
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    venn: (args) => {
+        const spec = {
+            type: "path",
+            data: {
+                type: "inline",
+                value: args.data,
+                transform: [{ type: "venn" }],
+            },
+            encode: { d: "path", color: "key" },
+            style: { fillOpacity: 0.6 },
+            labels: [{ text: "label", position: "inside" }],
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    treemap: (args) => {
+        // The MCP schema provides an array of tree nodes; G2 expects a single root
+        const treeData = args.data.length === 1
+            ? args.data[0]
+            : { name: "root", children: args.data };
+        const spec = {
+            type: "treemap",
+            data: {
+                type: "inline",
+                value: treeData,
+            },
+            layout: { tile: "treemapBinary" },
+            encode: { value: "value", color: "name" },
+            style: {
+                labelText: (d) => { var _a; return ((_a = d.data) === null || _a === void 0 ? void 0 : _a.name) || ""; },
+                labelFill: "#000",
+                labelFontSize: 12,
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    sankey: (args) => {
+        const spec = {
+            type: "sankey",
+            data: {
+                type: "inline",
+                value: { links: args.data },
+            },
+            layout: {
+                nodeAlign: args.nodeAlign || "center",
+                nodePadding: 0.03,
+            },
+            style: {
+                labelSpacing: 3,
+                labelFontWeight: "bold",
+                nodeStrokeWidth: 1.2,
+                linkFillOpacity: 0.4,
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    "dual-axes": (args) => {
+        // Build combined data from categories + series
+        const data = [];
+        for (let i = 0; i < args.categories.length; i++) {
+            const row = { category: args.categories[i] };
+            for (let j = 0; j < args.series.length; j++) {
+                row[`series_${j}`] = args.series[j].data[i];
+            }
+            data.push(row);
+        }
+        const children = args.series.map((s, idx) => {
+            const field = `series_${idx}`;
+            const child = {
+                type: s.type === "column" ? "interval" : "line",
+                encode: { x: "category", y: field },
+                scale: { y: { independent: true } },
+                axis: {
+                    y: {
+                        title: s.axisYTitle || "",
+                        position: idx === 0 ? "left" : "right",
+                    },
+                },
+            };
+            if (s.type === "line") {
+                child.style = { lineWidth: 2 };
+            }
+            return child;
+        });
+        const spec = {
+            type: "view",
+            data,
+            children,
+        };
+        if (args.axisXTitle) {
+            spec.axis = { x: { title: args.axisXTitle } };
+        }
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    // Graph/diagram types - rendered as force graph in G2 (simplified)
+    "network-graph": (args) => {
+        const links = args.data.edges.map((e) => ({
+            source: e.source,
+            target: e.target,
+        }));
+        const nodes = args.data.nodes.map((n) => ({
+            id: n.name,
+        }));
+        const spec = {
+            type: "forceGraph",
+            data: {
+                type: "inline",
+                value: { nodes, links },
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    // Mind map, org chart, flow diagram, fishbone - rendered as tree/force graph
+    "mind-map": (args) => {
+        // Flatten tree to nodes + links for forceGraph
+        const { nodes, links } = flattenTree(args.data);
+        const spec = {
+            type: "forceGraph",
+            data: {
+                type: "inline",
+                value: { nodes, links },
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    "organization-chart": (args) => {
+        const { nodes, links } = flattenTree(args.data);
+        const spec = {
+            type: "forceGraph",
+            data: {
+                type: "inline",
+                value: { nodes, links },
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    "flow-diagram": (args) => {
+        const links = args.data.edges.map((e) => ({
+            source: e.source,
+            target: e.target,
+        }));
+        const nodes = args.data.nodes.map((n) => ({
+            id: n.name,
+        }));
+        const spec = {
+            type: "forceGraph",
+            data: {
+                type: "inline",
+                value: { nodes, links },
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+    "fishbone-diagram": (args) => {
+        const { nodes, links } = flattenTree(args.data);
+        const spec = {
+            type: "forceGraph",
+            data: {
+                type: "inline",
+                value: { nodes, links },
+            },
+        };
+        applyCommonStyle(spec, args);
+        return spec;
+    },
+};
+/** Flatten a tree structure into nodes and links for forceGraph rendering */
+function flattenTree(root) {
+    const nodes = [];
+    const links = [];
+    function walk(node) {
+        nodes.push({ id: node.name });
+        if (node.children) {
+            for (const child of node.children) {
+                links.push({ source: node.name, target: child.name });
+                walk(child);
+            }
+        }
+    }
+    walk(root);
+    return { nodes, links };
+}

package/build/utils/validator.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The Error class for validation errors in zod.
+ */
+export declare class ValidateError extends Error {
+    constructor(message: string);
+}
+export type NodeEdgeDataType = {
+    nodes: Array<{
+        name: string;
+    }>;
+    edges: Array<{
+        name: string;
+        source: string;
+        target: string;
+    }>;
+};
+export type TreeDataType = {
+    name: string;
+    children?: TreeDataType[];
+};
+/**
+ * Valid node name is unique.
+ * Valid edge source and target are existing in nodes.
+ * Valid edge source edge target pair are unique.
+ * @param data
+ * @returns boolean
+ */
+export declare const validatedNodeEdgeDataSchema: (data: NodeEdgeDataType) => boolean;
+/**
+ * Valid TreeData name is unique.
+ * @param data
+ * @returns boolean
+ */
+export declare const validatedTreeDataSchema: (data: TreeDataType) => boolean;

package/build/utils/validator.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validatedTreeDataSchema = exports.validatedNodeEdgeDataSchema = exports.ValidateError = void 0;
+/**
+ * The Error class for validation errors in zod.
+ */
+class ValidateError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = "ValidateError";
+    }
+}
+exports.ValidateError = ValidateError;
+/**
+ * Valid node name is unique.
+ * Valid edge source and target are existing in nodes.
+ * Valid edge source edge target pair are unique.
+ * @param data
+ * @returns boolean
+ */
+const validatedNodeEdgeDataSchema = (data) => {
+    const nodeNames = new Set(data.nodes.map((node) => node.name));
+    const uniqueNodeNames = new Set();
+    // 1. valid node name is unique
+    for (const node of data.nodes) {
+        if (uniqueNodeNames.has(node.name)) {
+            throw new ValidateError(`Invalid parameters: node's name '${node.name}' should be unique.`);
+        }
+        uniqueNodeNames.add(node.name);
+    }
+    // 2. valid edge source and target are existing in nodes
+    for (const edge of data.edges) {
+        if (!nodeNames.has(edge.source)) {
+            throw new ValidateError(`Invalid parameters: edge's source '${edge.source}' should exist in nodes.`);
+        }
+        if (!nodeNames.has(edge.target)) {
+            throw new ValidateError(`Invalid parameters: edge's target '${edge.target}' should exist in nodes.`);
+        }
+    }
+    // 3. valid edge source edge target pair are unique
+    const edgePairs = new Set();
+    for (const edge of data.edges) {
+        const pair = `${edge.source}-${edge.target}`;
+        if (edgePairs.has(pair)) {
+            throw new ValidateError(`Invalid parameters: edge pair '${pair}' should be unique.`);
+        }
+        edgePairs.add(pair);
+    }
+    return true;
+};
+exports.validatedNodeEdgeDataSchema = validatedNodeEdgeDataSchema;
+/**
+ * Valid TreeData name is unique.
+ * @param data
+ * @returns boolean
+ */
+const validatedTreeDataSchema = (data) => {
+    const node = data;
+    const names = new Set();
+    // valid node name is unique
+    const checkUniqueness = (currentNode) => {
+        if (names.has(currentNode.name)) {
+            throw new ValidateError(`Invalid parameters: node's name '${currentNode.name}' should be unique.`);
+        }
+        names.add(currentNode.name);
+        if (currentNode.children) {
+            for (let i = 0; i < currentNode.children.length; i++) {
+                const child = currentNode.children[i];
+                checkUniqueness(child);
+            }
+        }
+    };
+    checkUniqueness(node);
+    return true;
+};
+exports.validatedTreeDataSchema = validatedTreeDataSchema;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@standby/mcp-server-chart",
+  "description": "A Model Context Protocol server for generating charts using AntV. This is a TypeScript-based MCP server that provides chart generation capabilities. It allows you to create various types of charts through MCP tools.",
+  "mcpName": "io.github.standby/mcp-server-chart",
+  "version": "0.9.10",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    "./sdk": "./build/sdk.js"
+  },
+  "scripts": {
+    "prebuild": "rm -rf build/*",
+    "build": "tsc && tsc-alias -p tsconfig.json",
+    "postbuild": "chmod +x build/index.js",
+    "start": "npx @modelcontextprotocol/inspector node build/index.js",
+    "prepare": "husky && npm run build",
+    "prepublishOnly": "npm run build",
+    "test": "vitest"
+  },
+  "lint-staged": {
+    "*.{ts,js,json}": [
+      "biome check --write",
+      "biome format --write",
+      "biome lint"
+    ]
+  },
+  "bin": {
+    "mcp-server-chart": "./build/index.js"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "files": ["build"],
+  "keywords": ["antv", "mcp", "data-visualization", "chart", "graph", "map"],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/standby/mcp-server-chart"
+  },
+  "author": {
+    "name": "Stephen",
+    "url": "https://github.com/standby/mcp-server-chart"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@antv/g2-ssr": "^0.2.0",
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@modelcontextprotocol/inspector": "^0.16.6",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.3",
+    "@types/node": "^22.15.21",
+    "@vitest/coverage-v8": "3.2.4",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.2",
+    "ts-node": "^10.9.2",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.4"
+  }
+}