Changes

VueUiWorld

Themes, selection and hover cursors

Select a theme and enable multiple country selection. Explicit colors override theme colors. Country hover cursors remain default unless userOptions.useCursorPointer is enabled.

<script setup>
import { ref } from "vue";
import { VueUiWorld } from "vue-data-ui";

const selectedCountries = ref(["FRA"]);
const dataset = { FRA: { value: 42 }, DEU: { value: 68 } };
const config = {
    theme: "zen",
    userOptions: { useCursorPointer: true },
    selection: { enabled: true, multiple: true, color: "#333333" },
    style: { chart: { territory: { strokeWidthSelected: 2 } } },
};
</script>

<template>
    <VueUiWorld
        v-model:selectedCountries="selectedCountries"
        :dataset="dataset"
        :config="config"
    />
</template>

Controlled selection with `v-model:selectedCountries`

The new selectedCountries prop accepts an array of country codes. Use v-model:selectedCountries to keep it synchronized with country clicks and to change the selection programmatically. Enable selection.multiple to select more than one country.

<script setup>
import { ref } from "vue";
import { VueUiWorld } from "vue-data-ui";

const selectedCountries = ref(["FRA"]);
const dataset = { FRA: { value: 42 }, DEU: { value: 68 } };
const config = { selection: { enabled: true, multiple: true } };
</script>

<template>
    <button @click="selectedCountries = ['FRA', 'DEU']">
        Select France and Germany
    </button>
    <button @click="selectedCountries = []">Clear selection</button>
    <p>Selected countries: {{ selectedCountries.join(", ") }}</p>
    <VueUiWorld
        v-model:selectedCountries="selectedCountries"
        :dataset="dataset"
        :config="config"
    />
</template>

Color scales and gradient legends

Use a fixed domain to keep country colors comparable across data updates. Gradient dimensions apply to the colored band, with numeric pixel values.

const config = {
    style: {
        chart: {
            colorScale: {
                type: "linear",
                domain: [0, 100],
                legend: {
                    show: true,
                    title: "Score",
                    gradient: { borderRadius: 6, height: 16 },
                },
            },
        },
    },
};

Alternative style.chart.colorScale settings:

// Quantile bands are computed from the distribution of data values.
const quantile = { type: "quantile", quantileSteps: 5 };

// Three thresholds produce four bands with explicit boundary values.
const threshold = {
    type: "threshold",
    thresholds: [25, 50, 75],
    colors: ["#EFF3FF", "#BDD7E7", "#6BAED6", "#2171B5"],
};

// Diverging scales distinguish values on either side of a center.
const diverging = {
    type: "diverging",
    domain: [-100, 100],
    center: 0,
    middleColor: "#FFFFFF",
};

// Logarithmic scales use a positive domain.
const logarithmic = { type: "log", domain: [1, 1000] };

Zoom and initial views

style.chart.zoom.show enables both zooming and flat-map panning; its default is false. Globe rotation remains available when zoom is disabled or frozen with the UserOptions zoom lock button.

const config = {
    style: {
        chart: {
            zoom: {
                show: true,
                minZoom: 1,
                maxZoom: 20,
                region: null,
                countries: ["FRA", "DEU"],
            },
        },
    },
};

countries fits the initial view to the listed countries. Alternatively, leave countries: [] and set a named region, such as 'europe'. Countries take precedence over the region. Fitting widely separated countries may require showing most of the world.

The component ref also exposes viewport controls:

worldRef.value.focusCountry("JPN");
worldRef.value.fitCountries(["FRA", "DEU"]);
worldRef.value.resetZoom();

Point overlays and tooltips

Pass points through the points prop. Coordinates use [longitude, latitude]; values determine bubble area relative to the largest valid point. A point's color overrides the configured default, and radius can set its size explicitly. A country dataset is optional for points-only maps.

const points = [
    { id: "paris", name: "Paris", coordinates: [2.35, 48.86], value: 40 },
    {
        id: "tokyo",
        name: "Tokyo",
        coordinates: [139.69, 35.68],
        value: 100,
        color: "#E76F51",
    },
];

const config = {
    style: {
        chart: {
            points: { color: "#2A9D8F", radius: 5, maxRadius: 24 },
            tooltip: {
                customFormat: ({ kind, datapoint }) =>
                    kind === "point"
                        ? `${datapoint.name}: ${datapoint.value}`
                        : `${datapoint.code}: ${datapoint.value}`,
            },
        },
    },
};

<VueUiWorld :points="points" :config="config" @selectPoint="onSelectPoint" />

Docs are up to date

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