nilzbu/mytimetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade clean code ChartJsComponent

Browse Source
This commit is contained in:
Nils Burghardt
2025-07-13 18:35:03 +02:00
parent e828e83991
commit 44672876be
1 changed files with 38 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/main/java/de/nilzbu/mytimetracker/ui/component/ChartJsComponent.java
View File

@@ -1,11 +1,10 @@
package de.nilzbu.mytimetracker.ui.component; package de.nilzbu.mytimetracker.ui.component;
import com.vaadin.flow.component.HasSize; import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.html.Div; import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule; import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage; import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.Tag; import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.AttachEvent;
import elemental.json.Json; import elemental.json.Json;
import elemental.json.JsonArray; import elemental.json.JsonArray;
import elemental.json.JsonObject; import elemental.json.JsonObject;
@@ -31,10 +30,14 @@ public class ChartJsComponent extends Div {
@Override @Override
protected void onAttach(AttachEvent attachEvent) { protected void onAttach(AttachEvent attachEvent) {
renderChart();
}
private void renderChart() {
getElement().executeJs( getElement().executeJs(
""" """
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
this.appendChild(canvas); appendChild(canvas);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: $0, type: $0,
@@ -54,47 +57,55 @@ public class ChartJsComponent extends Div {
} }
}); });
""", """,
getChartTypeFromData(chartData), detectChartType(chartData),
chartData, chartData,
chartTitle chartTitle
); );
} }
private String getChartTypeFromData(JsonObject data) { /**
// Default zu bar wenn keine sinnvolle Bestimmung möglich ist * Detects chart type based on chart data.
* If no definitive type can be determined, defaults to "bar".
*/
private String detectChartType(JsonObject data) {
try { try {
JsonArray datasets = data.getArray("datasets"); JsonArray datasets = data.getArray("datasets");
if (datasets.length() > 0) { if (datasets.length() > 0) {
JsonObject first = datasets.getObject(0); JsonObject firstDataset = datasets.getObject(0);
if (first.hasKey("fill") && !first.getBoolean("fill")) { if (firstDataset.hasKey("fill") && !firstDataset.getBoolean("fill")) {
return "line"; return "line";
} }
} }
} catch (Exception ignored) {} } catch (Exception ignored) {
}
return "bar"; return "bar";
} }
// Balkendiagramm für Kategorien /**
* Creates JSON chart data for a bar chart based on category counts.
*/
public static JsonObject generateBarChartData(Map<String, Long> categoryCounts) { public static JsonObject generateBarChartData(Map<String, Long> categoryCounts) {
JsonObject data = Json.createObject(); JsonObject data = Json.createObject();
JsonArray labels = Json.createArray(); JsonArray labels = Json.createArray();
JsonArray values = Json.createArray(); JsonArray values = Json.createArray();
JsonArray backgroundColors = Json.createArray(); JsonArray colors = Json.createArray();
String[] defaultColors = {"#1e7e34", "#138496", "#ffc107", "#dc3545", "#6f42c1", "#20c997"}; String[] defaultColors = {
"#1e7e34", "#138496", "#ffc107", "#dc3545", "#6f42c1", "#20c997"
};
int i = 0; int index = 0;
for (Map.Entry<String, Long> entry : categoryCounts.entrySet()) { for (Map.Entry<String, Long> entry : categoryCounts.entrySet()) {
labels.set(i, Json.create(entry.getKey())); labels.set(index, Json.create(entry.getKey()));
values.set(i, Json.create(entry.getValue())); values.set(index, Json.create(entry.getValue()));
backgroundColors.set(i, Json.create(defaultColors[i % defaultColors.length])); colors.set(index, Json.create(defaultColors[index % defaultColors.length]));
i++; index++;
} }
JsonObject dataset = Json.createObject(); JsonObject dataset = Json.createObject();
dataset.put("label", "Einträge nach Kategorie"); dataset.put("label", "Entries by Category");
dataset.put("data", values); dataset.put("data", values);
dataset.put("backgroundColor", backgroundColors); dataset.put("backgroundColor", colors);
JsonArray datasets = Json.createArray(); JsonArray datasets = Json.createArray();
datasets.set(0, dataset); datasets.set(0, dataset);
@@ -105,19 +116,21 @@ public class ChartJsComponent extends Div {
return data; return data;
} }
// Liniendiagramm für Überstunden-Saldo (in Stunden) /**
public static JsonObject generateLineChartData(List<LocalDate> dates, List<Double> saldoValues) { * Creates JSON chart data for a line chart showing overtime balance.
*/
public static JsonObject generateLineChartData(List<LocalDate> dates, List<Double> balanceValues) {
JsonObject data = Json.createObject(); JsonObject data = Json.createObject();
JsonArray labels = Json.createArray(); JsonArray labels = Json.createArray();
JsonArray values = Json.createArray(); JsonArray values = Json.createArray();
for (int i = 0; i < dates.size(); i++) { for (int i = 0; i < dates.size(); i++) {
labels.set(i, Json.create(dates.get(i).toString())); labels.set(i, Json.create(dates.get(i).toString()));
values.set(i, Json.create(saldoValues.get(i))); values.set(i, Json.create(balanceValues.get(i)));
} }
JsonObject dataset = Json.createObject(); JsonObject dataset = Json.createObject();
dataset.put("label", "Überstunden-Saldo (h)"); dataset.put("label", "Overtime Balance (hours)");
dataset.put("data", values); dataset.put("data", values);
dataset.put("borderColor", "rgb(54, 162, 235)"); dataset.put("borderColor", "rgb(54, 162, 235)");
dataset.put("tension", 0.1); dataset.put("tension", 0.1);