@netdata/charts/dist/components/drawer/valueWithUnit.js

Netdata frontend SDK and chart utilities

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.ValueUnitHeader = exports.ValueUnitGrid = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _netdataUi = require("@netdata/netdata-ui");
var _provider = require("../provider");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Container = (0, _styledComponents["default"])(_netdataUi.Flex).attrs({
  alignItems: "center",
  width: "100%"
}).withConfig({
  displayName: "valueWithUnit__Container",
  componentId: "sc-17z90yl-0"
})(["display:grid;grid-template-columns:minmax(0,1fr) ", ";"], (0, _netdataUi.getSizeBy)(5.5));
var UnitCell = (0, _styledComponents["default"])(_netdataUi.Flex).attrs({
  alignItems: "center",
  overflow: "hidden",
  padding: [0, 0, 0, 2],
  width: {
    min: "0px"
  }
}).withConfig({
  displayName: "valueWithUnit__UnitCell",
  componentId: "sc-17z90yl-1"
})(["box-sizing:border-box;"]);
var HeaderLabel = (0, _styledComponents["default"])(_netdataUi.TextMicro).attrs({
  textAlign: "center"
}).withConfig({
  displayName: "valueWithUnit__HeaderLabel",
  componentId: "sc-17z90yl-2"
})(["grid-column:1 / -1;"]);
var ValueDetail = (0, _styledComponents["default"])(_netdataUi.TextMicro).attrs({
  margin: [1, 0, 0],
  textAlign: "right"
}).withConfig({
  displayName: "valueWithUnit__ValueDetail",
  componentId: "sc-17z90yl-3"
})(["grid-column:1;grid-row:2;"]);
var ValueUnitGrid = exports.ValueUnitGrid = function ValueUnitGrid(_ref) {
  var value = _ref.value,
    unit = _ref.unit,
    detail = _ref.detail,
    _ref$color = _ref.color,
    color = _ref$color === void 0 ? "text" : _ref$color,
    strong = _ref.strong;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
    "data-testid": "drawer-value-unit-grid",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextSmall, {
      color: color,
      strong: strong,
      textAlign: "right",
      whiteSpace: "nowrap",
      children: value
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(UnitCell, {
      "data-testid": "drawer-value-unit-cell",
      children: unit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_netdataUi.TextMicro, {
        color: "textDescription",
        whiteSpace: "nowrap",
        truncate: true,
        children: unit
      })
    }), detail && /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueDetail, {
      "data-testid": "drawer-value-unit-detail",
      color: "textDescription",
      children: detail
    })]
  });
};
var ValueUnitHeader = exports.ValueUnitHeader = function ValueUnitHeader(_ref2) {
  var label = _ref2.label,
    _ref2$strong = _ref2.strong,
    strong = _ref2$strong === void 0 ? true : _ref2$strong;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderLabel, {
      strong: strong,
      children: label
    })
  });
};
var ValueWithUnit = function ValueWithUnit(_ref3) {
  var value = _ref3.value,
    dimensionId = _ref3.dimensionId,
    valueKey = _ref3.valueKey,
    _ref3$unitsKey = _ref3.unitsKey,
    unitsKey = _ref3$unitsKey === void 0 ? "units" : _ref3$unitsKey,
    fractionDigits = _ref3.fractionDigits,
    unit = _ref3.unit,
    _ref3$visible = _ref3.visible,
    visible = _ref3$visible === void 0 ? true : _ref3$visible,
    color = _ref3.color,
    strong = _ref3.strong;
  var _useValueWithUnit = (0, _provider.useValueWithUnit)(value, {
      valueKey: valueKey,
      fractionDigits: fractionDigits,
      dimensionId: dimensionId,
      unitsKey: unitsKey,
      scaleByValue: true
    }),
    convertedValue = _useValueWithUnit.convertedValue,
    convertedUnit = _useValueWithUnit.convertedUnit;
  if (!visible) return null;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ValueUnitGrid, {
    value: convertedValue,
    unit: unit === undefined ? convertedUnit : unit,
    color: color,
    strong: strong
  });
};
var _default = exports["default"] = ValueWithUnit;