Exercise 8: Chart is not displayed

[M5W6]

Hi Andreas,
thank you very much for this excellent tutorial. I've learned a lot in it and code completion for UI5 in Visual Studio Code is a great help. In particular I appreciate the precise explanations and the background given. However I do not believe that anyone can do the tutorial in 1-2- hours, besides perhaps an android.

I found one thing ...
After I completed exercise 8, the chart was not displayed for me. The reason was that the line import { chart } from "chart.js"; in the file src/control/LineChart.ts needs to be changed, e.g. into import chart from 'chart.js/auto'; according to https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc .

Better is

// See https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc
// import Chart from 'chart.js/auto';
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

The problem occurs for "ui5-tooling-modules": "^0.3.0", but not for "ui5-tooling-modules": "^0.1.3"

Kind regards,
Martin
: )

[Andreas Kunz]

Hi Martin,
glad you like the tutorial!

Of course time to completion may vary, e.g. depending on how much time one invests to really understand what is going on, as opposed to just blindly copy&pasting the code snippets. In an internal event, 2 hours were sufficient for doing 8 of the 9 exercises in a mode where first the steps were shown and explained by an instructor and then repeated by the audience. This led us to think without repeating everything twice, the time needed might be lower than 2 hours, but we can write something like 1.5-2.5 h to give a more realistic estimate.

Thanks for the issue report! It's a bit strange that it depends on the ui5-tooling-modules version, but it's helpful that you found this out. We'll look into this.

Your last proposed solution looks logical, but actually I do get a TS error in the editor, saying that "registerables" is not an exported member of chart.js and that Chart.register does not exist. This might be caused by the version mismatch between chart.js (3.7) and the latest available type definitions for it (2.9), but why is it working for you, then?

Regards
Andreas

[Andreas Kunz]

Ok, that's because chart.js now comes with types, so the old definitions should not even be referenced:
https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L551

[Peter Muessig]

@MartinWegmann @akudev - I'll adopt to the suggestion of using the registerables and remove the d.ts from definitely typed. This should fix the issue in future... BTW: IMO, the issue itself is not related to the ui5-tooling-modules it is most probably just a side effect. I verified it locally and with the updates above also using the lates ui5-tooling-modules it works properly.

Thanks @MartinWegmann