Substitutionen in einem D3 Visualization-Dashboard

Ein Dashboard erhält aus der JSON-Konfigurationsdatei Anweisungen darüber, welche Steuerelemente wo angezeigt werden sollen, usw. Die Datei besteht aus einer Reihe von Eigenschaften und Werten, die die Informationen bereitstellen. Abhängig von der Komplexität des Dashboards können die Eigenschaften-Werte-Listen relativ lang werden. Um die Länge einer JSON-Konfigurationsdatei zu minimieren, einen gemeinsamen Stil auf mehrere Widgets anzuwenden oder das Duplizieren sich wiederholender Daten zu vermeiden, können für die Eigenschaft-Wert-Paare Substitutionen erstellt und die Parameter für die Substitutionen über die URL an die Konfigurationsdatei übergeben werden.

Eine Substitution wird definiert, indem ein Parameterschlüssel erstellt und ihm ein Wert zugewiesen wird. Das kann eine Zeichenkette, eine Zahl, ein boolescher Wert oder ein JSON-Objekt sein. Der Parameterschlüssel kann für jede Eigenschaft in der Konfigurationsdatei festgelegt werden.

Syntax für Ersetzung

Die Syntax zum Erstellen einer Substitution in der Konfigurationsdatei lautet: $[ParameterKey]$.

Beispiel:

Nachdem die Schlüsselwerte für eine Konfigurationsdatei manuell erstellt wurden, werden sie in der URL gespeichert. Zur Laufzeit liest das Dashboard die JSON-Konfigurationsdatei und erstellt eine Liste aller Schlüssel, die aufgelöst werden müssen. Sobald der Parameterschlüssel in der URL gefunden und dessen Wert aufgelöst ist, wird der Eigenschaftswert in der JSON-Datei an allen Stellen ersetzt, an denen der Schlüssel verwendet wird. Wenn die angegebene JSON-Konfigurationsdatei nicht im Ordner Dashboard gefunden wird, werden die Werte aus der Datei defaultconfig.json als Standard verwendet.

Sie können einen Texteditor zum Erstellen und Speichern der Schlüssel-Wert-Substitutionen verwenden. Sie können die Paare dann kopieren und in die URL einfügen.

Substitutionsregeln und Standards

JSON-Objektbeispiel

Ein JSON-Objekt ist eine Gruppe von Eigenschaften in geschweiften Klammern. Im folgenden Beispiel wird ein JSON-Objekt ersetzt.

Beispiel

Im Abschnitt DashboardLayout ist LoggingConfig wie folgt konfiguriert:

"DashboardLayout":{

"Rows": 6,

"Columns": 3,

"LoggingConfig":

{

"LoggerName": "AFWLogger",

"TurnOnInfoTrace": true,

"TurnOnErrorTrace": true,

"TurnOnWarningTrace": true

},

"Margins":

 

Im folgenden Abschnitt wurde der Abschnitt LoggingConfig wie folgt ersetzt:

"DashboardLayout":{

"Rows": 6,

"Columns": 3,

""LoggingConfig":“$LoggerObjectKey$”

"Margins":

 

In der URL wird der Parameterwert für den Schlüssel $LoggerObjectKeys$ wie folgt festgelegt:

LoggerObjectKey = {

"LoggerName": "AFWLogger",

"TurnOnInfoTrace": true,

"TurnOnErrorTrace": true,

"TurnOnWarningTrace": true

}

Komplette JSON-Substitution

Eine JSON-Konfigurationsdatei kann als Wert-Substitution verwendet werden. In diesem Fall wird die Konfigurationsdatei als URL-Parameter bereitgestellt, die Erweiterung JSON wird gelöscht.

Normalerweise erhält ein Dashboard seine visuellen Anweisungen aus der JSON-Konfigurationsdatei, die auch wie folgt in der URL angegeben werden kann:

http://AAEINPU746563W.xyz.Delta.net/EnergyBldg1Floor2DashboardApp1/#/dashboard?configfile=dashboardconfig.json&pName=GMS_AP2_Enhanced_LAO_1

Um die JSON-Konfigurationsdatei als Werte-Substitution zu verwenden:

Beispiel für Boolesche, Zeichenfolgen- und Ganzzahl-Werte

"DashboardLayout":{

"Rows": 2,

"Columns": 2,

"Logging":

{

"LoggerName": "$stringValue$",

"TurnOnInfoTrace": "$boolValue_True$",

"TurnOnErrorTrace": "$boolValue_True$",

"TurnOnWarningTrace": "$boolValue_False$"

},

"Margins":

{

"Top": "$NumericValue$",

"Right":"$NumericValue$",

"Bottom":"$NumericValue$",

"Left":"$NumericValue$"

}

}

Hinweise:

Wobei Werte replizierende Parameter in URL wie folgt aussehen sein:

$stringValue$ = "AWFLogger"

$boolValue_True$ = true

$boolValue_False$ = false

$NumericValue$ = 2

Array-Beispiel

{

"DashboardLayout":{

"Rows": 2,

"Columns": 2,

"Logging":

{

"LoggerName": "AFWLogger",

"TurnOnInfoTrace": true,

"TurnOnErrorTrace": true,

"TurnOnWarningTrace": true

},

"Margins":

{

"Top": 2,

"Right":2,

"Bottom":2,

"Left":2

}

},

"widgets": “$widgetsCollection$",

"baseURI":"http://localhost:8080"

}

==========================================================

Der Wert von $widgetsCollection$ in URL wie folgt erwartet wird

Widgets

Collection = "[

{

"Name":"My Chart 1",

"ChartType":"PieChart",

"layout": {

"startRow": 1,

"startColumn":1,

"rowspan":1,

"columnSpan":1

},

"dataProvider":{

"name":"ProviderNamer",

"privateConfig":

{

"counterType" : "UnprocessedCount"

}

},

"style":{

 

}

},

{

"Name":"My Chart 1",

"ChartType":"PieChart",

"layout": {

"startRow": 1,

"startColumn":2,

"rowspan":1,