https://github.com/dgzlopes/vizceral-svelte

Svelte wrapper around Vizceral.
https://github.com/dgzlopes/vizceral-svelte

graph monitoring observability svelte traffic visualization vizceral webgl

Last synced: 10 days ago
JSON representation

Svelte wrapper around Vizceral.

• Host: GitHub
• URL: https://github.com/dgzlopes/vizceral-svelte
• Owner: dgzlopes
• License: mit
• Created: 2020-03-25T11:31:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T15:30:25.000Z (almost 2 years ago)
• Last Synced: 2024-09-16T12:56:49.896Z (about 2 months ago)
• Topics: graph, monitoring, observability, svelte, traffic, visualization, vizceral, webgl
• Language: JavaScript
• Homepage: https://vizceral-svelte-example.surge.sh/
• Size: 215 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## vizceral-svelte

[![npm](https://img.shields.io/npm/v/vizceral-svelte)](https://www.npmjs.com/package/vizceral-svelte) ![GitHub](https://img.shields.io/github/license/dgzlopes/vizceral-svelte) [![Demo](https://img.shields.io/badge/live-demo-9cf)](https://vizceral-svelte-example.surge.sh/)

![](https://raw.githubusercontent.com/Netflix/vizceral/master/logo.png)

> **This project is under active development.**

This is a svelte wrapper around [Vizceral](https://github.com/Netflix/vizceral), a component for displaying traffic data on a WebGL canvas.

Inspired by [vizceral-react](https://github.com/Netflix/vizceral-react) and [vizceral-vue](https://github.com/manico/vizceral-vue).

## Installation

```bash

# npm

npm install -D vizceral-svelte

```

## Usage

```html

  import Vizceral from "vizceral-svelte";

  import traffic from "./sample_data.json";

```

## Options

You can control the behavior of Vizceral effect by passing specific props to the component.

#### filters

```js

// Default: []

filters: Array;

```

Array of filter definitions and current values to filter out nodes and connections. Refer to

[github.com/Netflix/Vizceral/wiki/Configuration#filters](https://github.com/Netflix/Vizceral/wiki/Configuration#filters)

#### modes

```js

modes: Object;

```

Map of modes to mode type, e.g. { detailedNode: 'volume' }

#### styles

```js

// Default: {}

styles: Object;

```

Styles to override default properties.

#### traffic

```js

// Default: {}

traffic: Object;

```

The traffic data. See [github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format](https://github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format) for specification.