ScalaJs app using ScalablyTyped, Chart.js, Laminar and Scala 3.
This project is inspired by: ScalaJs-Laminar-ChartJS Github
sbt clean compile fastLinkJS produces:
- [2024.4.28] 5 type errors on typings.chartJs.mod.Chart and typings.chartJs.mod.ChartType, which exist!
ScalaJs needs a dedicated typed chart library.
- brew install node
- npm install
- npm install npm-check-updates
See package.json.
To update package.json dependencies.
- ncu
Increase opt/homebrew/etc/.sbtopts memory ( -mem 2048 )
- npm install ( only when package.json changes )
- sbt clean compile fastLinkJS
See target/public directory.
Edits are reflected in both sessions.
- sbt ( new session )
- ~ fastLinkJS
- npm run dev ( new session )
Initially, the Chart.js chart failed to render!
So I opened this issue: Chart Rendering Fails
As a solution, I built registrar.Registrar, allowing for required Chart.js component registration. My hack is based on Nikita Gazarov's work:
See the code:
To accommodate all Chart.js registrable components, registrar.Registrar will require additional work.
Currently, this project supports ChartType.bar, ChartType.line and ChartType.pie.
ScalablyTyped mappings for setting chart x and y axes labels fails with these errors:
- Invalid scale configuration for scale: xAxes
- Invalid scale configuration for scale: yAxes
The ScalablyTyped mapping appears to support Chart.js V2 for xAxes and yAxes, where a js.Array[ChartXAxe] or js.Array[ChartYAxe] is required. Chart.js V3+ require a ChartXAxe or ChartYAxe.
Also Chart.js 4.4.2 breaks typings!
It would appear ScalaJs needs it's own custom chart component.
Using Chart.js V3+ json:
options: {
scales: {
x: {
type: 'time',
display: true,
title: {
display: true,
text: 'Date'
},
ticks: {
major: {
enabled: true
},
}
},
y: {
display: true,
title: {
display: true,
text: 'Value'
}
}
}
}
I attempted to replace the current chart code with this literal code - but the typing won't allow it.
import scala.scalajs.js.Dynamic.literal
val xAxes = literal(
`type` = "time",
display = true,
title = literal(display = true, text = "Time"),
ticks = literal(major = literal(enabled = true))
)
val yAxes = literal
(display = true,
title = literal(display = true, text = "Series")
)
val scales = literal(x = xAxes, y = yAxes)
val options = literal(scales = scales)
The
Invalid scale configuration for scale: xAxes | yAxes
error is thrown in the code below:
function mergeScaleConfig(config, options) {
const chartDefaults = overrides[config.type] || {scales: {}};
const configScales = options.scales || {};
const chartIndexAxis = getIndexAxis(config.type, options);
const scales = Object.create(null);
// First figure out first scale id's per axis.
Object.keys(configScales).forEach(id => {
const scaleConf = configScales[id];
if (!isObject(scaleConf)) {
return console.error(`Invalid scale configuration for scale: ${id}`); // Error occurs here!!!
}
if (scaleConf._proxy) {
return console.warn(`Ignoring resolver passed as options for scale: ${id}`);
}
const axis = determineAxis(id, scaleConf, retrieveAxisFromDatasets(id, config), defaults.scales[scaleConf.type]);
const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis);
const defaultScaleOptions = chartDefaults.scales || {};
scales[id] = mergeIf(Object.create(null), [{axis}, scaleConf, defaultScaleOptions[axis], defaultScaleOptions[defaultId]]);
});
- sbt clean test fullLinkJS
- npm run build
See dist directory.
- sbt clean compile fastLinkJS
- npm run dev