fix: add a widget registry and "add widget" picker (#21)
CI / build-and-test (pull_request) Successful in 2m25s

"Widget hinzufügen" appended an empty placeholder card, so a widget closed
via its X was gone until a page reload. Widget types now live in a
WidgetRegistry (WidgetDefinition: type id, title key, default size,
content factory); the toolbar button opens a picker dialog over the
registry, and the dashboard builds its initial widgets from it too.

Chart construction moves from DashboardView into the registry factories,
which resolve translation keys through the chart component so they follow
the UI locale. Added widgets get an id of "<type>-<n>" from a
monotonically growing counter, so a closed widget's id is never handed to
a new one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0124BiJikbhbiEsNfJxdWM69
This commit is contained in:
Pit Friedrich
2026-07-28 20:32:45 +02:00
parent 03872a9d0c
commit 5fe159a604
8 changed files with 318 additions and 77 deletions
@@ -0,0 +1,102 @@
package com.example.widgets;
import com.example.components.ApexChart;
import com.example.components.AxisChart;
import com.example.components.BarChart;
import com.example.components.LineChart;
import com.example.components.PieChart;
import com.example.data.ChartDataService;
import com.example.data.ChartSeries;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.notification.Notification;
import org.springframework.stereotype.Service;
import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
/**
* The widget types a dashboard can show. Holding them here rather than inline in
* the view is what lets the "add widget" picker offer real content and lets a
* closed widget be brought back: the view only decides <em>where</em> a widget
* sits, the registry decides what one <em>is</em>.
* <p>
* Numbers come from {@link ChartDataService}; the factories resolve the data's
* translation keys against the bundle through the chart component itself, so
* they follow the current UI locale without the registry being a component.
*/
@Service
public class WidgetRegistry {
public static final String REVENUE_TREND = "revenue-trend";
public static final String REVENUE_MONTH = "revenue-month";
public static final String REVENUE_REGION = "revenue-region";
private final ChartDataService dataService;
/** Insertion-ordered: the picker lists definitions in registration order. */
private final Map<String, WidgetDefinition> definitions = new LinkedHashMap<>();
public WidgetRegistry(ChartDataService dataService) {
this.dataService = dataService;
register(new WidgetDefinition(REVENUE_TREND, "card.revenueTrend", 6, 3,
() -> axisChart(new LineChart())));
register(new WidgetDefinition(REVENUE_MONTH, "card.revenueByMonth", 6, 3,
() -> axisChart(new BarChart())));
register(new WidgetDefinition(REVENUE_REGION, "card.revenueByRegion", 5, 3,
this::pieChart));
}
/** Adds a definition, replacing any earlier one of the same type. */
public final void register(WidgetDefinition definition) {
definitions.put(definition.type(), definition);
}
public List<WidgetDefinition> definitions() {
return List.copyOf(definitions.values());
}
/** The definition for the given type. Unknown types are a programming
* error, not user input — the picker only ever offers registered ones. */
public WidgetDefinition require(String type) {
WidgetDefinition definition = definitions.get(type);
if (definition == null) {
throw new IllegalArgumentException("unknown widget type: " + type);
}
return definition;
}
private Component axisChart(AxisChart chart) {
ChartSeries series = dataService.revenueByMonth();
chart.setData(chart.getTranslation(series.nameKey()), series.values(),
translate(chart, series.categoryKeys()));
chart.addPointClickListener(e -> Notification.show(chart.getTranslation(
"chart.pointClick", e.getSeriesIndex(), e.getDataPointIndex())));
return sizeFull(chart);
}
private Component pieChart() {
ChartSeries series = dataService.revenueByRegion();
PieChart chart = new PieChart();
// A pie has no series name — its categories are the slice labels.
chart.setData(series.values(), translate(chart, series.categoryKeys()));
chart.addPointClickListener(e -> Notification.show(
chart.getTranslation("chart.sliceClick", e.getDataPointIndex())));
return sizeFull(chart);
}
/** Charts fill their grid item instead of using a fixed pixel height, so
* resizing a widget resizes the chart (grid-stack.ts fires a window
* resize on resizestop, which ApexCharts reflows on). */
private Component sizeFull(ApexChart chart) {
chart.setWidthFull();
chart.setHeight("100%");
return chart;
}
/** Data sets carry translation keys, not display text — see
* {@link ChartSeries}. */
private List<String> translate(Component component, List<String> keys) {
return keys.stream().map(component::getTranslation).toList();
}
}