v3.7.11

VueUiSparkStackbar

• Fix legend value & percentage not showing when animation is disabled

Dev deps

• Bump vue from 3.5.24 to 3.5.25

v3.7.10

VueUiParallelCoordinatePlot

• Pass series shapes to the legend (fix legend only showing circle markers when custom shapes are defined)

VueUiWordCloud, VueUiMolecule

• Add button in user options menu to lock / unlock the pan zoom feature
• Expose the toggleZoom method to programmatically toggle from the parent
• New config attributes:

const config = ref({
  userOptions: {
    buttons: {
      zoom: true, // new
    },
    buttonTitles: {
      zoom: "Toggle zoom lock", // new
    },
    callbacks: {
      zoom: null, // new
    },
  },
});

• Add the #optionZoom scoped slot to customize the button content in the user menu:

<VueUiWordCloud :dataset="dataset" :config="config">
  <template #optionZoom="{ isZoomLocked }">
    <div>LOCKED: {{ isZoomLocked }}</div>
  </template>
</VueUiWordCloud>

VueUiMolecule

• Fix annotator drawing feature not working
• Fix links disappearing when config changes dynamically

VueUiIcon

Add new icons:

• zoomLock
• zoomUnlock
• lock
• unlock

Docs website is up to date

v3.7.9

Release 3.7.9

VueUiTreemap

• Add labels for groups and improved drilling feature
• Add config options for groups:

const config = ref({
  style: {
    chart: {
      layout: {
        rects: {
          // New:
          group: {
            stroke: "#E1E5E8",
            strokeWidth: 1,
            useSeriesBackgroundColor: false,
            backgroundLighterRatio: 0.4,
            label: {
              adaptColorToBackground: false,
              color: "#2D3536",
            },
          },
        },
      },
    },
  },
});

• Add a #group-label scoped slot, to override default group labels:

<VueUiTreemap :dataset="dataset" :config="config">
  <template #group-label="{ group }">
    <div>{{ group.name }}: {{ group.value }}</div>
  </template>
</VueUiTreemap>

Docs are up to date
View examples

v3.7.8

VueUiXy

• Fix wrong offsetX of #plot-comment slots for bar types

VueUiQuickChart

• Set donutStroke on themes for donut variant

v3.7.7

VueUiWordCloud

• Improve algorithm to avoid blocking the main thread during word placement. Words appear gradually, instead of waiting for the final resolution like before.

Docs website is up to date

v3.7.6

VueUiCirclePack

• Replace the old clumsy selected state with a tooltip
• Config updates:

const config = ref({
    style: {
        chart: {
            tooltip: {}, // New, works like all other tooltips
            circles: {
                selectedShadowColor: '#2D353C', // New
                zoom: {} // Deprecated
            }
        }
    },
    userOptions: {
        buttons: {
            tooltip: true, // New
        },
        callbacks: {
            tooltip: null // New
        },
        buttonTitles: {
            tooltip: 'Toggle tooltip' // New
        }
    }
});

Docs and chart maker are up to date

v3.7.5

VueUiHorizontalBar #272

• Fix sizing issues in responsive mode
• Updated config:

const config = ref({
  autoSize: true, // Deprecated, not necessary anymore
  style: {
    chart: {
      width: 512, // new
      height: 316, // new
      layout: {
        bars: {
          height: 32, // Deprecated
          offsetX: 0 // used to be 64, now available space is automatically adapted, but you can still set additional offset
        },
      },
    },
  },
});

VueUiCirclePack #275

• Fix sizing issues in responsive mode
• Fix non predictable chart sizing in general
• Updated config:

const config = ref({
  responsive: false, // new
  style: {
    chart: {
      width: 512, // new
      height: 316, // new
    },
  },
});

VueUiSparkbar #273

• Add css classes to target data labels:

.vue-ui-sparkbar-datapoint-name {
}
.vue-ui-sparkbar-datapoint-value {
}

---

Docs are up to date

v3.7.2

VueUi3dBar #271

• Fix legend.bold not applied

v3.7.1

• Add missing radiusRatio type definition in VueUiDonutConfig #268
• VueUiRelationCircle: expose the generateSvg method

v3.7.0

New dark theme #267

• The default color scheme is adapted to light mode. This release adds the 'dark' theme with defaults adapted to dark mode, saving the hassle of having to setup config details when looking for a quick out-of-the-box setup.

const config = ref({
   theme: 'dark', // new
});

For a quick setup:

const config = computed(() => ({
  theme: isDarkMode ? 'dark' : '', // empty strings defaults to light theme
}));

• This release also implements a clear hierarchy in configuration precedence: while using a theme, your provided config will take precedence to the theme's, which was not the case before. For example, if the only thing you want to change is the background color but the rest of the theme is fine, now that's possible.

Bundle size reduction

• Components now only bundle their individual themes
• The getThemeConfig utility, which can be used to get all the themes for a given component, is now async:

import { getThemeConfig } from 'vue-data-ui';
const xy_themes = await getThemeConfig('vue_ui_xy');

This is a very small breaking change, but it's a niche feature.

Add Galician locale

• New 'gl' locale in your dateTimeFormatter config

Readme grammar & typo fixes #265

• Thanks @WuMingDao for the help :)

---

Docs are up to date