Unovis Data Visualization Framework

Most Unovis components require a Container to render. There are two primary types:

• XY Container: Designed to manage multiple XY Components (such as Line, GroupedBar, or Scatter) along with optional Axis, Tooltip, and Crosshair components.
• Single Container: Used for components that work with a single element, such as Graph, Sankey, or TopoJSONMap. It also supports Tooltip.

Note: Some components like LeafletMap, LeafletFlowMap, and legends are stand-alone and do not require a container.

You can create a basic line chart by using VisXYContainer to wrap your data and axis components. Use VisLine to define the line, providing accessor functions for the x and y coordinates via useCallback to ensure performance and stability.

import React, { useCallback } from 'react'
import { VisXYContainer, VisLine, VisAxis } from '@unovis/react'

export type DataRecord = { x: number; y: number }
export const data: DataRecord[] = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 1 },
]

export function BasicLineChart (): JSX.Element {
  return (
    <VisXYContainer data={data} height={600}>
      <VisLine<DataRecord>
        x={useCallback(d => d.x, [])}
        y={useCallback(d => d.y, [])}
      ></VisLine>
      <VisAxis type="x"></VisAxis>
      <VisAxis type="y"></VisAxis>
    </VisXYContainer>
  )
}

Unovis components use CSS variables to control SVG attributes like fill, stroke, and opacity. You can override these variables in your CSS to customize component appearance.

Naming Convention: Variables follow the pattern --vis-[label]-[attribute]. For example, --vis-area-cursor targets the cursor property of the Area component.

Usage: Apply custom styles to the container element of your Unovis component. For example, to customize a Sankey component, add a custom class to its container and define the variables in your CSS.

To create a stacked area chart, provide an array of accessors to the y property.

Important: Do not provide a single accessor that returns an array. You must provide an array where each element is an individual accessor function.

Follow these templates for your Pull Request metadata:

PR Title

• New components: New Component: <Name> (<milestone>) (e.g., New Component: Boxplot (1.7)).
• Other changes: Use a concise, specific summary.

PR Body

Use the checklist template below. For new components, tick the applicable boxes. For non-component PRs, provide a short summary of what changed and why, and list the surfaces touched (core, dev, docs, or wrappers).

Adding a new `<Name>` <XY/Core/standalone> component

- [x] Dev examples
- [x] Wrappers
- [x] Gallery example
- [x] Docs

<!-- Light + dark screenshots and/or a short screen recording of the component -->

Important: Always attach both light and dark mode screenshots (and a short recording for interactive components).

To use Unovis with Svelte, install both the core TypeScript engine (@unovis/ts) and the Svelte component wrapper (@unovis/svelte) using npm.

npm install -P @unovis/ts @unovis/svelte

Unovis uses a custom commit message format that is enforced via a commit-msg hook. Do not use Conventional Commits (e.g., feat:, fix:); these will be rejected.

Format:

Type | Scope | Subscope | Subscope2: Sentence-case subject

Rules:

• Type (Required): Must be one of the allowed types (see Picking the type and scope).
• Subject (Required): Must be in sentence case (e.g., Add new feature), must not be empty, and must not have a trailing period. Use backticks for code or prop names (e.g., `brushHeightExtend`).
• Scope/Subscope (Optional): Separated by | (space-pipe-space). Subscopes should be PascalCase.

To use Unovis with TypeScript, you may need to adjust your tsconfig.json settings:

1. Enable allowSyntheticDefaultImports in the compilerOptions section.
2. If you have an explicit types array in tsconfig.json, add "topojson-client" to the list to ensure TopoJSON types are found.