vue-data-ui-skilld（Vue 数据 UI skilld）

graphieros/vue-data-ui vue-data-ui@3.17.13

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

References: Docs

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
• 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
• NEW: minimap styling — handleType ('grab', 'chevron', etc.), handleWidth, and additionalHeight added in v3.15.0 to customize zoom minimap handles source
• NEW: dashIndices in VueUiXy — new dataset property in v3.15.0 allows displaying specific datapoints as dashed segments to indicate estimated data source
• BREAKING: locales files removed — as of v3.14.3, individual locale files are removed in favor of Intl for computing time labels source
• NEW: isPrintingImg and isPrintingSvg — booleans now exposed in the #svg slot since v3.14.10 to control content during print/export source
• NEW: zoomStart, zoomEnd, and zoomReset — new emits added to VueUiXy in v3.14.9 to track zoom component interactions source
• 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
• NEW: skeletonConfig customization — VueUiSparkline now allows passing custom skeletonConfig and skeletonDataset in v3.13.7 source
• NEW: oklch color support — added in v3.13.6, allowing the use of OKLCH color space across all components source
• NEW: side in zoom.customFormat — the handle side ('left' | 'right') is now exposed in the zoom formatting callback since v3.13.5 source
• NEW: zoom.maxWidth — added to multiple charts in v3.13.4 to control the maximum width of the zoom component source
• NEW: pulse in VueUiSparkline — optional animated pulse effect with trail added to line mode in v3.13.3 source
• NEW: Annotator modes — straight line and arrow modes added to the built-in annotator in v3.12.0 source

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
• 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
• Programmatically control series visibility using the exposed showSeries(name) and hideSeries(name) methods instead of manipulating the dataset or triggering legend events source
• 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
• Implement custom alt text for charts by enabling userOptions.buttons.altCopy: true and providing a tailored string through the userOptions.callbacks.altCopy callback source
• Configure PDF export orientation and scaling directly in userOptions.print to handle different chart aspect ratios without requiring manual JsPDF wiring source
• Signal estimated or projected data in VueUiXy by passing dashIndices in the dataset to render specific line segments as dashed source
• Prevent label overlapping in dense charts by setting hideLabelsUnderValue (in Donut) or hideUnderProportion (in Treemap) to suppress labels for small segments source
• 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

// 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