stock-chart-display/readme.md

Lit Web Component to display stock charts

# 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

```ts
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

```html
<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`:

```json
"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:

```ts
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:

```html
<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
  }, []);
```