ACV Pie Chart
Features
- Displays values in a pie
Basic usage
Source code
vue
<script>
import AcvPieChart from '@/components/pie-chart/pieChart.vue';
export default {
components: { AcvPieChart },
data() {
return {
data: {
dataType: 'size',
name: 'Total space',
labels: ['Backups', 'Other', 'Free'],
sets: [
{
points: [824, 412, 67]
}
]
}
};
},
methods: {
onSliceClick(index, event) {
console.log('slice clicked');
console.log(index);
console.log(event);
},
onLegendClick(index, event) {
console.log('legend clicked');
console.log(index);
console.log(event);
}
}
};
</script>
<template>
<div class="qa-pie-chart-basic">
<AcvPieChart
:data="data"
@slice-click="onSliceClick"
@legend-click="onLegendClick"
/>
</div>
</template>
<style scoped>
.custom-summary {
padding: 10px;
text-align: center;
}
</style>Dynamic Loading
Source code
vue
<script>
import AcvButton from '@/components/button/button.vue';
import AcvPieChart from '@/components/pie-chart/pieChart.vue';
export default {
components: { AcvButton, AcvPieChart },
data() {
return {
data: {
dataType: 'size',
name: 'Total space',
labels: ['Backups', 'Other', 'Free'],
sets: [
{
points: [824, 412, 67]
}
]
},
dataTwo: {
dataType: 'size',
name: 'Total space',
labels: ['Backups', 'Other', 'Free'],
sets: [
{
points: [824, 412, 67]
}
]
},
origPoints: [824, 412, 67],
alterPoints: [1224, 562, 1326],
isChangedData: false
};
},
methods: {
handleChangeData() {
if (!this.isChangedData) {
this.dataTwo.sets[0].points = this.alterPoints;
}
else {
this.dataTwo.sets[0].points = this.origPoints;
}
console.log(this.dataTwo.sets[0].points);
this.isChangedData = !this.isChangedData;
},
onClose() {
console.log('Alert is closed');
}
}
};
</script>
<template>
<div class="qa-pie-chart-basic">
<AcvPieChart :data="data" />
<AcvButton @click="handleChangeData">
Change data
</AcvButton>
</div>
</template>Example (1)
Source code
vue
<script>
import AcvButton from '@/components/button/button.vue';
import AcvDropdown from '@/components/dropdown/dropdown.vue';
import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
import AcvIcon from '@/components/icon/icon.vue';
import AcvPieChart from '@/components/pie-chart/pieChart.vue';
import AcvWidgetWrapper from '@/components/widget-wrapper/widgetWrapper.vue';
export default {
components: {
AcvDropdownItem,
AcvDropdownMenu,
AcvIcon,
AcvDropdown,
AcvButton,
AcvPieChart,
AcvWidgetWrapper
},
data() {
return {
pureDataChart: {
dataType: 'size',
name: 'Total',
labels: ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'],
sets: [
{
points: [10, 20, 30, 40, 50, 60]
}
]
},
pureDataChartP(index) {
return {
dataType: 'size',
name: 'Total',
labels: this.pureDataChart.labels.slice(0, index),
sets: [
{
points: this.pureDataChart.sets[0].points.slice(0, index)
}
]
};
}
};
},
methods: {}
};
</script>
<template>
<div class="acv-grid-row acv-grid--cols-3">
<div
v-for="index in 6"
:key="`data-${index}`"
class="mt-8"
>
<AcvWidgetWrapper :title="`Data chart ${index}`">
<template #header-aside>
<AcvDropdown placement="bottom-end">
<AcvButton
type="ghost"
size="small"
>
<AcvIcon
name="ellipsis-h--16"
color="fixed-link"
/>
</AcvButton>
<template #dropdown>
<AcvDropdownMenu :max-height="250">
<AcvDropdownItem>First action</AcvDropdownItem>
<AcvDropdownItem>Second action</AcvDropdownItem>
</AcvDropdownMenu>
</template>
</AcvDropdown>
</template>
<AcvPieChart :data="pureDataChartP(index)" />
<template #footer>
<span class="acv-text acv-text--caption">
<span class="ml-8">Label:</span>
<span><b>Value</b></span>
</span>
</template>
</AcvWidgetWrapper>
</div>
</div>
</template>Example (2)
Source code
vue
<script>
import AcvButton from '@/components/button/button.vue';
import AcvDropdown from '@/components/dropdown/dropdown.vue';
import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
import AcvIcon from '@/components/icon/icon.vue';
import AcvPieChart from '@/components/pie-chart/pieChart.vue';
import AcvWidgetWrapper from '@/components/widget-wrapper/widgetWrapper.vue';
export default {
components: {
AcvDropdownItem,
AcvDropdownMenu,
AcvIcon,
AcvDropdown,
AcvButton,
AcvPieChart,
AcvWidgetWrapper
},
data() {
return {
dataStatusChartP(index) {
return {
name: 'Total',
labels: this.dataStatusChart.labels.slice(0, index),
sets: [
{
points: this.dataStatusChart.sets[0].points.slice(0, index)
}
]
};
},
dataStatusChart: {
name: 'Total',
labels: ['Success', 'Warning', 'Critical', 'Danger'],
sets: [
{
points: [50, 50, 75, 25],
colors: [
'chart-success',
'chart-warning',
'chart-critical',
'chart-danger'
]
}
]
}
};
},
methods: {}
};
</script>
<template>
<div class="acv-grid-row acv-grid--cols-2">
<div
v-for="index in 4"
:key="`status-${index}`"
class="mt-8"
>
<AcvWidgetWrapper title="Status chart">
<template #header-aside>
<AcvDropdown placement="bottom-end">
<AcvButton
type="ghost"
size="small"
>
<AcvIcon
name="ellipsis-h--16"
color="fixed-link"
/>
</AcvButton>
<template #dropdown>
<AcvDropdownMenu :max-height="250">
<AcvDropdownItem>First action</AcvDropdownItem>
<AcvDropdownItem>Second action</AcvDropdownItem>
</AcvDropdownMenu>
</template>
</AcvDropdown>
</template>
<AcvPieChart :data="dataStatusChartP(index)" />
<template #footer-aside>
<AcvButton type="ghost">
Scan report
</AcvButton>
</template>
<template #footer>
<div class="acv-text acv-text--caption">
<div>Last scan:</div>
<div><b>26 Jun 2020, 15:45:30</b></div>
</div>
</template>
</AcvWidgetWrapper>
</div>
</div>
</template>Example (3)
Source code
vue
<script setup>
import AcvButton from '@/components/button/button.vue';
import AcvDropdown from '@/components/dropdown/dropdown.vue';
import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
import AcvIcon from '@/components/icon/icon.vue';
import AcvPieChart from '@/components/pie-chart/pieChart.vue';
import AcvWidgetWrapper from '@/components/widget-wrapper/widgetWrapper.vue';
const dataGPUTemperature = {
dataType: 'temperature',
isPercentage: true,
maximumPoint: 110,
sets: [
{
points: [96],
colors: ['chart-danger']
}
],
name: 'GPU temperature'
};
</script>
<template>
<AcvWidgetWrapper
title="GPU temperature"
subtitle="Intel(R) UHD Graphics 620"
>
<template #header-aside>
<AcvDropdown placement="bottom-end">
<AcvButton
type="ghost"
size="small"
>
<AcvIcon
name="ellipsis-h--16"
color="fixed-link"
/>
</AcvButton>
<template #dropdown>
<AcvDropdownMenu :max-height="250">
<AcvDropdownItem>First action</AcvDropdownItem>
<AcvDropdownItem>Second action</AcvDropdownItem>
</AcvDropdownMenu>
</template>
</AcvDropdown>
</template>
<AcvPieChart
:data="dataGPUTemperature"
:legend="false"
/>
<template #footer-aside>
<AcvButton
icon="warning--16"
type="ghost"
>
2 Alerts
</AcvButton>
</template>
<template #footer>
<div class="acv-text acv-text--caption">
<div>Last check:</div>
<div><b>2 minutes ago</b></div>
</div>
</template>
</AcvWidgetWrapper>
</template>
<style scoped>
.chart-wrapper {
background-color: hsl(0deg 0% 100% / 0.05);
}
</style>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| data | object | - | () => null | |
| legend | boolean | - | true | |
| precision | number | - | 0 | |
| summary | boolean | - | true |
Events
| Event name | Properties | Description |
|---|---|---|
| legend-click | ||
| slice-click | ||
| sliceClick | <anonymous1> undefined - undefined | |
| legendClick | <anonymous1> undefined - undefined |
Slots
| Name | Description | Bindings |
|---|---|---|
| summary |