MeterChart value gets cut off when using description label

[AHijner]

Hi!

We've been using the metercharts, and have noticed that when displaying the description label, and the maximum-value is <1000, the value can get cut off a bit at the top:

If the maximum value >=1000 there seems to be no problem,

If we do not use a description label, there seems to be no problem:

We do have a good workaround, setting the value-format-callback: meterChart.getValueLabel().setFormatCallback(context -> " " + context.getValue() + " ");

We were just wondering if this is a small bug? Or if there is a way for us to adjust this ourselves by adding some padding or something (I've not been able to find a setting for this)?

As we do currently have a decent workaround there is no need for a quick response, of course!

[stockiNail]

@AHijner thank you very much for your issue! I think it s is a bug. Let me take time to have a look.

[stockiNail]

@AHijner I have tried to reproduce the issue but I cannot. Can you share here the code you are using (chart implementation and its config)?

[stockiNail]

After further investigation, I think the issue is related to auto font size calculation with is checking the width of the label to draw but not the height. I'll do additional tests. it could be helpful to have the size (width and height of the chart) in order to reproduce the issue

[AHijner]

My apologies for the late reply! I was busy with some unrelated things and this fully slipped my mind

We don't set any specific height/widht, they are responsive and making them bigger/smaller doesn't seem to have much of an effect. My usual config results in a width/height of 144px. I did notice that (not)setting the title also influences this 'cutoff', if I don't set the title we can see the full value, though it is not centered well.

The relevant code:

    private MeterChartWidget insufficientStatusChartWidget;
    private MeterChartWidget mediocreStatusChartWidget;
    private MeterChartWidget perfectStatusChartWidget;
    @UiField SimplePanel insufficientStatusChart;
    @UiField SimplePanel mediocreStatusChart;
    @UiField SimplePanel perfectStatusChart;

private void init() {
        //MeterCharts
        insufficientStatusChartWidget = new MeterChartWidget();
        insufficientStatusChartWidget.getOptions().getTitle().setText("Onvoldoende");
        configureStatusChart(insufficientStatusChartWidget, "#E22D33");
        insufficientStatusChart.add(insufficientStatusChartWidget);

        mediocreStatusChartWidget = new MeterChartWidget();
        mediocreStatusChartWidget.getOptions().getTitle().setText("Matig");
        configureStatusChart(mediocreStatusChartWidget, "#FFB11A");
        mediocreStatusChart.add(mediocreStatusChartWidget);

        perfectStatusChartWidget = new MeterChartWidget();
        perfectStatusChartWidget.getOptions().getTitle().setText("Goed");
        configureStatusChart(perfectStatusChartWidget, "#73D470");
        perfectStatusChart.add(perfectStatusChartWidget);
    }

 private void configureStatusChart(MeterChartWidget statusChartWidget, String color) {
        statusChartWidget.getOptions().getTitle().setDisplay(true);
        statusChartWidget.getOptions().setMaintainAspectRatio(true);
        statusChartWidget.getOptions().setResponsive(true);

        MeterDataset statusChartDataset = statusChartWidget.newDataset();
        statusChartDataset.getDescriptionLabel().setContent("Leerlingen");
        statusChartDataset.getDescriptionLabel().setDisplay(true);
        statusChartDataset.setColor(color);
        statusChartDataset.getValueLabel().setColor(color);
        statusChartDataset.getValueLabel().setPrecision(0);
//        statusChartDataset.getValueLabel().setFormatCallback(context -> " " + context.getValue() + " ");
        statusChartWidget.getData().setDatasets(statusChartDataset);
    }

private void setExampleDate() {
        MeterDataset insufficientStatusDataset = (MeterDataset) insufficientStatusChartWidget.getData().getDatasets().get(0);
        MeterDataset mediocreStatusDataset = (MeterDataset) mediocreStatusChartWidget.getData().getDatasets().get(0);
        MeterDataset perfectStatusDataset = (MeterDataset) perfectStatusChartWidget.getData().getDatasets().get(0);

        insufficientStatusDataset.setMax(10); 
        mediocreStatusDataset.setMax(10);
        perfectStatusDataset.setMax(10);
        insufficientStatusDataset.setValue(0);
        mediocreStatusDataset.setValue(0);
        perfectStatusDataset.setValue(10);

        insufficientStatusChartWidget.update();
        mediocreStatusChartWidget.update();
        perfectStatusChartWidget.update();
    }

In case it is relevant, the widget containers each have a css styling, they are contained by another flex container:

.insufficientStatusChart, .mediocreStatusChart, .perfectStatusChart {
    display: flex;
    align-items: center;
    width: 100%;
    height: 33%;
  }

I hope this will be enough so you can reproduce the issue, if not, let me know and I can provide more of our gwt-code etc. for context!

[stockiNail]

@AHijner thank you very much!! Really appreciated! I'll come back as soon as I'll have time to fix it (I know where it is). I'm very busy as well.

[AHijner]

Great! No rush of course :)