Search in sources :

Example 11 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration in project flow-components by vaadin.

the class Gauge method initDemo.

@Override
public void initDemo() {
    // NOSONAR
    final Random random = new Random(0);
    final Chart chart = new Chart();
    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.setTitle("Speedometer");
    configuration.getChart().setWidth(500);
    Pane pane = configuration.getPane();
    pane.setStartAngle(-150);
    pane.setEndAngle(150);
    YAxis yAxis = new YAxis();
    yAxis.setTitle("km/h");
    yAxis.setMin(0);
    yAxis.setMax(200);
    yAxis.setTickLength(10);
    yAxis.setTickPixelInterval(30);
    yAxis.setTickPosition(TickPosition.INSIDE);
    yAxis.setMinorTickLength(10);
    yAxis.setMinorTickInterval("auto");
    yAxis.setMinorTickPosition(TickPosition.INSIDE);
    Labels labels = new Labels();
    labels.setStep(2);
    labels.setRotation("auto");
    yAxis.setLabels(labels);
    PlotBand[] bands = new PlotBand[3];
    bands[0] = new PlotBand();
    bands[0].setFrom(0);
    bands[0].setTo(120);
    bands[0].setClassName("band-0");
    bands[1] = new PlotBand();
    bands[1].setFrom(120);
    bands[1].setTo(160);
    bands[1].setClassName("band-1");
    bands[2] = new PlotBand();
    bands[2].setFrom(160);
    bands[2].setTo(200);
    bands[2].setClassName("band-2");
    yAxis.setPlotBands(bands);
    configuration.addyAxis(yAxis);
    final ListSeries series = new ListSeries("Speed", 89);
    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    SeriesTooltip tooltip = new SeriesTooltip();
    tooltip.setValueSuffix(" km/h");
    plotOptionsGauge.setTooltip(tooltip);
    series.setPlotOptions(plotOptionsGauge);
    configuration.addSeries(series);
    runWhileAttached(chart, () -> {
        Integer oldValue = series.getData()[0].intValue();
        Integer newValue = (int) (oldValue + (random.nextDouble() - 0.5) * 20.0);
        series.updatePoint(0, newValue);
    }, 5000, 12000);
    add(chart);
}
Also used : PlotOptionsGauge(com.vaadin.flow.component.charts.model.PlotOptionsGauge) Random(java.util.Random) Configuration(com.vaadin.flow.component.charts.model.Configuration) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) Labels(com.vaadin.flow.component.charts.model.Labels) Pane(com.vaadin.flow.component.charts.model.Pane) PlotBand(com.vaadin.flow.component.charts.model.PlotBand) Chart(com.vaadin.flow.component.charts.Chart) YAxis(com.vaadin.flow.component.charts.model.YAxis) SeriesTooltip(com.vaadin.flow.component.charts.model.SeriesTooltip)

Example 12 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration in project flow-components by vaadin.

the class GlobalOptions method initDemo.

