Skip to content

Commit

Permalink
1.5.2: UI Minor Updates + Donut Chart
Browse files Browse the repository at this point in the history
  • Loading branch information
dcamarmas committed Jul 13, 2020
1 parent 9d9352a commit 7f8fd55
Show file tree
Hide file tree
Showing 14 changed files with 187 additions and 53 deletions.
16 changes: 16 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
body{
background-color: #FFFFFF;
overflow-x: hidden;
}

hr {
Expand Down Expand Up @@ -170,6 +171,7 @@ h2 {

.instructions_table{
font-size: 15px;
padding-right: 1%;
}

.table-inst-wrapper-scroll-y {
Expand Down Expand Up @@ -220,4 +222,18 @@ h2 {
max-height: 60vh;
overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}

#chart {
margin: 35px auto;
padding: 0;
}

.apexcharts-legend-text tspan:nth-child(1) {
font-weight: lighter;
fill: #999;
}

.apexcharts-legend-text tspan:nth-child(3) {
font-weight: bold;
}
14 changes: 14 additions & 0 deletions external/apexcharts/apexcharts

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions external/apexcharts/classList.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions external/apexcharts/findindex_polyfill_mdn
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* Minified by jsDelivr using Terser v3.14.1.
* Original file: /npm/[email protected]/findIndex.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(r){if(null==this)throw new TypeError('"this" is null or not defined');var e=Object(this),t=e.length>>>0;if("function"!=typeof r)throw new TypeError("predicate must be a function");for(var n=arguments[1],i=0;i<t;){var o=e[i];if(r.call(n,o,i,e))return i;i++}return-1},configurable:!0,writable:!0});
//# sourceMappingURL=/sm/62b4860885465cb39fdbbcf8106b7ea29b0e5502fd16963e1e824fee1ecb4a13.map
1 change: 1 addition & 0 deletions external/apexcharts/polyfill.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions external/apexcharts/vue-apexcharts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* Minified by jsDelivr using Terser v3.14.1.
* Original file: /npm/[email protected]/dist/vue-apexcharts.js
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("apexcharts")):"function"==typeof define&&define.amd?define(["apexcharts"],e):t.VueApexCharts=e(t.ApexCharts)}(this,function(t){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t=t&&t.hasOwnProperty("default")?t.default:t;var i={props:{options:{type:Object},type:{type:String},series:{type:Array,required:!0,default:function(){return[]}},width:{default:"100%"},height:{default:"auto"}},data:function(){return{chart:null}},beforeMount:function(){window.ApexCharts=t},mounted:function(){this.init()},created:function(){var t=this;this.$watch("options",function(e){!t.chart&&e?t.init():t.chart.updateOptions(t.options)}),this.$watch("series",function(e){!t.chart&&e?t.init():t.chart.updateSeries(t.series)});["type","width","height"].forEach(function(e){t.$watch(e,function(){t.refresh()})})},beforeDestroy:function(){this.chart&&this.destroy()},render:function(t){return t("div")},methods:{init:function(){var e=this,n={chart:{type:this.type||this.options.chart.type||"line",height:this.height,width:this.width,events:{}},series:this.series};Object.keys(this.$listeners).forEach(function(t){n.chart.events[t]=e.$listeners[t]});var i=this.extend(this.options,n);return this.chart=new t(this.$el,i),this.chart.render()},isObject:function(t){return t&&"object"===e(t)&&!Array.isArray(t)&&null!=t},extend:function(t,e){var i=this;"function"!=typeof Object.assign&&(Object.assign=function(t){if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var i=arguments[n];if(null!=i)for(var r in i)i.hasOwnProperty(r)&&(e[r]=i[r])}return e});var r=Object.assign({},t);return this.isObject(t)&&this.isObject(e)&&Object.keys(e).forEach(function(o){i.isObject(e[o])&&o in t?r[o]=i.extend(t[o],e[o]):Object.assign(r,n({},o,e[o]))}),r},refresh:function(){return this.destroy(),this.init()},destroy:function(){this.chart.destroy()},updateSeries:function(t,e){return this.chart.updateSeries(t,e)},updateOptions:function(t,e,n,i){return this.chart.updateOptions(t,e,n,i)},toggleSeries:function(t){return this.chart.toggleSeries(t)},showSeries:function(t){this.chart.showSeries(t)},hideSeries:function(t){this.chart.hideSeries(t)},appendSeries:function(t,e){return this.chart.appendSeries(t,e)},resetSeries:function(){this.chart.resetSeries()},zoomX:function(t,e){this.chart.zoomX(t,e)},toggleDataPointSelection:function(t,e){this.chart.toggleDataPointSelection(t,e)},appendData:function(t){return this.chart.appendData(t)},addText:function(t){this.chart.addText(t)},addImage:function(t){this.chart.addImage(t)},addShape:function(t){this.chart.addShape(t)},dataURI:function(){return this.chart.dataURI()},setLocale:function(t){return this.chart.setLocale(t)},addXaxisAnnotation:function(t,e){this.chart.addXaxisAnnotation(t,e)},addYaxisAnnotation:function(t,e){this.chart.addYaxisAnnotation(t,e)},addPointAnnotation:function(t,e){this.chart.addPointAnnotation(t,e)},removeAnnotation:function(t,e){this.chart.removeAnnotation(t,e)},clearAnnotations:function(){this.chart.clearAnnotations()}}};return window.ApexCharts=t,i.install=function(e){e.ApexCharts=t,window.ApexCharts=t,Object.defineProperty(e.prototype,"$apexcharts",{get:function(){return t}})},i});
//# sourceMappingURL=/sm/ed2411ece30320b9af4d1bc456a199e63598562a86ec4edaf5ac2e1dc26f2ca3.map
Binary file modified images/dptoinf.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 41 additions & 16 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<link type="text/css" rel='stylesheet' href="external/fontawesome/css/all.css">
<link rel="stylesheet" href="external/codemirror/codemirror.css">
<link rel="stylesheet" href="css/style.css">

