@complat/react-spectra-editor 1.7.1 → 1.8.0

package/dist/components/d3_multi/multi_focus.js

@@ -10,6 +10,8 @@ var _mount = require("../../helpers/mount");
 var _converter = require("../../helpers/converter");
 var _brush = _interopRequireDefault(require("../../helpers/brush"));
 var _compass = require("../../helpers/compass");
+var _integration_focus = require("../../helpers/integration_focus");
+var _integration_split = require("../../helpers/integration_split");
 var _list_layout = require("../../constants/list_layout");
 var _format = _interopRequireDefault(require("../../helpers/format"));
 var _chem = require("../../helpers/chem");
@@ -17,7 +19,6 @@ var _cfg = _interopRequireDefault(require("../../helpers/cfg"));
 var _focus = require("../../helpers/focus");
 var _integration = require("../../helpers/integration");
 var _multiplicity_calc = require("../../helpers/multiplicity_calc");
-var _calc = require("../../helpers/calc");
 /* eslint-disable no-unused-vars, prefer-object-spread, no-mixed-operators,
 no-unneeded-ternary, arrow-body-style, max-len */
 
@@ -30,8 +31,14 @@ class MultiFocus {
       clickUiTargetAct,
       selectUiSweepAct,
       scrollUiWheelAct,
-      entities
+      entities,
+      uiSt,
+      splitIntegrationAct,
+      addVisualSplitLineAct,
+      removeVisualSplitLineAct
     } = props;
+    this.uiSt = uiSt;
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     this.entities = entities;
     this.jcampIdx = 0;
     this.isShowAllCurves = false;
