@363045841yyt/klinechart-core 0.8.14 → 0.9.0-alpha.0

package/src/semantic/validator.ts

@@ -1,363 +0,0 @@
-/**
- * 语义化配置校验器
- * 包含 JSON Schema 校验、安全校验、业务逻辑校验
- */
-
-import type {
-  SemanticChartConfig,
-  DataConfig,
-  ValidationResult,
-  SecurityResult,
-  MarkerStyle,
-} from './types'
-
-// ============ 常量定义 ============
-
-/** 禁止的属性键（防止原型污染） */
-const FORBIDDEN_KEYS = ['__proto__', 'constructor', 'prototype']
-
-/** 颜色值正则（严格校验） */
-const COLOR_PATTERN =
-  /^(#[0-9a-fA-F]{3,8}|rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)|rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*[\d.]+\s*\))$/
-
-/** 股票代码正则规则
- * 注意：北交所规则持续扩充，以交易所官方公告为准
- * 规则版本日期：2025-01
- */
-const SYMBOL_PATTERNS = {
-  SH: /^(600|601|603|605|688)\d{3}$/, // 上交所
-  SZ: /^(000|001|002|003|300|301)\d{3}$/, // 深交所
-  BJ: /^(83|87|43|82)\d{4}$/, // 北交所
-}
-
-/** 安全限制 */
-interface SecurityLimits {
-  maxJsonSize: number
-  maxIndicators: number
-  maxCustomMarkers: number
-}
-
-/** 根据 period 计算最大日期范围（天数） */
-function getMaxDateRangeDays(period: DataConfig['period']): number {
-  const LIMITS: Record<string, number> = {
-    '5min': 30,
-    '15min': 60,
-    '30min': 90,
-    '60min': 180,
-    daily: 365 * 3,
-    weekly: 365 * 5,
-    monthly: 365 * 10,
-  }
-  return LIMITS[period] ?? 365
-}
-
-// ============ 单例 Canvas（颜色校验用） ============
-
-const _colorCanvas = typeof document !== 'undefined' ? document.createElement('canvas') : null
-const _colorCtx = _colorCanvas?.getContext('2d') ?? null
-
-// ============ 校验器类 ============
-
-export class SemanticConfigValidator {
-  private limits: SecurityLimits
-  private _ajv: Promise<any> | null = null
-
-  constructor() {
-    this.limits = {
-      maxJsonSize: 64 * 1024, // 64KB
-      maxIndicators: 10,
-      maxCustomMarkers: 100,
-    }
-  }
-
-  private async getAjv(): Promise<any> {
-    if (!this._ajv) {
-      this._ajv = (async () => {
-        const Ajv = (await import('ajv')).default
-        const ajv = new Ajv({ allErrors: true, allowUnionTypes: true })
-        ajv.addFormat('date', {
-          type: 'string',
-          validate: (data: string) => /^\d{4}-\d{2}-\d{2}$/.test(data),
-        })
-        const schemaModule = await import('./schema.json')
-        ajv.addSchema(schemaModule.default || schemaModule)
-        return ajv
-      })()
-    }
-    return this._ajv
-  }
-
-  /**
-   * 入口校验（在 JSON.parse 之前调用）
-   * 检查原始字符串大小
-   */
-  validateRawInput(raw: string): ValidationResult {
-    const byteLength =
-      typeof TextEncoder !== 'undefined' ? new TextEncoder().encode(raw).byteLength : raw.length * 3 // SSR 降级：保守估计
-
-    if (byteLength > this.limits.maxJsonSize) {
-      return { valid: false, errors: ['JSON payload too large (max 64KB)'] }
-    }
-    return { valid: true }
-  }
-
-  /**
-   * JSON Schema 校验
-   */
-  async validate(config: unknown): Promise<ValidationResult> {
-    // 1. 类型检查
-    if (!config || typeof config !== 'object') {
-      return { valid: false, errors: ['Config must be an object'] }
-    }
-
-    // 2. 原型污染检查
-    const protoCheck = this.checkPrototypePollution(config)
-    if (!protoCheck.valid) {
-      return protoCheck
-    }
-
-    // 3. JSON Schema 校验
-    try {
-      const ajv = await this.getAjv()
-      const valid = ajv.validate('https://kmap.dev/schemas/semantic-chart-config/1.0.0', config)
-      if (!valid) {
-        const errors = ajv.errors?.map(
-          (e: { instancePath: string; message?: string }) => `${e.instancePath} ${e.message}`,
-        ) || ['Schema validation failed']
-        return { valid: false, errors }
-      }
-    } catch {
-      return { valid: false, errors: ['Schema validation unavailable (ajv not loaded)'] }
-    }
-
-    return { valid: true }
-  }
-
-  /**
-   * 安全校验（纯同步）
-   */
-  securityCheck(config: SemanticChartConfig): SecurityResult {
-    const violations: string[] = []
-
-    // 1. 检查日期范围限制
-    const dateCheck = this.checkDateRange(config.data)
-    if (!dateCheck.valid) {
-      violations.push(...(dateCheck.errors || []))
-    }
-
-    // 2. 检查股票代码格式
-    const symbolCheck = this.checkSymbol(config.data)
-    if (!symbolCheck.valid) {
-      violations.push(...(symbolCheck.errors || []))
-    }
-
-    // 3. 检查指标数量限制
-    if (config.indicators) {
-      const mainCount = config.indicators.main?.length || 0
-      const subCount = config.indicators.sub?.length || 0
-      if (mainCount + subCount > this.limits.maxIndicators) {
-        violations.push(`Too many indicators (max ${this.limits.maxIndicators})`)
-      }
-    }
-
-    // 4. 检查标记数量限制
-    const markerCount = config.markers?.customMarkers?.length || 0
-    if (markerCount > this.limits.maxCustomMarkers) {
-      violations.push(`Too many custom markers (max ${this.limits.maxCustomMarkers})`)
-    }
-
-    // 5. 检查颜色值格式
-    if (config.markers?.customMarkers) {
-      for (const marker of config.markers.customMarkers) {
-        if (marker.style) {
-          const colorCheck = this.checkMarkerStyle(marker.style, marker.id)
-          violations.push(...colorCheck)
-        }
-        // 检查日期格式
-        const dateCheck = this.checkMarkerDate(marker.date, marker.id)
-        violations.push(...dateCheck)
-      }
-    }
-
-    return {
-      passed: violations.length === 0,
-      violations: violations.length > 0 ? violations : undefined,
-    }
-  }
-
-  // ============ 私有方法 ============
-
-  private checkPrototypePollution(obj: unknown, path = ''): ValidationResult {
-    if (!obj || typeof obj !== 'object') {
-      return { valid: true }
-    }
-
-    const errors: string[] = []
-    for (const key of Object.keys(obj as Record<string, unknown>)) {
-      if (FORBIDDEN_KEYS.includes(key)) {
-        errors.push(`Forbidden key "${key}" found at ${path}`)
-      }
-    }
-
-    return errors.length > 0 ? { valid: false, errors } : { valid: true }
-  }
-
-  private checkDateRange(data: DataConfig): ValidationResult {
-    const errors: string[] = []
-
-    const startDate = new Date(data.startDate)
-    const endDate = new Date(data.endDate)
-
-    if (isNaN(startDate.getTime())) {
-      errors.push(`Invalid startDate: ${data.startDate}`)
-    }
-    if (isNaN(endDate.getTime())) {
-      errors.push(`Invalid endDate: ${data.endDate}`)
-    }
-
-    if (errors.length > 0) {
-      return { valid: false, errors }
-    }
-
-    const maxDays = getMaxDateRangeDays(data.period)
-    const diffDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
-
-    if (diffDays > maxDays) {
-      errors.push(
-        `Date range exceeds maximum for period "${data.period}" (max ${maxDays} days, got ${diffDays})`,
-      )
-    }
-
-    if (diffDays < 0) {
-      errors.push('endDate must be after startDate')
-    }
-
-    return errors.length > 0 ? { valid: false, errors } : { valid: true }
-  }
-
-  private checkSymbol(data: DataConfig): ValidationResult {
-    const { symbol, exchange } = data
-
-    if (exchange) {
-      const pattern = SYMBOL_PATTERNS[exchange]
-      if (!pattern.test(symbol)) {
-        return { valid: false, errors: [`Invalid symbol "${symbol}" for exchange "${exchange}"`] }
-      }
-    } else {
-      // 自动识别
-      const valid = Object.values(SYMBOL_PATTERNS).some((p) => p.test(symbol))
-      if (!valid) {
-        return { valid: false, errors: [`Invalid symbol format: "${symbol}"`] }
-      }
-    }
-
-    return { valid: true }
-  }
-
-  private checkMarkerStyle(style: MarkerStyle, markerId: string): string[] {
-    const errors: string[] = []
-    const colorFields = ['fillColor', 'strokeColor', 'textColor'] as const
-
-    for (const field of colorFields) {
-      const value = style[field]
-      if (typeof value === 'string' && !COLOR_PATTERN.test(value)) {
-        errors.push(`Invalid ${field} in marker "${markerId}": ${value}`)
-      }
-    }
-
-    // 检查颜色值安全性（浏览器环境）
-    if (_colorCtx) {
-      for (const field of colorFields) {
-        const value = style[field]
-        if (typeof value === 'string') {
-          _colorCtx.fillStyle = '#000000'
-          _colorCtx.fillStyle = value
-          // 浏览器会过滤非法值，如果返回的不是合法颜色说明有问题
-          if (
-            _colorCtx.fillStyle === '#000000' &&
-            value !== '#000000' &&
-            !value.startsWith('#000')
-          ) {
-            errors.push(`Potentially unsafe ${field} in marker "${markerId}": ${value}`)
-          }
-        }
-      }
-    }
-
-    return errors
-  }
-
-  /** 日期格式正则：YYYY-MM-DD 或 YYYY-MM-DD HH:mm */
-  private static readonly DATE_PATTERN = /^\d{4}-\d{2}-\d{2}( \d{2}:\d{2})?$/
-
-  private checkMarkerDate(date: string, markerId: string): string[] {
-    const errors: string[] = []
-
-    if (!SemanticConfigValidator.DATE_PATTERN.test(date)) {
-      errors.push(
-        `Invalid date format in marker "${markerId}": ${date} (expected YYYY-MM-DD or YYYY-MM-DD HH:mm)`,
-      )
-      return errors
-    }
-
-    // 验证日期是否有效
-    const hasTime = date.includes(' ')
-    let parsed: Date
-
-    if (hasTime) {
-      parsed = new Date(date)
-    } else {
-      // 对于纯日期，解析为 UTC
-      const [year, month, day] = date.split('-').map(Number)
-      parsed = new Date(Date.UTC(year!, month! - 1, day!))
-    }
-
-    if (isNaN(parsed.getTime())) {
-      errors.push(`Invalid date value in marker "${markerId}": ${date}`)
-    }
-
-    return errors
-  }
-}
-
-// ============ 工具函数导出 ============
-
-/**
- * 净化参数对象（防止原型污染）
- */
-export function sanitizeParams(params: Record<string, unknown>): Record<string, unknown> {
-  const safe: Record<string, unknown> = Object.create(null)
-  for (const [key, value] of Object.entries(params)) {
-    if (!FORBIDDEN_KEYS.includes(key)) {
-      safe[key] = value
-    }
-  }
-  return safe
-}
-
-/**
- * 净化颜色值（浏览器环境）
- */
-export function sanitizeColor(input: string): string | null {
-  if (!_colorCtx) return null
-  _colorCtx.fillStyle = '#000000'
-  _colorCtx.fillStyle = input
-  return _colorCtx.fillStyle
-}
-
-/**
- * 校验颜色值格式
- */
-export function validateColor(color: string): boolean {
-  return COLOR_PATTERN.test(color)
-}
-
-/**
- * 校验股票代码
- */
-export function validateSymbol(symbol: string, exchange?: 'SH' | 'SZ' | 'BJ'): boolean {
-  if (exchange) {
-    return SYMBOL_PATTERNS[exchange].test(symbol)
-  }
-  return Object.values(SYMBOL_PATTERNS).some((p) => p.test(symbol))
-}

package/src/tokens/theme-china.ts

@@ -1,132 +0,0 @@
-/**
- * Asia-market (Chinese) colour convention helper.
- *
- * Asian markets traditionally use **red for "up"** (bull) and **green
- * for "down"** (bear) — the reverse of the Western convention.
- *
- * {@link withAsiaMarketColors} takes any {@link Theme} and returns a new
- * Theme with all bull/bear colour pairs swapped, so the caller only needs
- * a single boolean (`isAsiaMarket`) to switch conventions at runtime.
- *
- * {@link resolveThemeColors} is a convenience for renderers that currently
- * hard-code `theme === 'dark' ? darkTheme.colors : lightTheme.colors`.
- *
- * Usage:
- * ```ts
- * import { resolveThemeColors } from '../../tokens'
- *
- * const colors = resolveThemeColors(context.theme, context.isAsiaMarket)
- * ```
- */
-
-import { applyColorPresetOverrides, type ColorPresetSettings } from './colorPresetSettings'
-import { darkTheme } from './theme-dark'
-import { lightTheme } from './theme-light'
-import type { ColorTokens, Theme } from './types'
-
-/**
- * Swap all bull/bear colour pairs in a Theme so that "up" (bull) uses
- * the formerly "down" (bear) colour and vice versa.
- *
- * @param theme — the base Theme (Western convention)
- * @returns a **new** Theme object; the original is not mutated.
- */
-export function withAsiaMarketColors(theme: Theme): Theme {
-  return {
-    ...theme,
-    colors: {
-      ...theme.colors,
-
-      // ── Candle / OHLC ──
-      candleUpBody: theme.colors.candleDownBody,
-      candleDownBody: theme.colors.candleUpBody,
-      candleUpBorder: theme.colors.candleDownBorder,
-      candleDownBorder: theme.colors.candleUpBorder,
-      candleUpWick: theme.colors.candleDownWick,
-      candleDownWick: theme.colors.candleUpWick,
-
-      // ── Time-share area fill ──
-      timeShareAreaUp: theme.colors.timeShareAreaDown,
-      timeShareAreaDown: theme.colors.timeShareAreaUp,
-
-      // ── Volume bars ──
-      volumeUp: theme.colors.volumeDown,
-      volumeDown: theme.colors.volumeUp,
-
-      // ── Footprint (ask = buy = bull, bid = sell = bear) ──
-      footprintAsk: theme.colors.footprintBid,
-      footprintBid: theme.colors.footprintAsk,
-
-      // ── Nested: price accents ──
-      price: {
-        ...theme.colors.price,
-      },
-
-      // ── Nested: MACD histogram bars ──
-      macd: {
-        ...theme.colors.macd,
-        barUp: theme.colors.macd.barDown,
-        barDown: theme.colors.macd.barUp,
-        barUpLight: theme.colors.macd.barDownLight,
-        barDownLight: theme.colors.macd.barUpLight,
-      },
-
-      // ── Nested: SMC structure (HH/HL = bull, LH/LL = bear) ──
-      structure: {
-        ...theme.colors.structure,
-        hh: theme.colors.structure.ll,
-        ll: theme.colors.structure.hh,
-        hl: theme.colors.structure.lh,
-        lh: theme.colors.structure.hl,
-      },
-
-      // ── Nested: Zones / FVG / Order Block ──
-      zones: {
-        ...theme.colors.zones,
-        fvgBullFill: theme.colors.zones.fvgBearFill,
-        fvgBearFill: theme.colors.zones.fvgBullFill,
-        fvgBullBorder: theme.colors.zones.fvgBearBorder,
-        fvgBearBorder: theme.colors.zones.fvgBullBorder,
-        obBullFill: theme.colors.zones.obBearFill,
-        obBearFill: theme.colors.zones.obBullFill,
-      },
-
-      // ── Nested: CCI overbought (bull) / oversold (bear) ──
-      cci: {
-        ...theme.colors.cci,
-        overbought: theme.colors.cci.oversold,
-        oversold: theme.colors.cci.overbought,
-      },
-
-      // ── Nested: WMSR overbought / oversold ──
-      wmsr: {
-        ...theme.colors.wmsr,
-        overbought: theme.colors.wmsr.oversold,
-        oversold: theme.colors.wmsr.overbought,
-      },
-    },
-  }
-}
-
-/**
- * Resolve a theme name + optional Asia-market flag into concrete
- * {@link ColorTokens}.
- *
- * Renderers replace this pattern:
- * ```ts
- * const colors = theme === 'dark' ? darkTheme.colors : lightTheme.colors
- * ```
- * with:
- * ```ts
- * const colors = resolveThemeColors(theme, isAsiaMarket)
- * ```
- */
-export function resolveThemeColors(
-  themeName: 'light' | 'dark',
-  isAsiaMarket?: boolean,
-  colorPresetSettings?: ColorPresetSettings,
-): ColorTokens {
-  const base = themeName === 'dark' ? darkTheme : lightTheme
-  const active = isAsiaMarket ? withAsiaMarketColors(base) : base
-  return applyColorPresetOverrides(active.colors, themeName, colorPresetSettings)
-}

package/src/tokens/themeToCssVars.ts

@@ -1,139 +0,0 @@
-import { KLineChartError } from '../errors'
-
-/**
- * Theme → CSS custom-property emitter.
- *
- * Bridges the typed tokens in `theme-light.ts` / `theme-dark.ts` to the
- * actual stylesheet, so any framework can apply a theme by inserting a
- * `:root { ... }` block or attaching a `style="..."` attribute.
- *
- * Naming convention (kebab-case, dot-paths flattened with `-`):
- *
- *   Theme key                                CSS variable
- *   ───────────────────────────────────────  ────────────────────────────
- *   colors.background                        `--klc-color-background`
- *   colors.candleUpBody                      `--klc-color-candle-up-body`
- *   colors.palette.i1                        `--klc-color-palette-i1`
- *   spacing.md                               `--klc-spacing-md`
- *   typography.fontFamily                    `--klc-typography-font-family`
- *   typography.fontWeightRegular             `--klc-typography-font-weight-regular`
- *   motion.durationFast                      `--klc-motion-duration-fast`
- *
- * Numeric tokens (font weights, line heights) emit as strings — CSS doesn't
- * care, and consumers consume them through `var(...)` so the type tag is
- * lost in the round-trip anyway.
- *
- * Prefix is configurable. Default `--klc-` (KLineChart Quant) is short
- * enough to type and unique enough to coexist with other token systems
- * (Tailwind, MUI, Radix) on the same page.
- */
-
-import type { Theme } from './types'
-
-export interface ThemeToCssVarsOptions {
-  /**
-   * CSS custom-property prefix. Default `'--klc-'`. Must start with `--`.
-   * Including the trailing dash is recommended (kebab-case continues
-   * cleanly from there).
-   */
-  readonly prefix?: string
-}
-
-const DEFAULT_PREFIX = '--klc-'
-
-/**
- * camelCase → kebab-case.
- *
- *   'candleUpBody'        → 'candle-up-body'
- *   'fontWeightRegular'   → 'font-weight-regular'
- *   'i1'                  → 'i1'   (already kebab-safe)
- */
-export function camelToKebab(s: string): string {
-  return s.replace(/[A-Z]/g, (m, i) => (i === 0 ? m.toLowerCase() : '-' + m.toLowerCase()))
-}
-
-function flattenColors(colors: Theme['colors'], prefix: string): Record<string, string> {
-  const out: Record<string, string> = {}
-  for (const [k, v] of Object.entries(colors)) {
-    if (typeof v === 'object' && v !== null) {
-      const ns = camelToKebab(k)
-      for (const [nk, nv] of Object.entries(v as Record<string, string>)) {
-        out[`${prefix}color-${ns}-${camelToKebab(nk)}`] = nv
-      }
-    } else {
-      out[`${prefix}color-${camelToKebab(k)}`] = v as string
-    }
-  }
-  return out
-}
-
-function flattenFamily(
-  family: Record<string, string | number>,
-  prefix: string,
-  namespace: string,
-): Record<string, string> {
-  const out: Record<string, string> = {}
-  for (const [k, v] of Object.entries(family)) {
-    out[`${prefix}${namespace}-${camelToKebab(k)}`] = String(v)
-  }
-  return out
-}
-
-/**
- * Emit a `{ [cssVarName]: value }` map for the given theme.
- *
- * Hand the result to:
- *
- *   - React: `<div style={vars as React.CSSProperties}>...`
- *   - Vue:   `:style="vars"`
- *   - Angular: `[ngStyle]="vars"`
- *   - Vanilla: `Object.assign(el.style, vars)` or emit
- *              `':root { ... }'` directly via {@link toCssDeclarationBlock}.
- *
- * The shape is stable: the same theme produces the same map across calls,
- * and `mergeTheme(base, override)` produces a superset emit (keys are the
- * same; values may differ).
- */
-export function themeToCssVars(theme: Theme, opts?: ThemeToCssVarsOptions): Record<string, string> {
-  const prefix = opts?.prefix ?? DEFAULT_PREFIX
-  if (!prefix.startsWith('--')) {
-    // Misuse caught here is much friendlier than the silent no-op CSS
-    // would give downstream.
-    throw new KLineChartError(
-      'INVALID_PARAM',
-      `themeToCssVars: prefix must start with '--', got ${JSON.stringify(prefix)}`,
-    )
-  }
-  return {
-    ...flattenColors(theme.colors, prefix),
-    ...flattenFamily(theme.spacing as unknown as Record<string, string>, prefix, 'spacing'),
-    ...flattenFamily(
-      theme.typography as unknown as Record<string, string | number>,
-      prefix,
-      'typography',
-    ),
-    ...flattenFamily(theme.motion as unknown as Record<string, string>, prefix, 'motion'),
-  }
-}
-
-/**
- * Render the emitted map as a `:root { ... }` CSS declaration block.
- * Useful for SSR scenarios where you want to inject a `<style>` element
- * server-side so the first paint already carries the theme.
- *
- *   const css = toCssDeclarationBlock(themeToCssVars(darkTheme))
- *   // → ":root {\n  --klc-color-background: #0E1116;\n  ...\n}"
- *
- * The selector defaults to `:root` but can be overridden — common
- * alternatives are `[data-theme="dark"]` for runtime theme switching
- * or `.klc-theme-dark` for scoped overrides.
- */
-export function toCssDeclarationBlock(
-  vars: Record<string, string>,
-  selector: string = ':root',
-): string {
-  const decls = Object.entries(vars)
-    .map(([k, v]) => `  ${k}: ${v};`)
-    .join('\n')
-  return `${selector} {\n${decls}\n}`
-}

package/src/types/kLine.ts

@@ -1,13 +0,0 @@
-import type { KLineData } from './price'
-
-export type kLineTrend = 'up' | 'down' | 'flat'
-
-export function getKLineTrend(KLineData: KLineData): kLineTrend {
-  if (KLineData.open > KLineData.close) {
-    return 'down'
-  } else if (KLineData.open < KLineData.close) {
-    return 'up'
-  } else {
-    return 'flat'
-  }
-}