@progress/kendo-react-gauges/ArcCenter.mjs

React Gauges provide a set of React components for building beautiful and customizable gauges. KendoReact Gauges package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as a from "react";
import { InstanceObserver as c } from "@progress/kendo-charts";
import { GaugeContext as u } from "./GaugeContext.mjs";
const o = class o extends a.Component {
  constructor(e) {
    super(e), this.state = {
      arcCenterStyles: null,
      arcCenterValue: {
        value: 0,
        color: ""
      }
    }, this._element = null, this.gaugeObserver = new c(this, {
      render: "onRender"
    });
  }
  componentDidMount() {
    var e;
    (e = this.context) == null || e.observersStore.dispatch({
      type: "add",
      payload: this.gaugeObserver
    });
  }
  render() {
    const { render: e } = this.props, { arcCenterStyles: t, arcCenterValue: n } = this.state, s = t || { zIndex: -1 };
    let r = null;
    return e && (r = /* @__PURE__ */ a.createElement(
      "div",
      {
        className: "k-arcgauge-label",
        ref: (i) => {
          this._element = i;
        },
        style: s
      },
      e(n.value, n.color)
    )), r;
  }
  onRender(e) {
    if (!this._element)
      return;
    const t = e.sender.gaugeInstance, n = this._element.offsetWidth, s = this._element.offsetHeight, r = t.centerLabelPosition(n, s);
    this.setState({
      arcCenterStyles: {
        left: r.left,
        top: r.top
      },
      arcCenterValue: {
        value: t.value(),
        color: t.currentColor()
      }
    });
  }
};
o.contextType = u;
let l = o;
export {
  l as ArcCenter
};