@antv/infographic 0.1.3 → 0.1.4

package/esm/syntax/schema.js

@@ -0,0 +1,74 @@
+const string = () => ({ kind: 'string' });
+const number = () => ({ kind: 'number' });
+// const boolean = (): SchemaNode => ({ kind: 'boolean' });
+const enumOf = (values) => ({ kind: 'enum', values });
+const array = (item, split = 'any') => ({
+    kind: 'array',
+    item,
+    split,
+});
+const object = (fields, options = {}) => ({
+    kind: 'object',
+    fields,
+    allowUnknown: options.allowUnknown,
+    shorthandKey: options.shorthandKey,
+});
+const union = (...variants) => ({
+    kind: 'union',
+    variants,
+});
+const itemDatumSchema = object({});
+itemDatumSchema.fields = {
+    label: string(),
+    value: union(number(), string()),
+    desc: string(),
+    icon: string(),
+    children: array(itemDatumSchema),
+};
+export const ThemeSchema = object({
+    type: string(),
+    colorBg: string(),
+    colorPrimary: string(),
+    palette: array(string(), 'any'),
+    title: object({}, { allowUnknown: true }),
+    desc: object({}, { allowUnknown: true }),
+    base: object({
+        global: object({}, { allowUnknown: true }),
+        shape: object({}, { allowUnknown: true }),
+        text: object({}, { allowUnknown: true }),
+    }),
+    stylize: object({
+        type: enumOf(['rough', 'pattern']),
+        roughness: number(),
+        bowing: number(),
+        fillWeight: number(),
+        hachureGap: number(),
+        pattern: string(),
+        backgroundColor: string(),
+        foregroundColor: string(),
+        scale: number(),
+    }, { shorthandKey: 'type' }),
+}, { shorthandKey: 'type' });
+const designNodeSchema = object({}, { allowUnknown: true, shorthandKey: 'type' });
+export const DesignSchema = object({
+    structure: designNodeSchema,
+    item: designNodeSchema,
+    items: array(designNodeSchema),
+    title: designNodeSchema,
+});
+export const DataSchema = object({
+    title: string(),
+    desc: string(),
+    items: array(itemDatumSchema),
+});
+export const TemplateSchema = object({
+    type: string(),
+}, { shorthandKey: 'type' });
+export const RootSchema = object({
+    template: TemplateSchema,
+    design: DesignSchema,
+    data: DataSchema,
+    theme: ThemeSchema,
+    width: union(number(), string()),
+    height: union(number(), string()),
+});

package/esm/syntax/types.d.ts

@@ -0,0 +1,61 @@
+import type { InfographicOptions } from '../options';
+export type SyntaxNode = ValueNode | ObjectNode | ArrayNode;
+export interface ValueNode {
+    kind: 'value';
+    line: number;
+    value: string;
+}
+export interface ObjectNode {
+    kind: 'object';
+    line: number;
+    value?: string;
+    entries: Record<string, SyntaxNode>;
+}
+export interface ArrayNode {
+    kind: 'array';
+    line: number;
+    items: SyntaxNode[];
+}
+export type SyntaxErrorCode = 'unknown_key' | 'schema_mismatch' | 'invalid_value' | 'bad_indent' | 'bad_list' | 'bad_syntax';
+export interface SyntaxError {
+    path: string;
+    line: number;
+    code: SyntaxErrorCode;
+    message: string;
+    raw?: string;
+}
+export interface SyntaxParseResult {
+    options: Partial<InfographicOptions>;
+    errors: SyntaxError[];
+    warnings: SyntaxError[];
+    ast?: ObjectNode;
+}
+export type SchemaNode = StringSchema | NumberSchema | BooleanSchema | EnumSchema | ArraySchema | ObjectSchema | UnionSchema;
+export interface StringSchema {
+    kind: 'string';
+}
+export interface NumberSchema {
+    kind: 'number';
+}
+export interface BooleanSchema {
+    kind: 'boolean';
+}
+export interface EnumSchema {
+    kind: 'enum';
+    values: string[];
+}
+export interface ArraySchema {
+    kind: 'array';
+    item: SchemaNode;
+    split?: 'space' | 'comma' | 'any';
+}
+export interface ObjectSchema {
+    kind: 'object';
+    fields: Record<string, SchemaNode>;
+    allowUnknown?: boolean;
+    shorthandKey?: string;
+}
+export interface UnionSchema {
+    kind: 'union';
+    variants: SchemaNode[];
+}

