File
projects/congarevenuecloud/elements/src/lib/chart/chart.component.ts
Description
Chart component displays the data as a chart based on the configuration passed in to this component.
Preview
Bar Chart
Doughnut Chart
Usage
Example :import { ChartModule } from '@congarevenuecloud/elements';
@NgModule({
imports: [ChartModule, ...]
})
export class AppModule {}// Basic Usage.
```typescript
<apt-chart
[data]="chartData"
[type]="chartType"
></apt-chart>// Chart with override settings.
```typescript
<apt-chart
[data]="chartData"
[type]="chartType"
[chartTitle]="myTitle"
[colorPalette]="colors"
[showLegend]="flag"
[legendPosition]="'top'"
[currencyConversionCode]="'USD'"
></apt-chart>
Implements
OnChanges
OnInit
OnDestroy
Metadata
| selector | apt-chart |
| styleUrls | ./chart.component.scss |
| templateUrl | ./chart.component.html |
Index
Inputs |
Constructor
constructor(conversionService: ConversionService, currencyPipe: CurrencyPipe, userService: UserService, configService: ConfigurationService)
|
|||||||||||||||
|
Parameters :
|
Inputs
| amountsByStatus |
Type : Object
|
|
Object used to display the total dollar amount within the tooltip for bar charts. |
| centerText |
Type : any
|
|
Value to be displayed in the center of chart. |
| chartTitle |
Type : string
|
|
Title to be displayed for the chart. |
| colorPalette |
Type : Array<string>
|
|
List of colors to be used on the chart. |
| currencyConversionCode |
Type : string
|
|
A string value representing ISO 4217 currency code to convert the currency values to. |
| data |
Type : Object
|
|
Dataset to be displayed on the chart. |
| labelDataTransform |
Type : string
|
|
String to specify what the data on chart label needs to be transformed to. Can take values like 'currency' etc. |
| legendPosition |
Type : "top" | "bottom" | "left" | "right"
|
Default value : 'top'
|
|
Position of legend on the chart. |
| showLegend |
Type : boolean
|
Default value : true
|
|
Flag to show/hide legend on the chart. |
| type |
Type : string
|
|
Type of the chart to be rendered. |
<div id="myChart" style="position: relative;">
<canvas #chart id="chart"></canvas>
<div #customTooltip id="chartjs-tooltip" [class]="customTooltipClass + ' bg-white border p-3'" style="position: absolute; opacity: 0; pointer-events: initial; min-width: 200px; transition: opacity .25s ease;" (mouseenter)="handleMouseEnter()" (mouseleave)="handleMouseLeave()">
<div class="carrot"></div>
<h5>{{tooltipTitle}}</h5>
<hr>
<div class="d-flex flex-column">
<span>{{'COMMON.QUANTITY' | translate}}: <strong>{{tooltipAmount}}</strong></span>
<span *ngIf="amountsByStatus"> {{'COMMON.AMOUNT' | translate}}: <strong>{{tooltipTotal | convertCurrency: currencyConversionCode | async}}</strong></span>
</div>
</div>
</div>
./chart.component.scss