graphieros/vue-data-ui v2.17.2

on GitHub

Most chart components

• Add exposed method getImage which programmatically returns the dataUri of the chart

const chart = ref<InstanceType<typeof VueUiXy>>(null)

onMounted(async () => {
  if (chart.value) {
    const { 
      imageUri,
      base64,
      title, // as provided by your configuration in title.text
      width,
      height,
      aspectRatio
    } = await chart.value.getImage({ scale: 2 }) // optional scale param, defaults to 2, increase for better image quality
    console.log(imageUri)
  }
})

• Existing getData exposed method is now a Promise

const chart = ref<InstanceType<typeof VueUiXy>>()

onMounted(async () => {
  if (chart.value) {
    const data = await chart.value.getData()
    console.log(data)
  }
})

All components with pdf & image user options

• Expose PNG imageUri in pdf and img user options callbacks

const config = ref({
  userOptions: {
    callbacks: {
      // Override the default PDF and IMG generation to use your own solution 
      pdf: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu PDF button
      },
      img: ({ imageUri, base64 }) => {
        console.log(imageUri) // will log when clicking on the user options menu IMG button
      }
    }
  }
})

Note: the old base64 exposed data is still available, returning a uri with a svg+xml prefix, which is not compatible with libs like pdfMake, contrary to imageUri, which returns a png type.

Add config options to control the display of values and percentages in the legends of some charts

const config = ref({
  style: {
    chart: {
      legend: {
        showValue: true,
        showPercentage: true
      }
    }
  }
})

The following components are concerned:

• VueUiDonut
• VueUiNestedDonuts
• VueUiDonutEvolution
• VueUiWaffle
• VueUitreemap
• VueUiRings
• VueUiGalaxy

VueUiDonut & VueUiNestedDonuts

• Add autoSize exposed function.
  The svg area has an overflow: visible set, to allow for big dataLabels to be visible in all cases.
  However, when converting the svg to an image (during a print to PNG or PDF for example), overflow gets ignored and labels cropped.
  Using autoSize before calling the print resizes the viewBox of the svg to fit all its contents. The resulting svg might not be centered anymore, but will feature all its elements uncut. After the print has finished, you can reset the chart by updating a key on the component.

const chart = ref<InstanceType<typeof VueUiDonut>>()

onMounted(() => {
  if (chart.value) {
    chart.value.autoSize()
  }
})

Legends

• Improve css on legend items, to avoid weird wrapping when converted to PNG or PDF