@rm-graph/core 0.1.2 → 0.1.4

package/dist/index.js

@@ -2,6 +2,7 @@
 
 var chunkKATRK3C3_js = require('./chunk-KATRK3C3.js');
 var scichart = require('scichart');
+var SciChartJSLightTheme = require('scichart/Charting/Themes/SciChartJSLightTheme');
 
 // src/utils/helpers.ts
 function generateId(prefix = "chart") {
@@ -128,7 +129,7 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/charts/BaseChart.ts
-var SCICHART_VERSION = "3.5.750";
+var SCICHART_VERSION = "4.0.933";
 var sciChartConfigured = false;
 function ensureSciChartConfigured() {
   if (sciChartConfigured) return;
@@ -138,8 +139,7 @@ function ensureSciChartConfigured() {
   } catch {
     try {
       scichart.SciChartSurface.configure({
-        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION}/_wasm/scichart2d.wasm`,
-        dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION}/_wasm/scichart2d.data`
+        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION}/_wasm/scichart2d.wasm`
       });
       sciChartConfigured = true;
     } catch {
@@ -224,6 +224,42 @@ var BaseChart = class {
   applyTheme() {
     if (!this.surface) return;
     this.surface.background = this.theme.backgroundColor ?? "#ffffff";
+    try {
+      const themeName = this.config.theme;
+      const { SciChartJSDarkTheme, SciChartJSLightTheme: SciChartJSLightTheme2 } = chunkKATRK3C3_js.__require("scichart");
+      const nextThemeProvider = themeName === "light" ? new SciChartJSLightTheme2() : new SciChartJSDarkTheme();
+      this.surface.applyTheme?.(nextThemeProvider);
+    } catch {
+    }
+    try {
+      const applyAxisTheme = (axis) => {
+        if (!axis) return;
+        axis.axisTitleStyle = {
+          ...axis.axisTitleStyle ?? {},
+          color: this.theme.axis?.titleColor,
+          fontFamily: this.theme.fontFamily
+        };
+        axis.labelStyle = {
+          ...axis.labelStyle ?? {},
+          color: this.theme.axis?.labelColor,
+          fontFamily: this.theme.fontFamily
+        };
+        axis.majorGridLineStyle = {
+          ...axis.majorGridLineStyle ?? {},
+          color: this.theme.axis?.gridLineColor
+        };
+        axis.axisBorder = {
+          ...axis.axisBorder ?? {},
+          color: this.theme.axis?.lineColor
+        };
+      };
+      const xAxes = this.surface.xAxes;
+      const yAxes = this.surface.yAxes;
+      const toArray = (axes) => axes?.asArray?.() ?? axes?.itemsArray ?? axes?.items ?? [];
+      for (const axis of toArray(xAxes)) applyAxisTheme(axis);
+      for (const axis of toArray(yAxes)) applyAxisTheme(axis);
+    } catch {
+    }
   }
   /**
    * Set up resize observer for responsive charts
@@ -256,915 +292,97 @@ var BaseChart = class {
     this.handleResize();
   }
   /**
-   * Export chart as image
-   */
-  async exportImage(format = "png") {
-    if (!this.surface) {
-      throw new Error("Chart not initialized");
-    }
-    const canvas = this.container?.querySelector("canvas");
-    if (!canvas) {
-      throw new Error("Canvas not found");
-    }
-    const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
-    return canvas.toDataURL(mimeType);
-  }
-  /**
-   * Add event listener
-   */
-  on(event, handler) {
-    if (!this.eventHandlers.has(event)) {
-      this.eventHandlers.set(event, /* @__PURE__ */ new Set());
-    }
-    this.eventHandlers.get(event).add(handler);
-  }
-  /**
-   * Remove event listener
-   */
-  off(event, handler) {
-    const handlers = this.eventHandlers.get(event);
-    if (handlers) {
-      handlers.delete(handler);
-    }
-  }
-  /**
-   * Emit an event
-   */
-  emit(event, data) {
-    const handlers = this.eventHandlers.get(event);
-    if (handlers) {
-      handlers.forEach((handler) => handler(data));
-    }
-  }
-  /**
-   * Destroy the chart and clean up resources
-   */
-  destroy() {
-    if (this.isDestroyed) return;
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    this.eventHandlers.clear();
-    if (this.surface) {
-      this.surface.delete();
-      this.surface = null;
-    }
-    if (this.container) {
-      this.container.innerHTML = "";
-    }
-    this.isDestroyed = true;
-    this.isInitialized = false;
-  }
-  /**
-   * Get current configuration
-   */
-  getConfig() {
-    return { ...this.config };
-  }
-  /**
-   * Get current theme
-   */
-  getTheme() {
-    return { ...this.theme };
-  }
-  /**
-   * Check if chart is initialized
-   */
-  isReady() {
-    return this.isInitialized && !this.isDestroyed;
-  }
-};
-function getSciChartTheme(themeName) {
-  switch (themeName) {
-    case "light":
-      return new scichart.SciChartJSLightTheme();
-    case "dark":
-    case "modern":
-    case "midnight":
-    default:
-      return new scichart.SciChartJSDarkTheme();
-  }
-}
-var LineChart = class extends BaseChart {
-  constructor(config) {
-    super(config);
-    this.dataSeries = /* @__PURE__ */ new Map();
-    this.renderableSeries = [];
-    this.wasmContext = null;
-  }
-  /**
-   * Create the SciChart surface for line chart
-   */
-  async createSurface() {
-    if (!this.container) {
-      throw new Error("Container not set");
-    }
-    const sciChartTheme = getSciChartTheme(this.config.theme);
-    if (!this.container.id) {
-      this.container.id = this.id;
-    }
-    const { sciChartSurface, wasmContext } = await scichart.SciChartSurface.create(
-      this.container,
-      {
-        theme: sciChartTheme
-      }
-    );
-    this.surface = sciChartSurface;
-    this.wasmContext = wasmContext;
-    const xAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.xAxis?.title,
-      drawMajorGridLines: this.config.xAxis?.gridLines?.show ?? true,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      majorGridLineStyle: {
-        color: this.theme.axis?.gridLineColor ?? "#e9ecef",
-        strokeThickness: 1
-      },
-      axisBorder: {
-        color: this.theme.axis?.lineColor ?? "#dee2e6"
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    const yAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.yAxis?.title,
-      drawMajorGridLines: this.config.yAxis?.gridLines?.show ?? true,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      majorGridLineStyle: {
-        color: this.theme.axis?.gridLineColor ?? "#e9ecef",
-        strokeThickness: 1
-      },
-      axisBorder: {
-        color: this.theme.axis?.lineColor ?? "#dee2e6"
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    if (this.config.xAxis?.min !== void 0 && this.config.xAxis?.max !== void 0) {
-      xAxis.visibleRange = new scichart.NumberRange(this.config.xAxis.min, this.config.xAxis.max);
-      xAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    if (this.config.yAxis?.min !== void 0 && this.config.yAxis?.max !== void 0) {
-      yAxis.visibleRange = new scichart.NumberRange(this.config.yAxis.min, this.config.yAxis.max);
-      yAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    sciChartSurface.xAxes.add(xAxis);
-    sciChartSurface.yAxes.add(yAxis);
-    if (this.config.tooltip?.enabled !== false) {
-      sciChartSurface.chartModifiers.add(
-        new scichart.RolloverModifier({
-          showTooltip: true,
-          showAxisLabel: true
-        })
-      );
-    }
-    sciChartSurface.chartModifiers.add(new scichart.ZoomPanModifier());
-    sciChartSurface.chartModifiers.add(new scichart.MouseWheelZoomModifier());
-    this.addSeries(this.config.series);
-  }
-  /**
-   * Add series to the chart
-   */
-  addSeries(seriesConfigs) {
-    if (!this.surface || !this.wasmContext) return;
-    const wasmContext = this.wasmContext;
-    const colorPalette = this.theme.colorPalette ?? [];
-    seriesConfigs.forEach((seriesConfig, index) => {
-      const data = normalizeDataPoints(seriesConfig.data);
-      const xValues = extractXValues(data);
-      const yValues = extractYValues(data);
-      const dataSeries = new scichart.XyDataSeries(wasmContext, {
-        xValues,
-        yValues,
-        dataSeriesName: seriesConfig.name
-      });
-      this.dataSeries.set(seriesConfig.name, dataSeries);
-      const color = seriesConfig.color ?? colorPalette[index % colorPalette.length] ?? "#6366f1";
-      const lineSeries = new scichart.FastLineRenderableSeries(wasmContext);
-      lineSeries.dataSeries = dataSeries;
-      lineSeries.stroke = color;
-      lineSeries.strokeThickness = this.config.lineWidth ?? 2;
-      if (this.config.showPoints) {
-        lineSeries.pointMarker = new scichart.EllipsePointMarker(wasmContext, {
-          width: this.config.pointSize ?? 8,
-          height: this.config.pointSize ?? 8,
-          fill: color,
-          stroke: color,
-          strokeThickness: 0
-        });
-      }
-      if (this.config.animation !== false) {
-        lineSeries.animation = new scichart.SweepAnimation({
-          duration: typeof this.config.animation === "object" ? this.config.animation.duration ?? 500 : 500
-        });
-      }
-      this.renderableSeries.push(lineSeries);
-      this.surface.renderableSeries.add(lineSeries);
-    });
-  }
-  /**
-   * Set new data for the chart
-   */
-  setData(data) {
-    if (!this.surface) {
-      this.config.series = data;
-      return;
-    }
-    this.clearSeries();
-    this.config.series = data;
-    this.addSeries(data);
-  }
-  /**
-   * Update specific series data
+   * Reset zoom to fit all data (zoom extents)
+   * Note: not part of the ChartInstance interface, but available on concrete chart classes.
    */
-  updateSeriesData(seriesName, data) {
-    const dataSeries = this.dataSeries.get(seriesName);
-    if (!dataSeries) {
-      console.warn(`Series "${seriesName}" not found`);
-      return;
-    }
-    const normalized = normalizeDataPoints(data);
-    const xValues = extractXValues(normalized);
-    const yValues = extractYValues(normalized);
-    dataSeries.clear();
-    dataSeries.appendRange(xValues, yValues);
-  }
-  /**
-   * Append data to a series
-   */
-  appendData(seriesName, data) {
-    const dataSeries = this.dataSeries.get(seriesName);
-    if (!dataSeries) {
-      console.warn(`Series "${seriesName}" not found`);
-      return;
-    }
-    const points = Array.isArray(data) ? data : [data];
-    const normalized = normalizeDataPoints(points);
-    const xValues = extractXValues(normalized);
-    const yValues = extractYValues(normalized);
-    dataSeries.appendRange(xValues, yValues);
-  }
-  /**
-   * Clear all series
-   */
-  clearSeries() {
-    if (!this.surface) return;
-    this.renderableSeries.forEach((series) => {
-      this.surface.renderableSeries.remove(series);
-      series.delete();
-    });
-    this.renderableSeries = [];
-    this.dataSeries.forEach((ds) => ds.delete());
-    this.dataSeries.clear();
-  }
-  /**
-   * Update chart
-   */
-  update() {
-    if (!this.surface) return;
-    this.applyTheme();
-    this.surface.invalidateElement();
-  }
-  /**
-   * Apply theme to line chart
-   */
-  applyTheme() {
-    super.applyTheme();
+  resetZoom() {
     if (!this.surface) return;
-    const colorPalette = this.theme.colorPalette ?? [];
-    this.renderableSeries.forEach((series, index) => {
-      const originalColor = this.config.series[index]?.color;
-      if (!originalColor) {
-        series.stroke = colorPalette[index % colorPalette.length];
-      }
-    });
-  }
-  /**
-   * Destroy and clean up
-   */
-  destroy() {
-    this.clearSeries();
-    super.destroy();
-  }
-};
-async function createLineChart(container, config) {
-  const chart = new LineChart(config);
-  await chart.init(container);
-  return chart;
-}
-function getSciChartTheme2(themeName) {
-  switch (themeName) {
-    case "light":
-      return new scichart.SciChartJSLightTheme();
-    case "dark":
-    case "modern":
-    case "midnight":
-    default:
-      return new scichart.SciChartJSDarkTheme();
-  }
-}
-var BarChart = class extends BaseChart {
-  constructor(config) {
-    super(config);
-    this.dataSeries = /* @__PURE__ */ new Map();
-    this.renderableSeries = [];
-    this.wasmContext = null;
-  }
-  /**
-   * Create the SciChart surface for bar chart
-   */
-  async createSurface() {
-    if (!this.container) {
-      throw new Error("Container not set");
-    }
-    const sciChartTheme = getSciChartTheme2(this.config.theme);
-    if (!this.container.id) {
-      this.container.id = this.id;
-    }
-    const { sciChartSurface, wasmContext } = await scichart.SciChartSurface.create(
-      this.container,
-      {
-        theme: sciChartTheme
-      }
-    );
-    this.surface = sciChartSurface;
-    this.wasmContext = wasmContext;
-    const xAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.xAxis?.title,
-      drawMajorGridLines: this.config.xAxis?.gridLines?.show ?? false,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    const yAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.yAxis?.title,
-      drawMajorGridLines: this.config.yAxis?.gridLines?.show ?? true,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always,
-      growBy: new scichart.NumberRange(0, 0.1)
-      // Add 10% padding at top
-    });
-    if (this.config.xAxis?.min !== void 0 && this.config.xAxis?.max !== void 0) {
-      xAxis.visibleRange = new scichart.NumberRange(this.config.xAxis.min, this.config.xAxis.max);
-      xAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    if (this.config.yAxis?.min !== void 0 && this.config.yAxis?.max !== void 0) {
-      yAxis.visibleRange = new scichart.NumberRange(this.config.yAxis.min, this.config.yAxis.max);
-      yAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    sciChartSurface.xAxes.add(xAxis);
-    sciChartSurface.yAxes.add(yAxis);
-    if (this.config.tooltip?.enabled !== false) {
-      sciChartSurface.chartModifiers.add(
-        new scichart.RolloverModifier({
-          showTooltip: true,
-          showAxisLabel: true
-        })
-      );
-    }
-    sciChartSurface.chartModifiers.add(new scichart.ZoomPanModifier());
-    this.addSeries(this.config.series);
-  }
-  /**
-   * Add series to the chart
-   */
-  addSeries(seriesConfigs) {
-    if (!this.surface || !this.wasmContext) return;
-    const wasmContext = this.wasmContext;
-    const colorPalette = this.theme.colorPalette ?? [];
-    const seriesCount = seriesConfigs.length;
-    const dataPointWidth = this.config.barWidth ?? 0.7;
-    seriesConfigs.forEach((seriesConfig, index) => {
-      const data = normalizeDataPoints(seriesConfig.data);
-      let xValues = extractXValues(data);
-      if (!this.config.stacked && seriesCount > 1) {
-        const offset = (index - (seriesCount - 1) / 2) * (dataPointWidth / seriesCount);
-        xValues = xValues.map((x) => x + offset);
-      }
-      const yValues = extractYValues(data);
-      const dataSeries = new scichart.XyDataSeries(wasmContext, {
-        xValues,
-        yValues,
-        dataSeriesName: seriesConfig.name
-      });
-      this.dataSeries.set(seriesConfig.name, dataSeries);
-      const color = seriesConfig.color ?? colorPalette[index % colorPalette.length] ?? "#6366f1";
-      const columnSeries = new scichart.FastColumnRenderableSeries(wasmContext);
-      columnSeries.dataSeries = dataSeries;
-      columnSeries.fill = color;
-      columnSeries.stroke = color;
-      columnSeries.strokeThickness = 0;
-      columnSeries.dataPointWidth = this.config.stacked ? dataPointWidth : dataPointWidth / seriesCount;
-      columnSeries.cornerRadius = this.config.borderRadius ?? 0;
-      if (this.config.animation !== false) {
-        columnSeries.animation = new scichart.WaveAnimation({
-          duration: typeof this.config.animation === "object" ? this.config.animation.duration ?? 500 : 500
-        });
-      }
-      columnSeries.fillLinearGradient = new scichart.GradientParams(
-        new scichart.Point(0, 0),
-        new scichart.Point(0, 1),
-        [
-          { color, offset: 0 },
-          { color: hexToRgba(color, 0.7), offset: 1 }
-        ]
-      );
-      this.renderableSeries.push(columnSeries);
-      this.surface.renderableSeries.add(columnSeries);
-    });
-  }
-  /**
-   * Set new data for the chart
-   */
-  setData(data) {
-    if (!this.surface) {
-      this.config.series = data;
-      return;
-    }
-    this.clearSeries();
-    this.config.series = data;
-    this.addSeries(data);
-  }
-  /**
-   * Update specific series data
-   */
-  updateSeriesData(seriesName, data) {
-    const dataSeries = this.dataSeries.get(seriesName);
-    if (!dataSeries) {
-      console.warn(`Series "${seriesName}" not found`);
-      return;
-    }
-    const normalized = normalizeDataPoints(data);
-    const xValues = extractXValues(normalized);
-    const yValues = extractYValues(normalized);
-    dataSeries.clear();
-    dataSeries.appendRange(xValues, yValues);
-  }
-  /**
-   * Clear all series
-   */
-  clearSeries() {
-    if (!this.surface) return;
-    this.renderableSeries.forEach((series) => {
-      this.surface.renderableSeries.remove(series);
-      series.delete();
-    });
-    this.renderableSeries = [];
-    this.dataSeries.forEach((ds) => ds.delete());
-    this.dataSeries.clear();
-  }
-  /**
-   * Update chart
-   */
-  update() {
-    if (!this.surface) return;
-    this.applyTheme();
-    this.surface.invalidateElement();
-  }
-  /**
-   * Destroy and clean up
-   */
-  destroy() {
-    this.clearSeries();
-    super.destroy();
-  }
-};
-async function createBarChart(container, config) {
-  const chart = new BarChart(config);
-  await chart.init(container);
-  return chart;
-}
-function getSciChartTheme3(themeName) {
-  switch (themeName) {
-    case "light":
-      return new scichart.SciChartJSLightTheme();
-    case "dark":
-    case "modern":
-    case "midnight":
-    default:
-      return new scichart.SciChartJSDarkTheme();
-  }
-}
-var AreaChart = class extends BaseChart {
-  constructor(config) {
-    super(config);
-    this.dataSeries = /* @__PURE__ */ new Map();
-    this.renderableSeries = [];
-    this.wasmContext = null;
-  }
-  /**
-   * Create the SciChart surface for area chart
-   */
-  async createSurface() {
-    if (!this.container) {
-      throw new Error("Container not set");
-    }
-    const sciChartTheme = getSciChartTheme3(this.config.theme);
-    if (!this.container.id) {
-      this.container.id = this.id;
+    try {
+      this.surface.zoomExtents?.();
+    } catch {
     }
-    const { sciChartSurface, wasmContext } = await scichart.SciChartSurface.create(
-      this.container,
-      {
-        theme: sciChartTheme
-      }
-    );
-    this.surface = sciChartSurface;
-    this.wasmContext = wasmContext;
-    const xAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.xAxis?.title,
-      drawMajorGridLines: this.config.xAxis?.gridLines?.show ?? true,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    const yAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.yAxis?.title,
-      drawMajorGridLines: this.config.yAxis?.gridLines?.show ?? true,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always,
-      growBy: new scichart.NumberRange(0, 0.1)
-    });
-    if (this.config.xAxis?.min !== void 0 && this.config.xAxis?.max !== void 0) {
-      xAxis.visibleRange = new scichart.NumberRange(this.config.xAxis.min, this.config.xAxis.max);
-      xAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    if (this.config.yAxis?.min !== void 0 && this.config.yAxis?.max !== void 0) {
-      yAxis.visibleRange = new scichart.NumberRange(this.config.yAxis.min, this.config.yAxis.max);
-      yAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    sciChartSurface.xAxes.add(xAxis);
-    sciChartSurface.yAxes.add(yAxis);
-    if (this.config.tooltip?.enabled !== false) {
-      sciChartSurface.chartModifiers.add(
-        new scichart.RolloverModifier({
-          showTooltip: true,
-          showAxisLabel: true
-        })
-      );
-    }
-    sciChartSurface.chartModifiers.add(new scichart.ZoomPanModifier());
-    sciChartSurface.chartModifiers.add(new scichart.MouseWheelZoomModifier());
-    this.addSeries(this.config.series);
   }
   /**
-   * Add series to the chart
-   */
-  addSeries(seriesConfigs) {
-    if (!this.surface || !this.wasmContext) return;
-    const wasmContext = this.wasmContext;
-    const colorPalette = this.theme.colorPalette ?? [];
-    const fillOpacity = this.config.fillOpacity ?? 0.5;
-    seriesConfigs.forEach((seriesConfig, index) => {
-      const data = normalizeDataPoints(seriesConfig.data);
-      const xValues = extractXValues(data);
-      const yValues = extractYValues(data);
-      const dataSeries = new scichart.XyDataSeries(wasmContext, {
-        xValues,
-        yValues,
-        dataSeriesName: seriesConfig.name
-      });
-      this.dataSeries.set(seriesConfig.name, dataSeries);
-      const color = seriesConfig.color ?? colorPalette[index % colorPalette.length] ?? "#6366f1";
-      const areaSeries = new scichart.FastMountainRenderableSeries(wasmContext, {
-        dataSeries,
-        stroke: color,
-        strokeThickness: this.config.lineWidth ?? 2,
-        fill: hexToRgba(color, fillOpacity),
-        ...this.config.animation !== false && {
-          animation: new scichart.SweepAnimation({
-            duration: typeof this.config.animation === "object" ? this.config.animation.duration ?? 500 : 500
-          })
-        }
-      });
-      areaSeries.fillLinearGradient = new scichart.GradientParams(
-        new scichart.Point(0, 0),
-        new scichart.Point(0, 1),
-        [
-          { color: hexToRgba(color, fillOpacity), offset: 0 },
-          { color: hexToRgba(color, 0.05), offset: 1 }
-        ]
-      );
-      this.renderableSeries.push(areaSeries);
-      this.surface.renderableSeries.add(areaSeries);
-    });
-  }
-  /**
-   * Set new data for the chart
+   * Export chart as image
    */
-  setData(data) {
+  async exportImage(format = "png") {
     if (!this.surface) {
-      this.config.series = data;
-      return;
-    }
-    this.clearSeries();
-    this.config.series = data;
-    this.addSeries(data);
-  }
-  /**
-   * Update specific series data
-   */
-  updateSeriesData(seriesName, data) {
-    const dataSeries = this.dataSeries.get(seriesName);
-    if (!dataSeries) {
-      console.warn(`Series "${seriesName}" not found`);
-      return;
-    }
-    const normalized = normalizeDataPoints(data);
-    const xValues = extractXValues(normalized);
-    const yValues = extractYValues(normalized);
-    dataSeries.clear();
-    dataSeries.appendRange(xValues, yValues);
-  }
-  /**
-   * Clear all series
-   */
-  clearSeries() {
-    if (!this.surface) return;
-    this.renderableSeries.forEach((series) => {
-      this.surface.renderableSeries.remove(series);
-      series.delete();
-    });
-    this.renderableSeries = [];
-    this.dataSeries.forEach((ds) => ds.delete());
-    this.dataSeries.clear();
-  }
-  /**
-   * Update chart
-   */
-  update() {
-    if (!this.surface) return;
-    this.applyTheme();
-    this.surface.invalidateElement();
-  }
-  /**
-   * Destroy and clean up
-   */
-  destroy() {
-    this.clearSeries();
-    super.destroy();
-  }
-};
-async function createAreaChart(container, config) {
-  const chart = new AreaChart(config);
-  await chart.init(container);
-  return chart;
-}
-function getSciChartTheme4(themeName) {
-  switch (themeName) {
-    case "light":
-      return new scichart.SciChartJSLightTheme();
-    case "dark":
-    case "modern":
-    case "midnight":
-    default:
-      return new scichart.SciChartJSDarkTheme();
-  }
-}
-var defaultColorStops = [
-  { offset: 0, color: "#000080" },
-  // Dark blue
-  { offset: 0.2, color: "#0000ff" },
-  // Blue
-  { offset: 0.4, color: "#00ffff" },
-  // Cyan
-  { offset: 0.6, color: "#00ff00" },
-  // Green
-  { offset: 0.8, color: "#ffff00" },
-  // Yellow
-  { offset: 1, color: "#ff0000" }
-  // Red
-];
-var HeatmapChart = class extends BaseChart {
-  constructor(config) {
-    super(config);
-    this.heatmapDataSeries = null;
-    this.heatmapSeries = null;
-    this.wasmContext = null;
-  }
-  /**
-   * Create the SciChart surface for heatmap chart
-   */
-  async createSurface() {
-    if (!this.container) {
-      throw new Error("Container not set");
-    }
-    const sciChartTheme = getSciChartTheme4(this.config.theme);
-    if (!this.container.id) {
-      this.container.id = this.id;
+      throw new Error("Chart not initialized");
     }
-    const { sciChartSurface, wasmContext } = await scichart.SciChartSurface.create(
-      this.container,
-      {
-        theme: sciChartTheme
-      }
-    );
-    this.surface = sciChartSurface;
-    this.wasmContext = wasmContext;
-    const xAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.xAxis?.title,
-      drawMajorGridLines: this.config.xAxis?.gridLines?.show ?? false,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    const yAxis = new scichart.NumericAxis(wasmContext, {
-      axisTitle: this.config.yAxis?.title,
-      drawMajorGridLines: this.config.yAxis?.gridLines?.show ?? false,
-      drawMinorGridLines: false,
-      axisTitleStyle: {
-        fontSize: 14,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.titleColor
-      },
-      labelStyle: {
-        fontSize: 12,
-        fontFamily: this.theme.fontFamily,
-        color: this.theme.axis?.labelColor
-      },
-      autoRange: scichart.EAutoRange.Always
-    });
-    if (this.config.xAxis?.min !== void 0 && this.config.xAxis?.max !== void 0) {
-      xAxis.visibleRange = new scichart.NumberRange(this.config.xAxis.min, this.config.xAxis.max);
-      xAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    if (this.config.yAxis?.min !== void 0 && this.config.yAxis?.max !== void 0) {
-      yAxis.visibleRange = new scichart.NumberRange(this.config.yAxis.min, this.config.yAxis.max);
-      yAxis.autoRange = scichart.EAutoRange.Never;
-    }
-    sciChartSurface.xAxes.add(xAxis);
-    sciChartSurface.yAxes.add(yAxis);
-    if (this.config.tooltip?.enabled !== false) {
-      sciChartSurface.chartModifiers.add(
-        new scichart.RolloverModifier({
-          showTooltip: true,
-          showAxisLabel: true
-        })
-      );
-    }
-    sciChartSurface.chartModifiers.add(new scichart.ZoomPanModifier());
-    sciChartSurface.chartModifiers.add(new scichart.MouseWheelZoomModifier());
-    this.addHeatmapData(this.config.zValues);
-  }
-  /**
-   * Add heatmap data to the chart
-   */
-  addHeatmapData(zValues) {
-    if (!this.surface || !this.wasmContext) return;
-    const wasmContext = this.wasmContext;
-    let min = this.config.colorMin;
-    let max = this.config.colorMax;
-    if (min === void 0 || max === void 0) {
-      const flatValues = zValues.flat();
-      min = min ?? Math.min(...flatValues);
-      max = max ?? Math.max(...flatValues);
-    }
-    this.heatmapDataSeries = new scichart.UniformHeatmapDataSeries(wasmContext, {
-      zValues,
-      xStart: this.config.xStart ?? 0,
-      xStep: this.config.xStep ?? 1,
-      yStart: this.config.yStart ?? 0,
-      yStep: this.config.yStep ?? 1
-    });
-    const colorStops = this.config.colorStops ?? defaultColorStops;
-    this.heatmapSeries = new scichart.UniformHeatmapRenderableSeries(wasmContext, {
-      dataSeries: this.heatmapDataSeries,
-      colorMap: new scichart.HeatmapColorMap({
-        minimum: min,
-        maximum: max,
-        gradientStops: colorStops
-      })
-    });
-    this.surface.renderableSeries.add(this.heatmapSeries);
+    const canvas = this.container?.querySelector("canvas");
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
+    return canvas.toDataURL(mimeType);
   }
   /**
-   * Set new data for the chart (for heatmap, this updates zValues)
+   * Add event listener
    */
-  setData(_data) {
-    console.warn("HeatmapChart.setData() - use setZValues() for updating heatmap data");
+  on(event, handler) {
+    if (!this.eventHandlers.has(event)) {
+      this.eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventHandlers.get(event).add(handler);
   }
   /**
-   * Set new z-values for the heatmap
+   * Remove event listener
    */
-  setZValues(zValues) {
-    if (!this.surface) {
-      this.config.zValues = zValues;
-      return;
+  off(event, handler) {
+    const handlers = this.eventHandlers.get(event);
+    if (handlers) {
+      handlers.delete(handler);
     }
-    this.clearHeatmap();
-    this.config.zValues = zValues;
-    this.addHeatmapData(zValues);
   }
   /**
-   * Update specific cell values
+   * Emit an event
    */
-  updateCell(x, y, value) {
-    if (this.heatmapDataSeries) {
-      this.heatmapDataSeries.setZValue(x, y, value);
+  emit(event, data) {
+    const handlers = this.eventHandlers.get(event);
+    if (handlers) {
+      handlers.forEach((handler) => handler(data));
     }
   }
   /**
-   * Clear heatmap data
+   * Destroy the chart and clean up resources
    */
-  clearHeatmap() {
-    if (!this.surface) return;
-    if (this.heatmapSeries) {
-      this.surface.renderableSeries.remove(this.heatmapSeries);
-      this.heatmapSeries.delete();
-      this.heatmapSeries = null;
+  destroy() {
+    if (this.isDestroyed) return;
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
     }
-    if (this.heatmapDataSeries) {
-      this.heatmapDataSeries.delete();
-      this.heatmapDataSeries = null;
+    this.eventHandlers.clear();
+    if (this.surface) {
+      this.surface.delete();
+      this.surface = null;
+    }
+    if (this.container) {
+      this.container.innerHTML = "";
     }
+    this.isDestroyed = true;
+    this.isInitialized = false;
   }
   /**
-   * Update chart
+   * Get current configuration
    */
-  update() {
-    if (!this.surface) return;
-    this.applyTheme();
-    this.surface.invalidateElement();
+  getConfig() {
+    return { ...this.config };
   }
   /**
-   * Destroy and clean up
+   * Get current theme
    */
-  destroy() {
-    this.clearHeatmap();
-    super.destroy();
+  getTheme() {
+    return { ...this.theme };
+  }
+  /**
+   * Check if chart is initialized
+   */
+  isReady() {
+    return this.isInitialized && !this.isDestroyed;
   }
 };
-async function createHeatmapChart(container, config) {
-  const chart = new HeatmapChart(config);
-  await chart.init(container);
-  return chart;
-}
-var SCICHART_VERSION2 = "3.5.750";
+var SCICHART_VERSION2 = "4.0.933";
 var sciChart3DConfigured = false;
 function ensureSciChart3DConfigured() {
   if (sciChart3DConfigured) return;
@@ -1174,15 +392,14 @@ function ensureSciChart3DConfigured() {
   } catch {
     try {
       scichart.SciChart3DSurface.configure({
-        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION2}/_wasm/scichart3d.wasm`,
-        dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION2}/_wasm/scichart3d.data`
+        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION2}/_wasm/scichart3d.wasm`
       });
       sciChart3DConfigured = true;
     } catch {
     }
   }
 }
