@rm-graph/core 0.1.8 → 0.1.9

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { __require, ThemeManager } from './chunk-Q2ZHY445.mjs';
 export { ThemeManager, darkTheme, getThemeManager, lightTheme, midnightTheme, modernTheme } from './chunk-Q2ZHY445.mjs';
-import { SciChart3DSurface, NumericAxis3D, MouseWheelZoomModifier3D, OrbitModifier3D, CameraController, Vector3, UniformGridDataSeries3D, GradientColorPalette, SurfaceMeshRenderableSeries3D, EDrawMeshAs, NumberRange, XyzDataSeries3D, ColumnRenderableSeries3D, PointLineRenderableSeries3D, TooltipModifier3D, SciChartSurface, NumericAxis, EAxisAlignment, ENumericFormat, EAutoRange, CursorModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, HeatmapColorMap, UniformHeatmapDataSeries, UniformHeatmapRenderableSeries, XyDataSeries, FastLineRenderableSeries, HeatmapLegend } from 'scichart';
+import { SciChart3DSurface, NumericAxis3D, MouseWheelZoomModifier3D, OrbitModifier3D, CameraController, Vector3, UniformGridDataSeries3D, GradientColorPalette, SurfaceMeshRenderableSeries3D, EDrawMeshAs, SciChartJSLightTheme, ResetCamera3DModifier, NumberRange, XyzDataSeries3D, ColumnRenderableSeries3D, CylinderPointMarker3D, PointLineRenderableSeries3D, TooltipModifier3D, SciChartSurface, NumericAxis, EAxisAlignment, ENumericFormat, EAutoRange, CursorModifier, RubberBandXyZoomModifier, ZoomExtentsModifier, HeatmapColorMap, UniformHeatmapDataSeries, UniformHeatmapRenderableSeries, XyDataSeries, FastLineRenderableSeries, HeatmapLegend, NumericLabelProvider } from 'scichart';
 export { SciChartSurface } from 'scichart';
-import { SciChartJSLightTheme } from 'scichart/Charting/Themes/SciChartJSLightTheme';
+import { SciChartJSLightTheme as SciChartJSLightTheme$1 } from 'scichart/Charting/Themes/SciChartJSLightTheme';
 
 // src/utils/helpers.ts
 function generateId(prefix = "chart") {
@@ -226,8 +226,8 @@ var BaseChart = class {
     this.surface.background = this.theme.backgroundColor ?? "#ffffff";
     try {
       const themeName = this.config.theme;
-      const { SciChartJSDarkTheme, SciChartJSLightTheme: SciChartJSLightTheme2 } = __require("scichart");
-      const nextThemeProvider = themeName === "light" ? new SciChartJSLightTheme2() : new SciChartJSDarkTheme();
+      const { SciChartJSDarkTheme, SciChartJSLightTheme: SciChartJSLightTheme3 } = __require("scichart");
+      const nextThemeProvider = themeName === "light" ? new SciChartJSLightTheme3() : new SciChartJSDarkTheme();
       this.surface.applyTheme?.(nextThemeProvider);
     } catch {
     }
@@ -646,6 +646,41 @@ function ensureSciChart3DConfigured2() {
     }
   }
 }
+var DEFAULT_CAMERA_PRESETS = [
+  {
+    // Top view
+    position: { x: -0.01, y: 532.47, z: 0.82 },
+    target: { x: 0, y: 50, z: 0 }
+  },
+  {
+    // Angle view
+    position: { x: -2.38, y: 99.55, z: 479.91 },
+    target: { x: 0, y: 50, z: 0 }
+  }
+];
+var UOM_LABELS = {
+  1: "mVp",
+  2: "mVrms",
+  3: "dBm",
+  4: "dB",
+  "mVp": "mVp",
+  "mVrms": "mVrms",
+  "dBm": "dBm",
+  "dB": "dB"
+};
+function mVrmsToDbm(mVrms) {
+  if (mVrms <= 0) return -100;
+  return 10 * Math.log10(mVrms * mVrms / 50) + 30;
+}
+function mVpToDb(mVp) {
+  if (mVp <= 0) return -100;
+  return 20 * Math.log10(mVp);
+}
+var IntegerLabelProvider = class extends NumericLabelProvider {
+  get formatLabel() {
+    return (value) => `${Math.round(value)}`;
+  }
+};
 var Column3DChart = class {
   constructor(config) {
     this.container = null;
@@ -653,9 +688,15 @@ var Column3DChart = class {
     this.wasmContext = null;
     this.dataSeries = null;
     this.columnSeries = null;
+    this.sineSeries = null;
     this.isDestroyed = false;
+    this.stats = { pulseCount: 0, peakValue: 0 };
+    this.cameraClampingEnabled = false;
+    this.initialCameraPosition = { x: -250, y: 450, z: 280 };
+    this.initialCameraTarget = { x: 0, y: 0, z: 0 };
     this.id = config.id ?? generateId("column3d");
     this.config = config;
+    this.cameraClampingEnabled = config.enableCameraClamping ?? true;
   }
   /**
    * Initialize the chart in the given container
@@ -695,9 +736,28 @@ var Column3DChart = class {
     let sciChart3DSurface;
     let wasmContext;
     try {
+      const customLightTheme = {
+        ...new SciChartJSLightTheme(),
+        // Label and title colors - make them pure black
+        tickTextBrush: "#000000",
+        axisTitleColor: "#000000",
+        labelForegroundBrush: "#000000",
+        labelBackgroundBrush: "transparent",
+        // 3D specific properties
+        axis3DBandsFill: "#e5e5e5",
+        axisTitleTextColor: "#000000",
+        majorGridLineBrush: "#7e7e7e",
+        minorGridLineBrush: "#aaaaaa",
+        textAnnotationForeground: "#000000",
+        axisBorder: "#000000",
+        // Additional label properties
+        labelBorderBrush: "#000000",
+        cursorLabelForegroundBrush: "#000000"
+      };
       const result = await SciChart3DSurface.create(
         this.container.id,
         {
+          theme: customLightTheme,
           isZYPlaneVisible: false
         }
       );
@@ -722,48 +782,128 @@ var Column3DChart = class {
       position: new Vector3(cameraPos.x, cameraPos.y, cameraPos.z),
       target: new Vector3(cameraTarget.x, cameraTarget.y, cameraTarget.z)
     });
+    this.initialCameraPosition = cameraPos;
+    this.initialCameraTarget = cameraTarget;
+    if (this.cameraClampingEnabled) {
+      this.setupCameraClamping();
+    }
     sciChart3DSurface.chartModifiers.add(
       new OrbitModifier3D(),
-      new MouseWheelZoomModifier3D()
+      new MouseWheelZoomModifier3D(),
+      new ResetCamera3DModifier()
     );
+    this.setupAxes();
+    this.addColumnData(this.config.data);
+    if (this.config.showSineWave !== false) {
+      this.addSineWave();
+    }
+    this.addTooltip();
+  }
+  /**
+   * Setup camera clamping to restrict camera movement.
+   * Yaw snaps to boundaries: >100 → -180, >=0 → 0 (keeps view in -180..0 range).
+   * Pitch clamped to [0, 89]. Radius clamped to [495, 805].
+   */
+  setupCameraClamping() {
+    if (!this.surface) return;
+    let isClamping = false;
+    this.surface.camera.propertyChanged.subscribe(() => {
+      if (isClamping) return;
+      isClamping = true;
+      try {
+        if (!this.surface) return;
+        let yaw = this.surface.camera.orbitalYaw;
+        let pitch = this.surface.camera.orbitalPitch;
+        let cameraRadius = this.surface.camera.radius;
+        const maxCameraRadius = this.config.maxCameraRadius ?? 805;
+        const minCameraRadius = this.config.minCameraRadius ?? 495;
+        if (Math.floor(yaw) > 100) {
+          yaw = -180;
+        } else if (Math.floor(yaw) >= 0) {
+          yaw = 0;
+        }
+        if (pitch <= 0) {
+          pitch = 0;
+        } else if (pitch >= 89) {
+          pitch = 89;
+        }
+        if (cameraRadius >= maxCameraRadius) {
+          cameraRadius = maxCameraRadius;
+        } else if (cameraRadius <= minCameraRadius) {
+          cameraRadius = minCameraRadius;
+        }
+        if (yaw !== this.surface.camera.orbitalYaw) {
+          this.surface.camera.orbitalYaw = yaw;
+        }
+        if (pitch !== this.surface.camera.orbitalPitch) {
+          this.surface.camera.orbitalPitch = pitch;
+        }
+        if (cameraRadius !== this.surface.camera.radius) {
+          this.surface.camera.radius = cameraRadius;
+        }
+      } finally {
+        isClamping = false;
+      }
+    });
+  }
+  /**
+   * Setup axes with proper configuration
+   */
+  setupAxes() {
+    if (!this.surface || !this.wasmContext) return;
+    const wasmContext = this.wasmContext;
     const xRange = this.config.xRange ?? { min: 0, max: 360 };
     const yRange = this.config.yRange ?? { min: 0, max: 5e3 };
     const zRange = this.config.zRange ?? { min: 0, max: 50 };
-    const baseAxisOptions = {
-      drawMinorGridLines: false,
-      majorGridLineStyle: { color: "#7e7e7e" },
-      planeBorderThickness: 3
-    };
-    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
-      ...baseAxisOptions,
+    const uom = this.config.unitOfMeasurement;
+    const yAxisTitle = this.config.yAxisTitle ?? (uom ? `Amplitude (${UOM_LABELS[uom] || uom})` : "Amplitude (mVp)");
+    this.surface.xAxis = new NumericAxis3D(wasmContext, {
       axisTitle: this.config.xAxisTitle ?? "Phase Angle (\xB0)",
       autoTicks: false,
       visibleRange: new NumberRange(xRange.min, xRange.max),
       majorDelta: 45,
       minorDelta: 15,
+      labelProvider: new IntegerLabelProvider(),
+      drawMinorGridLines: false,
+      majorGridLineStyle: { color: "#7e7e7e" },
       flippedCoordinates: true,
-      axisBandsFill: "#d2d2d2"
+      axisBandsFill: "#d2d2d2",
+      planeBorderThickness: 3,
+      axisTitleStyle: { color: "#000000", fontFamily: "Arial" },
+      labelStyle: { color: "#000000", fontFamily: "Arial" }
     });
-    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
-      ...baseAxisOptions,
-      axisTitle: this.config.yAxisTitle ?? "Amplitude (mVp)",
+    this.surface.yAxis = new NumericAxis3D(wasmContext, {
+      axisTitle: yAxisTitle,
       visibleRange: new NumberRange(yRange.min, yRange.max),
-      axisBandsFill: "#b1b1b1"
+      labelProvider: new IntegerLabelProvider(),
+      drawMinorGridLines: false,
+      majorGridLineStyle: { color: "#7e7e7e" },
+      axisBandsFill: "#b1b1b1",
+      axisTitleStyle: { color: "#000000", fontFamily: "Arial" },
+      labelStyle: { color: "#000000", fontFamily: "Arial" }
     });
-    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
-      ...baseAxisOptions,
+    this.surface.zAxis = new NumericAxis3D(wasmContext, {
       axisTitle: this.config.zAxisTitle ?? "Cycle",
       majorDelta: 10,
       minorDelta: 5,
       visibleRange: new NumberRange(zRange.min, zRange.max),
+      drawMinorGridLines: false,
+      majorGridLineStyle: { color: "#7e7e7e" },
       axisBandsFill: "#d0d0d0",
-      labelPrecision: 0
+      planeBorderThickness: 3,
+      labelPrecision: 0,
+      axisTitleStyle: { color: "#000000", fontFamily: "Arial" },
+      labelStyle: { color: "#000000", fontFamily: "Arial" }
     });
-    this.addColumnData(this.config.data);
-    if (this.config.showSineWave !== false) {
-      this.addSineWave();
+    if (wasmContext.eSCRTTextAlignement) {
+      this.surface.yAxis.labelStyle.alignment = wasmContext.eSCRTTextAlignement.SCRT_TEXT_ALIGNEMENT_SCREEN_AUTOROTATED;
     }
-    this.addTooltip();
+    this.surface.xAxis.axisTitleStyle.color = "#000000";
+    this.surface.xAxis.labelStyle.color = "#000000";
+    this.surface.yAxis.axisTitleStyle.color = "#000000";
+    this.surface.yAxis.labelStyle.color = "#000000";
+    this.surface.zAxis.axisTitleStyle.color = "#000000";
+    this.surface.zAxis.labelStyle.color = "#000000";
   }
   /**
    * Add column data to the chart
@@ -771,18 +911,49 @@ var Column3DChart = class {
   addColumnData(data) {
     if (!this.surface || !this.wasmContext) return;
     const wasmContext = this.wasmContext;
+    const uom = this.config.unitOfMeasurement;
+    const convertedData = data.map(([x, y, z]) => {
+      let convertedY = Math.abs(y);
+      if (uom === 3 || uom === "dBm") {
+        convertedY = mVrmsToDbm(convertedY);
+      } else if (uom === 4 || uom === "dB") {
+        convertedY = mVpToDb(convertedY);
+      }
+      return [x, convertedY, z];
+    });
+    let pulseCount = 0;
+    let peakValue = 0;
+    convertedData.forEach(([, y]) => {
+      pulseCount++;
+      if (y > peakValue) peakValue = y;
+    });
+    this.stats = { pulseCount, peakValue: parseFloat(peakValue.toFixed(2)) };
+    this.config.onStatsChange?.(this.stats);
     this.dataSeries = new XyzDataSeries3D(wasmContext);
-    data.forEach(([x, y, z]) => {
+    convertedData.forEach(([x, y, z]) => {
       this.dataSeries.append(x, y, z);
     });
-    this.columnSeries = new ColumnRenderableSeries3D(wasmContext, {
-      dataSeries: this.dataSeries,
-      fill: this.config.barFill ?? "#52aaf2",
-      stroke: this.config.barStroke ?? "#52aaf2",
-      opacity: this.config.barOpacity ?? 0.95,
-      dataPointWidthX: this.config.barWidthX ?? 8,
-      dataPointWidthZ: this.config.barWidthZ ?? 8
-    });
+    if (this.config.useCylinderMarkers) {
+      this.columnSeries = new ColumnRenderableSeries3D(wasmContext, {
+        dataSeries: this.dataSeries,
+        pointMarker: new CylinderPointMarker3D(wasmContext, {
+          fill: this.config.barFill ?? "#52aaf2"
+        }),
+        fill: this.config.barFill ?? "#52aaf2",
+        stroke: this.config.barStroke ?? "#52aaf2",
+        dataPointWidthX: this.config.barWidthX ?? 4,
+        dataPointWidthZ: this.config.barWidthZ ?? 4
+      });
+    } else {
+      this.columnSeries = new ColumnRenderableSeries3D(wasmContext, {
+        dataSeries: this.dataSeries,
+        fill: this.config.barFill ?? "#52aaf2",
+        stroke: this.config.barStroke ?? "#52aaf2",
+        opacity: this.config.barOpacity ?? 0.95,
+        dataPointWidthX: this.config.barWidthX ?? 8,
+        dataPointWidthZ: this.config.barWidthZ ?? 8
+      });
+    }
     this.surface.renderableSeries.add(this.columnSeries);
   }
   /**
@@ -793,20 +964,22 @@ var Column3DChart = class {
     const wasmContext = this.wasmContext;
     const sineData = new XyzDataSeries3D(wasmContext);
     const backPlaneZ = 0;
-    const center = this.config.sineWaveCenter ?? 2e3;
-    const amplitude = this.config.sineWaveAmplitude ?? 2e3;
+    const uom = this.config.unitOfMeasurement;
+    const isDbScale = uom === 3 || uom === 4 || uom === "dBm" || uom === "dB";
+    const center = this.config.sineWaveCenter ?? (isDbScale ? 40 : 2e3);
+    const amplitude = this.config.sineWaveAmplitude ?? center;
     for (let deg = 0; deg <= 360; deg += 5) {
       const rad = deg * Math.PI / 180;
       const y = center + amplitude * Math.sin(rad);
       sineData.append(deg, y, backPlaneZ);
     }
-    const sineSeries = new PointLineRenderableSeries3D(wasmContext, {
+    this.sineSeries = new PointLineRenderableSeries3D(wasmContext, {
       dataSeries: sineData,
       stroke: "black",
       strokeThickness: 3,
       opacity: 1
     });
-    this.surface.renderableSeries.add(sineSeries);
+    this.surface.renderableSeries.add(this.sineSeries);
   }
   /**
    * Add tooltip modifier
@@ -816,12 +989,14 @@ var Column3DChart = class {
     const xTitle = this.config.xAxisTitle ?? "Phase Angle";
     const yTitle = this.config.yAxisTitle ?? "Amplitude";
     const zTitle = this.config.zAxisTitle ?? "Cycle";
+    const uom = this.config.unitOfMeasurement;
+    const unit = uom ? UOM_LABELS[uom] || uom : "mVp";
     const tooltipModifier = new TooltipModifier3D({
       tooltipDataTemplate: (seriesInfo) => {
         const valuesWithLabels = [];
         if (seriesInfo && seriesInfo.isHit) {
-          valuesWithLabels.push(`${xTitle}: ${seriesInfo.xValue}`);
-          valuesWithLabels.push(`${yTitle}: ${seriesInfo.yValue}`);
+          valuesWithLabels.push(`${xTitle}: ${seriesInfo.xValue}\xB0`);
+          valuesWithLabels.push(`${yTitle}: ${seriesInfo.yValue} ${unit}`);
           valuesWithLabels.push(`${zTitle}: ${seriesInfo.zValue}`);
         }
         return valuesWithLabels;
@@ -833,12 +1008,30 @@ var Column3DChart = class {
    * Set new data for the chart
    */
   setData(data) {
-    if (!this.dataSeries) {
+    if (!this.dataSeries || !this.surface || !this.wasmContext) {
       this.config.data = data;
       return;
     }
+    const uom = this.config.unitOfMeasurement;
+    const convertedData = data.map(([x, y, z]) => {
+      let convertedY = Math.abs(y);
+      if (uom === 3 || uom === "dBm") {
+        convertedY = mVrmsToDbm(convertedY);
+      } else if (uom === 4 || uom === "dB") {
+        convertedY = mVpToDb(convertedY);
+      }
+      return [x, convertedY, z];
+    });
+    let pulseCount = 0;
+    let peakValue = 0;
+    convertedData.forEach(([, y]) => {
+      pulseCount++;
+      if (y > peakValue) peakValue = y;
+    });
+    this.stats = { pulseCount, peakValue: parseFloat(peakValue.toFixed(2)) };
+    this.config.onStatsChange?.(this.stats);
     this.dataSeries.clear();
-    data.forEach(([x, y, z]) => {
+    convertedData.forEach(([x, y, z]) => {
       this.dataSeries.append(x, y, z);
     });
     if (this.surface) {
@@ -856,6 +1049,42 @@ var Column3DChart = class {
     }
     this.surface.invalidateElement();
   }
+  /**
+   * Set camera to a preset position
+   */
+  setCameraPreset(presetIndex) {
+    const presets = this.config.cameraPresets ?? DEFAULT_CAMERA_PRESETS;
+    if (presetIndex >= 0 && presetIndex < presets.length) {
+      const preset = presets[presetIndex];
+      this.setCameraPosition(preset.position, preset.target);
+    }
+  }
+  /**
+   * Reset camera to initial position
+   */
+  resetCamera() {
+    this.setCameraPosition(this.initialCameraPosition, this.initialCameraTarget);
+  }
+  /**
+   * Update Y axis range
+   */
+  setYAxisRange(min, max) {
+    if (!this.surface) return;
+    this.surface.yAxis.visibleRange = new NumberRange(min, max);
+  }
+  /**
+   * Update Z axis range (cycle range)
+   */
+  setZAxisRange(min, max) {
+    if (!this.surface) return;
+    this.surface.zAxis.visibleRange = new NumberRange(min, max);
+  }
+  /**
+   * Get current statistics
+   */
+  getStats() {
+    return { ...this.stats };
+  }
   /**
    * Update chart options
    */
@@ -863,7 +1092,7 @@ var Column3DChart = class {
     this.config = { ...this.config, ...options };
     if (options.cameraPosition && this.surface && this.wasmContext) {
       const pos = options.cameraPosition;
-      const target = options.cameraTarget ?? { x: 0, y: 0, z: 0 };
+      const target = options.cameraTarget ?? this.config.cameraTarget ?? { x: 0, y: 50, z: 0 };
       this.setCameraPosition(pos, target);
     }
     if (options.barFill || options.barStroke || options.barOpacity) {
@@ -873,6 +1102,12 @@ var Column3DChart = class {
         if (options.barOpacity !== void 0) this.columnSeries.opacity = options.barOpacity;
       }
     }
+    if (options.yRange && this.surface) {
+      this.surface.yAxis.visibleRange = new NumberRange(options.yRange.min, options.yRange.max);
+    }
+    if (options.zRange && this.surface) {
+      this.surface.zAxis.visibleRange = new NumberRange(options.zRange.min, options.zRange.max);
+    }
   }
   /**
    * Get the SciChart surface for advanced operations
@@ -880,6 +1115,17 @@ var Column3DChart = class {
   getSurface() {
     return this.surface;
   }
+  /**
+   * Notify SciChart that the container has resized so the WebGL canvas
+   * adjusts to the new dimensions. Call after maximize / minimize.
+   */
+  resize() {
+    if (!this.surface || this.isDestroyed) return;
+    try {
+      this.surface.invalidateElement?.();
+    } catch {
+    }
+  }
   /**
    * Destroy and clean up
    */
@@ -903,7 +1149,7 @@ var Column3DChart = class {
     return { ...this.config };
   }
   /**
-   * Check if chart is ready (initialized and not destroyed)
+   * Check if chart is ready
    */
   isReady() {
     return this.surface !== null && !this.isDestroyed;
@@ -953,7 +1199,7 @@ var defaultPRPDColorStops = [
   { offset: 1, color: "Red" }
 ];
 var createPRPDTheme = () => {
-  const theme = new SciChartJSLightTheme();
+  const theme = new SciChartJSLightTheme$1();
   theme.sciChartBackground = "#f9f9f9";
   theme.gridBackgroundBrush = "grey";
   theme.axisBandsFill = "#dcdcdc";
@@ -962,7 +1208,7 @@ var createPRPDTheme = () => {
   return theme;
 };
 var createLegendTheme = () => {
-  const theme = new SciChartJSLightTheme();
+  const theme = new SciChartJSLightTheme$1();
   theme.sciChartBackground = "#ffffff";
   theme.gridBackgroundBrush = "#ffffff";
   theme.axisBandsFill = "#ffffff";
@@ -1544,6 +1790,6 @@ function configureSciChart(options) {
   }
 }
 
-export { BaseChart, Column3DChart, PRPDChart, Surface3DChart, VERSION, calculateDataRange, clamp, configureSciChart, createColumn3DChart, createPRPDChart, createSurface3DChart, debounce, deepMerge, extractXValues, extractYValues, formatNumber, generateId, hexToRgba, lerp, normalizeDataPoints, parseSize, throttle };
+export { BaseChart, Column3DChart, DEFAULT_CAMERA_PRESETS, PRPDChart, Surface3DChart, UOM_LABELS, VERSION, calculateDataRange, clamp, configureSciChart, createColumn3DChart, createPRPDChart, createSurface3DChart, debounce, deepMerge, extractXValues, extractYValues, formatNumber, generateId, hexToRgba, lerp, mVpToDb, mVrmsToDbm, normalizeDataPoints, parseSize, throttle };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map