unovis-vue-skilld

Name: unovis-vue-skilld
Author: skilld-dev

173stars8forks

How to install unovis-vue-skilld?

skilld-dev/vue-ecosystem-skills/unovis-vue-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill unovis-vue-skilld

Installs into the current project.

Summary

Modular data visualization framework for React, Angular, Svelte, Vue, and vanilla TypeScript or JavaScript. ALWAYS use when writing code importing \"@unovis/vue\". Consult for debugging, best practices, or modifying @unovis/vue, unovis/vue, unovis vue, unovis.

Files · 1

View on GitHub

SKILL.md

1	# f5/unovis `@unovis/vue@1.6.5`
2	Tags: latest: 1.6.5, beta: 1.6.5-topojson.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes for `@unovis/vue` — prioritize recent major/minor releases.
8
9	- NEW: `VisPlotband` and `VisPlotline` — new auxiliary components for highlighting data ranges or specific values [source](./references/releases/v1.6.md)
10
11	- NEW: `VisRollingPinLegend` — new specialized legend component added in v1.6.0 [source](./references/releases/v1.6.md)
12
13	- NEW: `VisTreemap` — new hierarchical data visualization component; includes `tileShowHtmlTooltip` and `topLevelParent` props as of v1.6.4 [source](./references/releases/v1.6.md)
14
15	- NEW: `VisAnnotations` — new component for adding callouts and annotations to charts [source](./references/releases/v1.4.0.md)
16
17	- NEW: `onRenderComplete` — new callback available in `VisXYContainer` and `VisSingleContainer` to detect when rendering is finished [source](./references/releases/v1.6.4.md)
18
19	- NEW: `VisArea` enhancements — added `stackMinHeight` for better visibility of small values and optional line display via core config [source](./references/releases/v1.6.4.md)
20
21	- NEW: `VisSankey` updates — new `onLayoutCalculated` callback, `getSankeyDepth` method, and support for Zoom/Pan and Node selection [source](./references/releases/v1.6.4.md)
22
23	- NEW: `VisGraph` features — support for custom node rendering functions, SVG link labels, and Zoom start/end callbacks [source](./references/releases/v1.5.0.md)
24
25	- NEW: `VisCrosshair` additions — new `forceShowAt` prop, `onCrosshairMove` callback, and `skipRangeCheck` configuration [source](./references/releases/v1.6.md)
26
27	- NEW: SSR Readiness — major internal refactor to support SSR (Server-Side Rendering) for Nuxt and other frameworks [source](./references/releases/v1.6.4.md)
28
29	- NEW: Reactive Map Data — `VisLeafletMap` data property is now fully reactive in Vue [source](./references/releases/v1.6.1.md)
30
31	- NEW: Automatic Tooltip Placement — `VisTooltip` now automatically aligns when used in conjunction with `VisCrosshair` [source](./references/releases/v1.5.0.md)
32
33	- NEW: `VisBulletLegend` — now supports multiple colors per legend item [source](./references/releases/v1.6.md)
34
35	- NEW: `VisXYContainer` — improved `scaleByDomain` behavior to ensure consistency across multiple chart types [source](./references/releases/v1.4.0.md)
36
37	Also changed: `calc()` support in Annotations · `theme-patterns` accessible theme · `VisFlowLegend` refactored wrapper · `axis grid line dasharray` CSS variables · `skipRangeCheck` Crosshair prop
38
39	## Best Practices
40
41	- Support ordinal values in XY components by returning the data index in the `x` accessor and providing a `tickFormat` to the `VisAxis` [source](./references/docs/guides/tips-and-tricks.mdx)
42
43	```vue
44	<script setup lang="ts">
45	const x = (d, i: number) => i
46	const tickFormat = (i: number) => data[i].category
47	</script>
48
49	<template>
50	<VisXYContainer :data="data">
51	<VisStackedBar :x="x" :y="d => d.value" />
52	<VisAxis type="x" :tick-format="tickFormat" />
53	</VisXYContainer>
54	</template>
55	```
56
57	- Define custom SVG gradients or patterns using the `svgDefs` property on `VisXYContainer` or `VisSingleContainer` [source](./references/docs/guides/tips-and-tricks.mdx)
58
59	```vue
60	<template>
61	<VisXYContainer :svg-defs="gradientDef">
62	<VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient-id)" />
63	</VisXYContainer>
64	</template>
65	```
66
67	- Display continuous lines across missing data points by filtering `null` values and passing the dataset directly to `VisLine` instead of the container [source](./references/discussions/discussion-333.md)
68
69	```vue
70	<template>
71	<VisXYContainer>
72
73	<VisLine :data="data.filter(d => d.value !== null)" :x="x" :y="y" />
74	</VisXYContainer>
75	</template>
76	```
77
78	- Attach events to axis ticks or other sub-elements using the `events` prop and component-specific selectors [source](./references/discussions/discussion-219.md)
79
80	```vue
81	<script setup lang="ts">
82	import { VisAxisSelectors } from '@unovis/vue'
83	const axisEvents = {
84	[VisAxisSelectors.tick]: {
85	click: (val: number) => console.log('Clicked tick:', val)
86	}
87	}
88	</script>
89
90	<template>
91	<VisAxis type="x" :events="axisEvents" />
92	</template>
93	```
94
95	- Wrap Unovis components in `<ClientOnly>` when using Nuxt or SSR to prevent errors from top-level `document` or `window` references [source](./references/issues/issue-607.md)
96
97	```vue
98	<template>
99	<ClientOnly>
100	<VisXYContainer :data="data">
101	<VisLine :x="x" :y="y" />
102	</VisXYContainer>
103	</ClientOnly>
104	</template>
105	```
106
107	-

