Diagramme

Implementieren

Füge das ServerHostingGraphTrait zu Deiner Page- und Action-Klasse hinzu:

Page-Handler

Welche Backups möchtest Du laden? Dieses Shortcut-Trait ermöglicht mehrere, getrennte Diagrammseiten. Bitte gib daher alle Deine Diagramme im Page-Handler an.

Deine Diagrammseiten sollten das Präfix graphs haben, damit das Shortcut-Trait sie erkennen kann. Wenn Dein Modul nur mehrere separate Diagrammseiten hat, gib bitte den technischen Namen der Seite nach graphs- an

public function getAvailablePages() {
   return [
       "graphs" => new ProductPageItem(
             "Usage stats",
             "chart-simple"
       ),

       "graphs-power" => new ProductPageItem(
             "Power",
             "plug"
       ),
       "graphs-network" => new ProductPageItem(
             "Network",
             "network-wired"
       ),
   ];
}

Die folgende Funktion im Page-Handler gibt die Daten der Diagramm-Zeitreihe zurück. Die Funktion gibt eine ServerHostingGraphResponse() zurück, die ... enthält

• Array von graphItems

• (optional) Array verfügbarer Zeitreihen

Die graphItems sind ein Array von ServerHostingGraphItem(), die ... enthalten

1. Titel des Diagramms

2. Array von Datenreihen (mehr dazu unten)

3. Array von Datenlabels

4. (optional) Daten-Suffix

Dies ist ein Beispiel aus Virtualizor, das mehrere Diagramme erstellt:

public function _getGraphs(ProductHosting $productHosting, string $page, Request $request, string $graphName) {
	// Get historical data from Integration, in this case Virtualizor
	$monitorStats = $productHosting->module->getHostingHandler($productHosting->sales_channel_id)->getEnduserClient()->monitor($productHosting->custom_fields['vpsId']);

	$labels = []; // <-- Array for labels
	$ramSeries = []; // <-- Array for each graph to temp store data
	$cpuSeries = [];
	$diskSeries = [];
	$networkSeries = [];

	// Iterate all the data from virtualizor
	foreach ($monitorStats['monthly_data'] as $item) {
		$labels[] = Carbon::parse((int)$item[1]); // <-- Add the date to the labels

		// Then add each data to the series
		$ramSeries[] = (float)$item[5];
		$cpuSeries[] = (float)$item[6];
		$diskSeries[] = (float)$item[3];
		$networkSeries['in'][] = (float)$item[7];
		$networkSeries['out'][] = (float)$item[8];
	}


	// Create a GraphItem for each graph and pass the series, labels and suffix
	return new ServerHostingGraphResponse(
		[
			new ServerHostingGraphItem(
				"RAM usage",
				$ramSeries,
				$labels,
				"GB RAM",
			),
			new ServerHostingGraphItem(
				"CPU usage",
				$cpuSeries,
				$labels,
				"%",
			),
			new ServerHostingGraphItem(
				"Disk usage",
				$diskSeries,
				$labels,
				"MB",
			),
			new ServerHostingGraphItem(
				"Network usage",
				$networkSeries,
				$labels,
				"B/s"
			),
		],

		// This are the available series, if any
		[
			"MONTH" => "Monat",
			"WEEK" => "Woche",
			"DAY" => "Tag",
		]
	);
}

Was sind Reihen?

Eine sogenannte Reihe sind die eigentlichen Daten, die im Diagramm angezeigt werden sollen. Ein Diagramm kann entweder eine oder mehrere Reihen haben, abhängig davon, wie viele Ebenen das Diagramm haben soll.

Das Diagramm oben hat nur eine Reihe, das unten hat zwei Reihen. Schau Dir das an:

Wenn Du eine Reihe hast, kann die series-Eigenschaft des GraphItem ein eindimensionales Array sein. Wenn Du mehrere Reihen hast, erstelle ein mehrdimensionales Diagramm. Der Schlüssel des Multi-Arrays wird als Reihen-Label angezeigt.

Reihen optimieren

Mach Dir keine Sorgen darum, den Durchschnitt der Reihen zu berechnen, um die Menge zu optimieren. Hostware erledigt das bereits für Dich! Einige Integrationen würden Tausende von Datenpunkten zurückgeben, was für die Anzeige im Browser zu viel wäre. Hostware iteriert automatisch durch jeden Datenpunkt und berechnet den Durchschnitt, um die Gesamtgröße auf etwa 200 Datenpunkte pro Diagramm zu reduzieren. Kein Grund zur Sorge, gib einfach alle Datenpunkte zurück, die die Integration liefert!