/unovis-vue-skilld

Component catalog

All exports come from the package barrel @unovis/vue (components.d.ts, containers.d.ts). Every component also exports a selectors object, for example VisAreaSelectors.

Rules:

• Components in the first three sections require a container context. Place them in the container's default slot.
• Standalone components render their own DOM node. Use them anywhere.
• Props map one to one to the @unovis/ts config interface named after the core class, for example StackedBarConfigInterface.

Containers

Key VisXYContainer props, verified in containers/xy-container/index.js:7-41: xScale, yScale, xDomain, yDomain, xDomainMinConstraint, xDomainMaxConstraint, yDomainMinConstraint, yDomainMaxConstraint, xRange, yRange, yDirection, xAxis, yAxis, autoMargin, tooltip, crosshair, preventEmptyDomain, scaleByDomain, annotations, clipPathExtend, bleed, onRenderComplete, duration, margin, padding, sizing, width, height, svgDefs, ariaLabel, colorFunction, data.

VisSingleContainer takes the same layout props (margin, padding, sizing, width, height, svgDefs, ariaLabel, colorFunction, onRenderComplete) plus component, tooltip, and annotations (containers/single-container/index.js:7-22).

Both containers expose component, the ref to the core container instance.

Docs: XY Container, Single Container.

XY chart components

Live inside VisXYContainer. All take accessors x and y, plus id, color, colorKeys, xScale, yScale, excludeFromDomainCalculation, duration, events, attributes, data.

Docs for each: https://unovis.dev/docs/components/<Name>.

VisBoxplot example:

<script setup lang="ts">
const x = (d: StatsRecord) => d.group
const median = (d: StatsRecord) => d.median
const quartiles = (d: StatsRecord) => d.quartiles // [q1, q3]
const whiskers = (d: StatsRecord) => d.whiskers // [min, max]
</script>

<template>
  <VisXYContainer :data="data">
    <VisBoxplot :x="x" :median="median" :quartiles="quartiles" :whiskers="whiskers" />
    <VisAxis type="x" />
    <VisAxis type="y" />
  </VisXYContainer>
</template>

Provide a subset of the accessors for quartiles only or median only plots (Boxplot docs).

Auxiliary components

Single container components

Live inside VisSingleContainer.

VisRadialBar and VisHeatmap are new in 1.7 (release notes).

<script setup lang="ts">
import { VisSingleContainer, VisHeatmap } from '@unovis/vue'
const value = (d: number) => d
</script>

<template>
  <VisSingleContainer :data="data">
    <VisHeatmap :value="value" :num-rows="7" :cell-size="16" :cell-padding="3" :cell-corner-radius="3" />
  </VisSingleContainer>
</template>

VisHeatmap fills column by column by default. Set layout to HeatmapLayoutType.Row to fill row by row. A null or undefined value renders an empty cell (Heatmap docs).

VisGraph data shape:

const data = {
  nodes: [{ id: 'a', label: 'Node A' }],
  links: [{ source: 'a', target: 'b', width: 2 }],
}

Standalone components

Types and helpers from @unovis/ts

The wrappers forward config objects, so enums and helpers come from @unovis/ts:

import {
  Scale, // scaleLinear, scalePow, scaleOrdinal for xScale / yScale / colorFunction
  Sizing, // Sizing.Extend for the container sizing prop
  FitMode, // FitMode.Wrap for graph label wrapping
  HeatmapLayoutType, // Column (default) or Row
  FillPatternType, LinePatternType, // pattern accessor values
  CrosshairSnapMode, // X (default) or XY
} from '@unovis/ts'

Scale usage: pass a d3 scale to xScale or yScale (XY Container docs).