v2.2.51

This release adds slots to customize the user options menu. You can now:

• choose which buttons to show or hide
• customize the button contents

Predefined actions in user options menu depend on the type of chart. Some charts have more or less actions available. Action buttons contain an predefined icons by default.

To hide a given action, set the userOption.buttons, for example:

const config = ref({
  userOptions: {
    show: true,
    buttons: {
      img: false,
      csv: false,
      // all other actions will be visible by default (list of all actions below)
    },
  },
});

You can use slots to override the content of action buttons.
What happens when the button is clicked is taken care of by the component, except for the optionFullscreen slot.

<VueUiDonut :config="config" :dataset="dataset">
  <template #optionPdf> GENERATE PDF </template>

  <!-- This is the only action where scoped content is provided -->
  <template template #optionFullscreen="{ isFullscreen, toggleFullscreen }">
    <div @click="toggleFullscreen(isFullscreen ? 'out' : 'in')">
      TOGGLE FULLSCREEN
    </div>
  </template>
</VueUiDonut>

User options actions available per chart:

Chart name	User options actions slot names
VueUi3dBar	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiAgePyramid	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiCandlestick	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiChestnut	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiDonut	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiDonutEvolution	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiDumbbell	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiFlow	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiGalaxy	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiGauge	optionPdf, optionImg, optionFullscreen
VueUiHeatmap	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiMolecule	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiMoodRadar	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiNestedDonuts	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiOnion	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiParallelCoordinatePlot	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiQuadrant	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiQuickChart	optionPdf, optionImg, optionFullscreen
VueUiRadar	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiRelationCircle	optionPdf, optionImg, optionFullscreen
VueUiRings	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiScatter	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiSparkHistogram	(no user options menu)
VueUiSparkStackbar	(no user options menu)
VueUiSparkTrend	(no user options menu)
VueUiSparkbar	(no user options menu)
VueUiSparkgauge	(no user options menu)
VueUiSparkline	(no user options menu)
VueUiStripPlot	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen
VueUiTableHeatmap	optionPdf, optionImg, optionCsv, optionFullscreen
VueUiTableSparkline	optionPdf, optionImg, optionCsv, optionFullscreen
VueUiThermometer	optionPdf, optionImg, optionFullscreen
VueUiTiremarks	optionPdf, optionImg, optionFullscreen
VueUiTreemap	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiVerticalBar	optionPdf, optionImg, optionCsv, optionTable, optionSort, optionFullscreen
VueUiWaffle	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiWheel	optionPdf, optionImg, optionFullscreen
VueUiWordCloud	optionPdf, optionImg, optionCsv, optionTable, optionFullscreen
VueUiXy	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack
VueUiXyCanvas	optionPdf, optionImg, optionCsv, optionTable, optionLabels, optionFullscreen, optionStack