From aa6eeb18763c47bfa12987055b2e191a0952c3ab Mon Sep 17 00:00:00 2001 From: efim Date: Thu, 8 Jun 2023 18:56:46 +0000 Subject: [PATCH] not working attempt --- package-lock.json | 72 +++------------ package.json | 3 +- .../sunshine/chartexample/App.scala | 87 +++++++++++-------- 3 files changed, 63 insertions(+), 99 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7742743..7be335e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index cbaca97..f006838 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/src/main/scala/industries/sunshine/chartexample/App.scala b/src/main/scala/industries/sunshine/chartexample/App.scala index ce3e981..f7213a9 100644 --- a/src/main/scala/industries/sunshine/chartexample/App.scala +++ b/src/main/scala/industries/sunshine/chartexample/App.scala @@ -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 + // } + // }) + // } + // } + // } + // } + }