@rfkit/charts 1.0.93 → 1.0.94

package/README.md

@@ -179,6 +179,7 @@ export interface PublishSpectrum {
   pstype: PSType.Spectrum;
   data: Float32Array;
   extraData?: SpectrumExtraData;
+  template?: Float32Array;
   // 瀑布图可选参数
   timestamp?: number;
   // 扫描可选参数

package/config/constants.d.ts

@@ -4,6 +4,7 @@ export declare const SERIES: {
     maxData: import("./setting").LineConfig;
     avgData: import("./setting").LineConfig;
     threshold: import("./setting").LineConfig;
+    template: import("./setting").LineConfig;
 };
 export declare const SERIES_NAMES: string[];
 export declare const REAL_DATA_NAME: string;

package/config/setting.d.ts

@@ -24,6 +24,7 @@ interface Config {
         maxData: LineConfig;
         avgData: LineConfig;
         threshold: LineConfig;
+        template: LineConfig;
     };
     gradient: GradientConfig;
     levelStream: LevelStreamConfig;

package/engine/type.d.ts

@@ -7,7 +7,8 @@ export declare enum GraphicType {
     Rect = "rect",
     Line = "line",
     Stepline = "stepline",
-    Bar = "bar"
+    Bar = "bar",
+    Area = "area"
 }
 export interface StateProps {
     id: string;

package/index.js

@@ -3586,6 +3586,13 @@ const defaultConfig = {
             thickness: 1,
             label: "\u95E8\u9650\u503C",
             display: false
+        },
+        template: {
+            name: 'template',
+            color: '#eb5b5b',
+            thickness: 1,
+            label: "\u6A21\u677F",
+            display: false
         }
     },
     gradient: {
@@ -5350,21 +5357,24 @@ var type_GraphicType = /*#__PURE__*/ function(GraphicType) {
     GraphicType["Line"] = "line";
     GraphicType["Stepline"] = "stepline";
     GraphicType["Bar"] = "bar";
+    GraphicType["Area"] = "area";
     return GraphicType;
 }({});
 function hexToRGBA(hexColor, alpha) {
     const hexRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
     if (!hexRegex.test(hexColor)) throw new Error('Invalid hex color format');
     const hex = hexColor.replace('#', '');
-    let r, g, b;
+    let r;
+    let g;
+    let b;
     if (3 === hex.length) {
-        r = parseInt(hex[0] + hex[0], 16);
-        g = parseInt(hex[1] + hex[1], 16);
-        b = parseInt(hex[2] + hex[2], 16);
+        r = Number.parseInt(hex[0] + hex[0], 16);
+        g = Number.parseInt(hex[1] + hex[1], 16);
+        b = Number.parseInt(hex[2] + hex[2], 16);
     } else if (6 === hex.length) {
-        r = parseInt(hex.substring(0, 2), 16);
-        g = parseInt(hex.substring(2, 4), 16);
-        b = parseInt(hex.substring(4, 6), 16);
+        r = Number.parseInt(hex.substring(0, 2), 16);
+        g = Number.parseInt(hex.substring(2, 4), 16);
+        b = Number.parseInt(hex.substring(4, 6), 16);
     } else throw new Error('Invalid hex color length');
     const a = 'number' == typeof alpha ? Math.round(255 * Math.max(0, Math.min(1, alpha))) : 255;
     return {
@@ -5742,6 +5752,56 @@ class Series extends engine_Engine {
                     ctx.fill();
                 }
             }
+            if (type === type_GraphicType.Area) {
+                let points = [];
+                const { r, g, b } = hexToRGBA(color);
+                const drawAreaAndStepline = (pointsToDraw)=>{
+                    if (0 === pointsToDraw.length) return;
+                    const [firstX, firstY] = pointsToDraw[0];
+                    const [lastX, lastY] = pointsToDraw[pointsToDraw.length - 1];
+                    const endX = Math.round(lastX + per);
+                    ctx.beginPath();
+                    ctx.moveTo(firstX, 0);
+                    ctx.lineTo(firstX, firstY);
+                    for(let j = 1; j < pointsToDraw.length; j++){
+                        const [_, prevY] = pointsToDraw[j - 1];
+                        const [currX, currY] = pointsToDraw[j];
+                        ctx.lineTo(currX, prevY);
+                        ctx.lineTo(currX, currY);
+                    }
+                    ctx.lineTo(endX, lastY);
+                    ctx.lineTo(endX, 0);
+                    ctx.closePath();
+                    const gradient = ctx.createLinearGradient(0, 0, 0, height);
+                    gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0)`);
+                    gradient.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0.5)`);
+                    ctx.fillStyle = gradient;
+                    ctx.fill();
+                    ctx.beginPath();
+                    ctx.moveTo(firstX, firstY);
+                    for(let j = 1; j < pointsToDraw.length; j++){
+                        const [_, prevY] = pointsToDraw[j - 1];
+                        const [currX, currY] = pointsToDraw[j];
+                        ctx.lineTo(currX, prevY);
+                        ctx.lineTo(currX, currY);
+                    }
+                    ctx.lineTo(endX, lastY);
+                    ctx.lineWidth = thickness;
+                    ctx.strokeStyle = color;
+                    ctx.stroke();
+                };
+                for(let i = 0; i < len; i += 1){
+                    const value = data[i];
+                    if (void 0 === value || Number.isNaN(value)) {
+                        drawAreaAndStepline(points);
+                        points = [];
+                    } else points.push([
+                        Math.round(i * per),
+                        Math.round((value - min) / rangeY * height)
+                    ]);
+                }
+                drawAreaAndStepline(points);
+            }
             if (type === type_GraphicType.Bar) if (orientation === type_OrientationType.Horizontal) {
                 const h = height / len;
                 const hh = Math.round(h);
@@ -7158,6 +7218,9 @@ const AxisYSpectrum = (props)=>{
 const spectrum = AxisYSpectrum;
 const passThroughSeries = (globalID, series)=>subscription_openData(`passThroughSeries-${globalID}`, series, {});
 class Spectrum {
+    state;
+    useRangeAutoFocus;
+    firstRenderAutoFocus;
     constructor(props){
         this.state = {
             chart: null,
@@ -7167,8 +7230,10 @@ class Spectrum {
             renderRange: RANGE_DEFAULT,
             interval: 1,
             series: {},
+            globalID: '',
             ...props
         };
+        this.firstRenderAutoFocus = false;
         this.init();
     }
     init() {
@@ -7182,6 +7247,11 @@ class Spectrum {
             this.setSeries(JSON.parse(JSON.stringify(config)));
             return config;
         });
+        this.setSeries({
+            ...SERIES.template,
+            type: type_GraphicType.Area,
+            display: true
+        });
         this.useRangeAutoFocus = ()=>{
             useRangeAutoFocus(this.state.globalID)();
         };
@@ -7193,7 +7263,7 @@ class Spectrum {
             for(let i = 0; i < s.length; i += 1){
                 const [name] = s[i];
                 const data = d[name];
-                if (data && constants_SERIES_NAMES.includes(name)) {
+                if (data && (constants_SERIES_NAMES.includes(name) || 'template' === name)) {
                     chart.render({
                         name,
                         data
@@ -7202,15 +7272,13 @@ class Spectrum {
                 }
             }
         }
-        if (extraData) {
-            for (const [name, { outputData: data }] of extraData)if (data) {
-                const seriesConfig = this.state.series[name];
-                chart.render({
-                    ...seriesConfig,
-                    name,
-                    data
-                });
-            }
+        if (extraData) for (const [name, { outputData }] of extraData){
+            const seriesConfig = series[name];
+            if (outputData) chart.render({
+                ...seriesConfig,
+                name,
+                data: outputData
+            });
         }
     }
     updateMainSeries(data) {
@@ -13216,6 +13284,7 @@ function useSpectrumAnalyzer(props) {
     const extraOutputData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(new Map());
     const occupancyData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(new Float32Array());
     const totalOccupancyData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(0);
+    const templateData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(new Float32Array());
     const { series, updateSeries, resetSeries } = useSeries();
     const getExtraData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data)=>{
         const len = srcIndexCache.current?.length;
@@ -13246,10 +13315,6 @@ function useSpectrumAnalyzer(props) {
                     outputData: getExtraData(data),
                     originalData: data
                 });
-                tools(globalIDRef.current, constants_ModuleType.Spectrum)({
-                    pstype: constants_PSType.Render,
-                    extraData: extraOutputData.current
-                });
                 const db = withDatabase(globalIDRef.current);
                 db.spectrumExtra = extraOutputData.current;
             }
@@ -13277,6 +13342,17 @@ function useSpectrumAnalyzer(props) {
     }, [
         getExtraData
     ]);
+    const updateTemplateData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data)=>{
+        if (!data) return;
+        if (globalIDRef.current) {
+            templateData.current = new Float32Array(data);
+            updateSpectrum({
+                template: getExtraData(templateData.current)
+            });
+        }
+    }, [
+        getExtraData
+    ]);
     const updateStationInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data)=>{
         if (!data) return;
         if (globalIDRef.current) dispatch({
@@ -13294,7 +13370,8 @@ function useSpectrumAnalyzer(props) {
     const updateSpectrum = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((renderData)=>{
         tools(globalIDRef.current, constants_ModuleType.Spectrum)({
             pstype: constants_PSType.Render,
-            data: renderData
+            data: renderData,
+            extraData: extraOutputData.current
         });
     }, [
         srcIndexCache
@@ -13361,9 +13438,8 @@ function useSpectrumAnalyzer(props) {
                 data: getExtraData(occupancyData.current),
                 totalOccupancy: totalOccupancyData.current
             });
-            if (globalIDRef.current) tools(globalIDRef.current, constants_ModuleType.Spectrum)({
-                pstype: constants_PSType.Render,
-                extraData: extraOutputData.current
+            if (templateData.current && templateData.current.length > 0) updateSpectrum({
+                template: getExtraData(templateData.current)
             });
         }
     }, [
@@ -13384,9 +13460,9 @@ function useSpectrumAnalyzer(props) {
             db.spectrumExtra = getDefaultData().spectrumExtra;
             if (haveSeries) resetSeries();
             extraOutputData.current.clear();
-            tools(globalIDRef.current, constants_ModuleType.Spectrum)({
-                pstype: constants_PSType.Render,
-                extraData: extraOutputData.current
+            templateData.current = null;
+            updateSpectrum({
+                template: void 0
             });
         }, 1);
     }, [
@@ -13406,6 +13482,7 @@ function useSpectrumAnalyzer(props) {
                 if (e.extraData) updateExtraData(e.extraData);
                 if (e.data) analyzer.current.process(e);
                 if (e.maxData) analyzer.current.setMaxData(e.maxData);
+                if (e.template) updateTemplateData(e.template);
                 break;
             case constants_PSType.Heatmap:
                 if (e.data) {

package/modules/Spectrum/render.d.ts

@@ -1,36 +1,47 @@
+import { Series } from '../../engine';
 import type { SeriesConfig } from '../../types';
-export declare const passThroughSeries: (globalID: string, series?: any) => any;
+export declare const passThroughSeries: (globalID: string, series?: Record<string, SeriesConfig>) => any;
+interface SpectrumState {
+    chart: Series | null;
+    autoranging: boolean;
+    prevAutoRangeTime: number;
+    id: string;
+    renderRange: [number, number];
+    interval: number;
+    series: Record<string, SeriesConfig>;
+    globalID: string;
+}
 export default class Spectrum {
-    [x: string]: any;
-    constructor(props: any);
+    state: SpectrumState;
+    useRangeAutoFocus: () => void;
+    firstRenderAutoFocus: boolean;
+    constructor(props: Record<string, unknown>);
     init(): void;
     /**
      * 更新数据
      * TODO:可以自定义线
      */
-    updateSeries(d: {
-        [x: string]: any;
-        [x: number]: any;
-    }, extraData?: Map<string, {
+    updateSeries(d: Record<string | number, Float32Array>, extraData?: Map<string, {
         outputData: Float32Array;
         originalData: Float32Array;
     }>): void;
     updateMainSeries(data: {
-        length: any;
-        at: (arg0: number) => undefined;
+        length: number;
+        at: (arg0: number) => number | undefined;
     }): void;
     /**
      * 更新参数
      */
-    updateParams(params: any): void;
+    updateParams(params: Record<string, unknown>): void;
     /**
      * 设置线信息
      */
     setSeries(config: SeriesConfig): void;
     setDisabledClearRect(disabledClearRect: boolean): void;
-    setRange(renderRange?: any): void;
+    setRange(renderRange?: [number, number]): void;
     zoom(): void;
     reset(): void;
     resize(): void;
     clear(): void;
 }
+export {};

package/package.json

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

package/types/publish.d.ts

@@ -48,6 +48,7 @@ export interface PublishSpectrum {
     data?: Float32Array;
     maxData?: Float32Array;
     extraData?: SpectrumExtraData;
+    template?: Float32Array;
     timestamp?: number;
     offset?: number;
     segmentOffset?: number;