-var defaultColorStops2 = [
+var defaultColorStops = [
   { offset: 0, color: "#1e3a8a" },
   // Dark blue
   { offset: 0.25, color: "#3b82f6" },
@@ -1279,7 +496,7 @@ var Surface3DChart = class {
       xStep: this.config.xStep ?? 1,
       zStep: this.config.zStep ?? 1
     });
-    const colorStops = this.config.colorStops ?? defaultColorStops2;
+    const colorStops = this.config.colorStops ?? defaultColorStops;
     const colorPalette = new scichart.GradientColorPalette(wasmContext, {
       gradientStops: colorStops
     });
@@ -1382,7 +599,7 @@ async function createSurface3DChart(container, config) {
   await chart.init(container);
   return chart;
 }
-var SCICHART_VERSION3 = "3.5.750";
+var SCICHART_VERSION3 = "4.0.933";
 var sciChart3DConfigured2 = false;
 function ensureSciChart3DConfigured2() {
   if (sciChart3DConfigured2) return;
@@ -1392,8 +609,7 @@ function ensureSciChart3DConfigured2() {
   } catch {
     try {
       scichart.SciChart3DSurface.configure({
-        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION3}/_wasm/scichart3d.wasm`,
-        dataUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION3}/_wasm/scichart3d.data`
+        wasmUrl: `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION3}/_wasm/scichart3d.wasm`
       });
       sciChart3DConfigured2 = true;
     } catch {
@@ -1641,18 +857,571 @@ async function createColumn3DChart(container, config) {
   await chart.init(container);
   return chart;
 }
+var SCICHART_VERSION4 = "4.0.933";
+var sciChartConfigured2 = false;
+var configureSciChartCDN = () => {
+  if (sciChartConfigured2) return;
+  try {
+    const cdnBase = `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION4}/_wasm`;
+    scichart.SciChartSurface.configure({
+      wasmUrl: `${cdnBase}/scichart2d.wasm`,
+      dataUrl: `${cdnBase}/scichart2d.data`
+    });
+    sciChartConfigured2 = true;
+  } catch (e) {
+    console.warn("Failed to configure SciChart CDN:", e);
+  }
+};
+var HORIZONTAL_RESOLUTION = 360;
+var VERTICAL_SCALE_MAX_DEFAULT = 5e3;
+var HORIZONTAL_RESOLUTION_MULTIPLIER = 1;
+var RESOLUTION_CONFIG = {
+  UNI: {
+    HI: { VERTICAL_RESOLUTION: 256, VERTICAL_OFFSET: 0, MIN_PEAK_ZERO: true },
+    LO: { VERTICAL_RESOLUTION: 100, VERTICAL_OFFSET: 0, MIN_PEAK_ZERO: true }
+  },
+  BI: {
+    HI: { VERTICAL_RESOLUTION: 512, VERTICAL_OFFSET: 256, MIN_PEAK_ZERO: false },
+    LO: { VERTICAL_RESOLUTION: 200, VERTICAL_OFFSET: 100, MIN_PEAK_ZERO: false }
+  }
+};
+var defaultPRPDColorStops = [
+  { offset: 0, color: "transparent" },
+  { offset: 5e-3, color: "transparent" },
+  { offset: 9e-3, color: "transparent" },
+  { offset: 0.01, color: "CornflowerBlue" },
+  { offset: 0.4, color: "DarkGreen" },
+  { offset: 0.6, color: "Chartreuse" },
+  { offset: 0.8, color: "Yellow" },
+  { offset: 1, color: "Red" }
+];
+var createPRPDTheme = () => {
+  const theme = new SciChartJSLightTheme.SciChartJSLightTheme();
+  theme.sciChartBackground = "#f9f9f9";
+  theme.gridBackgroundBrush = "grey";
+  theme.axisBandsFill = "#dcdcdc";
+  theme.majorGridLineBrush = "#888888";
+  theme.minorGridLineBrush = "transparent";
+  return theme;
+};
+var createLegendTheme = () => {
+  const theme = new SciChartJSLightTheme.SciChartJSLightTheme();
+  theme.sciChartBackground = "#ffffff";
+  theme.gridBackgroundBrush = "#ffffff";
+  theme.axisBandsFill = "#ffffff";
+  theme.majorGridLineBrush = "transparent";
+  theme.minorGridLineBrush = "transparent";
+  return theme;
+};
+function getResolutionConfig(uniBiLabel, hiLoLabel, maxPeak, minPeak, isLowResolution) {
+  const cfg = isLowResolution ? RESOLUTION_CONFIG.UNI.HI : RESOLUTION_CONFIG?.[uniBiLabel]?.[hiLoLabel] ?? RESOLUTION_CONFIG.BI.HI;
+  const newMinPeak = cfg.MIN_PEAK_ZERO ? 0 : minPeak ?? -5e3;
+  const newMaxPeak = maxPeak ?? 5e3;
+  return {
+    verticalResolution: cfg.VERTICAL_RESOLUTION,
+    verticalOffset: cfg.VERTICAL_OFFSET,
+    newMinPeak,
+    newMaxPeak,
+    isUnipolar: uniBiLabel === "UNI" || isLowResolution
+  };
+}
+function getPhaseColumnIndex(phaseAngle, maxPhaseAngle) {
+  const maxPhase = maxPhaseAngle || 360;
+  if (maxPhase <= 0) return 0;
+  const clampedPhase = Math.min(Math.max(phaseAngle, 0), maxPhase);
+  const ratio = clampedPhase / maxPhase;
+  return Math.min(HORIZONTAL_RESOLUTION - 1, Math.floor(ratio * (HORIZONTAL_RESOLUTION - 1)));
+}
+function generateSineWaveData(startX, endX, amplitude, frequency = 1, phaseShift = 0, step = 1, offset = 0) {
+  const data = [];
+  for (let x = startX; x <= endX; x += step) {
+    const rad = (x - phaseShift) * Math.PI * frequency / 180;
+    const y = offset + amplitude * Math.sin(rad);
+    data.push([x, y]);
+  }
+  return data;
+}
+function buildZValues(data, scalingFactor, minPeak, maxPhaseAngle, verticalScaleMax, uniBiLabel, hiLoLabel, windowingData = [], isLowResolution) {
+  const { verticalResolution, verticalOffset, newMinPeak, newMaxPeak, isUnipolar } = getResolutionConfig(uniBiLabel, hiLoLabel, verticalScaleMax, minPeak, isLowResolution);
+  const zValues = Array.from(
+    { length: verticalResolution },
+    () => new Array(HORIZONTAL_RESOLUTION).fill(0)
+  );
+  const vResolution = newMinPeak === 0 ? verticalResolution : verticalResolution / 2;
+  const multiplier = newMaxPeak * scalingFactor / vResolution;
+  let maxValue = 0;
+  let totalCount = 0;
+  const isInsideWindow = (phaseDeg, ampVal) => {
+    if (!windowingData?.length) return false;
+    return windowingData.some(
+      (w) => phaseDeg >= w.minPhase && phaseDeg <= w.maxPhase && ampVal >= w.minAmp && ampVal <= w.maxAmp
+    );
+  };
+  data?.forEach(([phase_angle, amplitude, count]) => {
+    const colIndex = getPhaseColumnIndex(phase_angle, maxPhaseAngle);
+    const scaledAmp = Math.floor(
+      (isUnipolar ? Math.abs(amplitude) : amplitude) * scalingFactor
+    );
+    if (isInsideWindow(phase_angle, scaledAmp)) {
+      return;
+    }
+    let rowIndex = Math.floor(scaledAmp / multiplier + verticalOffset);
+    rowIndex = Math.max(0, Math.min(verticalResolution - 1, rowIndex));
+    zValues[rowIndex][colIndex] += count;
+    if (Math.abs(scaledAmp) > Math.abs(maxValue)) maxValue = scaledAmp;
+    totalCount += count;
+  });
+  return {
+    zValues,
+    multiplier,
+    maxValue,
+    totalCount,
+    verticalResolution,
+    isUnipolar,
+    newMinPeak
+  };
+}
+var PRPDChart = class {
+  constructor(config) {
+    this.container = null;
+    // Root container (may contain sub-divs)
+    this.chartHost = null;
+    // Div where SciChartSurface is mounted
+    this.surface = null;
+    this.wasmContext = null;
+    this.isDestroyed = false;
+    // Chart components
+    this.heatmapDataSeries = null;
+    this.heatmapSeries = null;
+    this.heatmapColorMap = null;
+    this.heatmapLegend = null;
+    this.heatmapLegendDiv = null;
+    this.sineDataSeries = null;
+    this.sineLineSeries = null;
+    this.xAxis = null;
+    this.yAxis = null;
+    // Statistics
+    this.stats = { peakValue: 0, totalCount: 0 };
+    this.id = config.id ?? generateId("prpd");
+    this.config = {
+      scalingFactor: 1,
+      unitOfMeasurement: "mVp",
+      maxPeak: 5e3,
+      minPeak: -5e3,
+      maxPhaseAngle: 360,
+      resolutionLabel: { UniBi: "BI", HiLo: "HI" },
+      windowingData: [],
+      yAxisRange: 5e3,
+      isLowResolution: false,
+      showColorPalette: true,
+      showSineWave: true,
+      colorMin: 0,
+      colorMax: 100,
+      ...config
+    };
+  }
+  /**
+   * Initialize the chart in the given container
+   */
+  async init(container) {
+    if (this.isDestroyed) {
+      throw new Error("Cannot initialize a destroyed chart");
+    }
+    if (typeof container === "string") {
+      const el = document.getElementById(container);
+      if (!el) {
+        throw new Error(`Container element "${container}" not found`);
+      }
+      this.container = el;
+    } else {
+      this.container = container;
+    }
+    if (!this.container.id) {
+      this.container.id = this.id;
+    }
+    const chartGraph = this.container.querySelector(".chart-graph");
+    this.chartHost = chartGraph ?? this.container;
+    if (!this.chartHost.id) {
+      this.chartHost.id = `${this.id}_host`;
+    }
+    await this.createSurface();
+  }
+  /**
+   * Create the SciChart surface
+   */
+  async createSurface() {
+    if (!this.container || !this.chartHost) {
+      throw new Error("Container not set");
+    }
+    configureSciChartCDN();
+    const theme = createPRPDTheme();
+    const { sciChartSurface, wasmContext } = await scichart.SciChartSurface.create(
+      this.chartHost,
+      { theme }
+    );
+    this.surface = sciChartSurface;
+    this.wasmContext = wasmContext;
+    const verticalScaleMax = this.config.maxPeak || VERTICAL_SCALE_MAX_DEFAULT;
+    const { zValues, multiplier, maxValue, totalCount, verticalResolution, isUnipolar } = buildZValues(
+      this.config.data,
+      this.config.scalingFactor,
+      this.config.minPeak,
+      this.config.maxPhaseAngle,
+      verticalScaleMax,
+      this.config.resolutionLabel?.UniBi ?? "BI",
+      this.config.resolutionLabel?.HiLo ?? "HI",
+      this.config.windowingData,
+      this.config.isLowResolution
+    );
+    this.stats = { peakValue: maxValue, totalCount };
+    const yAxisRange = this.config.yAxisRange || verticalScaleMax;
+    this.xAxis = new scichart.NumericAxis(wasmContext, {
+      autoRange: scichart.EAutoRange.Never,
+      labelFormat: scichart.ENumericFormat.Decimal,
+      labelPrecision: 0,
+      labelPostfix: "\xB0",
+      minorDelta: 2,
+      majorDelta: 45,
+      drawMajorBands: true,
+      autoTicks: false,
+      axisAlignment: scichart.EAxisAlignment.Bottom,
+      axisTitle: "Phase Angle (\xB0)",
+      axisTitleStyle: {
+        fontSize: 14,
+        fontWeight: "bold",
+        color: "black"
+      },
+      visibleRange: new scichart.NumberRange(0, 360),
+      visibleRangeLimit: new scichart.NumberRange(0, 360)
+    });
+    const yRange = isUnipolar ? new scichart.NumberRange(0, yAxisRange) : new scichart.NumberRange(-yAxisRange, yAxisRange);
+    this.yAxis = new scichart.NumericAxis(wasmContext, {
+      autoRange: scichart.EAutoRange.Never,
+      labelFormat: scichart.ENumericFormat.Decimal,
+      labelPrecision: 0,
+      drawMajorBands: true,
+      axisAlignment: scichart.EAxisAlignment.Right,
+      axisTitle: `Amplitude (${this.config.unitOfMeasurement})`,
+      axisTitleStyle: {
+        fontSize: 14,
+        fontWeight: "bold",
+        color: "black",
+        rotation: 270
+      },
+      visibleRange: yRange,
+      visibleRangeLimit: yRange
+    });
+    sciChartSurface.xAxes.add(this.xAxis);
+    sciChartSurface.yAxes.add(this.yAxis);
+    this.createHeatmap(zValues, multiplier, verticalResolution, isUnipolar);
+    if (this.config.showSineWave) {
+      this.createSineWave(yAxisRange, isUnipolar);
+    }
+    const cursorModifier = new scichart.CursorModifier();
+    cursorModifier.axisLabelFill = "#FFFFFF";
+    cursorModifier.axisLabelStroke = "#000000";
+    sciChartSurface.chartModifiers.add(
+      cursorModifier,
+      new scichart.RubberBandXyZoomModifier(),
+      new scichart.ZoomExtentsModifier()
+    );
+    if (this.config.showColorPalette) {
+      await this.createHeatmapLegend();
+    }
+    this.onStatsChange?.(this.stats);
+  }
+  createHeatmap(zValues, multiplier, verticalResolution, isUnipolar) {
+    if (!this.surface || !this.wasmContext) return;
+    const colorStops = this.config.colorStops ?? defaultPRPDColorStops;
+    this.heatmapColorMap = new scichart.HeatmapColorMap({
+      minimum: this.config.colorMin ?? 0,
+      maximum: this.config.colorMax ?? 100,
+      gradientStops: colorStops
+    });
+    this.heatmapDataSeries = new scichart.UniformHeatmapDataSeries(this.wasmContext, {
+      zValues,
+      xStart: 0,
+      xStep: HORIZONTAL_RESOLUTION_MULTIPLIER,
+      yStart: isUnipolar ? 0 : -1 * verticalResolution * multiplier / 2,
+      yStep: multiplier
+    });
+    this.heatmapSeries = new scichart.UniformHeatmapRenderableSeries(this.wasmContext, {
+      dataSeries: this.heatmapDataSeries,
+      colorMap: this.heatmapColorMap
+    });
+    this.surface.renderableSeries.add(this.heatmapSeries);
+  }
+  createSineWave(yAxisRange, isUnipolar) {
+    if (!this.surface || !this.wasmContext) return;
+    const sineAmplitude = isUnipolar ? yAxisRange / 2 : yAxisRange;
+    const sineOffset = isUnipolar ? yAxisRange / 2 : 0;
+    const sineWaveData = generateSineWaveData(0, 360, sineAmplitude, 1, 0, 1, sineOffset);
+    this.sineDataSeries = new scichart.XyDataSeries(this.wasmContext);
+    sineWaveData.forEach(([x, y]) => this.sineDataSeries.append(x, y));
+    this.sineLineSeries = new scichart.FastLineRenderableSeries(this.wasmContext, {
+      dataSeries: this.sineDataSeries,
+      stroke: "Black",
+      strokeThickness: 3
+    });
+    this.surface.renderableSeries.add(this.sineLineSeries);
+  }
+  async createHeatmapLegend() {
+    if (!this.container || !this.heatmapColorMap) return;
+    this.clearHeatmapLegend();
+    let div = this.container.querySelector(".heatmap-chart");
+    if (!div) {
+      div = document.createElement("div");
+      div.className = "heatmap-chart";
+      div.style.position = "absolute";
+      div.style.top = "40px";
+      div.style.left = "0px";
+      div.style.bottom = "40px";
+      div.style.width = "65px";
+      div.style.pointerEvents = "none";
+      this.container.appendChild(div);
+    }
+    if (!div.id) {
+      div.id = `${this.id}_legend`;
+    }
+    this.heatmapLegendDiv = div;
+    const min = this.config.colorMin ?? 0;
+    const max = this.config.colorMax ?? 100;
+    const { heatmapLegend } = await scichart.HeatmapLegend.create(div, {
+      theme: createLegendTheme(),
+      yAxisOptions: {
+        visibleRange: new scichart.NumberRange(min, max),
+        majorDelta: (max - min) / 5,
+        minorDelta: (max - min) / 10,
+        labelFormat: scichart.ENumericFormat.Decimal,
+        labelPrecision: 0,
+        labelPadding: 6,
+        axisTitleGap: 8,
+        labelStyle: { fontSize: 12, color: "#A0A0A0" },
+        majorTickLineStyle: {
+          color: "#A0A0A0",
+          tickSize: 8,
+          strokeThickness: 1
+        },
+        minorTickLineStyle: {
+          color: "gray",
+          tickSize: 5,
+          strokeThickness: 1
+        },
+        axisBorder: {
+          borderLeft: 0,
+          borderRight: 0,
+          borderTop: 0,
+          borderBottom: 0,
+          color: "transparent"
+        }
+      },
+      colorMap: this.heatmapColorMap
+    });
+    this.heatmapLegend = heatmapLegend;
+  }
+  clearHeatmapLegend() {
+    if (this.heatmapLegend) {
+      try {
+        this.heatmapLegend.delete();
+      } catch (e) {
+      }
+      this.heatmapLegend = null;
+    }
+    if (this.heatmapLegendDiv) {
+      this.heatmapLegendDiv.remove();
+      this.heatmapLegendDiv = null;
+    }
+  }
+  /**
+   * Update chart with new data
+   */
+  updateData(data) {
+    this.config.data = data;
+    this.refresh();
+  }
+  /**
+   * Update resolution label (UNI/BI, HI/LO)
+   */
+  setResolutionLabel(label) {
+    this.config.resolutionLabel = label;
+    this.refresh();
+  }
+  /**
+   * Update windowing data
+   */
+  setWindowingData(windowingData) {
+    this.config.windowingData = windowingData;
+    this.refresh();
+  }
+  /**
+   * Update Y-axis range
+   */
+  setYAxisRange(range) {
+    this.config.yAxisRange = range;
+    this.refresh();
+  }
+  /**
+   * Set stats change callback
+   */
+  onStats(callback) {
+    this.onStatsChange = callback;
+  }
+  /**
+   * Get current statistics
+   */
+  getStats() {
+    return { ...this.stats };
+  }
+  /**
+   * Refresh the chart with current configuration
+   */
+  refresh() {
+    if (!this.surface || !this.wasmContext) return;
+    const verticalScaleMax = this.config.maxPeak || VERTICAL_SCALE_MAX_DEFAULT;
+    const yAxisRange = this.config.yAxisRange || verticalScaleMax;
+    const { zValues, multiplier, maxValue, totalCount, verticalResolution, isUnipolar } = buildZValues(
+      this.config.data,
+      this.config.scalingFactor,
+      this.config.minPeak,
+      this.config.maxPhaseAngle,
+      verticalScaleMax,
+      this.config.resolutionLabel?.UniBi ?? "BI",
+      this.config.resolutionLabel?.HiLo ?? "HI",
+      this.config.windowingData,
+      this.config.isLowResolution
+    );
+    this.stats = { peakValue: maxValue, totalCount };
+    if (this.yAxis) {
+      const yRange = isUnipolar ? new scichart.NumberRange(0, yAxisRange) : new scichart.NumberRange(-yAxisRange, yAxisRange);
+      this.yAxis.visibleRange = yRange;
+      this.yAxis.visibleRangeLimit = yRange;
+    }
+    if (this.heatmapDataSeries) {
+      const needNewDs = this.heatmapDataSeries.arrayHeight !== verticalResolution || this.heatmapDataSeries.arrayWidth !== HORIZONTAL_RESOLUTION;
+      if (needNewDs) {
+        if (this.heatmapSeries) {
+          this.surface.renderableSeries.remove(this.heatmapSeries);
+          this.heatmapSeries.delete();
+        }
+        this.heatmapDataSeries.delete();
+        this.heatmapDataSeries = new scichart.UniformHeatmapDataSeries(this.wasmContext, {
+          zValues,
+          xStart: 0,
+          xStep: HORIZONTAL_RESOLUTION_MULTIPLIER,
+          yStart: isUnipolar ? 0 : -1 * verticalResolution * multiplier / 2,
+          yStep: multiplier
+        });
+        this.heatmapSeries = new scichart.UniformHeatmapRenderableSeries(this.wasmContext, {
+          dataSeries: this.heatmapDataSeries,
+          colorMap: this.heatmapColorMap
+        });
+        this.surface.renderableSeries.add(this.heatmapSeries);
+      } else {
+        if (typeof this.heatmapDataSeries.setZValues === "function") {
+          this.heatmapDataSeries.setZValues(zValues);
+        } else {
+          this.heatmapDataSeries.zValues = zValues;
+        }
+        this.heatmapDataSeries.yStart = isUnipolar ? 0 : -1 * verticalResolution * multiplier / 2;
+        this.heatmapDataSeries.yStep = multiplier;
+      }
+    }
+    if (this.sineDataSeries && this.config.showSineWave) {
+      this.sineDataSeries.clear();
+      const sineAmplitude = isUnipolar ? yAxisRange / 2 : yAxisRange;
+      const sineOffset = isUnipolar ? yAxisRange / 2 : 0;
+      const sineWaveData = generateSineWaveData(0, 360, sineAmplitude, 1, 0, 1, sineOffset);
+      sineWaveData.forEach(([x, y]) => this.sineDataSeries.append(x, y));
+    }
+    this.surface.invalidateElement();
+    this.onStatsChange?.(this.stats);
+  }
+  /**
+   * Set chart options
+   */
+  setOptions(options) {
+    this.config = { ...this.config, ...options };
+    this.refresh();
+  }
+  /**
+   * Reset zoom to full extent
+   */
+  resetZoom() {
+    if (!this.surface) return;
+    this.surface.zoomExtents();
+  }
+  /**
+   * Export chart as image
+   */
+  async exportImage(format = "png") {
+    if (!this.container) {
+      throw new Error("Chart not initialized");
+    }
+    const canvas = this.container.querySelector("canvas");
+    if (!canvas) {
+      throw new Error("Canvas not found");
+    }
+    const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
+    return canvas.toDataURL(mimeType);
+  }
+  /**
+   * Get current configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Check if chart is ready
+   */
+  isReady() {
+    return this.surface !== null && !this.isDestroyed;
+  }
+  /**
+   * Destroy and clean up
+   */
+  destroy() {
+    if (this.isDestroyed) return;
+    this.clearHeatmapLegend();
+    if (this.sineLineSeries && this.surface) {
+      this.surface.renderableSeries.remove(this.sineLineSeries);
+      this.sineLineSeries.delete();
+      this.sineLineSeries = null;
+    }
+    if (this.sineDataSeries) {
+      this.sineDataSeries.delete();
+      this.sineDataSeries = null;
+    }
+    if (this.heatmapSeries && this.surface) {
+      this.surface.renderableSeries.remove(this.heatmapSeries);
+      this.heatmapSeries.delete();
+      this.heatmapSeries = null;
+    }
+    if (this.heatmapDataSeries) {
+      this.heatmapDataSeries.delete();
+      this.heatmapDataSeries = null;
+    }
+    if (this.surface) {
+      this.surface.delete();
+      this.surface = null;
+    }
+    this.isDestroyed = true;
+  }
+};
+async function createPRPDChart(container, config) {
+  const chart = new PRPDChart(config);
+  await chart.init(container);
+  return chart;
+}
 var VERSION = "0.1.1";
-var SCICHART_VERSION4 = "3.5.750";
-var DEFAULT_WASM_URL = `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION4}/_wasm/scichart2d.wasm`;
-var DEFAULT_DATA_URL = `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION4}/_wasm/scichart2d.data`;
+var SCICHART_VERSION5 = "4.0.933";
+var DEFAULT_WASM_URL = `https://cdn.jsdelivr.net/npm/scichart@${SCICHART_VERSION5}/_wasm/scichart2d.wasm`;
 var isConfigured = false;
 function autoConfigureSciChart() {
   if (isConfigured) return;
   try {
-    const { SciChartSurface: SciChartSurface7 } = chunkKATRK3C3_js.__require("scichart");
-    SciChartSurface7.configure({
-      wasmUrl: DEFAULT_WASM_URL,
-      dataUrl: DEFAULT_DATA_URL
+    const { SciChartSurface: SciChartSurface4 } = chunkKATRK3C3_js.__require("scichart");
+    SciChartSurface4.configure({
+      wasmUrl: DEFAULT_WASM_URL
     });
     isConfigured = true;
   } catch {
@@ -1661,10 +1430,9 @@ function autoConfigureSciChart() {
 autoConfigureSciChart();
 function configureSciChart(options) {
   try {
-    const { SciChartSurface: SciChartSurface7 } = chunkKATRK3C3_js.__require("scichart");
-    SciChartSurface7.configure({
-      wasmUrl: options.wasmUrl || DEFAULT_WASM_URL,
-      dataUrl: options.dataUrl || DEFAULT_DATA_URL
+    const { SciChartSurface: SciChartSurface4 } = chunkKATRK3C3_js.__require("scichart");
+    SciChartSurface4.configure({
+      wasmUrl: options.wasmUrl || DEFAULT_WASM_URL
     });
     isConfigured = true;
   } catch {
@@ -1699,22 +1467,16 @@ Object.defineProperty(exports, "SciChartSurface", {
   enumerable: true,
   get: function () { return scichart.SciChartSurface; }
 });
-exports.AreaChart = AreaChart;
-exports.BarChart = BarChart;
 exports.BaseChart = BaseChart;
 exports.Column3DChart = Column3DChart;
-exports.HeatmapChart = HeatmapChart;
-exports.LineChart = LineChart;
+exports.PRPDChart = PRPDChart;
 exports.Surface3DChart = Surface3DChart;
 exports.VERSION = VERSION;
 exports.calculateDataRange = calculateDataRange;
 exports.clamp = clamp;
 exports.configureSciChart = configureSciChart;
-exports.createAreaChart = createAreaChart;
-exports.createBarChart = createBarChart;
 exports.createColumn3DChart = createColumn3DChart;
-exports.createHeatmapChart = createHeatmapChart;
-exports.createLineChart = createLineChart;
+exports.createPRPDChart = createPRPDChart;
 exports.createSurface3DChart = createSurface3DChart;
 exports.debounce = debounce;
 exports.deepMerge = deepMerge;