zmp-react/esm/components/gauge.js

Build full featured iOS & Android apps using ZMP & React

import _extends from "@babel/runtime/helpers/extends";

/* eslint no-nested-ternary: off */
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import { classNames, getExtraAttrs } from '../shared/utils';

var Gauge = /*#__PURE__*/forwardRef(function (props, ref) {
  var className = props.className,
      id = props.id,
      style = props.style,
      _props$type = props.type,
      type = _props$type === void 0 ? 'circle' : _props$type,
      _props$value = props.value,
      value = _props$value === void 0 ? 0 : _props$value,
      _props$size = props.size,
      size = _props$size === void 0 ? 200 : _props$size,
      _props$bgColor = props.bgColor,
      bgColor = _props$bgColor === void 0 ? 'transparent' : _props$bgColor,
      _props$borderBgColor = props.borderBgColor,
      borderBgColor = _props$borderBgColor === void 0 ? '#eeeeee' : _props$borderBgColor,
      _props$borderColor = props.borderColor,
      borderColor = _props$borderColor === void 0 ? '#000000' : _props$borderColor,
      _props$borderWidth = props.borderWidth,
      borderWidth = _props$borderWidth === void 0 ? 10 : _props$borderWidth,
      valueText = props.valueText,
      _props$valueTextColor = props.valueTextColor,
      valueTextColor = _props$valueTextColor === void 0 ? '#000000' : _props$valueTextColor,
      _props$valueFontSize = props.valueFontSize,
      valueFontSize = _props$valueFontSize === void 0 ? 31 : _props$valueFontSize,
      _props$valueFontWeigh = props.valueFontWeight,
      valueFontWeight = _props$valueFontWeigh === void 0 ? 500 : _props$valueFontWeigh,
      labelText = props.labelText,
      _props$labelTextColor = props.labelTextColor,
      labelTextColor = _props$labelTextColor === void 0 ? '#888888' : _props$labelTextColor,
      _props$labelFontSize = props.labelFontSize,
      labelFontSize = _props$labelFontSize === void 0 ? 14 : _props$labelFontSize,
      _props$labelFontWeigh = props.labelFontWeight,
      labelFontWeight = _props$labelFontWeigh === void 0 ? 400 : _props$labelFontWeigh;
  var extraAttrs = getExtraAttrs(props);
  var elRef = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      el: elRef.current
    };
  });
  var classes = classNames(className, 'gauge');
  var semiCircle = type === 'semicircle';
  var radius = size / 2 - borderWidth / 2;
  var length = 2 * Math.PI * radius;
  var progress = Math.max(Math.min(value, 1), 0);
  return /*#__PURE__*/React.createElement("div", _extends({
    id: id,
    style: style,
    className: classes,
    ref: elRef
  }, extraAttrs), /*#__PURE__*/React.createElement("svg", {
    className: "gauge-svg",
    width: size + "px",
    height: (semiCircle ? size / 2 : size) + "px",
    viewBox: "0 0 " + size + " " + (semiCircle ? size / 2 : size)
  }, semiCircle && /*#__PURE__*/React.createElement("path", {
    className: "gauge-back-semi",
    d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
    stroke: borderBgColor,
    strokeWidth: borderWidth,
    fill: bgColor || 'none'
  }), semiCircle && /*#__PURE__*/React.createElement("path", {
    className: "gauge-front-semi",
    d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
    stroke: borderColor,
    strokeWidth: borderWidth,
    strokeDasharray: length / 2,
    strokeDashoffset: length / 2 * (1 + progress),
    fill: borderBgColor ? 'none' : bgColor || 'none'
  }), !semiCircle && borderBgColor && /*#__PURE__*/React.createElement("circle", {
    className: "gauge-back-circle",
    stroke: borderBgColor,
    strokeWidth: borderWidth,
    fill: bgColor || 'none',
    cx: size / 2,
    cy: size / 2,
    r: radius
  }), !semiCircle && /*#__PURE__*/React.createElement("circle", {
    className: "gauge-front-circle",
    transform: "rotate(-90 " + size / 2 + " " + size / 2 + ")",
    stroke: borderColor,
    strokeWidth: borderWidth,
    strokeDasharray: length,
    strokeDashoffset: length * (1 - progress),
    fill: borderBgColor ? 'none' : bgColor || 'none',
    cx: size / 2,
    cy: size / 2,
    r: radius
  }), valueText && /*#__PURE__*/React.createElement("text", {
    className: "gauge-value-text",
    x: "50%",
    y: semiCircle ? '100%' : '50%',
    fontWeight: valueFontWeight,
    fontSize: valueFontSize,
    fill: valueTextColor,
    dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
    textAnchor: "middle",
    dominantBaseline: !semiCircle ? 'middle' : null
  }, valueText), labelText && /*#__PURE__*/React.createElement("text", {
    className: "gauge-label-text",
    x: "50%",
    y: semiCircle ? '100%' : '50%',
    fontWeight: labelFontWeight,
    fontSize: labelFontSize,
    fill: labelTextColor,
    dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
    textAnchor: "middle",
    dominantBaseline: !semiCircle ? 'middle' : null
  }, labelText)));
});
Gauge.displayName = 'zmp-gauge';
export default Gauge;