@@ -47,6 +54,9 @@ class MultiFocus {
     this.clickUiTargetAct = clickUiTargetAct;
     this.selectUiSweepAct = selectUiSweepAct;
     this.scrollUiWheelAct = scrollUiWheelAct;
+    this.splitIntegrationAct = splitIntegrationAct;
+    this.addVisualSplitLineAct = addVisualSplitLineAct;
+    this.removeVisualSplitLineAct = removeVisualSplitLineAct;
     this.brush = d3.brush();
     this.brushX = d3.brushX();
     this.axis = null;
@@ -73,6 +83,11 @@ class MultiFocus {
     this.shouldUpdate = {};
     // this.freq = false;
     this.layout = _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY;
+    this.isUiAddIntgSt = false;
+    this.isUiSplitIntgSt = false;
+    this.isUiVisualSplitIntgSt = false;
+    this.integrationSplitTargets = null;
+    this.firstIntegrationPoint = null;
     this.getShouldUpdate = this.getShouldUpdate.bind(this);
     this.resetShouldUpdate = this.resetShouldUpdate.bind(this);
     this.setTip = this.setTip.bind(this);
@@ -90,6 +105,10 @@ class MultiFocus {
     this.drawMtply = this.drawMtply.bind(this);
     this.drawAUC = this.drawAUC.bind(this);
     this.onClickTarget = this.onClickTarget.bind(this);
+    this.onClickIntegrationTarget = this.onClickIntegrationTarget.bind(this);
+    this.onIntegrationMouseMove = this.onIntegrationMouseMove.bind(this);
+    this.clearSplitPreview = this.clearSplitPreview.bind(this);
+    this.drawVisualSplitLines = this.drawVisualSplitLines.bind(this);
     this.mergedPeaks = this.mergedPeaks.bind(this);
     this.setDataPecker = this.setDataPecker.bind(this);
     this.drawPeckers = this.drawPeckers.bind(this);
@@ -119,7 +138,7 @@ class MultiFocus {
     const sameLySt = prevLySt === this.layout;
     const sameTePt = prevTePt === this.tTrEndPts.length;
     const sameDtPk = prevDtPk === this.dataPks.length;
-    const sameSfPk = JSON.stringify(prevSfPk) === JSON.stringify(this.tSfPeaks);
+    const sameSfPk = prevSfPk === this.tSfPeaks || Array.isArray(prevSfPk) && Array.isArray(this.tSfPeaks) && prevSfPk.length === this.tSfPeaks.length && prevSfPk.every((peak, idx) => peak === this.tSfPeaks[idx]);
     const sameData = prevData === this.data.length;
     const sameYFactor = prevYFactor === this.yTransformFactor;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
@@ -170,15 +189,13 @@ class MultiFocus {
       const rawArea = (cyclicvoltaSt.areaValue === '' ? 1.0 : cyclicvoltaSt.areaValue) || 1.0;
       const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
       const safeArea = rawArea > 0 ? rawArea : 1.0;
+      // areaInCm2 already converts mm² → cm², so factor is A/cm². Do NOT divide by 100 again.
       const areaInCm2 = areaUnit === 'mm²' ? safeArea / 100.0 : safeArea;
       factor = 1.0 / areaInCm2;
       const baseY = feature && feature.yUnit ? String(feature.yUnit) : 'A';
       if (/mA/i.test(baseY)) {
         factor *= 1000.0;
       }
-      if (areaUnit === 'mm²') {
-        factor /= 100.0;
-      }
     }
     return factor;
   }
@@ -298,6 +315,8 @@ class MultiFocus {
     this.path.style('stroke', this.pathColor);
     if (this.layout === _list_layout.LIST_LAYOUT.AIF) {
       this.path.attr('marker-mid', 'url(#arrow-left)');
+    } else {
+      this.path.attr('marker-mid', null);
     }
   }
   drawThres() {
@@ -330,6 +349,8 @@ class MultiFocus {
       path.attr('d', this.pathCall(data));
       if (this.layout === _list_layout.LIST_LAYOUT.AIF && this.isShowAllCurves === true) {
         path.attr('marker-mid', 'url(#arrow-left)');
+      } else {
+        path.attr('marker-mid', null);
       }
     });
     return null;
@@ -358,6 +379,23 @@ class MultiFocus {
       this.clickUiTargetAct(data, onPeak, false, this.jcampIdx);
     }
   }
+  clearSplitPreview() {
+    (0, _integration_split.clearIntegrationSplitPreview)(this);
+  }
+  onIntegrationMouseMove(event, data, shift, ignoreRef) {
+    (0, _integration_focus.handleIntegrationMouseMove)(this, event, data, shift, ignoreRef);
+  }
+  onClickIntegrationTarget(event, data) {
+    (0, _integration_focus.handleIntegrationClick)(this, event, data, (clickEvent, clickData) => {
+      this.onClickTarget(clickEvent, clickData);
+    });
+  }
+  drawVisualSplitLines(stack, shift, ignoreRef) {
+    (0, _integration_focus.drawVisualSplitLinesForFocus)(this, stack, shift, ignoreRef);
+  }
+  drawAUC(stack, shift = 0) {
+    (0, _integration_focus.drawIntegrationAUC)(this, stack, shift);
+  }
   onClickPecker(event, data) {
     event.stopPropagation();
     event.preventDefault();
@@ -396,44 +434,6 @@ class MultiFocus {
     }
     return this.dataPeckers;
   }
-  drawAUC(stack) {
-    const {
-      xt,
-      yt
-    } = (0, _compass.TfRescale)(this);
-    const auc = this.tags.aucPath.selectAll('path').data(stack);
-    auc.exit().attr('class', 'exit').remove();
-    const integCurve = border => {
-      const {
-        xL,
-        xU
-      } = border;
-      const ps = this.data.filter(d => d.x > xL && d.x < xU);
-      if (!ps[0]) return null;
-      const point1 = ps[0];
-      const point2 = ps[ps.length - 1];
-      const slope = (0, _calc.calcSlope)(point1.x, point1.y, point2.x, point2.y);
-      let lastDY = point1.y;
-      return d3.area().x(d => xt(d.x)).y0((d, index) => {
-        if (index > 0) {
-          const lastD = ps[index - 1];
-          const y = slope * (d.x - lastD.x) + lastDY;
-          lastDY = y;
-          return yt(y);
-        }
-        return yt(0);
-      }).y1(d => yt(d.y))(ps);
-    };
-    auc.enter().append('path').attr('class', 'auc').attr('fill', 'red').attr('stroke', 'none').attr('fill-opacity', 0.2).attr('stroke-width', 2).merge(auc).attr('d', d => integCurve(d)).attr('id', d => `auc${(0, _focus.itgIdTag)(d)}`).on('mouseover', (event, d) => {
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill', 'blue');
-    }).on('mouseout', (event, d) => {
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'none');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill', 'red');
-      d3.select(`#auc${(0, _focus.itgIdTag)(d)}`).style('fill-opacity', 0.2);
-    }).on('click', (event, d) => this.onClickTarget(event, d));
-  }
   drawPeaks(editPeakSt) {
     const {
       sameXY,
@@ -589,7 +589,7 @@ class MultiFocus {
       this.tip.hide(tipParams, event.target);
     }).on('click', (event, d) => this.onClickPecker(event, d));
   }
-  drawInteg(integationSt) {
+  drawInteg(integrationState) {
     const {
       sameXY,
       sameLySt,
@@ -599,9 +599,16 @@ class MultiFocus {
     if (sameXY && sameLySt && sameItSt && sameData) return;
     const {
       integrations
-    } = integationSt;
+    } = integrationState;
     const selectedIntegration = integrations[this.jcampIdx];
     if (selectedIntegration === false || selectedIntegration === undefined) {
+      Object.assign(this, {
+        integrationSplitTargets: {
+          stack: [],
+          shift: 0,
+          ignoreRef: false
+        }
+      });
       const itgs = [];
       const igbp = this.tags.igbPath.selectAll('path').data(itgs);
       igbp.exit().attr('class', 'exit').remove();
@@ -609,6 +616,7 @@ class MultiFocus {
       igcp.exit().attr('class', 'exit').remove();
       const igtp = this.tags.igtPath.selectAll('text').data(itgs);
       igtp.exit().attr('class', 'exit').remove();
+      this.drawVisualSplitLines([], 0, false);
       return;
     }
     const {
@@ -620,9 +628,20 @@ class MultiFocus {
     const isDisable = _cfg.default.btnCmdIntg(this.layout);
     const ignoreRef = _format.default.isHplcUvVisLayout(this.layout);
     const itgs = isDisable ? [] : stack;
-    const igbp = this.tags.igbPath.selectAll('path').data(itgs);
+    const {
+      showIntegSplit,
+      igBarData
+    } = (0, _integration_focus.buildIntegrationBarData)(this.layout, itgs);
+    Object.assign(this, {
+      integrationSplitTargets: {
+        stack: itgs,
+        shift,
+        ignoreRef
+      }
+    });
+    const igbp = this.tags.igbPath.selectAll('path').data(igBarData);
     igbp.exit().attr('class', 'exit').remove();
-    const igcp = this.tags.igcPath.selectAll('path').data(itgs);
+    const igcp = this.tags.igcPath.selectAll('path').data(igBarData);
     igcp.exit().attr('class', 'exit').remove();
     const igtp = this.tags.igtPath.selectAll('text').data(itgs);
     igtp.exit().attr('class', 'exit').remove();
@@ -631,10 +650,11 @@ class MultiFocus {
       const auc = this.tags.aucPath.selectAll('path').data(stack);
       auc.exit().attr('class', 'exit').remove();
       auc.merge(auc);
+      this.drawVisualSplitLines(showIntegSplit ? itgs : [], shift, ignoreRef);
       return;
     }
     if (ignoreRef) {
-      this.drawAUC(stack);
+      this.drawAUC(stack, shift);
     } else {
       // rescale for zoom
       const {
@@ -650,7 +670,8 @@ class MultiFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
       const integCurve = border => {
         const {
           xL,
@@ -674,7 +695,8 @@ class MultiFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
       igtp.enter().append('text').attr('class', 'igtp').attr('font-family', 'Helvetica').style('font-size', '12px').attr('fill', '#228B22').style('text-anchor', 'middle').merge(igtp).attr('id', d => `igtp${(0, _focus.itgIdTag)(d)}`).text(d => (0, _integration.calcArea)(d, refArea, refFactor, ignoreRef)).attr('transform', d => `translate(${xt((d.xL + d.xU) / 2 - shift)}, ${dh - 12})`).on('mouseover', (event, d) => {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', 'blue');
@@ -683,8 +705,10 @@ class MultiFocus {
         d3.select(`#igbp${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igbc${(0, _focus.itgIdTag)(d)}`).attr('stroke', '#228B22');
         d3.select(`#igtp${(0, _focus.itgIdTag)(d)}`).style('fill', '#228B22');
-      }).on('click', (event, d) => this.onClickTarget(event, d));
+        if (showIntegSplit) this.clearSplitPreview();
+      }).on('mousemove', showIntegSplit ? (event, d) => this.onIntegrationMouseMove(event, d, shift, ignoreRef) : null).on('click', (event, d) => this.onClickIntegrationTarget(event, d));
     }
+    this.drawVisualSplitLines(showIntegSplit ? itgs : [], shift, ignoreRef);
   }
   drawMtply(mtplySt) {
     const {
@@ -720,13 +744,15 @@ class MultiFocus {
       return;
     }
     const {
-      stack,
-      smExtext,
-      shift
-    } = selectedMulti;
-    const mpys = stack;
+      stack = [],
+      smExtext = false,
+      shift = 0
+    } = selectedMulti || {};
+    const hasValidExtent = extent => extent && Number.isFinite(extent.xL) && Number.isFinite(extent.xU);
+    const mpys = stack.filter(m => hasValidExtent(m?.xExtent));
     const isDisable = _cfg.default.btnCmdMpy(this.layout);
-    if (mpys === 0 || isDisable) return;
+    if (mpys.length === 0 || isDisable) return;
+    const activeExtent = hasValidExtent(smExtext) ? smExtext : mpys[0].xExtent;
     // rescale for zoom
     const {
       xt
@@ -742,7 +768,8 @@ class MultiFocus {
         peaks,
         xExtent
       } = m;
-      return peaks.map(p => Object.assign({}, p, {
+      const safePeaks = Array.isArray(peaks) ? peaks : [];
+      return safePeaks.filter(p => Number.isFinite(p?.x) && Number.isFinite(p?.y)).map(p => Object.assign({}, p, {
         xExtent
       }));
     });
@@ -757,7 +784,7 @@ class MultiFocus {
         xL,
         xU
       } = d.xExtent;
-      return smExtext.xL === xL && smExtext.xU === xU ? 'purple' : '#DA70D6';
+      return activeExtent.xL === xL && activeExtent.xU === xU ? 'purple' : '#DA70D6';
     };
     mpyb.enter().append('path').attr('class', 'mpyb').attr('fill', 'none').attr('stroke-width', 2).merge(mpyb).attr('stroke', d => mpyColor(d)).attr('id', d => `mpyb${(0, _focus.mpyIdTag)(d)}`).attr('d', d => mpyBar(d)).on('mouseover', (event, d) => {
       d3.selectAll(`#mpyb${(0, _focus.mpyIdTag)(d)}`).attr('stroke', 'blue');
@@ -861,11 +888,17 @@ class MultiFocus {
     editPeakSt,
     layoutSt,
     sweepExtentSt,
+    isUiAddIntgSt,
+    isUiSplitIntgSt,
+    isUiVisualSplitIntgSt,
     isUiNoBrushSt,
     cyclicvoltaSt,
-    integationSt,
-    mtplySt
+    integrationSt,
+    mtplySt,
+    uiSt
   }) {
+    this.uiSt = uiSt;
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     this.svg = d3.select(this.rootKlass).select('.d3Svg');
     (0, _mount.MountMainFrame)(this, 'focus');
     (0, _mount.MountClip)(this);
@@ -879,6 +912,11 @@ class MultiFocus {
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
     this.setTip();
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    Object.assign(this, {
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt
+    });
+    if (!isUiSplitIntgSt && !isUiVisualSplitIntgSt) this.clearSplitPreview();
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     this.path = (0, _mount.MountPath)(this, this.pathColor);
@@ -897,10 +935,10 @@ class MultiFocus {
       this.drawPeaks(editPeakSt);
       this.drawRef();
       this.drawPeckers();
-      this.drawInteg(integationSt);
+      this.drawInteg(integrationSt);
       this.drawMtply(mtplySt);
     }
-    (0, _brush.default)(this, false, isUiNoBrushSt);
+    (0, _brush.default)(this, isUiAddIntgSt, isUiNoBrushSt);
     this.resetShouldUpdate(editPeakSt);
   }
   update({
@@ -913,13 +951,19 @@ class MultiFocus {
     editPeakSt,
     layoutSt,
     sweepExtentSt,
+    isUiAddIntgSt,
+    isUiSplitIntgSt,
+    isUiVisualSplitIntgSt,
     isUiNoBrushSt,
     cyclicvoltaSt,
-    integationSt,
-    mtplySt
+    integrationSt,
+    mtplySt,
+    uiSt
   }) {
+    this.uiSt = uiSt;
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.scales = (0, _init.InitScale)(this, this.reverseXAxis(layoutSt));
+    this.graphIndex = uiSt?.zoom?.graphIndex;
     const {
       curveIdx,
       isShowAllCurve
@@ -928,6 +972,11 @@ class MultiFocus {
     this.isShowAllCurves = isShowAllCurve;
     this.entities = entities;
     this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, layoutSt, cyclicvoltaSt, jcampIdx);
+    Object.assign(this, {
+      isUiSplitIntgSt,
+      isUiVisualSplitIntgSt
+    });
+    if (!isUiSplitIntgSt && !isUiVisualSplitIntgSt) this.clearSplitPreview();
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.getShouldUpdate(editPeakSt);
@@ -938,10 +987,10 @@ class MultiFocus {
       this.drawPeaks(editPeakSt);
       this.drawRef();
       this.drawPeckers();
-      this.drawInteg(integationSt);
+      this.drawInteg(integrationSt);
       this.drawMtply(mtplySt);
     }
-    (0, _brush.default)(this, false, isUiNoBrushSt);
+    (0, _brush.default)(this, false, isUiNoBrushSt, this.uiSt, this.graphIndex);
     this.resetShouldUpdate(editPeakSt);
   }
 }

package/dist/components/d3_rect/index.js

@@ -50,6 +50,7 @@ class ViewerRect extends _react.default.Component {
       tTrEndPts,
       tSfPeaks,
       isHidden,
+      decimalSt,
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt,
@@ -65,6 +66,7 @@ class ViewerRect extends _react.default.Component {
       filterPeak,
       tTrEndPts,
       tSfPeaks,
+      decimal: decimalSt,
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt
@@ -79,6 +81,7 @@ class ViewerRect extends _react.default.Component {
       tTrEndPts,
       tSfPeaks,
       isHidden,
+      decimalSt,
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt
@@ -91,6 +94,7 @@ class ViewerRect extends _react.default.Component {
       filterPeak,
       tTrEndPts,
       tSfPeaks,
+      decimal: decimalSt,
       sweepExtentSt,
       isUiAddIntgSt,
       isUiNoBrushSt
@@ -119,6 +123,7 @@ class ViewerRect extends _react.default.Component {
 const mapStateToProps = (state, props) => ({
   seed: (0, _chem.Topic2Seed)(state, props),
   peak: (0, _chem.Feature2Peak)(state, props),
+  decimalSt: state.submit.decimal,
   tTrEndPts: (0, _chem.ToThresEndPts)(state, props),
   tSfPeaks: (0, _chem.ToShiftPeaks)(state, props),
   sweepExtentSt: state.ui.sweepExtent,
@@ -134,6 +139,7 @@ const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
 ViewerRect.propTypes = {
   seed: _propTypes.default.array.isRequired,
   peak: _propTypes.default.array.isRequired,
+  decimalSt: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   cLabel: _propTypes.default.string.isRequired,
   xLabel: _propTypes.default.string.isRequired,
   yLabel: _propTypes.default.string.isRequired,

package/dist/components/d3_rect/rect_focus.js

@@ -11,6 +11,7 @@ var _mount = require("../../helpers/mount");
 var _compass = require("../../helpers/compass");
 var _converter = require("../../helpers/converter");
 var _list_layout = require("../../constants/list_layout");
+var _format = _interopRequireDefault(require("../../helpers/format"));
 const d3 = require('d3');
 class RectFocus {
   constructor(props) {
@@ -53,6 +54,7 @@ class RectFocus {
     this.factor = 0.125;
     this.currentExtent = null;
     this.layout = _list_layout.LIST_LAYOUT.MS;
+    this.decimal = 3;
     this.setTip = this.setTip.bind(this);
     this.setDataParams = this.setDataParams.bind(this);
     this.create = this.create.bind(this);
@@ -68,11 +70,14 @@ class RectFocus {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);
   }
-  setDataParams(data, peaks, tTrEndPts, tSfPeaks) {
+  setDataParams(data, peaks, tTrEndPts, tSfPeaks, decimal) {
     this.data = [...data];
     this.dataPks = [...peaks];
     this.tTrEndPts = tTrEndPts;
     this.tSfPeaks = tSfPeaks;
+    if (decimal !== undefined) {
+      this.decimal = _format.default.clampDecimalPlaces(decimal);
+    }
   }
   updatePathCall(xt, yt) {
     this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
@@ -131,6 +136,7 @@ class RectFocus {
     } = (0, _compass.TfRescale)(this);
     this.updatePathCall(xt, yt);
     const yRef = this.tTrEndPts[0].y;
+    const msMaxY = d3.max(this.data, row => row.y) || 0;
     const bars = this.bars.selectAll('rect').data(this.data);
     bars.exit().attr('class', 'exit').remove();
     const gnd = yt(0);
@@ -139,7 +145,9 @@ class RectFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        msMaxY,
+        xDigits: this.decimal
       };
       this.tip.show(tipParams, event.target);
     }).on('mouseout', (event, d) => {
@@ -147,7 +155,9 @@ class RectFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'red');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        msMaxY,
+        xDigits: this.decimal
       };
       this.tip.hide(tipParams, event.target);
     });
@@ -174,6 +184,7 @@ class RectFocus {
     filterPeak,
     tTrEndPts,
     tSfPeaks,
+    decimal,
     sweepExtentSt,
     isUiAddIntgSt,
     isUiNoBrushSt
@@ -183,7 +194,7 @@ class RectFocus {
     (0, _mount.MountClip)(this);
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
     this.setTip();
-    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, decimal);
     (0, _compass.MountCompass)(this);
     this.axis = (0, _mount.MountAxis)(this);
     [this.thresLine] = (0, _mount.MountThresLine)(this, 'green');
@@ -205,12 +216,13 @@ class RectFocus {
     filterPeak,
     tTrEndPts,
     tSfPeaks,
+    decimal,
     sweepExtentSt,
     isUiAddIntgSt,
     isUiNoBrushSt
   }) {
     this.root = d3.select(this.rootKlass).selectAll('.focus-main');
-    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks);
+    this.setDataParams(filterSeed, filterPeak, tTrEndPts, tSfPeaks, decimal);
     if (this.data && this.data.length > 0) {
       this.setConfig(sweepExtentSt);
       this.drawBar();