manthar
Posts: 13
Joined: Fri Apr 02, 2021 11:58 pm

Highcharts Dashboards Angular example is not working as expected in edit mode

Hello,

I understand that this topic should be under Highcharts Dashboards, however I am unable to post a new topic there.

I'm investigating Highcharts Dashboards as a potential integration option into our application. We are using Angular v15 for our front end. reading through the Dashboards documentation on Highcharts Dashboards with Angular I found the live example.

While using the live example in stackblitz, I find that if I click on the hamburger in the upper right hand corner and enter "Edit Mode" I'm presented with a button to "+ Add component". My expectation when clicking this is that a new component will appear in the group of components already present but nothing happens. Additionally, it seems that the "Edit Mode" toggle will stop working if I attempt to add a new component and I need to reload the page to interact with the toggle again, which makes me think this is a bug.

I have found that if I delete all components while in "Edit Mode" and attempt to add a component using the + Add component button, I am able to do so, but just one component. If I attempt to add a second, the previous behavior reemerges.

I believe this should be reproducible using the live example. I am also able to reproduce this same behavior when attempting to add Highcharts Dashboards to our own application.

If there is a problem with how the live angular example is being implemented please let me know the specific problem and remedy so that I can attempt using a suggested best practice.

If this is a regression, please let me know if there's a version of the @highcharts/dashboards npm package that works as expected.

I also understand that Highcharts Dashboards troubleshooting help may only be available to those who have purchased a licence. We are excited about potentially integrating this new Highcharts Dashboards feature into our application and would, of course, buy the necessary licences to do so if it looks like a good fit for our use case. As such we would greatly appreciate any troubleshooting help you could offer while we are investigating Highcharts Dashboards as a potential integration.

Thanks
manthar
Posts: 13
Joined: Fri Apr 02, 2021 11:58 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Update: I see now that this was user error and that I need to "drag and drop" specific components from the side bar rather than clicking them. I think my confusion was partly related to the fact that the first component could be added on click and my expectation was that subsequent components could be added that way as well.
User avatar
dawid.d
Site Moderator
Posts: 949
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello,

We are very glad that you like our product and thank you very much for this inquiry!

Yes, to add a component to the board, you need to drag it. Still, this is a very valuable point, as it may indeed be unintuitive at first glance. We will take this into account in the development process, such feedback is very helpful!

I've forwarded this topic to the Product Owner of the Dashboards product. If you would like to ask for details, let us know and if you want, we will try to organize something. Also, don't hesitate to contact us with any other questions.

Best regards!
Dawid Draguła
Highcharts Developer
User avatar
dawid.d
Site Moderator
Posts: 949
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

manthar wrote: We are excited about potentially integrating this new Highcharts Dashboards feature into our application and would, of course, buy the necessary licences to do so if it looks like a good fit for our use case. As such we would greatly appreciate any troubleshooting help you could offer while we are investigating Highcharts Dashboards as a potential integration.
Would you be available for a 30-minute chat with the product team to discuss your needs so we can learn more about what you would look for in a dashboards framework? If so, please send this to the support email so we can organize a call ([email protected]).
Dawid Draguła
Highcharts Developer
manthar
Posts: 13
Joined: Fri Apr 02, 2021 11:58 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Thank you so much for the quick reply. At this point in time it makes more sense for us to develop using the standard Highcharts library. We will definitely keep Highcharts Dashboards in mind for the future and get in contact with any questions then. Thank you again for your offer to meet with the product team and for the work you put into Highcharts.

Kind regards.
valerio.dd
Posts: 4
Joined: Tue May 14, 2024 12:16 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello,

I'm experiencing a fairly similar problem. Due to some requirements my team has for a project, I'm playing around with Highcharts Dashboard.

One must-have feature for us is to be able to dynamically customize the dashboard by adding, removing or modifying the charts/components. Unfortunately the "Add component" features apparently does not work properly, I'm not sure if I am missing something of if the feature is actually a big buggy.

I tried it both on the app we are working on and on the JFiddle example provided by the highcharts documentation (https://www.highcharts.com/docs/dashboards/edit-mode -> "Edit mode live example") and both time I got the same error (https://i.sstatic.net/EDy0sVuZ.png). This happens both on Chrome and Firefox developer edition.

What I've done (aka, how to try to reproduce it): I clicked on the hamburger on top right corner, switched on the edit mode, clicked "Add component" and tried to do a drag and drop of an highchart item from the sidebar into the dashboard.
I expected the new chart to be added in the dashboard, but instead the sidebar closed with no changes in the dashboard. In the browser console I saw the above mentioned error about the "getType" of the undefined "t" object.

Does anyone already experienced something similar or have some suggestions about this issue?

Thanks!
User avatar
dawid.d
Site Moderator
Posts: 949
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello,

Can you reproduce your problem? I think everything works OK on my side. See the demo below.

Demo https://stackblitz.com/edit/stackblitz- ... mponent.ts

Best regards!
Dawid Draguła
Highcharts Developer
valerio.dd
Posts: 4
Joined: Tue May 14, 2024 12:16 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello, thanks for the answer.

Here a couple of recordings I just made of the problem I am experiencing, I am currently using firefox developer edition

Unfortunately the page you linked on my side has some problems so I cannot really test the feature (it is rendered in a weird way and the edit mode sidebar just does not shows up)

Image screenshot
User avatar
dawid.d
Site Moderator
Posts: 949
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello,

I'm sorry for late reply. I debugged it in Firefox and it is indeed a browser that has a problem with drag&drop. I reported it as a bug, I think it is serious enough that you can expect a fix in the near future. You can find it here: https://github.com/highcharts/highcharts/issues/21189

Once we identify it, I will also post a workaround so you can obey this problem before the next release in which the bugfix will be included.

In browsers based on Chromium, drag & drop works correctly.

Best regards!
Dawid Draguła
Highcharts Developer
valerio.dd
Posts: 4
Joined: Tue May 14, 2024 12:16 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello Dawid,

thanks for your kind answer and commitment. Cool to know that you identified this behavior as a bug and are going to address it. May I ask you already some glimpse about the forecasted time for a solution /workaround to be released?

Otherwise if your dev team haven't started diving on it yet, would also be fine if you just keep me updated about the situation in the next time. I will keep this thread checked in case :)

Also, I checked the drag and drop on edge, brave and chrome and I confirm that it works as expected.

Thanks & cheers! :)
User avatar
dawid.d
Site Moderator
Posts: 949
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hi,

We have prioritized this task, it will probably appear in a patch version in the next week or two weeks. We'll start working on it next week, so as soon as I have a solution and it's technically possible, I'll send you a workaround so you don't have to wait for the release.

Best regards!
Dawid Draguła
Highcharts Developer
valerio.dd
Posts: 4
Joined: Tue May 14, 2024 12:16 pm

Re: Highcharts Dashboards Angular example is not working as expected in edit mode

Hello there,

ok sounds cool :) thanks for it!

Return to “Highcharts Dashboards”