VueUiWordCloud & VueUiMolecule

• Add a reset button when zoom is active

If you need to customize the button, a #reset-action slot is available.
Use reset(true) to reset the animation with the animation, or just reset() without animation.

<VueUiWordCloud :dataset="dataset" :config="config">
  <template #reset-action="{ reset }">
    <button @click="reset(true)">REFRESH</button>
  </template>
</VueUiWordCloud>

VueUiWordCloud

• Improve word packing algorithm
• Use pan zoom instead of a range input (zoom now works with the mouse wheel, and pinch on touch devices)

The following config attributes (color, highlightColor, useResetSlot), which were related to the old range input zoom, are deprecated:

const config = {
  style: {
    chart: {
      zoom: {
        show: true,
        color: #E1E5E8, // deprecated
        highlightColor: #CCCCCC, // deprecated
        useResetSlot: false // deprecated
      }
    }
  }
}

VueUiIcon

Add new icons:

name	icon
computer
home
homeFilled
hourglass
htmlTag
curlyBrackets
curlySpread

Check out all available icons

VueUiDonut & VueUiNestedDonuts

Add padding config option in config.style.chart.padding

const config = {
  style: {
    chart: {
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
      }
    }
  }
}

DOCS and chart builder pages are up to date

VueUiTreemap

• Improve drilling feature

• Add breadcrumbs

Clicking breadcrumbs will drill back to the selected node. Breadcrumbs are only visible when drilling down.
Breadcrumbs are customizable through scoped slots:

#breadcrumb-label and #breadcrumb-arrow

<VueUiTreemap :dataset="dataset" :config="config">
  <template #breadcrumb-label="{ crumb, isRoot }">
    <span v-if="isRoot">Home</span>
    <span v-else>{{ crumb.label }}</span>
  </template>

  <template #breadcrumb-arrow>
    <!-- Use your own icon here -->
    <VueUiIcon name="arrowRight" />
  </template>
</VueUiTreemap>

You can also target the following css classes to override the basic styling of breadcrumbs:

.vue-ui-treemap-breadcrumbs{} /* nav wrapping element*/

.vue-ui-treemap-crumb{} /* individual wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit{} /* sub-wrapper for each breadcrumb */

.vue-ui-treemap-crumb-unit-label{} /* wrapper for the label */

.vue-ui-treemap-crumb-unit-arrow{} /* wrapper for the arrow */

Print options

Add optional control over html2canvas options for pdf and image generation, in userOptions.print:

print: {
    allowTaint: boolean // default: false
    backgroundColor: string // default: '#FFFFFF'
    useCORS: boolean // default: false
    onclone: (doc: Document) => void || null // default: null
    scale: number // default: 2
    logging: boolean // default: false
}

VueUiMolecule #190

Add an optional color attribute to datapoints, to customize individual datapoint colors.
Setting a color on a node will trickle down the color to its children, unless this children also has a defined color.

type VueUiMoleculeDatasetNode = {
    name: string
    details?: string
    nodes?: VueUiMoleculeDatasetNode[]
    color?: string // new
}

VueUiHeatmap (patch to v2.6.38)

Fix issue with dynamic Y positioning of column totals.

Zoom feature

This is a very minor improvement on the zoom feature. Now when hovering an input handle, the time label's z-index takes preeminence, to keep labels readable at all times.

VueUiHeatmap

Add optional row and column totals, with colors.

New config attributes

const config = ref({
  style: {
    layout: {
      cells: {
        rowTotal: {
          value: {
            show: true, // default: false
          },
          color: {
            show: true, // default: false
          }
        },
        columnTotal: {
          value: {
            show: true, // default: false
            rotation: 0, // default: 0
            offsetX: 0, // default: 0
            offsetY: 0, // default: 0
          },
          color: {
            show: true, // default: false
          }
        }
      }
    }
  }
})

Docs are up to date, as well as the chart builder.