@complat/react-spectra-editor 1.5.4 → 1.7.0

package/dist/components/cmd_bar/r08_change_axes.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRedux = require("react-redux");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,6 +17,7 @@ var _list_layout = require("../../constants/list_layout");
 var _list_axes = require("../../constants/list_axes");
 var _axes = require("../../actions/axes");
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /* eslint-disable prefer-object-spread, react/jsx-one-expression-per-line,
 react/function-component-definition,
 max-len, no-unused-vars, no-multiple-empty-lines */
@@ -99,18 +100,18 @@ const axisY = (classes, layoutSt, axesUnitsSt, updateYAxisAct, curveSt) => {
       yUnit: ''
     };
   }
-  const {
-    yUnit
-  } = selectedAxes;
+  const yUnit = '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
     className: (0, _classnames.default)(classes.fieldLayout),
     variant: "outlined",
+    disabled: true,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
       labelId: "select-y-axis-label",
       label: "y-Axis",
       value: yUnit,
       onChange: onChange,
       className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+      disabled: true,
       children: options.map(item => {
         // eslint-disable-line
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
@@ -143,11 +144,29 @@ const ChangeAxes = ({
   axesUnitsSt,
   updateXAxisAct,
   updateYAxisAct
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-  className: classes.groupRight,
-  "data-testid": "ChangeAxes",
-  children: showSelect(classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct)
-});
+}) => {
+  const {
+    curveIdx
+  } = curveSt;
+  const axes = axesUnitsSt?.axes || [];
+  (0, _react.useEffect)(() => {
+    if (layoutSt !== _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) return;
+    const selectedAxes = axes[curveIdx] || {
+      yUnit: ''
+    };
+    if (selectedAxes.yUnit !== '') {
+      updateYAxisAct({
+        value: '',
+        curveIndex: curveIdx
+      });
+    }
+  }, [layoutSt, axes, curveIdx, updateYAxisAct]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: classes.groupRight,
+    "data-testid": "ChangeAxes",
+    children: showSelect(classes, layoutSt, curveSt, axesUnitsSt, updateXAxisAct, updateYAxisAct)
+  });
+};
 const mapStateToProps = (state, props) => (
 // eslint-disable-line
 {

package/dist/components/cmd_bar/r10_cv_density.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRedux = require("react-redux");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _redux = require("redux");
+var _material = require("@mui/material");
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _list_layout = require("../../constants/list_layout");
+var _common = require("./common");
+var _cyclic_voltammetry = require("../../actions/cyclic_voltammetry");
+var _jsxRuntime = require("react/jsx-runtime");
+/* eslint-disable react/function-component-definition, react/jsx-one-expression-per-line,
+react/jsx-boolean-value */
+
+const styles = () => ({
+  ..._common.commonStyle,
+  fieldArea: {
+    width: 100
+  },
+  fieldUnit: {
+    width: 75
+  },
+  toggleGroup: {
+    height: 30,
+    marginLeft: 8
+  },
+  toggleBtn: {
+    fontSize: 10,
+    padding: '0 6px',
+    height: 30,
+    minHeight: 30,
+    lineHeight: '30px',
+    textTransform: 'none'
+  }
+});
+const units = ['cm²', 'mm²'];
+const CvDensityControls = ({
+  classes,
+  layoutSt,
+  areaValue,
+  areaUnit,
+  useCurrentDensity,
+  setAreaValueAct,
+  setAreaUnitAct,
+  toggleDensityAct
+}) => {
+  if (layoutSt !== _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {});
+  const handleAreaChange = e => {
+    const raw = e.target.value;
+    if (raw === '') {
+      setAreaValueAct('');
+      return;
+    }
+    const val = parseFloat(raw);
+    if (Number.isNaN(val)) return;
+    if (val < 0) return;
+    setAreaValueAct(val);
+  };
+  const handleAreaBlur = e => {
+    const raw = e.target.value;
+    const val = parseFloat(raw);
+    if (raw === '' || Number.isNaN(val) || val <= 0) {
+      setAreaValueAct(1.0);
+    }
+  };
+  const handleUnitChange = e => {
+    const newUnit = e.target.value;
+    const currVal = areaValue;
+    if (currVal !== '' && Number.isFinite(Number(currVal))) {
+      const num = Number(currVal);
+      const from = areaUnit;
+      const to = newUnit;
+      let converted = num;
+      if (from === 'cm²' && to === 'mm²') converted = num * 100.0;
+      if (from === 'mm²' && to === 'cm²') converted = num / 100.0;
+      setAreaValueAct(converted);
+    }
+    setAreaUnitAct(newUnit);
+  };
+  const handleToggle = (_, val) => {
+    if (val === null) return;
+    const shouldBeDensity = val === 'density';
+    if (shouldBeDensity !== useCurrentDensity) {
+      toggleDensityAct();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+    className: classes.group,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+      className: (0, _classnames.default)(classes.fieldArea),
+      variant: "outlined",
+      disabled: !useCurrentDensity,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+        htmlFor: "cv-area",
+        className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+        children: "WE-ECSA"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.OutlinedInput, {
+        id: "cv-area",
+        label: "WE-ECSA",
+        type: "number",
+        inputProps: {
+          step: '0.0001',
+          min: '0'
+        },
+        value: areaValue,
+        onChange: handleAreaChange,
+        onBlur: handleAreaBlur,
+        className: (0, _classnames.default)(classes.txtInput, 'input-sv-bar-layout'),
+        disabled: !useCurrentDensity
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.FormControl, {
+      className: (0, _classnames.default)(classes.fieldUnit),
+      variant: "outlined",
+      disabled: !useCurrentDensity,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.InputLabel, {
+        id: "cv-area-unit",
+        className: (0, _classnames.default)(classes.selectLabel, 'select-sv-bar-label'),
+        children: "Unit"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Select, {
+        value: areaUnit,
+        onChange: handleUnitChange,
+        labelId: "cv-area-unit",
+        label: "Unit",
+        className: (0, _classnames.default)(classes.selectInput, 'input-sv-bar-layout'),
+        disabled: !useCurrentDensity,
+        children: units.map(u => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
+          value: u,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: (0, _classnames.default)(classes.txtOpt, 'option-sv-bar-layout'),
+            children: u
+          })
+        }, u))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.ToggleButtonGroup, {
+      exclusive: true,
+      size: "small",
+      value: useCurrentDensity ? 'density' : 'current',
+      onChange: handleToggle,
+      className: (0, _classnames.default)(classes.selectInput, classes.toggleGroup, 'input-sv-bar-layout'),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "current",
+        className: (0, _classnames.default)(classes.txtOpt, classes.toggleBtn),
+        children: "Current"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.ToggleButton, {
+        value: "density",
+        className: (0, _classnames.default)(classes.txtOpt, classes.toggleBtn),
+        children: "Current / Area"
+      })]
+    })]
+  });
+};
+CvDensityControls.propTypes = {
+  classes: _propTypes.default.object.isRequired,
+  layoutSt: _propTypes.default.string.isRequired,
+  areaValue: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  areaUnit: _propTypes.default.string.isRequired,
+  useCurrentDensity: _propTypes.default.bool.isRequired,
+  setAreaValueAct: _propTypes.default.func.isRequired,
+  setAreaUnitAct: _propTypes.default.func.isRequired,
+  toggleDensityAct: _propTypes.default.func.isRequired
+};
+const mapStateToProps = state => ({
+  layoutSt: state.layout,
+  areaValue: state.cyclicvolta.areaValue,
+  areaUnit: state.cyclicvolta.areaUnit,
+  useCurrentDensity: state.cyclicvolta.useCurrentDensity
+});
+const mapDispatchToProps = dispatch => (0, _redux.bindActionCreators)({
+  setAreaValueAct: _cyclic_voltammetry.setCyclicVoltaAreaValue,
+  setAreaUnitAct: _cyclic_voltammetry.setCyclicVoltaAreaUnit,
+  toggleDensityAct: _cyclic_voltammetry.toggleCyclicVoltaDensity
+}, dispatch);
+var _default = exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)((0, _withStyles.default)(styles)(CvDensityControls));

