diff --git a/Frontend/functions/test/index.js b/Frontend/functions/test/index.js
index bab8c805a253f4a569a311bc3c10780216173e6e..bfcab1a32ac63a849de625436c8a52e1eab7ea55 100644
--- a/Frontend/functions/test/index.js
+++ b/Frontend/functions/test/index.js
@@ -36,6 +36,7 @@ app.post('/api', function (req, res, next) {
querylist += query;
}
+ querylist += `select close,date from ckospi_index where date between '${date}' and '2019-11-20';`
connection.query(querylist,function(req,result){
console.log(result);
res.send(result);
diff --git a/Frontend/src/Layout/Components/Analytics/SS_chart1.js b/Frontend/src/Layout/Components/Analytics/SS_chart1.js
new file mode 100644
index 0000000000000000000000000000000000000000..793028b247899c15a4dc931048b1256ffe99aa10
--- /dev/null
+++ b/Frontend/src/Layout/Components/Analytics/SS_chart1.js
@@ -0,0 +1,105 @@
+//Importing Line class from the vue-chartjs wrapper
+import {Line,mixins} from 'vue-chartjs'
+const { reactiveProp } = mixins
+//Exporting this so it can be used in other components
+export default {
+ extends: Line,
+ data() {
+ return {
+
+ datacollection: {
+ //Data to be represented on x-axis
+
+ //labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',],
+ labels : this.$store.state.SS_chart_labels,
+ datasets: [
+ {
+ label: '내 포트폴리오',
+ fill: true,
+ lineTension: 0.5,
+ backgroundColor: 'rgba(247, 185, 36, 0.2)',
+ borderColor: '#f7b924',
+ borderCapStyle: 'round',
+ borderDash: [],
+ borderWidth: 4,
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'round',
+ pointBorderColor: '#f7b924',
+ pointBackgroundColor: '#ffffff',
+ pointBorderWidth: 5,
+ pointHoverRadius: 6,
+ pointHoverBackgroundColor: '#ffffff',
+ pointHoverBorderColor: '#f7b924',
+ pointHoverBorderWidth: 2,
+ pointRadius: 4,
+ pointHitRadius: 10,
+ //data: [65, 59, 80, 81, 46, 55, 38, 59, 80, 72]
+ data : this.$store.state.SS_chart_data2
+ },
+ {
+ label: '코스피 인덱스 추종',
+ fill: true,
+ lineTension: 0.5,
+ backgroundColor: '#05CBE1',
+ borderColor: '#f7b924',
+ borderCapStyle: 'round',
+ borderDash: [],
+ borderWidth: 4,
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'round',
+ pointBorderColor: '#f7b924',
+ pointBackgroundColor: '#ffffff',
+ pointBorderWidth: 5,
+ pointHoverRadius: 6,
+ pointHoverBackgroundColor: '#ffffff',
+ pointHoverBorderColor: '#f7b924',
+ pointHoverBorderWidth: 2,
+ pointRadius: 4,
+ pointHitRadius: 10,
+ //data: [65, 59, 80, 81, 46, 55, 38, 59, 80, 72]
+ data : this.$store.state.SS_chart_data1
+ }
+ ]
+ },
+ //Chart.js options that controls the appearance of the chart
+ options: {
+ layout: {
+ padding: {
+ left: 0,
+ right: 8,
+ top: 0,
+ bottom: 0
+ }
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ display: true,
+ beginAtZero: false
+ },
+ gridLines: {
+ display: false
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ display: false
+ },
+ gridLines: {
+ display: false
+ }
+ }]
+ },
+ legend: {
+ display: false
+ },
+ responsive: true,
+ maintainAspectRatio: true
+ }
+ }
+ },
+ mounted() {
+ //renderChart function renders the chart with the datacollection and options object.
+ this.renderChart(this.datacollection, this.options)
+ },
+}
\ No newline at end of file
diff --git a/Frontend/src/Layout/Components/Analytics/chart2.js b/Frontend/src/Layout/Components/Analytics/chart2.js
new file mode 100644
index 0000000000000000000000000000000000000000..4c2ccd7a79752675a7cf26515800a6f04be449cb
--- /dev/null
+++ b/Frontend/src/Layout/Components/Analytics/chart2.js
@@ -0,0 +1,79 @@
+//Importing Line class from the vue-chartjs wrapper
+import {Line} from 'vue-chartjs'
+
+//Exporting this so it can be used in other components
+export default {
+ extends: Line,
+ data() {
+ return {
+
+ datacollection: {
+ //Data to be represented on x-axis
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',],
+ datasets: [
+ {
+ label: 'My First dataset',
+ fill: true,
+ lineTension: 0.5,
+ backgroundColor: 'rgba(48, 177, 255, 0.2)',
+ borderColor: '#30b1ff',
+ borderCapStyle: 'round',
+ borderDash: [],
+ borderWidth: 4,
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'round',
+ pointBorderColor: '#30b1ff',
+ pointBackgroundColor: '#ffffff',
+ pointBorderWidth: 5,
+ pointHoverRadius: 6,
+ pointHoverBackgroundColor: '#ffffff',
+ pointHoverBorderColor: '#30b1ff',
+ pointHoverBorderWidth: 2,
+ pointRadius: 4,
+ pointHitRadius: 10,
+ data: [46, 55, 59, 80, 81, 38, 65, 59, 80,]
+ }
+ ]
+ },
+ //Chart.js options that controls the appearance of the chart
+ options: {
+ layout: {
+ padding: {
+ left: 0,
+ right: 8,
+ top: 0,
+ bottom: 0
+ }
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ display: false,
+ beginAtZero: true
+ },
+ gridLines: {
+ display: false
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ display: false
+ },
+ gridLines: {
+ display: false
+ }
+ }]
+ },
+ legend: {
+ display: false
+ },
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ }
+ },
+ mounted() {
+ //renderChart function renders the chart with the datacollection and options object.
+ this.renderChart(this.datacollection, this.options)
+ }
+}
\ No newline at end of file
diff --git a/Frontend/src/Layout/Components/Analytics/chart3.js b/Frontend/src/Layout/Components/Analytics/chart3.js
new file mode 100644
index 0000000000000000000000000000000000000000..baadfe9997e82bfb055e498497ca9ecc54922458
--- /dev/null
+++ b/Frontend/src/Layout/Components/Analytics/chart3.js
@@ -0,0 +1,79 @@
+//Importing Line class from the vue-chartjs wrapper
+import {Line} from 'vue-chartjs'
+
+//Exporting this so it can be used in other components
+export default {
+ extends: Line,
+ data() {
+ return {
+
+ datacollection: {
+ //Data to be represented on x-axis
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',],
+ datasets: [
+ {
+ label: 'My First dataset',
+ fill: true,
+ lineTension: 0.5,
+ backgroundColor: 'rgba(86, 196, 121, 0.2)',
+ borderColor: '#56c479',
+ borderCapStyle: 'round',
+ borderDash: [],
+ borderWidth: 4,
+ borderDashOffset: 0.0,
+ borderJoinStyle: 'round',
+ pointBorderColor: '#56c479',
+ pointBackgroundColor: '#ffffff',
+ pointBorderWidth: 5,
+ pointHoverRadius: 6,
+ pointHoverBackgroundColor: '#ffffff',
+ pointHoverBorderColor: '#56c479',
+ pointHoverBorderWidth: 2,
+ pointRadius: 4,
+ pointHitRadius: 10,
+ data: [65, 59, 80, 81, 55, 38, 59, 80, 46]
+ }
+ ]
+ },
+ //Chart.js options that controls the appearance of the chart
+ options: {
+ layout: {
+ padding: {
+ left: 0,
+ right: 8,
+ top: 0,
+ bottom: 0
+ }
+ },
+ scales: {
+ yAxes: [{
+ ticks: {
+ display: false,
+ beginAtZero: true
+ },
+ gridLines: {
+ display: false
+ }
+ }],
+ xAxes: [{
+ ticks: {
+ display: false
+ },
+ gridLines: {
+ display: false
+ }
+ }]
+ },
+ legend: {
+ display: false
+ },
+ responsive: true,
+ maintainAspectRatio: false
+ }
+ }
+ },
+ mounted() {
+ //renderChart function renders the chart with the datacollection and options object.
+ this.renderChart(this.datacollection, this.options)
+ }
+}
\ No newline at end of file
diff --git a/Frontend/src/Layout/Components/StrategySimulator.vue b/Frontend/src/Layout/Components/StrategySimulator.vue
index ca10539e06e8073fc42b4df3611cf5eb5c0bccf0..80b87476c0afb6c013aba775965f8744d023c1ca 100644
--- a/Frontend/src/Layout/Components/StrategySimulator.vue
+++ b/Frontend/src/Layout/Components/StrategySimulator.vue
@@ -57,7 +57,7 @@
</div>
</div>
<div class="widget-chart-wrapper he-auto opacity-10 m-0">
- <chart1 :height="145"/>
+ <SSchart :height="145"/>
</div>
</div>
</div>
@@ -103,13 +103,13 @@
</template>
<script>
- import chart1 from './Dashboards/Analytics/chart1';
+ import SSchart from './Analytics/SS_chart1';
import VuePerfectScrollbar from 'vue-perfect-scrollbar';
export default {
components: {
VuePerfectScrollbar,
- chart1,
+ SSchart,
},
name: "StrategySimulator",
data(){
@@ -117,9 +117,9 @@
stockNum:[],
date:'',
budget:'',
- stockCode:[],
- stockList:[],
- ratio:[],
+ stockCode: [],
+ stockList: [],
+ ratio: this.$store.state.SS_ratio,
tmp:0,
valid:false
@@ -162,14 +162,10 @@
return false
}
else{
+ this.valid=true;
+ this.$store.dispatch('calculatePortfolio',{date:this.date,stockCode:this.stockCode,ratio:this.ratio});
//validation하고 맞으면 입력받은 date랑 stockCode를 back으로 보내
- this.$store.dispatch('addDataToChart');
- this.valid=true
- this.$http.post('/test/api',{date:this.date,stockCode:this.stockCode,ratio:this.ratio})
- .then(response=>{
- console.log(response.data);
- console.log(response.data[0].date);
- });
+
}
},
datechangeInit: function () {
diff --git a/Frontend/src/store/index.js b/Frontend/src/store/index.js
index 7c5eb10d12699e6cf840e5cffced8bce4d25660f..be131896eaff4f6f0516a60844d9aa81703def8e 100644
--- a/Frontend/src/store/index.js
+++ b/Frontend/src/store/index.js
@@ -8,8 +8,17 @@ export default new Vuex.Store({
{
chart1_labels : [],
chart1_data : [],
+
+ SS_init_money : 1000000,
+ SS_init_stocks : [],
+ SS_init_index_stock_num : 0,
+ SS_ratio : [],
+ SS_chart_labels : [],
+ SS_chart_data1 : [],
+ SS_chart_data2 : [],
},
-
+ // 전체돈 * ration / 주식개별
+ // 전체돈 * 코스닥 가격
/**
* Mutation is the simple state-changing operation
* that does not contain other Frontend logic and AJAX requests.
@@ -31,6 +40,55 @@ export default new Vuex.Store({
addDataToChartFail(/*state, payload*/)
{
console.log('addDataToChart Error!');
+ },
+
+ calculatePortfolioSuccess(state, payload)
+ {
+ //살 종목의 개수 + 1(코스피)
+ var payloadSize = payload.data.length-1;
+ //날짜의 개수
+ var payloadNumSize = payload.data[payloadSize].length -1;
+
+
+ //첫날 코스피 산 개수
+ state.SS_init_index_stock_num = state.SS_init_money / payload.data[payloadSize][0].close;
+ for(var i=0; i<=payloadNumSize; i++)
+ {
+ var tdate = payload.data[payloadSize][i].date
+ state.SS_chart_labels.push(tdate);
+
+ var tvalue = state.SS_init_index_stock_num * payload.data[payloadSize][i].close;
+ state.SS_chart_data1.push(tvalue);
+ }
+ //날짜, 코스피 지수 차트저장 완료
+ console.log(state.SS_chart_data1);
+
+ for(var i=0; i<=payloadNumSize; i++)
+ {
+ state.SS_chart_data2.push(Number(0));
+ }
+
+ // 초기 구매 주식 개수
+ for(var i=0; i<payloadSize; i++)
+ {
+ var tinit_stocks = state.SS_init_money*state.SS_ratio[i] / payload.data[i][payloadSize].close/100;
+ state.SS_init_stocks.push(tinit_stocks);
+ }
+ console.log(state.SS_init_stocks);
+
+ // 포트폴리오 변동 계산.
+ for(var i=0; i<=payloadNumSize; i++)
+ {
+ for(var j=0; j<payloadSize; j++)
+ {
+ state.SS_chart_data2[i] += Number(state.SS_init_stocks[j] * payload.data[j][payloadNumSize-i].close);
+ }
+ }
+ console.log(state.SS_chart_data2);
+ },
+ calculatePortfolioFail(state, payload)
+ {
+ console.log(payload);
}
},
actions :
@@ -41,9 +99,19 @@ export default new Vuex.Store({
.then((res) => {
commit('addDataToChartSuccess',res);
})
- .catch((res) => {
- commit('addDataToChartFail',res);
+ .catch((err) => {
+ commit('addDataToChartFail',err);
});
+ },
+ calculatePortfolio({commit},payload)
+ {
+ axios.post('/test/api',payload)
+ .then((res) => {
+ commit('calculatePortfolioSuccess',res);
+ })
+ .catch((err) => {
+ commit('calculatePortfolioFail',err);
+ });
}
},