Compare commits
No commits in common. "main" and "master" have entirely different histories.
|
|
@ -0,0 +1,33 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
/.bsp/
|
||||||
|
/target/
|
||||||
|
/project/project/
|
||||||
|
/project/target/
|
||||||
|
/.bloop/
|
||||||
|
/.metals/
|
||||||
|
/project/.bloop/
|
||||||
|
/project/metals.sbt
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
version = "3.7.3"
|
||||||
|
runner.dialect = scala3
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
# trying-scalajs-interop-w-libraries
|
|
||||||
|
|
||||||
trying ScalaJS interop with libraries
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
import org.scalajs.linker.interface.ModuleSplitStyle
|
||||||
|
|
||||||
|
lazy val chartExample = project.in(file("."))
|
||||||
|
.enablePlugins(ScalaJSPlugin) // Enable the Scala.js plugin in this project
|
||||||
|
.enablePlugins(ScalablyTypedConverterExternalNpmPlugin)
|
||||||
|
.settings(
|
||||||
|
scalaVersion := "3.3.0",
|
||||||
|
|
||||||
|
// Tell Scala.js that this is an application with a main method
|
||||||
|
scalaJSUseMainModuleInitializer := true,
|
||||||
|
|
||||||
|
/* Configure Scala.js to emit modules in the optimal way to
|
||||||
|
* connect to Vite's incremental reload.
|
||||||
|
* - emit ECMAScript modules
|
||||||
|
* - emit as many small modules as possible for classes in the "livechart" package
|
||||||
|
* - emit as few (large) modules as possible for all other classes
|
||||||
|
* (in particular, for the standard library)
|
||||||
|
*/
|
||||||
|
scalaJSLinkerConfig ~= {
|
||||||
|
_.withModuleKind(ModuleKind.ESModule)
|
||||||
|
.withModuleSplitStyle(
|
||||||
|
ModuleSplitStyle.SmallModulesFor(List("livechart")))
|
||||||
|
},
|
||||||
|
externalNpm := baseDirectory.value,
|
||||||
|
/* Depend on the scalajs-dom library.
|
||||||
|
* It provides static types for the browser DOM APIs.
|
||||||
|
*/
|
||||||
|
libraryDependencies += "org.scala-js" %%% "scalajs-dom" % "2.4.0",
|
||||||
|
// https://laminar.dev/documentation
|
||||||
|
libraryDependencies += "com.raquo" %%% "laminar" % "15.0.1",
|
||||||
|
// check out extras in laminext : fetch \ ws \ sources & signals
|
||||||
|
// https://laminext.dev/v/0.15.x/
|
||||||
|
libraryDependencies += "io.laminext" %%% "fetch" % "0.15.0",
|
||||||
|
)
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export function setupCounter(element) {
|
||||||
|
let counter = 0
|
||||||
|
const setCounter = (count) => {
|
||||||
|
counter = count
|
||||||
|
element.innerHTML = `count is ${counter}`
|
||||||
|
}
|
||||||
|
element.addEventListener('click', () => setCounter(counter + 1))
|
||||||
|
setCounter(0)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"name": "chart-integration-example",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@scala-js/vite-plugin-scalajs": "^1.0.0",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"postcss": "^8.4.23",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"typescript": "^5.1.3",
|
||||||
|
"vite": "^4.3.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"chart.js": "^4.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
sbt.version=1.8.3
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.1")
|
||||||
|
addSbtPlugin("org.scalablytyped.converter" % "sbt-converter" % "1.0.0-beta41")
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,109 @@
|
||||||
|
package industries.sunshine.chartexample
|
||||||
|
|
||||||
|
import scala.scalajs.js
|
||||||
|
import scala.scalajs.js.annotation.*
|
||||||
|
|
||||||
|
import org.scalajs.dom
|
||||||
|
|
||||||
|
import com.raquo.laminar.api.L.{*, given}
|
||||||
|
|
||||||
|
@main
|
||||||
|
def App(): Unit =
|
||||||
|
renderOnDomContentLoaded(
|
||||||
|
dom.document.getElementById("app"),
|
||||||
|
Main.appElement()
|
||||||
|
)
|
||||||
|
|
||||||
|
object Main {
|
||||||
|
def appElement(): Element =
|
||||||
|
div(
|
||||||
|
className := "w-screen h-screen bg-green-100",
|
||||||
|
renderDataChart(),
|
||||||
|
)
|
||||||
|
|
||||||
|
def renderDataChart(): Element = {
|
||||||
|
import scala.scalajs.js.JSConverters.*
|
||||||
|
// import typings.chartJs.mod.*
|
||||||
|
import typings.chartJs.mod.Chart
|
||||||
|
|
||||||
|
// var optChart: Option[Chart] = Some(null)
|
||||||
|
|
||||||
|
// var optChart: Option[Chart] = None
|
||||||
|
|
||||||
|
canvasTag(
|
||||||
|
className := "border-4 border-purple-500",
|
||||||
|
// Regular properties of the canvas
|
||||||
|
width := "100%",
|
||||||
|
height := "200px",
|
||||||
|
|
||||||
|
// onMountUnmount callback to bridge the Laminar world and the Chart.js world
|
||||||
|
onMountUnmountCallback(
|
||||||
|
// on mount, create the `Chart` instance and store it in optChart
|
||||||
|
mount = { nodeCtx =>
|
||||||
|
val domCanvas: dom.HTMLCanvasElement = nodeCtx.thisNode.ref
|
||||||
|
val testChart: Chart = Chart(domCanvas, chartConfig)
|
||||||
|
// val chart = Chart.apply.newInstance2(domCanvas, chartConfig)
|
||||||
|
// println("on mounting chart")
|
||||||
|
// optChart = Some(chart)
|
||||||
|
},
|
||||||
|
// on unmount, destroy the `Chart` instance
|
||||||
|
unmount = { thisNode =>
|
||||||
|
// for (chart <- optChart)
|
||||||
|
// chart.destroy()
|
||||||
|
// optChart = None
|
||||||
|
}
|
||||||
|
),
|
||||||
|
|
||||||
|
// Bridge the FRP world of dataSignal to the imperative world of the `chart.data`
|
||||||
|
// dataSignal --> { data =>
|
||||||
|
// for (chart <- optChart) {
|
||||||
|
// chart.data.labels = data.map(_.label).toJSArray
|
||||||
|
// chart.data.datasets.get(0).data = data.map(_.price).toJSArray
|
||||||
|
// chart.data.datasets.get(1).data = data.map(_.fullPrice).toJSArray
|
||||||
|
// chart.update()
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
val chartConfig = {
|
||||||
|
import typings.chartJs.mod.ChartConfiguration
|
||||||
|
ChartConfiguration(
|
||||||
|
`type` = "bar"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// val chartConfig = {
|
||||||
|
// import typings.chartJs.mod.*
|
||||||
|
// new ChartConfiguration {
|
||||||
|
// `type` = ChartType.bar
|
||||||
|
// data = new ChartData {
|
||||||
|
// labels = js.Array("one", "two", "al", "la", "yo")
|
||||||
|
// datasets = js.Array(
|
||||||
|
// new ChartDataSets {
|
||||||
|
// label = "Price"
|
||||||
|
// borderWidth = 1
|
||||||
|
// backgroundColor = "green"
|
||||||
|
// data = js.Array(1,2,3,4,5)
|
||||||
|
// },
|
||||||
|
// new ChartDataSets {
|
||||||
|
// label = "Full price"
|
||||||
|
// borderWidth = 1
|
||||||
|
// backgroundColor = "blue"
|
||||||
|
// data = js.Array(5,5,5,5,5)
|
||||||
|
// }
|
||||||
|
// )
|
||||||
|
// }
|
||||||
|
// options = new ChartOptions {
|
||||||
|
// scales = new ChartScales {
|
||||||
|
// yAxes = js.Array(new CommonAxe {
|
||||||
|
// ticks = new TickOptions {
|
||||||
|
// beginAtZero = true
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
|
||||||
|
/* div { */
|
||||||
|
/* outline: 1px solid red; */
|
||||||
|
/* } */
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.scala",
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import scalaJSPlugin from "@scala-js/vite-plugin-scalajs";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
publicDir: 'public',
|
||||||
|
plugins: [scalaJSPlugin()],
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue