StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
5.1 KiB
157 lines
5.1 KiB
4 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>vue-numeric demo</title>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
|
||
|
|
<style>
|
||
|
|
[v-cloak] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app" v-cloak>
|
||
|
|
<section class="hero is-primary is-bold">
|
||
|
|
<div class="hero-body">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="title">
|
||
|
|
Vue Numeric
|
||
|
|
</h1>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
Input field component to display currency value based on Vue.js
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="section container">
|
||
|
|
<div class="columns is-multiline is-mobile">
|
||
|
|
<div class="column is-12 has-text-centered">
|
||
|
|
<p class="control">
|
||
|
|
<label class="label"> Value: {{ money }} </label>
|
||
|
|
<vue-numeric
|
||
|
|
class="input is-large"
|
||
|
|
v-model="money"
|
||
|
|
:min="minValue"
|
||
|
|
:max="maxValue"
|
||
|
|
:currency="currency"
|
||
|
|
:separator="separator"
|
||
|
|
:precision="decimals"
|
||
|
|
:read-only="readOnly"
|
||
|
|
read-only-class="test"
|
||
|
|
>
|
||
|
|
</vue-numeric>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
<h1 class="title is-4">
|
||
|
|
Config:
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
<div class="columns is-multiline is-mobile">
|
||
|
|
<div class="column is-12">
|
||
|
|
<p class="control">
|
||
|
|
<label class="label"> Currency symbol </label>
|
||
|
|
<input class="input" v-model="currency">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="column is-12">
|
||
|
|
<p class="control">
|
||
|
|
<label class="label"> Minimum Value </label>
|
||
|
|
<input class="input" type="number" v-model.number="minValue">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="column is-12">
|
||
|
|
<p class="control">
|
||
|
|
<label class="label"> Maximum Value </label>
|
||
|
|
<input class="input" type="number" v-model.number="maxValue">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="column is-12">
|
||
|
|
<p class="control">
|
||
|
|
<label class="label"> Decimals digits </label>
|
||
|
|
<input class="input" type="number" v-model.number="decimals">
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="column is-12">
|
||
|
|
<label class="label"> Separator </label>
|
||
|
|
<p class="control">
|
||
|
|
<label class="radio">
|
||
|
|
<input type="radio" value="," v-model="separator">
|
||
|
|
use ',' as separator
|
||
|
|
</label>
|
||
|
|
<label class="radio">
|
||
|
|
<input type="radio" value="." v-model="separator">
|
||
|
|
use '.' as separator
|
||
|
|
</label>
|
||
|
|
<label class="radio">
|
||
|
|
<input type="radio" value="space" v-model="separator">
|
||
|
|
use space as separator
|
||
|
|
</label>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="column is-12">
|
||
|
|
<p class="control">
|
||
|
|
<input type="checkbox" v-model="readOnly">
|
||
|
|
Read Only
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="content has-text-centered">
|
||
|
|
<p>
|
||
|
|
<strong>Vue Numeric</strong> by <a href="http://kevinongko.com">Kevin Ongko</a>. The source code is licensed
|
||
|
|
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a href="https://www.npmjs.com/package/vue-numeric" target="_blank">
|
||
|
|
<img src="https://img.shields.io/npm/v/vue-numeric.svg">
|
||
|
|
<img src="https://img.shields.io/npm/dt/vue-numeric.svg">
|
||
|
|
<img src="https://img.shields.io/npm/dm/vue-numeric.svg">
|
||
|
|
<img src="https://img.shields.io/npm/l/vue-numeric.svg">
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<a href="https://github.com/kevinongko/vue-numeric" target="_blank">
|
||
|
|
<img src="https://img.shields.io/github/stars/kevinongko/vue-numeric.svg?style=social&label=Star">
|
||
|
|
<img src="https://img.shields.io/github/forks/kevinongko/vue-numeric.svg?style=social&label=Fork">
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="https://unpkg.com/accounting-js"></script>
|
||
|
|
<script src="https://unpkg.com/vue"></script>
|
||
|
|
<script src="https://unpkg.com/vue-numeric"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
Vue.use(VueNumeric.default)
|
||
|
|
|
||
|
|
new Vue({
|
||
|
|
el: '#app',
|
||
|
|
|
||
|
|
data: {
|
||
|
|
money: 1000,
|
||
|
|
minValue: 0,
|
||
|
|
maxValue: 999999,
|
||
|
|
currency: '$',
|
||
|
|
decimals: 2,
|
||
|
|
separator: ',',
|
||
|
|
readOnly: false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|