# Angular D3 Chart Components Module

This library was generated with [Nx](https://nx.dev).

## Description

The Angular chart components based on the [D3.js](https://d3js.org/) library.

Supported chart types:

* bar chart;
* line chart;
* pie chart;
* radar chart;
* force-directed chart;

The library contains Angular components as well as basic utility functions that can be used to implement the chart types mentioned above in TypeScript.

## Development commands reference

Run `nx test client-d3-charts` to execute the unit tests.

Run `nx lint client-d3-charts` to lint the library.

Run `nx build client-d3-charts` to build the library.

## Usage

### Within the development workspace

Import the charts module

```typescript
import { AppClientD3ChartsModule } from '@app/client-d3-charts';
```

### As an external package

Install the package

```bash
yarn add @rfprodz/client-d3-charts d3 @types/d3
```

Import the charts module

```typescript
import { AppClientD3ChartsModule } from '@rfprodz/client-d3-charts';
```

### Use the chart components

#### in templates

```html
<!-- bar chart -->
<app-bar-chart></app-bar-chart>
<!-- line chart -->
<app-line-chart></app-line-chart>
<!-- pie chart -->
<app-pie-chart></app-pie-chart>
<!-- radar chart -->
<app-radar-chart></app-radar-chart>
<!-- force-directed chart -->
<app-force-directed-chart></app-force-directed-chart>
```

#### in classes

```typescript
import {
  AppPieChartComponent,
  AppRadarChartComponent,
  AppForceDirectedChartComponent,
  AppBarChartComponent,
  AppLineChartComponent,
} from '@rfprodz/client-d3-charts';
```

### Chart examples

See the chart eamples components

```typescript
import { AppChartExamplesComponent } from '@rfprodz/client-d3-charts';
```

or the [source code](https://github.com/rfprod/nx-ng-starter/blob/main/libs/client-d3-charts/src/lib/components/chart-examples/chart-examples.component.ts) of the chart examples component


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rfprod.gitbook.io/nx-ng-starter/libs/client-d3-charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.