<!-- 이 차트 컴포넌트는 유기되었습니다. -->

<template>
  <div ref="Bubblechart" style="width: 500px; height: 500px;"></div>
</template>
  
  <script>
  import * as am5 from "@amcharts/amcharts5";
  import * as am5xy from "@amcharts/amcharts5/xy";
  import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
  
  export default {
    name: "Bubblechart",
    mounted() {
      this.createChart();
    },
    methods: {
      createChart() {
        // Initialize root
        const root = am5.Root.new(this.$refs.Bubblechart);
  
        // Apply themes
        const myTheme = am5.Theme.new(root);
        myTheme.rule("Grid", ["base"]).setAll({
          strokeOpacity: 0.1,
        });
        root.setThemes([
          am5themes_Animated.new(root),
          myTheme,
        ]);
  
        // Create chart
        let chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: true,
  wheelY: "zoomXY",
  pinchZoomX:true,
  pinchZoomY:true
}));

chart.get("colors").set("step", 2);

// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 50 }),
  tooltip: am5.Tooltip.new(root, {})
}));

let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {}),
  tooltip: am5.Tooltip.new(root, {})
}));

// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series0 = chart.series.push(am5xy.LineSeries.new(root, {
  calculateAggregates: true,
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "y",
  valueXField: "x",
  valueField: "value",
  tooltip: am5.Tooltip.new(root, {
    labelText: "x: {valueX}, y: {valueY}, value: {value}"
  })
}));


// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
  let graphics = am5.Circle.new(root, {
    fill: series0.get("fill"),
  }, circleTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});

// Add heat rule
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series0.set("heatRules", [{
  target: circleTemplate,
  min: 3,
  max: 35,
  dataField: "value",
  key: "radius"
}]);


// Create second series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series1 = chart.series.push(am5xy.LineSeries.new(root, {
  calculateAggregates: true,
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "y2",
  valueXField: "x2",
  valueField: "value",
  tooltip: am5.Tooltip.new(root, {
    labelText: "x: {valueX}, y: {valueY}, value: {value}"
  })
}));

// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let starTemplate = am5.Template.new({});
series1.bullets.push(function() {
  let graphics = am5.Star.new(root, {
    fill: series1.get("fill"),
    spikes: 8,
    innerRadius: am5.percent(70),
  }, starTemplate);
  return am5.Bullet.new(root, {
    sprite: graphics
  });
});


// Add heat rule
// https://www.amcharts.com/docs/v5/concepts/settings/heat-rules/
series1.set("heatRules", [{
  target: starTemplate,
  min: 3,
  max: 50,
  dataField: "value",
  key: "radius"
}]);


series0.strokes.template.set("strokeOpacity", 0);
series1.strokes.template.set("strokeOpacity", 0);

// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
chart.set("cursor", am5xy.XYCursor.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  snapToSeries: [series0, series1]
}));

// Add scrollbars
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
// chart.set("scrollbarX", am5.Scrollbar.new(root, {
//   orientation: "horizontal"
// }));

// chart.set("scrollbarY", am5.Scrollbar.new(root, {
//   orientation: "vertical"
// }));


let data = [{
  "y": 10,
  "x": 14,
  "value": 59,
  "y2": -5,
  "x2": -3,
  "value2": 44
}, {
  "y": 5,
  "x": 3,
  "value": 50,
  "y2": -15,
  "x2": -8,
  "value2": 12
}, {
  "y": -10,
  "x": 8,
  "value": 19,
  "y2": -4,
  "x2": 6,
  "value2": 35
}, {
  "y": -6,
  "x": 5,
  "value": 65,
  "y2": -5,
  "x2": -6,
  "value2": 168
}, {
  "y": 15,
  "x": -4,
  "value": 92,
  "y2": -10,
  "x2": -8,
  "value2": 102
}, {
  "y": 13,
  "x": 1,
  "value": 8,
  "y2": -2,
  "x2": 0,
  "value2": 41
}, {
  "y": 1,
  "x": 6,
  "value": 35,
  "y2": 0,
  "x2": -3,
  "value2": 16
}]

series0.data.setAll(data);
series1.data.setAll(data);


// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series0.appear(1000);
series1.appear(1000);

chart.appear(1000, 100);
      },
    },
  };
  </script>
  
  <style scoped>
  /* Add necessary styles here */
  </style>
  