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

fix: add chartRef to solve gradiant in same color issue

Browse Source
This commit is contained in:
arvidsson-geins 2024-06-28 15:31:53 +02:00
parent cdfbd51190
commit 743c9facbe
2 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/default/ui/chart-area/AreaChart.vue
View File

@ -41,6 +41,8 @@ const emits = defineEmits<{
type KeyOfT = Extract<keyof T, string> type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
const chartRef = Math.random().toString(36).substring(2, 9)
const index = computed(() => props.index as KeyOfT) const index = computed(() => props.index as KeyOfT)
const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length)) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
@ -64,7 +66,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
<VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data"> <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
<svg width="0" height="0"> <svg width="0" height="0">
<defs> <defs>
<linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1"> <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
<template v-if="showGradiant"> <template v-if="showGradiant">
<stop offset="5%" :stop-color="color" stop-opacity="0.4" /> <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
<stop offset="95%" :stop-color="color" stop-opacity="0" /> <stop offset="95%" :stop-color="color" stop-opacity="0" />
@ -86,7 +88,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
:curve-type="curveType" :curve-type="curveType"
:attributes="{ :attributes="{
[Area.selectors.area]: { [Area.selectors.area]: {
fill: `url(#color-${i})`, fill: `url(#${chartRef}-color-${i})`,
}, },
}" }"
:opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1" :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"

6
apps/www/src/lib/registry/new-york/ui/chart-area/AreaChart.vue
View File

@ -41,6 +41,8 @@ const emits = defineEmits<{
type KeyOfT = Extract<keyof T, string> type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
const chartRef = Math.random().toString(36).substring(2, 9)
const index = computed(() => props.index as KeyOfT) const index = computed(() => props.index as KeyOfT)
const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length)) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
@ -64,7 +66,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
<VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data"> <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
<svg width="0" height="0"> <svg width="0" height="0">
<defs> <defs>
<linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1"> <linearGradient v-for="(color, i) in colors" :id="`${chartRef}-color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
<template v-if="showGradiant"> <template v-if="showGradiant">
<stop offset="5%" :stop-color="color" stop-opacity="0.4" /> <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
<stop offset="95%" :stop-color="color" stop-opacity="0" /> <stop offset="95%" :stop-color="color" stop-opacity="0" />
@ -86,7 +88,7 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
:curve-type="curveType" :curve-type="curveType"
:attributes="{ :attributes="{
[Area.selectors.area]: { [Area.selectors.area]: {
fill: `url(#color-${i})`, fill: `url(#${chartRef}-color-${i})`,
}, },
}" }"
:opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1" :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"