Compare commits
No commits in common. "master" and "main" have entirely different histories.
|
|
@ -1,33 +0,0 @@
|
||||||
# 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
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
version = "3.7.3"
|
|
||||||
runner.dialect = scala3
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
# trying-scalajs-interop-w-libraries
|
||||||
|
|
||||||
|
trying ScalaJS interop with libraries
|
||||||
34
build.sbt
34
build.sbt
|
|
@ -1,34 +0,0 @@
|
||||||
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",
|
|
||||||
)
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
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)
|
|
||||||
}
|
|
||||||
13
index.html
13
index.html
|
|
@ -1,13 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 995 B |
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
|
|
@ -1,22 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
sbt.version=1.8.3
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.1")
|
|
||||||
addSbtPlugin("org.scalablytyped.converter" % "sbt-converter" % "1.0.0-beta41")
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,109 +0,0 @@
|
||||||
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
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
|
|
||||||
/* div { */
|
|
||||||
/* outline: 1px solid red; */
|
|
||||||
/* } */
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
export default {
|
|
||||||
content: [
|
|
||||||
"./index.html",
|
|
||||||
"./src/**/*.scala",
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
import { defineConfig } from "vite";
|
|
||||||
import scalaJSPlugin from "@scala-js/vite-plugin-scalajs";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
publicDir: 'public',
|
|
||||||
plugins: [scalaJSPlugin()],
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue