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

feat: improve generic props

Browse Source
This commit is contained in:
zernonia 2023-12-05 15:06:53 +08:00
parent de0ba4b753
commit 5b0f43248a
8 changed files with 46 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: KeyOfT[]
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
showGradiant: true, showGradiant: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

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

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: Array<KeyOfT>
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
showGridLine: true, showGridLine: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
name: category, name: category,
@ -102,14 +106,14 @@ const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.select
<ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" /> <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" />
<VisBarComponent <VisBarComponent
:x="(d: T, i: number) => i" :x="(d: Data, i: number) => i"
:y="categories.map(category => (d: T) => d[category]) " :y="categories.map(category => (d: Data) => d[category]) "
:color="colors" :color="colors"
:rounded-corners="4" :rounded-corners="4"
:bar-padding="0.1" :bar-padding="0.1"
:attributes="{ :attributes="{
[selectorsBar]: { [selectorsBar]: {
opacity: (d: T, i:number) => { opacity: (d: Data, i:number) => {
const pos = i % categories.length const pos = i % categories.length
return legendItems[pos]?.inactive ? filterOpacity : 1 return legendItems[pos]?.inactive ? filterOpacity : 1
}, },

8
apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
View File

@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
/** /**
* Sets the key to map the data to the chart. * Sets the key to map the data to the chart.
*/ */
index: string index: KeyOfT
/** /**
* Sets the name of the key containing the quantitative chart values. * Sets the name of the key containing the quantitative chart values.
*/ */
category: string category: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
showLegend: true, showLegend: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
const category = computed(() => props.category as KeyOfT)
const index = computed(() => props.index as KeyOfT)
const isMounted = useMounted() const isMounted = useMounted()
const activeSegmentKey = ref<string>() const activeSegmentKey = ref<string>()
const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length)) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))

7
apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
View File

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: KeyOfT[]
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
showGridLine: true, showGridLine: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

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

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: KeyOfT[]
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
showGradiant: true, showGradiant: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({

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

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: Array<KeyOfT>
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -77,7 +77,10 @@ const props = withDefaults(defineProps<{
showGridLine: true, showGridLine: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
name: category, name: category,

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

@ -14,11 +14,11 @@ const props = withDefaults(defineProps<{
/** /**
* Sets the key to map the data to the chart. * Sets the key to map the data to the chart.
*/ */
index: string index: KeyOfT
/** /**
* Sets the name of the key containing the quantitative chart values. * Sets the name of the key containing the quantitative chart values.
*/ */
category: string category: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -60,8 +60,12 @@ const props = withDefaults(defineProps<{
showLegend: true, showLegend: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
const category = computed(() => props.category as KeyOfT)
const index = computed(() => props.index as KeyOfT)
const isMounted = useMounted() const isMounted = useMounted()
const activeSegmentKey = ref<string>() const activeSegmentKey = ref<string>()
const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length)) const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))

7
apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
View File

@ -15,11 +15,11 @@ const props = withDefaults(defineProps<{
/** /**
* Select the categories from your data. Used to populate the legend and toolip. * Select the categories from your data. Used to populate the legend and toolip.
*/ */
categories: string[] categories: KeyOfT[]
/** /**
* Sets the key to map the data to the axis. * Sets the key to map the data to the axis.
*/ */
index: string index: KeyOfT
/** /**
* Change the default colors. * Change the default colors.
*/ */
@ -71,7 +71,10 @@ const props = withDefaults(defineProps<{
showGridLine: true, showGridLine: true,
}) })
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number] type Data = typeof props.data[number]
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))
const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({