npm package: @officefield/tv-market-pulse
Description: A Vue 3 widget that displays **trending market indexes** with an interactive area chart. Built for [Traderverse](https://traderverse.io), it fetches data from configurable APIs and supports multiple symbols and time ranges.
Latest version: 1.2.0

# TV Market Pulse

A Vue 3 widget that displays **trending market indexes** with an interactive area chart. Built for [Traderverse](https://traderverse.io), it fetches data from configurable APIs and supports multiple symbols and time ranges.

## Features

- **Trending indexes** – Fetches and displays a list of trending symbols (e.g. SPY, QQQ) from your API
- **Symbol tabs** – Custom horizontal slider (prev/next) to select one or more symbols; chart updates when selection changes
- **Area chart** – ApexCharts-based area chart with gradient fill, dark theme, and percentage-based Y-axis
- **Time ranges** – 1 Day, 5 Days, 1 Month, 6 Months, 1 Year (interval sent to chart API)
- **Loading & error states** – Spinner, error message, and empty state when no data

## Tech stack

- **Vue 3** (Composition API, `<script setup>`)
- **Vite** (dev server + library build)
- **ApexCharts** (vue3-apexcharts) for the area chart
- **Axios** for API requests
- **Sass** for styles
- **@splidejs/vue-splide** (Sass theme imported in widget; demo app registers it globally)

## Installation

```bash
npm install @officefield/tv-market-pulse
```

**Peer dependencies** (install in your app if not already present):

- `vue` ^3.2.41
- `@vitejs/plugin-vue` ^3.2.0 (for Vite projects)
- `sass-embedded` ^1.80.2 (or `sass`)

## Usage

### As a library (in your Vue app)

1. Import the component and styles, then use `<MarketPulse>`:

```vue
<script setup>
import MarketPulse from '@officefield/tv-market-pulse';
import '@officefield/tv-market-pulse/style';
</script>

<template>
  <MarketPulse
    :trendingIndexURL="trendingIndexURL"
    :chartURL="chartURL"
  />
</template>
```

2. Optional: pass your own API base URLs (defaults point to Traderverse):

```js
const trendingIndexURL = 'https://facts.traderverse.io/api/v1/discover/trending_indexes';
const chartURL = 'https://facts.traderverse.io/api/v1/discover/chart';
```

3. If the chart does not render, register the ApexCharts component in your app:  
   `app.component('apexchart', VueApexCharts)` (import `VueApexCharts` from `vue3-apexcharts`).

### Props

| Prop               | Type   | Required | Default                                                                 | Description                          |
|--------------------|--------|----------|-------------------------------------------------------------------------|--------------------------------------|
| `title`            | String | Yes      | —                                                                       | Title for the widget.                 |
| `token`            | String | No       | —                                                                       | Optional auth token for API calls.   |
| `trendingIndexURL` | String | No       | `https://facts.traderverse.io/api/v1/discover/trending_indexes`         | URL for trending indexes list.       |
| `chartURL`         | String | No       | `https://facts.traderverse.io/api/v1/discover/chart`                    | URL for chart time-series data.      |

**API expectations:**

- **Trending indexes**: GET request; response is expected to have `data.data.records`, each record with at least `ticker` (array of ticker symbols, e.g. `["SPY"]`).
- **Chart**: GET request with query params `index` (symbol or array of symbols) and `interval` (`1d`, `5d`, `1m`, `6m`, `1y`). Response is expected to have `data.data` as an object keyed by symbol, each value an array of `[timestamp, value]` pairs.

## Development

```bash
# Install dependencies
npm install

# Dev server (demo app in src/App.vue)
npm run dev

# Library build (output in dist/)
npm run build

# Preview production build
npm run preview
```

The demo app uses `src/main.js` (registers VueApexCharts and VueSplide globally) and `src/App.vue`, which passes the default Traderverse URLs and a `title` prop. Change the URLs in `App.vue` to point at your own APIs.

## Project structure

- `src/components/MarketPulse.vue` – Main widget (symbol slider + area chart)
- `src/components/SelectBox.vue` – Reusable select component (used internally)
- `src/components/index.js` – Library entry (exports `MarketPulse` only)
- `src/App.vue` – Demo app root component
- `src/main.js` – Demo app entry (registers VueApexCharts, VueSplide, mounts App)
- `index.html` – Demo app HTML entry
- `vite.config.js` – Vite config with library build (entry: `src/components/index.js`)

## License

See repository license file.