@zhsz/cool-design-dv/lib/packages/dv-chart-bar/Bar.vue.js

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index$2 = require("../dv-loading/index.js");
const lodashEs = require("lodash-es");
const graphic = require("echarts/lib/util/graphic");
const index = require("../../symbols/index.js");
const useChart = require("../../hooks/useChart.js");
const resizeEvent = require("../../utils/resize-event.js");
const index$1 = require("../dv-box/index.js");
require("../chart/chart-my/index.js");
const index$3 = require("../chart/chart-bar/index.js");
require("../chart/chart-line/index.js");
const __default__ = vue.defineComponent({
  name: "DvBar",
  inheritAttrs: false
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    columns: Array,
    rows: Array,
    loader: Function,
    settings: Object,
    extend: {
      type: [Object, Function]
    },
    debug: Boolean,
    rotate: Boolean,
    cross: Boolean,
    gradient: Boolean,
    legend: Boolean
  },
  emits: ["resize"],
  setup(__props, { emit: __emit }) {
    var _a;
    const props = __props;
    const page = vue.inject(index.dvPageSymbols, null);
    const instance = (_a = vue.getCurrentInstance()) == null ? void 0 : _a.proxy;
    const mergeExtend = vue.computed(() => {
      var _a2;
      const extend = typeof props.extend === "function" ? props.extend() : props.extend;
      const yAxis = ((_a2 = props == null ? void 0 : props.settings) == null ? void 0 : _a2.direction) === "y";
      return Object.freeze(
        lodashEs.merge(
          {
            color: props.gradient ? createLinearGradient() : void 0,
            legend: props.legend ? {
              top: 20,
              right: 20,
              itemWidth: 10,
              itemHeight: 10,
              icon: "rect"
            } : {
              show: false
            },
            grid: {
              top: props.legend ? 50 : 30,
              right: 30,
              bottom: 50,
              left: 60
            },
            series: {
              barCategoryGap: "50%"
            },
            xAxis: {
              axisLabel: {
                interval: 0,
                rotate: props.rotate && !yAxis ? 45 : 0
              }
            },
            yAxis: {
              axisLabel: {
                interval: 0,
                rotate: props.rotate && yAxis ? 45 : 0
              }
            },
            tooltip: {
              axisPointer: {
                type: props.cross ? "cross" : "item"
              }
            }
          },
          extend
        )
      );
    });
    const emits = __emit;
    const { resize, width, height, loading, theme, chartData } = useChart.useChart(
      emits,
      props,
      page
    );
    function createLinearGradient() {
      var _a2, _b;
      const colors = ((_a2 = page == null ? void 0 : page.settings.value) == null ? void 0 : _a2.colors) || [];
      const direction = ((_b = props.settings) == null ? void 0 : _b.direction) === "y" ? [1, 0, 0, 0] : [0, 0, 0, 1];
      return colors.map((color, i) => {
        const target = colors[(i + 1) % colors.length];
        return new graphic.LinearGradient(...direction, [
          { offset: 0, color },
          { offset: 1, color: target }
        ]);
      });
    }
    vue.onMounted(() => {
      resize(instance == null ? void 0 : instance.$el);
      resizeEvent.addResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    vue.onBeforeUnmount(() => {
      resizeEvent.removeResizeListener(instance == null ? void 0 : instance.$el, () => resize(instance == null ? void 0 : instance.$el));
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index$1.default), vue.mergeProps({
        class: "my-dv-chart my-dv-bar",
        "default-width": "600px",
        "default-height": "400px"
      }, _ctx.$attrs), {
        default: vue.withCtx(() => [
          vue.unref(loading) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.default), {
            key: 0,
            zoom: 0.6
          })) : (vue.openBlock(), vue.createBlock(vue.unref(index$3.default), vue.mergeProps({ key: 1 }, _ctx.$attrs, {
            debug: __props.debug,
            theme: vue.unref(theme),
            settings: __props.settings,
            extend: mergeExtend.value,
            width: `${vue.unref(width)}px`,
            height: `${vue.unref(height)}px`,
            data: vue.unref(chartData)
          }), null, 16, ["debug", "theme", "settings", "extend", "width", "height", "data"]))
        ]),
        _: 1
      }, 16);
    };
  }
});
exports.default = _sfc_main;