@anssipiirainen/sc-charts v1.2.1

SC Charts

A financial charting library built with Lit web components for modern web applications.

Installation

npm install @anssipiirainen/sc-charts

Quick Start

import { initChart, createChartContainer } from '@anssipiirainen/sc-charts';

// Create and append chart container to DOM
const chartContainer = createChartContainer();
document.body.appendChild(chartContainer);

// Firebase configuration for data backend
const firebaseConfig = {
  projectId: "your-project-id",
  apiKey: "your-api-key",
  authDomain: "your-domain.firebaseapp.com",
};

// Initialize the chart
const chartApp = initChart(chartContainer, firebaseConfig);

Configuration Options

You can customize the initial chart state:

const initialState = {
  symbol: "ETH-USD",
  granularity: "FIVE_MINUTES",
  loading: false,
  indicators: []
};

const chartApp = initChart(chartContainer, firebaseConfig, initialState);

Available Exports

• initChart(container, firebaseConfig, initialState?) - Main initialization function
• createChartContainer() - Factory function to create chart container element
• ChartContainer - Chart container web component class
• ChartState - TypeScript type for chart state
• IndicatorConfig - TypeScript type for indicator configuration
• logger - Logging utility
• setProductionLogging() - Switch to production logging mode

Supported Features

• Real-time candlestick charts
• Multiple timeframes (1m, 5m, 15m, 30m, 1h, 4h, 1d)
• Technical indicators (RSI, MACD, Moving Averages, Bollinger Bands, etc.)
• Volume charts
• Interactive pan and zoom
• Touch/mobile support
• Customizable styling

React Integration

React Wrapper Component

Create a React wrapper component for the chart:

import React, { useEffect, useRef } from 'react';
import { initChart, createChartContainer, ChartState, ChartContainer, App } from '@anssipiirainen/sc-charts';

interface SCChartProps {
  firebaseConfig: any;
  initialState?: Partial<ChartState>;
  className?: string;
  style?: React.CSSProperties;
}

export const SCChart: React.FC<SCChartProps> = ({ 
  firebaseConfig, 
  initialState, 
  className, 
  style 
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<ChartContainer | null>(null);
  const appRef = useRef<App | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // Create and append chart container
    const chartContainer = createChartContainer();
    chartRef.current = chartContainer;
    containerRef.current.appendChild(chartContainer);

    // Initialize the chart
    const chartApp = initChart(chartContainer, firebaseConfig, initialState);
    appRef.current = chartApp;

    return () => {
      // Cleanup on unmount
      if (appRef.current) {
        appRef.current.cleanup();
      }
      if (chartRef.current && containerRef.current) {
        containerRef.current.removeChild(chartRef.current);
      }
    };
  }, [firebaseConfig, initialState]);

  return <div ref={containerRef} className={className} style={style} />;
};

Usage in React/Remix

import { SCChart } from './components/SCChart';

const firebaseConfig = {
  projectId: "your-project-id",
  apiKey: "your-api-key",
  authDomain: "your-domain.firebaseapp.com",
};

function TradingPage() {
  const initialState = {
    symbol: "BTC-USD",
    granularity: "ONE_HOUR",
  };

  return (
    <div className="trading-dashboard">
      <h1>Trading Dashboard</h1>
      <SCChart 
        firebaseConfig={firebaseConfig}
        initialState={initialState}
        style={{ width: '100%', height: '600px' }}
        className="trading-chart"
      />
    </div>
  );
}

Remix Route Example

// app/routes/trading.tsx
import type { LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { SCChart } from "~/components/SCChart";

export async function loader({ request }: LoaderFunctionArgs) {
  // Load any server-side data if needed
  return {
    firebaseConfig: {
      projectId: process.env.FIREBASE_PROJECT_ID,
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    }
  };
}

export default function TradingRoute() {
  const { firebaseConfig } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>Trading Charts</h1>
      <SCChart 
        firebaseConfig={firebaseConfig}
        initialState={{ symbol: "ETH-USD" }}
        style={{ width: '100%', height: '500px' }}
      />
    </div>
  );
}

TypeScript Support

This library is written in TypeScript and includes full type definitions.

import { initChart, ChartState, IndicatorConfig } from '@anssipiirainen/sc-charts';

const state: Partial<ChartState> = {
  symbol: "BTC-USD",
  granularity: "ONE_HOUR"
};

Browser Compatibility

• Modern browsers with ES2020+ support
• WebComponents support required
• Firebase 9+ compatible

License

MIT