Skip to content
This repository was archived by the owner on Feb 15, 2022. It is now read-only.

Commit ab0de22

Browse files
smknstdDeviaVir
smknstd
and
DeviaVir
authored
Add configuration panel on demo page (#29)
* enhance demo with configuration * auto update code snippet * fix label size slider's interval * Update path.js Co-authored-by: Chase <[email protected]>
1 parent f7e332c commit ab0de22

File tree

5 files changed

+232
-27
lines changed

5 files changed

+232
-27
lines changed

‎docs/home.vue‎

Lines changed: 216 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,137 @@
33
<github-badge slug="deviavir/vue-bars" />
44

55
<h1>Vue Bars</h1>
6-
<p> Simple, elegant spark bars for Vue.js</p>
6+
<p class="headline">Simple, elegant spark bars for Vue.js</p>
77
<bars
88
:key="data"
9-
:data="data"
10-
:gradient="gradient"
11-
:barWidth="5"
9+
:data="getData()"
10+
:gradient="[color1, color2]"
11+
:barWidth="barWidth"
12+
:rounding="radius"
13+
:padding="padding"
14+
:labelColor="labelColor"
15+
:labelRotate="labelRotate"
16+
:labelSize="labelSize"
1217
:growDuration="1">
1318
</bars>
1419

15-
<pre class="code-wrap"><code class="code" v-html="code"></code></pre>
20+
<div>
21+
<vue-tabs>
22+
<v-tab title="Configure">
1623

17-
<footer>Released under the <a href="//github.com/deviavir/vue-bars/blob/master/LICENSE">MIT</a> license. <a href="//github.com/deviavir/vue-bars">View source.</a></footer>
24+
<div class="settings-container">
25+
<div class="settings-column">
26+
<div>
27+
<div class="setting-label">Width</div>
28+
<vue-slider v-model="barWidth" :min="1" :max="12" :interval="0.1"></vue-slider>
29+
</div>
30+
31+
<div>
32+
<div class="setting-label">Rounding</div>
33+
<vue-slider v-model="radius" :min="0.1" :max="6" :interval="0.1"></vue-slider>
34+
</div>
35+
36+
<div>
37+
<div class="setting-label">Padding</div>
38+
<vue-slider v-model="padding" :min="0" :max="10" :interval="0.1"></vue-slider>
39+
</div>
40+
41+
<div>
42+
<div class="setting-label">Gradient first color</div>
43+
<v-swatches v-model="color1" :swatch-size="18" background-color="#f7f7f7" :swatches="['#b8f2e6', '#00f5d4', '#35a7ff', '#3a86ff', '#001233','#000000', '#ffe74c', '#ffbe88','#ff93df', '#f94144','#d6d6d6']" inline></v-swatches>
44+
</div>
45+
46+
<div>
47+
<div class="setting-label">Gradient second color</div>
48+
<v-swatches v-model="color2" :swatch-size="18" background-color="#f7f7f7" :swatches="['#b8f2e6', '#00f5d4', '#35a7ff', '#3a86ff', '#001233','#000000', '#ffe74c', '#ffbe88','#ff93df', '#f94144','#d6d6d6']" inline></v-swatches>
49+
</div>
50+
</div>
51+
52+
<div class="settings-column">
53+
54+
<label class="control">
55+
<input type="checkbox" class="control__input visually-hidden" v-model="showLabels">
56+
<span class="control__indicator"></span>
57+
<span class="checkbox-label">Show labels ?</span>
58+
</label>
59+
60+
<div>
61+
<div class="setting-label">Label color</div>
62+
<v-swatches v-model="labelColor" :swatch-size="18" background-color="#f7f7f7" :swatches="['#b8f2e6', '#00f5d4', '#35a7ff', '#3a86ff', '#001233','#000000', '#ffe74c', '#ffbe88','#ff93df', '#f94144','#d6d6d6']" inline></v-swatches>
63+
</div>
64+
65+
<div>
66+
<div class="setting-label">Label rotate</div>
67+
<vue-slider v-model="labelRotate" :min="45" :max="90" :interval="0.1"></vue-slider>
68+
</div>
69+
70+
<div>
71+
<div class="setting-label">Label size</div>
72+
<vue-slider v-model="labelSize" :min="0.2" :max="1.5" :interval="0.01"></vue-slider>
73+
</div>
74+
</div>
75+
</div>
76+
77+
</v-tab>
78+
<v-tab title="Code">
79+
<pre class="code-wrap"><code class="code" v-html="code"></code></pre>
80+
</v-tab>
81+
</vue-tabs>
82+
</div>
83+
84+
<footer>Released under the <a href="//github.com/deviavir/vue-bars/blob/master/LICENSE">MIT</a> license. <a href="//github.com/deviavir/vue-bars">View source</a>.</footer>
1885
</main>
1986
</template>
2087

2188
<script>
2289
import Bars from '../src/index.js'
2390
import hanabi from 'hanabi'
2491
import GithubBadge from 'vue-github-badge'
92+
import VueSlider from 'vue-slider-component'
93+
import 'vue-slider-component/theme/default.css'
94+
import VSwatches from 'vue-swatches'
95+
import 'vue-swatches/dist/vue-swatches.css'
96+
import {VueTabs, VTab} from 'vue-nav-tabs'
97+
import 'vue-nav-tabs/themes/vue-tabs.css'
2598
2699
export default {
27-
components: { Bars, GithubBadge },
100+
components: { Bars, GithubBadge, VueSlider, VSwatches, VueTabs, VTab },
28101
29-
created () {
30-
this.data = [1, 2, 5, 9, 5, 10, 3, 5, 8, 12, 1, 8, 2, 9, 10, 2, 9, 4, 5, 6, 7, 3, 2, 3, 5]
31-
this.gradient = ['#ffbe88', '#ff93df']
32-
this.code = hanabi(`<bars
102+
data: function () {
103+
return {
104+
barWidth: 4,
105+
radius: 2,
106+
padding: 8,
107+
color1: '#ffbe88',
108+
color2: '#ff93df',
109+
showLabels: false,
110+
labelColor: '#d6d6d6',
111+
labelRotate: 45,
112+
labelSize: 0.5
113+
}
114+
},
115+
116+
methods: {
117+
getData: function () {
118+
return this.showLabels ? this.data : this.data.map(item => item.value);
119+
}
120+
},
121+
122+
computed: {
123+
code: function(){
124+
return hanabi(`<bars
33125
:key="reference-to-your-var"
34-
:data="[1, 2, 5, 9, 5, 10, 3, 5, 8, 12, 1, 8, 2, 9, 10, 2, 9, 4, 5, 6, 7, 3, 2, 3, 5]"
35-
:gradient="['#ffbe88', '#ff93df']"
36-
:barWidth="5"
126+
:data="${ this.showLabels ? '[{value: 1, title: \'#1\'}, {value: 2, title: \'#2\'}, ... ]' : '[1, 2, ... ]' }"
127+
:gradient="['${ this.color1 }', '${ this.color2 }']"
128+
:barWidth="${ this.barWidth }"
129+
:rounding="${ this.radius }"${ this.showLabels ? '\n :labelColor="' + this.labelColor + '"\n' : ''} ${ this.showLabels ? ':labelRotate="' + this.labelRotate + '"\n' : ''} ${ this.showLabels ? ':labelSize="' + this.labelSize + '"' : ''}
37130
:growDuration="1">
38-
</bars>`)
131+
</bars>`);
132+
}
133+
},
134+
135+
created () {
136+
this.data = [{value: 1, title: '#1'}, {value: 2, title: '#2'}, {value: 5, title: '#3'}, {value: 9, title: '#4'}, {value: 5, title: '#5'}, {value: 10, title: '#6'}, {value: 3, title: '#7'}, {value: 5, title: '#8'}, {value: 8, title: '#9'}, {value: 12, title: '#10'}, {value: 1, title: '#11'}, {value: 8, title: '#12'}, {value: 2, title: '#13'}, {value: 9, title: '#14'}, {value: 10, title: '#15'}, {value: 2, title: '#16'}, {value: 9, title: '#17'}, {value: 4, title: '#18'}, {value: 5, title: '#19'}, {value: 6, title: '#20'}, {value: 7, title: '#21'}, {value: 3, title: '#22'}, {value: 2, title: '#23'}, {value: 3, title: '#24'}, {value: 5, title: '#25'}]
39137
},
40138
}
41139
</script>
@@ -44,27 +142,35 @@
44142
h1 {
45143
margin: 0;
46144
font-size: 3rem;
47-
font-weight: normal;
145+
font-weight: bold;
146+
}
147+
148+
.headline {
149+
font-family: Courier,Courier New,monospace;
150+
font-size: 15px;
151+
font-weight: 400;
152+
padding: 20px 0;
48153
}
49154
50155
.main {
51156
max-width: 650px;
52-
margin: 15vh auto 20px;
53-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
157+
margin: 5vh auto 20px;
158+
font-family: Helvetica, Arial, sans-serif;
54159
-webkit-font-smoothing: antialiased;
55160
-moz-osx-font-smoothing: grayscale;
56161
text-align: center;
57162
color: #2c3e50;
58-
font-size: 14px;
163+
font-size: 18px;
59164
}
60165
61166
.code-wrap {
62167
text-align: left;
63168
background-color: #f8f8f8;
64-
padding: 1.2em 1.4em;
169+
padding: 2em 1.4em;
65170
line-height: 1.5em;
66-
margin: 60px 0 0;
171+
margin: 0;
67172
overflow: auto;
173+
font-size: 1rem;
68174
}
69175
70176
.code {
@@ -75,9 +181,97 @@
75181
footer {
76182
margin-top: 40px;
77183
line-height: 2;
184+
font-size: 0.8rem;
185+
color: #c1c1c1;
186+
font-family: Courier,Courier New,monospace;
78187
}
79188
80189
a {
81-
color: #42b983;
190+
color: #39fda4;
191+
}
192+
193+
.setting-label {
194+
text-align: left;
195+
font-size: 1rem;
196+
font-weight: 700;
197+
padding-top: 1rem;
82198
}
199+
200+
.settings-container {
201+
display: flex;
202+
}
203+
204+
@media only screen and (max-width: 480px) {
205+
.settings-container {
206+
display:block
207+
}
208+
}
209+
210+
.tab-content {
211+
background: #f7f7f7;
212+
}
213+
214+
.settings-column {
215+
flex: auto;
216+
margin: 2rem 2rem 0;
217+
padding-bottom: 2rem;
218+
}
219+
220+
.vue-swatches {
221+
display: flex;
222+
}
223+
224+
.vue-swatches__wrapper {
225+
padding-left: 0 !important;
226+
}
227+
228+
.vue-swatches__container {
229+
padding: 5px 0 0 !important;
230+
margin-bottom: 0 !important;
231+
}
232+
233+
.control {
234+
display: flex;
235+
align-items: center;
236+
padding-top: 14px;
237+
}
238+
.control__indicator {
239+
margin-right: .25rem;
240+
width: 1rem;
241+
height: 1rem;
242+
background-color: #ccc;
243+
border-radius: 3px;
244+
}
245+
.control__input:focus ~ .control__indicator {
246+
box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
247+
}
248+
.control__input:checked ~ .control__indicator {
249+
background-color: #3498db;
250+
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTYuMkw0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40TDkgMTYuMnoiLz48L3N2Zz4=');
251+
background-size: 100%;
252+
background-position: center;
253+
background-repeat: no-repeat;
254+
}
255+
/* Visually hide the browser input to ensure it is still focusable via keyboards */
256+
.visually-hidden {
257+
border: 0;
258+
clip: rect(0 0 0 0);
259+
height: 1px;
260+
margin: -1px;
261+
overflow: hidden;
262+
padding: 0;
263+
position: absolute;
264+
width: 1px;
265+
}
266+
267+
.checkbox-label {
268+
font-size: 1rem;
269+
padding-left: 5px;
270+
margin-top: 3px;
271+
}
272+
273+
.vue-tabs .nav>li span.title {
274+
font-weight: 700;
275+
}
276+
83277
</style>

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
"rollup-plugin-buble": "^0.19.6",
4747
"uglify-js": "^3.4.9",
4848
"vbuild": "^7.2.4",
49-
"vue-github-badge": "^1.0.1"
49+
"vue-github-badge": "^1.0.1",
50+
"vue-nav-tabs": "^0.5.7",
51+
"vue-slider-component": "^3.1.4",
52+
"vue-swatches": "^2.0.3"
5053
}
5154
}

