efim
/
trying-scalajs-interop-w-libraries
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

not working attempt

This commit is contained in:
efim 2023-06-08 18:56:46 +00:00
parent cca79c8bce
commit aa6eeb1876
3 changed files with 63 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
package-lock.json generated
View File

@ -8,11 +8,10 @@
"name": "chart-integration-example", "name": "chart-integration-example",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"chart.js": "^2.9.4" "chart.js": "^4.3.0"
}, },
"devDependencies": { "devDependencies": {
"@scala-js/vite-plugin-scalajs": "^1.0.0", "@scala-js/vite-plugin-scalajs": "^1.0.0",
"@types/chart.js": "^2.9.29",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"postcss": "^8.4.23", "postcss": "^8.4.23",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
@ -438,6 +437,11 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true "dev": true
}, },
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -482,15 +486,6 @@
"vite": "^4.1.4" "vite": "^4.1.4"
} }
}, },
"node_modules/@types/chart.js": {
"version": "2.9.29",
"resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.29.tgz",
"integrity": "sha512-WOZMitUU3gHDM0oQsCsVivX+oDsIki93szcTmmUPBm39cCvAELBjokjSDVOoA3xiIEbb+jp17z/3S2tIqruwOQ==",
"dev": true,
"dependencies": {
"moment": "^2.10.2"
}
},
"node_modules/any-promise": { "node_modules/any-promise": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@ -644,29 +639,14 @@
] ]
}, },
"node_modules/chart.js": { "node_modules/chart.js": {
"version": "2.9.4", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==", "integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
"dependencies": { "dependencies": {
"chartjs-color": "^2.1.0", "@kurkle/color": "^0.3.0"
"moment": "^2.10.2" },
} "engines": {
}, "pnpm": ">=7"
"node_modules/chartjs-color": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
"integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
"dependencies": {
"chartjs-color-string": "^0.6.0",
"color-convert": "^1.9.3"
}
},
"node_modules/chartjs-color-string": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
"integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
"dependencies": {
"color-name": "^1.0.0"
} }
}, },
"node_modules/chokidar": { "node_modules/chokidar": {
@ -708,24 +688,6 @@
"node": ">= 6" "node": ">= 6"
} }
}, },
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
"dependencies": {
"color-name": "1.1.3"
}
},
"node_modules/color-convert/node_modules/color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"node_modules/commander": { "node_modules/commander": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -1077,14 +1039,6 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/moment": {
"version": "2.29.4",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
"engines": {
"node": "*"
}
},
"node_modules/mz": { "node_modules/mz": {
"version": "2.7.0", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",

3
package.json
View File

@ -10,7 +10,6 @@
}, },
"devDependencies": { "devDependencies": {
"@scala-js/vite-plugin-scalajs": "^1.0.0", "@scala-js/vite-plugin-scalajs": "^1.0.0",
"@types/chart.js": "^2.9.29",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"postcss": "^8.4.23", "postcss": "^8.4.23",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
@ -18,6 +17,6 @@
"vite": "^4.3.0" "vite": "^4.3.0"
}, },
"dependencies": { "dependencies": {
"chart.js": "^2.9.4" "chart.js": "^4.3.0"
} }
} }

87
src/main/scala/industries/sunshine/chartexample/App.scala
View File

@ -23,9 +23,12 @@ object Main {
def renderDataChart(): Element = { def renderDataChart(): Element = {
import scala.scalajs.js.JSConverters.* import scala.scalajs.js.JSConverters.*
import typings.chartJs.mod.* // import typings.chartJs.mod.*
import typings.chartJs.mod.Chart
var optChart: Option[Chart] = None // var optChart: Option[Chart] = Some(null)
// var optChart: Option[Chart] = None
canvasTag( canvasTag(
className := "border-4 border-purple-500", className := "border-4 border-purple-500",
@ -38,15 +41,16 @@ object Main {
// on mount, create the `Chart` instance and store it in optChart // on mount, create the `Chart` instance and store it in optChart
mount = { nodeCtx => mount = { nodeCtx =>
val domCanvas: dom.HTMLCanvasElement = nodeCtx.thisNode.ref val domCanvas: dom.HTMLCanvasElement = nodeCtx.thisNode.ref
val chart = Chart.apply.newInstance2(domCanvas, chartConfig) val testChart: Chart = Chart(domCanvas, chartConfig)
println("on mounting chart") // val chart = Chart.apply.newInstance2(domCanvas, chartConfig)
optChart = Some(chart) // println("on mounting chart")
// optChart = Some(chart)
}, },
// on unmount, destroy the `Chart` instance // on unmount, destroy the `Chart` instance
unmount = { thisNode => unmount = { thisNode =>
for (chart <- optChart) // for (chart <- optChart)
chart.destroy() // chart.destroy()
optChart = None // optChart = None
} }
), ),
@ -63,36 +67,43 @@ object Main {
} }
val chartConfig = { val chartConfig = {
import typings.chartJs.mod.* import typings.chartJs.mod.ChartConfiguration
new ChartConfiguration { ChartConfiguration(
`type` = ChartType.bar `type` = "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
}
})
}
}
}
} }
// 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
// }
// })
// }
// }
// }
// }
} }