@rfkit/charts 1.0.85 → 1.0.87

package/engine/index.d.ts

@@ -5,6 +5,8 @@ import IQEye from './iqEye';
 import Dial from './dial';
 import Radar from './radar';
 import Gauge from './gauge';
+import WebGLEngine from './webglEngine';
+import WebGLSeries from './webglSeries';
 import { OrientationType, GraphicType, type StateProps } from './type';
-export { Heatmap, Series, IQ, IQEye, OrientationType, GraphicType, Dial, Radar, Gauge, };
+export { Heatmap, Series, IQ, IQEye, OrientationType, GraphicType, Dial, Radar, Gauge, WebGLEngine, WebGLSeries, };
 export type { StateProps };

package/engine/webglEngine.d.ts

@@ -0,0 +1,23 @@
+import type { StateProps } from './type';
+export default class WebGLEngine {
+    state: StateProps & {
+        gl?: WebGLRenderingContext;
+        program?: WebGLProgram;
+        buffers?: {
+            position: WebGLBuffer;
+            color: WebGLBuffer;
+        };
+    };
+    constructor(props: StateProps);
+    updateProps(e: Partial<StateProps>): void;
+    init(_p: StateProps): void;
+    initWebGL(): void;
+    createShaderProgram(): WebGLProgram | null;
+    private createShader;
+    resize(draw?: boolean): void;
+    clear(): void;
+    draw(): void;
+    drawLines(vertices: Float32Array, colors: Float32Array): void;
+    drawTriangles(vertices: Float32Array, colors: Float32Array): void;
+    setupBuffers(vertices: Float32Array, colors: Float32Array): void;
+}

package/engine/webglExample.d.ts

@@ -0,0 +1,21 @@
+import { WebGLSeries } from './index';
+import type { SeriesConfig } from '../types';
+/**
+ * WebGL Series 使用示例
+ *
+ * 这个示例展示了如何使用WebGL版本的Series类来替代传统的Canvas 2D绘制
+ * WebGL版本提供了更好的性能，特别是在处理大量数据点时
+ */
+export declare function createWebGLChart(containerId: string): WebGLSeries;
+export declare function updateChartData(webglSeries: WebGLSeries): void;
+export declare function performanceComparison(containerId: string): {
+    webglSeries: WebGLSeries;
+};
+export declare function multipleGraphicTypes(containerId: string): WebGLSeries;
+export declare function colorGradientBars(containerId: string): WebGLSeries;
+export declare function realTimeUpdate(containerId: string): {
+    webglSeries: WebGLSeries;
+    cleanup: () => void;
+};
+export declare function checkWebGLSupport(): boolean;
+export declare function createOptimalSeries(containerId: string, seriesConfig: SeriesConfig[]): WebGLSeries;

package/engine/webglSeries.d.ts

@@ -0,0 +1,22 @@
+import { type StateProps } from './type';
+import WebGLEngine from './webglEngine';
+import type { AxisYRange, RecursiveObject, SeriesConfig } from '../types';
+export default class WebGLSeries extends WebGLEngine {
+    private vertexData;
+    private colorData;
+    private throttledDraw;
+    init(props: StateProps): void;
+    updateProps(e: RecursiveObject): void;
+    clear(): void;
+    setRange(range: AxisYRange): void;
+    setIntervel(interval: number): void;
+    setSeries(e: SeriesConfig): void;
+    render(e: SeriesConfig): void;
+    private hexToRgba;
+    private generateLineVertices;
+    private generateSteplineVertices;
+    private generateBarVertices;
+    private generateCircleVertices;
+    private generateRectVertices;
+    draw(): void;
+}

package/index.js

@@ -3244,7 +3244,7 @@ const getDateTime = (t = Date.now(), sep1 = '-', sep2 = ':', time = false)=>{
     const dateStr = `${year}${sep1}${month}${sep1}${day}`;
     return `${dateStr} ${timeStr}`;
 };
