@progress/kendo-vue-charts
Version:
291 lines (290 loc) • 9.43 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 g, createVNode as u, h } from "vue";
import { provideIntlService as p } from "@progress/kendo-vue-intl";
import { InstanceObserver as m } from "@progress/kendo-charts";
import { hasListener as b, isRtl as S, getDefaultSlots as O, WatermarkOverlay as y, getRef as I, validatePackage as C, shouldShowValidationUI as L, getLicenseMessage as D, setRef as w } from "@progress/kendo-vue-common";
import { hasParent as k, toggle as v } from "./utils/main.mjs";
import { create as j } from "./events/chart-event-builder.mjs";
import { toDomEvent as R } from "./events/dom-event.mjs";
import { loadTheme as T } from "./theming/theme-service.mjs";
import x from "./store/store.mjs";
import { observersReducer as M, optionsReducer as E, themeReducer as P } from "./store/reducer.mjs";
import { SeriesTooltip as z } from "./tooltip/Series.mjs";
import { CrosshairContainer as $ } from "./tooltip/CrosshairContainer.mjs";
import { packageMetadata as l } from "./package-metadata.mjs";
const Q = /* @__PURE__ */ g({
name: "KendoBaseChart",
props: {
deriveOptionsFromParent: {
type: Function,
default: void 0
},
chartConstructor: {
type: [Object, Function],
default: void 0
},
className: String,
chartStyle: Object,
wrapper: String,
getTarget: {
type: Function,
default: void 0
},
dataItems: {
type: Array,
default: void 0
},
dir: String,
renderAs: {
type: String,
default: void 0,
validator: function(e) {
return ["svg", "canvas"].includes(e);
}
},
pannable: {
type: [Boolean, Object],
default: void 0
},
zoomable: {
type: [Boolean, Object],
default: void 0
},
seriesColors: {
type: Array,
default: void 0
},
transitions: {
type: Boolean,
default: !0
},
paneDefaults: {
type: Object,
default: void 0
},
panes: {
type: Array,
default: void 0
},
seriesDefaults: {
type: Object,
default: void 0
},
axisDefaults: {
type: Object,
default: void 0
},
allListeners: {
type: Object,
default: void 0
},
onLegenditemclick: Function,
onBasechartevent: Function,
onRefresh: Function
},
inject: {
kendoIntlService: {
default: null
}
},
provide() {
return {
optionsState: this.optionsState,
dispatchOptions: this.dispatchOptions,
observersState: this.observersState,
dispatchObservers: this.dispatchObservers,
childrenObserver: this.childrenObserver,
chartRefresh: this.refresh
};
},
created() {
this.chartInstance = null, this.element = null, this.suppressTransitions = !1, C(l), this.showLicenseWatermark = L(l), this.licenseMessage = D(l), this.themeStore = x(P), this.chartObserver = new m(this, {
render: "onRender",
legendItemClick: "onLegendItemClick"
});
},
data() {
return {
optionsState: {},
observersState: [],
childrenObserver: new m(this, {
onMouseLeave: "onChildMouseLeave"
}),
showLicenseWatermark: !1,
licenseMessage: void 0
};
},
mounted() {
this.element = I(this, "element"), T(this.themeStore, this.instantiateCoreChart, this.element), window.addEventListener("resize", this.onWindowResize);
},
unmounted() {
this.onDestroyed();
},
updated() {
if (this.chartInstance !== null) {
const e = p(this), t = this.chartInstance.chartService;
e.locale !== t._intlService.locale && (this.chartInstance.chartService._intlService = e, this.chartInstance.chartService.format._intlService = e, this.chartInstance.noTransitionsRedraw()), this.refresh();
}
},
render() {
const e = O(this), {
chartStyle: t = {},
className: s,
wrapper: n
} = this.$props, i = Object.assign({}, t, {
position: "relative"
}), r = this.showLicenseWatermark ? u(y, {
message: this.licenseMessage
}, null) : null, o = function() {
return u("div", {
onMouseleave: this.onChartMouseLeave,
ref: w(this, "element"),
class: "k-chart-surface"
}, [e, r]);
};
return h(n, {
style: i,
class: s,
key: "chartElement"
}, [h(z, {
key: "seriesTooltip"
}), h($, {
key: "crosshairTooltips",
optionsState: {
...this.optionsState
}
}), o.call(this)]);
},
methods: {
dispatchOptions(e) {
E(this.optionsState, e);
},
dispatchObservers(e) {
this.observersState = M(this.observersState, e);
},
onDestroyed() {
this.chartInstance !== null && (this.chartInstance.destroy(), this.chartInstance = null), window.removeEventListener("resize", this.onWindowResize);
},
getDirection(e) {
return e !== void 0 ? e === "rtl" : S(this.element);
},
getChartOptions() {
const {
renderAs: e,
pannable: t,
zoomable: s,
paneDefaults: n,
panes: i,
transitions: r,
seriesColors: o,
seriesDefaults: c,
axisDefaults: d,
deriveOptionsFromParent: f
} = this.$props;
let a = {};
return e !== void 0 && (a.renderAs = e), t !== void 0 && (a.pannable = t), s !== void 0 && (a.zoomable = s), n !== void 0 && (a.paneDefaults = n), i !== void 0 && (a.panes = i), r !== void 0 && (a.transitions = r), o !== void 0 && (a.seriesColors = o), c !== void 0 && (a.seriesDefaults = c), d !== void 0 && (a.axisDefaults = d), a = Object.assign(a, this.optionsState), f && (a = f(a)), a;
},
refresh() {
if (this.chartInstance !== null) {
const e = this.themeStore.getState(), t = this.getChartOptions(), s = t.transitions;
this.suppressTransitions && (t.transitions = !1), b.call(this, "refresh") ? this.trigger("refresh", {
chartOptions: t,
themeOptions: e,
chartInstance: this.chartInstance
}) : this.chartInstance.setOptions(t, e), this.suppressTransitions && (t.transitions = s, this.suppressTransitions = !1);
}
},
instantiateCoreChart() {
const {
dir: e,
chartConstructor: t
} = this.$props, s = this.getChartOptions();
let n = null;
this.element && (n = this.element.lastElementChild, n && this.element.removeChild(n)), this.chartInstance = new t(this.element, s, this.themeStore.getState(), {
rtl: this.getDirection(e),
intlService: p(this),
observer: this.chartObserver,
sender: this
}), this.element && n && this.element.appendChild(n);
},
trigger(e, t) {
const s = this.$props.getTarget(), n = j(e, t, s), i = this.observersState;
let r = !1;
for (let o = 0; o < i.length; o++)
i[o].trigger(e, t) && (r = !0);
return r === !1 && n ? (this.$emit("basechartevent", e.toLowerCase(), n), n.isDefaultPrevented && n.isDefaultPrevented()) : r;
},
triggerDomEvent(e, t) {
const s = this.observersState;
let n = !1;
for (let i = 0; i < s.length; i++)
s[i].trigger(e, t) && (n = !0);
return n;
},
onRender(e) {
this.chartInstance !== null && (this.surface = e.sender.surface, this.trigger("render", e));
},
hasListener(e) {
return this.$props.allListeners ? Object.keys(this.$props.allListeners).some((t) => t.toLowerCase().indexOf(e.toLowerCase()) !== -1) : !1;
},
onLegendItemClick(e) {
if (this.chartInstance !== null)
if (this.hasListener("legenditemclick"))
this.$emit("legenditemclick", e);
else {
const {
series: t
} = this.optionsState;
if (!t)
return;
let s = {};
const {
seriesIndex: n,
pointIndex: i
} = e, r = t[n];
if (i === void 0)
s = Object.assign({}, r, {
visible: v(r.visible)
});
else {
const o = r.pointVisibility = r.pointVisibility || [];
o[i] = v(o[i]), s = Object.assign({}, r);
}
this.dispatchOptions({
chartCollectionIdxKey: `series_${n}`,
payload: s
}), this.suppressTransitions = !0, this.refresh();
}
},
onWindowResize() {
this.chartInstance !== null && this.chartInstance.resize();
},
onChartMouseLeave(e) {
const t = R(this, e);
this.triggerDomEvent("onMouseLeave", t) ? e.preventDefault() : this.chartInstance !== null && this.chartInstance.hideElements();
},
onChildMouseLeave(e) {
const {
event: t
} = e;
return this.chartInstance && !k(t.relatedTarget, this.element) && this.chartInstance.hideElements(), !1;
},
requiresHandlers(e) {
for (let t = 0; t < e.length; t++) {
const s = e[t];
if (this.hasListener(s))
return !0;
}
return !1;
}
}
});
export {
Q as BaseChart
};