data

Animated

type	values	default
Array	[{ props }]

The data property lets you define more complex chart-like progress circles. It is an array of objects with almost all documented properties that define multiple circles in one.

You can specify 2 or more circles as Objects in an array as data. Each circle can be individually configured using almost every available property. It is not necessary to specify all properties, they will be merged with global props, the circle specific props will overwrite the global. The circles are rendered inside each other.

WARNING

Excluded props: lineMode, emptyThickness, legend. These properties will be ignored if data is specified. Also, the legend of this circle remains hidden.

Gap

The gap property defines the distance between circles.

Usage 📜

<ve-progress :data="[{progress: 15, color: 'red'}, {progress: 30, color: 'blue'}]" />

Examples

Like the following example demonstrates, almost any props can be specified for each circle that will override global props. Here we can see that yellow circle has its own gap property

Gap

<ve-progress 
  :gap="10"
  :size="250"
  :data="[
    {
      color: 'blue',
      thickness: 1,
    },
    {
      color: 'red',
      emptyColor: '#F08080',
      thickness: 3,
    },
    {
      color: 'green',
      thickness: 5,
      loading: true,
    },
    {
      gap: 30,
      color: '#FFD700',
      thickness: 7,
      reverse: true,
      determinate: true,
    },
  ]"
  :progress="50" 
/>

NormalLoadingDeterminateNo data

Of course, it is possible to specify a dot or have a half circle.

<ve-progress 
  :data="[
    {
      dot: '20 rgb(220,220,220)',
    },
    {
      color: 'Tomato',
      half: true,
      emptyColor: 'rgba(255,160,122,0.5)',
    },
    {
      color: 'MediumSeaGreen',
    },
  ]"
  :progress="50" 
/>

NormalLoadingDeterminateNo data

It also applies to dash, loader and animation properties.

<ve-progress 
  :data="[
    {
      dash: 'strict 60 0.8',
    },
    {
      color: 'Tomato',
      loading: true,
      loader: {
        color: 'rgba(255,160,122,1)',
        duration: 500,
        lineMode: 'in 10',
      },
    },
    {
      color: 'MediumSeaGreen',
      animation: 'loop 2000 1000',
    },
  ]"
  :progress="50" 
/>

NormalLoadingDeterminateNo data

It is also important to mention that no property in data Objects is required. We can create circles by just passing an array of empty objects. But (global) progress still must be set.

<ve-progress :data="[{}, {}, {}]" :progress="50" />

NormalLoadingDeterminateNo data

Even almost real charts can be created. But this requires tricky manual calculations The following example is for demonstration purposes only and should not be taken too seriously. For such use cases, appropriate chart libraries should be used.

Data 1

Data 2

Data 3

Data 4

<template>
  <div class="flex gap-4">
    <ve-progress :data="data" :size="150" :progress="50" />
    <div>
      <div v-for="(chart, i) in data" :key="i">
        <span
          class="chart-legend"
          :style="{ backgroundColor: chart.color as string }"
        ></span>
        <span>Data {{ i + 1 }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Data } from "../../types";

export const data: Data = [
  {
    color: "#7B68EE",
    progress: 15,
  },
  {
    color: "#F08080",
    emptyColor: "transparent",
    progress: 40,
    angle: -45,
  },
  {
    color: "LightSeaGreen",
    emptyColor: "transparent",
    progress: 20,
    angle: 90,
  },
  {
    color: "#3CB371",
    emptyColor: "transparent",
    progress: 31,
    angle: 160,
  },
];

export default {
  setup() {
    return {
      data,
    };
  },
};
</script>
<style lang="scss">
.chart-legend {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 10px;
}
</style>

NormalLoadingDeterminateNo data