@mawarid/dashboard
TypeScript icon, indicating that this package has built-in type declarations

1.1.9 • Public • Published

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>

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>

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>

Attendance

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>

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

Solid-guage

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

Guage

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

area chart

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

bar chart

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

pie chart

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

Radar chart

Readme

Keywords

none

Package Sidebar

Install

npm i @mawarid/dashboard

Weekly Downloads

6

Version

1.1.9

License

none

Unpacked Size

625 kB

Total Files

67

Last publish

Collaborators

  • mawarid