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:

• [x] If your changes affects code, did your write the tests?
• [ ] Are tests passing? (npm test on both front)
• [x] Is the linter passing? (npm run eslint on both front)
• [x] Did you run prettier? (npm run prettier on both front)
• [x] 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[bot]]

#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](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn?utm_source=github&utm_medium=pr-report "View bundle analysis report") |      Baseline
[#2649](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2649-7NuzpnuSq3dwLB70Mkt3?utm_source=github&utm_medium=pr-report "View baseline bundle analysis report") | |:--|--:|--:| |   [JS](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-1_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-0%22%7D "View JS assets") | `7.28MiB` (`+0.19%`) | `7.27MiB` | |   [IMG](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-0_ft.IMG-1_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-0%22%7D "View IMG assets") | `2.48MiB` | `2.48MiB` | |   [CSS](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-1_ft.JS-0_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-0%22%7D "View CSS assets") | `319.91KiB` | `319.91KiB` | |   [Fonts](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-0_ft.IMG-0_ft.MEDIA-0_ft.FONT-1_ft.HTML-0_ft.OTHER-0%22%7D "View Fonts assets") | `93.55KiB` | `93.55KiB` | |   [Other](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-0_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-0_ft.OTHER-1%22%7D "View Other assets") | `17.62KiB` | `17.62KiB` | |   [HTML](https://app.relative-ci.com/projects/PUROh8FAVkDKmpUrqr4u/jobs/2661-Gkg2qw5tUH5m8P1gQVsn/assets?ba=%7B%22filters%22%3A%22ft.CSS-0_ft.JS-0_ft.IMG-0_ft.MEDIA-0_ft.FONT-0_ft.HTML-1_ft.OTHER-0%22%7D "View HTML assets") | `13.58KiB` | `13.58KiB` |

---

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

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 98.41%. Comparing base (e83d529) to head (a27ae0b). Report is 3 commits behind head on master.

Additional details and impacted files

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[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[bot]]

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.