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

Chart demo updates

pull/4649/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/chart/ComboDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -204,6 +206,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

30
doc/chart/DoughnutDoc.vue
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
}
}
}
};
}
}
};

10
doc/chart/HorizontalBarDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -194,6 +196,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {
@ -230,7 +238,7 @@ const setChartOptions = () => {
plugins: {
legend: {
labels: {
fontColor: textColor
color: textColor
}
}
},

8
doc/chart/LineDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -186,6 +188,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

8
doc/chart/LineStylesDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -204,6 +206,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

8
doc/chart/MultiAxisDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -222,6 +224,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

36
doc/chart/PieChartDoc.vue
View File

@ -9,19 +9,13 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
chartData: null,
chartOptions: {
plugins: {
legend: {
labels: {
usePointStyle: true
}
}
}
},
chartOptions: null,
code: {
basic: `
<Chart type="pie" :data="chartData" :options="chartOptions" class="w-full md:w-30rem" />
@ -117,10 +111,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'],
@ -132,6 +133,21 @@ const setChartData = () => {
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
return {
plugins: {
legend: {
labels: {
usePointStyle: true,
color: textColor
}
}
}
};
}
}
};

8
doc/chart/PolarAreaDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -152,6 +154,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

8
doc/chart/RadarDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -168,6 +170,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

8
doc/chart/StackedBarDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -206,6 +208,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {

10
doc/chart/VerticalBarDoc.vue
View File

@ -9,6 +9,8 @@
</template>
<script>
import EventBus from '@/layouts/AppEventBus';
export default {
data() {
return {
@ -192,6 +194,12 @@ const setChartOptions = () => {
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
this.themeChangeListener = () => {
this.chartOptions = this.setChartOptions();
};
EventBus.on('theme-change-complete', this.themeChangeListener);
},
methods: {
setChartData() {
@ -227,7 +235,7 @@ const setChartOptions = () => {
plugins: {
legend: {
labels: {
fontColor: textColor
color: textColor
}
}
},