Aaryan041124/Heat_Map_Client

Stock Heat Map Client

Angular 18 frontend for uploading stock constituent files and visualizing a market heat map using GraphQL + D3 treemap rendering.

Tech Stack

• —Angular 18 (standalone components)
• —TypeScript (strict mode)
• —SCSS
• —Apollo Angular (apollo-angular + @apollo/client)
• —GraphQL
• —D3 (d3)

Prerequisites

• —Node.js (LTS recommended)
• —npm
• —Backend GraphQL API available at http://localhost:8080/graphql

The GraphQL endpoint is read from window.__APP_CONFIG__.graphqlUrl (file: src/assets/runtime-config.js).

Getting Started

1. 1.Install dependencies:

   npm install

1. 1.Start the development server:

   npm start

1. 1.Open the app:
2. 2.http://localhost:4200

Available Scripts

• —npm start - starts Angular dev server (ng serve)
• —npm run build - production build (ng build)
• —npm test - test runner (ng test)

How the App Works

1. 1.User uploads an Excel file (.xlsx) in the upload component.
2. 2.File is read in browser and converted to base64.
3. 3.Client calls GraphQL mutation importWorkbook(fileName, fileBase64).
4. 4.On success, returned batchId is emitted to root component.
5. 5.Root component calls GraphQL query heatMap(batchId) to fetch a snapshot.
6. 6.Heatmap component renders sectors/stocks with D3 treemap:
7. 7.tile area is based on weightedValue
8. 8.color intensity is based on changePercent

Project Structure

src/
  app/
    components/
      heatmap/
      upload/
    models/
      heat-map.models.ts
    services/
      heat-map.service.ts
    app.component.ts
    app.component.html
  assets/
    sample-stocks-template.csv
  main.ts
  styles.scss

GraphQL Operations Used

Defined in src/app/services/heat-map.service.ts.

Mutation: ImportWorkbook

Input:

• —fileName: String!
• —fileBase64: String!

Response:

• —batchId
• —importedRows
• —invalidRows
• —message

Query: GetHeatMap

Input:

• —batchId: String (optional)

Response:

• —batchId
• —asOf
• —marketChangePercent
• —sectors[] with nested stocks[]

Notes and Known Limitations

• —No route configuration yet (provideRouter([])), currently single-view.
• —Heatmap component skips render if snapshot is null/empty (no explicit empty-state UI).
• —GraphQL URL can be set at runtime with env var GRAPHQL_URL when running the Docker image.

Troubleshooting

• —If npm or node command is not found, install Node.js and ensure it is on your shell PATH.
• —If upload/query fails, verify backend is running and src/assets/runtime-config.js (or GRAPHQL_URL) points to the correct /graphql URL.

Hugging Face Deployment (Docker Space)

This repo now includes a Dockerfile for Hugging Face Spaces.

Required Space Settings

• —SDK: Docker
• —PORT: container listens on 7860 (already configured)
• —Variables:
• —GRAPHQL_URL=https://<your-server-space>.hf.space/graphql

Deploy

1. 1.Create a new Hugging Face Space for the client with SDK = Docker.
2. 2.Push this repository contents to that Space.
3. 3.Set GRAPHQL_URL in Space Settings -> Variables.
4. 4.Restart the Space.