terminal-revenue-trends-chart/README.md

Bloomberg-style terminal revenue trends chart component

# Terminal Revenue Trends Chart

A Bloomberg-style terminal revenue trends chart component for React applications.

## Installation

```bash
npm install terminal-revenue-trends-chart
```

## Usage

```tsx
import React from 'react';
import RevenueTrendsChart, { DataPoint } from 'terminal-revenue-trends-chart';

const App = () => {
  const data: DataPoint[] = [
    { quarter: 'Q4 2021', revenue: 5.2, marketSize: 32.1 },
    { quarter: 'Q1 2022', revenue: 5.4, marketSize: 32.8 },
    { quarter: 'Q2 2022', revenue: 5.6, marketSize: 33.5 },
    { quarter: 'Q3 2022', revenue: 5.8, marketSize: 34.2 },
    { quarter: 'Q4 2022', revenue: 5.9, marketSize: 35.0 },
    { quarter: 'Q1 2023', revenue: 6.0, marketSize: 35.8 },
    { quarter: 'Q2 2023', revenue: 6.1, marketSize: 36.6 },
    { quarter: 'Q3 2023', revenue: 6.23, marketSize: 37.4 },
  ];

  return (
    <div>
      <RevenueTrendsChart 
        data={data}
        marketGrowthRate={5.2}
        height={300}
        title="REVENUE TRENDS (LAST 8 QUARTERS)"
        companyLabel="EL Revenue (€B)"
        marketLabel="Eyewear Market (€B)"
      />
    </div>
  );
};

export default App;
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `DataPoint[]` | Required | Array of quarterly data points |
| `height` | `number` | `300` | Chart height in pixels |
| `width` | `string` | `'100%'` | Chart container width |
| `title` | `string` | `'REVENUE TRENDS (LAST 8 QUARTERS)'` | Chart title |
| `companyLabel` | `string` | `'Company Revenue (€B)'` | Label for company revenue line |
| `marketLabel` | `string` | `'Market Size (€B)'` | Label for market size line |
| `backgroundColor` | `string` | `'#111'` | Background color |
| `borderColor` | `string` | `'#00FF00'` | Primary border and text color |
| `textColor` | `string` | `'#00FF00'` | Text color |
| `gridColor` | `string` | `'#333'` | Grid line color |
| `marketGrowthRate` | `number` | `undefined` | Market growth rate to display in header |

## DataPoint Interface

```typescript
interface DataPoint {
  quarter: string;      // Quarter label (e.g., 'Q3 2023')
  revenue: number;      // Company revenue in billions
  marketSize?: number;  // Optional market size in billions
}
```

## Features

- Terminal-style green-on-black color scheme
- Smooth line animations with fill areas
- Customizable colors and styling
- Market comparison line (optional)
- Responsive design
- TypeScript support
- Bloomberg terminal aesthetic

## License

MIT