graphieros/vue-data-ui v3.15.0 on GitHub

Special thanks 🙏

Thank you to the npmx wonderful team ❤️ for the improvement ideas and recommendations

a11y improvements

Cursor pointer is now opt-in #303

to use cursor pointer on your chart's clickable elements:

const config = computed(() => {
  userOptions: {
    useCursorPointer: true, // false by default
  }
});

Alt text copy new action button

In the charts context menu, a new 'Copy alt text' button can be enabled
Paired with a callback, that exposes the chart's dataset and config, this action can be used to tailor an alt text and copy it to the clipboard.

const config = computed(() => (
  userOptions: {
    buttons: {
      altCopy: true, // false by default. Set to true to display the button in the context menu
    },
    callbacks: {
      altCopy: ({ dataset: dst, config: cfg }) => {
        // Convert the data into a tailor-made alt text you can copy to the clipboard
      }
    },
    buttonTitles: {
      altCopy: 'Copy alt text' // provide your translation for the button's tooltip
    }
  }
));

Chart zoom minimap

The clickable area of the range handles was fixed to be a11y compliant, and not affect Lighthouse scores
The width of range handles was expanded slightly, and shows a discrete grab icon
New options to style range handles in config...minimap:

minimap: {
  additionalHeight: 0, // increase the minimap's height
  handleIconColor: null,
  handleBorderWidth: 1,
  handleBorderColor: null,
  handleFill: null,
  handleWidth: 20, // clamped from 20 to 40
  handleType: 'grab', // 'empty' | 'chevron' | 'grab' | 'arrow'
}

VueUiXy

Fix rendering issue on iOs 16 (Object.groupBy polyfill)
Add a dataset optional parameter to display datapoints at given indices as dashed segments, which can be useful to signal estimated data:

const dataset = computed(() => ([
  {
    type: 'line',
    name: 'Series A',
    series: [10, 20, 30, 40, 50],
    dashIndices: [4] // will show last datapoint as a dashed line
  }
]))