Add web target (#201)

Kanialdo · Feb 10, 2024 · 1a3f2a3 · 1a3f2a3
1 parent b6cfe06
commit 1a3f2a3
Show file tree

Hide file tree

Showing 33 changed files with 3,116 additions and 230 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Compose charts
 
-Kotlin module for drawing charts in android and desktop applications. Based on [compose-jb](https://github.com/JetBrains/compose-jb/). 
+Kotlin module for drawing charts in android, desktop and js applications. Based on [compose-multiplatform](https://github.com/JetBrains/compose-jb/). 
 
 Compose-charts is developed on the occasion of other projects. For now library supports bar, line, point and circular charts.
 
@@ -16,6 +16,7 @@ Current api and package design is not yet finalized. Main goal is to provide bun
 * **demo-shared** shared demo code.
 * **demo-android** android demo target.
 * **demo-desktop** desktop demo target.
+* **demo-web** js demo target.
 
 🖥️ Call `gradle demo-desktop:run` to launch desktop Demo catalog
 

diff --git a/demo-shared/build.gradle.kts b/demo-shared/build.gradle.kts
@@ -7,12 +7,17 @@ plugins {
 kotlin {
     android()
     jvm("desktop")
+    js {
+        browser()
+        binaries.executable()
+    }
 
     @Suppress("UnusedPrivateMember")
     sourceSets {
         val commonMain by getting {
             dependencies {
                 api(projects.lib)
+                api(libs.kotlinx.datetime)
             }
         }
         val commonTest by getting {

diff --git a/demo-shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/Platform.kt b/demo-shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/Platform.kt
@@ -3,6 +3,7 @@ package pl.krystiankaniowski.composecharts
 enum class Platform {
     Android,
     Desktop,
+    Web,
 }
 
 expect val platform: Platform
diff --git a/...-shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/components/Components.kt b/...-shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/components/Components.kt
@@ -5,11 +5,12 @@ import androidx.compose.material.Icon
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.*
 import androidx.compose.runtime.Composable
+import kotlinx.datetime.Clock
 import kotlin.random.Random
 
 @Composable
 fun OptionRandomize(onClick: (Random) -> Unit) {
-    val random = Random(System.currentTimeMillis())
+    val random = Random(Clock.System.now().toEpochMilliseconds())
     Button(
         onClick = { onClick(random) },
         // content = { Text("Randomize") },
@@ -19,7 +20,7 @@ fun OptionRandomize(onClick: (Random) -> Unit) {
 
 @Composable
 fun OptionAddData(onClick: (Random) -> Unit) {
-    val random = Random(System.currentTimeMillis())
+    val random = Random(Clock.System.now().toEpochMilliseconds())
     Button(
         onClick = { onClick(random) },
         // content = { Text("Add data") },
@@ -38,7 +39,7 @@ fun OptionRemoveData(onClick: () -> Unit) {
 
 @Composable
 fun OptionAddDataSet(onClick: (Random) -> Unit) {
-    val random = Random(System.currentTimeMillis())
+    val random = Random(Clock.System.now().toEpochMilliseconds())
     Button(
         onClick = { onClick(random) },
         // content = { Text("Add data set") },

diff --git a/...hared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/AreaChartDemoView.kt b/...hared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/AreaChartDemoView.kt
@@ -1,19 +1,12 @@
 package pl.krystiankaniowski.composecharts.views
 
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import kotlinx.datetime.Clock
 import pl.krystiankaniowski.composecharts.ChartScreen
 import pl.krystiankaniowski.composecharts.area.AreaChart
 import pl.krystiankaniowski.composecharts.autoColor
-import pl.krystiankaniowski.composecharts.components.OptionAddData
-import pl.krystiankaniowski.composecharts.components.OptionAddDataSet
-import pl.krystiankaniowski.composecharts.components.OptionRandomize
-import pl.krystiankaniowski.composecharts.components.OptionRemoveData
-import pl.krystiankaniowski.composecharts.components.OptionRemoveDataSet
+import pl.krystiankaniowski.composecharts.components.*
 import pl.krystiankaniowski.composecharts.utils.generateList
 import pl.krystiankaniowski.composecharts.utils.randomize
 import kotlin.random.Random
@@ -47,7 +40,7 @@ fun AreaProportionalChartDemo() {
 private fun AreaRawChartDemo(title: String, mode: AreaChart.Style) {
 
     var data by remember {
-        val random = Random(System.currentTimeMillis())
+        val random = Random(Clock.System.now().toEpochMilliseconds())
         val size = 5
         mutableStateOf(
             AreaChart.Data(

diff --git a/...shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/BarChartDemoView.kt b/...shared/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/BarChartDemoView.kt
@@ -1,19 +1,12 @@
 package pl.krystiankaniowski.composecharts.views
 
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import kotlinx.datetime.Clock
 import pl.krystiankaniowski.composecharts.ChartScreen
 import pl.krystiankaniowski.composecharts.autoColor
 import pl.krystiankaniowski.composecharts.bar.BarChart
-import pl.krystiankaniowski.composecharts.components.OptionAddData
-import pl.krystiankaniowski.composecharts.components.OptionAddDataSet
-import pl.krystiankaniowski.composecharts.components.OptionRandomize
-import pl.krystiankaniowski.composecharts.components.OptionRemoveData
-import pl.krystiankaniowski.composecharts.components.OptionRemoveDataSet
+import pl.krystiankaniowski.composecharts.components.*
 import pl.krystiankaniowski.composecharts.utils.generateList
 import pl.krystiankaniowski.composecharts.utils.randomize
 import kotlin.random.Random
@@ -47,7 +40,7 @@ fun BarProportionalChartDemo() {
 private fun BarRawChartDemo(title: String, style: BarChart.Style) {
 
     var data by remember {
-        val random = Random(System.currentTimeMillis())
+        val random = Random(Clock.System.now().toEpochMilliseconds())
         val size = 5
         mutableStateOf(
             BarChart.Data(

diff --git a/...red/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/ColumnChartDemoView.kt b/...red/src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/ColumnChartDemoView.kt
@@ -1,19 +1,12 @@
 package pl.krystiankaniowski.composecharts.views
 
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import kotlinx.datetime.Clock
 import pl.krystiankaniowski.composecharts.ChartScreen
 import pl.krystiankaniowski.composecharts.autoColor
 import pl.krystiankaniowski.composecharts.column.ColumnChart
-import pl.krystiankaniowski.composecharts.components.OptionAddData
-import pl.krystiankaniowski.composecharts.components.OptionAddDataSet
-import pl.krystiankaniowski.composecharts.components.OptionRandomize
-import pl.krystiankaniowski.composecharts.components.OptionRemoveData
-import pl.krystiankaniowski.composecharts.components.OptionRemoveDataSet
+import pl.krystiankaniowski.composecharts.components.*
 import pl.krystiankaniowski.composecharts.utils.generateList
 import pl.krystiankaniowski.composecharts.utils.randomize
 import kotlin.random.Random
@@ -47,7 +40,7 @@ fun ColumnProportionalChartDemo() {
 private fun ColumnRawChartDemo(title: String, style: ColumnChart.Style) {
 
     var data by remember {
-        val random = Random(System.currentTimeMillis())
+        val random = Random(Clock.System.now().toEpochMilliseconds())
         val size = 5
         mutableStateOf(
             ColumnChart.Data(

diff --git a/...commonMain/kotlin/pl/krystiankaniowski/composecharts/views/circular/RadarChartDemoView.kt b/...commonMain/kotlin/pl/krystiankaniowski/composecharts/views/circular/RadarChartDemoView.kt
@@ -1,27 +1,20 @@
 package pl.krystiankaniowski.composecharts.views.circular
 
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import kotlinx.datetime.Clock
 import pl.krystiankaniowski.composecharts.ChartScreen
 import pl.krystiankaniowski.composecharts.autoColor
 import pl.krystiankaniowski.composecharts.circular.RadarChart
-import pl.krystiankaniowski.composecharts.components.OptionAddData
-import pl.krystiankaniowski.composecharts.components.OptionAddDataSet
-import pl.krystiankaniowski.composecharts.components.OptionRandomize
-import pl.krystiankaniowski.composecharts.components.OptionRemoveData
-import pl.krystiankaniowski.composecharts.components.OptionRemoveDataSet
+import pl.krystiankaniowski.composecharts.components.*
 import kotlin.random.Random
 
 @Suppress("MagicNumber", "LongMethod")
 @Composable
 fun RadarChartDemo() {
 
     var data by remember {
-        val random = Random(System.currentTimeMillis())
+        val random = Random(Clock.System.now().toEpochMilliseconds())
         val size = 5
         mutableStateOf(
             RadarChart.Data(

diff --git a/.../src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/line/LineChartDemoView.kt b/.../src/commonMain/kotlin/pl/krystiankaniowski/composecharts/views/line/LineChartDemoView.kt
@@ -1,18 +1,11 @@
 package pl.krystiankaniowski.composecharts.views.line
 
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
+import kotlinx.datetime.Clock
 import pl.krystiankaniowski.composecharts.ChartScreen
 import pl.krystiankaniowski.composecharts.autoColor
-import pl.krystiankaniowski.composecharts.components.OptionAddData
-import pl.krystiankaniowski.composecharts.components.OptionAddDataSet
-import pl.krystiankaniowski.composecharts.components.OptionRandomize
-import pl.krystiankaniowski.composecharts.components.OptionRemoveData
-import pl.krystiankaniowski.composecharts.components.OptionRemoveDataSet
+import pl.krystiankaniowski.composecharts.components.*
 import pl.krystiankaniowski.composecharts.line.LineChart
 import pl.krystiankaniowski.composecharts.utils.generateList
 import pl.krystiankaniowski.composecharts.utils.randomize
@@ -23,7 +16,7 @@ import kotlin.random.Random
 fun LineChartDemo() {
 
     var data by remember {
-        val random = Random(System.currentTimeMillis())
+        val random = Random(Clock.System.now().toEpochMilliseconds())
         val size = 5
         mutableStateOf(
             LineChart.Data(

diff --git a/demo-shared/src/jsMain/kotlin/pl/krystiankaniowski/composecharts/Platform.kt b/demo-shared/src/jsMain/kotlin/pl/krystiankaniowski/composecharts/Platform.kt
@@ -0,0 +1,3 @@
+package pl.krystiankaniowski.composecharts
+
+actual val platform: Platform = Platform.Web
diff --git a/demo-web/build.gradle.kts b/demo-web/build.gradle.kts
@@ -0,0 +1,38 @@
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+
+plugins {
+    alias(libs.plugins.kotlin.multiplatform)
+    alias(libs.plugins.compose)
+}
+
+kotlin {
+    @OptIn(ExperimentalKotlinGradlePluginApi::class)
+    targetHierarchy.default()
+
+    jvmToolchain(17)
+
+    js {
+        moduleName = "app"
+        binaries.executable()
+        browser {
+            useCommonJs()
+            commonWebpackConfig {
+                outputFileName = "$moduleName.js"
+            }
+        }
+    }
+
+    @Suppress("UnusedPrivateProperty")
+    sourceSets {
+        val commonMain by getting {
+            dependencies {
+                implementation(projects.demoShared)
+                implementation(projects.lib)
+            }
+        }
+    }
+}
+
+compose.experimental {
+    web.application {}
+}
diff --git a/demo-web/src/jsMain/kotlin/pl/krystiankaniowski/composecharts/demo/Main.kt b/demo-web/src/jsMain/kotlin/pl/krystiankaniowski/composecharts/demo/Main.kt
@@ -0,0 +1,19 @@
+package pl.krystiankaniowski.composecharts.demo
+
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.CanvasBasedWindow
+import org.jetbrains.skiko.wasm.onWasmReady
+import pl.krystiankaniowski.composecharts.DemoApplication
+import pl.krystiankaniowski.composecharts.DemoTheme
+
+fun main() {
+
+    onWasmReady {
+        @OptIn(ExperimentalComposeUiApi::class)
+        CanvasBasedWindow(
+            title = "Compose charts Demo",
+            canvasElementId = "ComposeTarget",
+            content = { DemoTheme { DemoApplication() } },
+        )
+    }
+}
diff --git a/demo-web/src/jsMain/resources/index.html b/demo-web/src/jsMain/resources/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <script src="skiko.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Charts</title>
+</head>
+<body>
+<canvas id="ComposeTarget" width="1" height="1"></canvas>
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/gradle.properties b/gradle.properties
@@ -7,3 +7,5 @@ android.defaults.buildfeatures.aidl=false
 android.defaults.buildfeatures.renderscript=false
 android.defaults.buildfeatures.resvalues=false
 android.defaults.buildfeatures.shaders=false
+
+org.jetbrains.compose.experimental.jscanvas.enabled=true
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -11,6 +11,7 @@ kotlin = "1.9.22"
 androidx-activityCompose = { module = "androidx.activity:activity-compose", version = "1.8.2" }
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version = "1.6.1" }
 detekt-plugins-formatting = { module = "io.gitlab.arturbosch.detekt:detekt-formatting", version.ref = "detekt" }
+kotlinx-datetime = { group = "org.jetbrains.kotlinx", name = "kotlinx-datetime", version = "0.5.0" }
 
 [plugins]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		package pl.krystiankaniowski.composecharts

		actual val platform: Platform = Platform.Web