Lit Web Components — Stock Chart Display

📊 stock-chart-display

The <stock-chart-display> component renders technical stock charts using a data array of candlestick and indicator values.

🔢 Input: stockData Prop

Pass an array of objects to the stockData prop. Each object should contain the following structure: Bull and Bear base on price vs ma200 with SL and TP

const dataArray = [
  {
    volume: 12394766,
    open: 7.73,
    close: 6.69,
    high: 7.73,
    low: 6.3,
    date: "2024-10-24T04:00:00.000Z",
    MA5: 9.9,
    MA10: 9.9,
    MA20: 9.9,
    MA50: 10.24,
    MA100: 11.54,
    MA200: 18.52,
    RSI: 24.150554856423767,
    MACDLine: -0.11134615384615287,
    SignalLine: -0.30238750431044953,
    MACDHistogram: 0.19104135046429666
  },
  // ... more data points
];

📦 Usage

<stock-chart-display stockData="dataArray"></stock-chart-display>

🔌 Integration Guide

✅ Angular Integration

1. Register the Web Component in angular.json:

In your angular.json, add the script under scripts:

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "styles": [],
      "scripts": [
        "./node_modules/lit-litelements/dist/main.js"
      ]
    }
  }
}

2. Enable Custom Elements in your Angular module:

In the module where you want to use the web component (e.g., app.module.ts), import CUSTOM_ELEMENTS_SCHEMA and add it to the schemas array:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    // your components
  ],
  imports: [
    // your modules
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

✅ HTML Integration (Vanilla)

Include the component script directly:

<script type="module" src="./node_modules/lit-litelements/dist/main.js"></script>

React/Next.js

After npm install, just import dynamically like this:

  useEffect(() => {
    import('stock-chart-display'); // loads dist/main.js automatically
  }, []);