package/dist/components/d3_multi/index.js

@@ -10,6 +10,7 @@ var _reactRedux = require("react-redux");
 var _redux = require("redux");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _chem = require("../../helpers/chem");
+var _format = _interopRequireDefault(require("../../helpers/format"));
 var _manager = require("../../actions/manager");
 var _ui = require("../../actions/ui");
 var _list_ui = require("../../constants/list_ui");
@@ -33,6 +34,9 @@ class ViewerMulti extends _react.default.Component {
       scrollUiWheelAct
     } = this.props;
     this.rootKlass = '.d3Line';
+    this.containerRef = /*#__PURE__*/_react.default.createRef();
+    this.currentSize = null;
+    this.resizeObserver = null;
     this.focus = new _multi_focus.default({
       W,
       H,
@@ -42,8 +46,11 @@ class ViewerMulti extends _react.default.Component {
       scrollUiWheelAct
     });
     this.normChange = this.normChange.bind(this);
+    this.handleResize = this.handleResize.bind(this);
   }
   componentDidMount() {
+    this.renderChart(this.props, true);
+    this.setupResizeObserver();
     const {
       curveSt,
       seed,
@@ -90,6 +97,11 @@ class ViewerMulti extends _react.default.Component {
       xxLabel = xUnit === '' ? xLabel : xUnit;
       yyLabel = yUnit === '' ? yLabel : yUnit;
     }
+    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
+      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
+    }
     const filterSeed = seed;
     const filterPeak = peak;
     (0, _draw.drawMain)(this.rootKlass, W, H);
@@ -156,8 +168,16 @@ class ViewerMulti extends _react.default.Component {
       xxLabel = xUnit === '' ? xLabel : xUnit;
       yyLabel = yUnit === '' ? yLabel : yUnit;
     }
+    if (cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const baseUnit = /mA/i.test(String(yyLabel)) ? 'mA' : 'A';
+      yyLabel = `Current density in ${baseUnit}/${areaUnit}`;
+    }
     const filterSeed = seed;
     const filterPeak = peak;
+    if (_format.default.isCyclicVoltaLayout(layoutSt)) {
+      this.handleResize();
+    }
     this.focus.update({
       entities,
       curveSt,
@@ -179,6 +199,53 @@ class ViewerMulti extends _react.default.Component {
   }
   componentWillUnmount() {
     (0, _draw.drawDestroy)(this.rootKlass);
+    this.teardownResizeObserver();
+  }
+  handleResize() {
+    const {
+      layoutSt
+    } = this.props;
+    if (!_format.default.isCyclicVoltaLayout(layoutSt)) return;
+    const size = this.getContainerSize();
+    if (!size) return;
+    if (!this.currentSize || size.width !== this.currentSize.width || size.height !== this.currentSize.height) {
+      this.renderChart(this.props, false);
+    }
+  }
+  getContainerSize() {
+    const node = this.containerRef.current;
+    if (!node) return null;
+    const {
+      clientWidth,
+      clientHeight
+    } = node;
+    if (!clientWidth || !clientHeight) return null;
+    return {
+      width: clientWidth,
+      height: clientHeight
+    };
+  }
+  getTargetSize(layoutSt) {
+    if (_format.default.isCyclicVoltaLayout(layoutSt)) {
+      const size = this.getContainerSize();
+      if (size) return size;
+    }
+    return {
+      width: W,
+      height: H
+    };
+  }
+  setupResizeObserver() {
+    if (typeof ResizeObserver === 'undefined') return;
+    if (!this.containerRef.current || this.resizeObserver) return;
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.containerRef.current);
+  }
+  teardownResizeObserver() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
   normChange(prevProps) {
     const {
@@ -191,9 +258,101 @@ class ViewerMulti extends _react.default.Component {
       resetAllAct(feature);
     }
   }
+  renderChart(props, shouldReset) {
+    const {
+      curveSt,
+      seed,
+      peak,
+      cLabel,
+      xLabel,
+      yLabel,
+      feature,
+      tTrEndPts,
+      tSfPeaks,
+      editPeakSt,
+      layoutSt,
+      sweepExtentSt,
+      isUiNoBrushSt,
+      isHidden,
+      resetAllAct,
+      cyclicvoltaSt,
+      integationSt,
+      mtplySt,
+      axesUnitsSt,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct
+    } = props;
+    const size = this.getTargetSize(layoutSt);
+    this.currentSize = size;
+    (0, _draw.drawDestroy)(this.rootKlass);
+    if (shouldReset) {
+      resetAllAct(feature);
+    }
+    let xxLabel = xLabel;
+    let yyLabel = yLabel;
+    if (axesUnitsSt) {
+      const {
+        curveIdx
+      } = curveSt;
+      const {
+        axes
+      } = axesUnitsSt;
+      let selectedAxes = axes[curveIdx];
+      if (!selectedAxes) {
+        selectedAxes = {
+          xUnit: '',
+          yUnit: ''
+        };
+      }
+      const {
+        xUnit,
+        yUnit
+      } = selectedAxes;
+      xxLabel = xUnit === '' ? xLabel : xUnit;
+      yyLabel = yUnit === '' ? yLabel : yUnit;
+    }
+    const filterSeed = seed;
+    const filterPeak = peak;
+    this.focus = new _multi_focus.default({
+      W: size.width,
+      H: size.height,
+      entities,
+      clickUiTargetAct,
+      selectUiSweepAct,
+      scrollUiWheelAct
+    });
+    (0, _draw.drawMain)(this.rootKlass, size.width, size.height);
+    this.focus.create({
+      curveSt,
+      filterSeed,
+      filterPeak,
+      tTrEndPts,
+      tSfPeaks,
+      editPeakSt,
+      layoutSt,
+      sweepExtentSt,
+      isUiNoBrushSt,
+      cyclicvoltaSt,
+      integationSt,
+      mtplySt
+    });
+    (0, _draw.drawLabel)(this.rootKlass, cLabel, xxLabel, yyLabel);
+    (0, _draw.drawDisplay)(this.rootKlass, isHidden);
+    (0, _draw.drawArrowOnCurve)(this.rootKlass, isHidden);
+  }
   render() {
+    const {
+      layoutSt
+    } = this.props;
+    const isCyclicVolta = _format.default.isCyclicVoltaLayout(layoutSt);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "d3Line"
+      className: "d3Line",
+      ref: this.containerRef,
+      style: isCyclicVolta ? {
+        height: '100%'
+      } : undefined
     });
   }
 }

