{"id":46704935,"url":"https://github.com/pppp606/ink-chart","last_synced_at":"2026-03-09T08:01:47.231Z","repository":{"id":312209745,"uuid":"1046635784","full_name":"pppp606/ink-chart","owner":"pppp606","description":"Terminal visualization components for Ink CLI framework - Sparkline and BarChart components with TypeScript support","archived":false,"fork":false,"pushed_at":"2026-01-21T04:10:29.000Z","size":2006,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-21T16:53:10.987Z","etag":null,"topics":["barchart","chart","cli","ink","nodejs","react","sparkline","terminal","typescript","visualization"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pppp606.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-29T01:44:24.000Z","updated_at":"2026-01-21T15:32:44.000Z","dependencies_parsed_at":"2025-09-30T03:09:59.499Z","dependency_job_id":null,"html_url":"https://github.com/pppp606/ink-chart","commit_stats":null,"previous_names":["pppp606/ink-chart"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/pppp606/ink-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pppp606%2Fink-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pppp606%2Fink-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pppp606%2Fink-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pppp606%2Fink-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pppp606","download_url":"https://codeload.github.com/pppp606/ink-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pppp606%2Fink-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30287446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barchart","chart","cli","ink","nodejs","react","sparkline","terminal","typescript","visualization"],"created_at":"2026-03-09T08:01:04.309Z","updated_at":"2026-03-09T08:01:47.221Z","avatar_url":"https://github.com/pppp606.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ink-chart\n\nTerminal visualization components for [Ink](https://github.com/vadimdemedes/ink), React CLI framework\n\n## Preview\n\n\u003cimg src=\"./assets/demo-preview.svg\" alt=\"Demo Screenshot\" width=\"730\" /\u003e\n\n## Features\n\n- **BarChart** - Horizontal bar charts with individual row coloring and custom formatting\n- **StackedBarChart** - 100% stacked horizontal bar charts showing percentage distribution\n- **LineGraph** - High-resolution line graphs with multi-series support and axis labels\n- **Sparkline** - Compact trend visualization with threshold highlighting and gradient colors\n- **TypeScript** - Full TypeScript support with comprehensive type definitions\n- **Auto-width** - Responsive charts that adapt to terminal width\n- **Gradient Colors** - 8-level smooth color gradients with automatic terminal compatibility\n- **Performance** - Optimized rendering with React.memo to prevent flickering\n\n## Installation\n\n```bash\nnpm install @pppp606/ink-chart\n```\n\n## Quick Start\n\n```tsx\nimport React from 'react';\nimport { render, Text, Box } from 'ink';\nimport { BarChart, StackedBarChart, LineGraph, Sparkline } from '@pppp606/ink-chart';\n\nfunction App() {\n  return (\n    \u003cBox flexDirection=\"column\"\u003e\n      {/* Bar chart with values */}\n      \u003cBarChart\n        data={[\n          { label: 'Sales', value: 1250 },\n          { label: 'Marketing', value: 800 }\n        ]}\n        showValue=\"right\"\n        sort=\"desc\"\n      /\u003e\n\n      {/* Stacked bar chart showing distribution */}\n      \u003cStackedBarChart\n        data={[\n          { label: 'Complete', value: 75, color: '#4aaa1a' },\n          { label: 'Remaining', value: 25, color: '#d89612' }\n        ]}\n      /\u003e\n\n      {/* Line graph with multiple series */}\n      \u003cLineGraph\n        data={[\n          { values: [10, 15, 12, 18, 14, 20], color: 'red' },\n          { values: [8, 12, 16, 14, 18, 16], color: 'blue' }\n        ]}\n        height={5}\n        showYAxis={true}\n        xLabels={['Jan', 'Jun']}\n      /\u003e\n\n      {/* Simple sparkline */}\n      \u003cSparkline data={[1, 3, 2, 5, 4, 6, 3]} /\u003e\n    \u003c/Box\u003e\n  );\n}\n\nrender(\u003cApp /\u003e);\n```\n\n## Components\n\n### BarChart\n\nHorizontal bar charts with customizable appearance and individual row colors.\n\n```tsx\n\u003cBarChart\n  data={[\n    { label: 'Success', value: 22, color: '#4aaa1a' },\n    { label: 'Warnings', value: 8, color: '#d89612' },\n    { label: 'Errors', value: 15, color: '#a61d24' }\n  ]}\n  showValue=\"right\"\n  width={50}\n  format={(v) =\u003e `${v}%`}\n/\u003e\n```\n\nOutput:\n```\nSuccess  ████████████████████████████████████████████████████████████████████ 22%\nErrors   ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 15%\nWarnings ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 8%\n```\n\n**Props:**\n- `data: BarChartData[]` - Array of data points\n- `sort?: 'none' | 'asc' | 'desc'` - Sort order\n- `showValue?: 'right' | 'inside' | 'none'` - Value display position\n- `width?: 'auto' | 'full' | number` - Chart width (`'auto'`: natural content width, `'full'`: terminal width, `number`: fixed width)\n- `max?: 'auto' | number` - Maximum value for scaling\n- `format?: (value: number) =\u003e string` - Value formatter\n- `barChar?: '▆' | '█' | '▓' | '▒' | '░'` - Bar character\n- `color?: string` - Default color (overridden by individual `BarChartData.color`)\n\n**BarChartData interface:**\n```tsx\ninterface BarChartData {\n  label: string;\n  value: number;\n  color?: string; // Hex code or Ink color name\n}\n```\n\n### StackedBarChart\n\nStacked horizontal bar chart with two modes: 100% percentage distribution or absolute values.\n\n```tsx\n\u003cStackedBarChart\n  data={[\n    { label: 'Sales', value: 30, color: '#4aaa1a' },\n    { label: 'Warning', value: 20, color: '#d89612' },\n    { label: 'Error', value: 50, color: '#a61d24' }\n  ]}\n  width={50}\n/\u003e\n```\n\nOutput:\n```\nSales          Warning   Error\n███████████████▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒\n30.0%          20.0%     50.0%\n```\n\n**Props:**\n- `data: StackedBarSegment[]` - Array of segments to display\n- `mode?: 'percentage' | 'absolute'` - Display mode (default: `'percentage'`)\n  - `'percentage'`: 100% stacked showing percentage distribution\n  - `'absolute'`: Stacked bar showing actual values scaled to max\n- `max?: 'auto' | number` - Maximum value for scaling in absolute mode (default: `'auto'`)\n- `width?: 'auto' | 'full' | number` - Chart width (`'auto'`: 40 characters default, `'full'`: terminal width, `number`: fixed width)\n- `showLabels?: boolean` - Whether to show segment labels above bar (default: `true`)\n- `showValues?: boolean` - Whether to show values below bar (default: `true`)\n- `format?: (value: number, mode: StackedBarChartMode) =\u003e string` - Value formatter\n\n**StackedBarSegment interface:**\n```tsx\ninterface StackedBarSegment {\n  label: string;\n  value: number;\n  color?: string; // Hex code or Ink color name\n  char?: string;  // Custom character for this segment\n}\n```\n\n### LineGraph\n\nHigh-resolution line graph using Unicode scan line characters (⎺ ⎻ ─ ⎼ ⎽) for 5-level vertical resolution per row.\n\n```tsx\n\u003cLineGraph\n  data={[\n    { values: [100, 120, 115, 130, 125, 140], color: 'red' }\n  ]}\n  width={50}\n  height={6}\n  showYAxis={true}\n  xLabels={['Q1', 'Q4']}\n/\u003e\n```\n\nOutput:\n```\n   140│                    ⎽─⎺\n      │              ⎽─⎺⎻─⎻\n      │          ⎽⎼─⎺\n      │    ⎽─⎺⎻─⎻\n      │⎽⎼─⎺\n   100│⎺\n      └──────────────────────\n       Q1                  Q4\n```\n\n**Props:**\n- `data: LineGraphSeries[]` - Array of data series (each with `values` and optional `color`)\n- `width?: 'auto' | 'full' | number` - Chart width\n- `height?: number` - Chart height in rows (default: 10, each row = 5 vertical levels)\n- `yDomain?: 'auto' | [number, number]` - Y-axis range\n- `showYAxis?: boolean` - Show Y-axis labels (default: false)\n- `yLabels?: (string | number)[]` - Custom Y-axis labels (numbers: position-based, strings: evenly distributed)\n- `xLabels?: (string | number)[]` - X-axis labels (numbers: position-based, strings: evenly distributed)\n- `caption?: string` - Optional caption below chart\n\n**LineGraphSeries interface:**\n```tsx\ninterface LineGraphSeries {\n  values: number[];\n  color?: string; // Ink color name or hex\n}\n```\n\n### Sparkline\n\nCompact trend visualization perfect for displaying time series data.\n\n```tsx\n\u003cSparkline\n  data={[1, 3, 2, 8, 4]}\n  width={30}\n  threshold={5}\n  colorScheme=\"red\"\n  caption=\"Sales Trend\"\n/\u003e\n```\n\nOutput:\n```\n▂▄▃█▅\nSales Trend\n```\n\n**Props:**\n- `data: number[]` - Array of numeric values\n- `width?: 'auto' | 'full' | number` - Chart width (`'auto'`: data length, `'full'`: terminal width, `number`: fixed width)\n- `threshold?: number | number[]` - Threshold(s) for highlighting (single or gradient)\n- `colorScheme?: 'red' | 'blue' | 'green'` - Color scheme for gradient highlighting\n- `mode?: 'block' | 'braille'` - Rendering mode\n- `caption?: string` - Optional caption below chart\n\n## Advanced Features\n\n### Smooth Color Gradients\n\n8-level gradient highlighting with automatic terminal compatibility:\n\n```tsx\n\u003cSparkline \n  threshold={[10, 20, 30, 40, 50, 60, 70, 80]}\n  colorScheme=\"blue\" // red, blue, or green\n/\u003e\n```\n\n**Color Support:**\n- **24-bit terminals** (iTerm, VSCode): Full RGB gradients\n- **256-color terminals**: Palette-based gradients\n- **16-color terminals**: Basic color fallbacks\n\nDetection is automatic based on `COLORTERM`, `TERM`, and `TERM_PROGRAM` environment variables.\n\n### Performance Optimization\n\nComponents are optimized with `React.memo` to prevent unnecessary re-renders:\n\n```tsx\n// Only re-renders when values actually change\n\u003cBarChart data={dynamicData} /\u003e\n```\n\n### Full-width Support\n\nCharts can adapt to full terminal width:\n\n```tsx\n\u003cSparkline width=\"full\" /\u003e // Full terminal width\n\u003cBarChart width=\"full\" /\u003e  // Full terminal width\n```\n\n## Security\n\nThis package implements comprehensive security practices:\n\n- **Secure CI/CD**: SHA-pinned GitHub Actions with minimal permissions\n- **Supply Chain Protection**: Provenance attestation and OIDC authentication\n- **Secret Scanning**: Automated detection of accidentally committed secrets\n- **Dependency Security**: Regular security audits and automated vulnerability scanning\n- **Workflow Protection**: CODEOWNERS file and branch protection rules\n\nFor security policy, vulnerability reporting, and detailed security information, see [SECURITY.md](SECURITY.md).\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpppp606%2Fink-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpppp606%2Fink-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpppp606%2Fink-chart/lists"}