@antv/infographic 0.0.1-beta.1

package/src/renderer/palettes/built-in.ts

@@ -0,0 +1,86 @@
+import { registerPalette } from './registry';
+import type { Palette } from './types';
+
+export const antv: Palette = [
+  '#1783FF',
+  '#00C9C9',
+  '#F0884D',
+  '#D580FF',
+  '#7863FF',
+  '#60C42D',
+  '#BD8F24',
+  '#FF80CA',
+  '#2491B3',
+  '#17C76F',
+  '#70CAF8',
+];
+registerPalette('antv', antv);
+
+export const spectral: Palette = (_, index, count) => {
+  const colors = [
+    ['#fc8d59', '#ffffbf', '#99d594'],
+    ['#d7191c', '#fdae61', '#abdda4', '#2b83ba'],
+    ['#d7191c', '#fdae61', '#ffffbf', '#abdda4', '#2b83ba'],
+    ['#d53e4f', '#fc8d59', '#fee08b', '#e6f598', '#99d594', '#3288bd'],
+    [
+      '#d53e4f',
+      '#fc8d59',
+      '#fee08b',
+      '#ffffbf',
+      '#e6f598',
+      '#99d594',
+      '#3288bd',
+    ],
+    [
+      '#d53e4f',
+      '#f46d43',
+      '#fdae61',
+      '#fee08b',
+      '#e6f598',
+      '#abdda4',
+      '#66c2a5',
+      '#3288bd',
+    ],
+    [
+      '#d53e4f',
+      '#f46d43',
+      '#fdae61',
+      '#fee08b',
+      '#ffffbf',
+      '#e6f598',
+      '#abdda4',
+      '#66c2a5',
+      '#3288bd',
+    ],
+    [
+      '#9e0142',
+      '#d53e4f',
+      '#f46d43',
+      '#fdae61',
+      '#fee08b',
+      '#e6f598',
+      '#abdda4',
+      '#66c2a5',
+      '#3288bd',
+      '#5e4fa2',
+    ],
+    [
+      '#9e0142',
+      '#d53e4f',
+      '#f46d43',
+      '#fdae61',
+      '#fee08b',
+      '#ffffbf',
+      '#e6f598',
+      '#abdda4',
+      '#66c2a5',
+      '#3288bd',
+      '#5e4fa2',
+    ],
+  ];
+
+  const size = Math.min(Math.max(count, 3), 11);
+  return colors[size - 3][index % size];
+};
+
+registerPalette('spectral', spectral);

package/src/renderer/palettes/index.ts

@@ -0,0 +1,6 @@
+import './built-in';
+import { getPalette, registerPalette } from './registry';
+
+export type { Palette } from './types';
+export { getPaletteColor } from './utils';
+export { getPalette, registerPalette };

package/src/renderer/palettes/registry.ts

@@ -0,0 +1,11 @@
+import type { Palette } from './types';
+
+const PALETTE_REGISTRY = new Map<string, Palette>();
+
+export function registerPalette(name: string, palette: Palette) {
+  PALETTE_REGISTRY.set(name, palette);
+}
+
+export function getPalette(type: string): Palette | undefined {
+  return PALETTE_REGISTRY.get(type);
+}

package/src/renderer/palettes/types.ts

@@ -0,0 +1,4 @@
+export type Palette =
+  | string
+  | string[]
+  | ((ratio: number, index: number, count: number) => string);

package/src/renderer/palettes/utils.ts

@@ -0,0 +1,21 @@
+import { getPalette } from './registry';
+import type { Palette } from './types';
+
+export const getPaletteColor = (
+  args: string | Palette = [],
+  indexes: number[],
+  total?: number,
+) => {
+  const palette = typeof args === 'string' ? getPalette(args) || [] : args;
+  const index = indexes[0] ?? 0;
+
+  if (typeof palette === 'function') {
+    const ratio = total ? index / total : 0;
+    return palette(ratio, index, total ?? 0);
+  }
+
+  if (Array.isArray(palette)) {
+    if (palette.length === 0) return;
+    return palette[index % palette.length] as string;
+  }
+};

package/src/renderer/renderer.ts

