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 AppFooter from '@/AppFooter.vue';
import AppConfigurator from '@/AppConfigurator.vue';
import EventBus from '@/EventBus';
export default {
data() {
@ -70,6 +71,14 @@ export default {
this.theme = event.theme;
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) {
if (!this.hasClass(element, className)) {

46
src/AppConfigurator.vue
View File

@ -16,28 +16,28 @@
<div class="p-grid">
<div class="p-col-3">
<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'" />
</button>
<span>Saga Blue</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Cyan</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Deep Purple</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Green</span>
@ -51,133 +51,133 @@
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Orange</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Purple</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Saga Teal</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Blue</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Cyan</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Deep Purple</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Green</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Indigo</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Orange</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Purple</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Vela Teal</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Nova Light</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Nova Dark</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Nova Colored</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Nova Vue</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Luna Blue</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Luna Green</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<span>Luna Amber</span>
</div>
<div class="p-col-3">
<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'" />
</button>
<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-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, '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-cyan')"><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-green')"><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-orange')"><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-teal')"><img src="./assets/images/themes/vela-teal.png" alt="Vela Teal" /><span>Vela Teal</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', 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', 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', 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', 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', 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', 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', 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-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-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-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-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-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-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', 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', 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', 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>
</ul>
</transition>
@ -97,8 +97,8 @@ export default {
}
},
methods: {
changeTheme(event, theme) {
this.$emit('change-theme', {theme: theme});
changeTheme(event, theme, dark) {
this.$emit('change-theme', {theme: theme, dark: dark});
this.activeMenuIndex = null;
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;

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

@ -9,16 +9,16 @@
<div class="content-section implementation">
<h3 class="vertical">Vertical</h3>
<Chart type="bar" :data="basicData" />
<Chart type="bar" :data="basicData" :options="basicOptions" />
<h3>Horizontal</h3>
<Chart type="horizontalBar" :data="basicData" />
<Chart type="horizontalBar" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions"/>
<Chart type="bar" :data="multiAxisData" :options="multiAxisOptions "/>
<h3>Stacked</h3>
<Chart type="bar" :data="stackedData" :options="stackedOptions"/>
<Chart type="bar" :data="stackedData" :options="stackedOptions" />
</div>
<BarChartDoc/>
@ -27,8 +27,21 @@
<script>
import BarChartDoc from './BarChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() {
return {
basicData: {
@ -41,7 +54,7 @@ export default {
},
{
label: 'My Second dataset',
backgroundColor: '#9CCC65',
backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -105,7 +118,7 @@ export default {
datasets: [{
type: 'bar',
label: 'Dataset 1',
backgroundColor: '#66BB6A',
backgroundColor: '#42A5F5',
data: [
50,
25,
@ -118,7 +131,7 @@ export default {
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#FFCA28',
backgroundColor: '#66BB6A',
data: [
21,
84,
@ -131,7 +144,7 @@ export default {
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#42A5F5',
backgroundColor: '#FFA726',
data: [
41,
52,
@ -157,7 +170,155 @@ export default {
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: {

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

@ -32,7 +32,7 @@ export default {
},
{
label: 'My Second dataset',
backgroundColor: '#9CCC65',
backgroundColor: '#FFA726',
data: [28, 48, 40, 19, 86, 27, 90]
}
]
@ -43,13 +43,13 @@ export default {
{
label: 'Dataset 1',
backgroundColor: [
'#EC407A',
'#AB47BC',
'#42A5F5',
'#7E57C2',
'#66BB6A',
'#FFCA28',
'#26A69A'
'#EC407A',
'#AB47BC',
'#42A5F5',
'#7E57C2',
'#66BB6A',
'#FFCA28',
'#26A69A'
],
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
@ -102,7 +102,7 @@ export default {
{
type: 'bar',
label: 'Dataset 1',
backgroundColor: '#66BB6A',
backgroundColor: '#42A5F5',
data: [
50,
25,
@ -116,7 +116,7 @@ export default {
{
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#FFCA28',
backgroundColor: '#66BB6A',
data: [
21,
84,
@ -130,7 +130,7 @@ export default {
{
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#42A5F5',
backgroundColor: '#FFA726',
data: [
41,
52,

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

@ -17,8 +17,21 @@
<script>
import ComboChartDoc from './ComboChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() {
return {
chartData: {
@ -26,7 +39,7 @@ export default {
datasets: [{
type: 'line',
label: 'Dataset 1',
borderColor: '#AA5493',
borderColor: '#42A5F5',
borderWidth: 2,
fill: false,
data: [
@ -41,7 +54,7 @@ export default {
}, {
type: 'bar',
label: 'Dataset 2',
backgroundColor: '#2f4860',
backgroundColor: '#66BB6A',
data: [
21,
84,
@ -56,7 +69,7 @@ export default {
}, {
type: 'bar',
label: 'Dataset 3',
backgroundColor: '#00bb7e',
backgroundColor: '#FFA726',
data: [
41,
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: {
'ComboChartDoc': ComboChartDoc
}

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

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

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

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<Chart type="doughnut" :data="chartData" />
<Chart type="doughnut" :data="chartData" :options="chartOptions" />
</div>
<DoughnutChartDoc/>
@ -17,8 +17,17 @@
<script>
import DoughnutChartDoc from './DoughnutChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() {
return {
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'
}
}
}
}
},

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

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

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

@ -9,13 +9,13 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Chart type="line" :data="basicData" />
<Chart type="line" :data="basicData" :options="basicOptions" />
<h3>Multi Axis</h3>
<Chart type="line" :data="multiAxisData" :options="multiAxisOptions" />
<h3>Line Styles</h3>
<Chart type="line" :data="lineStylesData" />
<Chart type="line" :data="lineStylesData" :options="basicOptions" />
</div>
<LineChartDoc/>
@ -24,8 +24,21 @@
<script>
import LineChartDoc from './LineChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.applyDarkTheme();
else
this.applyLightTheme();
});
if (this.isDarkTheme()) {
this.applyDarkTheme();
}
},
data() {
return {
basicData: {
@ -35,15 +48,13 @@ export default {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860'
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e'
borderColor: '#FFA726'
}
]
},
@ -52,14 +63,12 @@ export default {
datasets: [{
label: 'Dataset 1',
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
borderColor: '#42A5F5',
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
}, {
label: 'Dataset 2',
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e',
yAxisID: 'y-axis-2',
data: [28, 48, 40, 19, 86, 27, 90]
@ -107,10 +116,120 @@ export default {
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
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: {

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

@ -26,15 +26,13 @@ export default {
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860'
borderColor: '#42A5F5'
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: '#00bb7e',
borderColor: '#00bb7e'
borderColor: '#FFA726'
}
]
},
@ -44,8 +42,7 @@ export default {
{
label: 'Dataset 1',
fill: false,
backgroundColor: '#2f4860',
borderColor: '#2f4860',
borderColor: '#42A5F5',
yAxisID: 'y-axis-1',
data: [65, 59, 80, 81, 56, 55, 10]
},
@ -104,7 +101,7 @@ export default {
data: [12, 51, 62, 33, 21, 62, 45],
fill: true,
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 class="content-section implementation">
<Chart type="pie" :data="chartData" />
<Chart type="pie" :data="chartData" :options="chartOptions" />
</div>
<PieChartDoc/>
@ -17,8 +17,17 @@
<script>
import PieChartDoc from './PieChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() {
return {
chartData: {
@ -27,17 +36,41 @@ export default {
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
"#42A5F5",
"#66BB6A",
"#FFA726"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
"#64B5F6",
"#81C784",
"#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'
}
}
}
}
},

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

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

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

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<Chart type="polarArea" :data="chartData" />
<Chart type="polarArea" :data="chartData" :options="chartOptions" />
</div>
<PolarAreaChartDoc/>
@ -17,8 +17,17 @@
<script>
import PolarAreaChartDoc from './PolarAreaChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() {
return {
chartData: {
@ -31,11 +40,11 @@ export default {
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
"#42A5F5",
"#66BB6A",
"#FFA726",
"#26C6DA",
"#7E57C2"
],
label: 'My dataset'
}],
@ -46,7 +55,41 @@ export default {
"Grey",
"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: {

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

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

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

@ -8,7 +8,7 @@
</div>
<div class="content-section implementation">
<Chart type="radar" :data="chartData" />
<Chart type="radar" :data="chartData" :options="chartOptions" />
</div>
<RadarChartDoc/>
@ -17,8 +17,17 @@
<script>
import RadarChartDoc from './RadarChartDoc';
import EventBus from '@/EventBus';
export default {
mounted() {
EventBus.$on('change-theme', event => {
if (event.dark)
this.chartOptions = this.getDarkTheme();
else
this.chartOptions = this.getLightTheme();
});
},
data() {
return {
chartData: {
@ -45,7 +54,41 @@ export default {
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: {