11.3.0 Major release

[wirew0rm]

Hello everyone 👋

It's been quite some time since the last release and the announcement of starting to work on a major release to fix some of the outstanding maintainability issues, but now we are finally at a state to release ChartFx 11.3.0! The release brings a lot of performance and stability improvements, cleans up a lot of the organically grown code to make it easier to maintain and fix bugs within in the future and fixes some long outstanding bugs some of which were deeply rooted in the way things were set up previously.

Major Improvements:

• New layout and event system Layout and notification system #594. This is by far the biggest improvement and change and we're very thankful for all the hard work @ennerf has put into this.
  • layout: removes lots of notorious rendering inconsistencies by using a global preLayout listener to update all the chart wide state
    • befor/after comparisons: [10pt, 10pt]Restructure layout computations to make rendered output more consistent #579 (comment)
  • event system: DirtyBit based event system for chart events. this ensures that expensive computations and rendering steps are in in
    almost all cases performed exactly once.
    • before/after comparisons: [5pt,5pt] overhaul of (DataSet) event system #530 (comment)
    • all datasets now belong to a renderer. The shared datasets were removed from the chart.
    • the error surface hatch is now shifted and can show overlapping error surfaces
  • for technical details take a look at the individual PRs/issues and the Architecture.md file.
• Consistent CSS styling for all chart components Axis and renderer CSS Styling #598
  • Several renderer styling parameters moved to the datasets (line width, color, etc)
  • replaces custom ColorScheme classes and Style parsers
  • might need some adjustments where ChartFx used non-standard CSS property names before
  • follow-up PR also allows complete style control for datasets using CSS Overhauled dataset styling #603. Because DataSets can be in multiple Renderers/Charts, but stylable nodes can be in the scene graph only once, a DatasetNode unique to the renderer is created. This is transparent to the user but it can be accessed to change the style from code. For more Details see the PR description.
• improved axis label generation based on the schubfach algorithm removing the huge (20Mb) icu4j dependency Label refactoring #575
• use controlsfx's sampler to display our samples instead of having the launcher with a list of buttons Misc improvements #578 + Convert math and financial samples to fxsampler #593 (thanks at @uosis for the followup fix Fix sample data paths #581)
• added code to optionally collect and/or display latency histogram data for different parts of the code Better profiling #604, benchmark module #614, BenchPlugin #618

Bugfixes:

• fix 2d histogram getGrid() RotatedAxisLabelSample: Disable AutoRanging #628, thanks to @ajackson2681
• ErrorDataSetRenderer: fix bubble chart error value handling Renderer: Fix bubble chart error type handling #596, thanks @protogenes for finding the bug and solution.
• make ChartFx applications and samples terminate properly Axis and renderer CSS Styling #598
• Zoomer: perform zoom actions based on display coordinates Fix zoom transformations to be based on display coordinates instead of data coordinates #602. This allows to properly zoom in logarithmic plots.
• DragResizerUtil: fix copy and paste error fix DragResizerUtil for south #606, thanks to @rsuna
• Allow CSS styling of line cap and join for line charts and add sensible defaults, javafx defaults can create display artifacts outside of the acutal data range added parameters for styling line cap and join #626, thanks @protogenes for bringing this up

CI:

• changed the package names from de.gsi.chart to io.fair_acc.chartfx. This should by far be the biggest user facing change but unfortunately was necessary for deployment reasons. Sorry for the inconvenience, but the changes should be mostly mechanical.
• changed code level to java 17 and added a java 20 build, dropping java 11 support
• code-formatting: switch to clang-format-16, disable restyler PRs (apply fixes by downloading the diff by clicking on "Details" for the failed CI check) and apply consistent formatting to the whole project
• Added a logo, banner and updated outdated badges Add chart-fx logo and fix some outdated badges #619, thanks to @milo-gsi for the original logo design and iterations!
• conveyor packaging for the sample application to easily showcase ChartFx on different systems added conveyor packaging for fx-sampler #580
• remove fastutil dependency by sharding the few classes used by ChartFx remove fastutil dependency #576

Please let us know if there are any bigger problems in upgrading, any regressions we missed or just your (hopefully positive) experience with the new release in the linked discussion.

---

This discussion was created from the release 11.3.0 Major release.

[trixon]

Thank you for your work!

Now I'm trying to adopt the changes and I have a couple of questions.

Where did de.gsi.chart.plugins.Panner go?

I noticed that chart.legendVisibleProperty().set(true); indicate usage of a deprecated proptery as:
@Deprecated // TODO: used in tests/examples. Should be replaced with getLegend().setVisible(value)?
However, the Legend interface does not contain setVisible. How so?

Once again, thanks!

