Add binary chart

[Terdious]

Pull Request check-list

To ensure your Pull Request can be accepted as fast as possible, make sure to review and check all of these items:

• If your changes affects code, did your write the tests?
• Are tests passing? (npm test on both front)
• Is the linter passing? (npm run eslint on both front)
• Did you run prettier? (npm run prettier on both front)
• If you are adding a new features/services, did you run integration comparator? (npm run compare-translations on front)
• Did you test this pull request in real life? With real devices? If this development is a big feature or a new service, we recommend that you provide a Docker image to the community (french forum/english forum) for testing before merging.
• If you are adding a new features/services which needs explanation, did you modify the user documentation? See the GitHub repo and the website.
• Did you add fake requests data for the demo mode (front/src/config/demo.js) so that the demo website is working without a backend? (if needed) See https://demo.gladysassistant.com.

NOTE: these things are not required to open a PR and can be done afterwards / while the PR is open.

Description of change

Taken from the original PR: #Binary graph #1948
Thanks to @callemand for all the work done

[relativeci]

#2747 Bundle Size — 10.22MiB (+0.24%).

8e4932a(current) vs b65b18c master#2744(baseline)

Warning

Bundle contains 3 duplicate packages – View duplicate packages

Bundle metrics   5 changes 2 regressions

	Current #2747	Baseline #2744
Initial JS	5.53MiB(+0.44%)	5.5MiB
Initial CSS	304.63KiB(+0.09%)	304.37KiB
Cache Invalidation	56.77%	56.69%
Chunks	51	51
Assets	171	171
Modules	1492(+0.13%)	1490
Duplicate Modules	21	21
Duplicate Code	0.83%(-1.19%)	0.84%
Packages	124	124
Duplicate Packages	3	3

Bundle size by type   2 changes 2 regressions

	Current #2747	Baseline #2744
JS	7.31MiB (+0.33%)	7.29MiB
IMG	2.48MiB	2.48MiB
CSS	321.42KiB (+0.08%)	321.16KiB
Fonts	93.55KiB	93.55KiB
Other	17.62KiB	17.62KiB
HTML	13.58KiB	13.58KiB

Bundle analysis report Branch Terdious:add-binary-chart Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.48%. Comparing base (b65b18c) to head (8e4932a).
Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2094   +/-   ##
=======================================
  Coverage   98.48%   98.48%           
=======================================
  Files         867      867           
  Lines       14182    14187    +5     
=======================================
+ Hits        13967    13972    +5     
  Misses        215      215           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Pierre-Gilles]

I created a device with 2 states in DB: opened at 3:32 in the morning, then closed at 7:32 in the morning :

Then, I open Gladys and create a binary chart for this device :

When I display the dashboard, the UI completely freezes and uses 100% CPU. I'm unable to do anything on the UI.

IMO there is something in the front that loops too much and blocks the JS

[Pierre-Gilles]

Hey @Terdious ! Thanks for the changes :)

I have a few bugs when trying it:

• Text is inside the "bar" :

• I get a freeze when saving the dashboard with a binary chart on a power plug

Here is the error :

The payload :

• If I select a binary device, then unselect it, then select a non-binary device, I get a weird state where the chart type is unknown :

Before:

After :

• When I'm using Gladys in English, the text inside the popup is in french:

• On mobile, the popup is outside of the screen :

Thanks for this PR 🙂

[Terdious]

• Text is inside the "bar" :

I'm sorry but I tried to reproduce and despite zooming in / out changing resolution, etc. I never managed to get your result. On the other hand, before my previous modification I had the same problem, but I corrected it before your review

• I get a freeze when saving the dashboard with a binary chart on a power plug

I added a console.log(deviceFeature); because I can't seem to reproduce. I tested all types of binary, tasmota and mqtt (including a power plug). And I have no problems with the units (everything is 'null'). Could you send me the logs?

• If I select a binary device, then unselect it, then select a non-binary device, I get a weird state where the chart type is unknown

Corrected

• When I'm using Gladys in English, the text inside the popup is in french

Corrected

• On mobile, the popup is outside of the screen

Corrected. Display top left box

[Pierre-Gilles]

@Terdious Thanks for the fixes!

Here is the payload that causes the freeze:

{"id":"e499dd5e-6482-4cbd-a73e-159d53c9b402","name":"Graph","selector":"graph","type":"main","visibility":"private","user_id":"275faa00-8a9c-4747-8fbe-417ddb966b16","created_at":"2024-06-10T08:20:20.784Z","updated_at":"2024-06-17T11:30:17.089Z","boxes":[[{"type":"chart","device_features":["mqtt-priseonoff"],"units":[null],"title":"Binaire","chart_type":"","interval":"last-day","display_axes":true}],[],[]]}

The response is 422 :

{
    "status": 422,
    "code": "UNPROCESSABLE_ENTITY",
    "properties": [
        {
            "message": "\"[0][0].chart_type\" is not allowed to be empty",
            "attribute": "boxes",
            "value": [
                [
                    {
                        "type": "chart",
                        "device_features": [
                            "mqtt-priseonoff"
                        ],
                        "units": [
                            null
                        ],
                        "title": "Binaire",
                        "chart_type": "",
                        "interval": "last-day",
                        "display_axes": true
                    }
                ],
                [],
                []
            ],
            "type": "Validation error"
        }
    ]
}

It's just because I didn't select the "chart type" ^^ It's maybe not related to this PR, but I wonder if we could make a fix to avoid freezing in this situation...

I have another feedback, now the date in english is not correct:

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Pierre-Gilles]

Thanks for the changes! It's great !

I have 2 feedbacks:

I still have the date issue in english:

It seems the Websocket refresh is not working as with the other types of charts?

[Terdious]

Thanks for the changes! It's great !

I have 2 feedbacks:

I still have the date issue in english:

Indeed, I had not retested. It is good for the 3 languages:

It seems the Websocket refresh is not working as with the other types of charts?

If you're talking about the automatic data update, I have no problem on my side, update without page refresh on my sensor every 30s...

[Pierre-Gilles]

Thanks for the changes! Indeed, for the auto refresh it's working on my side too. I think it's because the bar was so small I didn't see it, but in the request tab I can see the auto refresh working :)

[Pierre-Gilles]

Hey! A few feedbacks on the code, nothing serious :)

Otherwise, tested locally and it works great! Great work 👏

[Pierre-Gilles]

Where is this coming from?

ApexChart documentation?

[Terdious]

No, I found this solution on stackoverflow and on apexcharts github

[Pierre-Gilles]

Good for me now! Thanks for all the good work :)