@progress/kendo-react-gauges
Version:
React Gauges provide a set of React components for building beautiful and customizable gauges. KendoReact Gauges package
150 lines (149 loc) • 5.34 kB
JavaScript
/**
* @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 n from "react";
import u from "prop-types";
import { provideIntlService as m, registerForIntl as b } from "@progress/kendo-react-intl";
import { createStore as p } from "./store/store.mjs";
import { themeReducer as y, observersReducer as w } from "./store/reducer.mjs";
import { isOptionsChanged as C } from "./utils/common.mjs";
import { validatePackage as A, WatermarkOverlay as x, canUseDOM as W } from "@progress/kendo-react-common";
import { GaugeContext as D } from "./GaugeContext.mjs";
import { packageMetadata as P } from "./package-metadata.mjs";
import { gaugeTheme as F } from "@progress/kendo-charts";
const o = class o extends n.Component {
constructor(e) {
super(e), this.gaugeInstance = null, this.surface = null, this._element = null, this.themeStore = {}, this.themeUnsubscriber = Function.prototype, this.observersStore = {}, this.showLicenseWatermark = !1, this.onWindowResize = () => {
this.gaugeInstance !== null && (this.gaugeInstance.resize(), this.trigger("render", { sender: this }));
}, this.showLicenseWatermark = !A(P, { component: "Gauge" }), this.themeStore = p(y), this.observersStore = p(w), this.contextValue = {
observersStore: this.observersStore
};
}
/**
* @hidden
*/
get element() {
return this._element;
}
/**
* @hidden
*/
componentDidMount() {
this.element && (this.themeStore.dispatch({ type: "push", payload: F(this.element) }), this.instantiateCoreGauge()), this.themeUnsubscriber = this.themeStore.subscribe(this.refresh.bind(this)), window.addEventListener("resize", this.onWindowResize), this.trigger("render", { sender: this });
}
/**
* @hidden
*/
componentDidUpdate(e) {
const {
dir: t,
children: r,
deriveOptionsFromParent: s,
getTarget: g,
gaugeConstructor: R,
className: V,
renderAs: d,
...a
} = this.props, {
dir: k,
children: E,
deriveOptionsFromParent: T,
getTarget: z,
gaugeConstructor: G,
className: N,
renderAs: v,
...f
} = e;
if (this.gaugeInstance !== null) {
const c = m(this), S = this.gaugeInstance.contextService, O = c.locale !== S._intlService.locale, l = C(f, a), i = a;
O && (this.gaugeInstance.contextService._intlService = c, this.gaugeInstance.contextService.format._intlService = c, l || this.gaugeInstance.noTransitionsRedraw()), l || (d || "svg") !== (v || "svg") ? this.refresh() : Object.keys(a).indexOf("pointer") > -1 ? Array.isArray(i.pointer) ? this.refreshAllValues(i.pointer.map((I) => I.value)) : this.refreshValue((i.pointer || {}).value) : this.refreshValue(i.value), e.dir !== t && this.gaugeInstance.setDirection(this.getDirection(t)), this.trigger("render", { sender: this });
}
}
/**
* @hidden
*/
componentWillUnmount() {
this.themeUnsubscriber();
const e = this.gaugeInstance && this.gaugeInstance.surfaceElement;
e && e.parentNode && e.parentNode.removeChild(e), this.gaugeInstance !== null && (this.gaugeInstance.destroy(), this.gaugeInstance = null), window.removeEventListener("resize", this.onWindowResize);
}
/**
* @hidden
*/
render() {
const { style: e = {}, className: t, children: r } = this.props, s = Object.assign({}, e, { position: "relative" });
return /* @__PURE__ */ n.createElement(D.Provider, { value: this.contextValue }, /* @__PURE__ */ n.createElement("div", { style: s, ref: (g) => this._element = g, className: t }, r, this.showLicenseWatermark && /* @__PURE__ */ n.createElement(x, null)));
}
/**
* @hidden
*/
instantiateCoreGauge() {
const { dir: e, gaugeConstructor: t } = this.props, r = this.getGaugeOptions();
this.gaugeInstance = new t(this.element, r, this.themeStore.getState(), {
rtl: this.getDirection(e),
intlService: m(this),
sender: this
});
}
/**
* @hidden
*/
refresh() {
if (this.gaugeInstance !== null) {
const e = this.themeStore.getState(), t = this.getGaugeOptions();
this.gaugeInstance.setOptions(t, e);
}
}
/**
* @hidden
*/
refreshValue(e) {
this.gaugeInstance.value(e);
}
/**
* @hidden
*/
refreshAllValues(e) {
this.gaugeInstance.allValues(e);
}
/**
* @hidden
*/
getDirection(e) {
return (e !== void 0 ? e : W && window.getComputedStyle(this.element).direction || "ltr") === "rtl";
}
/**
* @hidden
*/
getGaugeOptions() {
const { renderAs: e, transitions: t, deriveOptionsFromParent: r } = this.props;
let s = Object.assign({
renderAs: e,
transitions: t
});
return r && (s = r(s)), s;
}
/**
* @hidden
*/
trigger(e, t) {
const r = this.observersStore.getState();
for (let s = 0; s < r.length; s++)
r[s].trigger(e, t);
}
};
o.propTypes = {
dir: u.string,
renderAs: u.oneOf(["svg", "canvas"])
}, o.defaultProps = {
renderAs: "svg"
};
let h = o;
b(h);
export {
h as BaseGauge
};