chartai 0.1.0 → 1.1.0

package/dist/chunk-n8ew0z0e.js

@@ -0,0 +1,637 @@
+import {
+  M
+} from "./chunk-93yrr7er.js";
+import {
+  __require
+} from "./chunk-5gtx3pza.js";
+
+// src/chart-library.ts
+class Chart {
+  id;
+  _mgr;
+  constructor(id, mgr) {
+    this.id = id;
+    this._mgr = mgr;
+  }
+  get _c() {
+    return this._mgr["charts"].get(this.id);
+  }
+  setData(series) {
+    this._mgr.updateSeries(this.id, series);
+  }
+  configure(patch) {
+    const c = this._c;
+    if (!c)
+      return;
+    Object.assign(c.config, patch);
+    const uniformNames = new Set((c.renderer.uniforms ?? []).map((u) => u.name));
+    const workerValues = {};
+    for (const key of Object.keys(patch)) {
+      const val = patch[key];
+      if (typeof val === "number" && uniformNames.has(key)) {
+        workerValues[key] = val;
+      }
+    }
+    if (Object.keys(workerValues).length > 0) {
+      Object.assign(c.customUniforms, workerValues);
+      this._mgr["worker"]?.postMessage({
+        type: M.SET_UNIFORMS,
+        id: this.id,
+        values: workerValues
+      });
+    }
+    if ("hiddenSeries" in patch) {
+      this._mgr["worker"]?.postMessage({
+        type: M.SET_STYLE,
+        id: this.id,
+        hiddenSeries: patch.hiddenSeries ?? new Set
+      });
+    }
+    if ("bgColor" in patch && patch.bgColor !== undefined) {
+      const [r, g, b] = patch.bgColor;
+      const wrap = c.el.querySelector("div");
+      if (wrap)
+        wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+      this._mgr["worker"]?.postMessage({
+        type: M.SET_STYLE,
+        id: this.id,
+        bgColor: patch.bgColor
+      });
+    }
+    this._mgr.requestRender(this.id);
+    this._mgr.drawChart(c);
+  }
+  addPlugin(plugin) {
+    const c = this._c;
+    if (!c || c.plugins.some((p) => p.name === plugin.name))
+      return;
+    const wrap = c.el.querySelector("div");
+    plugin.install?.(c, wrap);
+    c.plugins.push(plugin);
+    this._mgr.drawChart(c);
+  }
+  removePlugin(name) {
+    const c = this._c;
+    if (!c)
+      return;
+    const idx = c.plugins.findIndex((p) => p.name === name);
+    if (idx >= 0) {
+      c.plugins[idx].uninstall?.(c);
+      c.plugins.splice(idx, 1);
+      this._mgr.drawChart(c);
+    }
+  }
+  hasPlugin(name) {
+    return this._c?.plugins.some((p) => p.name === name) ?? false;
+  }
+  resetView() {
+    this._mgr.resetView(this.id);
+  }
+  destroy() {
+    this._mgr.destroy(this.id);
+  }
+}
+var _colorEl = null;
+function parseColor(c) {
+  if (typeof c !== "string")
+    return c;
+  if (!_colorEl) {
+    _colorEl = document.createElement("i");
+    _colorEl.style.cssText = "display:none";
+    document.body.appendChild(_colorEl);
+  }
+  _colorEl.style.color = c;
+  const m = getComputedStyle(_colorEl).color.match(/\d+/g);
+  return { r: +m[0] / 255, g: +m[1] / 255, b: +m[2] / 255 };
+}
+function resizeCanvas(canvas, cssW, cssH) {
+  const dpr = devicePixelRatio || 1;
+  canvas.width = Math.round(cssW * dpr);
+  canvas.height = Math.round(cssH * dpr);
+  if (canvas instanceof HTMLCanvasElement) {
+    canvas.style.width = `${cssW}px`;
+    canvas.style.height = `${cssH}px`;
+  }
+}
+
+class _ChartManager {
+  static instance = null;
+  worker = null;
+  charts = new Map;
+  renderers = new Map;
+  uiPlugins = [];
+  pendingRenderers = [];
+  chartIdCounter = 0;
+  _isDark = false;
+  _syncViews = false;
+  statsCallbacks = [];
+  currentStats = {
+    fps: 0,
+    renderMs: 0,
+    total: 0,
+    active: 0
+  };
+  visibilityObserver;
+  resizeObserver;
+  constructor() {
+    this._isDark = document.documentElement.classList.contains("dark");
+    this.visibilityObserver = new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        const id = e.target.dataset.chartId;
+        if (!id)
+          continue;
+        const chart = this.charts.get(id);
+        if (!chart)
+          continue;
+        chart.visible = e.isIntersecting;
+        this.worker?.postMessage({
+          type: M.SET_VISIBILITY,
+          id,
+          visible: e.isIntersecting
+        });
+        if (e.isIntersecting)
+          this.drawChart(chart);
+      }
+    }, { threshold: 0.01 });
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const e of entries) {
+        const id = e.target.dataset.chartId;
+        if (!id)
+          continue;
+        const chart = this.charts.get(id);
+        if (!chart)
+          continue;
+        const { width, height } = e.contentRect;
+        if (width <= 0 || height <= 0)
+          continue;
+        chart.width = width;
+        chart.height = height;
+        const dpr = devicePixelRatio || 1;
+        resizeCanvas(chart.backCanvas, width, height);
+        resizeCanvas(chart.frontCanvas, width, height);
+        const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(chart.renderer, chart);
+        this.worker?.postMessage({
+          type: M.RESIZE,
+          id,
+          width: Math.round(width * dpr),
+          height: Math.round(height * dpr),
+          bufferSizes,
+          perSeriesPassMeta
+        });
+        this.drawChart(chart);
+      }
+    });
+  }
+  static getInstance() {
+    if (!_ChartManager.instance)
+      _ChartManager.instance = new _ChartManager;
+    return _ChartManager.instance;
+  }
+  get isDark() {
+    return this._isDark;
+  }
+  get syncViews() {
+    return this._syncViews;
+  }
+  use(plugin) {
+    if ("passes" in plugin) {
+      const r = plugin;
+      this.renderers.set(r.name, r);
+      if (this.worker)
+        this.sendRendererRegistration(r);
+      else
+        this.pendingRenderers.push(r);
+    } else {
+      const p = plugin;
+      if (!this.uiPlugins.some((x) => x.name === p.name))
+        this.uiPlugins.push(p);
+    }
+  }
+  async init() {
+    if (this.worker)
+      return true;
+    return new Promise((resolve) => {
+      import("./worker-inline.js").then(({ WORKER_CODE }) => {
+        const blob = new Blob([WORKER_CODE], {
+          type: "application/javascript"
+        });
+        this.worker = new Worker(URL.createObjectURL(blob), {
+          type: "module"
+        });
+        this.setupWorkerHandlers(resolve);
+      }).catch(() => {
+        this.worker = new Worker(new URL("./gpu-worker.js", import.meta.url), { type: "module" });
+        this.setupWorkerHandlers(resolve);
+      });
+    });
+  }
+  setupWorkerHandlers(resolve) {
+    if (!this.worker)
+      return;
+    this.worker.onmessage = (e) => {
+      const { type, ...data } = e.data;
+      switch (type) {
+        case M.GPU_READY:
+          for (const r of this.pendingRenderers)
+            this.sendRendererRegistration(r);
+          this.pendingRenderers = [];
+          resolve(true);
+          break;
+        case M.ERROR:
+          console.error("chartai:", data.code);
+          resolve(false);
+          break;
+        case M.STATS:
+          this.currentStats = {
+            fps: data.fps,
+            renderMs: data.renderMs,
+            total: data.totalCharts,
+            active: data.activeCharts
+          };
+          for (const cb of this.statsCallbacks)
+            cb(this.currentStats);
+          break;
+      }
+    };
+    this.worker.onerror = (e) => {
+      console.error("chartai:", e);
+      resolve(false);
+    };
+    this.worker.postMessage({ type: M.INIT, isDark: this._isDark });
+  }
+  sendRendererRegistration(renderer) {
+    const bufferDefs = (renderer.buffers ?? []).map((buf) => ({
+      name: buf.name,
+      usages: buf.usages,
+      perSeries: renderer.passes.some((p) => p.perSeries !== false && p.bindings.some((b) => b.source === buf.name))
+    }));
+    this.worker?.postMessage({
+      type: M.REGISTER_RENDERER,
+      name: renderer.name,
+      shaders: renderer.shaders,
+      passes: renderer.passes.map((p) => ({
+        type: p.type,
+        shader: p.shader,
+        bindings: p.bindings,
+        perSeries: p.perSeries !== false,
+        topology: p.topology,
+        loadOp: p.loadOp,
+        blend: p.blend
+      })),
+      bufferDefs,
+      uniformDefs: renderer.uniforms ?? []
+    });
+  }
+  computeRendererMeta(renderer, chart) {
+    const bufferSizes = {};
+    const perSeriesPassMeta = [];
+    const series = chart.series.length > 0 ? chart.series : [
+      {
+        rawX: [],
+        rawY: [],
+        extra: {},
+        label: "",
+        color: { r: 0, g: 0, b: 0 }
+      }
+    ];
+    const dpr = devicePixelRatio || 1;
+    const physW = Math.round(chart.width * dpr);
+    const physH = Math.round(chart.height * dpr);
+    for (const s of series) {
+      const ctx = {
+        width: physW,
+        height: physH,
+        samples: s.rawX.length,
+        seriesCount: series.length,
+        bounds: chart.bounds,
+        view: chart.view
+      };
+      for (const buf of renderer.buffers ?? []) {
+        const size = buf.bytes(ctx);
+        bufferSizes[buf.name] = Math.max(bufferSizes[buf.name] ?? 0, size);
+      }
+      perSeriesPassMeta.push(renderer.passes.map((p) => ({
+        dispatch: p.dispatch?.(ctx),
+        draw: p.draw?.(ctx)
+      })));
+    }
+    return { bufferSizes, perSeriesPassMeta };
+  }
+  create(config) {
+    if (!this.worker)
+      throw new Error("No worker. Call init().");
+    const renderer = this.renderers.get(config.type);
+    if (!renderer)
+      throw new Error(`No renderer "${config.type}". Call manager.use() first.`);
+    const id = `chart-${++this.chartIdCounter}`;
+    const el = document.createElement("div");
+    el.dataset.chartId = id;
+    el.style.cssText = "width:100%;height:100%;position:relative;";
+    const wrap = document.createElement("div");
+    wrap.dataset.chartId = id;
+    wrap.style.cssText = "width:100%;height:100%;position:relative;";
+    const mkCanvas = (z, events) => {
+      const c = document.createElement("canvas");
+      c.style.cssText = `position:absolute;inset:0;width:100%;height:100%;pointer-events:${events};z-index:${z};`;
+      return c;
+    };
+    const backCanvas = mkCanvas(0, "none");
+    const gpuCanvas = mkCanvas(1, "auto");
+    const frontCanvas = mkCanvas(2, "none");
+    wrap.append(backCanvas, gpuCanvas, frontCanvas);
+    el.appendChild(wrap);
+    config.container.appendChild(el);
+    let offscreen;
+    try {
+      offscreen = gpuCanvas.transferControlToOffscreen();
+    } catch (e) {
+      throw new Error(`Failed OffscreenCanvas: ${e}`);
+    }
+    const rect = wrap.getBoundingClientRect();
+    const cssW = rect.width || 400;
+    const cssH = rect.height || 200;
+    resizeCanvas(offscreen, cssW, cssH);
+    resizeCanvas(backCanvas, cssW, cssH);
+    resizeCanvas(frontCanvas, cssW, cssH);
+    if (config.bgColor) {
+      const [r, g, b] = config.bgColor;
+      wrap.style.background = `rgb(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)})`;
+    }
+    const customUniforms = {};
+    for (const u of renderer.uniforms ?? []) {
+      const v = config[u.name];
+      customUniforms[u.name] = typeof v === "number" ? v : u.default;
+    }
+    const chart = {
+      id,
+      config,
+      el,
+      backCanvas,
+      frontCanvas,
+      width: cssW,
+      height: cssH,
+      series: [],
+      bounds: { minX: 0, maxX: 1, minY: 0, maxY: 1 },
+      view: { panX: 0, panY: 0, zoomX: 1, zoomY: 1 },
+      homeView: { panX: 0, panY: 0, zoomX: 1, zoomY: 1 },
+      visible: true,
+      dragging: false,
+      plugins: [...this.uiPlugins],
+      renderer,
+      customUniforms
+    };
+    this.charts.set(id, chart);
+    const dpr = devicePixelRatio || 1;
+    const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(renderer, chart);
+    this.worker.postMessage({
+      type: M.REGISTER_CHART,
+      id,
+      canvas: offscreen,
+      rendererName: config.type,
+      bgColor: config.bgColor ?? null,
+      bufferSizes,
+      perSeriesPassMeta,
+      customUniformValues: customUniforms,
+      width: Math.round(cssW * dpr),
+      height: Math.round(cssH * dpr)
+    }, [offscreen]);
+    this.visibilityObserver.observe(el);
+    this.resizeObserver.observe(wrap);
+    for (const plugin of chart.plugins)
+      plugin.install?.(chart, wrap);
+    renderer.install?.(chart, wrap);
+    this.updateSeries(id, config.series);
+    return new Chart(id, this);
+  }
+  destroy(id) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    chart.renderer.uninstall?.(chart);
+    for (const p of chart.plugins)
+      p.uninstall?.(chart);
+    this.visibilityObserver.unobserve(chart.el);
+    const wrap = chart.el.querySelector("div");
+    if (wrap)
+      this.resizeObserver.unobserve(wrap);
+    chart.el.remove();
+    this.worker?.postMessage({ type: M.UNREGISTER_CHART, id });
+    this.charts.delete(id);
+  }
+  updateSeries(id, series) {
+    const chart = this.charts.get(id);
+    if (!chart || !this.worker || series.length === 0)
+      return;
+    chart.config.hiddenSeries = series.reduce((acc, s, i) => {
+      if (s.hidden)
+        acc.add(i);
+      return acc;
+    }, new Set);
+    chart.series = series.map((s) => {
+      const n = s.x.length;
+      const color = parseColor(s.color);
+      if (n === 0)
+        return { label: s.label, color, rawX: [], rawY: [], extra: {} };
+      const idx = Array.from({ length: n }, (_, i) => i).sort((a, b) => s.x[a] - s.x[b]);
+      const extra = {};
+      for (const key in s) {
+        if (key !== "label" && key !== "color" && key !== "x" && key !== "y" && Array.isArray(s[key])) {
+          extra[key] = idx.map((i) => s[key][i]);
+        }
+      }
+      return {
+        label: s.label,
+        color,
+        rawX: idx.map((i) => s.x[i]),
+        rawY: idx.map((i) => s.y[i]),
+        extra
+      };
+    });
+    const customBounds = chart.renderer.computeBounds?.(chart.series);
+    let { minX, maxX, minY, maxY } = customBounds ?? (() => {
+      let minX2 = Infinity, maxX2 = -Infinity, minY2 = Infinity, maxY2 = -Infinity;
+      for (const s of chart.series) {
+        for (let i = 0;i < s.rawX.length; i++) {
+          if (s.rawX[i] < minX2)
+            minX2 = s.rawX[i];
+          if (s.rawX[i] > maxX2)
+            maxX2 = s.rawX[i];
+          if (s.rawY[i] < minY2)
+            minY2 = s.rawY[i];
+          if (s.rawY[i] > maxY2)
+            maxY2 = s.rawY[i];
+        }
+      }
+      const px = (maxX2 - minX2) * 0.05 || 1;
+      const py = (maxY2 - minY2) * 0.1 || 1;
+      return {
+        minX: minX2 - px,
+        maxX: maxX2 + px,
+        minY: minY2 - py,
+        maxY: maxY2 + py
+      };
+    })();
+    const db = chart.config.defaultBounds;
+    if (db) {
+      if (db.minX !== undefined)
+        minX = db.minX;
+      if (db.maxX !== undefined)
+        maxX = db.maxX;
+      if (db.minY !== undefined)
+        minY = db.minY;
+      if (db.maxY !== undefined)
+        maxY = db.maxY;
+    }
+    chart.bounds = { minX, maxX, minY, maxY };
+    const { bufferSizes, perSeriesPassMeta } = this.computeRendererMeta(chart.renderer, chart);
+    const hidden = chart.config.hiddenSeries ?? new Set;
+    const seriesData = chart.series.map((s, i) => {
+      const extra = {};
+      for (const key in s.extra)
+        extra[key] = new Float32Array(s.extra[key]);
+      return {
+        label: s.label,
+        colorR: s.color.r,
+        colorG: s.color.g,
+        colorB: s.color.b,
+        dataX: new Float32Array(s.rawX),
+        dataY: new Float32Array(s.rawY),
+        extra,
+        hidden: hidden.has(i)
+      };
+    });
+    const transferables = seriesData.flatMap((s) => [
+      s.dataX.buffer,
+      s.dataY.buffer,
+      ...Object.values(s.extra).map((a) => a.buffer)
+    ]);
+    this.worker.postMessage({
+      type: M.UPDATE_SERIES,
+      id,
+      series: seriesData,
+      bounds: chart.bounds,
+      bufferSizes,
+      perSeriesPassMeta
+    }, transferables);
+    this.sendViewTransform(chart);
+    this.drawChart(chart);
+  }
+  setSyncViews(sync) {
+    this._syncViews = sync;
+  }
+  setTheme(dark) {
+    this._isDark = dark;
+    this.worker?.postMessage({ type: M.THEME, isDark: dark });
+    for (const chart of this.charts.values())
+      this.drawChart(chart);
+  }
+  onStats(callback) {
+    this.statsCallbacks.push(callback);
+    return () => {
+      const idx = this.statsCallbacks.indexOf(callback);
+      if (idx >= 0)
+        this.statsCallbacks.splice(idx, 1);
+    };
+  }
+  getStats() {
+    return { ...this.currentStats };
+  }
+  resetView(id) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    for (const p of chart.plugins)
+      p.resetView?.(chart);
+    const { panX: spx, panY: spy, zoomX: szx, zoomY: szy } = chart.view;
+    const { panX: tpx, panY: tpy, zoomX: tzx, zoomY: tzy } = chart.homeView;
+    const t0 = performance.now();
+    const animate = () => {
+      const t = Math.min(1, (performance.now() - t0) / 300);
+      const e = 1 - Math.pow(1 - t, 3);
+      chart.view.panX = spx + (tpx - spx) * e;
+      chart.view.panY = spy + (tpy - spy) * e;
+      chart.view.zoomX = szx + (tzx - szx) * e;
+      chart.view.zoomY = szy + (tzy - szy) * e;
+      this.sendViewTransform(chart);
+      this.drawChart(chart);
+      if (this._syncViews)
+        this.syncAllViews(chart);
+      if (t < 1)
+        requestAnimationFrame(animate);
+    };
+    requestAnimationFrame(animate);
+  }
+  setHiddenSeries(id, hidden) {
+    const chart = this.charts.get(id);
+    if (!chart)
+      return;
+    chart.config.hiddenSeries = new Set(hidden);
+    this.worker?.postMessage({
+      type: M.SET_STYLE,
+      id,
+      hiddenSeries: chart.config.hiddenSeries
+    });
+    this.drawChart(chart);
+  }
+  requestRender(id) {
+    const chart = this.charts.get(id);
+    if (chart)
+      this.sendViewTransform(chart);
+  }
+  sendViewTransform(chart) {
+    this.worker?.postMessage({
+      type: M.VIEW_TRANSFORM,
+      id: chart.id,
+      panX: chart.view.panX,
+      panY: chart.view.panY,
+      zoomX: chart.view.zoomX,
+      zoomY: chart.view.zoomY
+    });
+  }
+  syncAllViews(source) {
+    const transforms = [];
+    for (const chart of this.charts.values()) {
+      if (chart.id !== source.id) {
+        chart.view = { ...source.view };
+        transforms.push({ id: chart.id });
+        this.drawChart(chart);
+      }
+    }
+    if (transforms.length > 0) {
+      this.worker?.postMessage({
+        type: M.BATCH_VIEW_TRANSFORM,
+        panX: source.view.panX,
+        panY: source.view.panY,
+        zoomX: source.view.zoomX,
+        zoomY: source.view.zoomY,
+        transforms
+      });
+    }
+  }
+  drawChart(chart) {
+    if (!chart.visible)
+      return;
+    const dpr = devicePixelRatio || 1;
+    const backCtx = chart.backCanvas.getContext("2d");
+    if (backCtx) {
+      backCtx.clearRect(0, 0, chart.backCanvas.width, chart.backCanvas.height);
+      backCtx.save();
+      backCtx.scale(dpr, dpr);
+      for (const p of chart.plugins)
+        p.beforeDraw?.(backCtx, chart);
+      backCtx.restore();
+    }
+    const ctx = chart.frontCanvas.getContext("2d");
+    if (ctx) {
+      ctx.clearRect(0, 0, chart.frontCanvas.width, chart.frontCanvas.height);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      for (const p of chart.plugins)
+        p.afterDraw?.(ctx, chart);
+      ctx.restore();
+    }
+  }
+}
+var ChartManager = _ChartManager.getInstance();
+
+export { Chart, ChartManager };