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

fix(Chart): maximum call stack

Browse Source
This commit is contained in:
zernonia 2024-05-01 11:56:54 +08:00
parent 77c6a16040
commit db3fff29c8
7 changed files with 8 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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 { type Component, createApp } from 'vue'
import { ChartTooltip } from '@/lib/registry/default/ui/chart'
import { ChartTooltip } from '.'
const props = withDefaults(defineProps<{
colors: string[]

2
apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
View File

@ -3,7 +3,7 @@ import { VisTooltip } from '@unovis/vue'
import type { BulletLegendItemInterface } from '@unovis/ts'
import { omit } from '@unovis/ts'
import { type Component, createApp } from 'vue'
import { ChartTooltip } from '@/lib/registry/default/ui/chart'
import { ChartTooltip } from '.'
const props = withDefaults(defineProps<{
selector: string

2
apps/www/src/lib/registry/new-york/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 { type Component, createApp } from 'vue'
import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
import { ChartTooltip } from '.'
const props = withDefaults(defineProps<{
colors: string[]

2
apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
View File

@ -3,7 +3,7 @@ import { VisTooltip } from '@unovis/vue'
import type { BulletLegendItemInterface } from '@unovis/ts'
import { omit } from '@unovis/ts'
import { type Component, createApp } from 'vue'
import { ChartTooltip } from '@/lib/registry/new-york/ui/chart'
import { ChartTooltip } from '.'
const props = withDefaults(defineProps<{
selector: string

1
apps/www/src/public/registry/index.json
View File

@ -229,7 +229,6 @@
"@unovis/ts"
],
"registryDependencies": [
"chart",
"button",
"card"
],

5
apps/www/src/public/registry/styles/default/chart.json
View File

@ -5,14 +5,13 @@
"@unovis/ts"
],
"registryDependencies": [
"chart",
"button",
"card"
],
"files": [
{
"name": "ChartCrosshair.vue",
"content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/default/ui/chart'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n}\n\nfunction color(d: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n}\n\nfunction color(d: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
},
{
"name": "ChartLegend.vue",
@ -20,7 +19,7 @@
},
{
"name": "ChartSingleTooltip.vue",
"content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/default/ui/chart'\n\nconst props = withDefaults(defineProps<{\n selector: string\n index: string\n items?: BulletLegendItemInterface[]\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n customTooltip?: Component\n}>(), {\n valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n if (props.index in d) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items?.find(i => i.name === key)\n return { ...legendReference, value: props.valueFormatter(value) }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n\n else {\n const data = d.data\n\n if (wm.has(data)) {\n return wm.get(data)\n }\n else {\n const style = getComputedStyle(elements[i])\n const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n const componentDiv = document.createElement('div')\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n}\n</script>\n\n<template>\n <VisTooltip\n :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n [selector]: template,\n }\"\n />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n selector: string\n index: string\n items?: BulletLegendItemInterface[]\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n customTooltip?: Component\n}>(), {\n valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n if (props.index in d) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items?.find(i => i.name === key)\n return { ...legendReference, value: props.valueFormatter(value) }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n\n else {\n const data = d.data\n\n if (wm.has(data)) {\n return wm.get(data)\n }\n else {\n const style = getComputedStyle(elements[i])\n const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n const componentDiv = document.createElement('div')\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n}\n</script>\n\n<template>\n <VisTooltip\n :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n [selector]: template,\n }\"\n />\n</template>\n"
},
{
"name": "ChartTooltip.vue",

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

@ -5,14 +5,13 @@
"@unovis/ts"
],
"registryDependencies": [
"chart",
"button",
"card"
],
"files": [
{
"name": "ChartCrosshair.vue",
"content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/new-york/ui/chart'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n}\n\nfunction color(d: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n colors: string[]\n index: string\n items: BulletLegendItemInterface[]\n customTooltip?: Component\n}>(), {\n colors: () => [],\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items.find(i => i.name === key)\n return { ...legendReference, value }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n}\n\nfunction color(d: unknown, i: number) {\n return props.colors[i] ?? 'transparent'\n}\n</script>\n\n<template>\n <VisTooltip :horizontal-shift=\"20\" :vertical-shift=\"20\" />\n <VisCrosshair :template=\"template\" :color=\"color\" />\n</template>\n"
},
{
"name": "ChartLegend.vue",
@ -20,7 +19,7 @@
},
{
"name": "ChartSingleTooltip.vue",
"content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '@/lib/registry/new-york/ui/chart'\n\nconst props = withDefaults(defineProps<{\n selector: string\n index: string\n items?: BulletLegendItemInterface[]\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n customTooltip?: Component\n}>(), {\n valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n if (props.index in d) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items?.find(i => i.name === key)\n return { ...legendReference, value: props.valueFormatter(value) }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n\n else {\n const data = d.data\n\n if (wm.has(data)) {\n return wm.get(data)\n }\n else {\n const style = getComputedStyle(elements[i])\n const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n const componentDiv = document.createElement('div')\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n}\n</script>\n\n<template>\n <VisTooltip\n :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n [selector]: template,\n }\"\n />\n</template>\n"
"content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\nimport { type Component, createApp } from 'vue'\nimport { ChartTooltip } from '.'\n\nconst props = withDefaults(defineProps<{\n selector: string\n index: string\n items?: BulletLegendItemInterface[]\n valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string\n customTooltip?: Component\n}>(), {\n valueFormatter: (tick: number) => `${tick}`,\n})\n\n// Use weakmap to store reference to each datapoint for Tooltip\nconst wm = new WeakMap()\nfunction template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {\n if (props.index in d) {\n if (wm.has(d)) {\n return wm.get(d)\n }\n else {\n const componentDiv = document.createElement('div')\n const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {\n const legendReference = props.items?.find(i => i.name === key)\n return { ...legendReference, value: props.valueFormatter(value) }\n })\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n\n else {\n const data = d.data\n\n if (wm.has(data)) {\n return wm.get(data)\n }\n else {\n const style = getComputedStyle(elements[i])\n const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]\n const componentDiv = document.createElement('div')\n const TooltipComponent = props.customTooltip ?? ChartTooltip\n createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)\n wm.set(d, componentDiv.innerHTML)\n return componentDiv.innerHTML\n }\n }\n}\n</script>\n\n<template>\n <VisTooltip\n :horizontal-shift=\"20\" :vertical-shift=\"20\" :triggers=\"{\n [selector]: template,\n }\"\n />\n</template>\n"
},
{
"name": "ChartTooltip.vue",