Framework

http://d3js.org soll für die Visualisierung verwendet werden.

Galerie: https://github.com/mbostock/d3/wiki/Gallery

Tutorials: https://github.com/mbostock/d3/wiki/Tutorials

Einstieg: http://bost.ocks.org/mike/bar/ (Beispiel: http://codepen.io/mbostock/pen/Jaemg)

 

Einbindung in den Nuclos Webclient (zu prüfen)
  1. NVD3
    https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives -> http://nvd3.org
    (Beispiel: http://fiddle.angularjs.de/#/9270086)
  2. Manuell
    http://bl.ocks.org/biovisualize/5372077 

Anforderungen

Typen(Englisch)
SäulendiagrammColumn Chart
Balkendiagramm

Bar Chart

LiniendiagrammLine Chart
Kombiniertes Säulen- / LiniendiagrammCombined Column / Line Chart
KuchendiagrammPie Chart
Streudiagramm (Fliegenschiss (Zwinkern))Scatter Chart
TachoSpeedometer

Verwendung

Die Verwendung von Diagrammen soll in verschiedenen Bereichen möglich sein.

1. In einem Business Objekt

Ein Diagramm kann in diesem Fall seine Daten nur von Unterformularen beziehen. Hierfür können auch Dynamische BOs verwendet werden, um z.b. zu Gruppieren und zu Summieren. Es wird eine neue Möglichkeit benötigt, solche BOs anzulegen und zu berechtigen, ohne das sie in einem Layout konfiguriert werden müssten. Ein Nuclet soll damit Vorlagen für Diagramme mitliefern, wobei ein User selbst entscheiden kann, welche er in welchem Format konfiguriert.

2. In einer Sideview / Listview

Ein Suchkriterium oder Suchfilter sollte die Basis eines Diagrammes sein. Unklar ist jedoch noch, wie man eine Gruppierung ermöglicht. Vielleicht über eine Erweiterung des QueryProviders. Eine Nutzung im BO (Punkt 1.) könnte dann auch ohne dynamische BOs auskommen. Allerdings muss der User schon wissen was er da macht. Als Alternative könnte man auch noch über Report-Datenquellen nachdenken, die einem BO zugewiesen werden können. Aktuell gibt es noch gar keine Reports im Webclient.

3. Im Dashboard (gibt es noch nicht)

Wäre eine Willkommensansicht mit Diagrammen im Webclient nicht schön?

 

Konfigurationsbeispiel

{
	"chartLabel": {"de": "Umsatzanalyse", "en": "sales analysis"},
	"primaryChart": {
		"chartType": "(Column|Bar|Line|Pie|Scatter|Speedometer)",
		"boMetaId": "com_buymore_Umsaetze",
		"categoryAttrId": "com_buymore_Umsaetze_umsatzjahr",
		"categoryLabel": {"de": "Jahr"},
		"scaleLabel": {"de": "TEuro"},
		"series": [
			{
				"boAttrId": "com_buymore_Umsaetze_umsatz",
				"label": {"de": "Umsatz"},
				"color": "#000000"
			}, 
			{
				"boAttrId": "com_buymore_Umsaetze_gewinn",
				"label": {"de": "Gewinn"},
				"color": "#222222"
			}
		],
 
		"searchTemplate": [
			{
				"label": "Jahr von",
				"boAttrId" : "com_buymore_Umsaetze_umsatzjahr",
				"comparisonOperator": ">=",
				"mandatory": true
			},
			{
				"label": "bis",
				"boAttrId" : "com_buymore_Umsaetze_umsatzjahr",
				"comparisonOperator": "<=",
				"mandatory": true
			},
			{
				"label": "Artikelkategorie",
				"boAttrId" : "com_buymore_Umsaetze_kategorie",
				"comparisonOperator": "=",
				"mandatory": true,
				"dropdown": true
			}
		]
	},
	"secondaryChart": {
		"chartType": "Line",
		"useCombinedScaleWithPrimary": false,
		"boMetaId": "com_buymore_Arbeitsleistung",
		"categoryAttrId": "com_buymore_Arbeitsleistung_jahr",
		"scaleLabel": {"de": "h"},
		"series": [
			{
				"boAttrId": "com_buymore_Arbeitsleistung_stunden",
				"color": "#777777"
			} 
		]
	}
}

 

 

Notizen

nur zur Auswahl stellen was Sinn macht




 

 

Arbeitspakete

PaketAufwand in TagenErledigt
Version 0.1
Demonstration fertiger Diagramme		  
Einbindung prüfen x

Neue JSON Struktur zur Ablage solch einer Diagrammkonfiguration.

Möglicherweise neues Konzept für "Preferences" aller Art.

 x
  • Strukturdefinition
 x
  • Nuclos Kern Erweiterung
 x
  • Rest Erweiterung
 x
Rendern der Diagramme im Webclient x
  • Integration Chartkomponente
2x
  • Diagrammauswahl über Tabs
3x
  • Integration Preferences-Service in Webclient (Lesen/Schreiben/Löschen)
1x
  • Typescript Buildprozess erweitern
0,5x
Version 0.2
Erste Lieferung (Interaktivität, Filterung)		  
Diagramm-Datenquellen sollen einem Benutzer ebenfalls als "Datenherkunft" angeboten werden. Hierfür muss in der Datenquelle das Attribut "Eltern-Businessobjekt" (NEU) gesetzt sein. Für BOs mit Statusmodell muss zusätzlich im Statusmodell eine Berechtigung vergeben werden, ähnlich den Unterformularen.0,5x
Filterung der Daten x
  • Server
 x
  • Client (nur Benutzung der im Diagramm konfigurierten Filtermöglichkeiten)
 x
    • Timestamp Problem muss noch behoben werden Wird umgangen: Timestamp wird in Chart als Kategorie zwar angezeigt, gefiltert wird aber über ein zusätzliches Date Attribut (hat vom Prinzip her den gleichen Inhalt). Wieder mal ein Workaround zum Thema Timestamp...
 x
Konfiguration der Diagramme  
  • Typ: 4-Quadranten-Diagramm
  
  • Typ: Kombiniertes Säulen- / Liniendiagramm
  
Preferences Sharing, Berechtigung und Nucletzuweisung (derzeit hat jeder Benutzer seine eigenen Prefs / Diagrammkonfigurationen) x
  • Analyse
 x
  • Server
 x

Klick / Touch auf einen Punkt, Balken etc. soll Details anzeigen.

Verwendung 1 (im BO):

1,5x
  • Normales SubBO: Wenn Layout und Berechtigung existiert.
 x
  • Dynamisches BO/ Chart DS: Allgemein gilt, prüfe wie normales SubBO, jedoch verwende die MetaId aus boMeta.detailBoMetaId (NEU in den Metadaten) wenn vorhanden. Letzteres wird in der Datenquelle konfiguriert.
 x
Version 1.0  

Konfiguration der Diagramme

  
  • Farbauswahl
  
  • Diagrammtyp-Auswahl
  
  • weitere komplexe Diagramm-Typen (Tacho, Kombiniertes Säulen- / Liniendiagramm)
  
  • Datenherkunft und Filtermöglichkeiten
  
  • weiter Konfiguration (Breite, Höhe, Beschriftung, ...) ?
  
Preferences Sharing - Teil II  
  • Client
  

Version 2.0

  
Verwendung 2. u. 3.  
  • Interaktivität
  
  • Spätestens jetzt benötigen wir eine Gruppierungsfunktion auf eine BOs Liste. Dies wird dann auch für Verwendung 1 interessant, da nicht unbedingt dynamische BOs gebaut werden müssen.