import { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString } from "vue";
const _hoisted_1 = {
  class: "gauge"
};
const _hoisted_2 = ["width", "height", "viewBox"];
const _hoisted_3 = ["d", "stroke", "stroke-width", "fill"];
const _hoisted_4 = ["d", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "fill"];
const _hoisted_5 = ["stroke", "stroke-width", "fill", "cx", "cy", "r"];
const _hoisted_6 = ["transform", "stroke", "stroke-width", "stroke-dasharray", "stroke-dashoffset", "fill", "cx", "cy", "r"];
const _hoisted_7 = ["y", "font-weight", "font-size", "fill", "dy", "dominant-baseline"];
const _hoisted_8 = ["y", "font-weight", "font-size", "fill", "dy", "dominant-baseline"];
function render(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", _hoisted_1, [(_openBlock(), _createElementBlock("svg", {
    class: "gauge-svg",
    width: `${_ctx.size}px`,
    height: `${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}px`,
    viewBox: `0 0 ${_ctx.size} ${_ctx.semiCircle ? _ctx.size / 2 : _ctx.size}`
  }, [_ctx.semiCircle ? (_openBlock(), _createElementBlock("path", {
    key: 0,
    class: "gauge-back-semi",
    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
    stroke: _ctx.borderBgColor,
    "stroke-width": _ctx.borderWidth,
    fill: _ctx.bgColor || 'none'
  }, null, 8, _hoisted_3)) : _createCommentVNode("", true), _ctx.semiCircle ? (_openBlock(), _createElementBlock("path", {
    key: 1,
    class: "gauge-front-semi",
    d: `M${_ctx.size - _ctx.borderWidth / 2},${_ctx.size / 2} a1,1 0 0,0 -${_ctx.size - _ctx.borderWidth},0`,
    stroke: _ctx.borderColor,
    "stroke-width": _ctx.borderWidth,
    "stroke-dasharray": _ctx.length / 2,
    "stroke-dashoffset": _ctx.length / 2 * (1 + _ctx.progress),
    fill: _ctx.borderBgColor ? 'none' : _ctx.bgColor || 'none'
  }, null, 8, _hoisted_4)) : _createCommentVNode("", true), !_ctx.semiCircle && _ctx.borderBgColor ? (_openBlock(), _createElementBlock("circle", {
    key: 2,
    class: "gauge-back-circle",
    stroke: _ctx.borderBgColor,
    "stroke-width": _ctx.borderWidth,
    fill: _ctx.bgColor || 'none',
    cx: _ctx.size / 2,
    cy: _ctx.size / 2,
    r: _ctx.radius
  }, null, 8, _hoisted_5)) : _createCommentVNode("", true), !_ctx.semiCircle ? (_openBlock(), _createElementBlock("circle", {
    key: 3,
    class: "gauge-front-circle",
    transform: `rotate(-90 ${_ctx.size / 2} ${_ctx.size / 2})`,
    stroke: _ctx.borderColor,
    "stroke-width": _ctx.borderWidth,
    "stroke-dasharray": _ctx.length,
    "stroke-dashoffset": _ctx.length * (1 - _ctx.progress),
    fill: _ctx.borderBgColor ? 'none' : _ctx.bgColor || 'none',
    cx: _ctx.size / 2,
    cy: _ctx.size / 2,
    r: _ctx.radius
  }, null, 8, _hoisted_6)) : _createCommentVNode("", true), _ctx.valueText ? (_openBlock(), _createElementBlock("text", {
    key: 4,
    class: "gauge-value-text",
    x: "50%",
    y: _ctx.semiCircle ? '100%' : '50%',
    "font-weight": _ctx.valueFontWeight,
    "font-size": _ctx.valueFontSize,
    fill: _ctx.valueTextColor,
    dy: _ctx.semiCircle ? _ctx.labelText ? -_ctx.labelFontSize - 15 : -5 : 0,
    "text-anchor": "middle",
    "dominant-baseline": !_ctx.semiCircle ? 'middle' : null
  }, _toDisplayString(_ctx.valueText), 9, _hoisted_7)) : _createCommentVNode("", true), _ctx.labelText ? (_openBlock(), _createElementBlock("text", {
    key: 5,
    class: "gauge-label-text",
    x: "50%",
    y: _ctx.semiCircle ? '100%' : '50%',
    "font-weight": _ctx.labelFontWeight,
    "font-size": _ctx.labelFontSize,
    fill: _ctx.labelTextColor,
    dy: _ctx.semiCircle ? -5 : _ctx.valueText ? _ctx.valueFontSize / 2 + 10 : 0,
    "text-anchor": "middle",
    "dominant-baseline": !_ctx.semiCircle ? 'middle' : null
  }, _toDisplayString(_ctx.labelText), 9, _hoisted_8)) : _createCommentVNode("", true)], 8, _hoisted_2))]);
}
import { computed } from 'vue';
export default {
  name: 'f7-gauge',
  render,
  props: {
    type: {
      type: String,
      default: 'circle'
    },
    value: {
      type: [Number, String],
      default: 0
    },
    size: {
      type: [Number, String],
      default: 200
    },
    bgColor: {
      type: String,
      default: 'transparent'
    },
    borderBgColor: {
      type: String,
      default: '#eeeeee'
    },
    borderColor: {
      type: String,
      default: '#000000'
    },
    borderWidth: {
      type: [Number, String],
      default: 10
    },
    valueText: [Number, String],
    valueTextColor: {
      type: String,
      default: '#000000'
    },
    valueFontSize: {
      type: [Number, String],
      default: 31
    },
    valueFontWeight: {
      type: [Number, String],
      default: 500
    },
    labelText: String,
    labelTextColor: {
      type: String,
      default: '#888888'
    },
    labelFontSize: {
      type: [Number, String],
      default: 14
    },
    labelFontWeight: {
      type: [Number, String],
      default: 400
    }
  },
  setup(props) {
    const semiCircle = computed(() => props.type === 'semicircle');
    const radius = computed(() => props.size / 2 - props.borderWidth / 2);
    const length = computed(() => 2 * Math.PI * radius.value);
    const progress = computed(() => Math.max(Math.min(props.value, 1), 0));
    return {
      semiCircle,
      radius,
      length,
      progress
    };
  }
};