@quantlife/qlchart 0.0.1

package/src/utils/themePresets.ts

@@ -0,0 +1,69 @@
+import { CrosshairMode } from 'lightweight-charts';
+import type { ThemeConfig } from '../types/index.js';
+import { formatFullTime, formatTickTime } from './timeFormatter.js';
+
+export const darkPreset: ThemeConfig = {
+  name: 'dark',
+  chart: {
+    layout: {
+      background: { color: '#131722' },
+      textColor: '#d1d4dc',
+    },
+    grid: {
+      vertLines: { color: '#1e222d' },
+      horzLines: { color: '#1e222d' },
+    },
+    crosshair: {
+      mode: CrosshairMode.Normal,
+      vertLine: { color: '#758696', labelBackgroundColor: '#38556a' },
+      horzLine: { color: '#758696', labelBackgroundColor: '#38556a' },
+    },
+    localization: {
+      timeFormatter: formatFullTime,
+      dateFormat: 'yyyy-MM-dd HH:mm:ss',
+    },
+    timeScale: {
+      timeVisible: true,
+      secondsVisible: true,
+      tickMarkFormatter: formatTickTime,
+    },
+  },
+  upColor: '#26a69a',
+  downColor: '#ef5350',
+  toolbarBg: '#1e222d',
+  toolbarText: '#d1d4dc',
+  toolbarActiveBg: '#2a2e39',
+};
+
+export const lightPreset: ThemeConfig = {
+  name: 'light',
+  chart: {
+    layout: {
+      background: { color: '#ffffff' },
+      textColor: '#131722',
+    },
+    grid: {
+      vertLines: { color: '#f0f3fa' },
+      horzLines: { color: '#f0f3fa' },
+    },
+    crosshair: {
+      mode: CrosshairMode.Normal,
+      vertLine: { color: '#758696', labelBackgroundColor: '#e0e3eb' },
+      horzLine: { color: '#758696', labelBackgroundColor: '#e0e3eb' },
+    },
+    localization: {
+      timeFormatter: formatFullTime,
+      dateFormat: 'yyyy-MM-dd HH:mm:ss',
+    },
+    timeScale: {
+      timeVisible: true,
+      secondsVisible: true,
+      tickMarkFormatter: formatTickTime,
+    },
+  },
+  upColor: '#26a69a',
+  downColor: '#ef5350',
+  toolbarBg: '#f0f3fa',
+  toolbarText: '#131722',
+  toolbarActiveBg: '#e0e3eb',
+};

package/src/utils/timeFormatter.ts

@@ -0,0 +1,29 @@
+import type { Time } from 'lightweight-charts';
+
+/**
+ * 完整时间格式：YYYY-MM-DD HH:mm:ss
+ * 用于十字线标签
+ */
+export function formatFullTime(time: Time): string {
+  const date = new Date((time as number) * 1000);
+  const yyyy = date.getFullYear();
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+  const HH = String(date.getHours()).padStart(2, '0');
+  const MM = String(date.getMinutes()).padStart(2, '0');
+  const ss = String(date.getSeconds()).padStart(2, '0');
+  return `${yyyy}-${mm}-${dd} ${HH}:${MM}:${ss}`;
+}
+
+/**
+ * 短时间格式：MM-DD HH:mm
+ * 用于时间轴底部刻度（空间有限，用短格式避免截断）
+ */
+export function formatTickTime(time: Time): string {
+  const date = new Date((time as number) * 1000);
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const dd = String(date.getDate()).padStart(2, '0');
+  const HH = String(date.getHours()).padStart(2, '0');
+  const MM = String(date.getMinutes()).padStart(2, '0');
+  return `${mm}-${dd} ${HH}:${MM}`;
+}

package/src/utils/timeScaleUtils.ts

@@ -0,0 +1,68 @@
+/**
+ * 时间轴工具模块
+ * 提供周期间隔映射和未来 whitespace 时间点生成
+ */
+
+/**
+ * 周期 → 秒数映射
+ * 与后端周期定义保持一致
+ */
+const PERIOD_INTERVAL: Record<string, number> = {
+  '1m': 60,
+  '5m': 300,
+  '15m': 900,
+  '30m': 1800,
+  '1h': 3600,
+  '4h': 14400,
+  '1d': 86400,
+  '1w': 604800,
+  '1M': 2592000, // 30天近似（注：月度周期的实际天数不固定，但 LWC 按固定间隔排列）
+};
+
+/**
+ * 获取周期对应的间隔秒数
+ */
+export function getPeriodInterval(period: string): number {
+  return PERIOD_INTERVAL[period] ?? 3600;
+}
+
+/**
+ * 生成未来 whitespace 时间点
+ *
+ * @param lastTime 最后一根K线的时间戳（秒，UTCTimestamp）
+ * @param period 当前周期（如 '1h', '4h', '1d'）
+ * @param count 生成的未来时间点数量（默认100）
+ * @returns whitespace 数据数组，每项只有 time 字段
+ */
+export function generateFutureWhitespace(
+  lastTime: number,
+  period: string,
+  count: number = 100,
+): Array<{ time: number }> {
+  const interval = getPeriodInterval(period);
+  const result: Array<{ time: number }> = [];
+
+  for (let i = 1; i <= count; i++) {
+    result.push({
+      time: lastTime + interval * i,
+    });
+  }
+
+  return result;
+}
+
+/**
+ * 计算需要的未来时间点数量（动态方案，初期不使用）
+ *
+ * @param chartWidth 图表区域宽度（像素）
+ * @param barSpacing 当前bar间距（像素）
+ * @param extraBufferRatio 额外缓冲比例（默认0.5）
+ */
+export function calcFuturePointCount(
+  chartWidth: number,
+  barSpacing: number,
+  extraBufferRatio: number = 0.5,
+): number {
+  const visibleBars = chartWidth / barSpacing;
+  return Math.ceil(visibleBars * (1 + extraBufferRatio));
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationDir": "./dist",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/typedoc.json

@@ -0,0 +1,10 @@
+{
+  "entryPoints": ["src/index.ts"],
+  "out": "doc/api-reference",
+  "name": "QLChart API Reference",
+  "includeVersion": true,
+  "readme": "none",
+  "excludePrivate": true,
+  "excludeInternal": true,
+  "tsconfig": "tsconfig.json"
+}

package/vite.config.standalone.ts

@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+/**
+ * Standalone 打包配置
+ * 入口为 standalone.ts，输出 IIFE 格式（纯JS API，CSS内联）
+ */
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/standalone.ts'),
+      name: 'QLChart',
+      formats: ['iife'],
+      fileName: () => 'qlchart.standalone.js',
+    },
+    rollupOptions: {
+      external: [],
+      output: {
+        exports: 'named',
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+    // ★ CSS 内联到 JS 中
+    cssCodeSplit: false,
+  },
+});

package/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [dts({ rollupTypes: true })],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'QLChart',
+      fileName: 'qlchart',
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+});