Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: fix name rendering in ChartSingleTooltip component #664

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

fix: fix name rendering in ChartSingleTooltip component #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
472bb76
fix: fix name rendering in ChartSingleTooltip component
decito Jul 17, 2024
37bcc01
fix: fix name of new-york ChartSingleTooltip component
decito Jul 17, 2024
3d6f695
fix: fix content of ChartSingleTooltip in styles files
desceoneto Jul 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
}
else {
const style = getComputedStyle(elements[i])
const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
const omittedData = [{ name: Object.values(data)[0], value: props.valueFormatter(data[props.index]), color: style.fill }]
const componentDiv = document.createElement('div')
const TooltipComponent = props.customTooltip ?? ChartTooltip
createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
}
else {
const style = getComputedStyle(elements[i])
const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
const omittedData = [{ name: Object.values(data)[0], value: props.valueFormatter(data[props.index]), color: style.fill }]
Copy link
Member

@zernonia zernonia Jul 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The items props is expecting type BulletLegendItemInterface[], which has name as the primary identifier.
I can't load your codesandbox and not sure what issue you are running into.

interface BulletLegendItemInterface {
    name: string | number;
    color?: string;
    className?: string;
    shape?: BulletShape;
    inactive?: boolean;
    hidden?: boolean;
    pointer?: boolean;
}

Cant load this

https://codesandbox.io/p/devbox/shadcn-vue-donutchartdemo-forked-8z4mt4

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi, I've granted permission to the codesandbox project :)

const componentDiv = document.createElement('div')
const TooltipComponent = props.customTooltip ?? ChartTooltip
createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/public/registry/styles/default/chart.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,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 '.'\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: Object.values(data)[0], 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",
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/public/registry/styles/new-york/chart.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,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 '.'\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: Object.values(data)[0], 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",
Expand Down