People who liked this also viewed

6 picks

Type

unovis-vue-skilld

173stars8forks

View on GitHub

How to install unovis-vue-skilld?

skilld-dev/vue-ecosystem-skills/unovis-vue-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill unovis-vue-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# f5/unovis `@unovis/vue@1.6.5`
2	Tags: latest: 1.6.5, beta: 1.6.5-topojson.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes for `@unovis/vue` — prioritize recent major/minor releases.
8
9	- NEW: `VisPlotband` and `VisPlotline` — new auxiliary components for highlighting data ranges or specific values [source](./references/releases/v1.6.md)
10
11	- NEW: `VisRollingPinLegend` — new specialized legend component added in v1.6.0 [source](./references/releases/v1.6.md)
12
13	- NEW: `VisTreemap` — new hierarchical data visualization component; includes `tileShowHtmlTooltip` and `topLevelParent` props as of v1.6.4 [source](./references/releases/v1.6.md)
14
15	- NEW: `VisAnnotations` — new component for adding callouts and annotations to charts [source](./references/releases/v1.4.0.md)
16
17	- NEW: `onRenderComplete` — new callback available in `VisXYContainer` and `VisSingleContainer` to detect when rendering is finished [source](./references/releases/v1.6.4.md)
18
19	- NEW: `VisArea` enhancements — added `stackMinHeight` for better visibility of small values and optional line display via core config [source](./references/releases/v1.6.4.md)
20
21	- NEW: `VisSankey` updates — new `onLayoutCalculated` callback, `getSankeyDepth` method, and support for Zoom/Pan and Node selection [source](./references/releases/v1.6.4.md)
22
23	- NEW: `VisGraph` features — support for custom node rendering functions, SVG link labels, and Zoom start/end callbacks [source](./references/releases/v1.5.0.md)
24
25	- NEW: `VisCrosshair` additions — new `forceShowAt` prop, `onCrosshairMove` callback, and `skipRangeCheck` configuration [source](./references/releases/v1.6.md)
26
27	- NEW: SSR Readiness — major internal refactor to support SSR (Server-Side Rendering) for Nuxt and other frameworks [source](./references/releases/v1.6.4.md)
28
29	- NEW: Reactive Map Data — `VisLeafletMap` data property is now fully reactive in Vue [source](./references/releases/v1.6.1.md)
30
31	- NEW: Automatic Tooltip Placement — `VisTooltip` now automatically aligns when used in conjunction with `VisCrosshair` [source](./references/releases/v1.5.0.md)
32
33	- NEW: `VisBulletLegend` — now supports multiple colors per legend item [source](./references/releases/v1.6.md)
34
35	- NEW: `VisXYContainer` — improved `scaleByDomain` behavior to ensure consistency across multiple chart types [source](./references/releases/v1.4.0.md)
36
37	Also changed: `calc()` support in Annotations · `theme-patterns` accessible theme · `VisFlowLegend` refactored wrapper · `axis grid line dasharray` CSS variables · `skipRangeCheck` Crosshair prop
38
39	## Best Practices
40
41	- Support ordinal values in XY components by returning the data index in the `x` accessor and providing a `tickFormat` to the `VisAxis` [source](./references/docs/guides/tips-and-tricks.mdx)
42
43	```vue
44	<script setup lang="ts">
45	const x = (d, i: number) => i
46	const tickFormat = (i: number) => data[i].category
47	</script>
48
49	<template>
50	<VisXYContainer :data="data">
51	<VisStackedBar :x="x" :y="d => d.value" />
52	<VisAxis type="x" :tick-format="tickFormat" />
53	</VisXYContainer>
54	</template>
55	```
56
57	- Define custom SVG gradients or patterns using the `svgDefs` property on `VisXYContainer` or `VisSingleContainer` [source](./references/docs/guides/tips-and-tricks.mdx)
58
59	```vue
60	<template>
61	<VisXYContainer :svg-defs="gradientDef">
62	<VisArea :x="d => d.x" :y="d => d.y" color="url(#gradient-id)" />
63	</VisXYContainer>
64	</template>
65	```
66
67	- Display continuous lines across missing data points by filtering `null` values and passing the dataset directly to `VisLine` instead of the container [source](./references/discussions/discussion-333.md)
68
69	```vue
70	<template>
71	<VisXYContainer>
72
73	<VisLine :data="data.filter(d => d.value !== null)" :x="x" :y="y" />
74	</VisXYContainer>
75	</template>
76	```
77
78	- Attach events to axis ticks or other sub-elements using the `events` prop and component-specific selectors [source](./references/discussions/discussion-219.md)
79
80	```vue
81	<script setup lang="ts">
82	import { VisAxisSelectors } from '@unovis/vue'
83	const axisEvents = {
84	[VisAxisSelectors.tick]: {
85	click: (val: number) => console.log('Clicked tick:', val)
86	}
87	}
88	</script>
89
90	<template>
91	<VisAxis type="x" :events="axisEvents" />
92	</template>
93	```
94
95	- Wrap Unovis components in `<ClientOnly>` when using Nuxt or SSR to prevent errors from top-level `document` or `window` references [source](./references/issues/issue-607.md)
96
97	```vue
98	<template>
99	<ClientOnly>
100	<VisXYContainer :data="data">
101	<VisLine :x="x" :y="y" />
102	</VisXYContainer>
103	</ClientOnly>
104	</template>
105	```
106
107	-

People who liked this also viewed

6 picks

Type