@antv/infographic 0.2.6 → 0.2.8

package/esm/syntax/parser.js

@@ -23,6 +23,9 @@ function getIndentInfo(line) {
 function stripComments(content) {
     return content.trimEnd();
 }
+function looksLikeRelationExpression(text) {
+    return /[<>=o.x-]{2,}/.test(text);
+}
 function parseKeyValue(raw) {
     const text = raw.trim();
     if (!text)
@@ -105,6 +108,47 @@ export function parseSyntaxToAst(input) {
             });
             return;
         }
+        if (parentFrame.key === 'relations' &&
+            !trimmed.startsWith('-') &&
+            looksLikeRelationExpression(trimmed)) {
+            if (parentNode.kind !== 'array') {
+                if (parentNode.kind === 'object' &&
+                    Object.keys(parentNode.entries).length === 0 &&
+                    parentNode.value === undefined &&
+                    parentFrame.parent &&
+                    parentFrame.key) {
+                    const arrayNode = createArrayNode(parentNode.line);
+                    if (parentFrame.parent.kind === 'object') {
+                        parentFrame.parent.entries[parentFrame.key] = arrayNode;
+                    }
+                    else if (parentFrame.parent.kind === 'array') {
+                        const indexInParent = parentFrame.parent.items.indexOf(parentNode);
+                        if (indexInParent >= 0)
+                            parentFrame.parent.items[indexInParent] = arrayNode;
+                    }
+                    parentFrame.node = arrayNode;
+                    parentNode = arrayNode;
+                }
+                else {
+                    errors.push({
+                        path: '',
+                        line: lineNumber,
+                        code: 'bad_list',
+                        message: 'List item is not under an array container.',
+                        raw: trimmed,
+                    });
+                    return;
+                }
+            }
+            const itemNode = createObjectNode(lineNumber, trimmed);
+            parentNode.items.push(itemNode);
+            stack.push({
+                indent,
+                node: itemNode,
+                parent: parentNode,
+            });
+            return;
+        }
         const parsed = parseKeyValue(trimmed);
         if (!parsed) {
             errors.push({

package/esm/syntax/relations.d.ts

@@ -0,0 +1,6 @@
+import type { ItemDatum, RelationDatum } from '../types';
+import type { SyntaxError, SyntaxNode } from './types';
+export declare function parseRelationsNode(node: SyntaxNode, errors: SyntaxError[], path: string): {
+    relations: RelationDatum[];
+    items: ItemDatum[];
+};

package/esm/syntax/relations.js

@@ -0,0 +1,251 @@
+import { mapWithSchema } from './mapper';
+import { RelationSchema } from './schema';
+const RELATION_TOKEN = /[<>=o.x-]{2,}/;
+const ARROW_TOKEN = /[<>=o.x-]{2,}/g;
+function normalizeLabel(text) {
+    let label = text.trim();
+    if (!label)
+        return '';
+    const first = label[0];
+    const last = label[label.length - 1];
+    if ((first === '"' && last === '"') || (first === "'" && last === "'")) {
+        label = label.slice(1, -1);
+    }
+    label = label
+        .replace(/\\(["'])/g, '$1')
+        .replace(/(&quot;|&#quot;|#quot;)/g, '"')
+        .replace(/(&apos;|&#39;|#apos;)/g, "'");
+    return label.trim();
+}
+function stripEdgeLabelPrefix(text) {
+    const trimmed = text
+        .trim()
+        .replace(/^[-=.ox]+/, '')
+        .trim();
+    return normalizeLabel(trimmed);
+}
+function skipSpaces(text, index) {
+    let cursor = index;
+    while (cursor < text.length && /\s/.test(text[cursor])) {
+        cursor += 1;
+    }
+    return cursor;
+}
+function readNode(text, startIndex) {
+    let index = skipSpaces(text, startIndex);
+    if (index >= text.length)
+        return null;
+    const idStart = index;
+    while (index < text.length) {
+        const char = text[index];
+        if (/\s/.test(char) ||
+            char === '[' ||
+            char === '(' ||
+            char === '@' ||
+            char === '|' ||
+            char === '<' ||
+            char === '>') {
+            break;
+        }
+        if (char === '-' &&
+            (text[index + 1] === '-' ||
+                text[index + 1] === '>' ||
+                text[index + 1] === '<')) {
+            break;
+        }
+        index += 1;
+    }
+    if (index === idStart)
+        return null;
+    const id = text.slice(idStart, index).trim();
+    if (!id)
+        return null;
+    if (text.startsWith('@{', index)) {
+        const braceEnd = text.indexOf('}', index + 2);
+        if (braceEnd !== -1) {
+            index = braceEnd + 1;
+        }
+    }
+    index = skipSpaces(text, index);
+    let label;
+    if (text[index] === '[') {
+        const end = text.indexOf(']', index + 1);
+        if (end !== -1) {
+            label = normalizeLabel(text.slice(index + 1, end));
+            index = end + 1;
+        }
+    }
+    else if (text[index] === '(') {
+        const end = text.indexOf(')', index + 1);
+        if (end !== -1) {
+            let content = text.slice(index + 1, end).trim();
+            if (content.startsWith('[') && content.endsWith(']')) {
+                content = content.slice(1, -1).trim();
+            }
+            label = normalizeLabel(content);
+            index = end + 1;
+        }
+    }
+    return {
+        node: { id, label },
+        nextIndex: index,
+    };
+}
+function readEdge(text, startIndex) {
+    ARROW_TOKEN.lastIndex = startIndex;
+    const match = ARROW_TOKEN.exec(text);
+    if (!match)
+        return null;
+    const arrowToken = match[0];
+    const arrowStart = match.index;
+    const arrowEnd = arrowStart + arrowToken.length;
+    const labelPrefix = stripEdgeLabelPrefix(text.slice(startIndex, arrowStart));
+    let label = labelPrefix || undefined;
+    let directionToken = arrowToken;
+    let index = arrowEnd;
+    index = skipSpaces(text, index);
+    if (text[index] === '|') {
+        const pipeEnd = text.indexOf('|', index + 1);
+        if (pipeEnd !== -1) {
+            const pipeLabel = normalizeLabel(text.slice(index + 1, pipeEnd));
+            label = pipeLabel || label;
+            index = pipeEnd + 1;
+            const afterLabel = skipSpaces(text, index);
+            ARROW_TOKEN.lastIndex = afterLabel;
+            const tail = ARROW_TOKEN.exec(text);
+            if (tail && tail.index === afterLabel) {
+                directionToken += tail[0];
+                index = tail.index + tail[0].length;
+            }
+            else {
+                index = afterLabel;
+            }
+        }
+    }
+    const hasLeft = directionToken.includes('<');
+    const hasRight = directionToken.includes('>');
+    const markerMatch = directionToken.match(/[xo]/gi) || [];
+    const markerLeft = /^[xo]/i.test(directionToken);
+    const markerRight = /[xo]$/i.test(directionToken);
+    let direction = 'none';
+    let reverse = false;
+    if ((hasLeft && hasRight) ||
+        (hasLeft && markerRight) ||
+        (hasRight && markerLeft) ||
+        (markerLeft && markerRight)) {
+        direction = 'both';
+    }
+    else if (hasLeft || hasRight || markerMatch.length > 0) {
+        direction = 'forward';
+        reverse = hasLeft && !hasRight;
+    }
+    return { label, direction, reverse, nextIndex: index };
+}
+function parseRelationLine(text) {
+    const relations = [];
+    const nodes = [];
+    const nodeMap = new Map();
+    let index = 0;
+    const first = readNode(text, index);
+    if (!first)
+        return { relations, nodes };
+    let current = first.node;
+    if (!nodeMap.has(current.id)) {
+        nodeMap.set(current.id, current);
+        nodes.push(current);
+    }
+    index = first.nextIndex;
+    while (index < text.length) {
+        const edge = readEdge(text, index);
+        if (!edge)
+            break;
+        index = edge.nextIndex;
+        const nextNode = readNode(text, index);
+        if (!nextNode)
+            break;
+        index = nextNode.nextIndex;
+        let from = current.id;
+        let to = nextNode.node.id;
+        const direction = edge.direction;
+        if (edge.reverse) {
+            from = nextNode.node.id;
+            to = current.id;
+        }
+        const relation = {
+            from,
+            to,
+        };
+        if (edge.label)
+            relation.label = edge.label;
+        if (direction === 'both')
+            relation.direction = 'both';
+        if (direction === 'none')
+            relation.direction = 'none';
+        relations.push(relation);
+        if (!nodeMap.has(current.id)) {
+            nodeMap.set(current.id, current);
+            nodes.push(current);
+        }
+        if (!nodeMap.has(nextNode.node.id)) {
+            nodeMap.set(nextNode.node.id, nextNode.node);
+            nodes.push(nextNode.node);
+        }
+        current = nextNode.node;
+    }
+    return { relations, nodes };
+}
+function ensureItemLabel(items, list, id, label) {
+    if (!id)
+        return;
+    const existing = items.get(id);
+    if (existing) {
+        if (!existing.label && label)
+            existing.label = label;
+        return;
+    }
+    const item = { id, label: label || id };
+    items.set(id, item);
+    list.push(item);
+}
+function parseExplicitRelation(node, path, errors) {
+    const value = mapWithSchema(node, RelationSchema, path, errors);
+    if (!value || typeof value !== 'object')
+        return null;
+    if (typeof value.from !== 'string' || typeof value.to !== 'string') {
+        return null;
+    }
+    return value;
+}
+export function parseRelationsNode(node, errors, path) {
+    const relations = [];
+    const items = [];
+    const itemMap = new Map();
+    const parseLine = (line) => {
+        if (!RELATION_TOKEN.test(line))
+            return;
+        const parsed = parseRelationLine(line);
+        parsed.nodes.forEach((nodeItem) => {
+            ensureItemLabel(itemMap, items, nodeItem.id, nodeItem.label);
+        });
+        relations.push(...parsed.relations);
+    };
+    if (node.kind === 'array') {
+        node.items.forEach((item, index) => {
+            if (item.kind === 'object' &&
+                item.value &&
+                Object.keys(item.entries).length === 0 &&
+                RELATION_TOKEN.test(item.value)) {
+                parseLine(item.value);
+                return;
+            }
+            const relation = parseExplicitRelation(item, `${path}[${index}]`, errors);
+            if (relation) {
+                relations.push(relation);
+            }
+        });
+    }
+    else if (node.kind === 'object' && node.value) {
+        parseLine(node.value);
+    }
+    return { relations, items };
+}

package/esm/syntax/schema.d.ts

@@ -1,4 +1,5 @@
 import type { ObjectSchema } from './types';
+export declare const RelationSchema: ObjectSchema;
 export declare const ThemeSchema: ObjectSchema;
 export declare const DesignSchema: ObjectSchema;
 export declare const DataSchema: ObjectSchema;

package/esm/syntax/schema.js

@@ -30,12 +30,23 @@ const textStyleSchema = object(nullableColorFields, { allowUnknown: true });
 const shapeStyleSchema = object(nullableColorFields, { allowUnknown: true });
 const itemDatumSchema = object({}, { allowUnknown: true });
 itemDatumSchema.fields = {
+    id: string(),
     label: string(),
     value: union(number(), string()),
     desc: string(),
     icon: string(),
+    group: string(),
     children: array(itemDatumSchema),
 };
+export const RelationSchema = object({
+    id: string(),
+    from: string(),
+    to: string(),
+    label: string(),
+    direction: enumOf(['forward', 'both', 'none']),
+    showArrow: enumOf(['true', 'false']),
+    arrowType: enumOf(['arrow', 'triangle', 'diamond']),
+}, { allowUnknown: true });
 export const ThemeSchema = object({
     type: string(),
     colorBg: color(),
@@ -80,6 +91,7 @@ export const DataSchema = object({
     title: string(),
     desc: string(),
     items: array(itemDatumSchema),
+    relations: array(RelationSchema),
 });
 export const TemplateSchema = object({
     type: string(),

package/esm/templates/built-in.js

@@ -3,6 +3,7 @@ import { hierarchyStructureTemplates } from './hierarchy-structure';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { listZigzagTemplates } from './list-zigzag';
 import { registerTemplate } from './registry';
+import { relationDagreFlowTemplates } from './relation-dagre-flow';
 import { sequenceStairsTemplates } from './sequence-stairs';
 import { wordCloudTemplate } from './word-cloud';
 const BUILT_IN_TEMPLATES = {
@@ -308,6 +309,16 @@ const BUILT_IN_TEMPLATES = {
             colorPrimary: '#1677ff',
         },
     },
+    'sequence-funnel-simple': {
+        design: {
+            title: 'default',
+            structure: { type: 'sequence-funnel' },
+            items: [{ type: 'simple', showIcon: false, usePaletteColor: true }],
+        },
+        themeConfig: {
+            palette: '#1677ff',
+        },
+    },
     'list-row-horizontal-icon-line': {
         design: {
             title: 'default',
@@ -808,6 +819,7 @@ const BUILT_IN_TEMPLATES = {
     ...sequenceStairsTemplates,
     ...wordCloudTemplate,
     ...listZigzagTemplates,
+    ...relationDagreFlowTemplates,
     ...hierarchyStructureTemplates,
 };
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {

package/esm/templates/relation-dagre-flow.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateOptions } from './types';
+export declare const relationDagreFlowTemplates: Record<string, TemplateOptions>;

package/esm/templates/relation-dagre-flow.js

@@ -0,0 +1,68 @@
+const items = {
+    'simple-circle-node': {
+        type: 'simple-circle-node',
+    },
+    'badge-card': {
+        type: 'badge-card',
+    },
+    capsule: {
+        type: 'capsule-item',
+    },
+    'compact-card': {
+        type: 'compact-card',
+    },
+};
+const baseStructureAttrs = {
+    type: 'relation-dagre-flow',
+    edgeColorMode: 'gradient',
+    showArrow: true,
+    arrowType: 'triangle',
+    colorMode: 'node',
+};
+const structures = {
+    tb: {
+        ...baseStructureAttrs,
+        rankdir: 'TB',
+        edgeRouting: 'orth',
+    },
+    lr: {
+        ...baseStructureAttrs,
+        rankdir: 'LR',
+        edgeRouting: 'orth',
+    },
+    'tb-animated': {
+        ...baseStructureAttrs,
+        rankdir: 'TB',
+        edgeCornerRadius: 12,
+        edgeRouting: 'orth',
+        edgeAnimation: 'ant-line',
+        edgeDashPattern: '8,4',
+        edgeAnimationSpeed: 1,
+    },
+    'lr-animated': {
+        ...baseStructureAttrs,
+        rankdir: 'LR',
+        edgeCornerRadius: 12,
+        edgeRouting: 'orth',
+        edgeAnimation: 'ant-line',
+        edgeDashPattern: '8,4',
+        edgeAnimationSpeed: 1,
+    },
+};
+export const relationDagreFlowTemplates = {};
+const omit = ['lr-capsule', 'tb-capsule'];
+Object.entries(structures).forEach(([strKey, strAttrs]) => {
+    Object.entries(items).forEach(([itemKey, itemAttrs]) => {
+        const appendix = `${strKey}-${itemKey}`;
+        if (omit.includes(appendix))
+            return;
+        const templateKey = `relation-dagre-flow-${appendix}`;
+        relationDagreFlowTemplates[templateKey] = {
+            design: {
+                title: 'default',
+                structure: strAttrs,
+                item: itemAttrs,
+            },
+        };
+    });
+});

package/esm/types/data.d.ts

@@ -1,18 +1,39 @@
 import type { ResourceConfig } from '../resource';
-export interface ItemDatum {
+export interface BaseDatum {
+    id?: string;
     icon?: string | ResourceConfig;
     label?: string;
     desc?: string;
     value?: number;
-    illus?: string | ResourceConfig;
-    children?: ItemDatum[];
     attributes?: Record<string, object>;
     [key: string]: any;
 }
+export interface ItemDatum extends BaseDatum {
+    illus?: string | ResourceConfig;
+    /** for hierarchical structure */
+    children?: ItemDatum[];
+    /** 图布局中用于分组，相同的 group 会使用同样的颜色 */
+    group?: string;
+}
+export interface RelationDatum extends BaseDatum {
+    id?: string;
+    from: string;
+    to: string;
+    /**
+     * 表示连线的方向，默认 'forward'
+     * - 'forward'：单向，从 from 指向 to
+     * - 'both'：双向
+     * - 'none'：无方向
+     */
+    direction?: 'forward' | 'both' | 'none';
+    showArrow?: boolean;
+    arrowType?: 'arrow' | 'triangle' | 'diamond';
+}
 export interface Data {
     title?: string;
     desc?: string;
     items: ItemDatum[];
+    relations?: RelationDatum[];
     illus?: Record<string, string | ResourceConfig>;
     attributes?: Record<string, object>;
     [key: string]: any;

package/esm/utils/data.js

@@ -1,4 +1,4 @@
-import get from 'lodash-es/get';
+import { get } from 'lodash-es';
 /**
  * 根据 indexesKey 获取数据项
  */

package/esm/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './font';
 export * from './get-types';
 export * from './hash';
 export * from './icon';
+export * from './is-node';
 export * from './item';
 export * from './join';
 export * from './measure-text';

package/esm/utils/index.js

@@ -8,6 +8,7 @@ export * from './font';
 export * from './get-types';
 export * from './hash';
 export * from './icon';
+export * from './is-node';
 export * from './item';
 export * from './join';
 export * from './measure-text';

package/esm/utils/is-browser.js

@@ -1,15 +1,12 @@
-let _isBrowser;
+let IS_BROWSER;
 export function isBrowser() {
-    if (_isBrowser !== undefined) {
-        return _isBrowser;
-    }
+    if (IS_BROWSER)
+        return true;
     if (typeof window === 'undefined' || typeof document === 'undefined') {
-        _isBrowser = false;
         return false;
     }
     const body = document.body;
     if (!body) {
-        _isBrowser = false;
         return false;
     }
     let hasRealLayout = false;
@@ -40,7 +37,6 @@ export function isBrowser() {
         hasRealLayout = false;
     }
     if (!hasRealLayout) {
-        _isBrowser = false;
         return false;
     }
     let hasRealCanvas = false;
@@ -50,7 +46,6 @@ export function isBrowser() {
         canvas.height = 50;
         const ctx = canvas.getContext('2d');
         if (!ctx) {
-            _isBrowser = false;
             return false;
         }
         ctx.font = '20px sans-serif';
@@ -63,6 +58,7 @@ export function isBrowser() {
     catch {
         hasRealCanvas = false;
     }
-    _isBrowser = hasRealCanvas;
+    if (hasRealCanvas)
+        IS_BROWSER = hasRealCanvas;
     return hasRealCanvas;
 }

package/esm/utils/measure-text.d.ts

@@ -1,6 +1,6 @@
-import { TextProps } from '../jsx';
+import { JSXNode, TextProps } from '../jsx';
 export declare const setFontExtendFactor: (factor: number) => void;
-export declare function measureText(text: string | number | undefined, attrs: TextProps): {
+export declare function measureText(text: JSXNode, attrs: TextProps): {
     width: number;
     height: number;
 };

package/esm/utils/measure-text.js

@@ -3,14 +3,11 @@ import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
 import { DEFAULT_FONT } from '../renderer';
 import { encodeFontFamily } from './font';
 import { isBrowser } from './is-browser';
-import { isNode } from './is-node';
 let FONT_EXTEND_FACTOR = 1.01;
 export const setFontExtendFactor = (factor) => {
     FONT_EXTEND_FACTOR = factor;
 };
-if (isNode) {
-    registerFont(AlibabaPuHuiTi);
-}
+registerFont(AlibabaPuHuiTi);
 let canvasContext = null;
 let measureSpan = null;
 function getCanvasContext() {
@@ -84,6 +81,9 @@ export function measureText(text = '', attrs) {
     if (attrs.width && attrs.height) {
         return { width: attrs.width, height: attrs.height };
     }
+    if (typeof text !== 'string' && typeof text !== 'number') {
+        return { width: 0, height: 0 };
+    }
     const { fontFamily = DEFAULT_FONT, fontSize = 14, fontWeight = 'normal', lineHeight = 1.4, } = attrs;
     const content = text.toString();
     const options = {

package/esm/utils/padding.js

@@ -30,22 +30,27 @@ export function setSVGPadding(svg, padding) {
             setSVGPaddingInBrowser(svg, padding);
         }
         else {
-            const observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
-                    mutation.addedNodes.forEach((node) => {
-                        if (node === svg || node.contains(svg)) {
-                            waitForLayout(svg, () => {
-                                setSVGPaddingInBrowser(svg, padding);
-                            });
-                            observer.disconnect();
-                        }
+            try {
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        mutation.addedNodes.forEach((node) => {
+                            if (node === svg || node.contains(svg)) {
+                                waitForLayout(svg, () => {
+                                    setSVGPaddingInBrowser(svg, padding);
+                                });
+                                observer.disconnect();
+                            }
+                        });
                     });
                 });
-            });
-            observer.observe(document, {
-                childList: true,
-                subtree: true,
-            });
+                observer.observe(document, {
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            catch {
+                setSVGPaddingInNode(svg, padding);
+            }
         }
     }
 }