<!-- Load polyfills to support older browsers -->
<!--<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>-->

Expand All @@ -28,6 +28,7 @@
<script src="external/BigInteger.min.js"></script>
<script src="external/lodash.js"></script>

<!--Codemirror scripts-->
<script src="external/codemirror/codemirror.js"></script>
<script src="external/codemirror/keymap/vim.js"></script>
<script src="external/codemirror/keymap/sublime.js"></script>
Expand All @@ -37,6 +38,24 @@
<script src="external/codemirror/addon/comment/comment.js"></script>
<script src="external/codemirror/addon/hint/show-hint.js"></script>

<!--Apexcharts scripts-->
<script>
window.Promise ||
document.write(
'<script src="external/apexcharts/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="external/apexcharts/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="external/apexcharts/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="external/apexcharts/apexcharts"></script>
<script src="external/apexcharts/vue-apexcharts"></script>

<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="./images/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/icons/apple-icon-60x60.png">
Expand Down Expand Up @@ -84,8 +103,8 @@
<div class="container">
<div class="row">
<div class="col-auto my-0 py-0 pr-1 text-uppercase">
Creator <b-badge pill variant="secondary">1.5.2</b-badge>
</div>
Creator <b-badge pill variant="secondary">1.5.2</b-badge>
</div>
<div class="col-auto my-0 p-0 ml-2">{{architecture_name}}</div>
<div class="w-100"></div>
<div class="col-auto my-0 py-0 font-weight-bold mx-1" style="color:#383d41; font-size:11px;">didaCtic and geneRic assEmbly progrAmming simulaTOR</div>
Expand All @@ -97,12 +116,13 @@

<b-collapse is-nav id="nav_collapse">
<b-navbar-nav class="ml-auto">
<b-nav-item class="mb-0 pb-0" target="_blank" href='https://www.arcos.inf.uc3m.es/'><img
alt="ARCOS"
src="./images/arcos.svg" style="height:7vh"></b-nav-item>
<b-nav-item class="mb-0 pb-0" target="_blank" href='https://www.inf.uc3m.es/'><img
alt="Computer Science and Engineering Departament"
src="./images/dptoinf.png" style="height:7vh"></b-nav-item>
<b-nav-item class="mb-0 pb-0 nopadding" target="_blank" href='https://www.arcos.inf.uc3m.es/'>
<img alt="ARCOS" class="nopadding" src="./images/arcos.svg" style="height:5vh">
</b-nav-item>

<b-nav-item class="mb-0 pb-0 nopadding" target="_blank" href='https://www.inf.uc3m.es/'>
<img alt="Computer Science and Engineering Departament" class="nopadding" src="./images/dptoinf.png" style="height:5vh">
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
Expand Down Expand Up @@ -558,7 +578,7 @@ <h6 v-if="architecture.memory_layout.length > 0">0x{{((architecture.memory_layou
</b-tab>

<!-- Components -->
<b-tab title="Components" :disabled="advanced_mode">
<b-tab title="Components" :disabled="advanced_mode" v-if="!advanced_mode">
<br>
<h6>Components of the architecture:</h6>

Expand Down Expand Up @@ -737,7 +757,7 @@ <h6>Are you sure you want to delete the item?</h6>
</b-tab>

<!-- Instruction definition -->
<b-tab title="Instructions Definition" :disabled="advanced_mode">
<b-tab title="Instructions Definition" :disabled="advanced_mode" v-if="!advanced_mode">
<br>
<h6>Instruction set:</h6>

Expand Down Expand Up @@ -1277,7 +1297,7 @@ <h6>Are you sure you want to delete the item?</h6>
</b-tab>

<!-- Pseudoinstruction definition -->
<b-tab title="Pseudoinstructions Definition" :disabled="advanced_mode">
<b-tab title="Pseudoinstructions Definition" :disabled="advanced_mode" v-if="!advanced_mode">
<br>
<h6>Pseudoinstructions set:</h6>

Expand Down Expand Up @@ -1623,7 +1643,7 @@ <h6>Are you sure you want to delete the item?</h6>
</b-tab>

<!-- Directives definition -->
<b-tab title="Directives Definition" :disabled="advanced_mode">
<b-tab title="Directives Definition" :disabled="advanced_mode" v-if="!advanced_mode">
<br>
<h6>Directives set:</h6>

Expand Down Expand Up @@ -2551,7 +2571,7 @@ <h6 style="font-size: 13px" v-if="row.item.unallocated==false">{{row.item.Value}
<div class="col-lg-12 col-sm-12">
<b-table striped small hover :items="stats" :fields="statsFields" class="memory_table text-center"></b-table>
<br>
<h6>Graphic</h6>
<!--<h6>Graphic</h6>
<b-progress class="mb-3">
<b-progress-bar :value="stats[0].percentage" style="background:red;">{{stats[0].abbreviation}}</b-progress-bar>
<b-progress-bar :value="stats[1].percentage" style="background:blue;">{{stats[1].abbreviation}}</b-progress-bar>
Expand All @@ -2566,14 +2586,19 @@ <h6>Graphic</h6>
<b-progress-bar :value="stats[10].percentage" style="background:lime;">{{stats[10].abbreviation}}</b-progress-bar>
<b-progress-bar :value="stats[11].percentage" style="background:indigo;">{{stats[11].abbreviation}}</b-progress-bar>
<b-progress-bar :value="stats[12].percentage" style="background:cyan;">{{stats[12].abbreviation}}</b-progress-bar>
</b-progress>
</b-progress>-->

<div id="chart">
<apexchart type="donut" :options="chartOptions" :series="stats_value" height="150%" ></apexchart>
</div>

</div>
</div>
</div>

<!-- Monitor -->
<div class="col-lg-6 col-sm-12 my-2 mx-0">
<div class="row col-lg-12 col-sm-12 mx-0">
<div class="row col-lg-12 col-sm-12 mx-0 pl-0">
<div class="col-lg-1 col-sm-1">
<i style="height:5vh; opacity:0.6;" class="fas fa-desktop fa-2x mb-2"></i>
</div>
Expand Down
52 changes: 52 additions & 0 deletions js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,14 @@ try
/*DOM ID*/
el: "#app",

/*Import Graph component*/
components: {
apexchart: VueApexCharts,
},

/*Vue data*/
data: {

/*Global*/
/*View*/
creator_mode: "load_architecture",
Expand Down Expand Up @@ -374,6 +380,52 @@ try
},
/*Stats*/
stats: stats,

/*Stats Graph values*/
stats_value: stats_value,

/*Stats Graph configure*/
chartOptions: {
colors:['red', 'blue', 'yellow', 'purple', 'green', 'orange', 'gray', 'pink', 'teal', 'black', 'lime', 'indigo', 'cyan'],
chart: {
type: 'donut',
},
labels: ["Arithmetic integer", "Arithmetic floating point", "Logic", "Transfer between registers", "Memory access", "Comparison", "I/O", "Syscall", "Control", "Function call", "Conditional bifurcation", "Unconditional bifurcation", "Other"],
dataLabels: {
enabled: true
},
donut: {
labels: {
show: true,
total: {
show: true,
showAlways: true,
label: "Total",
},
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
type: "horizontal",
shadeIntensity: 0.8,
gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 100],
colorStops: []
},
colors: ['red', 'blue', 'yellow', 'purple', 'green', 'orange', 'gray', 'pink', 'teal', 'black', 'lime', 'indigo', 'cyan'],
},
legend: {
formatter: function(val, opts) {
return val + " - " + opts.w.globals.series[opts.seriesIndex]
}
}
},

/*Display*/
display: '',
/*Keyboard*/
Expand Down
Loading

0 comments on commit 7f8fd55

Please sign in to comment.