Trade History Image Generator

A TypeScript library for generating trade history images using Sharp. This library creates visual representations of trading results for Buy/Sell Profit/Loss scenarios.

Features

• Generate images for 4 trade types:
  • Buy Profit
  • Buy Loss
  • Sell Profit
  • Sell Loss
• Twitter Optimized: Uses a black wrapper with 1200x628 (landscape, 1.91:1 ratio) dimensions for Twitter summary cards while preserving all text content
• Customizable text overlays with Mollen fonts
• PNG output format
• TypeScript support

Installation

npm install @traderflow/trade-history-image

Usage

Basic Usage

import { createTradeHistoryImage, TradeHistoryParams } from '@traderflow/trade-history-image';

const tradeParams: TradeHistoryParams = {
  type: 'buy-profit',
  symbol: 'NAS100',
  lots: 15,
  openPrice: 23880.4,
  closePrice: 23890.4,
  profit: 3000,
  openTime: new Date('2025-09-11T09:30:31'),
  closeTime: new Date('2025-09-11T09:33:32'),
  accountName: 'Demo Account',
  brokerName: 'AT Global Markets LLC'
};

const imageData = await createTradeHistoryImage(tradeParams);
// imageData contains: { name: string, data: Buffer, extension: string }

Multiple Trades

import { createMultipleTradeImages } from '@traderflow/trade-history-image';

const trades = [
  { type: 'buy-profit', symbol: 'NAS100', lots: 15, /* ... */ },
  { type: 'sell-loss', symbol: 'EURUSD', lots: 10, /* ... */ }
];

const imageDataArray = await createMultipleTradeImages(trades);

Trade Types

• buy-profit: Green-themed image for profitable buy trades
• buy-loss: Red-themed image for losing buy trades
• sell-profit: Green-themed image for profitable sell trades
• sell-loss: Red-themed image for losing sell trades

Assets Required

The library requires the following assets in the assets folder:

Templates (assets/templates/)

• buy_profit.png - Background for buy profit trades (1748x1913)
• sell_loss.png - Background for sell loss trades (1748x1913)
• example.png - Example template (1748x1913)

Note: Templates maintain their original aspect ratio (1080x1350) and are placed on a black background canvas sized to Twitter's preferred 1200x628 dimensions. This ensures all text remains visible while optimizing for social media sharing.

Fonts (assets/fonts/Mollen/)

• Mollen-Regular.ttf
• Mollen-Bold.ttf

Template Specifications

• Dimensions: 800x600 pixels (recommended)
• Format: PNG with transparency support
• Design: Should include visual elements that complement the trade type (colors, icons, etc.)

API Reference

Types

interface TradeHistoryParams {
  type: 'buy-profit' | 'buy-loss' | 'sell-profit' | 'sell-loss';
  symbol: string;
  lots: number;
  openPrice: number;
  closePrice: number;
  profit: number;
  openTime: Date;
  closeTime: Date;
  accountName?: string;
  brokerName?: string;
}

interface FileData {
  name: string;
  data: Buffer;
  extension: string;
}

Functions

• createTradeHistoryImage(params: TradeHistoryParams): Promise<FileData>
• createMultipleTradeImages(trades: TradeHistoryParams[]): Promise<FileData[]>
• formatDate(date: Date): string
• formatTime(date: Date): string
• formatDateTime(date: Date): string

Development

# Install dependencies
npm install

# Build
npm run build

# Test
npm test

# Clean
npm run clean