Skip to content

Latest commit

 

History

History
217 lines (168 loc) · 7.73 KB

USAGE_BATIK_JFX_JS.md

File metadata and controls

217 lines (168 loc) · 7.73 KB
Raw

Using Lets-Plot Kotlin API in JVM and Kotlin/JS Applications

Library Artifacts

All artifacts are available at Maven Central.

Lets-Plot Kotlin API lets-plot-kotlin-jvm
lets-plot-kotlin-js
lets-plot-kotlin-geotools 		Published by this project.
Lets-Plot Multiplatform lets-plot-batik
lets-plot-jfx
 Published by the Lets-Plot project.

Using as Dependency

The following is how you configure a Gradle project with Kotlin DSL.

JVM-Swing-Batik

plugins {
    kotlin("jvm")
}

dependencies {
    // Lets-Plot Kotlin API 
    implementation("org.jetbrains.lets-plot:lets-plot-kotlin-jvm:4.7.2")
    // Lets-Plot Multiplatform (Batik rendering)
    implementation("org.jetbrains.lets-plot:lets-plot-batik:4.3.2")
}

JVM-JavaFX (+Swing)

In this configuration, the plot is always rendered to JavaFX scene inside a JFXPanel,
but then there are two options to embed the plot into your application:

  • In a Java Swing application you can embed the plot's JFXPanel directly into a Swing container.
  • In a JavaFX application you can embed the plot's JFXPanel into a JavaFX SwingNode and then embed the SwingNode into a JavaFX container.

The dependencies are the same in both cases.

plugins {
    kotlin("jvm")
}

    ...

dependencies {
    // Lets-Plot Kotlin API 
    implementation("org.jetbrains.lets-plot:lets-plot-kotlin-jvm:4.7.2")
    // Lets-Plot Multiplatform (JFX Scene rendering)
    implementation("org.jetbrains.lets-plot:lets-plot-jfx:4.3.2")
}

Kotlin/JS

plugins {
    kotlin("multiplatform")
}

kotlin {
    ...
    sourceSets {
        named("jsMain") {
            dependencies {
                // Lets-Plot Kotlin API 
                implementation("org.jetbrains.lets-plot:lets-plot-kotlin-js:4.7.2")
            }
        }
    }
}

Examples

See Lets-Plot Kotlin Mini Apps (Demos) GitHub repository:

Showing Plots (JVM)

  1. Create a figure object using the Lets-Plot Kotlin API
val figure = letsPlot(data) + geomDensity(
                                    color = "dark-green",
                                    fill = "green",
                                    alpha = .3,
                                    size = 2.0) { x = "x" }
  1. Convert the figure object to a map of plot specification parameters:
val rawSpec = figure.toSpec()
val processedSpec = MonolithicCommon.processRawSpecs(rawSpec, frontendOnly = false)
  1. Create the plot Swing panel using one of the provided classes: DefaultPlotPanelBatik or DefaultPlotPanelJfx.
val panel: JPanel = DefaultPlotPanelBatik(
    processedSpec = processedSpec,
    preserveAspectRatio = preserveAspectRadio,
    preferredSizeFromPlot = false,
    repaintDelay = 10,
) { messages ->
    for (message in messages) {
      println("[Example App] $message")
    }
}

Showing Plots (Kotlin/JS)

  1. Create a figure object using the Lets-Plot Kotlin API
val figure = letsPlot(data) + geomDensity(
                                    color = "dark-green",
                                    fill = "green",
                                    alpha = .3,
                                    size = 2.0) { x = "x" }
  1. Convert the figure object to a map of plot specification parameters:
val rawSpec = figure.toSpec()

  1. Generate HTML code

    a) A code which you can embed in your HTML document, providing the Lets-Plot JS library is already loaded statically via a <script> tag in the document's <head> section.

    val html: String = PlotHtmlHelper.getStaticDisplayHtmlForRawSpec(rawSpec)

    b) An iframe code which includes everything needed to render the plot.

    val html: String = PlotHtmlExport.buildHtmlFromRawSpecs(
                                    plotSpec = rawSpec,
                                    scriptUrl = PlotHtmlHelper.scriptUrl(version="4.3.2"),
                                    iFrame = true    
                                )

  2. Embed the generated HTML code in your document.

    This is the tricky part because you have to make sure that the JavaScript included in the generated HTML code is not just added to DOM but also is executed by the browser.

    For example, see: JsFrontendUtil.createPlotDiv(figure).

Note: In case you are using Android WebView to display the plot:

  • enable JavaScript: webView.settings.javaScriptEnabled = true
  • grant the internet access permission (AndroidManifest.xml): <uses-permission android:name="android.permission.INTERNET" />

License

Code and documentation released under the MIT license. Copyright © 2019-2024, JetBrains s.r.o.