[ennerf]

You can use chart.getLegend().getNode().setVisible(false); or do it via CSS:

.chart-legend {
  visibility: hidden;
}

[wirew0rm]

Hey, thanks for the feedback and for sharing your experience in updating.

On the dedicated Panner: I found it a bit confusing to have the Zoomer Plugin, which also includes all the panning functionality and the separate Panner plugin, which was only used by some samples and overlaps in functionality (and registered mouse handlers) with the Zoomer plugin. The idea was to migrate all usage to the Zoomer and add missing functionality/configurability there.

What are your reasons for picking the Panner over the Zoom plugin and do you think we could make the Zoomer Plugin better for your usecase? Otherwise we could also bring back the Panner plugin if there are usecases for it. It should have definitely gotten a place in the Realease notes.

In the meantime it should be relatively easy to adapt the Panner plugin from the 11.2.7 release (mainly updating all package names) and add it to your source until the next release.

[ichaus-we]

Hi,
thank you for releasing an update!
I was using the Panner plugin too:

		Panner panner = new Panner();
		panner.setMouseFilter(MouseEventsHelper::isOnlyCtrlModifierDown);
		chart.getPlugins().add(panner);

That used to enable panning with the left mouse button while the ctrl button was pressed.
How to do this now?

[ichaus-we]

About the Panner problem:
I took a look at the io.fair_acc.chartfx.plugins.Zoomer source code:

    private final EventHandler<MouseEvent> panStartHandler = event -> {
        if (isPannerEnabled() && DEFAULT_MOUSE_FILTER.test(event)) {
            panStarted(event);
            event.consume();
        }
    };

The panStartHandler is private and can't be overridden.
It tests the DEFAULT_MOUSE_FILTER constant that is set to isOnlyMiddleButtonDown. The funny thing is that the constant's comment states to test for what I actually need.

    /**
     * Default pan mouse filter passing on left mouse button with {@link MouseEvent#isControlDown() control key down}.
     */
    public static final Predicate<MouseEvent> DEFAULT_MOUSE_FILTER = MouseEventsHelper::isOnlyMiddleButtonDown;

Is it possible to add a method to set the mouse filter to MouseEventsHelper::isOnlyCtrlModifierDown like in the removed Panner plugin?

[wirew0rm]

Hey, sorry I didn't see your earlier message. Your usecase and analysis look valid, also all the other mouse handlers seem to have user configurable filters.

If you'd add a PR adding a user definable predicate and maybe also look if this is consistent for the other mouse handlers, that would be most welcome. Otherwise i'll look into it myself, but can't make any short-time promises.

[partolaaa]

Thank you very much for the work done!

I have a small question: I previously used chart.getXAxis().forceRedraw(); in order to force an axis redraw after changing the formatter, but after update this function does not work, how could I fix it?

That's how I "force redraw" for the default LineChart:

NumberAxis xAxis = (NumberAxis) chart.getXAxis();
xAxis.setAutoRanging(false);
double lowerBound = xAxis.getLowerBound();
double upperBound = xAxis.getUpperBound();
xAxis.setLowerBound(lowerBound - 1);
xAxis.setUpperBound(upperBound + 1);
xAxis.setLowerBound(lowerBound);
xAxis.setUpperBound(upperBound);

Thanks for the help!

Sincerely

[wirew0rm]

Are you sure the manual forced redraw is still needed? It looks like it should trigger the redraw itself.

If not, that should be fixed in the library. The line linked above should also give you an idea how individual parts of the axis can be marked for redraw, maybe that's already sufficient for you to find which property was overlooked. Otherwise could you provide am minimal example to reproduce the problem? As a workaround you could probably also set the dirty flags from outside but that would be more of a workaround and can easily lead to unneeded redraws.

[partolaaa]

Perhaps I could do without manual redrawing, but I would like the axis to be updated simultaneously with the change in the axis display mode. This is where I set the formatter to process the values:

