vue-프로젝트 업비트API(3)(11일차)

내일 할일
뷰 캔들 차트 : https://apexcharts.com/vue-chart-demos/candlestick-charts/basic/

주의
라우터 링크 이동은 데이터 전달 안됌 undefined뜸

비트코인 관련 파일 수정

1. 코인 이름, 코인가격, 코인 가격 상승,하락폭 구하는 함수(allData) <- 상위 컴포넌트(bitcoin.vue)

2. 가장 많이 오른 코인 8개, 가장 많이 떨어진 코인8개 구하는 함수(findCoin) <- 하위 컴포넌트(bitcoinFindData.vue)

3. 코인 이름 클릭시 해당 코인 시간별 가격 데이터(갯수 미정) 구하는 함수(chartData)  <- 하위 컴포넌트(bitcoinFindData.vue)

4. (chartData)에서 받은 데이터 차트로 만드는 데이터 <- 최하위 컴포넌트(bitcoinChart)

 

 

하위 컴포넌트(bitcoinFindData.vue) 전체 소스

<template>
  <div class="total">

    <div class="left">
      <table>
        <tr class="up" v-on:click="drawChart(high[1])" v-for="high in highCoin">
          <strong class="name"><a href="#">{{high[3]}}</a></strong>
          <td>{{high[4]}}원</td>
          <td>+{{high[0]}}%</td>
        </tr>
      </table>
    </div>

    <div class="right">
      <table>
        <tr class="down" v-on:click="drawChart(high[1])" v-for="low in lowCoin">
          <strong class="name"><a href="#">{{low[3]}}</a></strong>
          <td>{{low[4]}}원</td>
          <td>-{{low[0]}}%</td>
        </tr>
      </table>
    </div>



  </div>
</template>

<script>
var axios = require('axios')
var cheerio = require('cheerio')
export default {
  props:{
    allCoinKoreaName: {
      type: Array
    },
    allCoinEnglishName: {
      type: Array
    },
    coinCheck: {
      type: Array
    },
    coinPrice: {
      type: Array
    },
    coinChange: {
      type: Array
    },
  },
  data() {
    return {
      totalCheck: false,
      highCoin: [],
      lowCoin: [],

      test: '',
    }
  },
  methods: {
    findCoin() {
      var zip = [];
      var tranlate = /\B(?=(\d{3})+(?!\d))/g // 1000원마다 , 찍어주는식
      for(var i=0; i<this.allCoinEnglishName.length; i++){
        zip.push([(this.coinChange[0][i]*100).toFixed(2), this.allCoinEnglishName[i], this.coinCheck[0][i], this.allCoinKoreaName[i], (this.coinPrice[0][i]).toString().replace(tranlate, ',')])
      }
      zip.sort(function (a, b) { return a[0]-b[0];}).reverse()
      console.log(zip)

      // (조건문)
      // RISE 일때 highCoin
      // FALL 일때 lowCoin
      for(var i=0; i<zip.length; i++) {
        if(zip[i][2] === "RISE") {
          this.highCoin.push([zip[i][0], zip[i][1], zip[i][2], zip[i][3], zip[i][4] ])
        } else {
          this.lowCoin.push([zip[i][0], zip[i][1], zip[i][2], zip[i][3], zip[i][4] ])
        }
      }
      // 7개 이후는 자르기
      this.highCoin.splice(7)
      this.lowCoin.splice(7)
    }, // findData 함수 끝

    drawChart(a) {
      console.log(a)
      axios.get('https://api.upbit.com/v1/candles/minutes/60?market='+a+'&count=10')
      .then(res => {
        console.log(res.data)
      })
    }, // drawChart 끝

  }, // methods 끝
  mounted() {
    this.findCoin()
    this.drawChart()
  }
}
</script>

<style scoped>
  .total{
    display: flex;
  }
  .left{
    width: 50%;
    text-align: left;
    color: red;
  }
  .right{
    width: 50%;
    color: blue
  }
  table {
  border-collapse: separate;
  border-spacing: 10px 5px;
  }
  .name {
    color: black;
  }
  a {
    text-decoration:none;
    color: black
  }
</style>

 

메탈 코인 클릭시 데이터 추출

1. drawChart(코인이름)함수에 인자를 넣어서 태그를 클릭시 데이터를 전달한다

    <div class="left">
      <table>
        <tr class="up" v-on:click="drawChart(high[1])" v-for="high in highCoin">
          <strong class="name"><a href="#">{{high[3]}}</a></strong>
          <td>{{high[4]}}원</td>
          <td>+{{high[0]}}%</td>
        </tr>
      </table>
    </div>

2. drawChart 함수에서 전달받은 인자를 url값에 넣는다

    drawChart(a) {
      console.log(a)
      axios.get('https://api.upbit.com/v1/candles/minutes/60?market='+a+'&count=10')
      .then(res => {
        console.log(res.data)
      })
    }, // drawChart 끝

3. 전달 받은 값을 최하위 컴포넌트에 props로 넘겨서 차트를 그린다