@Override
public void initDemo() {
    List<Chart> charts = new ArrayList();
    NativeButton changeTitleButton = new NativeButton();
    changeTitleButton.setId("add_chart");
    changeTitleButton.setText("Add chart");
    changeTitleButton.addClickListener(e -> {
        final Chart chart = new Chart();
        Configuration configuration = chart.getConfiguration();
        configuration.setTitle("First Chart for Flow");
        chart.getConfiguration().getChart().setType(ChartType.AREA);
        Tooltip tooltip = configuration.getTooltip();
        tooltip.setEnabled(true);
        tooltip.setShared(true);
        PlotOptionsSeries options = new PlotOptionsSeries();
        options.setPointStart(0);
        options.setPointIntervalUnit(IntervalUnit.DAY);
        configuration.setPlotOptions(options);
        configuration.addSeries(new ListSeries("Tokyo", 20, 12, 34, 23, 65, 8, 4, 7, 76, 19, 20, 8));
        configuration.addSeries(new ListSeries("Miami", 34, 29, 23, 65, 8, 4, 7, 7, 59, 8, 9, 19));
        XAxis x = new XAxis();
        x.setType(AxisType.DATETIME);
        x.getLabels().setFormat("{value:%a}");
        configuration.addxAxis(x);
        YAxis y = new YAxis();
        y.setMin(0);
        y.setTitle("Rainfall (mm)");
        configuration.addyAxis(y);
        charts.add(chart);
        add(chart);
    });
    add(changeTitleButton);
    NativeButton changeLangButton = new NativeButton();
    changeLangButton.setId("change_lang");
    changeLangButton.setText("Change lang");
    changeLangButton.addClickListener(e -> {
        Lang lang = new Lang();
        lang.setShortMonths(new String[] { "Tammi", "Helmi", "Maalis", "Huhti", "Touko", "Kesä", "Heinä", "Elo", "Syys", "Loka", "Marras", "Joulu" });
        lang.setMonths(new String[] { "Tammikuu", "Helmikuu", "Maaliskuu", "Huhtikuu", "Toukokuu", "Kesäkuu", "Heinäkuu", "Elokuu", "Syyskuu", "Lokakuu", "Marraskuu", "Joulukuu" });
        lang.setWeekdays(new String[] { "Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai" });
        lang.setShortWeekdays(new String[] { "su", "ma", "ti", "ke", "to", "pe", "la" });
        ChartOptions.get().setLang(lang);
    });
    add(changeLangButton);
    NativeButton changeThemeLightButton = new NativeButton();
    changeThemeLightButton.setId("change_theme_light");
    changeThemeLightButton.setText("Change theme light");
    changeThemeLightButton.addClickListener(e -> {
        ChartOptions.get().setTheme(new LumoLightTheme());
        for (Chart chart : charts) {
            chart.drawChart(true);
        }
    });
    add(changeThemeLightButton);
    NativeButton changeThemeDarkButton = new NativeButton();
    changeThemeDarkButton.setId("change_theme_dark");
    changeThemeDarkButton.setText("Change theme Dark");
    changeThemeDarkButton.addClickListener(e -> {
        ChartOptions.get().setTheme(new LumoDarkTheme());
        for (Chart chart : charts) {
            chart.drawChart(true);
        }
    });
    add(changeThemeDarkButton);
}
Also used : NativeButton(com.vaadin.flow.component.html.NativeButton) Configuration(com.vaadin.flow.component.charts.model.Configuration) Tooltip(com.vaadin.flow.component.charts.model.Tooltip) ArrayList(java.util.ArrayList) Lang(com.vaadin.flow.component.charts.model.Lang) XAxis(com.vaadin.flow.component.charts.model.XAxis) LumoDarkTheme(com.vaadin.flow.component.charts.themes.LumoDarkTheme) ListSeries(com.vaadin.flow.component.charts.model.ListSeries) LumoLightTheme(com.vaadin.flow.component.charts.themes.LumoLightTheme) Chart(com.vaadin.flow.component.charts.Chart) PlotOptionsSeries(com.vaadin.flow.component.charts.model.PlotOptionsSeries) YAxis(com.vaadin.flow.component.charts.model.YAxis)

Example 13 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration in project flow-components by vaadin.

the class SVGGenerator method generate.

/**
 * Generate an SVG string that can be used to render a chart with data from
 * a {@link Configuration} instance.
 *
 * @param chartConfiguration
 *            the {@link Configuration} with the chart's data.
 * @param exportOptions
 *            optional exporting options to customize the result.
 * @return an SVG string resulting from the {@link Configuration},
 *         customized as per the {@link ExportOptions}.
 * @throws NullPointerException
 *             when passing a <code>null</code> configuration.
 * @throws IllegalStateException
 *             when called on a closed generator.
 * @throws IOException
 *             if anything happens using or allocating resources to
 *             virtually render the chart.
 * @throws InterruptedException
 *             if the rendering process gets interrupted.
 */
