AgentStack
SKILL verified MIT Self-run

Vue Data Ui Skilld

skill-skilld-dev-vue-ecosystem-skills-vue-data-ui-skilld · by skilld-dev

A user-empowering data visualization Vue 3 components library for eloquent data storytelling. ALWAYS use when writing code importing \"vue-data-ui\". Consult for debugging, best practices, or modifying vue-data-ui, vue data ui.

No reviews yet
0 installs
7 views
0.0% view→install

Install

$ agentstack add skill-skilld-dev-vue-ecosystem-skills-vue-data-ui-skilld

✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • Prompt-injection patterns
  • Secret / credential exfiltration
  • Dangerous shell & filesystem operations
  • Untrusted network calls
  • Known-malicious package signatures

What it can access

  • Network access No
  • Filesystem access No
  • Shell / process execution No
  • Environment & secrets No
  • Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

Are you the author of Vue Data Ui Skilld? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

graphieros/vue-data-ui vue-data-ui@3.19.2

Tags: beta: 2.15.6-beta.3, next: 3.1.19-next.1, latest: 3.19.2

References: [Docs](./references/docs/_INDEX.md)

API Changes

This section documents version-specific API changes for vue-data-ui v3.15.2 — prioritize recent v3.x releases.

  • NEW: useCursorPointer (opt-in) — default changed to false in v3.15.0; must be set to true in userOptions to enable pointer cursor on clickable elements [source](./references/releases/v3.15.0.md#cursor-pointer-is-now-opt-in-303)
  • NEW: altCopy action button — added to context menu in v3.15.0; exposes dataset and config in a callback to generate custom alt text [source](./references/releases/v3.15.0.md#alt-text-copy-new-action-button)
  • NEW: minimap styling — handleType ('grab', 'chevron', etc.), handleWidth, and additionalHeight added in v3.15.0 to customize zoom minimap handles [source](./references/releases/v3.15.0.md#chart-zoom-minimap)
  • NEW: dashIndices in VueUiXy — new dataset property in v3.15.0 allows displaying specific datapoints as dashed segments to indicate estimated data [source](./references/releases/v3.15.0.md#vueuixy)
  • BREAKING: locales files removed — as of v3.14.3, individual locale files are removed in favor of Intl for computing time labels [source](./references/releases/v3.14.3.md#reduce-package-size)
  • NEW: isPrintingImg and isPrintingSvg — booleans now exposed in the #svg slot since v3.14.10 to control content during print/export [source](./references/releases/v3.14.10.md#all-charts-with-png-andor-svg-exports)
  • NEW: zoomStart, zoomEnd, and zoomReset — new emits added to VueUiXy in v3.14.9 to track zoom component interactions [source](./references/releases/v3.14.9.md#vueuixy)
  • NEW: selectAllToggle in Legend — opt-in feature added in v3.13.0; displays a checkbox to select/unselect all series when more than 2 series exist [source](./references/releases/v3.13.0.md#legend-toggle-new-feature-297)
  • NEW: skeletonConfig customization — VueUiSparkline now allows passing custom skeletonConfig and skeletonDataset in v3.13.7 [source](./references/releases/v3.13.7.md#vueuisparkline)
  • NEW: oklch color support — added in v3.13.6, allowing the use of OKLCH color space across all components [source](./references/releases/v3.13.6.md)
  • NEW: side in zoom.customFormat — the handle side ('left' | 'right') is now exposed in the zoom formatting callback since v3.13.5 [source](./references/releases/v3.13.5.md#zoom-handle-sides)
  • NEW: zoom.maxWidth — added to multiple charts in v3.13.4 to control the maximum width of the zoom component [source](./references/releases/v3.13.4.md)
  • NEW: pulse in VueUiSparkline — optional animated pulse effect with trail added to line mode in v3.13.3 [source](./references/releases/v3.13.3.md#vueuisparkline)
  • NEW: Annotator modes — straight line and arrow modes added to the built-in annotator in v3.12.0 [source](./references/releases/v3.12.0.md#built-in-annotator)

Also changed: scaleMin/scaleMax on minimap v3.11.1 · pulse trail refinement v3.15.2 · zoom.startIndex/endIndex support v2.4.42 · useCanvas option (experimental) · Annotator pixel labels v3.14.5 · dashIndices in minimap v3.14.8

Best Practices

  • Use VueUiXyCanvas for large datasets (1000+ points) with frequent updates (e.g., 100ms) to avoid browser performance bottlenecks from managing thousands of SVG DOM nodes [source](./references/discussions/discussion-125.md#accepted-answer)
  • Enable responsive: true specifically for VueUiXy and VueUiDonut when placing them in flexible containers, ensuring they correctly fill parent height (set height: 100% on parent) [source](./references/discussions/discussion-270.md#accepted-answer)
  • Programmatically control series visibility using the exposed showSeries(name) and hideSeries(name) methods instead of manipulating the dataset or triggering legend events [source](./references/issues/issue-261.md#feature-request-add-methods-to-programmatically-show-and-hide-series)
  • Opt-in to the cursor pointer for clickable chart elements via userOptions.useCursorPointer: true, as it is disabled by default for better accessibility compliance [source](./references/releases/v3.15.0.md#cursor-pointer-is-now-opt-in-303)
  • Implement custom alt text for charts by enabling userOptions.buttons.altCopy: true and providing a tailored string through the userOptions.callbacks.altCopy callback [source](./references/releases/v3.15.0.md#alt-text-copy-new-action-button)
  • Configure PDF export orientation and scaling directly in userOptions.print to handle different chart aspect ratios without requiring manual JsPDF wiring [source](./references/releases/v3.15.0.md#chart-zoom-minimap)
  • Signal estimated or projected data in VueUiXy by passing dashIndices in the dataset to render specific line segments as dashed [source](./references/releases/v3.15.0.md#vueuixy)
  • Prevent label overlapping in dense charts by setting hideLabelsUnderValue (in Donut) or hideUnderProportion (in Treemap) to suppress labels for small segments [source](./references/discussions/discussion-187.md#optimization-request-for-vueuidonutevolution-component---label-overlapping-and-zero-value-handling)
  • Reverse the y-axis (e.g., for ranking) by providing negative values in the dataset and using absolute value formatters for grid labels and tooltips [source](./references/discussions/discussion-194.md#accepted-answer)
// Reversed y-axis via negative values and absolute formatting
const config = {
  chart: {
    grid: { labels: { yAxis: { formatter: ({ value }) => Math.abs(value) } } }
  }
}
  • Fine-tune the responsive behavior of table-based charts (like VueUiCarouselTable) by adjusting responsiveBreakpoint to control exactly when the layout switches for mobile [source](./references/discussions/discussion-75.md#accepted-answer)

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet — be the first.

Versions

  • v0.1.0 Imported from the upstream source.