@@ -0,0 +1,325 @@
+import { ElementTypeEnum } from '../constants';
+import type { ParsedInfographicOptions } from '../options';
+import type { ParsedPadding } from '../types';
+import {
+  getDatumByIndexes,
+  getItemIndexes,
+  getSizeBaseVal,
+  isBtnsGroup,
+  isDesc,
+  isGroup,
+  isIllus,
+  isItemDesc,
+  isItemElement,
+  isItemIcon,
+  isItemIconGroup,
+  isItemIllus,
+  isItemLabel,
+  isItemShape,
+  isItemShapesGroup,
+  isItemValue,
+  isShape,
+  isShapeGroup,
+  isSVG,
+  isText,
+  isTitle,
+  parsePadding,
+  setAttributes,
+} from '../utils';
+import {
+  renderBackground,
+  renderButtonsGroup,
+  renderIllus,
+  renderItemIcon,
+  renderItemShape,
+  renderItemText,
+  renderShape,
+  renderStaticShape,
+  renderStaticText,
+  renderSVG,
+  renderText,
+} from './composites';
+import { loadFonts } from './fonts';
+import { getPaletteColor } from './palettes';
+import type { IRenderer } from './types';
+
+const upsert = (original: SVGElement, modified: SVGElement | null) => {
+  if (original === modified) return;
+  if (!modified) original.remove();
+  else original.replaceWith(modified);
+};
+
+export class Renderer implements IRenderer {
+  private rendered = false;
+
+  constructor(
+    private options: ParsedInfographicOptions,
+    private template: SVGSVGElement,
+  ) {}
+
+  public getOptions(): ParsedInfographicOptions {
+    return this.options;
+  }
+
+  public getSVG(): SVGSVGElement {
+    return this.template;
+  }
+
+  render(): SVGSVGElement {
+    const svg = this.getSVG();
+    if (this.rendered) return svg;
+
+    renderTemplate(svg, this.options);
+
+    svg.style.visibility = 'hidden';
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node === svg || node.contains(svg)) {
+            // post render
+            setView(this.template, this.options);
+            loadFonts(this.template);
+
+            // disconnect observer
+            observer.disconnect();
+            svg.style.visibility = '';
+          }
+        });
+      });
+    });
+
+    observer.observe(document, {
+      childList: true,
+      subtree: true,
+    });
+
+    this.rendered = true;
+    return svg;
+  }
+}
+
+function renderTemplate(svg: SVGSVGElement, options: ParsedInfographicOptions) {
+  fill(svg, options);
+
+  setSVG(svg, options);
+
+  const { themeConfig } = options;
+  renderBackground(svg, themeConfig?.colorBg);
+}
+
+function fill(svg: SVGSVGElement, options: ParsedInfographicOptions) {
+  const { themeConfig, data } = options;
+
+  const traverse = (element: SVGElement) => {
+    if (isSVG(element)) {
+      renderSVG(svg, options);
+
+      return Array.from(element.children).forEach((child) => {
+        traverse(child as SVGElement);
+      });
+    }
+
+    const id = element.id || '';
+
+    if (isTitle(element)) {
+      const modified = renderText(
+        element,
+        data.title || '',
+        Object.assign({}, themeConfig.base?.text, themeConfig.title),
+      );
+      return upsert(element, modified);
+    }
+
+    if (isDesc(element)) {
+      const modified = renderText(
+        element,
+        data.desc || '',
+        Object.assign({}, themeConfig.base?.text, themeConfig.desc),
+      );
+      return upsert(element, modified);
+    }
+
+    if (isIllus(element)) {
+      const modified = renderIllus(svg, element, data.illus?.[id]);
+      return upsert(element, modified);
+    }
+
+    if (isShapeGroup(element)) {
+      return Array.from(element.children).forEach((child) => {
+        renderShape(svg, child as SVGElement, options);
+      });
+    }
+
+    if (isShape(element)) {
+      const modified = renderShape(svg, element, options);
+      return upsert(element, modified);
+    }
+
+    if (isBtnsGroup(element)) {
+      return renderButtonsGroup(svg, element as SVGGElement);
+    }
+
+    if (isItemElement(element)) {
+      const [, , itemType] = id.split('-');
+      const indexes = getItemIndexes(id);
+      const primaryColor = getPaletteColor(
+        themeConfig.palette,
+        getItemIndexes(id),
+        data.items.length,
+      );
+
+      if (isItemLabel(element) || isItemDesc(element) || isItemValue(element)) {
+        const modified = renderItemText(
+          itemType as 'label' | 'desc' | 'value',
+          element,
+          options,
+          primaryColor,
+        );
+        return upsert(element, modified);
+      }
+
+      if (isItemIllus(element)) {
+        const modified = renderIllus(
+          svg,
+          element,
+          getDatumByIndexes(data, indexes)?.illus,
+        );
+        return upsert(element, modified);
+      }
+
+      if (isItemIconGroup(element)) {
+        element.setAttribute('data-element-type', ElementTypeEnum.IconGroup);
+      }
+
+      if (isItemIcon(element)) {
+        const modified = renderItemIcon(
+          svg,
+          element,
+          getDatumByIndexes(data, indexes)?.icon,
+          options,
+        );
+        return upsert(element, modified);
+      }
+
+      if (isItemShapesGroup(element)) {
+        return Array.from(element.children).forEach((child) => {
+          renderItemShape(svg, child as SVGElement, options, primaryColor);
+        });
+      }
+
+      if (isItemShape(element)) {
+        const modified = renderItemShape(svg, element, options, primaryColor);
+        return upsert(element, modified);
+      }
+    }
+
+    if (isText(element)) {
+      return renderStaticText(element, options);
+    }
+
+    if (!isGroup(element)) {
+      return renderStaticShape(element, options);
+    }
+
+    Array.from(element.children).forEach((child) => {
+      traverse(child as SVGElement);
+    });
+  };
+
+  traverse(svg);
+}
+
+function setSVG(svg: SVGSVGElement, options: ParsedInfographicOptions) {
+  const { width, height } = options;
+  const { style = {}, attributes = {}, id, className } = options.svg || {};
+  if (id) svg.id = id;
+  if (className) svg.classList.add(className);
+  if (width !== undefined) {
+    svg.setAttribute('width', typeof width === 'number' ? `${width}px` : width);
+  }
+  if (height !== undefined) {
+    svg.setAttribute(
+      'height',
+      typeof height === 'number' ? `${height}px` : height,
+    );
+  }
+  Object.assign(svg.style, style);
+  setAttributes(svg, attributes);
+}
+
+function setView(svg: SVGSVGElement, options: ParsedInfographicOptions) {
+  const { padding = 20, viewBox } = options;
+
+  if (viewBox) {
+    svg.setAttribute('viewBox', viewBox);
+  } else if (padding !== undefined) {
+    setSVGPadding(svg, parsePadding(padding));
+  }
+}
+
+interface SVGPaddingOptions {
+  /** 是否保持宽高比 (默认: true) */
+  preserveAspectRatio?: boolean;
+}
+
+function setSVGPadding(
+  svg: SVGSVGElement,
+  padding: ParsedPadding,
+  options: SVGPaddingOptions = {},
+): boolean {
+  const { preserveAspectRatio = false } = options;
+
+  if (!svg.isConnected) return false;
+
+  try {
+    const bbox = svg.getBBox();
+
+    // 检查包围盒是否有效
+    if (bbox.width === 0 || bbox.height === 0) {
+      return false;
+    }
+    const [widthBaseVal, heightBaseVal] = getSizeBaseVal(svg);
+    const svgWidth = widthBaseVal || svg.clientWidth || 0;
+    const svgHeight = heightBaseVal || svg.clientHeight || 0;
+
+    const parentElement = svg.parentElement;
+    const effectiveWidth =
+      svgWidth || (parentElement ? parentElement.clientWidth : 300);
+    const effectiveHeight =
+      svgHeight || (parentElement ? parentElement.clientHeight : 150);
+
+    let viewBoxPadding: number[];
+
+    if (effectiveWidth > 0 && effectiveHeight > 0) {
+      const scaleX = bbox.width / effectiveWidth;
+      const scaleY = bbox.height / effectiveHeight;
+
+      if (preserveAspectRatio) {
+        const scale = Math.max(scaleX, scaleY);
+        viewBoxPadding = padding.map((p) => p * scale);
+      } else {
+        viewBoxPadding = [
+          padding[0] * scaleY,
+          padding[1] * scaleX,
+          padding[2] * scaleY,
+          padding[3] * scaleX,
+        ];
+      }
+    } else {
+      viewBoxPadding = [...padding];
+    }
+
+    const newViewBox = [
+      bbox.x - viewBoxPadding[3],
+      bbox.y - viewBoxPadding[0],
+      bbox.width + viewBoxPadding[1] + viewBoxPadding[3],
+      bbox.height + viewBoxPadding[0] + viewBoxPadding[2],
+    ].join(' ');
+
+    svg.setAttribute('viewBox', newViewBox);
+
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/renderer/stylize/gradient.ts

@@ -0,0 +1,131 @@
+import tinycolor from 'tinycolor2';
+import { createElement, getOrCreateDefs, hasColor } from '../../utils';
+import type { GradientConfig } from '../types';
+import { getSafetyId } from '../utils';
+
+export function applyGradientStyle(
+  node: SVGElement,
+  svg: SVGSVGElement,
+  config: GradientConfig,
+  attr: 'fill' | 'stroke',
+) {
+  const currentColor = node.getAttribute(attr)!;
+
+  const actualConfig = inferGradientConfig(currentColor, config);
+
+  const { type, colors = [] } = actualConfig;
+
+  const size = colors.length - 1;
+  const stops = colors.map((color, index) => {
+    if (typeof color === 'string') {
+      return createElement('stop', {
+        offset: `${index / size}`,
+        'stop-color': color,
+      });
+    } else {
+      return createElement('stop', {
+        offset: `${color.offset}`,
+        'stop-color': color.color,
+      });
+    }
+  });
+
+  const id = getGradientId(config);
+
+  if (type === 'linear-gradient') {
+    const { angle = 0 } = actualConfig;
+    const [[x1, y1], [x2, y2]] = angleToUnitVector(angle);
+    const linearGradient = createElement('linearGradient', {
+      id,
+      x1,
+      y1,
+      x2,
+      y2,
+    });
+    stops.forEach((stop) => linearGradient.appendChild(stop));
+
+    upsertGradient(svg, id, linearGradient);
+  } else if (type === 'radial-gradient') {
+    const radialGradient = createElement('radialGradient', {
+      id,
+    });
+    stops.forEach((stop) => radialGradient.appendChild(stop));
+
+    upsertGradient(svg, id, radialGradient);
+  }
+
+  const fill = node.getAttribute('fill');
+  const stroke = node.getAttribute('stroke');
+
+  if (hasColor(fill)) node.setAttribute('fill', `url(#${id})`);
+  if (hasColor(stroke)) node.setAttribute('stroke', `url(#${id})`);
+}
+
+function upsertGradient(svg: SVGSVGElement, id: string, gradient: SVGElement) {
+  const defs = getOrCreateDefs(svg);
+  gradient.setAttribute('id', id);
+
+  const exist = defs.querySelector(`#${id}`);
+
+  if (exist) exist.replaceWith(gradient);
+  else defs.appendChild(gradient);
+}
+
+function inferGradientConfig(
+  currentColor: string,
+  config: GradientConfig,
+): GradientConfig {
+  if (config.colors?.length || !currentColor) return config;
+
+  const tc = tinycolor(currentColor);
+  const inferConfig = { ...config };
+
+  inferConfig.colors = tc.isDark()
+    ? [currentColor, tc.lighten(20).toHexString()]
+    : [tc.darken(20).toHexString(), currentColor];
+
+  if (!('angle' in config) && inferConfig.type === 'linear-gradient') {
+    inferConfig.angle = 225;
+  }
+
+  return inferConfig;
+}
+
+function getGradientId(config: GradientConfig) {
+  const { type, colors = [] } = config;
+
+  const colorId = getSafetyId(
+    colors
+      .map((color) => {
+        if (typeof color === 'string') return color;
+        return `${color.color}_${color.offset}`;
+      })
+      .join('-'),
+  );
+
+  if (type === 'linear-gradient') {
+    const { angle = 0 } = config;
+    return `${type}-${colorId}-${angle}`;
+  }
+
+  return `${type}-${colorId}`;
+}
+
+/**
+ * 将角度转为单位向量（屏幕坐标系）
+ * 0 度为 x 轴正方向
+ * 90 度为 y 轴正方向
+ * 返回 x1,y1,x2,y2 供 <linearGradient> 使用
+ */
+function angleToUnitVector(
+  angle: number,
+): [[number, number], [number, number]] {
+  const radians = (Math.PI / 180) * angle;
+  const x = Math.cos(radians);
+  const y = Math.sin(radians);
+
+  return [
+    [0.5 - x / 2, 0.5 - y / 2], // 起点
+    [0.5 + x / 2, 0.5 + y / 2], // 终点
+  ];
+}

package/src/renderer/stylize/index.ts

@@ -0,0 +1,3 @@
+export { applyGradientStyle } from './gradient';
+export { applyPatternStyle } from './pattern';
+export { applyRoughStyle } from './rough';

package/src/renderer/stylize/pattern.ts

@@ -0,0 +1,82 @@
+import tinycolor from 'tinycolor2';
+import { getAttributes, getOrCreateDefs, hasColor } from '../../utils';
+import type { PatternConfig, PatternGenerator } from '../types';
+import { getSafetyId } from '../utils';
+import * as builtInPatterns from './patterns';
+
+const PATTERNS = new Map<string, PatternGenerator>();
+
+export function registerPattern(name: string, generator: PatternGenerator) {
+  if (PATTERNS.has(name)) console.warn(`Pattern ${name} will be overwritten`);
+  PATTERNS.set(name, generator);
+}
+
+for (const [name, generator] of Object.entries(builtInPatterns)) {
+  registerPattern(name, generator);
+}
+
+export function applyPatternStyle(
+  node: SVGElement,
+  svg: SVGSVGElement,
+  config: PatternConfig,
+) {
+  const { pattern, ...restConfig } = config;
+
+  const generator = PATTERNS.get(pattern);
+  if (!generator) {
+    return console.warn(`Pattern ${pattern} not found`);
+  }
+
+  const { fill, stroke } = getAttributes(node, ['fill', 'stroke']);
+  const style = {
+    backgroundColor: tinycolor('#fff').toHexString(),
+    foregroundColor:
+      getColorDistance(fill || 'white', '#fff') >
+      getColorDistance(stroke || 'white', '#fff')
+        ? fill
+        : stroke,
+    ...restConfig,
+  };
+  const id = getPatternId({ ...config, ...style });
+  upsertPattern(svg, id, generator(style));
+
+  if (hasColor(fill)) {
+    node.setAttribute('fill', `url(#${id})`);
+    if (!node.getAttribute('stroke') && fill) {
+      node.setAttribute('stroke', fill);
+    }
+  }
+}
+
+function upsertPattern(svg: SVGSVGElement, id: string, pattern: SVGElement) {
+  const defs = getOrCreateDefs(svg);
+  pattern.setAttribute('id', id);
+
+  const exist = defs.querySelector(`pattern#${id}`);
+
+  if (exist) exist.replaceWith(pattern);
+  else defs.appendChild(pattern);
+}
+
+function getPatternId(config: PatternConfig) {
+  const {
+    pattern,
+    foregroundColor = 'unset',
+    backgroundColor = 'unset',
+    scale = 'unset',
+  } = config;
+  return getSafetyId(
+    `pattern-${pattern}-${foregroundColor}-${backgroundColor}-${scale}`,
+  );
+}
+
+function getColorDistance(a: string, b: string) {
+  const _a = tinycolor(a).toRgb();
+  const _b = tinycolor(b).toRgb();
+
+  return Math.sqrt(
+    Math.pow(_b.r - _a.r, 2) +
+      Math.pow(_b.g - _a.g, 2) +
+      Math.pow(_b.b - _a.b, 2),
+  );
+}

package/src/renderer/stylize/patterns/diamond.ts

@@ -0,0 +1,29 @@
+import { createElement } from '../../../utils';
+import { PatternGenerator } from '../../types';
+
+export const diamond: PatternGenerator = ({
+  scale = 0.5,
+  backgroundColor,
+  foregroundColor,
+}) => {
+  const pattern = createElement('pattern', {
+    id: 'pattern-diamond',
+    width: '20',
+    height: '20',
+    patternTransform: `scale(${scale})`,
+    patternUnits: 'userSpaceOnUse',
+  });
+  const rect = createElement('rect', {
+    width: '100%',
+    height: '100%',
+    fill: backgroundColor,
+  });
+  const path = createElement('path', {
+    d: 'M0,0 L20,20 M20,0 L0,20',
+    stroke: foregroundColor,
+    'stroke-width': '1',
+  });
+  pattern.appendChild(rect);
+  pattern.appendChild(path);
+  return pattern;
+};