npm package: @mawarid/dashboard
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0. Compilation of most used Charts.
Latest version: 1.1.9

# mawarid-dashboard

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
Compilation of most used Charts.

## Code scaffolding

Run `ng generate component component-name --project mawarid-dashboard` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project mawarid-dashboard`.

> Note: Don't forget to add `--project mawarid-dashboard` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build mawarid-dashboard` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build mawarid-dashboard`, go to the dist folder `cd dist/dashboard` and run `npm publish`.

## Running unit tests

Run `ng test mawarid-dashboard` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

## Installation and Options

1.  Run `npm i @mawarid/dashboard` to install the library.
2.  Add `{ "glob": "**/*", "input": "node_modules/@mawarid/dashboard/assets", "output": "assets/" }` in `angular.json` in `"build" > "options" > "assets"` at your project.

### Male

1.  Optional parameter `value` , takes the actual value to be filled
2.  Optional parameter `zoom` , takes the scale value, Default: 10
    `<mawarid-dashboard-gender-male></mawarid-dashboard-gender-male>`
    Example:

```
  // in component template
  <mawarid-dashboard-gender-male [value]="50" [zoom]="10"></mawarid-dashboard-gender-male>
```

![Male](https://i.ibb.co/D5jv10w/male.png)

### Female

1.  Optional parameter `value` , takes the actual value to be filled
2.  Optional parameter `zoom` , takes the scale value, Default: 10
    `<mawarid-dashboard-gender-female></mawarid-dashboard-gender-female>`

Example:

```
  // in component template
  <mawarid-dashboard-gender-female [value]="50" [zoom]="10"></mawarid-dashboard-gender-female>
```

![Female](https://i.ibb.co/8dKWQ6r/female.png)

### Attendance

1.  Optional parameter `top` , takes the value to be filled for green on the top
2.  Optional parameter `middle` , takes the value to be filled for orange on the middle
3.  Optional parameter `bottom` , takes the value to be filled for brown on the bottom
4.  Optional parameter `zoom` , takes the scale value, Default: 10
    `<mawarid-dashboard-range-figure></mawarid-dashboard-range-figure>`

Example:

```
  // in component template
  <mawarid-dashboard-range-figure [top]="10" [middle]="10" [bottom]="30" [zoom]="20"></mawarid-dashboard-range-figure>
```

![Attendance](https://i.ibb.co/71BcDY7/attend.png)

### Speed Gauge ([highcharts-chart](https://www.npmjs.com/package/highcharts-angular))

1.  Required parameter `max` number value
2.  Required parameter `data` array of numbers
3.  Optional parameter `limitOne` number value
4.  Optional parameter `limitTwo` number value
5.  Optional parameter `colorOne` string value
6.  Optional parameter `colorTwo` string value
7.  Optional parameter `colorThree` string value
8.  Optional parameter `height` number value, default = 400

    `<mawarid-dashboard-speed-gauge></mawarid-dashboard-speed-gauge>`

Example:

```
  // in component template
  <mawarid-dashboard-speed-gauge [max]="100" [limitOne]="20" [limitTwo]="50" [data]="data"
    [colorOne]="red" [colorTwo]="cyan" [colorThree]="green" [height]="200"></mawarid-dashboard-speed-gauge>

    // in component class
  data = [20,80];
```

#### OR

1.  Required parameter `replace` to be true
2.  Required parameter `chartOptions` to be an object of the replced options
    `<mawarid-dashboard-speed-gauge [replace]="true" [chartOptions]="speedChartOptions"></mawarid-dashboard-speed-gauge>`

![Speed Gauge](https://i.ibb.co/6n3ZPtC/speed.png)

### Solid Guage Chart ([ng2-charts](https://valor-software.com/ng2-charts/))

1. Optional parameter `currentValue` number
2. Optional parameter `bgNBordersColors` array of colors
3. Optional parameter `labels` array of strings
4. Optional parameter `doughnutOptions` object of the remaining options
   `<mawarid-dashboard-solid-guage></mawarid-dashboard-solid-guage>`

Example:

```
  // in component template
  <mawarid-dashboard-solid-guage [currentValue]="currentValue" [bgNBordersColors]="bgNBordersColors" [labels]="labels" [doughnutOptions]="doughnutOptions"></mawarid-dashboard-solid-guage>

   // in component class
  currentValueIndicator = 20;
  bgNBordersColors = [
    {backgroundColor: ['red', 'black']},
    {borderColor: ['#AEEBF2', '#FEFFC9']}
  ];
  labels = ['empty', 'filled'];
  doughnutOptions = {
    cutoutPercentage: 10
  };
