TV Market Pulse

A Vue 3 widget that displays trending market indexes with an interactive area chart. Built for Traderverse, 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

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

<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):

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

# 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.