@zhsz/cool-design-dv
Version:
90 lines (89 loc) • 3.08 kB
JavaScript
import { defineComponent, inject, getCurrentInstance, ref, watch, onMounted, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, toHandlers } from "vue";
import Loading from "../dv-loading/index.mjs";
import { merge } from "lodash-es";
import { dvPageSymbols } from "../../symbols/index.mjs";
import { useChart } from "../../hooks/useChart.mjs";
import { addResizeListener, removeResizeListener } from "../../utils/resize-event.mjs";
import Box from "../dv-box/index.mjs";
import MyChart from "../chart/chart-my/index.mjs";
import "../chart/chart-bar/index.mjs";
import "../chart/chart-line/index.mjs";
import setExtend from "../chart/utils/extend.mjs";
const __default__ = defineComponent({
name: "DvBar",
inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: {
debug: Boolean,
options: [Object, Function],
extend: {
type: [Object, Function]
}
},
emits: ["resize"],
setup(__props, { emit: __emit }) {
var _a;
const props = __props;
const page = inject(dvPageSymbols, null);
const instance = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
const currentOptions = ref();
const emits = __emit;
const { resize, width, height, loading, theme, chartData } = useChart(
emits,
props,
page
);
function mergeOptions(data) {
const opts = typeof props.options === "function" ? props.options(data) : props.options || {};
setExtend(opts, props.extend || {});
currentOptions.value = Object.freeze(merge({}, currentOptions.value, opts));
}
watch(
() => chartData.value,
(val) => {
mergeOptions(val);
},
{ immediate: true }
);
watch(
() => props.options,
() => {
mergeOptions(chartData.value);
}
);
onMounted(() => {
resize(instance == null ? void 0 : instance.$el);
addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
onBeforeUnmount(() => {
removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Box), mergeProps({
class: "my-dv-chart",
"default-width": "400px",
"default-height": "400px"
}, _ctx.$attrs), {
default: withCtx(() => [
unref(loading) ? (openBlock(), createBlock(unref(Loading), {
key: 0,
zoom: 0.6
})) : (openBlock(), createBlock(unref(MyChart), mergeProps({ key: 1 }, toHandlers(_ctx.$attrs), {
debug: __props.debug,
theme: unref(theme),
options: currentOptions.value,
extend: __props.extend,
width: `${unref(width)}px`,
height: `${unref(height)}px`
}), null, 16, ["debug", "theme", "options", "extend", "width", "height"]))
]),
_: 1
}, 16);
};
}
});
export {
_sfc_main as default
};