@mawarid/dashboard v1.1.9

mawarid-dashboard

This library was generated with 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.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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>

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>

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>

Speed Gauge (highcharts-chart)

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>

Solid Guage Chart (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
  };

Guage Chart (d3.js)

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
    };

Area Chart (highcharts-chart)

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]]`
    ]
  }

Bar Chart (highcharts-chart)

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]
        }
      ]
    };

Pie Chart (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];

Radar Chart (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"
    }
  ];