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]

#2661 Bundle Size — 10.19MiB (+0.13%).

a27ae0b(current) vs e83d529 master#2649(baseline)

Warning

Bundle contains 3 duplicate packages – View duplicate packages

Bundle metrics   3 changes 1 regression

	Current #2661	Baseline #2649
Initial JS	5.5MiB(+0.25%)	5.49MiB
Initial CSS	303.12KiB	303.12KiB
Cache Invalidation	53.79%	53.79%
Chunks	51	51
Assets	171	171
Modules	1491(+0.07%)	1490
Duplicate Modules	21	21
Duplicate Code	0.81%(-1.22%)	0.82%
Packages	124	124
Duplicate Packages	3	3

Bundle size by type   1 change 1 regression

	Current #2661	Baseline #2649
JS	7.28MiB (+0.19%)	7.27MiB
IMG	2.48MiB	2.48MiB
CSS	319.91KiB	319.91KiB
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

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.41%. Comparing base (e83d529) to head (a27ae0b).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2094   +/-   ##
=======================================
  Coverage   98.41%   98.41%           
=======================================
  Files         865      865           
  Lines       14169    14169           
=======================================
  Hits        13945    13945           
  Misses        224      224           

☔ 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: