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

Netdata frontend SDK and chart utilities

import React from "react";
import styled from "styled-components";
import { Flex, TextMicro, TextSmall, getSizeBy } from "@netdata/netdata-ui";
import { useValueWithUnit } from "../provider";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Container = styled(Flex).attrs({
  alignItems: "center",
  width: "100%"
}).withConfig({
  displayName: "valueWithUnit__Container",
  componentId: "sc-17z90yl-0"
})(["display:grid;grid-template-columns:minmax(0,1fr) ", ";"], getSizeBy(5.5));
var UnitCell = styled(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 = styled(TextMicro).attrs({
  textAlign: "center"
}).withConfig({
  displayName: "valueWithUnit__HeaderLabel",
  componentId: "sc-17z90yl-2"
})(["grid-column:1 / -1;"]);
var ValueDetail = styled(TextMicro).attrs({
  margin: [1, 0, 0],
  textAlign: "right"
}).withConfig({
  displayName: "valueWithUnit__ValueDetail",
  componentId: "sc-17z90yl-3"
})(["grid-column:1;grid-row:2;"]);
export var 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__*/_jsxs(Container, {
    "data-testid": "drawer-value-unit-grid",
    children: [/*#__PURE__*/_jsx(TextSmall, {
      color: color,
      strong: strong,
      textAlign: "right",
      whiteSpace: "nowrap",
      children: value
    }), /*#__PURE__*/_jsx(UnitCell, {
      "data-testid": "drawer-value-unit-cell",
      children: unit && /*#__PURE__*/_jsx(TextMicro, {
        color: "textDescription",
        whiteSpace: "nowrap",
        truncate: true,
        children: unit
      })
    }), detail && /*#__PURE__*/_jsx(ValueDetail, {
      "data-testid": "drawer-value-unit-detail",
      color: "textDescription",
      children: detail
    })]
  });
};
export var ValueUnitHeader = function ValueUnitHeader(_ref2) {
  var label = _ref2.label,
    _ref2$strong = _ref2.strong,
    strong = _ref2$strong === void 0 ? true : _ref2$strong;
  return /*#__PURE__*/_jsx(Container, {
    children: /*#__PURE__*/_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 = useValueWithUnit(value, {
      valueKey: valueKey,
      fractionDigits: fractionDigits,
      dimensionId: dimensionId,
      unitsKey: unitsKey,
      scaleByValue: true
    }),
    convertedValue = _useValueWithUnit.convertedValue,
    convertedUnit = _useValueWithUnit.convertedUnit;
  if (!visible) return null;
  return /*#__PURE__*/_jsx(ValueUnitGrid, {
    value: convertedValue,
    unit: unit === undefined ? convertedUnit : unit,
    color: color,
    strong: strong
  });
};
export default ValueWithUnit;