vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Dark theme support for charts

pull/345/head
cagataycivici 2020-05-13 15:25:03 +03:00
parent ec3e1c2503
commit a2cdbbc833
17 changed files with 628 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.vue
View File

@ -30,6 +30,7 @@ import AppTopBar from '@/AppTopBar.vue';
import AppMenu from '@/AppMenu.vue'; import AppMenu from '@/AppMenu.vue';
import AppFooter from '@/AppFooter.vue'; import AppFooter from '@/AppFooter.vue';
import AppConfigurator from '@/AppConfigurator.vue'; import AppConfigurator from '@/AppConfigurator.vue';
import EventBus from '@/EventBus';
export default { export default {
data() { data() {
@ -70,6 +71,14 @@ export default {
this.theme = event.theme; this.theme = event.theme;
this.activeMenuIndex = null; this.activeMenuIndex = null;
EventBus.$emit('change-theme', event);
if (event.dark)
document.body.setAttribute('data-darktheme', 'true');
else
document.body.removeAttribute('data-darktheme')
}, },
addClass(element, className) { addClass(element, className) {
if (!this.hasClass(element, className)) { if (!this.hasClass(element, className)) {

46
src/AppConfigurator.vue
View File

@ -16,28 +16,28 @@
<div class="p-grid"> <div class="p-grid">
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue', false)"/> <img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue')"/>
<i class="pi pi-check" v-if="theme === 'saga-blue'" /> <i class="pi pi-check" v-if="theme === 'saga-blue'" />
</button> </button>
<span>Saga Blue</span> <span>Saga Blue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" @click="changeTheme($event, 'saga-cyan', false)"/> <img src="./assets/images/themes/saga-cyan.png" alt="Saga Cyan" @click="changeTheme($event, 'saga-cyan')"/>
<i class="pi pi-check" v-if="theme === 'saga-cyan'" /> <i class="pi pi-check" v-if="theme === 'saga-cyan'" />
</button> </button>
<span>Saga Cyan</span> <span>Saga Cyan</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" @click="changeTheme($event, 'saga-deeppurple', false)"/> <img src="./assets/images/themes/saga-deeppurple.png" alt="Saga Deep Purple" @click="changeTheme($event, 'saga-deeppurple')"/>
<i class="pi pi-check" v-if="theme === 'saga-deeppurple'" /> <i class="pi pi-check" v-if="theme === 'saga-deeppurple'" />
</button> </button>
<span>Saga Deep Purple</span> <span>Saga Deep Purple</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green', false)"/> <img src="./assets/images/themes/saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green')"/>
<i class="pi pi-check" v-if="theme === 'saga-green'" /> <i class="pi pi-check" v-if="theme === 'saga-green'" />
</button> </button>
<span>Saga Green</span> <span>Saga Green</span>
@ -51,133 +51,133 @@
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange', false)"/> <img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange')"/>
<i class="pi pi-check" v-if="theme === 'saga-orange'" /> <i class="pi pi-check" v-if="theme === 'saga-orange'" />
</button> </button>
<span>Saga Orange</span> <span>Saga Orange</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple', false)"/> <img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple')"/>
<i class="pi pi-check" v-if="theme === 'saga-purple'" /> <i class="pi pi-check" v-if="theme === 'saga-purple'" />
</button> </button>
<span>Saga Purple</span> <span>Saga Purple</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" @click="changeTheme($event, 'saga-teal', false)"/> <img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" @click="changeTheme($event, 'saga-teal')"/>
<i class="pi pi-check" v-if="theme === 'saga-teal'" /> <i class="pi pi-check" v-if="theme === 'saga-teal'" />
</button> </button>
<span>Saga Teal</span> <span>Saga Teal</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-blue'" /> <i class="pi pi-check" v-if="theme === 'vela-blue'" />
</button> </button>
<span>Vela Blue</span> <span>Vela Blue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" @click="changeTheme($event, 'vela-cyan', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" @click="changeTheme($event, 'vela-cyan', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-cyan'" /> <i class="pi pi-check" v-if="theme === 'vela-cyan'" />
</button> </button>
<span>Vela Cyan</span> <span>Vela Cyan</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" @click="changeTheme($event, 'vela-deeppurple', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" @click="changeTheme($event, 'vela-deeppurple', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-deeppurple'" /> <i class="pi pi-check" v-if="theme === 'vela-deeppurple'" />
</button> </button>
<span>Vela Deep Purple</span> <span>Vela Deep Purple</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-green'" /> <i class="pi pi-check" v-if="theme === 'vela-green'" />
</button> </button>
<span>Vela Green</span> <span>Vela Green</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" @click="changeTheme($event, 'vela-indigo', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" @click="changeTheme($event, 'vela-indigo', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-indigo'" /> <i class="pi pi-check" v-if="theme === 'vela-indigo'" />
</button> </button>
<span>Vela Indigo</span> <span>Vela Indigo</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-orange'" /> <i class="pi pi-check" v-if="theme === 'vela-orange'" />
</button> </button>
<span>Vela Orange</span> <span>Vela Orange</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-purple'" /> <i class="pi pi-check" v-if="theme === 'vela-purple'" />
</button> </button>
<span>Vela Purple</span> <span>Vela Purple</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" @click="changeTheme($event, 'vela-teal', 'dark-theme-alt')"/> <img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" @click="changeTheme($event, 'vela-teal', true)"/>
<i class="pi pi-check" v-if="theme === 'vela-teal'" /> <i class="pi pi-check" v-if="theme === 'vela-teal'" />
</button> </button>
<span>Vela Teal</span> <span>Vela Teal</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light', false)"/> <img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light')"/>
<i class="pi pi-check" v-if="theme === 'nova-light'" /> <i class="pi pi-check" v-if="theme === 'nova-light'" />
</button> </button>
<span>Nova Light</span> <span>Nova Light</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark', false)"/> <img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark')"/>
<i class="pi pi-check" v-if="theme === 'nova-dark'" /> <i class="pi pi-check" v-if="theme === 'nova-dark'" />
</button> </button>
<span>Nova Dark</span> <span>Nova Dark</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored', false)"/> <img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored')"/>
<i class="pi pi-check" v-if="theme === 'nova-colored'" /> <i class="pi pi-check" v-if="theme === 'nova-colored'" />
</button> </button>
<span>Nova Colored</span> <span>Nova Colored</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Colored" @click="changeTheme($event, 'nova-vue', false)"/> <img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Colored" @click="changeTheme($event, 'nova-vue')"/>
<i class="pi pi-check" v-if="theme === 'nova-vue'" /> <i class="pi pi-check" v-if="theme === 'nova-vue'" />
</button> </button>
<span>Nova Vue</span> <span>Nova Vue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', 'dark-theme')"/> <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', true)"/>
<i class="pi pi-check" v-if="theme === 'luna-blue'" /> <i class="pi pi-check" v-if="theme === 'luna-blue'" />
</button> </button>
<span>Luna Blue</span> <span>Luna Blue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', 'dark-theme')"/> <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', true)"/>
<i class="pi pi-check" v-if="theme === 'luna-green'" /> <i class="pi pi-check" v-if="theme === 'luna-green'" />
</button> </button>
<span>Luna Green</span> <span>Luna Green</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', 'dark-theme')" target="_blank"/> <img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', true)" target="_blank"/>
<i class="pi pi-check" v-if="theme === 'luna-amber'" /> <i class="pi pi-check" v-if="theme === 'luna-amber'" />
</button> </button>
<span>Luna Amber</span> <span>Luna Amber</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', 'dark-theme')" target="_blank"/> <img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', true)" target="_blank"/>
<i class="pi pi-check" v-if="theme === 'luna-pink'" /> <i class="pi pi-check" v-if="theme === 'luna-pink'" />
</button> </button>
<span>Luna Pink</span> <span>Luna Pink</span>

28
src/AppTopBar.vue
View File

@ -25,22 +25,22 @@
<li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li> <li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
<li><a @click="changeTheme($event, 'saga-purple')"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li> <li><a @click="changeTheme($event, 'saga-purple')"><img src="./assets/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
<li><a @click="changeTheme($event, 'saga-teal')"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li> <li><a @click="changeTheme($event, 'saga-teal')"><img src="./assets/images/themes/saga-teal.png" alt="Saga Teal" /><span>Saga Teal</span></a></li>
<li><a @click="changeTheme($event, 'vela-blue')"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li> <li><a @click="changeTheme($event, 'vela-blue', true)"><img src="./assets/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
<li><a @click="changeTheme($event, 'vela-cyan')"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" /><span>Vela Cyan</span></a></li> <li><a @click="changeTheme($event, 'vela-cyan', true)"><img src="./assets/images/themes/vela-cyan.png" alt="Vela Cyan" /><span>Vela Cyan</span></a></li>
<li><a @click="changeTheme($event, 'vela-deeppurple')"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" /><span>Vela Deep Purple</span></a></li> <li><a @click="changeTheme($event, 'vela-deeppurple', true)"><img src="./assets/images/themes/vela-deeppurple.png" alt="Vela Deep Purple" /><span>Vela Deep Purple</span></a></li>
<li><a @click="changeTheme($event, 'vela-green')"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li> <li><a @click="changeTheme($event, 'vela-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
<li><a @click="changeTheme($event, 'vela-indigo')"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li> <li><a @click="changeTheme($event, 'vela-indigo', true)"><img src="./assets/images/themes/vela-indigo.png" alt="Vela Indigo" /><span>Vela Indigo</span></a></li>
<li><a @click="changeTheme($event, 'vela-orange')"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li> <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
<li><a @click="changeTheme($event, 'vela-purple')"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li> <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
<li><a @click="changeTheme($event, 'vela-teal')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li> <li><a @click="changeTheme($event, 'vela-teal', true)"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</span></a></li>
<li><a @click="changeTheme($event, 'nova-light')"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li> <li><a @click="changeTheme($event, 'nova-light')"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
<li><a @click="changeTheme($event, 'nova-dark')"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li> <li><a @click="changeTheme($event, 'nova-dark')"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
<li><a @click="changeTheme($event, 'nova-colored')"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li> <li><a @click="changeTheme($event, 'nova-colored')"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
<li><a @click="changeTheme($event, 'nova-vue')"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li> <li><a @click="changeTheme($event, 'nova-vue')"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
<li><a @click="changeTheme($event, 'luna-amber')"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li> <li><a @click="changeTheme($event, 'luna-amber', true)"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
<li><a @click="changeTheme($event, 'luna-blue')"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li> <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
<li><a @click="changeTheme($event, 'luna-green')"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li> <li><a @click="changeTheme($event, 'luna-green', true)"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
<li><a @click="changeTheme($event, 'luna-pink')"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li> <li><a @click="changeTheme($event, 'luna-pink', true)"><img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></a></li>
<li><a @click="changeTheme($event, 'rhea')"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li> <li><a @click="changeTheme($event, 'rhea')"><img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></a></li>
</ul> </ul>
</transition> </transition>
@ -97,8 +97,8 @@ export default {
} }
}, },
methods: { methods: {
changeTheme(event, theme) { changeTheme(event, theme, dark) {
this.$emit('change-theme', {theme: theme}); this.$emit('change-theme', {theme: theme, dark: dark});
this.activeMenuIndex = null; this.activeMenuIndex = null;
event.preventDefault(); event.preventDefault();
}, },

3
src/EventBus.js Normal file
View File

@ -0,0 +1,3 @@
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

173
src/views/chart/BarChartDemo.vue
View File

@ -9,10 +9,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="vertical">Vertical</h3> <h3 class="vertical">Vertical</h3>
<Chart type="bar" :data="basicData" /> <Chart type="bar" :data="basicData" :options="basicOptions" />
<h3>Horizontal</h3> <h3>Horizontal</h3>
<Chart type="horizontalBar" :data="basicData" /> <Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3> <h3>Multi Axis</h3>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/> <Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
@ -27,8 +27,21 @@
<script> <script>
import BarChartDoc from './BarChartDoc'; import BarChartDoc from './BarChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() { data() {
return { return {
basicData: { basicData: {
@ -41,7 +54,7 @@ export default {
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: '#9CCC65', backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -105,7 +118,7 @@ export default {
datasets: [{ datasets: [{
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: '#66BB6A', backgroundColor: '#42A5F5',
data: [ data: [
50, 50,
25, 25,
@ -118,7 +131,7 @@ export default {
}, { }, {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: '#FFCA28', backgroundColor: '#66BB6A',
data: [ data: [
21, 21,
84, 84,
@ -131,7 +144,7 @@ export default {
}, { }, {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: '#42A5F5', backgroundColor: '#FFA726',
data: [ data: [
41, 41,
52, 52,
@ -157,7 +170,155 @@ export default {
stacked: true stacked: true
}] }]
} }
},
basicOptions: null
} }
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
applyLightTheme() {
this.basicOptions = {
legend: {
labels: {
fontColor: '#495057'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#495057'
}
}],
yAxes: [{
ticks: {
fontColor: '#495057'
}
}]
}
};
this.stackedOptions.scales.xAxes[0].ticks = {
fontColor: '#495057'
};
this.stackedOptions.scales.xAxes[0].gridLines = {
color: '#ebedef'
};
this.stackedOptions.scales.yAxes[0].ticks = {
fontColor: '#495057'
};
this.stackedOptions.scales.yAxes[0].gridLines = {
color: '#ebedef'
};
this.stackedOptions.legend = {
labels: {
fontColor: '#495057'
}
};
this.stackedOptions = {...this.stackedOptions};
this.multiAxisOptions.scales.xAxes = [{
ticks: {
fontColor: '#495057'
},
gridLines: {
color: '#ebedef'
}
}
];
this.multiAxisOptions.scales.yAxes[0].ticks = {
fontColor: '#495057'
};
this.multiAxisOptions.scales.yAxes[0].gridLines = {
color: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[1].ticks = {
fontColor: '#495057'
};
this.multiAxisOptions.scales.yAxes[1].gridLines = {
color: '#ebedef'
};
this.multiAxisOptions.legend = {
labels: {
fontColor: '#495057'
}
};
this.multiAxisOptions = {...this.multiAxisOptions};
},
applyDarkTheme() {
this.basicOptions = {
legend: {
labels: {
fontColor: '#ebedef'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}],
yAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}]
}
};
this.stackedOptions.scales.xAxes[0].ticks = {
fontColor: '#ebedef'
};
this.stackedOptions.scales.xAxes[0].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.stackedOptions.scales.yAxes[0].ticks = {
fontColor: '#ebedef'
};
this.stackedOptions.scales.yAxes[0].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.stackedOptions.legend = {
labels: {
fontColor: '#ebedef'
}
};
this.stackedOptions = {...this.stackedOptions};
this.multiAxisOptions.scales.xAxes = [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}
];
this.multiAxisOptions.scales.yAxes[0].ticks = {
fontColor: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[0].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.multiAxisOptions.scales.yAxes[1].ticks = {
fontColor: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[1].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.multiAxisOptions.legend = {
labels: {
fontColor: '#ebedef'
}
};
this.multiAxisOptions = {...this.multiAxisOptions};
} }
}, },
components: { components: {

8
src/views/chart/BarChartDoc.vue
View File

@ -32,7 +32,7 @@ export default {
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
backgroundColor: '#9CCC65', backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
} }
] ]
@ -102,7 +102,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 1', label: 'Dataset 1',
backgroundColor: '#66BB6A', backgroundColor: '#42A5F5',
data: [ data: [
50, 50,
25, 25,
@ -116,7 +116,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: '#FFCA28', backgroundColor: '#66BB6A',
data: [ data: [
21, 21,
84, 84,
@ -130,7 +130,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: '#42A5F5', backgroundColor: '#FFA726',
data: [ data: [
41, 41,
52, 52,

72
src/views/chart/ComboChartDemo.vue
View File

@ -17,8 +17,21 @@
<script> <script>
import ComboChartDoc from './ComboChartDoc'; import ComboChartDoc from './ComboChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() { data() {
return { return {
chartData: { chartData: {
@ -26,7 +39,7 @@ export default {
datasets: [{ datasets: [{
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: '#AA5493', borderColor: '#42A5F5',
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
data: [ data: [
@ -41,7 +54,7 @@ export default {
}, { }, {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: '#2f4860', backgroundColor: '#66BB6A',
data: [ data: [
21, 21,
84, 84,
@ -56,7 +69,7 @@ export default {
}, { }, {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: '#00bb7e', backgroundColor: '#FFA726',
data: [ data: [
41, 41,
52, 52,
@ -81,6 +94,59 @@ export default {
} }
} }
}, },
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
applyLightTheme() {
this.chartOptions = {
legend: {
labels: {
fontColor: '#495057'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#495057'
}
}],
yAxes: [{
ticks: {
fontColor: '#495057'
}
}]
}
}
},
applyDarkTheme() {
this.chartOptions = {
legend: {
labels: {
fontColor: '#ebedef'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}],
yAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}]
}
};
}
},
components: { components: {
'ComboChartDoc': ComboChartDoc 'ComboChartDoc': ComboChartDoc
} }

6
src/views/chart/ComboChartDoc.vue
View File

@ -17,7 +17,7 @@ export default {
datasets: [{ datasets: [{
type: 'line', type: 'line',
label: 'Dataset 1', label: 'Dataset 1',
borderColor: '#AA5493', borderColor: '#42A5F5',
borderWidth: 2, borderWidth: 2,
fill: false, fill: false,
data: [ data: [
@ -33,7 +33,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 2', label: 'Dataset 2',
backgroundColor: '#2f4860', backgroundColor: '#66BB6A',
data: [ data: [
21, 21,
84, 84,
@ -49,7 +49,7 @@ export default {
{ {
type: 'bar', type: 'bar',
label: 'Dataset 3', label: 'Dataset 3',
backgroundColor: '#00bb7e', backgroundColor: '#FFA726',
data: [ data: [
41, 41,
52, 52,

35
src/views/chart/DoughnutChartDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="doughnut" :data="chartData" /> <Chart type="doughnut" :data="chartData" :options="chartOptions" />
</div> </div>
<DoughnutChartDoc/> <DoughnutChartDoc/>
@ -17,8 +17,17 @@
<script> <script>
import DoughnutChartDoc from './DoughnutChartDoc'; import DoughnutChartDoc from './DoughnutChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() { data() {
return { return {
chartData: { chartData: {
@ -38,6 +47,30 @@ export default {
] ]
} }
] ]
},
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
}
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
getLightTheme() {
return {
legend: {
labels: {
fontColor: '#495057'
}
}
}
},
getDarkTheme() {
return {
legend: {
labels: {
fontColor: '#ebedef'
}
}
} }
} }
}, },

12
src/views/chart/DoughnutChartDoc.vue
View File

@ -18,14 +18,14 @@ export default {
{ {
data: [300, 50, 100], data: [300, 50, 100],
backgroundColor: [ backgroundColor: [
"#FF6384", "#42A5F5",
"#36A2EB", "#66BB6A",
"#FFCE56" "#FFA726"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#FF6384", "#64B5F6",
"#36A2EB", "#81C784",
"#FFCE56" "#FFB74D"
] ]
} }
] ]

139
src/views/chart/LineChartDemo.vue
View File

@ -9,13 +9,13 @@
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Basic</h3> <h3 class="first">Basic</h3>
<Chart type="line" :data="basicData" /> <Chart type="line" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3> <h3>Multi Axis</h3>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" /> <Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
<h3>Line Styles</h3> <h3>Line Styles</h3>
<Chart type="line" :data="lineStylesData" /> <Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div> </div>
<LineChartDoc/> <LineChartDoc/>
@ -24,8 +24,21 @@
<script> <script>
import LineChartDoc from './LineChartDoc'; import LineChartDoc from './LineChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() { data() {
return { return {
basicData: { basicData: {
@ -35,15 +48,13 @@ export default {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
backgroundColor: '#2f4860', borderColor: '#42A5F5'
borderColor: '#2f4860'
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
backgroundColor: '#00bb7e', borderColor: '#FFA726'
borderColor: '#00bb7e'
} }
] ]
}, },
@ -52,14 +63,12 @@ export default {
datasets: [{ datasets: [{
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
backgroundColor: '#2f4860', borderColor: '#42A5F5',
borderColor: '#2f4860',
yAxisID: 'y-axis-1', yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10] data: [65, 59, 80, 81, 56, 55, 10]
}, { }, {
label: 'Dataset 2', label: 'Dataset 2',
fill: false, fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e', borderColor: '#00bb7e',
yAxisID: 'y-axis-2', yAxisID: 'y-axis-2',
data: [28, 48, 40, 19, 86, 27, 90] data: [28, 48, 40, 19, 86, 27, 90]
@ -107,10 +116,120 @@ export default {
data: [12, 51, 62, 33, 21, 62, 45], data: [12, 51, 62, 33, 21, 62, 45],
fill: true, fill: true,
borderColor: '#FFA726', borderColor: '#FFA726',
backgroundColor: '#FFCC80' backgroundColor: 'rgba(255,167,38,0.2)'
} }
] ]
},
basicOptions: null
} }
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
applyLightTheme() {
this.basicOptions = {
legend: {
labels: {
fontColor: '#495057'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#495057'
}
}],
yAxes: [{
ticks: {
fontColor: '#495057'
}
}]
}
};
this.multiAxisOptions.scales.xAxes = [{
ticks: {
fontColor: '#495057'
},
gridLines: {
color: '#ebedef'
}
}
];
this.multiAxisOptions.scales.yAxes[0].ticks = {
fontColor: '#495057'
};
this.multiAxisOptions.scales.yAxes[0].gridLines = {
color: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[1].ticks = {
fontColor: '#495057'
};
this.multiAxisOptions.scales.yAxes[1].gridLines = {
color: '#ebedef'
};
this.multiAxisOptions.legend = {
labels: {
fontColor: '#495057'
}
};
this.multiAxisOptions = {...this.multiAxisOptions};
},
applyDarkTheme() {
this.basicOptions = {
legend: {
labels: {
fontColor: '#ebedef'
}
},
scales: {
xAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}],
yAxes: [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}]
}
};
this.multiAxisOptions.scales.xAxes = [{
ticks: {
fontColor: '#ebedef'
},
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}
];
this.multiAxisOptions.scales.yAxes[0].ticks = {
fontColor: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[0].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.multiAxisOptions.scales.yAxes[1].ticks = {
fontColor: '#ebedef'
};
this.multiAxisOptions.scales.yAxes[1].gridLines = {
color: 'rgba(255,255,255,0.2)'
};
this.multiAxisOptions.legend = {
labels: {
fontColor: '#ebedef'
}
};
this.multiAxisOptions = {...this.multiAxisOptions};
} }
}, },
components: { components: {

11
src/views/chart/LineChartDoc.vue
View File

@ -26,15 +26,13 @@ export default {
label: 'First Dataset', label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40], data: [65, 59, 80, 81, 56, 55, 40],
fill: false, fill: false,
backgroundColor: '#2f4860', borderColor: '#42A5F5'
borderColor: '#2f4860'
}, },
{ {
label: 'Second Dataset', label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90], data: [28, 48, 40, 19, 86, 27, 90],
fill: false, fill: false,
backgroundColor: '#00bb7e', borderColor: '#FFA726'
borderColor: '#00bb7e'
} }
] ]
}, },
@ -44,8 +42,7 @@ export default {
{ {
label: 'Dataset 1', label: 'Dataset 1',
fill: false, fill: false,
backgroundColor: '#2f4860', borderColor: '#42A5F5',
borderColor: '#2f4860',
yAxisID: 'y-axis-1', yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10] data: [65, 59, 80, 81, 56, 55, 10]
}, },
@ -104,7 +101,7 @@ export default {
data: [12, 51, 62, 33, 21, 62, 45], data: [12, 51, 62, 33, 21, 62, 45],
fill: true, fill: true,
borderColor: '#FFA726', borderColor: '#FFA726',
backgroundColor: '#FFCC80' backgroundColor: 'rgba(255,167,38,0.2)'
} }
] ]
} }

47
src/views/chart/PieChartDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="pie" :data="chartData" /> <Chart type="pie" :data="chartData" :options="chartOptions" />
</div> </div>
<PieChartDoc/> <PieChartDoc/>
@ -17,8 +17,17 @@
<script> <script>
import PieChartDoc from './PieChartDoc'; import PieChartDoc from './PieChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() { data() {
return { return {
chartData: { chartData: {
@ -27,17 +36,41 @@ export default {
{ {
data: [300, 50, 100], data: [300, 50, 100],
backgroundColor: [ backgroundColor: [
"#FF6384", "#42A5F5",
"#36A2EB", "#66BB6A",
"#FFCE56" "#FFA726"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#FF6384", "#64B5F6",
"#36A2EB", "#81C784",
"#FFCE56" "#FFB74D"
] ]
} }
] ]
},
chartOptions: this.isDarkTheme() ? this.getDarkTheme() : this.getLightTheme()
}
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
getLightTheme() {
return {
legend: {
labels: {
fontColor: '#495057'
}
}
}
},
getDarkTheme() {
return {
legend: {
labels: {
fontColor: '#ebedef'
}
}
} }
} }
}, },

12
src/views/chart/PieChartDoc.vue
View File

@ -18,14 +18,14 @@ export default {
{ {
data: [300, 50, 100], data: [300, 50, 100],
backgroundColor: [ backgroundColor: [
"#FF6384", "#42A5F5",
"#36A2EB", "#66BB6A",
"#FFCE56" "#FFA726"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#FF6384", "#64B5F6",
"#36A2EB", "#81C784",
"#FFCE56" "#FFB74D"
] ]
} }
] ]

