@shopware-ag/meteor-component-library/dist/esm/MtChart.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-chart.css';
import { defineComponent, ref, onMounted, onBeforeUnmount, computed, watch, openBlock, createElementBlock, normalizeClass, normalizeStyle } from "vue";
import { d as deepMergeObjects } from "../object-e11d5dd3.mjs";
import { t as templateRef } from "../index-c0f92ea5.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../index-221bad05.mjs";
function getDefaultOptions(type) {
  const options = createOptions();
  return options[type] ?? {};
}
function createOptions() {
  return {
    area: {
      noData: {
        align: "center",
        verticalAlign: "middle"
      },
      stroke: {
        curve: "straight",
        width: 2
      },
      chart: {
        toolbar: { show: false },
        zoom: { enabled: false },
        animations: { enabled: false }
      },
      xaxis: {
        tooltip: { enabled: false },
        crosshairs: {
          show: true,
          width: 1,
          stroke: {
            color: "#2d2e32",
            width: 1,
            dashArray: 0
          }
        },
        axisBorder: {
          color: "var(--color-border-primary-default)"
        },
        axisTicks: {
          color: "var(--color-border-primary-default)"
        }
      },
      grid: {
        show: true,
        borderColor: "var(--color-border-primary-default)"
      },
      colors: ["#0870ff"],
      fill: {
        type: "gradient",
        gradient: {
          type: "vertical",
          opacityFrom: 0.7,
          opacityTo: 0,
          stops: [0, 100]
        }
      },
      dataLabels: { enabled: false }
    }
  };
}
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "mt-chart",
  props: {
    series: {},
    options: { default: () => ({}) },
    type: { default: () => "area" },
    width: { default: () => "100%" },
    height: { default: () => "300px" }
  },
  setup(__props) {
    const props = __props;
    const chartContainer = templateRef("chartContainer");
    const chart = ref();
    const init = async () => {
      const ApexCharts = (await import("apexcharts")).default;
      if (!chartContainer.value) {
        throw new Error("Chart container is not defined");
      }
      if (!chartOptions.value) {
        throw new Error("Chart options are not defined");
      }
      if (chart.value) {
        chart.value.destroy();
      }
      chart.value = new ApexCharts(chartContainer.value, { ...chartOptions.value, series: [] });
      chart.value.render();
      chart.value.updateSeries(props.series);
    };
    const destroy = () => {
      if (chart.value) {
        chart.value.destroy();
        chart.value = void 0;
      }
    };
    onMounted(init);
    onBeforeUnmount(destroy);
    const chartOptions = computed(() => {
      const options = props.options;
      const defaultOptions = getDefaultOptions(props.type);
      const mergedOptions = deepMergeObjects(defaultOptions, options);
      return {
        ...mergedOptions,
        chart: {
          type: props.type,
          width: props.width,
          height: props.height,
          ...mergedOptions.chart
        }
      };
    });
    watch(
      () => props.options,
      () => {
        if (chart.value) {
          chart.value.updateOptions(chartOptions.value);
        }
      },
      { deep: true }
    );
    watch(
      () => props.series,
      () => {
        if (chart.value) {
          chart.value.updateSeries(props.series);
        }
      },
      { deep: true }
    );
    watch([() => props.type, () => props.width, () => props.height], init);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "chartContainer",
        ref: chartContainer,
        class: normalizeClass(`mt-chart mt-chart-${props.type}`),
        style: normalizeStyle({ width: props.width, height: props.height })
      }, null, 6);
    };
  }
});
const mtChart_vue_vue_type_style_index_0_scoped_41d48e3c_lang = "";
const mtChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-41d48e3c"]]);
export {
  mtChart as default
};
//# sourceMappingURL=MtChart.js.map