@rfkit/charts 1.2.20 → 1.2.21

package/index.js

@@ -2218,9 +2218,11 @@ var __webpack_modules__ = {
 
 .slider-Gua7k5 {
   box-sizing: border-box;
-  flex-direction: column;
-  width: 100%;
-  display: flex;
+  grid-template: "left-edge top-edge right-edge"
+                 "left-edge middle right-edge" 1fr
+                 "left-edge bottom-edge right-edge"
+                 / auto 1fr auto;
+  display: grid;
   position: absolute;
 }
 
@@ -2228,28 +2230,20 @@ var __webpack_modules__ = {
   content: "";
   border: 2px dashed var(--theme-color-base);
   pointer-events: none;
-  border-left: none;
-  border-right: none;
   position: absolute;
   inset: 0;
 }
 
 .slider-Gua7k5:hover:after {
   border: 4px dashed var(--theme-color-base);
-  border-left: none;
-  border-right: none;
 }
 
 .sliderEdge-tcylcl {
-  cursor: ns-resize;
   -webkit-backdrop-filter: blur();
   backdrop-filter: blur();
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: auto;
-  padding: 4px 0;
   display: flex;
   position: relative;
 }
@@ -2270,9 +2264,40 @@ var __webpack_modules__ = {
   opacity: .4;
 }
 
+.sliderEdgeTop-X8FA2i {
+  cursor: ns-resize;
+  grid-area: top-edge;
+  width: 100%;
+  height: 6px;
+}
+
+.sliderEdgeBottom-zX26bU {
+  cursor: ns-resize;
+  grid-area: bottom-edge;
+  width: 100%;
+  height: 6px;
+}
+
+.sliderEdgeLeft-Gb0Gi6 {
+  cursor: ew-resize;
+  grid-area: left-edge;
+  width: 6px;
+  height: 100%;
+}
+
+.sliderEdgeRight-zQLFdT {
+  cursor: ew-resize;
+  grid-area: right-edge;
+  width: 6px;
+  height: 100%;
+}
+
 .sliderMiddle-nnq5jr {
   cursor: move;
-  flex: 1;
+  grid-area: middle;
+  justify-content: center;
+  align-items: center;
+  display: flex;
   position: relative;
 }
 
@@ -2292,14 +2317,127 @@ var __webpack_modules__ = {
   opacity: .2;
 }
 
-.edgeText-YXURaE {
-  color: var(--theme-color-base);
-  box-shadow: var(--theme-box-shadow-base);
-  -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  align-items: center;
-  font-size: 12px;
-  display: inline-flex;
+.middleInfo-uRmQqh {
+  font-size: var(--size-font-second);
+  padding: var(--size-gap-base);
+  border-radius: var(--size-border-radius-second);
+  border: 1px solid var(--theme-border-base);
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 10;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  display: flex;
+  position: relative;
+}
+
+.middleInfo-uRmQqh:before {
+  content: "";
+  background: var(--theme-bg-second);
+  opacity: .8;
+  border-radius: inherit;
+  z-index: -1;
+  position: absolute;
+  inset: 0;
+}
+
+.middleInfoOutside-XT5SaD {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%)translateY(4px);
+}
+
+.middleInfoAbove-N2rp8G {
+  top: auto;
+  bottom: 100%;
+  transform: translateX(-50%)translateY(-4px);
+}
+
+.externalLabel-viIhBd {
+  font-size: var(--size-font-second);
+  padding: calc(var(--size-gap-base) / 2);
+  border-radius: var(--size-border-radius-second);
+  border: 1px solid var(--theme-border-base);
+  pointer-events: none;
+  white-space: nowrap;
+  z-index: 10;
+  position: absolute;
+}
+
+.externalLabel-viIhBd:before {
+  content: "";
+  background: var(--theme-bg-base);
+  opacity: .8;
+  border-radius: inherit;
+  z-index: -1;
+  position: absolute;
+  inset: 0;
+}
+
+.externalLabelLeft-LF34dy {
+  transform: translate(-100%, -50%)translateX(-4px);
+}
+
+.externalLabelRight-vsWp89 {
+  transform: translate(0%, -50%)translateX(4px);
+}
+
+.externalLabelTop-IX6khq {
+  transform: translate(-50%, -100%)translateY(-4px);
+}
+
+.externalLabelBottom-wtvHvR {
+  transform: translate(-50%)translateY(4px);
+}
+
+.externalLabelLeftInner-_wVg4C {
+  transform: translate(0%, -50%)translateX(4px);
+}
+
+.externalLabelRightInner-y93qhb {
+  transform: translate(-100%, -50%)translateX(-4px);
+}
+
+.externalLabelTopInner-MlYikk {
+  transform: translate(-50%)translateY(4px);
+}
+
+.externalLabelBottomInner-Nttz_A {
+  transform: translate(-50%, -100%)translateY(-4px);
+}
+
+.externalLabelTop-IX6khq.externalLabelHorizontalLeft-fnQkmH {
+  transform: translate(-100%, -100%)translateX(-4px)translateY(-4px);
+}
+
+.externalLabelTop-IX6khq.externalLabelHorizontalRight-Nc5hKi {
+  transform: translate(0%, -100%)translateX(4px)translateY(-4px);
+}
+
+.externalLabelTopInner-MlYikk.externalLabelHorizontalLeft-fnQkmH {
+  transform: translate(-100%)translateX(-4px)translateY(4px);
+}
+
+.externalLabelTopInner-MlYikk.externalLabelHorizontalRight-Nc5hKi {
+  transform: translate(0%)translateX(4px)translateY(4px);
+}
+
+.externalLabelBottom-wtvHvR.externalLabelHorizontalLeft-fnQkmH {
+  transform: translate(-100%)translateX(-4px)translateY(4px);
+}
+
+.externalLabelBottom-wtvHvR.externalLabelHorizontalRight-Nc5hKi {
+  transform: translate(0%)translateX(4px)translateY(4px);
+}
+
+.externalLabelBottomInner-Nttz_A.externalLabelHorizontalLeft-fnQkmH {
+  transform: translate(-100%, -100%)translateX(-4px)translateY(-4px);
+}
+
+.externalLabelBottomInner-Nttz_A.externalLabelHorizontalRight-Nc5hKi {
+  transform: translate(0%, -100%)translateX(4px)translateY(-4px);
 }
 `,
             ""
@@ -2308,8 +2446,25 @@ var __webpack_modules__ = {
             sliderContainer: "sliderContainer-lJQLJn",
             slider: "slider-Gua7k5",
             sliderEdge: "sliderEdge-tcylcl",
+            sliderEdgeTop: "sliderEdgeTop-X8FA2i",
+            sliderEdgeBottom: "sliderEdgeBottom-zX26bU",
+            sliderEdgeLeft: "sliderEdgeLeft-Gb0Gi6",
+            sliderEdgeRight: "sliderEdgeRight-zQLFdT",
             sliderMiddle: "sliderMiddle-nnq5jr",
-            edgeText: "edgeText-YXURaE"
+            middleInfo: "middleInfo-uRmQqh",
+            middleInfoOutside: "middleInfoOutside-XT5SaD",
+            middleInfoAbove: "middleInfoAbove-N2rp8G",
+            externalLabel: "externalLabel-viIhBd",
+            externalLabelLeft: "externalLabelLeft-LF34dy",
+            externalLabelRight: "externalLabelRight-vsWp89",
+            externalLabelTop: "externalLabelTop-IX6khq",
+            externalLabelBottom: "externalLabelBottom-wtvHvR",
+            externalLabelLeftInner: "externalLabelLeftInner-_wVg4C",
+            externalLabelRightInner: "externalLabelRightInner-y93qhb",
+            externalLabelTopInner: "externalLabelTopInner-MlYikk",
+            externalLabelBottomInner: "externalLabelBottomInner-Nttz_A",
+            externalLabelHorizontalLeft: "externalLabelHorizontalLeft-fnQkmH",
+            externalLabelHorizontalRight: "externalLabelHorizontalRight-Nc5hKi"
         };
         const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
     },
@@ -7273,99 +7428,558 @@ function useAxisYWidth_useAxisYWidth() {
         pluginBoxWidth: `calc(100% - ${w}px`
     };
 }
-var FullTicks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/heatmap/components/FullTicks/styles.module.less");
-var FullTicks_styles_module_options = {};
-FullTicks_styles_module_options.styleTagTransform = styleTagTransform_default();
-FullTicks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-FullTicks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-FullTicks_styles_module_options.domAPI = styleDomAPI_default();
-FullTicks_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(FullTicks_styles_module.Z, FullTicks_styles_module_options);
-const components_FullTicks_styles_module = FullTicks_styles_module.Z && FullTicks_styles_module.Z.locals ? FullTicks_styles_module.Z.locals : void 0;
-const COMPONENT_KEY = 'AxisYHeatmapTicks';
-const HEATMAP_FULL_TICKS = 10;
-const FullTicks_Ticks = (props)=>{
-    const { id } = props;
-    const { state: { globalID } } = useStore_useStore();
-    const [timeValues, setTimeValues] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(Array(HEATMAP_FULL_TICKS).fill(''));
-    const positions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        const pos = [];
-        for(let i = 0; i < HEATMAP_FULL_TICKS; i++)pos.push(`${100 - i / (HEATMAP_FULL_TICKS - 1) * 100}%`);
-        return pos;
-    }, []);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (id && globalID) withUpdateData(id, COMPONENT_KEY, ()=>{
-            const { waterfallData } = withDatabase(globalID).getAllRawData();
-            const values = [];
-            const dataLength = waterfallData.length;
-            for(let i = 0; i < HEATMAP_FULL_TICKS; i++){
-                const index = Math.floor((dataLength - 1) * i / (HEATMAP_FULL_TICKS - 1));
-                const data = waterfallData[index];
-                const value = data?.timestamp ? (0, utils.Fc)(data.timestamp, void 0, void 0, true) : '';
-                values.push(value);
-            }
-            setTimeValues(values);
-        });
-    }, [
-        id,
-        globalID
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: components_FullTicks_styles_module.ticks,
-        children: positions.map((position, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: components_FullTicks_styles_module.tick,
-                style: {
-                    top: position
-                },
-                children: timeValues[index]
-            }, index))
-    });
-};
-const FullTicks = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FullTicks_Ticks);
-var Ticks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/heatmap/components/Ticks/styles.module.less");
-var Ticks_styles_module_options = {};
-Ticks_styles_module_options.styleTagTransform = styleTagTransform_default();
-Ticks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-Ticks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-Ticks_styles_module_options.domAPI = styleDomAPI_default();
-Ticks_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(Ticks_styles_module.Z, Ticks_styles_module_options);
-const components_Ticks_styles_module = Ticks_styles_module.Z && Ticks_styles_module.Z.locals ? Ticks_styles_module.Z.locals : void 0;
-const Ticks_COMPONENT_KEY = 'AxisYHeatmapTicks';
-const Ticks_Ticks = (props)=>{
-    const { id, inside = false } = props;
-    const { state: { globalID } } = useStore_useStore();
-    const [tickFormat, setTickFormat] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (id && globalID) withUpdateData(id, Ticks_COMPONENT_KEY, ()=>{
-            let { waterfallData: d } = withDatabase(globalID).getAllRawData();
-            if (d?.length > 0) {
-                if (d.at(0)?.length === 0) d = d?.filter?.((i)=>i?.length > 0);
-                const start = d.at(-1)?.timestamp;
-                const end = d.at(0)?.timestamp;
-                if (start && end) setTickFormat((start - end) / 1e3);
-            }
-        });
+var AxisX_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisX/styles.module.less");
+var AxisX_styles_module_options = {};
+AxisX_styles_module_options.styleTagTransform = styleTagTransform_default();
+AxisX_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+AxisX_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+AxisX_styles_module_options.domAPI = styleDomAPI_default();
+AxisX_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(AxisX_styles_module.Z, AxisX_styles_module_options);
+const components_AxisX_styles_module = AxisX_styles_module.Z && AxisX_styles_module.Z.locals ? AxisX_styles_module.Z.locals : void 0;
+var RulerTicks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/RulerTicks/styles.module.less");
+var RulerTicks_styles_module_options = {};
+RulerTicks_styles_module_options.styleTagTransform = styleTagTransform_default();
+RulerTicks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+RulerTicks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+RulerTicks_styles_module_options.domAPI = styleDomAPI_default();
+RulerTicks_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(RulerTicks_styles_module.Z, RulerTicks_styles_module_options);
+const components_RulerTicks_styles_module = RulerTicks_styles_module.Z && RulerTicks_styles_module.Z.locals ? RulerTicks_styles_module.Z.locals : void 0;
+const RulerTicks_RulerTicks = ({ length = 10, tickColor = 'var(--theme-color-base)', tickHeight = 8, strokeWidth = 1, orientation = 'horizontal', split = 2 })=>{
+    const renderTick = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
+        const tickSpacing = 100 / length;
+        const position = index * tickSpacing;
+        let tickHeightUse = 'horizontal' === orientation && index % split === 0 || 'vertical' === orientation && index % split !== 0 ? 1.68 * tickHeight : tickHeight;
+        if ('horizontal' === orientation) tickHeightUse /= 0.5;
+        if (!position) return null;
+        return 'horizontal' === orientation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
+            x1: position,
+            y1: "0",
+            x2: position,
+            y2: tickHeightUse,
+            stroke: tickColor,
+            strokeWidth: strokeWidth,
+            vectorEffect: "non-scaling-stroke"
+        }, `tick-${index}`) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
+            x1: "100",
+            y1: position,
+            x2: 100 - tickHeightUse,
+            y2: position,
+            stroke: tickColor,
+            strokeWidth: strokeWidth,
+            vectorEffect: "non-scaling-stroke"
+        }, `tick-${index}`);
     }, [
-        id,
-        globalID
+        length,
+        tickColor,
+        strokeWidth,
+        orientation
     ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: components_Ticks_styles_module.ticks,
-        style: {
-            alignItems: inside ? 'flex-start' : 'flex-end'
-        },
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
+        className: components_RulerTicks_styles_module.RulerTicks,
+        width: "100%",
+        height: "100%",
+        preserveAspectRatio: "none",
+        viewBox: "0 0 100 100",
         children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: components_Ticks_styles_module.start,
-                children: "0"
+            'horizontal' === orientation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
+                x1: "0",
+                y1: "0",
+                x2: "100",
+                y2: "0",
+                stroke: tickColor,
+                strokeWidth: strokeWidth,
+                vectorEffect: "non-scaling-stroke"
+            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
+                x1: "100",
+                y1: "0",
+                x2: "100",
+                y2: "100",
+                stroke: tickColor,
+                strokeWidth: strokeWidth,
+                vectorEffect: "non-scaling-stroke"
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: components_Ticks_styles_module.end,
-                title: "\u5355\u4F4D\uFF1A\u79D2",
-                children: tickFormat?.toFixed(1)
-            })
-        ]
+            Array.from({
+                length: length + 1
+            }).map((_, index)=>renderTick(index))
+        ]
+    });
+};
+const components_RulerTicks = RulerTicks_RulerTicks;
+var ZoomOffsetContainer_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/Zoom/ZoomOffsetContainer/styles.module.less");
+var ZoomOffsetContainer_styles_module_options = {};
+ZoomOffsetContainer_styles_module_options.styleTagTransform = styleTagTransform_default();
+ZoomOffsetContainer_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+ZoomOffsetContainer_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+ZoomOffsetContainer_styles_module_options.domAPI = styleDomAPI_default();
+ZoomOffsetContainer_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(ZoomOffsetContainer_styles_module.Z, ZoomOffsetContainer_styles_module_options);
+const Zoom_ZoomOffsetContainer_styles_module = ZoomOffsetContainer_styles_module.Z && ZoomOffsetContainer_styles_module.Z.locals ? ZoomOffsetContainer_styles_module.Z.locals : void 0;
+const ZoomOffsetContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className }, ref)=>{
+    const { state: { zoom: { style } } } = useStore_useStore();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        ref: ref,
+        className: `${Zoom_ZoomOffsetContainer_styles_module.ZoomOffsetContainer} ${className}`,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+            className: Zoom_ZoomOffsetContainer_styles_module.con,
+            style: style,
+            children: children
+        })
+    });
+});
+const Zoom_ZoomOffsetContainer = ZoomOffsetContainer;
+const ThreeFixedTicks = ()=>{
+    const { state: { zoom: { interval: { start: intervalStart, end: intervalEnd } }, axisX: { unit, unitKHz }, segments } } = useStore_useStore();
+    const { totalPoints } = segments;
+    const endIndex = totalPoints - 1;
+    const { start, bandwidth = 0 } = segments[0] ?? {};
+    const center = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!endIndex || !bandwidth || void 0 === start) return 0;
+        const midIndex = (0, utils.wF)(intervalStart, intervalEnd);
+        const safeIndex = Math.max(0, Math.min(midIndex, endIndex));
+        return (0, utils.lj)(start + safeIndex * bandwidth / (1000 * endIndex));
+    }, [
+        intervalStart,
+        intervalEnd,
+        start,
+        endIndex,
+        bandwidth
+    ]);
+    const bandwidthDiff = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        if (!totalPoints || !bandwidth) return 0;
+        const intervalWidth = intervalEnd - intervalStart + 1;
+        return (0, utils.lj)(intervalWidth * bandwidth / (2 * totalPoints));
+    }, [
+        intervalStart,
+        intervalEnd,
+        totalPoints,
+        bandwidth
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: components_AxisX_styles_module.con,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
+                value: bandwidthDiff,
+                unit: unitKHz,
+                prefix: "-"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
+                value: center,
+                unit: unit
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
+                value: bandwidthDiff,
+                unit: unitKHz,
+                prefix: "+"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
+                length: 10,
+                split: 5
+            })
+        ]
+    });
+};
+const FrequencyLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ value, unit, prefix = '' })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        style: {
+            paddingLeft: '5px'
+        },
+        children: [
+            prefix,
+            value,
+            unit
+        ]
+    }));
+const FrequencyTick = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ value, index, total })=>{
+    const leftPercentage = index / total * 100;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: `${components_AxisX_styles_module.frequencyTick} ${0 === index ? components_AxisX_styles_module.first : index === total ? components_AxisX_styles_module.last : ''}`,
+        style: {
+            left: `${leftPercentage}%`
+        },
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+            children: value
+        })
+    });
+});
+const TICK_COUNT = 5;
+const DataNFixedTicks = ()=>{
+    const { state: { segments: { totalPoints }, zoom: { interval: { start: intervalStart, end: intervalEnd } }, axisX: { frequencyFormat } } } = useStore_useStore();
+    const getFrequencyByIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
+        if (!totalPoints) return 0;
+        const percentage = Math.min(100 * index / totalPoints, 100);
+        return frequencyFormat(percentage);
+    }, [
+        totalPoints,
+        frequencyFormat
+    ]);
+    const ticks = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const step = (intervalEnd - intervalStart + 1) / TICK_COUNT;
+        return Array.from({
+            length: TICK_COUNT + 1
+        }, (_, i)=>getFrequencyByIndex(intervalStart + step * i));
+    }, [
+        intervalStart,
+        intervalEnd,
+        getFrequencyByIndex
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: components_AxisX_styles_module.con,
+        children: [
+            ticks.map((tick, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyTick, {
+                    value: tick,
+                    index: index,
+                    total: ticks.length - 1
+                }, `tick-${index}`)),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
+                length: 10,
+                split: 2
+            })
+        ]
+    });
+};
+const MScanTicks = ()=>{
+    const { state: { segments } } = useStore_useStore();
+    const style = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            display: 'flex',
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+        }), []);
+    const t = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>segments.map((item)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                style: style,
+                children: item.label
+            }, item.index)), [
+        segments
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: components_AxisX_styles_module.con,
+        children: [
+            t,
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
+                length: 2 * segments.length,
+                split: 2
+            })
+        ]
+    });
+};
+const AxisXTicks = ({ type })=>{
+    const { state: { axisX: { show } } } = useStore_useStore();
+    if (!show) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: components_AxisX_styles_module.AxisXTicks,
+        children: type === constants_ChartType.Scan || type === constants_ChartType.ScanDF360 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DataNFixedTicks, {}) : type === constants_ChartType.MScan ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomOffsetContainer, {
+            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MScanTicks, {})
+        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThreeFixedTicks, {})
+    });
+};
+const AxisX_Ticks = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisXTicks);
+const AxisX_AxisX = ({ type })=>{
+    const { state: { axisX } } = useStore_useStore();
+    const { children, unit, ticks } = axisX;
+    const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
+    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const axisStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            marginLeft: width,
+            width: pluginBoxWidth
+        }), [
+        width,
+        pluginBoxWidth
+    ]);
+    if (!axisX) return null;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Tooltip, {
+        content: `\u{5355}\u{4F4D}${unit}`,
+        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            ref: ref,
+            className: components_AxisX_styles_module.axisx,
+            style: axisStyle,
+            children: [
+                ticks && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                            className: components_AxisX_styles_module.unit,
+                            children: unit
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX_Ticks, {
+                            type: type
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                    children: children
+                })
+            ]
+        })
+    });
+};
+const AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX_AxisX);
+var FlexBox_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/FlexBox/styles.module.less");
+var FlexBox_styles_module_options = {};
+FlexBox_styles_module_options.styleTagTransform = styleTagTransform_default();
+FlexBox_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+FlexBox_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+FlexBox_styles_module_options.domAPI = styleDomAPI_default();
+FlexBox_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(FlexBox_styles_module.Z, FlexBox_styles_module_options);
+const components_FlexBox_styles_module = FlexBox_styles_module.Z && FlexBox_styles_module.Z.locals ? FlexBox_styles_module.Z.locals : void 0;
+const FlexBox = (props)=>{
+    const { children, className, style } = props;
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: `${components_FlexBox_styles_module.FlexBox} ${className}`,
+        style: style,
+        children: children
+    });
+};
+const components_FlexBox = FlexBox;
+function useChannel() {
+    const { state: { marker, globalID }, dispatch } = useStore_useStore();
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (marker?.mode === store_MarkerMode.DDC) dispatch({
+            payload: {
+                marker: {
+                    ...marker,
+                    enabled: true,
+                    visible: true
+                }
+            }
+        });
+    }, [
+        marker?.mode
+    ]);
+    const updateChannel = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{}, [
+        globalID
+    ]);
+    return updateChannel;
+}
+function useSegments() {
+    const { state: { segments, zoom, points, axisX }, dispatch } = useStore_useStore();
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{}, [
+        segments
+    ]);
+    const setSegments = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((s)=>{
+        if (s.totalPoints) {
+            const endIndex = s.totalPoints - 1;
+            zoom.interval = {
+                start: 0,
+                end: endIndex
+            };
+            const payload = {
+                segments: s,
+                zoom,
+                axisX
+            };
+            if (0 === points.length) payload.axisX.frequencyFormat = (0, utils.Ax)(s);
+            dispatch({
+                payload
+            });
+        }
+    }, [
+        points
+    ]);
+    return [
+        segments,
+        setSegments
+    ];
+}
+const SET_SEGMENTS_DISPLAY = (globalID, func)=>subscription_createSubscriptionManager(`SET_SEGMENTS_DISPLAY-${globalID}`, '0', func);
+function useSpectrumRule(type) {
+    const { state: { zoom, globalID }, dispatch } = useStore_useStore();
+    const [segments, setSegments] = useSegments();
+    const updateSegments = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
+        const { event = constants_SegmentsEvent.Cover, index } = e;
+        const { totalPoints } = segments;
+        let start = 0;
+        let end = 0;
+        let isScanSegmentsUpdateMagnify = false;
+        if (event === constants_SegmentsEvent.Focus && totalPoints) {
+            const endIndex = totalPoints - 1;
+            if (index < segments.length) {
+                for(let i = 0; i < index; i += 1)start += segments[i].point + 1;
+                const { point } = segments[index];
+                end = start + point;
+                isScanSegmentsUpdateMagnify = true;
+            } else if (void 0 === index) {
+                start = 0;
+                end = endIndex;
+                isScanSegmentsUpdateMagnify = false;
+            }
+        }
+        zoom.interval = {
+            start,
+            end
+        };
+        zoom.isScanSegmentsUpdateMagnify = isScanSegmentsUpdateMagnify;
+        dispatch({
+            payload: {
+                zoom
+            }
+        });
+        if (event === constants_SegmentsEvent.Cover) setSegments((0, utils.sl)(e.data));
+    }, [
+        segments
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        SET_SEGMENTS_DISPLAY(globalID, (index)=>{
+            updateSegments?.({
+                pstype: constants_PSType.Segments,
+                event: constants_SegmentsEvent.Focus,
+                index
+            });
+        });
+    }, [
+        globalID,
+        updateSegments
+    ]);
+    const pointsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(3);
+    const ruleRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)({
+        frequency: 0,
+        bandwidth: 0
+    });
+    const generateSegmentsFromPoints = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((points, newRule = ruleRef.current)=>{
+        if (newRule.bandwidth && newRule.frequency && points) {
+            const segments = (0, utils.IS)({
+                frequency: newRule?.frequency,
+                bandwidth: newRule?.bandwidth,
+                totalPoints: points
+            });
+            if ('function' == typeof setSegments) setSegments(segments);
+        }
+    }, [
+        setSegments
+    ]);
+    const updateBandwidthRule = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
+        const { frequency, bandwidth } = e;
+        if (!frequency || !bandwidth) return;
+        ruleRef.current = {
+            frequency,
+            bandwidth
+        };
+        generateSegmentsFromPoints(pointsRef.current, e);
+    }, []);
+    const updateData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data)=>{
+        if (!data) return;
+        const newPoints = data?.length;
+        if (newPoints && newPoints !== pointsRef.current) {
+            pointsRef.current = newPoints;
+            generateSegmentsFromPoints(newPoints);
+            if (type === constants_ChartType.LiteNormalized) setSegments((0, utils.uq)(newPoints));
+        }
+    }, [
+        generateSegmentsFromPoints,
+        setSegments,
+        type
+    ]);
+    useChannel();
+    const handleSpectrumRule = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
+        switch(e.pstype){
+            case constants_PSType.Spectrum:
+                if (e.data) updateData(e.data);
+                break;
+            case constants_PSType.SpectrumBandwidth:
+                updateBandwidthRule(e);
+                break;
+            case constants_PSType.Segments:
+                updateSegments?.(e);
+                break;
+            default:
+                break;
+        }
+    }, []);
+    return handleSpectrumRule;
+}
+var FullTicks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/heatmap/components/FullTicks/styles.module.less");
+var FullTicks_styles_module_options = {};
+FullTicks_styles_module_options.styleTagTransform = styleTagTransform_default();
+FullTicks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+FullTicks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+FullTicks_styles_module_options.domAPI = styleDomAPI_default();
+FullTicks_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(FullTicks_styles_module.Z, FullTicks_styles_module_options);
+const components_FullTicks_styles_module = FullTicks_styles_module.Z && FullTicks_styles_module.Z.locals ? FullTicks_styles_module.Z.locals : void 0;
+const COMPONENT_KEY = 'AxisYHeatmapTicks';
+const HEATMAP_FULL_TICKS = 10;
+const FullTicks_Ticks = (props)=>{
+    const { id } = props;
+    const { state: { globalID } } = useStore_useStore();
+    const [timeValues, setTimeValues] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(Array(HEATMAP_FULL_TICKS).fill(''));
+    const positions = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
+        const pos = [];
+        for(let i = 0; i < HEATMAP_FULL_TICKS; i++)pos.push(`${100 - i / (HEATMAP_FULL_TICKS - 1) * 100}%`);
+        return pos;
+    }, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (id && globalID) withUpdateData(id, COMPONENT_KEY, ()=>{
+            const { waterfallData } = withDatabase(globalID).getAllRawData();
+            const values = [];
+            const dataLength = waterfallData.length;
+            for(let i = 0; i < HEATMAP_FULL_TICKS; i++){
+                const index = Math.floor((dataLength - 1) * i / (HEATMAP_FULL_TICKS - 1));
+                const data = waterfallData[index];
+                const value = data?.timestamp ? (0, utils.Fc)(data.timestamp, void 0, void 0, true) : '';
+                values.push(value);
+            }
+            setTimeValues(values);
+        });
+    }, [
+        id,
+        globalID
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: components_FullTicks_styles_module.ticks,
+        children: positions.map((position, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: components_FullTicks_styles_module.tick,
+                style: {
+                    top: position
+                },
+                children: timeValues[index]
+            }, index))
+    });
+};
+const FullTicks = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(FullTicks_Ticks);
+var Ticks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/heatmap/components/Ticks/styles.module.less");
+var Ticks_styles_module_options = {};
+Ticks_styles_module_options.styleTagTransform = styleTagTransform_default();
+Ticks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
+Ticks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
+Ticks_styles_module_options.domAPI = styleDomAPI_default();
+Ticks_styles_module_options.insertStyleElement = insertStyleElement_default();
+injectStylesIntoStyleTag_default()(Ticks_styles_module.Z, Ticks_styles_module_options);
+const components_Ticks_styles_module = Ticks_styles_module.Z && Ticks_styles_module.Z.locals ? Ticks_styles_module.Z.locals : void 0;
+const Ticks_COMPONENT_KEY = 'AxisYHeatmapTicks';
+const Ticks_Ticks = (props)=>{
+    const { id, inside = false } = props;
+    const { state: { globalID } } = useStore_useStore();
+    const [tickFormat, setTickFormat] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (id && globalID) withUpdateData(id, Ticks_COMPONENT_KEY, ()=>{
+            let { waterfallData: d } = withDatabase(globalID).getAllRawData();
+            if (d?.length > 0) {
+                if (d.at(0)?.length === 0) d = d?.filter?.((i)=>i?.length > 0);
+                const start = d.at(-1)?.timestamp;
+                const end = d.at(0)?.timestamp;
+                if (start && end) setTickFormat((start - end) / 1e3);
+            }
+        });
+    }, [
+        id,
+        globalID
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: components_Ticks_styles_module.ticks,
+        style: {
+            alignItems: inside ? 'flex-start' : 'flex-end'
+        },
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: components_Ticks_styles_module.start,
+                children: "0"
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: components_Ticks_styles_module.end,
+                title: "\u5355\u4F4D\uFF1A\u79D2",
+                children: tickFormat?.toFixed(1)
+            })
+        ]
     });
 };
 const components_Ticks = Ticks_Ticks;
@@ -7378,7 +7992,7 @@ Default_styles_module_options.domAPI = styleDomAPI_default();
 Default_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(Default_styles_module.Z, Default_styles_module_options);
 const type_Default_styles_module = Default_styles_module.Z && Default_styles_module.Z.locals ? Default_styles_module.Z.locals : void 0;
-const Default = (props)=>{
+const Default_Default = (props)=>{
     const { state: { axisY: { heatmapFullTicks } } } = useStore_useStore();
     const { axisYWidth, marginLeft } = useAxisYWidth_useAxisYWidth();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -7394,7 +8008,7 @@ const Default = (props)=>{
         })
     });
 };
-const type_Default = Default;
+const Default = Default_Default;
 var Default_GradientRibbon_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/heatmap/type/Default/GradientRibbon/styles.module.less");
 var Default_GradientRibbon_styles_module_options = {};
 Default_GradientRibbon_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -7415,7 +8029,7 @@ const AxisYHeatmap = (props)=>{
         renderRange
     ]);
     if (false === show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(type_Default, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Default, {
         ...props
     });
 };
@@ -7538,28 +8152,6 @@ const Popover = ({ children })=>{
     });
 };
 const components_Popover = Popover;
-var ZoomOffsetContainer_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/Zoom/ZoomOffsetContainer/styles.module.less");
-var ZoomOffsetContainer_styles_module_options = {};
-ZoomOffsetContainer_styles_module_options.styleTagTransform = styleTagTransform_default();
-ZoomOffsetContainer_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-ZoomOffsetContainer_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-ZoomOffsetContainer_styles_module_options.domAPI = styleDomAPI_default();
-ZoomOffsetContainer_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(ZoomOffsetContainer_styles_module.Z, ZoomOffsetContainer_styles_module_options);
-const Zoom_ZoomOffsetContainer_styles_module = ZoomOffsetContainer_styles_module.Z && ZoomOffsetContainer_styles_module.Z.locals ? ZoomOffsetContainer_styles_module.Z.locals : void 0;
-const ZoomOffsetContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ children, className }, ref)=>{
-    const { state: { zoom: { style } } } = useStore_useStore();
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        ref: ref,
-        className: `${Zoom_ZoomOffsetContainer_styles_module.ZoomOffsetContainer} ${className}`,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-            className: Zoom_ZoomOffsetContainer_styles_module.con,
-            style: style,
-            children: children
-        })
-    });
-});
-const Zoom_ZoomOffsetContainer = ZoomOffsetContainer;
 const withStationDataUpdate = (globalID, name, func)=>{
     const subscriptionId = `stationData-update-${globalID}`;
     if (name && func) {
@@ -8635,7 +9227,7 @@ function useKeyEvent(globalID, EID) {
         EID
     ]);
 }
-const EventBus_EventBus = ({ id })=>{
+const EventBus = ({ id })=>{
     const { state: { globalID } } = useStore_useStore();
     const EID = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>getEID(id), [
         id
@@ -8758,25 +9350,7 @@ const EventBus_EventBus = ({ id })=>{
         })
     });
 };
-const EventBus = EventBus_EventBus;
-var FlexBox_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/FlexBox/styles.module.less");
-var FlexBox_styles_module_options = {};
-FlexBox_styles_module_options.styleTagTransform = styleTagTransform_default();
-FlexBox_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-FlexBox_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-FlexBox_styles_module_options.domAPI = styleDomAPI_default();
-FlexBox_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(FlexBox_styles_module.Z, FlexBox_styles_module_options);
-const components_FlexBox_styles_module = FlexBox_styles_module.Z && FlexBox_styles_module.Z.locals ? FlexBox_styles_module.Z.locals : void 0;
-const FlexBox = (props)=>{
-    const { children, className, style } = props;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: `${components_FlexBox_styles_module.FlexBox} ${className}`,
-        style: style,
-        children: children
-    });
-};
-const components_FlexBox = FlexBox;
+const components_EventBus = EventBus;
 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.5.0_@rsbuild+core@1.6.7/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();
@@ -8794,7 +9368,7 @@ const Boundary_Boundary = ()=>{
 };
 const Boundary = Boundary_Boundary;
 const PERCENTAGE = 100;
-const PRECISION = 1e4;
+const tools_PRECISION = 1e4;
 const defaultAreaInfoResult = {
     startIndex: 0,
     endIndex: 0,
@@ -8826,8 +9400,8 @@ function calculateAreaInfo({ endLeft, startLeft, startTop, endTop, frequencyForm
         end: Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * endLeft / PERCENTAGE) - 1))
     };
     const frequencies = {
-        start: Math.round(Number(frequencyFormat(startLeft)) * PRECISION) / PRECISION,
-        end: Math.round(Number(frequencyFormat(endLeft)) * PRECISION) / PRECISION
+        start: Math.round(Number(frequencyFormat(startLeft)) * tools_PRECISION) / tools_PRECISION,
+        end: Math.round(Number(frequencyFormat(endLeft)) * tools_PRECISION) / tools_PRECISION
     };
     const bandwidth = Math.abs(frequencies.end - frequencies.start);
     const startTimestamp = waterfallData[indices.top]?.timestamp || 0;
@@ -8865,7 +9439,7 @@ Area_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(Area_styles_module.Z, Area_styles_module_options);
 const HeatmapCapture_Area_styles_module = Area_styles_module.Z && Area_styles_module.Z.locals ? Area_styles_module.Z.locals : void 0;
 const Area_COMPONENT_KEY = constants_ToolType.HeatmapCapture;
-const Area = (props)=>{
+const Area_Area = (props)=>{
     const { state: { heatmapCapture, segments, axisX: { frequencyFormat, unit }, system, globalID } } = useStore_useStore();
     const { id } = props;
     const { type, show, sync, onChange } = heatmapCapture;
@@ -9032,7 +9606,7 @@ const Area = (props)=>{
         ]
     });
 };
-const HeatmapCapture_Area = Area;
+const Area = Area_Area;
 var RowIndex_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/HeatmapCapture/RowIndex/styles.module.less");
 var RowIndex_styles_module_options = {};
 RowIndex_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -9170,24 +9744,36 @@ injectStylesIntoStyleTag_default()(Slider_styles_module.Z, Slider_styles_module_
 const HeatmapCapture_Slider_styles_module = Slider_styles_module.Z && Slider_styles_module.Z.locals ? Slider_styles_module.Z.locals : void 0;
 const DEFAULT_HEIGHT = 30;
 const DEFAULT_POSITION = 100 - DEFAULT_HEIGHT;
-const MAX_HEIGHT = 100;
-const MIN_HEIGHT = 0;
+const MAX_SIZE = 100;
+const MIN_SIZE = 5;
+const SNAP_THRESHOLD = 2;
 const Slider = ({ id })=>{
-    const { state: { globalID, heatmapCapture: { type, show, display, interval, onChange } } } = useStore_useStore();
+    const { state: { globalID, heatmapCapture: { type, show, display, interval, onChange }, axisX: { frequencyFormat, unit, unitKHz } } } = useStore_useStore();
     const canSlider = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === store_HeatmapCaptureType.Slider && show && display, [
         type,
         show,
         display
     ]);
-    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(Math.min(DEFAULT_HEIGHT, MAX_HEIGHT));
-    const [position, setPosition] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(DEFAULT_POSITION);
+    const [rect, setRect] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)({
+        position: DEFAULT_POSITION,
+        height: Math.min(DEFAULT_HEIGHT, MAX_SIZE),
+        leftPosition: 0,
+        width: 100
+    });
     const [isDragging, setIsDragging] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const [dragType, setDragType] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
-    const [startY, setStartY] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
-    const [startPosition, setStartPosition] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
-    const [startHeight, setStartHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
     const [info, setInfo] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
     const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const dragStartRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)({
+        x: 0,
+        y: 0,
+        rect: rect
+    });
+    const rectRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(rect);
+    const frequencyFormatRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(frequencyFormat);
+    rectRef.current = rect;
+    frequencyFormatRef.current = frequencyFormat;
+    const { position, height, leftPosition, width } = rect;
     const getHeatmapData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
         const { waterfallData } = withDatabase(globalID).getAllRawData();
         return [
@@ -9197,100 +9783,135 @@ const Slider = ({ id })=>{
     }, [
         globalID
     ]);
-    const [updateKey, setUpdateKey] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (!id || !globalID) return;
-        const cleanup = withUpdateData(id, 'Slider', ()=>{
-            setUpdateKey((prev)=>prev + 1);
-        });
-        return cleanup;
-    }, [
-        id,
-        globalID
-    ]);
-    const calculateSliderInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((newPosition, newHeight)=>{
+    const calculateSliderInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((r)=>{
         const [heatmapData, len] = getHeatmapData();
         if (len <= 0) return null;
-        const endIndex = Math.round((100 - newPosition) / 100 * (len - 1));
-        const startIndex = Math.round((100 - (newPosition + newHeight)) / 100 * (len - 1));
+        const { position: pos, height: h, leftPosition: left, width: w } = r;
+        const endIndex = Math.round((100 - pos) / 100 * (len - 1));
+        const startIndex = Math.round((100 - (pos + h)) / 100 * (len - 1));
         const startTimestamp = heatmapData[startIndex]?.timestamp;
-        const startTimestampFormat = (0, utils.Fc)(startTimestamp);
         const endTimestamp = heatmapData[endIndex]?.timestamp;
-        const endTimestampFormat = (0, utils.Fc)(endTimestamp);
         const duration = endTimestamp - startTimestamp;
-        const durationFormat = (duration / 1000).toFixed(3);
+        const colCount = heatmapData[0]?.length || 0;
+        const startCol = Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * left / 100) - 1));
+        const endCol = Math.max(0, Math.min(colCount - 1, Math.ceil(colCount * (left + w) / 100) - 1));
+        const formatFn = frequencyFormatRef.current;
+        const startFreqStr = formatFn?.(left);
+        const endFreqStr = formatFn?.(left + w);
+        const PRECISION = 1e4;
+        const startFrequency = startFreqStr ? Math.round(Number(startFreqStr) * PRECISION) / PRECISION : 0;
+        const endFrequency = endFreqStr ? Math.round(Number(endFreqStr) * PRECISION) / PRECISION : 0;
         return {
             startIndex,
             endIndex,
             startTimestamp,
-            startTimestampFormat,
+            startTimestampFormat: (0, utils.Fc)(startTimestamp),
             endTimestamp,
-            endTimestampFormat,
+            endTimestampFormat: (0, utils.Fc)(endTimestamp),
             duration,
-            durationFormat
+            durationFormat: (duration / 1000).toFixed(3),
+            startCol,
+            endCol,
+            startFrequency,
+            startFrequencyFormat: String(startFrequency),
+            endFrequency,
+            endFrequencyFormat: String(endFrequency),
+            bandwidth: Math.abs(endFrequency - startFrequency),
+            bandwidthFormat: (0, utils.lj)(Math.abs(endFrequency - startFrequency))
         };
     }, [
         getHeatmapData
     ]);
+    const [updateKey, setUpdateKey] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!id || !globalID) return;
+        return withUpdateData(id, 'Slider', ()=>setUpdateKey((prev)=>prev + 1));
+    }, [
+        id,
+        globalID
+    ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (!canSlider || !globalID) return;
-        const newInfo = calculateSliderInfo(position, height);
+        const newInfo = calculateSliderInfo(rect);
         if (newInfo) {
             setInfo(newInfo);
             onChange?.(newInfo);
         }
     }, [
-        updateKey
+        updateKey,
+        frequencyFormat
     ]);
     const handleMouseDown = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e, type)=>{
         e.preventDefault();
         setIsDragging(true);
         setDragType(type);
-        setStartY(e.clientY);
-        setStartPosition(position);
-        setStartHeight(height);
+        dragStartRef.current = {
+            x: e.clientX,
+            y: e.clientY,
+            rect: {
+                ...rect
+            }
+        };
     }, [
-        position,
-        height
+        rect
     ]);
     const handleMouseMove = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
         if (!isDragging || !containerRef.current) return;
-        const containerHeight = containerRef.current.clientHeight;
-        const deltaY = e.clientY - startY;
-        const deltaPercent = deltaY / containerHeight * 100;
-        let newPosition = position;
-        let newHeight = height;
+        const container = containerRef.current;
+        const { x: startX, y: startY, rect: startRect } = dragStartRef.current;
+        const deltaY = (e.clientY - startY) / container.clientHeight * 100;
+        const deltaX = (e.clientX - startX) / container.clientWidth * 100;
+        let { position: newPos, height: newH, leftPosition: newLeft, width: newW } = startRect;
         switch(dragType){
             case 'top':
                 {
-                    const bottomPosition = startPosition + startHeight;
-                    newPosition = Math.max(0, Math.min(startPosition + deltaPercent, bottomPosition - MIN_HEIGHT));
-                    newHeight = bottomPosition - newPosition;
-                    if (newHeight > MAX_HEIGHT) {
-                        newHeight = MAX_HEIGHT;
-                        newPosition = bottomPosition - MAX_HEIGHT;
+                    const bottom = startRect.position + startRect.height;
+                    newPos = Math.max(0, Math.min(startRect.position + deltaY, bottom - MIN_SIZE));
+                    newH = bottom - newPos;
+                    if (newH > MAX_SIZE) {
+                        newH = MAX_SIZE;
+                        newPos = bottom - MAX_SIZE;
                     }
                     break;
                 }
             case 'bottom':
-                newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, startHeight + deltaPercent, 100 - startPosition));
+                newH = Math.max(MIN_SIZE, Math.min(MAX_SIZE, startRect.height + deltaY, 100 - startRect.position));
+                break;
+            case 'left':
+                {
+                    const right = startRect.leftPosition + startRect.width;
+                    newLeft = Math.max(0, Math.min(startRect.leftPosition + deltaX, right - MIN_SIZE));
+                    newW = right - newLeft;
+                    if (newW > MAX_SIZE) {
+                        newW = MAX_SIZE;
+                        newLeft = right - MAX_SIZE;
+                    }
+                    break;
+                }
+            case 'right':
+                newW = Math.max(MIN_SIZE, Math.min(MAX_SIZE, startRect.width + deltaX, 100 - startRect.leftPosition));
                 break;
             case 'middle':
-                newPosition = Math.max(0, Math.min(startPosition + deltaPercent, 100 - height));
+                newPos = Math.max(0, Math.min(startRect.position + deltaY, 100 - startRect.height));
+                newLeft = Math.max(0, Math.min(startRect.leftPosition + deltaX, 100 - startRect.width));
                 break;
         }
-        setPosition(newPosition);
-        setHeight(newHeight);
-        const newInfo = calculateSliderInfo(newPosition, newHeight);
+        if (newPos < SNAP_THRESHOLD) newPos = 0;
+        if (newPos + newH > 100 - SNAP_THRESHOLD) newPos = 100 - newH;
+        if (newLeft < SNAP_THRESHOLD) newLeft = 0;
+        if (newLeft + newW > 100 - SNAP_THRESHOLD) newLeft = 100 - newW;
+        const newRect = {
+            position: newPos,
+            height: newH,
+            leftPosition: newLeft,
+            width: newW
+        };
+        setRect(newRect);
+        const newInfo = calculateSliderInfo(newRect);
         if (newInfo) setInfo(newInfo);
     }, [
         isDragging,
         dragType,
-        startY,
-        startPosition,
-        startHeight,
-        position,
-        height,
         calculateSliderInfo
     ]);
     const handleMouseUp = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
@@ -9317,46 +9938,88 @@ const Slider = ({ id })=>{
         handleMouseMove,
         handleMouseUp
     ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (!interval || !canSlider) return;
-        const { startIndex, endIndex } = interval;
+    const applyInterval = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((newInterval)=>{
+        const { startIndex, endIndex, startFrequency, endFrequency } = newInterval;
         const [_, len] = getHeatmapData();
-        const isValidInterval = !(startIndex === info?.startIndex && endIndex === info?.endIndex) && len > 0 && startIndex >= 0 && endIndex <= len && endIndex - startIndex >= Math.ceil(MIN_HEIGHT * len / 100);
-        if (isValidInterval) {
-            const newHeight = (endIndex - startIndex) / len * 100;
-            const newPosition = (1 - endIndex / len) * 100;
-            setHeight(newHeight);
-            setPosition(newPosition);
-            const newInfo = calculateSliderInfo(newPosition, newHeight);
-            if (newInfo) {
-                setInfo(newInfo);
-                onChange?.(newInfo);
+        const currentRect = rectRef.current;
+        const rowChanged = !(startIndex === info?.startIndex && endIndex === info?.endIndex) && len > 0 && startIndex >= 0 && endIndex <= len && endIndex - startIndex >= Math.ceil(MIN_SIZE * len / 100);
+        let freqChanged = false;
+        let newLeftPosition = currentRect.leftPosition;
+        let newWidth = currentRect.width;
+        if (void 0 !== startFrequency && void 0 !== endFrequency && frequencyFormat) {
+            const minFreqStr = frequencyFormat(0);
+            const maxFreqStr = frequencyFormat(100);
+            const minFreq = minFreqStr ? Number(minFreqStr) : 0;
+            const maxFreq = maxFreqStr ? Number(maxFreqStr) : 0;
+            const freqSpan = maxFreq - minFreq;
+            if (freqSpan > 0) {
+                const leftPercent = (startFrequency - minFreq) / freqSpan * 100;
+                const rightPercent = (endFrequency - minFreq) / freqSpan * 100;
+                const widthPercent = rightPercent - leftPercent;
+                if (leftPercent >= 0 && rightPercent <= 100 && widthPercent >= MIN_SIZE) {
+                    const posChanged = Math.abs(leftPercent - currentRect.leftPosition) > 0.01 || Math.abs(widthPercent - currentRect.width) > 0.01;
+                    if (posChanged) {
+                        freqChanged = true;
+                        newLeftPosition = leftPercent;
+                        newWidth = widthPercent;
+                    }
+                }
             }
         }
+        if (!rowChanged && !freqChanged) return;
+        const newRect = {
+            position: rowChanged ? (1 - endIndex / len) * 100 : currentRect.position,
+            height: rowChanged ? (endIndex - startIndex) / len * 100 : currentRect.height,
+            leftPosition: newLeftPosition,
+            width: newWidth
+        };
+        setRect(newRect);
+        const newInfo = calculateSliderInfo(newRect);
+        if (newInfo) {
+            setInfo(newInfo);
+            onChange?.(newInfo);
+        }
     }, [
-        interval,
-        canSlider,
         getHeatmapData,
-        calculateSliderInfo
+        frequencyFormat,
+        info?.startIndex,
+        info?.endIndex,
+        calculateSliderInfo,
+        onChange
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (globalID) heatmapCaptureUpdate(globalID, (e)=>{
-            const { interval: newInterval } = e;
-            if (!newInterval || !canSlider) return;
-            const { startIndex, endIndex } = newInterval;
-            const [_, len] = getHeatmapData();
-            const isValidInterval = !(startIndex === info?.startIndex && endIndex === info?.endIndex) && len > 0 && startIndex >= 0 && endIndex <= len && endIndex - startIndex >= Math.ceil(MIN_HEIGHT * len / 100);
-            if (isValidInterval) {
-                const newHeight = (endIndex - startIndex) / len * 100;
-                const newPosition = (1 - endIndex / len) * 100;
-                setHeight(newHeight);
-                setPosition(newPosition);
-                const newInfo = calculateSliderInfo(newPosition, newHeight);
-                if (newInfo) setInfo(newInfo);
-            }
+        if (interval && canSlider) applyInterval(interval);
+    }, [
+        interval?.startIndex,
+        interval?.endIndex,
+        interval?.startFrequency,
+        interval?.endFrequency,
+        canSlider,
+        applyInterval
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!globalID) return;
+        heatmapCaptureUpdate(globalID, (e)=>{
+            if (e.interval && canSlider) applyInterval(e.interval);
         });
     }, [
-        globalID
+        globalID,
+        canSlider,
+        applyInterval
+    ]);
+    const bounds = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
+            nearLeft: leftPosition < 10,
+            nearRight: leftPosition + width > 90,
+            nearTop: position < 8,
+            nearBottom: position + height > 92,
+            centerNearLeft: leftPosition + width / 2 < 10,
+            centerNearRight: leftPosition + width / 2 > 90,
+            isSmall: height < 15 && width < 20
+        }), [
+        leftPosition,
+        width,
+        position,
+        height
     ]);
     if (!canSlider) return null;
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Zoom_ZoomOffsetContainer, {
@@ -9375,32 +10038,104 @@ const Slider = ({ id })=>{
                     bottom: '0%'
                 }
             }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: HeatmapCapture_Slider_styles_module.boundaryLine,
+                style: {
+                    left: '0%'
+                }
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: HeatmapCapture_Slider_styles_module.boundaryLine,
+                style: {
+                    right: '0%'
+                }
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: `${HeatmapCapture_Slider_styles_module.externalLabel} ${bounds.nearLeft ? HeatmapCapture_Slider_styles_module.externalLabelLeftInner : HeatmapCapture_Slider_styles_module.externalLabelLeft}`,
+                style: {
+                    top: `${position + height / 2}%`,
+                    left: `${leftPosition}%`
+                },
+                children: [
+                    info?.startFrequencyFormat,
+                    unit
+                ]
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: `${HeatmapCapture_Slider_styles_module.externalLabel} ${bounds.nearRight ? HeatmapCapture_Slider_styles_module.externalLabelRightInner : HeatmapCapture_Slider_styles_module.externalLabelRight}`,
+                style: {
+                    top: `${position + height / 2}%`,
+                    left: `${leftPosition + width}%`
+                },
+                children: [
+                    info?.endFrequencyFormat,
+                    unit
+                ]
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: `${HeatmapCapture_Slider_styles_module.externalLabel} ${bounds.nearTop ? HeatmapCapture_Slider_styles_module.externalLabelTopInner : HeatmapCapture_Slider_styles_module.externalLabelTop} ${bounds.centerNearLeft ? HeatmapCapture_Slider_styles_module.externalLabelHorizontalRight : bounds.centerNearRight ? HeatmapCapture_Slider_styles_module.externalLabelHorizontalLeft : ''}`,
+                style: {
+                    top: `${position}%`,
+                    left: `${leftPosition + width / 2}%`
+                },
+                children: info?.endTimestampFormat
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: `${HeatmapCapture_Slider_styles_module.externalLabel} ${bounds.nearBottom ? HeatmapCapture_Slider_styles_module.externalLabelBottomInner : HeatmapCapture_Slider_styles_module.externalLabelBottom} ${bounds.centerNearLeft ? HeatmapCapture_Slider_styles_module.externalLabelHorizontalRight : bounds.centerNearRight ? HeatmapCapture_Slider_styles_module.externalLabelHorizontalLeft : ''}`,
+                style: {
+                    top: `${position + height}%`,
+                    left: `${leftPosition + width / 2}%`
+                },
+                children: info?.startTimestampFormat
+            }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
                 className: HeatmapCapture_Slider_styles_module.slider,
                 style: {
                     top: `${position}%`,
-                    height: `${height}%`
+                    height: `${height}%`,
+                    left: `${leftPosition}%`,
+                    width: `${width}%`
                 },
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: HeatmapCapture_Slider_styles_module.sliderEdge,
-                        onMouseDown: (e)=>handleMouseDown(e, 'top'),
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: HeatmapCapture_Slider_styles_module.edgeText,
-                            children: info?.endTimestampFormat
-                        })
+                        className: `${HeatmapCapture_Slider_styles_module.sliderEdge} ${HeatmapCapture_Slider_styles_module.sliderEdgeTop}`,
+                        onMouseDown: (e)=>handleMouseDown(e, 'top')
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: HeatmapCapture_Slider_styles_module.sliderMiddle,
-                        onMouseDown: (e)=>handleMouseDown(e, 'middle')
+                        className: `${HeatmapCapture_Slider_styles_module.sliderEdge} ${HeatmapCapture_Slider_styles_module.sliderEdgeLeft}`,
+                        onMouseDown: (e)=>handleMouseDown(e, 'left')
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: HeatmapCapture_Slider_styles_module.sliderEdge,
-                        onMouseDown: (e)=>handleMouseDown(e, 'bottom'),
-                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: HeatmapCapture_Slider_styles_module.edgeText,
-                            children: info?.startTimestampFormat
+                        className: HeatmapCapture_Slider_styles_module.sliderMiddle,
+                        onMouseDown: (e)=>handleMouseDown(e, 'middle'),
+                        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: `${HeatmapCapture_Slider_styles_module.middleInfo} ${bounds.isSmall ? HeatmapCapture_Slider_styles_module.middleInfoOutside : ''} ${bounds.isSmall && position > 50 ? HeatmapCapture_Slider_styles_module.middleInfoAbove : ''}`,
+                            children: [
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    children: [
+                                        "\u5E26\u5BBD:",
+                                        ' ',
+                                        info?.bandwidth !== void 0 ? (1000 * info.bandwidth).toFixed(2) : '',
+                                        unitKHz
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                                    children: [
+                                        "\u65F6\u957F: ",
+                                        info?.durationFormat,
+                                        "s"
+                                    ]
+                                })
+                            ]
                         })
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: `${HeatmapCapture_Slider_styles_module.sliderEdge} ${HeatmapCapture_Slider_styles_module.sliderEdgeRight}`,
+                        onMouseDown: (e)=>handleMouseDown(e, 'right')
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: `${HeatmapCapture_Slider_styles_module.sliderEdge} ${HeatmapCapture_Slider_styles_module.sliderEdgeBottom}`,
+                        onMouseDown: (e)=>handleMouseDown(e, 'bottom')
                     })
                 ]
             })
@@ -9416,7 +10151,7 @@ const HeatmapCapture_HeatmapCapture = (props)=>{
         ...props
     }) : type === store_HeatmapCaptureType.RowIndex ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HeatmapCapture_RowIndex, {
         ...props
-    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(HeatmapCapture_Area, {
+    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Area, {
         ...props
     });
 };
@@ -9878,7 +10613,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)(HeatmapCapture, {
@@ -9906,9 +10641,11 @@ const Heatmap_Chart_Chart = ({ publish, heatmapDefaultData })=>{
             }
         });
     }, []);
+    const handleSpectrumRule = useSpectrumRule(constants_ChartType.Scan);
     hooks_usePublish({
         publish,
         subscribe: (e)=>{
+            handleSpectrumRule(e);
             const { pstype } = e;
             if (pstype === constants_PSType.Heatmap) {
                 const { data, timestamps } = e;
@@ -9927,10 +10664,17 @@ const Heatmap_Chart_Chart = ({ publish, heatmapDefaultData })=>{
             tools(globalID, constants_ModuleType.Heatmap)(e);
         }
     });
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Container, {
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Heatmap, {
-            heatmapDefaultData: heatmapDefaultData
-        })
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(components_Container, {
+        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_Heatmap, {
+                    heatmapDefaultData: heatmapDefaultData
+                })
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
+                type: constants_ChartType.Scan
+            })
+        ]
     });
 };
 const Heatmap_Chart = Heatmap_Chart_Chart;
@@ -10141,76 +10885,6 @@ const GridLines = ()=>{
     });
 };
 const components_GridLines = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(GridLines);
-var RulerTicks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/RulerTicks/styles.module.less");
-var RulerTicks_styles_module_options = {};
-RulerTicks_styles_module_options.styleTagTransform = styleTagTransform_default();
-RulerTicks_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-RulerTicks_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-RulerTicks_styles_module_options.domAPI = styleDomAPI_default();
-RulerTicks_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(RulerTicks_styles_module.Z, RulerTicks_styles_module_options);
-const components_RulerTicks_styles_module = RulerTicks_styles_module.Z && RulerTicks_styles_module.Z.locals ? RulerTicks_styles_module.Z.locals : void 0;
-const RulerTicks_RulerTicks = ({ length = 10, tickColor = 'var(--theme-color-base)', tickHeight = 8, strokeWidth = 1, orientation = 'horizontal', split = 2 })=>{
-    const renderTick = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
-        const tickSpacing = 100 / length;
-        const position = index * tickSpacing;
-        let tickHeightUse = 'horizontal' === orientation && index % split === 0 || 'vertical' === orientation && index % split !== 0 ? 1.68 * tickHeight : tickHeight;
-        if ('horizontal' === orientation) tickHeightUse /= 0.5;
-        if (!position) return null;
-        return 'horizontal' === orientation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
-            x1: position,
-            y1: "0",
-            x2: position,
-            y2: tickHeightUse,
-            stroke: tickColor,
-            strokeWidth: strokeWidth,
-            vectorEffect: "non-scaling-stroke"
-        }, `tick-${index}`) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
-            x1: "100",
-            y1: position,
-            x2: 100 - tickHeightUse,
-            y2: position,
-            stroke: tickColor,
-            strokeWidth: strokeWidth,
-            vectorEffect: "non-scaling-stroke"
-        }, `tick-${index}`);
-    }, [
-        length,
-        tickColor,
-        strokeWidth,
-        orientation
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("svg", {
-        className: components_RulerTicks_styles_module.RulerTicks,
-        width: "100%",
-        height: "100%",
-        preserveAspectRatio: "none",
-        viewBox: "0 0 100 100",
-        children: [
-            'horizontal' === orientation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
-                x1: "0",
-                y1: "0",
-                x2: "100",
-                y2: "0",
-                stroke: tickColor,
-                strokeWidth: strokeWidth,
-                vectorEffect: "non-scaling-stroke"
-            }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("line", {
-                x1: "100",
-                y1: "0",
-                x2: "100",
-                y2: "100",
-                stroke: tickColor,
-                strokeWidth: strokeWidth,
-                vectorEffect: "non-scaling-stroke"
-            }),
-            Array.from({
-                length: length + 1
-            }).map((_, index)=>renderTick(index))
-        ]
-    });
-};
-const components_RulerTicks = RulerTicks_RulerTicks;
 var spectrum_components_Ticks_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisY/spectrum/components/Ticks/styles.module.less");
 var components_Ticks_styles_module_options = {};
 components_Ticks_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -11381,208 +12055,52 @@ Dropdown_styles_module_options.domAPI = styleDomAPI_default();
 Dropdown_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(Dropdown_styles_module.Z, Dropdown_styles_module_options);
 const components_Dropdown_styles_module = Dropdown_styles_module.Z && Dropdown_styles_module.Z.locals ? Dropdown_styles_module.Z.locals : void 0;
-const Dropdown = ({ value, options, onChange, placeholder = "\u8BF7\u9009\u62E9", closeOnSelect = true })=>{
-    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
-    const handleSelect = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((value)=>{
-        onChange?.(value);
-        if (closeOnSelect) setIsOpen(false);
-    }, [
-        onChange,
-        closeOnSelect
-    ]);
-    const selectedOption = options.find((option)=>option.value === value);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: components_Dropdown_styles_module.container,
-        children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                className: components_Dropdown_styles_module.dropdown,
-                onClick: ()=>setIsOpen(!isOpen),
-                children: [
-                    selectedOption?.label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                        className: components_Dropdown_styles_module.selectedText,
-                        children: selectedOption.label
-                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: components_Dropdown_styles_module.placeholder,
-                        children: 'string' == typeof placeholder ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                            className: components_Dropdown_styles_module.selectedText,
-                            children: placeholder
-                        }) : placeholder
-                    }),
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-                        className: `${components_Dropdown_styles_module.arrow} ${isOpen ? components_Dropdown_styles_module.open : ''}`,
-                        children: "\u25BC"
-                    })
-                ]
-            }),
-            isOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                className: components_Dropdown_styles_module.dropdownMenu,
-                children: options.map((option, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: `${components_Dropdown_styles_module.dropdownItem} ${value === option.value ? components_Dropdown_styles_module.active : ''}`,
-                        style: option.style,
-                        onClick: ()=>handleSelect(option.value),
-                        children: option.render ? option.render() : option.label
-                    }, null !== option.value ? option.value : `null-option-${index}`))
-            })
-        ]
-    });
-};
-const components_Dropdown = Dropdown;
-function useChannel() {
-    const { state: { marker, globalID }, dispatch } = useStore_useStore();
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (marker?.mode === store_MarkerMode.DDC) dispatch({
-            payload: {
-                marker: {
-                    ...marker,
-                    enabled: true,
-                    visible: true
-                }
-            }
-        });
-    }, [
-        marker?.mode
-    ]);
-    const updateChannel = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{}, [
-        globalID
-    ]);
-    return updateChannel;
-}
-function useSegments() {
-    const { state: { segments, zoom, points, axisX }, dispatch } = useStore_useStore();
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{}, [
-        segments
-    ]);
-    const setSegments = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((s)=>{
-        if (s.totalPoints) {
-            const endIndex = s.totalPoints - 1;
-            zoom.interval = {
-                start: 0,
-                end: endIndex
-            };
-            const payload = {
-                segments: s,
-                zoom,
-                axisX
-            };
-            if (0 === points.length) payload.axisX.frequencyFormat = (0, utils.Ax)(s);
-            dispatch({
-                payload
-            });
-        }
-    }, [
-        points
-    ]);
-    return [
-        segments,
-        setSegments
-    ];
-}
-const SET_SEGMENTS_DISPLAY = (globalID, func)=>subscription_createSubscriptionManager(`SET_SEGMENTS_DISPLAY-${globalID}`, '0', func);
-function useSpectrumRule(type) {
-    const { state: { zoom, globalID }, dispatch } = useStore_useStore();
-    const [segments, setSegments] = useSegments();
-    const updateSegments = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
-        const { event = constants_SegmentsEvent.Cover, index } = e;
-        const { totalPoints } = segments;
-        let start = 0;
-        let end = 0;
-        let isScanSegmentsUpdateMagnify = false;
-        if (event === constants_SegmentsEvent.Focus && totalPoints) {
-            const endIndex = totalPoints - 1;
-            if (index < segments.length) {
-                for(let i = 0; i < index; i += 1)start += segments[i].point + 1;
-                const { point } = segments[index];
-                end = start + point;
-                isScanSegmentsUpdateMagnify = true;
-            } else if (void 0 === index) {
-                start = 0;
-                end = endIndex;
-                isScanSegmentsUpdateMagnify = false;
-            }
-        }
-        zoom.interval = {
-            start,
-            end
-        };
-        zoom.isScanSegmentsUpdateMagnify = isScanSegmentsUpdateMagnify;
-        dispatch({
-            payload: {
-                zoom
-            }
-        });
-        if (event === constants_SegmentsEvent.Cover) setSegments((0, utils.sl)(e.data));
-    }, [
-        segments
-    ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        SET_SEGMENTS_DISPLAY(globalID, (index)=>{
-            updateSegments?.({
-                pstype: constants_PSType.Segments,
-                event: constants_SegmentsEvent.Focus,
-                index
-            });
-        });
-    }, [
-        globalID,
-        updateSegments
-    ]);
-    const pointsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(3);
-    const ruleRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)({
-        frequency: 0,
-        bandwidth: 0
-    });
-    const generateSegmentsFromPoints = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((points, newRule = ruleRef.current)=>{
-        if (newRule.bandwidth && newRule.frequency && points) {
-            const segments = (0, utils.IS)({
-                frequency: newRule?.frequency,
-                bandwidth: newRule?.bandwidth,
-                totalPoints: points
-            });
-            if ('function' == typeof setSegments) setSegments(segments);
-        }
-    }, [
-        setSegments
-    ]);
-    const updateBandwidthRule = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
-        const { frequency, bandwidth } = e;
-        if (!frequency || !bandwidth) return;
-        ruleRef.current = {
-            frequency,
-            bandwidth
-        };
-        generateSegmentsFromPoints(pointsRef.current, e);
-    }, []);
-    const updateData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((data)=>{
-        if (!data) return;
-        const newPoints = data?.length;
-        if (newPoints && newPoints !== pointsRef.current) {
-            pointsRef.current = newPoints;
-            generateSegmentsFromPoints(newPoints);
-            if (type === constants_ChartType.LiteNormalized) setSegments((0, utils.uq)(newPoints));
-        }
+const Dropdown = ({ value, options, onChange, placeholder = "\u8BF7\u9009\u62E9", closeOnSelect = true })=>{
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const handleSelect = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((value)=>{
+        onChange?.(value);
+        if (closeOnSelect) setIsOpen(false);
     }, [
-        generateSegmentsFromPoints,
-        setSegments,
-        type
+        onChange,
+        closeOnSelect
     ]);
-    useChannel();
-    const handleSpectrumRule = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((e)=>{
-        switch(e.pstype){
-            case constants_PSType.Spectrum:
-                if (e.data) updateData(e.data);
-                break;
-            case constants_PSType.SpectrumBandwidth:
-                updateBandwidthRule(e);
-                break;
-            case constants_PSType.Segments:
-                updateSegments?.(e);
-                break;
-            default:
-                break;
-        }
-    }, []);
-    return handleSpectrumRule;
-}
+    const selectedOption = options.find((option)=>option.value === value);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+        className: components_Dropdown_styles_module.container,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                className: components_Dropdown_styles_module.dropdown,
+                onClick: ()=>setIsOpen(!isOpen),
+                children: [
+                    selectedOption?.label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: components_Dropdown_styles_module.selectedText,
+                        children: selectedOption.label
+                    }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: components_Dropdown_styles_module.placeholder,
+                        children: 'string' == typeof placeholder ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                            className: components_Dropdown_styles_module.selectedText,
+                            children: placeholder
+                        }) : placeholder
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+                        className: `${components_Dropdown_styles_module.arrow} ${isOpen ? components_Dropdown_styles_module.open : ''}`,
+                        children: "\u25BC"
+                    })
+                ]
+            }),
+            isOpen && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: components_Dropdown_styles_module.dropdownMenu,
+                children: options.map((option, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        className: `${components_Dropdown_styles_module.dropdownItem} ${value === option.value ? components_Dropdown_styles_module.active : ''}`,
+                        style: option.style,
+                        onClick: ()=>handleSelect(option.value),
+                        children: option.render ? option.render() : option.label
+                    }, null !== option.value ? option.value : `null-option-${index}`))
+            })
+        ]
+    });
+};
+const components_Dropdown = Dropdown;
 const SegmentsDisplayControl_SegmentsDisplayControl = ()=>{
     const { state: { segments, globalID } } = useStore_useStore();
     const [display, setDisplay] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)([]);
@@ -15099,7 +15617,7 @@ const Spectrum_Spectrum = (props)=>{
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Markers, {
                         id: id
                     }),
-                    /*#__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, {
@@ -15223,7 +15741,7 @@ type_Default_styles_module_options.domAPI = styleDomAPI_default();
 type_Default_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(occupancy_type_Default_styles_module.Z, type_Default_styles_module_options);
 const AxisY_occupancy_type_Default_styles_module = occupancy_type_Default_styles_module.Z && occupancy_type_Default_styles_module.Z.locals ? occupancy_type_Default_styles_module.Z.locals : void 0;
-const Default_Default = ()=>{
+const type_Default_Default = ()=>{
     const { axisYWidth, marginLeft } = useAxisYWidth_useAxisYWidth();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         className: AxisY_occupancy_type_Default_styles_module.axisyoccupancydefault,
@@ -15234,13 +15752,13 @@ const Default_Default = ()=>{
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(occupancy_components_Ticks, {})
     });
 };
-const occupancy_type_Default = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(Default_Default);
+const type_Default = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].memo(type_Default_Default);
 const AxisYOccupancy = (props)=>{
     const { disabled } = props;
     const { state: { axisY } } = useStore_useStore();
     const { show } = axisY;
     if (false === show || disabled) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(occupancy_type_Default, {});
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(type_Default, {});
 };
 const occupancy = AxisYOccupancy;
 var Occdahsed_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/GridLines/Occdahsed/styles.module.less");
@@ -15277,7 +15795,7 @@ TotalLine_styles_module_options.domAPI = styleDomAPI_default();
 TotalLine_styles_module_options.insertStyleElement = insertStyleElement_default();
 injectStylesIntoStyleTag_default()(TotalLine_styles_module.Z, TotalLine_styles_module_options);
 const Occupancy_TotalLine_styles_module = TotalLine_styles_module.Z && TotalLine_styles_module.Z.locals ? TotalLine_styles_module.Z.locals : void 0;
-const TotalLine_TotalLine = (props)=>{
+const TotalLine = (props)=>{
     const { value } = props;
     const style = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
             bottom: `${value || -200}%`
@@ -15301,7 +15819,7 @@ const TotalLine_TotalLine = (props)=>{
         })
     });
 };
-const TotalLine = TotalLine_TotalLine;
+const Occupancy_TotalLine = TotalLine;
 const Occupancy_Occupancy = (props)=>{
     const { occupancyAxisYDisabled } = props;
     const { state: { globalID } } = useStore_useStore();
@@ -15344,10 +15862,10 @@ 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)(TotalLine, {
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Occupancy_TotalLine, {
                         value: value
                     }),
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Cursor, {
@@ -15387,199 +15905,6 @@ const OccupancyChart = (props)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_reac
     });
 const lib_Occupancy_Occupancy = withChartPublisher(OccupancyChart, 'Occupancy');
 const lib_Occupancy = lib_Occupancy_Occupancy;
-var AxisX_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/AxisX/styles.module.less");
-var AxisX_styles_module_options = {};
-AxisX_styles_module_options.styleTagTransform = styleTagTransform_default();
-AxisX_styles_module_options.setAttributes = setAttributesWithoutAttributes_default();
-AxisX_styles_module_options.insert = insertBySelector_default().bind(null, "head");
-AxisX_styles_module_options.domAPI = styleDomAPI_default();
-AxisX_styles_module_options.insertStyleElement = insertStyleElement_default();
-injectStylesIntoStyleTag_default()(AxisX_styles_module.Z, AxisX_styles_module_options);
-const components_AxisX_styles_module = AxisX_styles_module.Z && AxisX_styles_module.Z.locals ? AxisX_styles_module.Z.locals : void 0;
-const ThreeFixedTicks = ()=>{
-    const { state: { zoom: { interval: { start: intervalStart, end: intervalEnd } }, axisX: { unit, unitKHz }, segments } } = useStore_useStore();
-    const { totalPoints } = segments;
-    const endIndex = totalPoints - 1;
-    const { start, bandwidth = 0 } = segments[0] ?? {};
-    const center = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (!endIndex || !bandwidth || void 0 === start) return 0;
-        const midIndex = (0, utils.wF)(intervalStart, intervalEnd);
-        const safeIndex = Math.max(0, Math.min(midIndex, endIndex));
-        return (0, utils.lj)(start + safeIndex * bandwidth / (1000 * endIndex));
-    }, [
-        intervalStart,
-        intervalEnd,
-        start,
-        endIndex,
-        bandwidth
-    ]);
-    const bandwidthDiff = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        if (!totalPoints || !bandwidth) return 0;
-        const intervalWidth = intervalEnd - intervalStart + 1;
-        return (0, utils.lj)(intervalWidth * bandwidth / (2 * totalPoints));
-    }, [
-        intervalStart,
-        intervalEnd,
-        totalPoints,
-        bandwidth
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: components_AxisX_styles_module.con,
-        children: [
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
-                value: bandwidthDiff,
-                unit: unitKHz,
-                prefix: "-"
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
-                value: center,
-                unit: unit
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyLabel, {
-                value: bandwidthDiff,
-                unit: unitKHz,
-                prefix: "+"
-            }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
-                length: 10,
-                split: 5
-            })
-        ]
-    });
-};
-const FrequencyLabel = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ value, unit, prefix = '' })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        style: {
-            paddingLeft: '5px'
-        },
-        children: [
-            prefix,
-            value,
-            unit
-        ]
-    }));
-const FrequencyTick = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ value, index, total })=>{
-    const leftPercentage = index / total * 100;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: `${components_AxisX_styles_module.frequencyTick} ${0 === index ? components_AxisX_styles_module.first : index === total ? components_AxisX_styles_module.last : ''}`,
-        style: {
-            left: `${leftPercentage}%`
-        },
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-            children: value
-        })
-    });
-});
-const TICK_COUNT = 5;
-const DataNFixedTicks = ()=>{
-    const { state: { segments: { totalPoints }, zoom: { interval: { start: intervalStart, end: intervalEnd } }, axisX: { frequencyFormat } } } = useStore_useStore();
-    const getFrequencyByIndex = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((index)=>{
-        if (!totalPoints) return 0;
-        const percentage = Math.min(100 * index / totalPoints, 100);
-        return frequencyFormat(percentage);
-    }, [
-        totalPoints,
-        frequencyFormat
-    ]);
-    const ticks = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
-        const step = (intervalEnd - intervalStart + 1) / TICK_COUNT;
-        return Array.from({
-            length: TICK_COUNT + 1
-        }, (_, i)=>getFrequencyByIndex(intervalStart + step * i));
-    }, [
-        intervalStart,
-        intervalEnd,
-        getFrequencyByIndex
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: components_AxisX_styles_module.con,
-        children: [
-            ticks.map((tick, index)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FrequencyTick, {
-                    value: tick,
-                    index: index,
-                    total: ticks.length - 1
-                }, `tick-${index}`)),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
-                length: 10,
-                split: 2
-            })
-        ]
-    });
-};
-const MScanTicks = ()=>{
-    const { state: { segments } } = useStore_useStore();
-    const style = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
-            display: 'flex',
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center'
-        }), []);
-    const t = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>segments.map((item)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                style: style,
-                children: item.label
-            }, item.index)), [
-        segments
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-        className: components_AxisX_styles_module.con,
-        children: [
-            t,
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_RulerTicks, {
-                length: 2 * segments.length,
-                split: 2
-            })
-        ]
-    });
-};
-const AxisXTicks = ({ type })=>{
-    const { state: { axisX: { show } } } = useStore_useStore();
-    if (!show) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-        className: components_AxisX_styles_module.AxisXTicks,
-        children: type === constants_ChartType.Scan || type === constants_ChartType.ScanDF360 ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(DataNFixedTicks, {}) : type === constants_ChartType.MScan ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Zoom_ZoomOffsetContainer, {
-            children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MScanTicks, {})
-        }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThreeFixedTicks, {})
-    });
-};
-const AxisX_Ticks = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisXTicks);
-const AxisX = ({ type })=>{
-    const { state: { axisX } } = useStore_useStore();
-    const { children, unit, ticks } = axisX;
-    const { width, pluginBoxWidth } = useAxisYWidth_useAxisYWidth();
-    const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const axisStyle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
-            marginLeft: width,
-            width: pluginBoxWidth
-        }), [
-        width,
-        pluginBoxWidth
-    ]);
-    if (!axisX) return null;
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_Tooltip, {
-        content: `\u{5355}\u{4F4D}${unit}`,
-        children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-            ref: ref,
-            className: components_AxisX_styles_module.axisx,
-            style: axisStyle,
-            children: [
-                ticks && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: components_AxisX_styles_module.unit,
-                            children: unit
-                        }),
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX_Ticks, {
-                            type: type
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    children: children
-                })
-            ]
-        })
-    });
-};
-const components_AxisX = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(AxisX);
 var Blaze_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.5.0_@rsbuild+core@1.6.7/node_modules/@rsbuild/plugin-less/compiled/less-loader/index.js??ruleSet[1].rules[11].use[3]!./src/components/Blaze/styles.module.less");
 var Blaze_styles_module_options = {};
 Blaze_styles_module_options.styleTagTransform = styleTagTransform_default();
@@ -16230,7 +16555,7 @@ const HeatmapPortal_Chart = (props)=>{
                     type: constants_ChartType.Heatmap
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Heatmap, {}),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
                     type: type
                 })
             ]
@@ -16248,7 +16573,7 @@ const OccupancyPortal_Chart = (props)=>{
                     type: constants_ChartType.Occupancy
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(modules_Occupancy, {}),
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
                     type: type
                 })
             ]
@@ -16316,7 +16641,7 @@ const Spectrum_Chart_Chart = (props)=>{
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(components_AxisX, {
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(AxisX, {
                 type: type
             })
         ]