<template>
  <!-- <div>
        <select name="x-axis" v-model="selectedSubGroup" @change="changeSelectSubGroup">
            <option key="" value="" >sub 선택</option>
            <option v-for="(column, index) in subGroupArr" :key="index" :value="column.index">{{ column.columnNm }}</option>
        </select>
    </div> -->
  <div
    class="chartdiv"
    id="chartdiv"
    ref="chartdiv"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import * as am5percent from "@amcharts/amcharts5/percent";
import * as am5wc from "@amcharts/amcharts5/wc";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import Frozen from "@amcharts/amcharts5/themes/Frozen";
import Dark from "@amcharts/amcharts5/themes/Dark"; // 배경이 어두워야 이쁨
import Dataviz from "@amcharts/amcharts5/themes/Dataviz";
import Kelly from "@amcharts/amcharts5/themes/Kelly";
import Material from "@amcharts/amcharts5/themes/Material";
import Micro from "@amcharts/amcharts5/themes/Micro";
import Moonrise from "@amcharts/amcharts5/themes/Moonrise";
import Spirited from "@amcharts/amcharts5/themes/Spirited";
import chartDataTransform from "./chartDataTransform";

export default {
  props: {
    createDataObj: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      // 가공된 데이터를 담을 배열
      chartJsondData: [],
      // select box에서 선택 된 그룹
      selectedSubGroup: "",

      // group 선택에 따른 변수
      isSelectGroup: false,
      subGroupArr: [],
      groupsResult: [],

      //
      datalist: [],
      chartName: this.createDataObj.chart_knd,
      selectedFieldArr: [],
      isMultiData: this.createDataObj.isMultiData,
      selectedCal: this.createDataObj.chart_cal,
      selectedTheme: "",
      // selectedGroupNm: ,
    };
  },
  components: {},
  methods: {
    // 그룹 선택으로 인한 데이터 필터링 함수
    changeSelectSubGroup: function (event) {
      this.selectedSubGroup = event.target.value;
      // 필터 적용 함수 호출
      const filterDataList = chartDataTransform.setFilteringData(
        this.datalist,
        this.subGroupArr,
        this.selectedSubGroup
      );
      this.transformData(filterDataList);
    },
    changeSubGroupData: function (val) {
      if (Array.isArray(val)) {
        this.subGroupArr = [];
        this.subGroupArr = val
          .map((data) => data.group)
          .filter((value, index, self) => self.indexOf(value) === index)
          .map((column, index) => {
            return {
              index: index,
              columnNm: column,
            };
          });
        // subGroupArr sort 처리
        this.subGroupArr.sort((a, b) =>
          a.columnNm < b.columnNm ? -1 : a.columnNm > b.columnNm ? 1 : 0
        );
      }
    },
    //y 객체 배열 생성
    createYData: function () {
      this.selectedFieldArr = this.createDataObj.valueAxis.map((field) => {
        return {
          valNm: field.columnNm,
          valIndex: field.columnIdx,
        };
      });
    },

    // 데이터 생성 함수
    // dataList를 받아와 차트에 표현할 데이터로 가공
    transformData: function (val) {
      if (val == null) {
        this.chartJsondData = [];
        this.runCreateChart();
        return;
      }
      this.createYData();
      if (this.selectedCal === "default") {
        this.chartJsondData = val;
        this.runCreateChart();
        return;
      }
      // 전체 데이터를 그룹화하여 가공 (All Data)
      this.groupsResult = chartDataTransform.dataGrouping(
        val,
        this.selectedFieldArr
      );
      if (!this.isSelectGroup) {
        // groupSubArr에 group의 key를 중복을 제거하고 담음
        this.changeSubGroupData(this.datalist);
      }
      // 데이터 가공 함수
      this.chartJsondData = chartDataTransform.calculateSetting(
        this.groupsResult,
        this.selectedCal
      );

      this.runCreateChart();
    },

    /**
     * 차트 테마 선택 기능
     */
    choeseTheme: function (choeseTheme) {
      if (choeseTheme === "Frozen") {
        return Frozen;
      } else if (choeseTheme === "Dark") {
        return Dark;
      } else if (choeseTheme === "Dataviz") {
        return Dataviz;
      } else if (choeseTheme === "Kelly") {
        return Kelly;
      } else if (choeseTheme === "Material") {
        return Material;
      } else if (choeseTheme === "Micro") {
        return Micro;
      } else if (choeseTheme === "Moonrise") {
        return Moonrise;
      } else if (choeseTheme === "Spirited") {
        return Spirited;
      }
    },

    initializeChartArea: function () {
      let chartWarp = this.$refs["chartdiv"]; // 차트 상위 div ref 매칭
      if(chartWarp){
        chartWarp.innerHTML = ""; // 차트 상위 div 내용 초기화 (기존 차트 삭제)

        let div = document.createElement("div"); // 차트를 담을 빈 div 생성 (차트 하위 div)
        div.style.width = "100%"; // 차트를 담을 div의 넓이
        div.style.height = "100%"; // 차트를 담을 div의 높이
        chartWarp.appendChild(div); // 차트 상위 div 안에 차트 하위 div를 추가

        let chartArea = am5.Root.new(chartWarp.firstChild);

        let themes = this.choeseTheme(this.selectedTheme);

        if (this.selectedTheme != "") {
          chartArea.setThemes([am5themes_Animated.new(root), themes.new(root)]);
        } else {
          chartArea.setThemes([am5themes_Animated.new(root)]);
        }
      return chartArea;}
    },
    /* Create chart */
    // column chart
    createColumnChart: function () {
      // 필요 데이터 및 변수 선언
      let vm = this;
      let data = vm.chartJsondData;
      let root = vm.initializeChartArea(); // 차트 초기화

      let chartConfig = vm.getChartConfig(vm.chartName);
      let chart = vm.initializeChart(root, chartConfig);
      let series = null;

      let cursor = chart.set(
        "cursor",
        am5xy.XYCursor.new(root, {
          behavior: chartConfig.behavior,
        })
      );
      // 축 라인 숨김
      // cursor.lineY.set("forceHidden", true);
      // cursor.lineX.set("forceHidden", true);

      let categoryRenderer = am5xy[chartConfig.categoryAxisRenderer].new(root, {
        minGridDistance: 30,
        minorGridEnabled: true,
        inversed: chartConfig.categoryInversed,
      });

      // 카테고리 렌더러 옵션 설정
      categoryRenderer.labels.template.setAll({
        rotation: -90,
        centerY: am5.p50,
        centerX: am5.p100,
        paddingRight: 15,
      });
      categoryRenderer.grid.template.setAll({
        stroke: am5.color(0xf15f5f),
        location: 1,
      });

      // 카테고리 축 설정
      let categoryAxis = chart[chartConfig.categoryAxes].push(
        am5xy.CategoryAxis.new(root, {
          maxDeviation: 0.3,
          categoryField: "categoryData",
          renderer: categoryRenderer,
          tooltip: am5.Tooltip.new(root, {}),
        })
      );

      // value 랜더러 설정
      let valueRenderer = am5xy[chartConfig.valueAxisRenderer].new(root, {
        strokeOpacity: 0.1,
      });

      // value 축 설정
      let valueAxis = chart[chartConfig.valueAxes].push(
        am5xy.ValueAxis.new(root, {
          maxDeviation: 0.3,
          renderer: valueRenderer,
        })
      );

      categoryAxis.data.setAll(data);

      // 시리즈 설정
      let seriesConfig = vm.getSeriesConfig(
        vm.chartName,
        categoryAxis,
        valueAxis
      );

      let valuedata =
        vm.selectedFieldArr.length > 0 ? vm.selectedFieldArr[0].valNm : "";

      series = vm.initializeSeries(chart, seriesConfig, valuedata);

      series.columns.template.setAll({
        cornerRadiusTL: 5,
        cornerRadiusTR: 5,
        strokeOpacity: 0,
      });
      series.columns.template.adapters.add("fill", function (fill, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
      });

      series.columns.template.adapters.add("stroke", function (stroke, target) {
        return chart.get("colors").getIndex(series.columns.indexOf(target));
      });

      series.data.setAll(data);
      series.appear(1000);
      root._logo.dispose();
    },

    // line chart
    createLineChart: function () {
      let vm = this;
      let data = vm.chartJsondData;
      let root = vm.initializeChartArea(); // 차트 초기화

      let chartConfig = vm.getChartConfig(vm.chartName);
      let chart = vm.initializeChart(root, chartConfig);
      let series = null;

      let categoryRenderer = am5xy[chartConfig.categoryAxisRenderer].new(root, {
        minorGridEnabled: true,
        minGridDistance: 60,
      });
      categoryRenderer.grid.template.setAll({
        location: 1,
      });

      let categoryAxis = chart[chartConfig.categoryAxes].push(
        am5xy.CategoryAxis.new(root, {
          categoryField: "categoryData",
          renderer: categoryRenderer,
          tooltip: am5.Tooltip.new(root, {}),
        })
      );

      categoryAxis.data.setAll(data);

      let valueRenderer = am5xy[chartConfig.valueAxisRenderer].new(root, {
        strokeOpacity: 0.1,
      });

      let valueAxis = chart[chartConfig.valueAxes].push(
        am5xy.ValueAxis.new(root, {
          min: 0,
          renderer: valueRenderer,
        })
      );

      let cursor = chart.set(
        "cursor",
        am5xy.XYCursor.new(root, {
          behavior: "none",
        })
      );
      cursor.lineY.set("visible", false);

      let seriesConfig = vm.getSeriesConfig(
        vm.chartName,
        categoryAxis,
        valueAxis
      );

      //데이터 없애는 부분 생각 필요
      let valuedata =
        vm.selectedFieldArr.length > 0 ? vm.selectedFieldArr[0].valNm : "value";
      for (let i = 0; i < vm.selectedFieldArr.length; i++) {
        series = vm.makeSeries(
          root,
          chart,
          vm.selectedFieldArr[i].valNm,
          seriesConfig
        );

        // 노드 표시
        if (vm.chartName == "node_line_chart") {
          series.bullets.push(function (root) {
            return am5xy.AxisBullet.new(root, {
              location: 0.5,
              sprite: am5.Circle.new(root, {
                radius: 5,
                fill: am5.color(0xff0000),
              }),
            });
          });
        }

        // 그래프 배경 색상
        if (vm.chartName == "liin_chart_back") {
          series.fills.template.setAll({
            fillOpacity: 0.2,
            visible: true,
          });
        }

        series.data.setAll(data);
      }

      series.appear(1000, 100);

      root._logo.dispose();
    },

    // pie_chart chart
    createPieChart: function () {
      let data = this.chartJsondData;

      let root = this.initializeChartArea(); // 차트 초기화

      let chart = null;
      let series = null;

      // Create chart
      let startAngle = null;
      let endAngle = null;
      let innerRadius = null;

      if (this.chartName == "semicircle_chart") {
        startAngle = 180;
        endAngle = 360;
      }

      if (this.chartName == "dounet_chart") {
        innerRadius = am5.percent(50);
      }

      chart = root.container.children.push(
        am5percent.PieChart.new(root, {
          startAngle: startAngle,
          endAngle: 360,
          innerRadius: innerRadius,
        })
      );

      let valuedata =
        this.selectedFieldArr.length > 0
          ? this.selectedFieldArr[0].valNm
          : "value";

      series = chart.series.push(
        am5percent.PieSeries.new(root, {
          valueField: valuedata,
          categoryField: "categoryData",
          startAngle: this.chartName == "semicircle_chart" ? 180 : null,
          endAngle: 360,
        })
      );

      series.states.create("hidden", {
        endAngle: -90,
      });

      series.data.setAll(data);

      series.appear(1000, 100);

      root._logo.dispose();
    },

    // Clustered data chart
    createClusteredChart: function () {
      let vm = this;
      let root = this.initializeChartArea(); // 차트 초기화'
      let dataVal = this.chartJsondData;
      let chartConfig = this.getChartConfig(vm.chartName);
      let chart = this.initializeChart(root, chartConfig);

      // Add legend
      let legend = chart.children.push(
        am5.Legend.new(root, {
          centerX: am5.p50,
          x: am5.p50,
        })
      );

      let categoryRenderer = am5xy[chartConfig.categoryAxisRenderer].new(root, {
        cellStartLocation: 0.1,
        cellEndLocation: 0.9,
        minorGridEnabled: true,
      });

      let categoryAxis = chart.xAxes.push(
        am5xy.CategoryAxis.new(root, {
          categoryField: "categoryData",
          renderer: categoryRenderer,
          tooltip: am5.Tooltip.new(root, {}),
        })
      );

      categoryRenderer.grid.template.setAll({
        location: 1,
      });

      categoryAxis.data.setAll(dataVal);

      // value 랜더러 설정
      let valueRenderer = am5xy[chartConfig.valueAxisRenderer].new(root, {
        strokeOpacity: 0.1,
      });

      let valueAxis = chart[chartConfig.valueAxes].push(
        am5xy.ValueAxis.new(root, {
          renderer: valueRenderer,
        })
      );

      let seriesConfig = vm.getSeriesConfig(
        vm.chartName,
        categoryAxis,
        valueAxis
      );
      let series = null;
      for (let i = 0; i < vm.selectedFieldArr.length; i++) {
        series = vm.makeSeries(
          root,
          chart,
          vm.selectedFieldArr[i].valNm,
          seriesConfig
        );

        series.data.setAll(dataVal);
      }

      chart.appear(1000, 300);

      root._logo.dispose(); //amChart 로고 삭제
    },
    createWordChart: function () {
      let vm = this;
      let root = vm.initializeChartArea(); // 차트 초기화

      let valuedata = vm.selectedFieldArr.length > 0 ? vm.selectedFieldArr[0].valNm : "";

      let series = root.container.children.push(
        am5wc.WordCloud.new(root, {
          categoryField: "categoryData",
          valueField: valuedata,
          maxFontSize: am5.percent(15),
        })
      );

      // Configure labels
      series.labels.template.setAll({
        fontFamily: "Courier New",
      });

      series.data.setAll(this.chartJsondData);
      root._logo.dispose();
    },
    // 음수 차트 수정 필요(아직 합치지않음)
    createNagativeChart: function () {
      let vm = this;
      let root = vm.initializeChartArea(); // 차트 초기화

      root._logo.dispose();

      if (vm.selectedFieldArr.length < 2) {
        return;
      }

      chartDataTransform.convertValuesToNegative(
        vm.chartJsondData,
        vm.selectedFieldArr[0].valNm
      );

      let chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          panX: false,
          panY: false,
          wheelX: "panX",
          wheelY: "zoomX",
          layout: root.verticalLayout,
          arrangeTooltips: false,
          paddingLeft: 0,
          paddingRight: 10,
        })
      );

      // Use only absolute numbers
      chart.getNumberFormatter().set("numberFormat", "#.#s");

      let legend = chart.children.push(
        am5.Legend.new(root, {
          centerX: am5.p50,
          x: am5.p50,
        })
      );

      let yAxis = chart.yAxes.push(
        am5xy.CategoryAxis.new(root, {
          categoryField: "categoryData",
          renderer: am5xy.AxisRendererY.new(root, {
            inversed: true,
            cellStartLocation: 0.1,
            cellEndLocation: 0.9,
            minorGridEnabled: true,
            minGridDistance: 20,
          }),
        })
      );

      yAxis.data.setAll(this.chartJsondData);

      let xAxis = chart.xAxes.push(
        am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererX.new(root, {
            minGridDistance: 60,
            strokeOpacity: 0.1,
          }),
        })
      );

      function createSeries(
        field,
        labelCenterX,
        pointerOrientation,
        rangeValue
      ) {
        let series = chart.series.push(
          am5xy.ColumnSeries.new(root, {
            xAxis: xAxis,
            yAxis: yAxis,
            valueXField: field,
            categoryYField: "categoryData",
            sequencedInterpolation: true,
            clustered: false,
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: pointerOrientation,
              labelText: "{categoryY}: {valueX}",
            }),
          })
        );

        series.columns.template.setAll({
          height: am5.p100,
          strokeOpacity: 0,
          fillOpacity: 0.8,
        });

        series.bullets.push(function () {
          return am5.Bullet.new(root, {
            locationX: 1,
            locationY: 0.5,
            sprite: am5.Label.new(root, {
              centerY: am5.p50,
              text: "{valueX}",
              populateText: true,
              centerX: labelCenterX,
            }),
          });
        });

        series.data.setAll(vm.chartJsondData);
        series.appear();

        let rangeDataItem = xAxis.makeDataItem({
          value: rangeValue,
        });
        xAxis.createAxisRange(rangeDataItem);
        rangeDataItem.get("grid").setAll({
          strokeOpacity: 1,
          stroke: series.get("stroke"),
        });

        let label = rangeDataItem.get("label");
        label.setAll({
          text: field.toUpperCase(),
          fontSize: "1.1em",
          fill: series.get("stroke"),
          paddingTop: 10,
          isMeasured: false,
          centerX: labelCenterX,
        });
        label.adapters.add("dy", function () {
          return -chart.plotContainer.height();
        });
        return series;
      }

      createSeries(vm.selectedFieldArr[0].valNm, am5.p100, "right", -3);
      createSeries(vm.selectedFieldArr[1].valNm, 0, "left", 4);

      let cursor = chart.set(
        "cursor",
        am5xy.XYCursor.new(root, {
          behavior: "zoomY",
        })
      );
      cursor.lineY.set("forceHidden", true);
      cursor.lineX.set("forceHidden", true);

      chart.appear(1000, 100);
      root._logo.dispose(); //amChart 로고 삭제
    },
    // 막대 선 차트 (수정 필요)
    createColAndLineChart: function () {
      let vm = this;
      let data = vm.chartJsondData;
      let root = vm.initializeChartArea(); // 차트 초기화

      root._logo.dispose(); //amChart 로고 삭제

      if (data.length == 0) {
        return;
      }

      let income = Object.keys(data[0])[1];
      let expenses = Object.keys(data[0])[2];

      let chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          panX: false,
          panY: false,
          wheelX: "panX",
          wheelY: "zoomX",
          paddingLeft: 0,
          layout: root.verticalLayout,
        })
      );

      let xRenderer = am5xy.AxisRendererX.new(root, {
        minorGridEnabled: true,
        minGridDistance: 60,
      });
      let xAxis = chart.xAxes.push(
        am5xy.CategoryAxis.new(root, {
          categoryField: "categoryData",
          renderer: xRenderer,
          tooltip: am5.Tooltip.new(root, {}),
        })
      );
      xRenderer.grid.template.setAll({
        location: 1,
      });

      xAxis.data.setAll(data);

      let yAxis = chart.yAxes.push(
        am5xy.ValueAxis.new(root, {
          min: 0,
          extraMax: 0.1,
          renderer: am5xy.AxisRendererY.new(root, {
            strokeOpacity: 0.1,
          }),
        })
      );

      let series1 = chart.series.push(
        am5xy.ColumnSeries.new(root, {
          name: income,
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: income,
          categoryXField: "categoryData",
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} in {categoryX}: {valueY} {info}",
          }),
        })
      );

      series1.columns.template.setAll({
        tooltipY: am5.percent(10),
        templateField: "columnSettings",
      });

      series1.data.setAll(data);

      let series2 = chart.series.push(
        am5xy.LineSeries.new(root, {
          name: expenses,
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: expenses,
          categoryXField: "categoryData",
          tooltip: am5.Tooltip.new(root, {
            pointerOrientation: "horizontal",
            labelText: "{name} in {categoryX}: {valueY} {info}",
          }),
        })
      );

      series2.strokes.template.setAll({
        strokeWidth: 3,
        templateField: "strokeSettings",
      });

      series2.data.setAll(data);

      series2.bullets.push(function () {
        return am5.Bullet.new(root, {
          sprite: am5.Circle.new(root, {
            strokeWidth: 3,
            stroke: series2.get("stroke"),
            radius: 5,
            fill: root.interfaceColors.get("background"),
          }),
        });
      });

      chart.set("cursor", am5xy.XYCursor.new(root, {}));

      series1.appear(1000);
      chart.appear(1000, 300);
      root._logo.dispose(); //amChart 로고 삭제
    },
    // Create chart
    getChartConfig: function (chartName) {
      // 차트에 따라 설정이 달라져야함
      let axis = true;
      if (
        chartName == "column_chart_h" ||
        chartName == "clustered_chart_h" ||
        chartName == "STACK_ROW"
      ) {
        axis = false;
      }

      return {
        // 차트 축 설정
        categoryAxisRenderer: axis ? "AxisRendererX" : "AxisRendererY",
        valueAxisRenderer: axis ? "AxisRendererY" : "AxisRendererX",
        categoryAxes: axis ? "xAxes" : "yAxes",
        valueAxes: axis ? "yAxes" : "xAxes",
        categoryInversed: axis ? false : true,
        // 차트 이동 및 확대/축소 설정
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: axis ? "panY" : "zoomX",
        behavior: axis ? "none" : "zoomY",
      };
    },
    initializeChart: function (root, config) {
      console.log(root.container.children);
      return root.container.children.push(
        am5xy.XYChart.new(root, {
          panX: config.panX,
          panY: config.panY,
          wheelX: config.wheelX,
          wheelY: config.wheelY,
        })
      );
    },

    // Create series
    getSeriesConfig: function (chartName, categoryAxis, valueAxis) {
      // 차트에 따라 설정이 달라져야함
      let axis = true;
      let chartNm = "ColumnSeries";
      if (
        chartName == "column_chart_h" ||
        chartName == "clustered_chart_h" ||
        chartName == "STACK_ROW"
      ) {
        axis = false;
      }
      if (
        chartName == "line_chart" ||
        chartName == "node_line_chart" ||
        chartName == "liin_chart_back"
      ) {
        chartNm = "LineSeries";
      }
      let isStack = false;

      if (
        this.chartName === "stacked_column_chart" ||
        this.chartName === "STACK_ROW"
      ) {
        isStack = true;
      }

      return {
        chartNm: chartNm,
        isStack: isStack,
        xAxis: axis ? categoryAxis : valueAxis,
        yAxis: axis ? valueAxis : categoryAxis,
        categoryField: axis ? "categoryXField" : "categoryYField",
        valueField: axis ? "valueYField" : "valueXField",
        categoryXY: axis ? "categoryX" : "categoryY",
        valueXY: axis ? "valueY" : "valueX",
        tooltipText: axis ? "{valueY}" : "{valueX}",
      };
    },
    initializeSeries: function (chart, seriesConfig, valuedata) {
      // 차트에 새로운 시리즈를 생성하여 추가
      let series = chart.series.push(
        am5xy[seriesConfig.chartNm].new(chart.root, {
          name: valuedata, // 이 부분은 valuedata를 이름으로 사용하고 있으나, 이는 데이터의 의도에 따라 다를 수 있습니다.
          stacked: seriesConfig.isStack,
          xAxis: seriesConfig.xAxis,
          yAxis: seriesConfig.yAxis,
          [seriesConfig.valueField]: valuedata,
          [seriesConfig.categoryField]: "categoryData",
          tooltip: am5.Tooltip.new(chart.root, {
            labelText: seriesConfig.tooltipText,
          }),
        })
      );

      return series; // 생성된 시리즈 객체를 반환
    },
    // Add series
    // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
    makeSeries: function (root, chart, name, seriesConfig) {
      let series = chart.series.push(
        am5xy[seriesConfig.chartNm].new(root, {
          name: name,
          stacked: seriesConfig.isStack,
          xAxis: seriesConfig.xAxis,
          yAxis: seriesConfig.yAxis,
          [seriesConfig.valueField]: name,
          [seriesConfig.categoryField]: "categoryData",
          tooltip: am5.Tooltip.new(chart.root, {
            labelText: seriesConfig.tooltipText,
          }),
        })
      );

      return series;
    },

    // 차트 생성 실행 함수
    runCreateChart: function () {
      if (
        this.chartName === "column_chart_v" ||
        this.chartName === "column_chart_h"
      ) {
        this.createColumnChart();
      } else if (
        this.chartName === "line_chart" ||
        this.chartName === "node_line_chart" ||
        this.chartName === "liin_chart_back"
      ) {
        this.createLineChart();
      } else if (
        this.chartName === "pie_chart" ||
        this.chartName === "dounet_chart" ||
        this.chartName === "semicircle_chart"
      ) {
        this.createPieChart();
      } else if (
        this.chartName === "clustered_chart_v" ||
        this.chartName === "clustered_chart_h" ||
        this.chartName === "stacked_column_chart" ||
        this.chartName === "STACK_ROW"
      ) {
        this.createClusteredChart();
      } else if (this.chartName === "word_chart") {
        this.createWordChart();
      } else if (this.chartName === "stacked_bar_chart") {
        this.createNagativeChart();
      } else if (this.chartName === "mix_chart") {
        this.createColAndLineChart();
      }
    },
  },
  watch: {
    createDataObj: {
      handler: function (newVal, oldVal) {
        this.datalist = newVal.data_list;
        this.chartName = newVal.chart_knd;
        this.isMultiData = newVal.multidata_use_yn;
        this.selectedCal = newVal.chart_cal;
        this.transformData(this.datalist);
      },
      deep: true,
    },
  },
  mounted() {
    this.datalist = this.createDataObj.data_list;
    this.chartName = this.createDataObj.chart_knd;
    this.isMultiData = this.createDataObj.multidata_use_yn;
    this.selectedCal = this.createDataObj.chart_cal;
    this.transformData(this.datalist);
  },
};
</script>

<style scoped>
#chartdiv {
  width: 100%;
  height: 500px;
}
button {
  margin: 10px;
  background-color: antiquewhite;
  border-radius: 10px;
}
</style>