@antv/infographic 0.1.3 → 0.2.0

package/src/syntax/schema.ts

@@ -0,0 +1,112 @@
+import type { ObjectSchema, SchemaNode } from './types';
+
+const string = (): SchemaNode => ({ kind: 'string' });
+const number = (): SchemaNode => ({ kind: 'number' });
+// const boolean = (): SchemaNode => ({ kind: 'boolean' });
+const enumOf = (values: string[]): SchemaNode => ({ kind: 'enum', values });
+const color = (options: { soft?: boolean } = {}): SchemaNode => ({
+  kind: 'color',
+  soft: options.soft,
+});
+const array = (item: SchemaNode, split: 'space' | 'comma' | 'any' = 'any') => ({
+  kind: 'array' as const,
+  item,
+  split,
+});
+const object = (
+  fields: Record<string, SchemaNode>,
+  options: { allowUnknown?: boolean; shorthandKey?: string } = {},
+): ObjectSchema => ({
+  kind: 'object',
+  fields,
+  allowUnknown: options.allowUnknown,
+  shorthandKey: options.shorthandKey,
+});
+const union = (...variants: SchemaNode[]): SchemaNode => ({
+  kind: 'union',
+  variants,
+});
+const palette = (): SchemaNode => ({ kind: 'palette' });
+
+const nullableColorFields = {
+  fill: color({ soft: true }),
+  stroke: color({ soft: true }),
+};
+
+const textStyleSchema = object(nullableColorFields, { allowUnknown: true });
+const shapeStyleSchema = object(nullableColorFields, { allowUnknown: true });
+
+const itemDatumSchema: ObjectSchema = object({}, { allowUnknown: true });
+itemDatumSchema.fields = {
+  label: string(),
+  value: union(number(), string()),
+  desc: string(),
+  icon: string(),
+  children: array(itemDatumSchema),
+};
+
+export const ThemeSchema = object(
+  {
+    type: string(),
+    colorBg: color(),
+    colorPrimary: color(),
+    palette: palette(),
+    title: textStyleSchema,
+    desc: textStyleSchema,
+    shape: shapeStyleSchema,
+    base: object({
+      global: object({}, { allowUnknown: true }),
+      shape: shapeStyleSchema,
+      text: textStyleSchema,
+    }),
+    stylize: object(
+      {
+        type: enumOf(['rough', 'pattern']),
+        roughness: number(),
+        bowing: number(),
+        fillWeight: number(),
+        hachureGap: number(),
+        pattern: string(),
+        backgroundColor: color(),
+        foregroundColor: color(),
+        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/src/syntax/types.ts

@@ -0,0 +1,100 @@
+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
+  | PaletteSchema
+  | ColorSchema;
+
+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[];
+}
+
+export interface PaletteSchema {
+  kind: 'palette';
+}
+
+export interface ColorSchema {
+  kind: 'color';
+  soft?: boolean;
+}

package/src/templates/built-in.ts

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

package/src/templates/hierarchy-tree.ts

@@ -52,19 +52,42 @@ const items: string[] = [
 export const hierarchyTreeTemplates: Record<string, TemplateOptions> = {};
 
 const structureName = 'hierarchy-tree';
+const orientationConfigs: Array<{
+  key: string;
+  orientation?: HierarchyTreeProps['orientation'];
+}> = [
+  { key: '' },
+  { key: 'bt', orientation: 'bottom-top' },
+  { key: 'lr', orientation: 'left-right' },
+  { key: 'rl', orientation: 'right-left' },
+];
+
+const createTemplateName = (
+  oriKey: string,
+  name: string,
+  item: string,
+): string => {
+  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/src/templates/sequence-stairs.ts

@@ -0,0 +1,44 @@
+import type { TemplateOptions } from './types';
+
+export const sequenceStairsTemplates: Record<string, TemplateOptions> = {
+  '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/src/templates/word-cloud.ts

@@ -0,0 +1,21 @@
+import type { TemplateOptions } from './types';
+
+export const wordCloudTemplate: Record<string, TemplateOptions> = {
+  'chart-wordcloud-rotate': {
+    design: {
+      structure: {
+        type: 'chart-wordcloud',
+      },
+      item: 'simple',
+    },
+  },
+  'chart-wordcloud': {
+    design: {
+      structure: {
+        type: 'chart-wordcloud',
+        enableRotate: false,
+      },
+      item: 'simple',
+    },
+  },
+};

package/src/themes/types.ts

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

package/src/utils/design.ts

@@ -0,0 +1,14 @@
+import type {
+  NullableParsedDesignsOptions,
+  ParsedDesignsOptions,
+} from '../designs';
+
+export function isNonNullableParsedDesignsOptions(
+  options: NullableParsedDesignsOptions,
+): options is ParsedDesignsOptions {
+  const { structure, item, items } = options;
+  if (!structure) return false;
+  if (!item) return false;
+  if (items.some((it) => !it)) return false;
+  return true;
+}

package/src/utils/fetch.ts

@@ -0,0 +1,90 @@
+import flru from 'flru';
+
+type FetchFunction = (
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) => Promise<Response>;
+
+interface CachedResponseEntry {
+  body: ArrayBuffer;
+  init: ResponseInit;
+}
+
+const nativeFetch: FetchFunction = globalThis.fetch;
+
+const CACHE_MAX_ENTRIES = 1024;
+
+const responseCache = flru<CachedResponseEntry>(CACHE_MAX_ENTRIES);
+const pendingRequests = new Map<string, Promise<CachedResponseEntry>>();
+
+function buildHeadersKey(request: Request) {
+  const entries = Array.from(request.headers.entries());
+  if (entries.length === 0) return '';
+
+  entries.sort(([nameA], [nameB]) =>
+    nameA.toLowerCase().localeCompare(nameB.toLowerCase()),
+  );
+
+  return entries
+    .map(([name, value]) => `${name.toLowerCase()}:${value}`)
+    .join('|');
+}
+
+function buildCacheKey(request: Request) {
+  const headersKey = buildHeadersKey(request);
+  return headersKey
+    ? `${request.method}:${request.url}:${headersKey}`
+    : `${request.method}:${request.url}`;
+}
+
+function buildResponse(entry: CachedResponseEntry) {
+  return new Response(entry.body.slice(0), entry.init);
+}
+
+async function fetchAndCache(request: Request, key: string) {
+  try {
+    const response = await nativeFetch(request);
+    const body = await response.arrayBuffer();
+    const entry: CachedResponseEntry = {
+      body,
+      init: {
+        status: response.status,
+        statusText: response.statusText,
+        headers: Array.from(response.headers.entries()),
+      },
+    };
+
+    if (response.ok) {
+      responseCache.set(key, entry);
+    }
+
+    return entry;
+  } finally {
+    pendingRequests.delete(key);
+  }
+}
+
+export async function fetchWithCache(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+) {
+  const request = new Request(input, init);
+  if (request.method !== 'GET') {
+    return nativeFetch(request);
+  }
+
+  const key = buildCacheKey(request);
+
+  if (responseCache.has(key)) {
+    return buildResponse(responseCache.get(key)!);
+  }
+
+  let pending = pendingRequests.get(key);
+  if (!pending) {
+    pending = fetchAndCache(request, key);
+    pendingRequests.set(key, pending);
+  }
+
+  const entry = await pending;
+  return buildResponse(entry);
+}

package/src/utils/font.ts

@@ -14,21 +14,31 @@ export function encodeFontFamily(font: string) {
 const FontWeightNameMap: Record<string, FontWeightName> = {
   '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(

package/src/utils/index.ts

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

package/esm/resource/types/font.d.ts

@@ -1,12 +0,0 @@
-/**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
- */
-export type FontWeightName = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'extrablack';
-export interface Font {
-    font: string;
-    name: string;
-    /** 字体 CDN */
-    fontWeight: {
-        [keys in FontWeightName]?: string;
-    };
-}

package/lib/resource/types/font.d.ts

@@ -1,12 +0,0 @@
-/**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
- */
-export type FontWeightName = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black' | 'extrablack';
-export interface Font {
-    font: string;
-    name: string;
-    /** 字体 CDN */
-    fontWeight: {
-        [keys in FontWeightName]?: string;
-    };
-}

package/src/resource/types/font.ts

@@ -1,23 +0,0 @@
-/**
- * https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
- */
-export type FontWeightName =
-  | 'thin'
-  | 'extralight'
-  | 'light'
-  | 'regular'
-  | 'medium'
-  | 'semibold'
-  | 'bold'
-  | 'extrabold'
-  | 'black'
-  | 'extrablack';
-
-export interface Font {
-  font: string;
-  name: string;
-  /** 字体 CDN */
-  fontWeight: {
-    [keys in FontWeightName]?: string;
-  };
-}