Terminal Revenue Trends Chart

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

Installation

npm install terminal-revenue-trends-chart

Usage

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

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