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

fix: crosshair issue

Browse Source
This commit is contained in:
zernonia 2024-04-14 23:50:52 +08:00
parent 06dd21b05f
commit 4296624cdb
12 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/www/.vitepress/theme/style.css
View File

@ -28,6 +28,7 @@
--ring: 240 5% 64.9%;
--radius: 0.5rem;
--vis-secondary-color: 160 81% 40%;
--vis-font-family: inherit !important;
--vis-area-stroke-width: 2px !important;
--vis-donut-central-label-text-color: hsl(var(--muted-foreground)) !important;

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

@ -4,8 +4,7 @@ description: Displays a callout for user attention.
label: Alpha
---
<ComponentPreview name="AreaChartDemo" />
<ComponentPreview name="AreaChartDemo" />
## Installation
@ -13,7 +12,6 @@ label: Alpha
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
@ -26,10 +24,11 @@ npx shadcn-vue@latest add chart-area
Add the following tooltip styling to your `tailwind.css` file:
```css
```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;
@ -38,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
--vis-tooltip-padding: none !important;
}
```
</Steps>

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

@ -4,8 +4,7 @@ description: Displays a callout for user attention.
label: Alpha
---
<ComponentPreview name="BarChartDemo" />
<ComponentPreview name="BarChartDemo" />
## Installation
@ -25,10 +24,11 @@ npx shadcn-vue@latest add chart-bar
Add the following tooltip styling to your `tailwind.css` file:
```css
```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;
@ -37,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
--vis-tooltip-padding: none !important;
}
```
</Steps>

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

@ -4,8 +4,7 @@ description: Displays a callout for user attention.
label: Alpha
---
<ComponentPreview name="DonutChartDemo" />
<ComponentPreview name="DonutChartDemo" />
## Installation
@ -13,7 +12,6 @@ label: Alpha
Only works with Vue >3.3
</Callout>
<Steps>
### Run the following command
@ -26,10 +24,11 @@ npx shadcn-vue@latest add chart-donut
Add the following tooltip styling to your `tailwind.css` file:
```css
```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;
@ -38,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
--vis-tooltip-padding: none !important;
}
```
</Steps>

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

@ -4,8 +4,7 @@ description: Displays a callout for user attention.
label: Alpha
---
<ComponentPreview name="LineChartDemo" />
<ComponentPreview name="LineChartDemo" />
## Installation
@ -25,10 +24,11 @@ npx shadcn-vue@latest add chart-line
Add the following tooltip styling to your `tailwind.css` file:
```css
```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;
@ -37,7 +37,5 @@ Add the following tooltip styling to your `tailwind.css` file:
--vis-tooltip-padding: none !important;
}
```
</Steps>

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

@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
showGradiant: true,
})
const emits = defineEmits<{
legendItemClick: [d: BulletLegendItemInterface, i: number]
}>()
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number]
@ -92,7 +96,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
const isMounted = useMounted()
function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
// do something when clicked on legend
emits('legendItemClick', d, i)
}
</script>
@ -129,7 +133,9 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
}"
:opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
/>
</template>
<template v-for="(category, i) in categories" :key="category">
<VisLine
:x="(d: Data, i: number) => i"
:y="(d: Data) => d[category]"

8
apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
View File

@ -3,7 +3,7 @@ import { VisCrosshair, VisTooltip } from '@unovis/vue'
import type { BulletLegendItemInterface } from '@unovis/ts'
import { omit } from '@unovis/ts'
import { createApp, watch } from 'vue'
import { ChartTooltip } from '@/lib/registry/default/ui/chart'
import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
const props = withDefaults(defineProps<{
colors: string[]
@ -30,9 +30,13 @@ function template(d: any) {
return componentDiv.innerHTML
}
}
function color(d: unknown, i: number) {
return props.colors[i] ?? 'transparent'
}
</script>
<template>
<VisTooltip :horizontal-shift="20" :vertical-shift="20" />
<VisCrosshair :color="colors" :template="template" />
<VisCrosshair :template="template" :color="color" />
</template>

3
apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
View File

@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>()
})
const emits = defineEmits<{
legendItemClick: [d: BulletLegendItemInterface, i: number]
'legendItemClick': [d: BulletLegendItemInterface, i: number]
'update:items': [payload: BulletLegendItemInterface[]]
}>()
@ -21,7 +21,6 @@ onMounted(() => {
nextTick(() => {
const elements = elRef.value?.querySelectorAll(selector)
const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
console.log(elements, classes)
elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
})
})

4
apps/www/src/lib/registry/default/ui/chart/index.ts
View File

@ -3,8 +3,6 @@ export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
export { default as ChartLegend } from './ChartLegend.vue'
export { default as ChartCrosshair } from './ChartCrosshair.vue'
const SECONDARY_COLOR = '153 48% 49%'
export function defaultColors(count: number = 3) {
const quotient = Math.floor(count / 2)
const remainder = count % 2
@ -13,6 +11,6 @@ export function defaultColors(count: number = 3) {
const secondaryCount = quotient
return [
...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
...Array.from(Array(secondaryCount).keys()).map(i => `hsl(${SECONDARY_COLOR} / ${1 - (1 / secondaryCount) * i})`),
...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
]
}

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

@ -77,6 +77,10 @@ const props = withDefaults(defineProps<{
showGradiant: true,
})
const emits = defineEmits<{
legendItemClick: [d: BulletLegendItemInterface, i: number]
}>()
type KeyOfT = Extract<keyof T, string>
type Data = typeof props.data[number]
@ -92,7 +96,7 @@ const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((categ
const isMounted = useMounted()
function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
// do something when clicked on legend
emits('legendItemClick', d, i)
}
</script>
@ -129,7 +133,9 @@ function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
}"
:opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
/>
</template>
<template v-for="(category, i) in categories" :key="category">
<VisLine
:x="(d: Data, i: number) => i"
:y="(d: Data) => d[category]"

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

@ -30,9 +30,13 @@ function template(d: any) {
return componentDiv.innerHTML
}
}
function color(d: unknown, i: number) {
return props.colors[i] ?? 'transparent'
}
</script>
<template>
<VisTooltip :horizontal-shift="20" :vertical-shift="20" />
<VisCrosshair :template="template" />
<VisCrosshair :template="template" :color="color" />
</template>

4
apps/www/src/lib/registry/new-york/ui/chart/index.ts
View File

@ -3,8 +3,6 @@ export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
export { default as ChartLegend } from './ChartLegend.vue'
export { default as ChartCrosshair } from './ChartCrosshair.vue'
const SECONDARY_COLOR = '153 48% 49%'
export function defaultColors(count: number = 3) {
const quotient = Math.floor(count / 2)
const remainder = count % 2
@ -13,6 +11,6 @@ export function defaultColors(count: number = 3) {
const secondaryCount = quotient
return [
...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
...Array.from(Array(secondaryCount).keys()).map(i => `hsl(${SECONDARY_COLOR} / ${1 - (1 / secondaryCount) * i})`),
...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
]
}