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 yourangular.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
- Run
npm i @mawarid/dashboard
to install the library. - Add
{ "glob": "**/*", "input": "node_modules/@mawarid/dashboard/assets", "output": "assets/" }
inangular.json
in"build" > "options" > "assets"
at your project.
Male
- Optional parameter
value
, takes the actual value to be filled - 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
- Optional parameter
value
, takes the actual value to be filled - 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
- Optional parameter
top
, takes the value to be filled for green on the top - Optional parameter
middle
, takes the value to be filled for orange on the middle - Optional parameter
bottom
, takes the value to be filled for brown on the bottom - 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>
highcharts-chart)
Speed Gauge (-
Required parameter
max
number value -
Required parameter
data
array of numbers -
Optional parameter
limitOne
number value -
Optional parameter
limitTwo
number value -
Optional parameter
colorOne
string value -
Optional parameter
colorTwo
string value -
Optional parameter
colorThree
string value -
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
- Required parameter
replace
to be true - Required parameter
chartOptions
to be an object of the replced options<mawarid-dashboard-speed-gauge [replace]="true" [chartOptions]="speedChartOptions"></mawarid-dashboard-speed-gauge>
ng2-charts)
Solid Guage Chart (- Optional parameter
currentValue
number - Optional parameter
bgNBordersColors
array of colors - Optional parameter
labels
array of strings - 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
};
d3.js)
Guage Chart (-
Required parameter
guageOptions
object of some optionsguageOptions = { 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
};
highcharts-chart)
Area Chart (-
Required parameter
chartOptions
object of type Highcharts.Optionsmodify/replace the high chart default options required and at least have series attribute
-
Optional parameter
replace
booleandefault 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]]`
]
}
highcharts-chart)
Bar Chart (-
Required parameter
chartOptions
Highcharts.Optionsmodify/replace the high chart default options required and at least have series attribute
-
Optional parameter
replace
booleandefault 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]
}
]
};
ng2-charts)
Pie Chart (-
Optional parameter
chartOptions
ChartOptionsmodify/replace the pie chart default options
-
Option parameter
replace
booleanif true the chartOptions will replace the pie chart options, if false it will modify the high chat options, default: false
-
Optional parameter
labels
Label[]the pie labels, default: 0, 1, 2, ... etc
-
Required parameter
data
SingleDataSetthe pie data
-
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];
ng2-charts)
Radar Chart (-
Required parameter
labels
Label[] -
Required parameter
data
SingleDataSet -
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"
}
];