@progress/kendo-react-gauges
Version:
React Gauges provide a set of React components for building beautiful and customizable gauges. KendoReact Gauges package
161 lines (160 loc) • 5.5 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 y } from "@progress/kendo-react-intl";
import { createStore as p } from "./store/store.mjs";
import { themeReducer as w, observersReducer as C } from "./store/reducer.mjs";
import { isOptionsChanged as A } from "./utils/common.mjs";
import { validatePackage as x, getLicenseMessage as W, WatermarkOverlay as D, canUseDOM as P } from "@progress/kendo-react-common";
import { GaugeContext as F } from "./GaugeContext.mjs";
import { packageMetadata as d } from "./package-metadata.mjs";
import { gaugeTheme as R } 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 = !x(d, { component: "Gauge" }), this.licenseMessage = W(d), this.themeStore = p(w), this.observersStore = p(C), this.contextValue = {
observersStore: this.observersStore
};
}
/**
* @hidden
*/
get element() {
return this._element;
}
/**
* @hidden
*/
componentDidMount() {
this.element && (this.themeStore.dispatch({ type: "push", payload: R(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: s,
deriveOptionsFromParent: r,
getTarget: g,
gaugeConstructor: V,
className: k,
renderAs: v,
...a
} = this.props, {
dir: E,
children: T,
deriveOptionsFromParent: z,
getTarget: G,
gaugeConstructor: L,
className: M,
renderAs: f,
...S
} = e;
if (this.gaugeInstance !== null) {
const c = m(this), O = this.gaugeInstance.contextService, I = c.locale !== O._intlService.locale, l = A(S, a), i = a;
I && (this.gaugeInstance.contextService._intlService = c, this.gaugeInstance.contextService.format._intlService = c, l || this.gaugeInstance.noTransitionsRedraw()), l || (v || "svg") !== (f || "svg") ? this.refresh() : Object.keys(a).indexOf("pointer") > -1 ? Array.isArray(i.pointer) ? this.refreshAllValues(i.pointer.map((b) => b.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: s } = this.props, r = Object.assign({}, e, { position: "relative" });
return /* @__PURE__ */ n.createElement(F.Provider, { value: this.contextValue }, /* @__PURE__ */ n.createElement(
"div",
{
style: r,
ref: (g) => {
this._element = g;
},
className: t
},
s,
this.showLicenseWatermark && /* @__PURE__ */ n.createElement(D, { message: this.licenseMessage })
));
}
/**
* @hidden
*/
instantiateCoreGauge() {
const { dir: e, gaugeConstructor: t } = this.props, s = this.getGaugeOptions();
this.gaugeInstance = new t(this.element, s, 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 : P && window.getComputedStyle(this.element).direction || "ltr") === "rtl";
}
/**
* @hidden
*/
getGaugeOptions() {
const { renderAs: e, transitions: t, deriveOptionsFromParent: s } = this.props;
let r = Object.assign({
renderAs: e,
transitions: t
});
return s && (r = s(r)), r;
}
/**
* @hidden
*/
trigger(e, t) {
const s = this.observersStore.getState();
for (let r = 0; r < s.length; r++)
s[r].trigger(e, t);
}
};
o.propTypes = {
dir: u.string,
renderAs: u.oneOf(["svg", "canvas"])
}, o.defaultProps = {
renderAs: "svg"
};
let h = o;
y(h);
export {
h as BaseGauge
};