@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(t, e) {
    super(t, e), this.state = {
      arcCenterStyles: null,
      arcCenterValue: {
        value: 0,
        color: ""
      }
    }, this._element = null, this.gaugeObserver = new c(this, {
      render: "onRender"
    }), e.observersStore.dispatch({
      type: "add",
      payload: this.gaugeObserver
    });
  }
  render() {
    const { render: t } = this.props, { arcCenterStyles: e, arcCenterValue: s } = this.state, n = e || { zIndex: -1 };
    let r = null;
    return t && (r = /* @__PURE__ */ a.createElement("div", { className: "k-arcgauge-label", ref: (i) => this._element = i, style: n }, t(s.value, s.color))), r;
  }
  onRender(t) {
    if (!this._element)
      return;
    const e = t.sender.gaugeInstance, s = this._element.offsetWidth, n = this._element.offsetHeight, r = e.centerLabelPosition(s, n);
    this.setState({
      arcCenterStyles: {
        left: r.left,
        top: r.top
      },
      arcCenterValue: {
        value: e.value(),
        color: e.currentColor()
      }
    });
  }
};
o.contextType = u;
let l = o;
export {
  l as ArcCenter
};