https://github.com/lucasnbsb/ngx-shot-chart

An Angular component to create basketball shot charts in real time
https://github.com/lucasnbsb/ngx-shot-chart

angular basketball d3

Last synced: about 1 month ago
JSON representation

An Angular component to create basketball shot charts in real time

• Host: GitHub
• URL: https://github.com/lucasnbsb/ngx-shot-chart
• Owner: lucasnbsb
• Created: 2024-06-04T01:29:00.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-06-09T19:40:39.000Z (7 months ago)
• Last Synced: 2024-10-26T18:44:25.292Z (about 2 months ago)
• Topics: angular, basketball, d3
• Language: TypeScript
• Homepage: https://lucasnbsb.github.io/ngx-shot-chart/
• Size: 907 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxShotChart 🏀

A simple way to create shotcharts in real time with Angular and d3.js.

[Try it out in the demo app!](https://lucasnbsb.github.io/ngx-shot-chart/)

## Installation

```

npm install ngx-shot-chart d3 @types/d3

```

## Basic functionality

This lib exposes a `NgxShotChartComponent` that renders a shot chart and a `NgxShotChartService` with primitives to manipulate symbols in the chart.

## The component

- Only emmits the mutually esclusive  `ChartClicked` and `SymbolClicked` events 

- Symbols can be any [d3.symbolType](https://d3js.org/d3-shape/symbol#symbolsFill)

- Court and symbols default fill collor is the current text color

- ⛹️ Pre-configured with NBA, FIBA and NCAA court sizes

### Usage: 

```typescript

```

## The service

Exposes a crud interface for shots, methods to draw and clear the court and symbols, and utilities.

### Usage:

```typescript

import { ShotChartService } from 'ngx-shot-chart';

constructor(private shotChartService: ShotChartService) {}

// Add a shot to the chart whenever it is clicked 🪣

handleChartClick(event: ChartClickedEvent) {

  this.chart.AddShot(event, d3.symbolCircle);

}

// Remove a shot from the chart whenever the symbol is clicked 🗑️

handleSymbolClick(event: SymbolClickEvent) {

  this.chart.RemoveShot(event.id);

}

```