public class AnalogAddFormattersStrategyImpl extends AnalogAxesStrategyImpl implements AddFormattersStrategy {
    @Override
    public void addAxesFormatters(Object chart, double stepTime, LocalTime startTime) {
        DefaultNumericAxis xAxis = (DefaultNumericAxis) ((XYChart) chart).getXAxis();
        AxisLabelFormatter xAxisLabelFormatter = xAxis.getAxisLabelFormatter();

        xAxis.setTickUnit((xAxis.getMax() - xAxis.getMin()) / 10);
        xAxis.setAxisLabelFormatter(new AxisLabelFormatter() {
            @Override
            public Number fromString(String s) {
                return xAxisLabelFormatter.fromString(s);
            }

            @Override
            public TickUnitSupplier getTickUnitSupplier() {
                return xAxisLabelFormatter.getTickUnitSupplier();
            }

            @Override
            public void setTickUnitSupplier(TickUnitSupplier tickUnitSupplier) {
                xAxisLabelFormatter.setTickUnitSupplier(tickUnitSupplier);
            }

            @Override
            public ObjectProperty<TickUnitSupplier> tickUnitSupplierProperty() {
                return xAxisLabelFormatter.tickUnitSupplierProperty();
            }

            @Override
            public String toString(Number number) {
                ChartPluginsState chartPluginsState = ChartPluginsState.getInstance();
                if (chartPluginsState.isDefaultTimeMode()) {
                    return getTimeModeValue(number, stepTime, startTime);
                } else {
                    return String.format("%.2f", (number.doubleValue() / 1000 * stepTime));
                }
            }

            @Override
            public void updateFormatter(List<Double> list, double v) {
                xAxisLabelFormatter.updateFormatter(list, v);
            }
        });
    }
}

And here is how I update the variable:

@FXML
    private void handleDefaultTimeMode(ActionEvent event) {
        ChartPluginsState.getInstance().setDefaultTimeMode(((CheckBox) event.getSource()).isSelected());
        analogChart.getXAxis().forceRedraw();
        ChartUtils.forceDigitalXAxisRefresh(digitalChart);
    }

I hope this would help to understand my problem. Please, let me know if you need some more information.

[ennerf]

Setting the formatter would trigger an appropriate redraw, but if you are changing the behavior of an already set formatter you'd have to trigger appropriate events manually with axis.fireInvalidated(ChartBits.AxisCanvas, ChartBits.AxisTickLabelText);.

[partolaaa]

Thank you for the explanation! That helped 👍

[ichaus-we]

Hi,

I'm still struggling with the update ;-)
I need to create legend symbols for my UI. After updating I have a problem with the colors of the symbols I create.

As a test, you can add these lines to VisibilityToggleSample#getChartPanel, in front of the return statement:

		dsNode1.addListener((source, bits) -> {    // listen for changes
			final Canvas symbol = new Canvas(15, 15);    // create a Canvas
			chart.getRenderers().get(0).drawLegendSymbol(dsNode1, symbol);    // draw the legend symbol on the canvas
			visibility1.setGraphic(symbol);   // add symbol to the checkbox
		});
		dsNode2.addListener((source, bits) -> {
			final Canvas symbol = new Canvas(15, 15);
			chart.getRenderers().get(0).drawLegendSymbol(dsNode2, symbol);
			visibility2.setGraphic(symbol);
		});

Also add this import:

    import javafx.scene.canvas.Canvas;

The code adds legend symbols to the visibility checkboxes.
When the chart is first shown, the symbols are in black color instead of the dataset's color.

After e.g. toggling the visibility, the symbols will be updated and are correctly drawn in the dataset's color.

Is there something wrong with my aproach?

Thanks for your help.

[ennerf]

You are drawing into the canvas before the CSS phase, so none of the dataset colors are set yet. Your listener will also trigger on all kind of ds events (added, deleted, range changed, etc.) and potentially create unnecessary load on the GC.

The default behavior should already draw the legends correctly, so can you clarify what you are trying to accomplish? You are likely looking for a custom legend or some CSS styling on .chart-legend

[ichaus-we]

Hi,
thanks for replying.

About performance: I wanted to keep the sample code simple ;-)

It's not about the chart's legend, but in my application I need to show a lot of small datasets at once (up to 30). There is a table next to the chart with additional information about each of the shown datasets and the user can perform additional tasks via a context menu. For better recognizability the first table column displays the dataset's color.

So maybe the question should be: how can I be notified about completion of the CSS phase.

[ennerf]

Are you with ichaus.de? If so, we're using a bunch of your encoders 👍

You could use a ChartPlugin to link the data to your custom table. It'd look something like this:

chart.getPlugins().add(new ChartPlugin() {
    @Override
    public void runPreLayout() {
        // Runs before CSS phase. Anything that modifies the SceneGraph goes here.
        if (getChart().getBitState().isDirty(ChartBits.ChartDataSets)) {
            // Datasets have changed. Rebuild your custom legend ...
        }
    }

    @Override
    public void runPostLayout() {
        // Runs after CSS and layout phases. Used for drawing colors etc.
        if (getChart().getBitState().isDirty(ChartBits.ChartDataSets)) {
            // Redraw elements that need to draw w/ colors. Don't modify the SceneGraph
        }
    }
});

[ichaus-we]

Great, now it works.

And yes, I am working at iC-Haus. Hopefully our encoder chips are doing fine ;-)