Blocks

Blocks kapseln Informations-Widget unter Verwendung der Bootstrap-card-Klasse. Dadurch lassen sich diese Blocks zu einem Dashboard zusammenfügen.

blocks = new Alvine.Package.UI.Dialog.Blocks();
blocks.addBlock(new Alvine.Package.UI.Dialog.GaugeBlock(24, 0, 100, 'Gauge Label', {
    gaugeOptions: {
    }
}));

Blocks

Ein Block-Control ist die Basis eines Block-Controls und dient als Container für Informationen.

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Elements	zufällige ID	myID
class	Klasse des Containers	undefined

GaugeBlock

Dieser Block kapselt das ChartGauge-Controll.

NumberBlock

Dieser Block stellt eine Zahl dar.

Info

Dieses Controll ist ein Info-Icon, das als Hilfe in einem Block angezeigt werden kann.

ChartGauge

Das ChartGauge-Controll kapselt die Funktion der gauge.js.

Über die Methode ChartGauge.setValue() kann der aktuelle Wert des Charts gesetzt werden.

Schlüssel	Beschreibung	Default	Beispiel
id	ID des Elements	zufällige ID	myID
class	Klasse des Containers	undefined
canvas-style		width:100%
style	Styleangaben im Container, Hauptsächlich für Breitenangabe	width:99%
width	Breite	undefined
format	Format	undefined
height	Höhe	undefined
options.angle	The span of the gauge arc	0.5
options.lineWidth	The line thickness	0.05
options.radiusScale	Relative radius	1
options.limitMax	If false, max value increases automatically if value > maxValue	false
options.limitMin	If true, the min value of the gauge will be fixed	false
options.colorStart	Colors	rgb(40, 167, 69)
options.colorStop	Colors	rgb(40, 167, 69)
options.strokeColor	stroke Color	#EEEEEE
options.generateGradient	generate Gradient	true
options.highDpiSupport	High resolution support	true
options.responsive		true
options.pointer.length	Relative to gauge radius	0.6
options.pointer.strokeWidth	The thickness	0.035
options.pointer.color	Fill color	#000000