@robotical/sensors-dashboard/dist/components/ConnectionArea/RaftSignal/index.js

A dashboard tool for depicting Marty data by Robotical

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = RaftSignal;
var _react = require("react");
var _emptySignal = require("../../../assets/connect-button/empty-signal.svg");
var _rescaleRange = _interopRequireDefault(require("../../../utils/rescale-range"));
var _colors = require("../../../styles/colors");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function RaftSignal(_ref) {
  let {
    signalStrength,
    connectedRaft
  } = _ref;
  const signalRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    if (signalRef.current) {
      const signalRaw = -50 / signalStrength * 100;
      const signalScaled = (0, _rescaleRange.default)(signalRaw, 50, 100, 0, 100);
      const signalBars = signalScaled / 20;
      const colour = signalBars <= 3 ? _colors.SCREENFREE_YELLOW : _colors.SCREENFREE_GREEN;
      const svgStartPath = 9;
      for (let i = 0; i < 5; i++) {
        if (i < signalBars) {
          signalRef.current.children[svgStartPath - i].setAttribute("fill", colour);
        } else {
          signalRef.current.children[svgStartPath - i].setAttribute("fill", "white");
        }
      }
    }
  }, [signalStrength]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_emptySignal.ReactComponent, {
    ref: signalRef,
    width: "100%",
    role: "img",
    "aria-label": signalStrength <= -200 ? "Signal strength unavailable" : "Signal strength: ".concat(signalStrength, " dBm")
  });
}