ACV Pie Chart

Features

• Displays values in a pie

Basic usage

Data is loading...

Source code

<script>
  import AcvPieChart from '@/widgets/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

Data is loading...

Source code

<script>
  import AcvButton from '@/components/button/button.vue';
  import AcvPieChart from '@/widgets/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)

Data chart 1

Data is loading...

Label:Value

Data chart 2

Data is loading...

Label:Value

Data chart 3

Data is loading...

Label:Value

Data chart 4

Data is loading...

Label:Value

Data chart 5

Data is loading...

Label:Value

Data chart 6

Data is loading...

Label:Value

Source code

<script>
  import AcvButton from '@/components/button/button.vue';
  import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
  import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
  import AcvDropdown from '@/components/dropdown/dropdown.vue';
  import AcvIcon from '@/components/icon/icon.vue';
  import AcvPieChart from '@/widgets/pie-chart/pieChart.vue';
  import AcvWidgetWrapper from '@/widgets/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)

Status chart

Data is loading...

Last scan:

26 Jun 2020, 15:45:30

Status chart

Data is loading...

Last scan:

26 Jun 2020, 15:45:30

Status chart

Data is loading...

Last scan:

26 Jun 2020, 15:45:30

Status chart

Data is loading...

Last scan:

26 Jun 2020, 15:45:30

Source code

<script>
  import AcvButton from '@/components/button/button.vue';
  import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
  import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
  import AcvDropdown from '@/components/dropdown/dropdown.vue';
  import AcvIcon from '@/components/icon/icon.vue';
  import AcvPieChart from '@/widgets/pie-chart/pieChart.vue';
  import AcvWidgetWrapper from '@/widgets/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)

GPU temperature

Intel(R) UHD Graphics 620

Data is loading...

Last check:

2 minutes ago

Source code

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import AcvDropdownItem from '@/components/dropdown/dropdownItem.vue';
  import AcvDropdownMenu from '@/components/dropdown/dropdownMenu.vue';
  import AcvDropdown from '@/components/dropdown/dropdown.vue';
  import AcvIcon from '@/components/icon/icon.vue';
  import AcvPieChart from '@/widgets/pie-chart/pieChart.vue';
  import AcvWidgetWrapper from '@/widgets/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
colors		array	-
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