diff --git a/app.py b/app.py index 7f6bac956c1b302d511e15122235d573ae14d33d..4fbabd10ba15b8586c15c1c557ae087a22749e01 100644 --- a/app.py +++ b/app.py @@ -15,6 +15,20 @@ def values(): values = [{"N": 10}, {"P": 11}, {"K": 12}, {"T": 5}, {"H": 6}, {"M": 7}] return jsonify(values) +@app.route("/past-values") +def pastValues(): + past_values = {"npkData": { + "nitrogen": [10, 22, 15, 18, 25, 30, 35], + "phosphorus": [5, 8, 10, 12, 20, 22, 25], + "potassium": [8, 12, 13, 17, 23, 28, 33] + }, + "thmData": { + "temperature": [4, 15, 16, 18, 20, 10, 12], + "humidity": [25, 12, 2, 22, 19, 16, 25], + "moisture": [8, 12, 13, 33, 23, 28, 10] + }} + return jsonify(past_values) + @app.route('/favicon.ico') def favicon(): diff --git a/src/App.vue b/src/App.vue index 4825920658b3727061ec423d49592ff3221539c4..420026157fcf931c7dab48ef6f1cd3d35413f3f1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ import ValueTabs from "./components/ValueTabs.vue"; </script> <script> +import axios from "axios" import MultiLineChart from './components/MultiLineChart.vue'; import MultiAxisChart from './components/MultiAxisChart.vue'; @@ -11,7 +12,18 @@ export default { MultiLineChart, MultiAxisChart }, + mounted() { + this.getPastValues(); + }, methods: { + getPastValues() { + axios + .get('http://127.0.0.1:5000/past-values') + .then((response) => { + this.npkData = response.data.npkData + this.thmData = response.data.thmData + }) + }, getPastSevenDays() { const dates = []; for (let i = 6; i >= 0; i--) { @@ -25,16 +37,8 @@ export default { }, data() { return { - npkData: { - nitrogen: [10, 22, 15, 18, 25, 30, 35], - phosphorus: [5, 8, 10, 12, 20, 22, 25], - potassium: [8, 12, 13, 17, 23, 28, 33] - }, - thmData: { - temperature: [4, 15, 16, 18, 20, 10, 12], - humidity: [25, 12, 2, 22, 19, 16, 25], - moisture: [8, 12, 13, 33, 23, 28, 10] - } + npkData: null, + thmData: null } } } @@ -51,8 +55,8 @@ export default { </div> </div> <div class="bottom-section"> - <MultiLineChart :chart-data="npkData" :x-axis-data=this.getPastSevenDays() /> - <MultiAxisChart :chart-data="thmData" :x-axis-data=this.getPastSevenDays() /> + <MultiLineChart v-if="npkData" :chart-data="npkData" :x-axis-data=this.getPastSevenDays() /> + <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=this.getPastSevenDays() /> </div> </div> </template>