[Bug]: BarChart Legend Display Issue: Misaligned Indicator and Non-Reactive Legends

[tberk]

Reproduction

https://www.shadcn-vue.com/docs/charts/bar

Describe the bug

When using the BarChart component, there are multiple issues with the legends:

1. Misalignment on First Load:

   • On the initial load, legend items are displayed within a button component, but the indicator dot (used to denote color) is misaligned and out of place.

2. Style Change on Click:

   • Clicking a legend item changes its UI style unexpectedly, diverging from the original style setup.

3. Incorrect Button Size Definition:

   • In ChartLegend.vue, the button size is set to xs, but the button component itself does not support an xs size.

onMounted(() => {
  const selector = `.${BulletLegend.selectors.item}`
  nextTick(() => {
    const elements = elRef.value?.querySelectorAll(selector)
    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
  })
})

4. Legends Are Not Reactive:

   • While other parts of the BarChart component update as expected, the legend items do not react to changes. This could be due to the fact that legendItems is defined with ref in BarChart.vue, as shown below:

const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
  name: category,
  color: colors.value[i],
  inactive: false,
})))

Expected Behavior:

• The indicator dot should be correctly aligned on the first load.
• Clicking on a legend item should not alter its style unexpectedly.
• The button size should align with available sizes or be adjusted for consistent styling.
• Legend items should be reactive to data changes in the BarChart component.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 34.40 GB / 63.75 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests