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",
"version": "0.0.0",
"dependencies": {
"chart.js": "^2.9.4"
"chart.js": "^4.3.0"
},
"devDependencies": {
"@scala-js/vite-plugin-scalajs": "^1.0.0",
"@types/chart.js": "^2.9.29",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
@ -438,6 +437,11 @@
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"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": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -482,15 +486,6 @@
"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": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@ -644,29 +639,14 @@
]
},
"node_modules/chart.js": {
"version": "2.9.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz",
"integrity": "sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==",
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.3.0.tgz",
"integrity": "sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==",
"dependencies": {
"chartjs-color": "^2.1.0",
"moment": "^2.10.2"
}
},
"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"
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=7"
}
},
"node_modules/chokidar": {
@ -708,24 +688,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": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@ -1077,14 +1039,6 @@
"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": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",

3
package.json
View File

@ -10,7 +10,6 @@
},
"devDependencies": {
"@scala-js/vite-plugin-scalajs": "^1.0.0",
"@types/chart.js": "^2.9.29",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
@ -18,6 +17,6 @@
"vite": "^4.3.0"
},
"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 = {
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(
className := "border-4 border-purple-500",
@ -38,15 +41,16 @@ object Main {
// on mount, create the `Chart` instance and store it in optChart
mount = { nodeCtx =>
val domCanvas: dom.HTMLCanvasElement = nodeCtx.thisNode.ref
val chart = Chart.apply.newInstance2(domCanvas, chartConfig)
println("on mounting chart")
optChart = Some(chart)
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
// for (chart <- optChart)
// chart.destroy()
// optChart = None
}
),
@ -63,36 +67,43 @@ object Main {
}
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
}
})
}
}
}
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
// }
// })
// }
// }
// }
// }
}