package/esm/syntax/types.js

@@ -0,0 +1 @@
+export {};

package/esm/templates/built-in.js

@@ -1,6 +1,8 @@
 import { hierarchyMindmapTemplates } from './hierarchy-mindmap';
 import { hierarchyTreeTemplates } from './hierarchy-tree';
 import { registerTemplate } from './registry';
+import { sequenceStairsTemplates } from './sequence-stairs';
+import { wordCloudTemplate } from './word-cloud';
 const BUILT_IN_TEMPLATES = {
     'compare-hierarchy-left-right-circle-node-pill-badge': {
         design: {
@@ -801,6 +803,8 @@ const BUILT_IN_TEMPLATES = {
     },
     ...hierarchyTreeTemplates,
     ...hierarchyMindmapTemplates,
+    ...sequenceStairsTemplates,
+    ...wordCloudTemplate,
 };
 Object.entries(BUILT_IN_TEMPLATES).forEach(([name, options]) => {
     registerTemplate(name, options);

package/esm/templates/hierarchy-tree.js

@@ -47,19 +47,33 @@ const items = [
 ];
 export const hierarchyTreeTemplates = {};
 const structureName = 'hierarchy-tree';
+const orientationConfigs = [
+    { key: '' },
+    { key: 'bt', orientation: 'bottom-top' },
+    { key: 'lr', orientation: 'left-right' },
+    { key: 'rl', orientation: 'right-left' },
+];
+const createTemplateName = (oriKey, name, item) => {
+    return oriKey
+        ? `${structureName}-${oriKey}-${name}-${item}`
+        : `${structureName}-${name}-${item}`;
+};
 for (const item of items) {
     for (const [name, structureProps] of Object.entries(structures)) {
-        const templateName = `${structureName}-${name}-${item}`;
-        hierarchyTreeTemplates[templateName] = {
-            design: {
-                structure: {
-                    type: 'hierarchy-tree',
-                    ...structureProps,
-                },
-                item: {
-                    type: item,
+        for (const { key, orientation } of orientationConfigs) {
+            const templateName = createTemplateName(key, name, item);
+            hierarchyTreeTemplates[templateName] = {
+                design: {
+                    structure: {
+                        type: 'hierarchy-tree',
+                        ...(orientation ? { orientation } : {}),
+                        ...structureProps,
+                    },
+                    item: {
+                        type: item,
+                    },
                 },
-            },
-        };
+            };
+        }
     }
 }

package/esm/templates/sequence-stairs.d.ts

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

package/esm/templates/sequence-stairs.js

@@ -0,0 +1,42 @@
+export const sequenceStairsTemplates = {
+    'sequence-stairs-front-pill-badge': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'sequence-stairs-front',
+            },
+            items: [
+                {
+                    type: 'pill-badge',
+                },
+            ],
+        },
+    },
+    'sequence-stairs-front-compact-card': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'sequence-stairs-front',
+            },
+            items: [
+                {
+                    type: 'compact-card',
+                },
+            ],
+        },
+    },
+    'sequence-stairs-front-simple': {
+        design: {
+            title: 'default',
+            structure: {
+                type: 'sequence-stairs-front',
+            },
+            items: [
+                {
+                    type: 'simple',
+                    usePaletteColor: true,
+                },
+            ],
+        },
+    },
+};

package/esm/templates/word-cloud.d.ts

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

package/esm/templates/word-cloud.js

@@ -0,0 +1,19 @@
+export const wordCloudTemplate = {
+    'chart-wordcloud-rotate': {
+        design: {
+            structure: {
+                type: 'chart-wordcloud',
+            },
+            item: 'simple',
+        },
+    },
+    'chart-wordcloud': {
+        design: {
+            structure: {
+                type: 'chart-wordcloud',
+                enableRotate: false,
+            },
+            item: 'simple',
+        },
+    },
+};

package/esm/themes/types.d.ts

