Chart demo updates

This commit is contained in:
Tuğçe Küçükoğlu 2023-10-17 16:12:53 +03:00
parent a37fb0d010
commit ff35703343
11 changed files with 126 additions and 16 deletions

View file

@ -9,13 +9,13 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
chartData: null,
chartOptions: {
cutout: '60%'
},
chartOptions: null,
code: {
basic: `
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@ -99,10 +99,17 @@ const setChartData = () => {
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.body);
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['A', 'B', 'C'],
@ -114,6 +121,21 @@ const setChartData = () => {
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
return {
plugins: {
legend: {
labels: {
cutout: '60%',
color: textColor
}
}
}
};
}
}
};