Skip to content

Commit

Permalink
make it better
Browse files Browse the repository at this point in the history
  • Loading branch information
@rbs333
rbs333 committed Apr 13, 2019
1 parent fe7aef5 commit 72eea12
Show file tree
Hide file tree
Showing 6 changed files with 1,887 additions and 97 deletions.
1 change: 1 addition & 0 deletions Procfile
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
web: gunicorn app:app
2 changes: 1 addition & 1 deletion frontend/src/components/Csv_Formatter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
week_23: { title: 'week 23' }
}">
<button id="optimization_csv_button" hidden="true">
<b>Get Data</b>
<b>Download Full Results</b>
</button>
</vue-json-to-csv>
</template>
Expand Down
25 changes: 20 additions & 5 deletions frontend/src/components/Map.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<template>
<body class="wrapper">
<div v-if="showing_options" class="mapDescription">
<div class="is-size-4 floatLeft">1. Create Network</div><br><br>
<div class="is-size-5 floatLeft ">Click map to place <b>{{name}}</b></div>
<div class="is-size-4 floatLeft">1. Create Network</div>
<br>
<div class="is-size-5 floatLeft">Click map to place <b>{{name}}</b></div>
<div class="control is-size-5">
<label class="container" style="color: red">Refinery
<input
Expand Down Expand Up @@ -32,6 +33,13 @@
<span class="checkmark"></span>
</label>
</div>
<p class="max-width paddingLeft">
Place refinery (red pin) as center of hub
and spoke optimization model. Next place farm locations
(green pins). Finally, place potential satellite storage
locations (blue pins).
</p>
<br>
<form id="refineryFormAddress" class="is-size-5 paddingRight addressInput" @submit.prevent="submitAddress()">
<div class="floatLeft is-size-5">Or enter address</div>
<input
Expand Down Expand Up @@ -101,7 +109,7 @@ export default {
getMap() {
this.map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.22904237824045, lng: -80.41982042804534},
zoom: 4
zoom: 8
})
},
Expand All @@ -110,7 +118,6 @@ export default {
var ref = this;
google.maps.event.addListener(this.map, 'click', function(event) {
var typeName = prompt(ref.name + " Name", this.name);
// console.log(event.latLng.lat(), event.latLng.lng(), typeName);
if (typeName !== null) ref.placeMarker(event.latLng, typeName);
});
},
Expand Down Expand Up @@ -345,10 +352,14 @@ export default {
@media only screen and (max-width: 600) {
#map {
height: 300px;
height: 250px;
}
}
p {
max-width: 24rem;
}
.clickInstruction {
display: block;
}
Expand Down Expand Up @@ -378,4 +389,8 @@ export default {
.paddingRight {
padding-right: 1rem;
}
.paddingLeft {
padding-left: 1rem;
}
</style>
212 changes: 121 additions & 91 deletions frontend/src/components/S_BFLS.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
<div class="section wrap">
<h1 class="title">Sorghum - Logistics Support</h1>
<Map class="map" v-model="mapInfo" ref="map"></Map>
<div class="paramDescription title is-size-4">Optimization Parameters</div>
<div class="paramDescription">
<div class="title is-4">Optimization Parameters</div>
<div class="subtitle is-6">Note: if parameter unspecified default value is accepted</div>
</div>

<div class="params">
<div class="field">
<label class="label">Projected Demand (Mg)</label>
Expand Down Expand Up @@ -89,79 +93,103 @@
class="results"
v-if="showSolution"
>
<div class="title is-size-3">Simulation Results</div>
<div class="sim_results">
<div class="title is-size-5" v-html="'Percent of demand met: ' + sim_response['demand']['percent'] + '%'"></div>
<div class="results" v-html="'Confidence demand will be met to 90%: ' + sim_response['demand']['conf']['90'] + '%'"></div>
<div class="results" v-html="'Confidence demand will be met to 95%: ' + sim_response['demand']['conf']['95'] + '%'"></div>
<table class="table1">
<div class="title is-size-3">Results</div>
<div class="title is-5">Cost Breakdown</div>
<div class="costChart">
<pie-chart
prefix="$"
:data="chart_data"
class="pieChart"
width="48%"
></pie-chart>
<div class="list is-hoverable" width="40%">
<div class="list-item">Farm to SSL Cost: ${{chart_info['farm_ssl_trans_cost']}}</div>
<div class="list-item">SSL to Refinery Cost: ${{chart_info['ssl_ref_trans_cost']}}</div>
<div class="list-item">Farm Holding Cost: ${{chart_info['farm_holding_cost']}}</div>
<div class="list-item">SSL Holding Cost: ${{chart_info['ssl_holding_cost']}}</div>
<div class="list-item">Local Ownership Cost: ${{chart_info['local_ownership']}}</div>
<div class="list-item">Operation Cost: ${{chart_info['operation_cost']}}</div>
<div class="list-item is-active">Total Cost: ${{chart_info['total_cost']}}</div>
</div>
</div>

<div class="title is-5">Simulation Statistics</div>
<div class="subtitle is-6">Based on 100 Replications</div>
<div class="simResults">
<div>
<div>Configuration: {{configurations[model.sysnum]}}</div>
<div>90% of demand met {{sim_response['demand']['conf']['90']}}% of the time</div>
<div>95% of demand met {{sim_response['demand']['conf']['95']}}% of the time</div>
<div>Average amount of demand met {{sim_response['demand']['percent']}}%</div>
</div>
<table class="table is-striped">
<tr>
<th class="table_header">Descriptive Statistics</th>
<th class="table_header">Mean</th>
<th class="table_header">Standard Deviation</th>
<th class="table_header">SE Mean</th>
<th class="table_header">95% Confidence Interval</th>
<th class="table_header">Range (min,max)</th>
<th class="table is-hoverable">Descriptive Statistics</th>
<th class="table is-hoverable">Mean</th>
<th class="table is-hoverable">Std. Dev</th>
<th class="table is-hoverable">SE Mean</th>
<th class="table is-hoverable">95% CI</th>
<th class="table is-hoverable">Range (min,max)</th>
</tr>
<tr>
<td class="table_row">Demand</td>
<td class="table_row" v-html="sim_response['demand']['average'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['demand']['stdev'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['demand']['sem'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['demand']['conf int']"></td>
<td class="table_row" v-html="'(' + sim_response['demand']['range'][0] + ', ' + sim_response['demand']['range'][1] + ')' + ' Mg'"></td>
<td class="table is-hoverable">Demand</td>
<td class="table is-hoverable" v-html="sim_response['demand']['average'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['demand']['stdev'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['demand']['sem'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['demand']['conf int']"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['demand']['range'][0] + ', ' + sim_response['demand']['range'][1] + ')' + ' Mg'"></td>
</tr>
<tr>
<td class="table_row">Telehandler</td>
<td class="table_row" v-html="sim_response['telehandler rate']['average'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['telehandler rate']['stdev'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['telehandler rate']['sem'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['telehandler rate']['conf int'] + ' Mg/hr'"></td>
<td class="table_row" v-html="'(' + sim_response['telehandler rate']['range'][0] + ', ' + sim_response['telehandler rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Telehandler</td>
<td class="table is-hoverable" v-html="sim_response['telehandler rate']['average'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['telehandler rate']['stdev'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['telehandler rate']['sem'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['telehandler rate']['conf int'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['telehandler rate']['range'][0] + ', ' + sim_response['telehandler rate']['range'][1] + ')' + ' Mg/hr'"></td>
</tr>
<tr>
<td class="table_row">Forage Chopper</td>
<td class="table_row" v-html="sim_response['chopper rate']['average'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['chopper rate']['stdev'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['chopper rate']['sem'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['chopper rate']['conf int'] + ' Mg/hr'"></td>
<td class="table_row" v-html="'(' + sim_response['chopper rate']['range'][0] + ', ' + sim_response['chopper rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Forage Chopper</td>
<td class="table is-hoverable" v-html="sim_response['chopper rate']['average'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['chopper rate']['stdev'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['chopper rate']['sem'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['chopper rate']['conf int'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['chopper rate']['range'][0] + ', ' + sim_response['chopper rate']['range'][1] + ')' + ' Mg/hr'"></td>

</tr>
<tr>
<td class="table_row">Press</td>
<td class="table_row" v-html="sim_response['press rate']['average'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['press rate']['stdev'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['press rate']['sem'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['press rate']['conf int'] + ' Mg/hr'"></td>
<td class="table_row" v-html="'(' + sim_response['press rate']['range'][0] + ', ' + sim_response['press rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Press</td>
<td class="table is-hoverable" v-html="sim_response['press rate']['average'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['press rate']['stdev'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['press rate']['sem'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['press rate']['conf int'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['press rate']['range'][0] + ', ' + sim_response['press rate']['range'][1] + ')' + ' Mg/hr'"></td>

</tr>
<tr>
<td class="table_row">Bagger</td>
<td class="table_row" v-html="sim_response['bagger rate']['average'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['bagger rate']['stdev'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['bagger rate']['sem'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['bagger rate']['conf int'] + ' Mg/hr'"></td>
<td class="table_row" v-html="'(' + sim_response['bagger rate']['range'][0] + ', ' + sim_response['bagger rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Bagger</td>
<td class="table is-hoverable" v-html="sim_response['bagger rate']['average'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['bagger rate']['stdev'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['bagger rate']['sem'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['bagger rate']['conf int'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['bagger rate']['range'][0] + ', ' + sim_response['bagger rate']['range'][1] + ')' + ' Mg/hr'"></td>

</tr>
<tr>
<td class="table_row">Module Former</td>
<td class="table_row" v-html="sim_response['module former rate']['average'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['module former rate']['stdev'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['module former rate']['sem'] + ' Mg/hr'"></td>
<td class="table_row" v-html="sim_response['module former rate']['conf int'] + ' Mg/hr'"></td>
<td class="table_row" v-html="'(' + sim_response['module former rate']['range'][0] + ', ' + sim_response['module former rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Module Former</td>
<td class="table is-hoverable" v-html="sim_response['module former rate']['average'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['module former rate']['stdev'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['module former rate']['sem'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="sim_response['module former rate']['conf int'] + ' Mg/hr'"></td>
<td class="table is-hoverable" v-html="'(' + sim_response['module former rate']['range'][0] + ', ' + sim_response['module former rate']['range'][1] + ')' + ' Mg/hr'"></td>

</tr>
<tr>
<td class="table_row">Module Hauler</td>
<td class="table_row" v-html="sim_response['module hauler rate']['average'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['module hauler rate']['stdev'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['module hauler rate']['sem'] + ' Mg'"></td>
<td class="table_row" v-html="sim_response['module hauler rate']['conf int'] + ' Mg'"></td>
<td class="table_row" v-html="'(' + sim_response['module hauler rate']['range'][0] + ', ' + sim_response['module hauler rate']['range'][1] + ')' + ' Mg/hr'"></td>
<td class="table is-hoverable">Module Hauler</td>
<td class="table is-hoverable" v-html="sim_response['module hauler rate']['average'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['module hauler rate']['stdev'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['module hauler rate']['sem'] + ' Mg'"></td>
<td class="table is-hoverable" v-html="sim_response['module hauler rate']['conf int'] + ' Mg'"></td>
<td class="table is-hoverable">({{sim_response['module hauler rate']['range'][0]}} , {{sim_response['module hauler rate']['range'][1]}}) Mg/hr</td>
</tr>
</table>
</div>
Expand Down Expand Up @@ -232,6 +260,8 @@ export default {
customForm: false,
showOptButton: false,
customModel: {},
chart_data: [],
chart_info: {},
advancedOptions: false,
model: {
"sysnum": 0,
Expand Down Expand Up @@ -415,15 +445,32 @@ export default {
this.$refs.csv_download.generateCsv(this.op_response.solution);
this.sim_response = r.sim_response;
this.showSolution = true;
this.showInput = true;
this.showInput = true;
this.parseApplyRoutes(this.op_response);
this.$refs.map.show_results(this.op_response["summary"]["cost"]);
this.show_results(this.op_response["summary"]["cost"]);
console.log("summary ",this.op_response["summary"]["cost"])
})
this.new_input = false;
}
},
show_results(data) {
this.chart_info['farm_ssl_trans_cost'] = Math.round(data.tran_farms_ssl);
this.chart_info['ssl_ref_trans_cost'] = Math.round(data.tran_ssl_refinery);
this.chart_info['farm_holding_cost'] = Math.round(data.farm_inventory);
this.chart_info['ssl_holding_cost'] = Math.round(data.ssl_inventory);
this.chart_info['local_ownership'] = Math.round(data.loc_own);
this.chart_info['operation_cost'] = Math.round(data.operation);
this.chart_info['total_cost'] = Math.round(data.total_ub);
this.chart_data[0] = ['farm to ssl', Math.round(data.tran_farms_ssl)];
this.chart_data[1] = ['ssl to refinery', Math.round(data.tran_ssl_refinery)];
this.chart_data[2] = ['farm holding', Math.round(data.farm_inventory)];
this.chart_data[3] = ['ssl holding', Math.round(data.ssl_inventory)];
this.chart_data[4] = ['local ownership', Math.round(data.loc_own)];
this.chart_data[5] = ['operations', Math.round(data.operation)];
this.showing_options = false;
},
show_input() {
this.showInput = false;
this.$refs.map.hide_results();
Expand All @@ -438,12 +485,18 @@ export default {
</script>

<style>
div {
text-align: left
}
.title {
grid-area: title;
text-align: left;
}
.subtitle {
margin-bottom: 1rem;
}
.map {
grid-area: map;
}
Expand All @@ -467,16 +520,6 @@ export default {
width: 18rem;
margin-right: 1rem;
}
/* .requiredParams {
grid-area: params;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
} */
.defaultWidth {
width: 15rem;
}
.buttons {
grid-area: buttons;
Expand All @@ -500,32 +543,19 @@ export default {
width: 110px;
}
.results {
grid-area: results;
text-align: left;
}
.table1 {
grid-area: table1;
border-collapse: collapse;
border: 1px solid #0000FF;
width: 75%;
.costChart {
display: flex;
}
.table_header {
grid-area: table_header;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgb(76, 127, 175);
color: white;
text-align: center;
border: 1px solid #000000;
.pieChart {
position: relative;
width: 48%;
float: right;
display: inline;
}
.table_row {
grid-area: table_row;
border: 1px solid #0000FF;
text-align: center;
.results {
display: flex;
flex-direction: column
}
</style>
Loading

0 comments on commit 72eea12

Please sign in to comment.