@shopware-ag/meteor-component-library/dist/common/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';
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
const vue = require("vue");
const object = require("../object-deb13c0b.js");
const index = require("../index-d39b6c26.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../index-ab705c2a.js");
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__ */ vue.defineComponent({
  __name: "mt-chart",
  props: {
    series: {},
    options: { default: () => ({}) },
    type: { default: () => "area" },
    width: { default: () => "100%" },
    height: { default: () => "300px" }
  },
  setup(__props) {
    const props = __props;
    const chartContainer = index.templateRef("chartContainer");
    const chart = vue.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;
      }
    };
    vue.onMounted(init);
    vue.onBeforeUnmount(destroy);
    const chartOptions = vue.computed(() => {
      const options = props.options;
      const defaultOptions = getDefaultOptions(props.type);
      const mergedOptions = object.deepMergeObjects(defaultOptions, options);
      return {
        ...mergedOptions,
        chart: {
          type: props.type,
          width: props.width,
          height: props.height,
          ...mergedOptions.chart
        }
      };
    });
    vue.watch(
      () => props.options,
      () => {
        if (chart.value) {
          chart.value.updateOptions(chartOptions.value);
        }
      },
      { deep: true }
    );
    vue.watch(
      () => props.series,
      () => {
        if (chart.value) {
          chart.value.updateSeries(props.series);
        }
      },
      { deep: true }
    );
    vue.watch([() => props.type, () => props.width, () => props.height], init);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "chartContainer",
        ref: chartContainer,
        class: vue.normalizeClass(`mt-chart mt-chart-${props.type}`),
        style: vue.normalizeStyle({ width: props.width, height: props.height })
      }, null, 6);
    };
  }
});
const mtChart_vue_vue_type_style_index_0_scoped_41d48e3c_lang = "";
const mtChart = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-41d48e3c"]]);
module.exports = mtChart;
//# sourceMappingURL=MtChart.js.map