55
src/views/chart/PolarAreaChartDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="polarArea" :data="chartData" /> <Chart type="polarArea" :data="chartData" :options="chartOptions" />
</div> </div>
<PolarAreaChartDoc/> <PolarAreaChartDoc/>
@ -17,8 +17,17 @@
<script> <script>
import PolarAreaChartDoc from './PolarAreaChartDoc'; import PolarAreaChartDoc from './PolarAreaChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() { data() {
return { return {
chartData: { chartData: {
@ -31,11 +40,11 @@ export default {
14 14
], ],
backgroundColor: [ backgroundColor: [
"#FF6384", "#42A5F5",
"#4BC0C0", "#66BB6A",
"#FFCE56", "#FFA726",
"#E7E9ED", "#26C6DA",
"#36A2EB" "#7E57C2"
], ],
label: 'My dataset' label: 'My dataset'
}], }],
@ -46,7 +55,41 @@ export default {
"Grey", "Grey",
"Blue" "Blue"
] ]
},
chartOptions: this.isDarkTheme() ? this.getDarkTheme(): this.getLightTheme()
} }
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
getLightTheme() {
return {
legend: {
labels: {
fontColor: '#495057'
}
},
scale: {
gridLines: {
color: '#ebedef'
}
}
};
},
getDarkTheme() {
return {
legend: {
labels: {
fontColor: '#ebedef'
}
},
scale: {
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}
};
} }
}, },
components: { components: {

10
src/views/chart/PolarAreaChartDoc.vue
View File

@ -22,11 +22,11 @@ export default {
14 14
], ],
backgroundColor: [ backgroundColor: [
"#FF6384", "#42A5F5",
"#4BC0C0", "#66BB6A",
"#FFCE56", "#FFA726",
"#E7E9ED", "#26C6DA",
"#36A2EB" "#7E57C2"
], ],
label: 'My dataset' label: 'My dataset'
}], }],

45
src/views/chart/RadarChartDemo.vue
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<Chart type="radar" :data="chartData" /> <Chart type="radar" :data="chartData" :options="chartOptions" />
</div> </div>
<RadarChartDoc/> <RadarChartDoc/>
@ -17,8 +17,17 @@
<script> <script>
import RadarChartDoc from './RadarChartDoc'; import RadarChartDoc from './RadarChartDoc';
import EventBus from '@/EventBus';
export default { export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() { data() {
return { return {
chartData: { chartData: {
@ -45,7 +54,41 @@ export default {
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100]
} }
] ]
},
chartOptions: this.isDarkTheme() ? this.getDarkTheme(): this.getLightTheme()
} }
},
methods: {
isDarkTheme() {
return document.body.getAttribute('data-darktheme') !== null;
},
getLightTheme() {
return {
legend: {
labels: {
fontColor: '#495057'
}
},
scale: {
gridLines: {
color: '#ebedef'
}
}
};
},
getDarkTheme() {
return {
legend: {
labels: {
fontColor: '#ebedef'
}
},
scale: {
gridLines: {
color: 'rgba(255,255,255,0.2)'
}
}
};
} }
}, },
components: { components: {