@unovis/svelte
TypeScript icon, indicating that this package has built-in type declarations

1.5.0-beta.0 • Public • Published

cover

🟨 Unovis is a modular data visualization framework for React, Angular, Svelte, and vanilla TypeScript or JavaScript.

@unovis/svelte provides Svelte components for @unovis/ts, which makes Unovis integration into a Svelte app much easier.

Learn more about Unovis on our website unovis.dev

Installation

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

Quick Start

TypeScript

<script lang="ts">
  import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'

  type DataRecord = { x: number; y: number }
  export let data = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ]
  const x = (d: DataRecord) => d.x
  const y = (d: DataRecord) => d.y
</script>

<VisXYContainer height={600}>
  <VisLine {data} {x} {y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
</VisXYContainer>

JavaScript

<script>
  import { VisXYContainer, VisLine, VisAxis } from '@unovis/svelte'

  export let data = [
    { x: 0, y: 0 },
    { x: 1, y: 2 },
    { x: 2, y: 1 },
  ]
  const x = d => d.x
  const y = d => d.y
</script>

<VisXYContainer height={600}>
  <VisLine {data} {x} {y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
</VisXYContainer>

Documentation

https://unovis.dev/docs

Examples

https://unovis.dev/gallery

License

Apache-2.0

Package Sidebar

Install

npm i @unovis/svelte

Homepage

unovis.dev

Weekly Downloads

1,350

Version

1.5.0-beta.0

License

Apache-2.0

Unpacked Size

69.8 kB

Total Files

62

Last publish

Collaborators

  • curran
  • lee00678
  • rmauer
  • rebeccabol
  • caabernathy
  • nikita-rokotyan-f5
  • rokotyan