package/dist/components/d3_multi/multi_focus.js

@@ -96,6 +96,7 @@ class MultiFocus {
     this.onClickPecker = this.onClickPecker.bind(this);
     this.isFirefox = typeof InstallTrigger !== 'undefined';
     this.cyclicvoltaSt = null;
+    this.yTransformFactor = 1.0;
   }
   getShouldUpdate(nextEpSt) {
     const {
@@ -106,7 +107,8 @@ class MultiFocus {
       prevTePt,
       prevDtPk,
       prevSfPk,
-      prevData
+      prevData,
+      prevYFactor
     } = this.shouldUpdate;
     const {
       xt,
@@ -119,6 +121,7 @@ class MultiFocus {
     const sameDtPk = prevDtPk === this.dataPks.length;
     const sameSfPk = JSON.stringify(prevSfPk) === JSON.stringify(this.tSfPeaks);
     const sameData = prevData === this.data.length;
+    const sameYFactor = prevYFactor === this.yTransformFactor;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
       sameXY,
       sameEpSt,
@@ -127,7 +130,8 @@ class MultiFocus {
       sameTePt,
       sameDtPk,
       sameSfPk,
-      sameData // eslint-disable-line
+      sameData,
+      sameYFactor // eslint-disable-line
     });
   }
   resetShouldUpdate(prevEpSt) {
@@ -142,6 +146,7 @@ class MultiFocus {
     const prevSfPk = this.tSfPeaks;
     const prevData = this.data.length;
     const prevLySt = this.layout;
+    const prevYFactor = this.yTransformFactor;
     this.shouldUpdate = Object.assign({}, this.shouldUpdate, {
       prevXt,
       prevYt,
@@ -151,17 +156,41 @@ class MultiFocus {
       prevTePt,
       prevDtPk,
       prevSfPk,
-      prevData // eslint-disable-line
+      prevData,
+      prevYFactor // eslint-disable-line
     });
   }
   setTip() {
     this.tip = (0, _init.InitTip)();
     this.root.call(this.tip);
   }
+  computeYTransformFactor(layout, cyclicvoltaSt, feature) {
+    let factor = 1.0;
+    if (layout === _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY && cyclicvoltaSt && cyclicvoltaSt.useCurrentDensity) {
+      const rawArea = (cyclicvoltaSt.areaValue === '' ? 1.0 : cyclicvoltaSt.areaValue) || 1.0;
+      const areaUnit = cyclicvoltaSt.areaUnit || 'cm²';
+      const safeArea = rawArea > 0 ? rawArea : 1.0;
+      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;
+  }
+  transformYValue(y) {
+    return y * this.yTransformFactor;
+  }
   setDataParams(filterSeed, peaks, tTrEndPts, tSfPeaks, layout, cyclicvoltaSt, jcampIdx = 0) {
     this.data = [];
     this.otherLineData = [];
     let filterSubLayoutValue = null;
+    const currFeature = this.entities && this.entities[0] ? this.entities[0].feature : null;
+    this.yTransformFactor = this.computeYTransformFactor(layout, cyclicvoltaSt, currFeature);
     this.entities.forEach((entry, idx) => {
       const {
         topic,
@@ -205,6 +234,11 @@ class MultiFocus {
   updatePathCall(xt, yt) {
     this.pathCall = d3.line().x(d => xt(d.x)).y(d => yt(d.y));
   }
+  setYAxisTickFormat() {
+    const f = this.yTransformFactor || 1;
+    const format = d3.format('.2n');
+    this.axisCall.y.tickFormat(v => format(v * f));
+  }
   setConfig(sweepExtentSt) {
     // Domain Calculate
     let {
@@ -246,6 +280,9 @@ class MultiFocus {
     // Axis Call
     this.axisCall.x.scale(xt);
     this.axisCall.y.scale(yt);
+    if (this.layout === _list_layout.LIST_LAYOUT.CYCLIC_VOLTAMMETRY) {
+      this.setYAxisTickFormat();
+    }
     this.currentExtent = {
       xExtent,
       yExtent
@@ -299,9 +336,10 @@ class MultiFocus {
   }
   drawGrid() {
     const {
-      sameXY
+      sameXY,
+      sameYFactor
     } = this.shouldUpdate;
-    if (sameXY) return;
+    if (sameXY && sameYFactor) return;
     this.grid.x.call(this.axisCall.x.tickSize(-this.h, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
     this.grid.y.call(this.axisCall.y.tickSize(-this.w, 0, 0)).selectAll('line').attr('stroke', '#ddd').attr('stroke-opacity', 0.6).attr('fill', 'none');
   }
@@ -473,7 +511,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.show(tipParams, event.target);
     }).on('mouseout', (event, d) => {
@@ -481,7 +520,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'red');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.hide(tipParams, event.target);
     }).on('click', (event, d) => this.onClickTarget(event, d));
@@ -534,7 +574,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', 'blue');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.show(tipParams, event.target);
     }).on('mouseout', (event, d) => {
@@ -542,7 +583,8 @@ class MultiFocus {
       d3.select(`#bpt${Math.round(1000 * d.x)}`).style('fill', '#228B22');
       const tipParams = {
         d,
-        layout: this.layout
+        layout: this.layout,
+        yFactor: this.yTransformFactor
       };
       this.tip.hide(tipParams, event.target);
     }).on('click', (event, d) => this.onClickPecker(event, d));