@agnosticeng/dv NPM

@agnosticeng/dv

A lightweight, customizable data visualization library for Svelte applications.

Features

📊 Interactive Data Table
- Sortable columns
- Resizable columns
- Light/Dark theme support
- Type-aware formatting
- Fixed headers
- Custom styling options
📈 Charts
- Line charts
- Candlestick charts
- Responsive design
- Automatic scaling
- Multiple series support

Installation

npm install @agnosticeng/dv

Usage

Data Table

<script>
import { Table } from '@agnosticeng/dv';

const columns = [
  { name: 'id', type: 'Int32' },
  { name: 'name', type: 'String' },
  { name: 'date', type: 'DateTime' },
  { name: 'value', type: 'Float64' }
];

const data = [
  { id: 1, name: 'Item 1', date: '2023-01-01', value: 100.5 },
  { id: 2, name: 'Item 2', date: '2023-01-02', value: 200.75 }
];
</script>

<Table {data} {columns} theme="dark" />

Charts

<script>
import { Chart } from '@agnosticeng/dv';

const data = [
  { date: '2023-01-01', value: 100.5 },
  { date: '2023-01-02', value: 200.75 }
];

const settings = {
  chartType: 'line',
  xAxis: {
    series: ['date']
  },
  yAxis: {
    series: ['value']
  }
};
</script>

<Chart {data} {settings} />

API Reference

Table Props

Prop	Type	Default	Description
data	`Array<Object>`	required	Data to be displayed in the table
columns	`Array<Column>`	required	Column definitions
theme	`'light' \\| 'dark'`	`'dark'`	Table theme

Chart Props

Prop	Type	Default	Description
data	`Array<Object>`	required	Data to be visualized
settings	`ChartSettings`	required	Chart configuration

Types

type Column = {
  name: string;
  type: string;
};

type ChartSettings = {
  chartType: 'candle' | 'line';
  xAxis: {
    series: string[];
  };
  yAxis: {
    series: string[];
  };
};