```

![Solid-guage](https://i.ibb.co/TPVqfmX/donut.png)

### Guage Chart ([d3.js](https://d3js.org/))

1. Required parameter `guageOptions` object of some options
   `guageOptions = { id: 'guage1', size: 210, clipWidth: 220, clipHeight: 170, ringWidth: 15, maxValue: 30, transitionMs: 5000, currentValue: 15, update: false }`
   `<mawarid-dashboard-guage-chart></mawarid-dashboard-guage-chart>`

   Example:

```
  // in component template
  <mawarid-dashboard-guage-chart [guageOptions]="guageOptions"></mawarid-dashboard-guage-chart>

  // in component class
  guageOptions = {
    id: 'guage1',
    size: 210,
    clipWidth: 220,
    clipHeight: 170,
    ringWidth: 15,
    maxValue: 30,
    transitionMs: 5000,
    currentValue: 15,
    update: false
  };

  // to refresh or update the chart with new currentValue
  this.guageOptions = {
      id: 'guage1',
      size: 210,
      clipWidth: 220,
      clipHeight: 170,
      ringWidth: 15,
      maxValue: 30,
      transitionMs: 5000,
      currentValue: 5,
      update: true
    };
```

![Guage](https://i.ibb.co/xsLKzr6/solid-guage.png)

### Area Chart ([highcharts-chart](https://www.npmjs.com/package/highcharts-angular))

1. Required parameter `chartOptions` object of type Highcharts.Options

   modify/replace the high chart default options required and at least have series attribute

2. Optional parameter `replace` boolean

   default false,
   if true the chartOptions will replace the high chart options,
   if false it will modify the high chart options

minimum requirement

```
chartOptions = {
  series: [
    type: 'area',
    data: [number, number][]`
  ]
}
```

Example

```
  // in component template
  <mawarid-dashboard-area-chart [chartOptions]="areaOptions"></mawarid-dashboard-area-chart>

  // in component class
  areaOptions = {
    series: [
      type: 'area',
      data: [[1, 1], [2, 2], [3, 3]]`
    ]
  }
```

![area chart](https://i.ibb.co/R9wrJ0N/area-chart.png)

### Bar Chart ([highcharts-chart](https://www.npmjs.com/package/highcharts-angular))

1. Required parameter `chartOptions` Highcharts.Options

   modify/replace the high chart default options required and at least have series attribute

2. Optional parameter `replace` boolean

   default false,
   if true the chartOptions will replace the high chart options,
   if false it will modify the high chart options

minimum requirement

```
chartOptions = {
  series: [
    type: 'bar',
    data: number[]`
  ]
}
```

Example

```
  // in component template
  <mawarid-dashboard-bar-chart [chartOptions]="barOptions"></mawarid-dashboard-bar-chart>
  // in component class
  barOptions: Highcharts.Options = {
      series: [
        {
          type: 'bar',
          data: [1, 2, 3]
        }
      ]
    };
```

![bar chart](https://i.ibb.co/zsz0RPc/bar-chart.png)

### Pie Chart ([ng2-charts](https://www.npmjs.com/package/ng2-charts))

1. Optional parameter `chartOptions` ChartOptions

   modify/replace the pie chart default options

2. Option parameter `replace` boolean

   if true the chartOptions will replace the pie chart options,
   if false it will modify the high chat options,
   default: false

3. Optional parameter `labels` Label[]

   the pie labels,
   default: 0, 1, 2, ... etc

4. Required parameter `data` SingleDataSet

   the pie data

5. Optional parameter `colors` Color[]

   the pie colors,
   default: random colors

minimum requirement

```
data = number[];
```

Example

```
  // in component template
  <mawarid-dashboard-pie-chart [data]="pieData"></mawarid-dashboard-pie-chart>

  // in component class
  pieData = [1, 2, 3];
```

![pie chart](https://i.ibb.co/qycXbc2/pie-chart.png)

### Radar Chart ([ng2-charts](https://www.npmjs.com/package/ng2-charts))

1. Required parameter `labels` Label[]

2. Required parameter `data` SingleDataSet

3. Optional parameter `colors` Color[]

Example

```
  // in component template
   <mawarid-dashboard-radar-chart [data]="radarChartData" [labels]="radarChartLabels" [colors]="RadarColors"></mawarid-dashboard-radar-chart>

  // in component class
  radarChartData = [
    { data: [65, 59, 90, 81, 56, 55, 40], label: "Series A" },
    { data: [28, 48, 40, 19, 96, 27, 100], label: "Series B" }
  ];
  radarChartLabels = [
    "Eating",
    "Drinking",
    "Sleeping",
    "Designing",
    "Coding",
    "Cycling",
    "Running"
  ];
  RadarColors = [
    {
      borderColor: "black",
      backgroundColor: "00ff37"
    }
  ];
```

![Radar chart](https://i.ibb.co/jzpgQjG/radar.png)