vaadin / flow-components

Java counterpart of Vaadin Web Components
101 stars 66 forks source link

vaadin-charts-flow-svg-generator seems to ignore AnnotationItemLabel #6230

Open davidmllr opened 6 months ago

davidmllr commented 6 months ago

Description

Hey, after migrating from Vaadin 23 to Vaadin 24 we noticed that some labels were missing in our charts exports. We're using vaadin-charts in combination with the vaadin-charts-flow-svg-generator.

As stated in the migration guide we had to replace HtmlLabels and HtmlLabelItem with AnnotationItemLabel.

When I create a label like this it's visible in the UI but not in the SVG export:

var label = new AnnotationItemLabel("Some label");
label.setPoint(new AnnotationItemLabelPoint(50, 50));
getConfiguration().addLabel(label);

Is it possible that AnnotationItemLabels are simply ignored by the SVG generator plugin right now?

Thanks in advance!

Expected outcome

Labels are visible in the generated SVG.

Minimal reproducible example

@SpringBootApplication
@Theme(value = "my-app")
public class Application implements AppShellConfigurator {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Route(value = "/")
    public static class ChartsView extends Composite<VerticalLayout> {
        public ChartsView() {
            var chart = new Chart(ChartType.BAR);
            var config = chart.getConfiguration();

            config.addSeries(new ListSeries("Numbers", 100, 200, 300));

            var label = new AnnotationItemLabel("Some label");
            label.setPoint(new AnnotationItemLabelPoint(50, 50));
            config.addLabel(label);

            var div = new Div();
            getContent().add(chart, div);

            try (var generator = new SVGGenerator()) {
                var svg = generator.generate(config);
                div.getElement().setProperty("innerHTML", svg);
            } catch (Exception e) {
                // handle exceptions accordingly
            }
        }
    }
}

As seen in the image below, the original graph (at the top) has a label while the generated SVG (bottom) has none.

image

Steps to reproduce

See code snippet above.

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-charts-flow-svg-generator</artifactId>
</dependency>

needs to be added in advance.

Environment

Flow: 24.3.5 Vaadin: 24.3.5 Java: Eclipse Adoptium 21.0.2 OS: aarch64 Mac OS X 13.4.1 Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36 Live reload: Java active (Spring Boot Devtools): Front end active

Browsers

Issue is not browser related

rolfsmeds commented 6 months ago

Related to https://github.com/vaadin/flow-components/pull/4481. Need to investigate if there's some fundamental difference between AnnotationItemLabel and HtmlLabel/HtmlLabelItem that would explain it.