public String generate(Configuration chartConfiguration, ExportOptions exportOptions) throws IOException, InterruptedException {
    if (isClosed()) {
        throw new IllegalStateException("This generator is already closed.");
    }
    Configuration config = Objects.requireNonNull(chartConfiguration, "Chart configuration must not be null.");
    String jsonConfig = ChartSerialization.toJSON(config);
    String jsonExportOptions = ChartSerialization.toJSON(exportOptions);
    Path chartFilePath = Files.createTempFile(tempDirPath, "chart", ".svg");
    String chartFileName = chartFilePath.toFile().getName();
    String script = String.format(SCRIPT_TEMPLATE, bundleTempPath.toFile().getAbsolutePath().replaceAll("\\\\", "/"), jsonConfig, chartFileName, jsonExportOptions);
    NodeRunner nodeRunner = new NodeRunner();
    nodeRunner.runJavascript(script);
    // when script completes, the chart svg file should exist
    try {
        return new String(Files.readAllBytes(chartFilePath), StandardCharsets.UTF_8);
    } finally {
        Files.delete(chartFilePath);
    }
}
Also used : Path(java.nio.file.Path) Configuration(com.vaadin.flow.component.charts.model.Configuration)

Example 14 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration in project flow-components by vaadin.

the class SVGGeneratorTest method exportWithEnabledFunctions.

@Test
public void exportWithEnabledFunctions() throws IOException, InterruptedException {
    Configuration configuration = createAreaChartConfiguration();
    configuration.getyAxis().getLabels().setFormatter("function () { return this.value +' formatted'; }");
    ExportOptions options = new ExportOptions();
    options.setExecuteFunctions(true);
    String actualSVG = svgGenerator.generate(configuration, options);
    Path expectedResultPath = Paths.get("src", "test", "resources", "enabled-functions.svg");
    String expectedSVG = readUtf8File(expectedResultPath);
    assertEquals(replaceIds(expectedSVG), replaceIds(actualSVG));
}
Also used : Path(java.nio.file.Path) Configuration(com.vaadin.flow.component.charts.model.Configuration) Test(org.junit.Test)

Example 15 with Configuration

use of com.vaadin.flow.component.charts.model.Configuration in project flow-components by vaadin.

the class SVGGeneratorTest method exportWithCustomTheme.

@Test
public void exportWithCustomTheme() throws IOException, InterruptedException {
    Configuration conf = createPieChartConfiguration();
    ExportOptions options = new ExportOptions();
    options.setTheme(new LumoDarkTheme());
    String svg = svgGenerator.generate(conf, options);
    Path pieChartPath = Paths.get("src", "test", "resources", "lumo-dark.svg");
    String expectedSVG = readUtf8File(pieChartPath);
    assertEquals(replaceIds(expectedSVG), replaceIds(svg));
}
Also used : Path(java.nio.file.Path) LumoDarkTheme(com.vaadin.flow.component.charts.themes.LumoDarkTheme) Configuration(com.vaadin.flow.component.charts.model.Configuration) Test(org.junit.Test)

Aggregations

Configuration (com.vaadin.flow.component.charts.model.Configuration)72 Chart (com.vaadin.flow.component.charts.Chart)48 DataSeries (com.vaadin.flow.component.charts.model.DataSeries)32 YAxis (com.vaadin.flow.component.charts.model.YAxis)32 XAxis (com.vaadin.flow.component.charts.model.XAxis)25 ListSeries (com.vaadin.flow.component.charts.model.ListSeries)24 DataSeriesItem (com.vaadin.flow.component.charts.model.DataSeriesItem)20 Tooltip (com.vaadin.flow.component.charts.model.Tooltip)19 Test (org.junit.Test)16 DataLabels (com.vaadin.flow.component.charts.model.DataLabels)12 PlotOptionsColumn (com.vaadin.flow.component.charts.model.PlotOptionsColumn)10 Path (java.nio.file.Path)10 PlotOptionsSeries (com.vaadin.flow.component.charts.model.PlotOptionsSeries)9 AxisTitle (com.vaadin.flow.component.charts.model.AxisTitle)8 Legend (com.vaadin.flow.component.charts.model.Legend)8 Labels (com.vaadin.flow.component.charts.model.Labels)7 StockPrices (com.vaadin.flow.component.charts.examples.timeline.util.StockPrices)6 RangeSelector (com.vaadin.flow.component.charts.model.RangeSelector)5 SeriesTooltip (com.vaadin.flow.component.charts.model.SeriesTooltip)5 Pane (com.vaadin.flow.component.charts.model.Pane)4