@progress/kendo-vue-gauges
Version:
151 lines (150 loc) • 3.91 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 { defineComponent as l, createVNode as o } from "vue";
import { BaseGauge as c } from "./BaseGauge.mjs";
import { ArcGauge as g } from "@progress/kendo-charts";
import { ArcCenter as h } from "./ArcCenter.mjs";
import { drawDOM as d, Group as f } from "@progress/kendo-drawing";
import { getDefaultSlots as p, templateRendering as m, getListeners as b, classNames as v } from "@progress/kendo-vue-common";
const $ = /* @__PURE__ */ l({
name: "KendoArcGauge",
props: {
dir: String,
renderAs: {
type: String,
default: "svg",
validator: function(e) {
return ["svg", "canvas"].includes(e);
}
},
gaugeConstructor: [Object, Function],
value: {
type: Number,
default: void 0
},
color: String,
colors: {
type: Array,
default: void 0
},
opacity: {
type: Number,
default: void 0
},
scale: {
type: Object,
default: void 0
},
centerRender: [String, Function, Object],
transitions: {
type: Boolean,
default: void 0
}
},
created() {
this.gaugeType = g;
},
data() {
return {
centerStyles: {
top: null,
left: null
},
arcCenterValue: {
value: "",
color: ""
}
};
},
provide() {
return {
centerStyles: this.$data.centerStyles,
arcCenterValue: this.$data.arcCenterValue
};
},
mounted() {
this._baseGauge = this.baseGaugeRef, this.center = this.centerRef, this.positionCenter();
},
watch: {
colors: function(e, t) {
this.prevColors = t;
}
},
updated() {
this._baseGauge = this.baseGaugeRef, this.center = this.centerRef;
},
render() {
const e = p(this), {
centerRender: t,
className: r,
value: n,
transitions: s,
scale: a
} = this.$props, u = t ? m.call(this, t, b.call(this)) : void 0;
return o(c, {
value: n,
scale: a,
transitions: s,
deriveOptionsFromParent: this.deriveOptionsFromParent,
ref: (i) => {
this.baseGaugeRef = i;
},
gaugeConstructor: this.gaugeType,
getTarget: this.getTarget,
class: v("k-gauge k-arcgauge", r),
onRender: this.positionCenter
}, {
default: () => [e, o(h, {
center: u,
ref: (i) => {
this.centerRef = i;
}
}, null)]
});
},
methods: {
positionCenter() {
const e = this.center.$el.offsetWidth, t = this.center.$el.offsetHeight, r = this.gaugeInstance(), n = r.centerLabelPosition(e, t);
this.centerStyles.left = n.left + "px", this.centerStyles.top = n.top + "px", this.arcCenterValue.value = r.value(), this.arcCenterValue.color = r.currentColor();
},
gaugeInstance() {
return this._baseGauge ? this._baseGauge.gaugeInstance : null;
},
surface() {
return this._baseGauge ? this._baseGauge.surface : null;
},
element() {
return this._baseGauge ? this._baseGauge.element : null;
},
exportVisual(e) {
return this.gaugeInstance !== null && this.$el ? d(this.$el, e) : Promise.resolve(new f());
},
getTarget() {
return this;
},
deriveOptionsFromParent(e) {
const {
value: t,
color: r,
colors: n,
opacity: s,
scale: a
} = this.$props;
return Object.assign({}, e, {
value: t,
color: r,
colors: n,
opacity: s,
scale: a
});
}
}
});
export {
$ as ArcGauge
};