‎src/components/bars.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export default {
1313
type: Number,
1414
default: 8
1515
},
16+
rounding: {
17+
type: Number,
18+
default: 2
19+
},
1620
growDuration: {
1721
type: Number,
1822
default: 0.5
@@ -49,6 +53,10 @@ export default {
4953
type: String,
5054
default: '#999999'
5155
},
56+
labelSize: {
57+
type: Number,
58+
default: 0.7
59+
},
5260
height: Number,
5361
width: Number,
5462
padding: {
@@ -76,8 +84,8 @@ export default {
7684
maxY: viewHeight - padding,
7785
labelData: this.labelData,
7886
labelRotate: this.labelRotate,
79-
labelSize: this.labelSize,
80-
labelColor: this.labelColor
87+
labelColor: this.labelColor,
88+
labelSize: this.labelSize
8189
}
8290
const props = this.$props
8391

‎src/components/path.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { genPoints, genBars, genLabels } from '../helpers/path'
22

33
export default {
4-
props: ['data', 'boundary', 'barWidth', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
4+
props: ['data', 'boundary', 'barWidth', 'rounding', 'id', 'gradient', 'growDuration', 'max', 'min', 'labelData', 'labelProps'],
55

66
render (h) {
77
const { data, boundary, max, min, labelData } = this

‎src/helpers/path.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function genPoints (inArr, { minX, minY, maxX, maxY, minBarHeight }, { ma
4444
}
4545

4646
export function genBars (_this, arr, h) {
47-
const { maxX } = _this.boundary
47+
const { maxX, maxY, labelRotate, labelColor, labelSize } = _this.boundary
4848
const totalWidth = (maxX) / (arr.length - 1)
4949
if (!_this.barWidth) {
5050
_this.barWidth = totalWidth - (_this.padding || 5)

0 commit comments

Comments
 (0)