-function throttle(func = ()=>{}, wait = 1000 / 30) {
+function utils_throttle(func = ()=>{}, wait = 1000 / 30) {
     let prev = 0;
     return (...arg)=>{
         const now = Date.now();
@@ -5425,7 +5425,7 @@ const fillImageData = (canvasWidth, canvasHeight, data, imageData, getColor)=>{
         }
     }
 };
-class ColorInterpolator {
+class ColorInterpolator_ColorInterpolator {
     colorsPresetList = [];
     range = [
         0,
@@ -5550,7 +5550,7 @@ class Series extends engine_Engine {
         super.updateProps(e);
         const { colors = this.state.colors } = e;
         if (this.state.barValue2Color && !this.state.CI) this.updateProps({
-            CI: new ColorInterpolator(colors, 0, 100, 0.1)
+            CI: new ColorInterpolator_ColorInterpolator(colors, 0, 100, 0.1)
         });
     }
     clear() {
@@ -5600,7 +5600,7 @@ class Series extends engine_Engine {
     }
     render(e) {
         e && this.setSeries(e);
-        throttle(()=>{
+        utils_throttle(()=>{
             this.draw();
         })();
     }
@@ -6044,7 +6044,7 @@ class Heatmap extends engine_Engine {
             const [rangeMin, rangeMax] = range;
             if (isNumberAlias(rangeMax) && isNumberAlias(rangeMax) && rangeMin < rangeMax) if (this.state.CI) this.state.CI.setColors(colors, rangeMin, rangeMax, 0.1);
             else this.updateProps({
-                CI: new ColorInterpolator(colors, rangeMin, rangeMax, 0.1)
+                CI: new ColorInterpolator_ColorInterpolator(colors, rangeMin, rangeMax, 0.1)
             });
         }
     }
@@ -6078,7 +6078,7 @@ class Heatmap extends engine_Engine {
     render(data) {
         if (data?.length >= 0) {
             this.state.data = data;
-            throttle(()=>{
+            utils_throttle(()=>{
                 this.draw();
             })();
         }
@@ -6106,7 +6106,7 @@ class IQ extends engine_Engine {
     render(data) {
         if (data.IData && data.QData) {
             this.state.data = data;
-            throttle(()=>{
+            utils_throttle(()=>{
                 this.draw();
             })();
         }
@@ -6173,7 +6173,7 @@ class iqEye_IQ extends engine_Engine {
     render(data) {
         if (data.IData && data.QData) {
             this.state.data = data;
-            throttle(()=>{
+            utils_throttle(()=>{
                 this.draw();
             })();
         }
@@ -8397,7 +8397,7 @@ EventBus_styles_module_options.domAPI = styleDomAPI_default();
 EventBus_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(EventBus_styles_module.Z, EventBus_styles_module_options);
 const components_EventBus_styles_module = EventBus_styles_module.Z && EventBus_styles_module.Z.locals ? EventBus_styles_module.Z.locals : void 0;
-const EventBus_EventBus = ({ id })=>{
+const EventBus = ({ id })=>{
     const { state: { globalID } } = useStore_useStore();
     const EID = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>getEID(id), [
         id
@@ -8443,7 +8443,7 @@ const EventBus_EventBus = ({ id })=>{
     }, [
         EID
     ]);
-    const handleMouseMove = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(throttle((e)=>{
+    const handleMouseMove = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(utils_throttle((e)=>{
         createMoveEventManager(EID)(e, calculateEventRelativePosition(e));
         updateCursor();
         if (dragState.current.isDragging && dragState.current.startPoint.event) {
@@ -8489,7 +8489,7 @@ const EventBus_EventBus = ({ id })=>{
     }, [
         EID
     ]);
-    const handleWheel = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(throttle((e)=>{
+    const handleWheel = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(utils_throttle((e)=>{
         createWheelEventManager(EID)(-1 * e.deltaY, calculateEventRelativePosition(e));
     }), [
         EID
@@ -8519,7 +8519,7 @@ const EventBus_EventBus = ({ id })=>{
         })
     });
 };
-const EventBus = EventBus_EventBus;
+const components_EventBus = EventBus;
 const CURSOR_SETACTIVE = (globalID, func)=>subscription_createSubscriptionManager(`CURSOR_SETACTIVE-${globalID}`, '0', func);
 function convertCoordToVisualLeft({ coord, zoom, segments }) {
     const { left } = coord;
@@ -9744,7 +9744,7 @@ const Area_Area = (props)=>{
     });
 };
 const Area = Area_Area;
-const HeatmapCapture = (props)=>{
+const HeatmapCapture_HeatmapCapture = (props)=>{
     const { state: { heatmapCapture } } = useStore_useStore();
     const { show, type } = heatmapCapture;
     if (!show) return null;
@@ -9756,7 +9756,7 @@ const HeatmapCapture = (props)=>{
         ...props
     });
 };
-const components_HeatmapCapture = HeatmapCapture;
+const HeatmapCapture = HeatmapCapture_HeatmapCapture;
 var Boundary_styles_module = __webpack_require__("../../../../node_modules/.pnpm/@rsbuild+core@1.3.18/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[11].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[11].use[2]!../../../../node_modules/.pnpm/@rsbuild+plugin-less@1.2.4_@rsbuild+core@1.3.22/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/GridLines/Boundary/styles.module.less");
 var Boundary_styles_module_options = {};
 Boundary_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -9882,7 +9882,7 @@ const Heatmap_Heatmap = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Boundary, {}),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Chart, {}),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(EventBus, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_EventBus, {
                         id: id
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Markers, {
@@ -9890,7 +9890,7 @@ const Heatmap_Heatmap = (props)=>{
                         heatmapMode: true,
                         selecter: selecter
                     }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_HeatmapCapture, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HeatmapCapture, {
                         id: id
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Cursor, {
@@ -10160,7 +10160,7 @@ const Occupancy_Occupancy = (props)=>{
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Occdahsed, {}),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Chart, {}),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(EventBus, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_EventBus, {
                         id: id
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Occupancy_TotalLine, {
@@ -11506,7 +11506,7 @@ const Board_Board = ({ id })=>{
 };
 const FrequencyMarkerLine_Board = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(Board_Board);
 const FrequencyMarkerLine_COMPONENT_KEY = constants_ToolType.FrequencyMarkerLine;
-const FrequencyMarkerLine = (props)=>{
+const FrequencyMarkerLine_FrequencyMarkerLine = (props)=>{
     const { state: { frequencyMarkerLine }, dispatch } = useStore_useStore();
     const { show, display, left, onChange } = frequencyMarkerLine;
     const { id } = props;
@@ -11580,7 +11580,7 @@ const FrequencyMarkerLine = (props)=>{
         })
     });
 };
-const components_FrequencyMarkerLine = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyMarkerLine);
+const FrequencyMarkerLine = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FrequencyMarkerLine_FrequencyMarkerLine);
 const Spectrum_Spectrum = (props)=>{
     const { selecter, children } = props;
     const { state: { axisY: { autoranging }, series: { weaken }, globalID } } = useStore_useStore();
@@ -11672,7 +11672,7 @@ const Spectrum_Spectrum = (props)=>{
                         heatmapMode: false,
                         selecter: selecter
                     }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(EventBus, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_EventBus, {
                         id: id
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Limit, {
@@ -11693,7 +11693,7 @@ const Spectrum_Spectrum = (props)=>{
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Stripe, {
                         id: id
                     }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FrequencyMarkerLine, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyMarkerLine, {
                         id: id
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyAllocation, {}),
@@ -11704,7 +11704,7 @@ const Spectrum_Spectrum = (props)=>{
     });
 };
 const modules_Spectrum = Spectrum_Spectrum;
-const Level_Level = (props)=>{
+const Level = (props)=>{
     const { state: { axisY, globalID } } = useStore_useStore();
     const { opacity } = props;
     const { chart, Chart } = hooks_useChart({
@@ -11733,7 +11733,7 @@ const Level_Level = (props)=>{
         style: style
     });
 };
-const Level = Level_Level;
+const modules_Level = Level;
 function uselevelStreamAnalyzer() {
     const { state: { globalID, axisY: { range }, levelStream: { cacheTime, granularity } } } = useStore_useStore();
     const analyzer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
@@ -11827,7 +11827,7 @@ const LevelStream_Chart_Chart = (props)=>{
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_FlexBox, {
             children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Spectrum, {
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(PluginBox, {
-                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Level, {
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Level, {
                         opacity: 0.5
                     })
                 })
@@ -13141,14 +13141,15 @@ function useSeries() {
     ]);
     const updateSeries = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((config)=>{
         if (!config?.name) return;
-        const { name, data } = config;
+        const { name, label, data } = config;
         const existingSeries = seriesRef.current.get(name);
+        console.log(label, name, existingSeries?.label, existingSeries?.name);
         const newConfig = {
             ...SERIES_DEFAULT_CONFIG,
             ...existingSeries,
             ...config,
-            label: config.label || existingSeries?.label || name,
-            data: existingSeries?.data || data
+            label: label || existingSeries?.label || name || existingSeries?.name,
+            data: data || existingSeries?.data
         };
         if (!constants_SERIES_NAMES.includes(name) && !seriesStore.data.has(name) && void 0 === config.display) newConfig.display = true;
         seriesRef.current.set(name, newConfig);

package/package.json

@@ -5,6 +5,6 @@
   "types": "index.d.ts",
   "author": "Hxgh",
   "license": "MIT",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "private": false
 }

package/utils/index.d.ts

@@ -91,3 +91,16 @@ export declare const createChartRenderID: ({ moduleType, globalID, }: {
  * @returns 转换后的TimestampedFloat32Array数组
  */
 export declare const convertToTimestampedArrays: (data: number[][], timestamps?: Array<number>) => TimestampedFloat32Array[];
+/**
+ * 防抖函数
+ * @param fn 需要防抖的函数
+ * @param delay 延迟时间（毫秒）
+ * @returns 带有cancel方法的防抖函数
+ */
+export declare const debounce: <T extends (...args: unknown[]) => unknown>(fn: T, delay?: number) => ((...args: Parameters<T>) => void) & {
+    cancel: () => void;
+};
+/**
+ * 基于 requestAnimationFrame 的节流函数，适合视觉更新相关操作
+ */
+export declare function debounceRequestAnimationFrame<T extends unknown[]>(func?: (...args: T) => void): (...args: T) => void;