@@ -20,7 +20,7 @@ export interface ThemeConfig {
     palette?: Palette;
     title?: TextAttributes;
     desc?: TextAttributes;
-    shape?: TextAttributes;
+    shape?: ShapeAttributes;
     item?: {
         icon?: DynamicAttributes<IconAttributes>;
         label?: DynamicAttributes<TextAttributes>;

package/esm/utils/design.d.ts

@@ -0,0 +1,2 @@
+import type { NullableParsedDesignsOptions, ParsedDesignsOptions } from '../designs';
+export declare function isNonNullableParsedDesignsOptions(options: NullableParsedDesignsOptions): options is ParsedDesignsOptions;

package/esm/utils/design.js

@@ -0,0 +1,10 @@
+export function isNonNullableParsedDesignsOptions(options) {
+    const { structure, item, items } = options;
+    if (!structure)
+        return false;
+    if (!item)
+        return false;
+    if (items.some((it) => !it))
+        return false;
+    return true;
+}

package/esm/utils/font.js

@@ -13,21 +13,31 @@ export function encodeFontFamily(font) {
 const FontWeightNameMap = {
     '100': 'thin',
     hairline: 'thin',
+    thin: 'thin',
     '200': 'extralight',
     ultralight: 'extralight',
+    extralight: 'extralight',
     '300': 'light',
+    light: 'light',
     '400': 'regular',
     normal: 'regular',
+    regular: 'regular',
     '500': 'medium',
+    medium: 'medium',
     '600': 'semibold',
     demibold: 'semibold',
+    semibold: 'semibold',
     '700': 'bold',
+    bold: 'bold',
     '800': 'extrabold',
-    ultrabold: 'bold',
+    ultrabold: 'extrabold',
+    extrabold: 'extrabold',
     '900': 'black',
     heavy: 'black',
+    black: 'black',
     '950': 'extrablack',
     ultrablack: 'extrablack',
+    extrablack: 'extrablack',
 };
 export function normalizeFontWeightName(fontWeight) {
     const key = String(fontWeight).toLowerCase();

package/esm/utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './attrs';
 export * from './color';
 export * from './data';
+export * from './design';
 export * from './element';
 export * from './font';
 export * from './get-types';

package/esm/utils/index.js

@@ -1,6 +1,7 @@
 export * from './attrs';
 export * from './color';
 export * from './data';
+export * from './design';
 export * from './element';
 export * from './font';
 export * from './get-types';

package/lib/constants/element.d.ts

@@ -11,7 +11,7 @@ export declare const enum ElementTypeEnum {
     ItemLabel = "item-label",
     ItemDesc = "item-desc",
     ItemValue = "item-value",
-    ItemsIllus = "items-illus",
+    ItemIllus = "item-illus",
     BtnAdd = "btn-add",
     BtnRemove = "btn-remove",
     IllusGroup = "illus-group",

package/lib/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './element';
+export * from './service';
 export * from './shape';

package/lib/constants/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components"), exports);
 __exportStar(require("./element"), exports);
+__exportStar(require("./service"), exports);
 __exportStar(require("./shape"), exports);

package/lib/constants/service.d.ts

@@ -0,0 +1 @@
+export declare const ICON_SERVICE_URL = "https://www.weavefox.cn/api/open/v1/icon";

package/lib/constants/service.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SERVICE_URL = void 0;
+exports.ICON_SERVICE_URL = 'https://www.weavefox.cn/api/open/v1/icon';

package/lib/designs/components/Illus.js

@@ -10,7 +10,7 @@ const Illus = ({ indexes, ...props }) => {
     const finalProps = { ...defaultProps, ...props };
     if (indexes) {
         finalProps['data-indexes'] = indexes;
-        finalProps['data-element-type'] = "items-illus" /* ElementTypeEnum.ItemsIllus */;
+        finalProps['data-element-type'] = "item-illus" /* ElementTypeEnum.ItemIllus */;
     }
     else {
         finalProps['data-element-type'] = "illus" /* ElementTypeEnum.Illus */;

package/lib/designs/structures/chart-wordcloud.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType } from '../../jsx';
+import type { BaseStructureProps } from './types';
+export interface ChartWordCloudProps extends BaseStructureProps {
+    minFontSize?: number;
+    maxFontSize?: number;
+    enableRotate?: boolean;
+    padding?: number;
+    spiralStep?: number;
+    radiusStep?: number;
+}
+export declare const ChartWordCloud: ComponentType<ChartWordCloudProps>;

package/lib/designs/structures/chart-wordcloud.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartWordCloud = void 0;
+const jsx_runtime_1 = require("@antv/infographic/jsx-runtime");
+const jsx_1 = require("../../jsx");
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const DEFAULT_ROTATE_ANGLES = [0, 30, -30, 60, -60];
+const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
+function getRotatedSize(width, height, angle) {
+    const rad = (Math.PI / 180) * angle;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return {
+        width: Math.abs(width * cos) + Math.abs(height * sin),
+        height: Math.abs(width * sin) + Math.abs(height * cos),
+    };
+}
+function hasCollision(x, y, width, height, placed, padding) {
+    const left = x - padding;
+    const right = x + width + padding;
+    const top = y - padding;
+    const bottom = y + height + padding;
+    return placed.some((word) => {
+        const wLeft = word.box.x - padding;
+        const wRight = word.box.x + word.box.width + padding;
+        const wTop = word.box.y - padding;
+        const wBottom = word.box.y + word.box.height + padding;
+        return !(right <= wLeft ||
+            left >= wRight ||
+            bottom <= wTop ||
+            top >= wBottom);
+    });
+}
+function placeWords(words, enableRotate, padding, spiralStep, radiusStep) {
+    const placed = [];
+    const rotationAngles = enableRotate ? DEFAULT_ROTATE_ANGLES : [0];
+    const maxAttempts = Math.max(1600, words.length * 28);
+    words.forEach((word, wordIndex) => {
+        const sizeBias = Math.max(word.width, word.height);
+        const angleOffset = wordIndex * GOLDEN_ANGLE;
+        let extraRadius = 0;
+        let placedWord = null;
+        for (let attempt = 0; attempt < maxAttempts && !placedWord; attempt++) {
+            if (attempt === Math.floor(maxAttempts * 0.6)) {
+                // Gradually expand the search radius for dense layouts
+                extraRadius = sizeBias;
+            }
+            const theta = angleOffset + attempt * spiralStep;
+            const radius = radiusStep * Math.sqrt(attempt + 1) + extraRadius + sizeBias * 0.25;
+            const centerX = radius * Math.cos(theta);
+            const centerY = radius * Math.sin(theta);
+            for (const angle of rotationAngles) {
+                const rotated = getRotatedSize(word.width, word.height, angle);
+                const x = centerX - rotated.width / 2;
+                const y = centerY - rotated.height / 2;
+                if (!hasCollision(x, y, rotated.width, rotated.height, placed, padding)) {
+                    placedWord = {
+                        ...word,
+                        angle,
+                        centerX,
+                        centerY,
+                        box: { x, y, width: rotated.width, height: rotated.height },
+                    };
+                    break;
+                }
+            }
+        }
+        if (!placedWord) {
+            const fallbackAngle = rotationAngles[wordIndex % rotationAngles.length];
+            const farRadius = radiusStep * Math.sqrt(maxAttempts + 1) + sizeBias;
+            const theta = angleOffset;
+            const centerX = farRadius * Math.cos(theta);
+            const centerY = farRadius * Math.sin(theta);
+            const rotated = getRotatedSize(word.width, word.height, fallbackAngle);
+            placedWord = {
+                ...word,
+                angle: fallbackAngle,
+                centerX,
+                centerY,
+                box: {
+                    x: centerX - rotated.width / 2,
+                    y: centerY - rotated.height / 2,
+                    width: rotated.width,
+                    height: rotated.height,
+                },
+            };
+        }
+        placed.push(placedWord);
+    });
+    return placed;
+}
+const ChartWordCloud = (props) => {
+    const { data, options, minFontSize = 16, maxFontSize = 48, enableRotate = true, padding = 6, spiralStep = 0.45, radiusStep = 10, } = props;
+    const { items = [] } = data;
+    const validItems = items
+        .map((datum, index) => ({ datum, index }))
+        .filter(({ datum }) => datum.label);
+    if (validItems.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(layouts_1.FlexLayout, { id: "infographic-container", flexDirection: "column", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(jsx_1.Group, { children: (0, jsx_runtime_1.jsx)(components_1.ItemsGroup, {}) }) }));
+    }
+    const values = validItems
+        .map(({ datum }) => datum.value)
+        .filter((v) => typeof v === 'number');
+    const hasValues = values.length > 0;
+    const minValue = hasValues ? Math.min(...values) : 0;
+    const maxValue = hasValues ? Math.max(...values) : 0;
+    const sameValue = hasValues && minValue === maxValue;
+    const uniformSize = (minFontSize + maxFontSize) / 2;
+    const mapFontSize = (value) => {
+        if (!hasValues || sameValue)
+            return uniformSize;
+        if (value == null)
+            return minFontSize;
+        const ratio = (value - minValue) / (maxValue - minValue || 1);
+        return minFontSize + ratio * (maxFontSize - minFontSize);
+    };
+    const words = validItems
+        .map(({ datum, index }) => {
+        const fontSize = mapFontSize(datum.value);
+        const measured = (0, jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(jsx_1.Text, { fontSize: fontSize, fontWeight: "bold", children: datum.label }));
+        const color = (0, utils_1.getPaletteColor)(options, [index]) ||
+            (0, utils_1.getColorPrimary)(options) ||
+            '#333333';
+        return {
+            label: datum.label,
+            value: datum.value,
+            color,
+            fontSize,
+            width: measured.width * 1.05,
+            height: measured.height,
+        };
+    })
+        .sort((a, b) => b.fontSize - a.fontSize);
+    const placedWords = placeWords(words, enableRotate, padding, spiralStep, radiusStep);
+    const minX = Math.min(...placedWords.map((w) => w.box.x));
+    const minY = Math.min(...placedWords.map((w) => w.box.y));
+    const maxX = Math.max(...placedWords.map((w) => w.box.x + w.box.width));
+    const maxY = Math.max(...placedWords.map((w) => w.box.y + w.box.height));
+    const offsetX = -minX + padding;
+    const offsetY = -minY + padding;
+    const containerWidth = maxX - minX + padding * 2;
+    const containerHeight = maxY - minY + padding * 2;
+    const wordElements = placedWords.map((word, index) => {
+        const translateX = word.centerX - word.width / 2 + offsetX;
+        const translateY = word.centerY - word.height / 2 + offsetY;
+        const rotationOriginX = word.width / 2;
+        const rotationOriginY = word.height / 2;
+        const transform = `translate(${translateX}, ${translateY}) rotate(${word.angle}, ${rotationOriginX}, ${rotationOriginY})`;
+        return ((0, jsx_runtime_1.jsx)(jsx_1.Group, { transform: transform, children: (0, jsx_runtime_1.jsx)(jsx_1.Text, { width: word.width, height: word.height, fontSize: word.fontSize, fontWeight: "bold", alignHorizontal: "center", alignVertical: "middle", fill: word.color, "data-indexes": index, "data-element-type": "item-label" /* ElementTypeEnum.ItemLabel */, children: word.label }) }));
+    });
+    return ((0, jsx_runtime_1.jsx)(components_1.ItemsGroup, { id: "infographic-container", width: containerWidth, height: containerHeight, children: wordElements }));
+};
+exports.ChartWordCloud = ChartWordCloud;
+(0, registry_1.registerStructure)('chart-wordcloud', {
+    component: exports.ChartWordCloud,
+    composites: ['item'],
+});

package/lib/designs/structures/hierarchy-tree.d.ts

@@ -6,6 +6,8 @@ export interface HierarchyTreeProps extends BaseStructureProps {
     levelGap?: number;
     /** 节点间距：同级节点之间的水平距离，默认 60 */
     nodeGap?: number;
+    /** 布局方向：'top-bottom' 自上而下 | 'bottom-top' 自下而上 | 'left-right' 自左向右 | 'right-left' 自右向左，默认 'top-bottom' */
+    orientation?: 'top-bottom' | 'bottom-top' | 'left-right' | 'right-left';
     /** 连接线类型：'straight' 直线 | 'curved' 曲线，默认 'curved' */
     edgeType?: 'straight' | 'curved';
     /** 连接线颜色模式：'solid' 单色 | 'gradient' 渐变色，默认 'gradient' */