{"_id":"@allternit/viz","_rev":"2-cad39b3735d4fe90033c23737b62610a","name":"@allternit/viz","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@allternit/viz","version":"0.1.0","keywords":["a2r","visualization","charts","dashboards","data"],"license":"MIT","_id":"@allternit/viz@0.1.0","maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"dist":{"shasum":"9203e64e4d10f43e9ad4e2cf79630bf387a45609","tarball":"https://registry.npmjs.org/@allternit/viz/-/viz-0.1.0.tgz","fileCount":45,"integrity":"sha512-b/72OX+GVv9nOHfsRIAVueQbKG8PRoi5EFakw9vv/xsU6IfhMexQh3qAGeO8hyIVEquhtshWlBeU0m9sxQX8NA==","signatures":[{"sig":"MEYCIQCbRWWF2HfeeEc7FR/itFs+aJBXn6iDnslvtsHLhwFuYQIhAIxKmBDNcB5kDbOMfRT6QxWUu4rhlvjjgIKhPP0wt/oM","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":327133},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./charts":{"types":"./dist/charts/index.d.ts","import":"./dist/charts/index.js"},"./components":{"types":"./dist/components/index.d.ts","import":"./dist/components/index.js"}},"gitHead":"197c1497d02ffb94fe24fbdc6a6de34e98297159","scripts":{"test":"vitest run","build":"tsc","typecheck":"tsc --noEmit"},"_npmUser":{"name":"allternit","email":"allternitpbc@gmail.com"},"_npmVersion":"11.9.0","description":"A2R Data Visualization - Charts, graphs, and dashboards","directories":{},"_nodeVersion":"25.6.1","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vitest":"^1.0.0","typescript":"^5.3.0","@types/node":"^20.0.0"},"_npmOperationalInternal":{"tmp":"tmp/viz_0.1.0_1776018380755_0.6326107731613231","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@allternit/viz","version":"0.1.1","description":"Allternit Data Visualization - Charts, graphs, and dashboards","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"build":"tsc","test":"vitest run --passWithNoTests","typecheck":"tsc --noEmit"},"dependencies":{},"devDependencies":{"@types/node":"^20.0.0","typescript":"^5.3.0","vitest":"^1.0.0"},"keywords":["allternit","visualization","charts","dashboards","data"],"license":"MIT","_id":"@allternit/viz@0.1.1","gitHead":"bb998c3974d77020fbc887af2c6bdd961281b32e","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-7r3pd7cNSTDe7OXEd775P9bYScxGwrG6EFFUVFF0ULhnba3GoU3AriR70XH0kOVYU/Z1eKvumS69CmoK6812zA==","shasum":"e38437e867a0e80a8ad7f50181e9f130a2d17fc6","tarball":"https://registry.npmjs.org/@allternit/viz/-/viz-0.1.1.tgz","fileCount":29,"unpackedSize":206010,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCqSAdAjpeYFFSkrosNVQNIF0MwBzpdqMFugU1YO6fh9wIhAPKoZ0as4YB/7ljNctzmtMjBHccYCecDWqQ27ci6rHbt"}]},"_npmUser":{"name":"allternit","email":"allternitpbc@gmail.com"},"directories":{},"maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/viz_0.1.1_1788561278902_0.9510531824344939"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-12T18:26:20.633Z","modified":"2026-09-04T22:34:39.213Z","0.1.0":"2026-04-12T18:26:20.991Z","0.1.1":"2026-09-04T22:34:39.055Z"},"license":"MIT","keywords":["allternit","visualization","charts","dashboards","data"],"description":"Allternit Data Visualization - Charts, graphs, and dashboards","maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"readme":"# @allternit/viz\n\nAllternit Data Visualization - Charts, graphs, and dashboards.\n\n## Overview\n\nThe Visualization package provides chart rendering, dashboard components, and data transformation utilities for the Allternit platform. It supports multiple output formats including SVG, Canvas, and React components.\n\n## Features\n\n- **Chart Types**: Line, Bar, Column, Area, Pie, Donut, Scatter, Heatmap\n- **SVG Rendering**: Server-side chart generation\n- **Theming**: Light and dark themes with customizable palettes\n- **Dashboards**: Grid-based dashboard layouts\n- **Data Transforms**: Filter, map, aggregate, sort data pipelines\n\n## Installation\n\n```bash\npnpm add @allternit/viz\n```\n\n## Quick Start\n\n```typescript\nimport { createSVGRenderer } from '@allternit/viz';\n\nconst renderer = createSVGRenderer();\n\nconst svg = renderer.render({\n  type: 'bar',\n  title: 'Monthly Sales',\n  width: 800,\n  height: 400,\n  xAxis: { title: 'Month' },\n  yAxis: { title: 'Sales ($)' },\n}, [\n  {\n    id: 'sales-2024',\n    name: 'Sales 2024',\n    data: [\n      { x: 'Jan', y: 10000 },\n      { x: 'Feb', y: 15000 },\n      { x: 'Mar', y: 20000 },\n    ],\n  },\n]);\n\n// Save or serve SVG\nconsole.log(svg);\n```\n\n## Chart Types\n\n### Line Chart\n```typescript\nconst svg = renderer.render({\n  type: 'line',\n  title: 'Revenue Trend',\n}, [\n  {\n    id: 'revenue',\n    name: 'Revenue',\n    data: [\n      { x: 'Q1', y: 100000 },\n      { x: 'Q2', y: 150000 },\n      { x: 'Q3', y: 180000 },\n    ],\n  },\n]);\n```\n\n### Bar Chart\n```typescript\nconst svg = renderer.render({\n  type: 'bar',\n  title: 'Sales by Region',\n}, [\n  {\n    id: 'sales',\n    name: 'Sales',\n    data: [\n      { x: 'North', y: 50000 },\n      { x: 'South', y: 45000 },\n      { x: 'East', y: 60000 },\n      { x: 'West', y: 55000 },\n    ],\n  },\n]);\n```\n\n### Pie Chart\n```typescript\nconst svg = renderer.render({\n  type: 'pie',\n  title: 'Market Share',\n}, [\n  {\n    id: 'share',\n    name: 'Share',\n    data: [\n      { name: 'Product A', value: 30 },\n      { name: 'Product B', value: 25 },\n      { name: 'Product C', value: 45 },\n    ],\n  },\n]);\n```\n\n## Configuration\n\n### Chart Config\n```typescript\ninterface ChartConfig {\n  type: ChartType;\n  title?: string;\n  subtitle?: string;\n  width?: number;\n  height?: number;\n  xAxis?: AxisConfig;\n  yAxis?: AxisConfig;\n  legend?: LegendConfig;\n  tooltip?: TooltipConfig;\n  colors?: string[];\n  theme?: 'light' | 'dark';\n  animation?: boolean;\n  dataLabels?: boolean;\n}\n```\n\n### Axis Config\n```typescript\ninterface AxisConfig {\n  title?: string;\n  type?: 'category' | 'number' | 'datetime';\n  min?: number;\n  max?: number;\n  categories?: string[];\n}\n```\n\n## Themes\n\n```typescript\nimport { palettes } from '@allternit/viz';\n\n// Use predefined palette\nconst svg = renderer.render({\n  type: 'line',\n  theme: 'dark',\n}, series);\n\n// Custom palette\nconst customPalette = {\n  primary: ['#ff0000', '#00ff00', '#0000ff'],\n  secondary: ['#ffcccc', '#ccffcc', '#ccccff'],\n  semantic: {\n    success: '#00ff00',\n    warning: '#ffff00',\n    error: '#ff0000',\n    info: '#0000ff',\n  },\n  background: ['#ffffff', '#f0f0f0'],\n  text: {\n    primary: '#000000',\n    secondary: '#666666',\n    muted: '#999999',\n  },\n};\n```\n\n## API Reference\n\n### SVG Renderer\n\n```typescript\ninterface SVGRenderer {\n  render(config: ChartConfig, series: DataSeries[]): string;\n  getMetadata(type: ChartType): ChartMetadata;\n}\n```\n\n### Data Series\n\n```typescript\ninterface DataSeries {\n  id: string;\n  name: string;\n  type?: ChartType;\n  data: DataPoint[];\n  color?: string;\n}\n\ninterface DataPoint {\n  x?: string | number | Date;\n  y?: number;\n  name?: string;\n  value?: number;\n}\n```\n\n## Supported Chart Types\n\n| Type | Description | Data Structure |\n|------|-------------|----------------|\n| `line` | Line chart | `{ x, y }[]` |\n| `bar` | Bar chart | `{ x, y }[]` |\n| `column` | Column chart | `{ x, y }[]` |\n| `area` | Area chart | `{ x, y }[]` |\n| `pie` | Pie chart | `{ name, value }[]` |\n| `donut` | Donut chart | `{ name, value }[]` |\n| `scatter` | Scatter plot | `{ x, y }[]` |\n| `heatmap` | Heatmap | `{ x, y, value }[]` |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}