Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: guide page

Browse Source 
feat: add prop to barchart
This commit is contained in:
zernonia 2024-04-16 13:28:49 +08:00
parent 5f58d23026
commit ace4c1c5e3
10 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
apps/www/src/content/docs/charts/area.md
View File

@ -1,6 +1,7 @@
--- ---
title: Area title: Area
description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph. description: An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
source: apps/www/src/lib/registry/default/ui/chart-area
label: Alpha label: Alpha
--- ---
@ -20,22 +21,8 @@ label: Alpha
npx shadcn-vue@latest add chart-area npx shadcn-vue@latest add chart-area
``` ```
### Update `css` ### Setup
Add the following tooltip styling to your `tailwind.css` file: Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
```css
@layer base {
:root {
/* ... */
--vis-secondary-color: 160 81% 40%;
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps> </Steps>

19
apps/www/src/content/docs/charts/bar.md
View File

@ -1,6 +1,7 @@
--- ---
title: Bar title: Bar
description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups. description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
source: apps/www/src/lib/registry/default/ui/chart-bar
label: Alpha label: Alpha
--- ---
@ -20,22 +21,8 @@ label: Alpha
npx shadcn-vue@latest add chart-bar npx shadcn-vue@latest add chart-bar
``` ```
### Update `css` ### Setup
Add the following tooltip styling to your `tailwind.css` file: Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
```css
@layer base {
:root {
/* ... */
--vis-secondary-color: 160 81% 40%;
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps> </Steps>

19
apps/www/src/content/docs/charts/donut.md
View File

@ -1,6 +1,7 @@
--- ---
title: Donut title: Donut
description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories. description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
source: apps/www/src/lib/registry/default/ui/chart-donut
label: Alpha label: Alpha
--- ---
@ -20,22 +21,8 @@ Only works with Vue >3.3
npx shadcn-vue@latest add chart-donut npx shadcn-vue@latest add chart-donut
``` ```
### Update `css` ### Setup
Add the following tooltip styling to your `tailwind.css` file: Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
```css
@layer base {
:root {
/* ... */
--vis-secondary-color: 160 81% 40%;
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps> </Steps>

44
apps/www/src/content/docs/charts/guide.md
View File

@ -1,3 +1,43 @@
chartinggg ---
title: Guide
description: A simple guide to help setup chart components.
label: Alpha
---
hihi `Charts` components were built on top of [Unovis](https://unovis.dev/) (a modular data visualization framework), and inspired by [tremor](https://www.tremor.so).
## Installation
<Callout>
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
```bash
npx shadcn-vue@latest add chart
```
### Update `css`
Add the following tooltip styling to your `tailwind.css` file:
```css
@layer base {
:root {
/* ... */
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
/* secondary color, change to any hsl value you want */
--vis-secondary-color: 160 81% 40%;
}
```
</Steps>

19
apps/www/src/content/docs/charts/line.md
View File

@ -1,6 +1,7 @@
--- ---
title: Line title: Line
description: An line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis. description: An line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
source: apps/www/src/lib/registry/default/ui/chart-line
label: Alpha label: Alpha
--- ---
@ -20,22 +21,8 @@ label: Alpha
npx shadcn-vue@latest add chart-line npx shadcn-vue@latest add chart-line
``` ```
### Update `css` ### Setup
Add the following tooltip styling to your `tailwind.css` file: Follow the [guide](/docs/charts/guide.html#installation) to complete the setup.
```css
@layer base {
:root {
/* ... */
--vis-secondary-color: 160 81% 40%;
--vis-tooltip-background-color: none !important;
--vis-tooltip-border-color: none !important;
--vis-tooltip-text-color: none !important;
--vis-tooltip-shadow-color: none !important;
--vis-tooltip-backdrop-filter: none !important;
--vis-tooltip-padding: none !important;
}
```
</Steps> </Steps>

2
apps/www/src/examples/dashboard/components/Overview.vue
View File

@ -18,5 +18,5 @@ const data = [
</script> </script>
<template> <template>
<BarChart :data="data" :categories="['total']" :index="'name'" /> <BarChart :data="data" :categories="['total']" :index="'name'" :rounded-corners="4" />
</template> </template>

18
apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts" generic="T extends Record<string, any>"> <script setup lang="ts" generic="T extends Record<string, any>">
import type { BulletLegendItemInterface } from '@unovis/ts' import type { BulletLegendItemInterface, Spacing } from '@unovis/ts'
import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue' import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
import { Axis, GroupedBar, StackedBar } from '@unovis/ts' import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
@ -13,10 +13,16 @@ const props = withDefaults(defineProps<BaseChartProps<T> & {
* @default "grouped" * @default "grouped"
*/ */
type?: 'stacked' | 'grouped' type?: 'stacked' | 'grouped'
/**
* Rounded bar corners
* @default 0
*/
roundedCorners?: number
}>(), { }>(), {
type: 'grouped', type: 'grouped',
margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }), margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
filterOpacity: 0.2, filterOpacity: 0.2,
roundedCorners: 0,
showXAxis: true, showXAxis: true,
showYAxis: true, showYAxis: true,
showTooltip: true, showTooltip: true,
@ -53,15 +59,19 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
<div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')"> <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
<ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" /> <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
<VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data"> <VisXYContainer
:data="data"
:style="{ height: isMounted ? '100%' : 'auto' }"
:margin="margin"
>
<ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" /> <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
<VisBarComponent <VisBarComponent
:x="(d: Data, i: number) => i" :x="(d: Data, i: number) => i"
:y="categories.map(category => (d: Data) => d[category]) " :y="categories.map(category => (d: Data) => d[category]) "
:color="colors" :color="colors"
:rounded-corners="4" :rounded-corners="roundedCorners"
:bar-padding="0.1" :bar-padding="0.05"
:attributes="{ :attributes="{
[selectorsBar]: { [selectorsBar]: {
opacity: (d: Data, i:number) => { opacity: (d: Data, i:number) => {

8
apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
View File

@ -13,10 +13,16 @@ const props = withDefaults(defineProps<BaseChartProps<T> & {
* @default "grouped" * @default "grouped"
*/ */
type?: 'stacked' | 'grouped' type?: 'stacked' | 'grouped'
/**
* Rounded bar corners
* @default 0
*/
roundedCorners?: number
}>(), { }>(), {
type: 'grouped', type: 'grouped',
margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }), margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
filterOpacity: 0.2, filterOpacity: 0.2,
roundedCorners: 0,
showXAxis: true, showXAxis: true,
showYAxis: true, showYAxis: true,
showTooltip: true, showTooltip: true,
@ -64,7 +70,7 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
:x="(d: Data, i: number) => i" :x="(d: Data, i: number) => i"
:y="categories.map(category => (d: Data) => d[category]) " :y="categories.map(category => (d: Data) => d[category]) "
:color="colors" :color="colors"
:rounded-corners="0" :rounded-corners="roundedCorners"
:bar-padding="0.05" :bar-padding="0.05"
:attributes="{ :attributes="{
[selectorsBar]: { [selectorsBar]: {

2
apps/www/src/public/registry/styles/default/chart-bar.json
View File

@ -12,7 +12,7 @@
"files": [ "files": [
{ {
"name": "BarChart.vue", "name": "BarChart.vue",
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped'\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n})\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n <VisXYContainer :style=\"{ height: isMounted ? '100%' : 'auto' }\" :margin=\"{ left: 20, right: 20 }\" :data=\"data\">\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"4\"\n :bar-padding=\"0.1\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n" "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped'\n /**\n * Rounded bar corners\n * @default 0\n */\n roundedCorners?: number\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n roundedCorners: 0,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n})\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n <VisXYContainer\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"margin\"\n >\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"roundedCorners\"\n :bar-padding=\"0.05\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",

2
apps/www/src/public/registry/styles/new-york/chart-bar.json
View File

@ -12,7 +12,7 @@
"files": [ "files": [
{ {
"name": "BarChart.vue", "name": "BarChart.vue",
"content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped'\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n})\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n <VisXYContainer\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"margin\"\n >\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"0\"\n :bar-padding=\"0.05\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n" "content": "<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport type { BulletLegendItemInterface, Spacing } from '@unovis/ts'\nimport { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { type BaseChartProps, ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<BaseChartProps<T> & {\n /**\n * Change the type of the chart\n * @default \"grouped\"\n */\n type?: 'stacked' | 'grouped'\n /**\n * Rounded bar corners\n * @default 0\n */\n roundedCorners?: number\n}>(), {\n type: 'grouped',\n margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),\n filterOpacity: 0.2,\n roundedCorners: 0,\n showXAxis: true,\n showYAxis: true,\n showTooltip: true,\n showLegend: true,\n showGridLine: true,\n})\n\nconst emits = defineEmits<{\n legendItemClick: [d: BulletLegendItemInterface, i: number]\n}>()\n\ntype KeyOfT = Extract<keyof T, string>\ntype Data = typeof props.data[number]\n\nconst index = computed(() => props.index as KeyOfT)\nconst colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))\nconst legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({\n name: category,\n color: colors.value[i],\n inactive: false,\n})))\n\nconst isMounted = useMounted()\n\nfunction handleLegendItemClick(d: BulletLegendItemInterface, i: number) {\n emits('legendItemClick', d, i)\n}\n\nconst VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)\nconst selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)\n</script>\n\n<template>\n <div :class=\"cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')\">\n <ChartLegend v-if=\"showLegend\" v-model:items=\"legendItems\" @legend-item-click=\"handleLegendItemClick\" />\n\n <VisXYContainer\n :data=\"data\"\n :style=\"{ height: isMounted ? '100%' : 'auto' }\"\n :margin=\"margin\"\n >\n <ChartCrosshair v-if=\"showTooltip\" :colors=\"colors\" :items=\"legendItems\" :index=\"index\" />\n\n <VisBarComponent\n :x=\"(d: Data, i: number) => i\"\n :y=\"categories.map(category => (d: Data) => d[category]) \"\n :color=\"colors\"\n :rounded-corners=\"roundedCorners\"\n :bar-padding=\"0.05\"\n :attributes=\"{\n [selectorsBar]: {\n opacity: (d: Data, i:number) => {\n const pos = i % categories.length\n return legendItems[pos]?.inactive ? filterOpacity : 1\n },\n },\n }\"\n />\n\n <VisAxis\n v-if=\"showXAxis\"\n type=\"x\"\n :tick-format=\"xFormatter ?? ((v: number) => data[v]?.[index])\"\n :grid-line=\"false\"\n :tick-line=\"false\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n <VisAxis\n v-if=\"showYAxis\"\n type=\"y\"\n :tick-line=\"false\"\n :tick-format=\"yFormatter\"\n :domain-line=\"false\"\n :grid-line=\"showGridLine\"\n :attributes=\"{\n [Axis.selectors.grid]: {\n class: 'text-muted',\n },\n }\"\n tick-text-color=\"hsl(var(--muted-foreground))\"\n />\n\n <slot />\n </VisXYContainer>\n </div>\n</template>\n"
}, },
{ {
"name": "index.ts", "name": "index.ts",