ghalex / vue3-charts

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable
https://vue3charts.org
MIT License
135 stars 23 forks source link

Pie Chart use uniq data #23

Closed HarisUa closed 2 years ago

HarisUa commented 2 years ago

Hi there, @ghalex!

The problem is that pie chart cannot display the same values and shows only unique ones I found a line that creates this problem By using r.uniq all duplicate data is deleted :( https://github.com/ghalex/vue3-charts/blob/a9f72a8de626db82f6aa271255c99c25e15c8ea1/src/utils/index.ts#L6

Example

Data provided:

export const notUniqueData = [
  { name: 'John', avg: 30 },
  { name: 'San', avg: 20 },
  { name: 'Oliver', avg: 20 },
  { name: 'Kate', avg: 10 },
  { name: 'Ton', avg: 10 },
  { name: 'Khan', avg: 10 },
  { name: 'Talli', avg: 30 },
  { name: 'Pan', avg: 30 },
  { name: 'Kate', avg: 30 },
  { name: 'Tiny', avg: 30 }
]

Component:

<Chart
  direction="circular"
  :data="data"
  :axis="axis"
  :config="{ controlHover: false }"
  >
  <template #layers>
    <Pie
      :dataKeys="['name', 'avg']"
      :pie-style="{ innerRadius: 100, padAngle: 0.05 }" />
  </template>
  <template #widgets>
    <Tooltip
      :config="{
        name: { },
        avg: { hide: true},
        pl: { label: 'value' },
        inc: { hide: true }
      }"
      hideLine
    />
  </template>
</Chart>

Results with r.uniq and without it:

image

ghalex commented 2 years ago

Hi @HarisUa,

Thanks for taking a look at this, I will check myself today and push a fix.

Thanks, @ghalex

yuzvyshyn commented 2 years ago

Hi, have same problem Any updates?)

ghalex commented 2 years ago

Hi @yuzvyshyn,

I have just released version 1.1.28 that will fix this error.

Thanks again @HarisUa for help.