Suggestion needed: show dynamic chart in popover

Support
,
1

Hi team,

The requirement is, there is a column in the datagrid showing sum of subtypes of current row, while click on the number, a popover should be displayed to show a pie chart of all subtypes.

Vaadin’s Popover can be used here, but I have no idea how to add the pie chart dynamically into the popover? Could you please share example code?

3

Hi!

You can try something like this:

    @ViewComponent
    private Span span;
    @Autowired
    private UiComponents uiComponents;

    @Subscribe
    public void onInit(InitEvent event) {
        Popover popover = new Popover();
        popover.setTarget(span);

        popover.addOpenedChangeListener(openedEvent -> {
            if (openedEvent.isOpened()) {
                openedEvent.getSource().add(createChart());
            } else {
                openedEvent.getSource().removeAll();
            }
        });

    }

    private Chart createChart() {
        Chart chart = uiComponents.create(Chart.class);

        chart.setId("chart");
        chart.setHeight("20em");
        chart.setWidth("20em");

        chart.withLegend(new Legend())
                .withSeries(new PieSeries()
                        .withStartAngle(45));

        ListChartItems<MapDataItem> items = createChartDataItems();
        chart.withDataSet(
                new DataSet().withSource(
                        new DataSet.Source<MapDataItem>()
                                .withDataProvider(items)
                                .withCategoryField("description")
                                .withValueField("value")
                )
        );

        return chart;
    }

    private ListChartItems<MapDataItem> createChartDataItems() {
        return new ListChartItems<>(
                new MapDataItem(Map.of("value", 75, "description", "Sky")),
                new MapDataItem(Map.of("value", 7, "description", "Shady side of pyramid")),
                new MapDataItem(Map.of("value", 18, "description", "Sunny side of pyramid"))
        );
    }

Unfortunately, the chart has to be added after the popover is opened because the component needs to know the size of the parent container in order to render correctly. More details can be found in the following comment: Jmix Chart inside Details Element · Issue #4728 · jmix-framework/jmix · GitHub

Best regards,
Dmitriy

5

Thanks Dmitriy! This works!

6

Hi Dmitriy,

Another question about charts, how to support function in some cases, for example, in this chart: Examples - Apache ECharts, the tooltip position is set to a function which changes the tooltip’s position according to mouse position such that the tooltip doesn’t overlay the chart. Similar function configuration is also available in series.itemStyle.color, is there a way we can do the same in Jmix?

7

Hi!

This is a bit of a specific case, so I would recommend using nativeJson property to set this value: UI Samples :: Native JSON. This can also be done programmatically.

Best regards,
Dmitriy