Graphics improvements

[pierre-gilles]

Hi @Terdious !

I’ll take this opportunity to post this message here:

Amélioration historique des données des appareils par granularité

DuckDB 1.0 est maintenant disponible ! [Screenshot 2024-06-03 at 15.23.20] On va pouvoir avancer sur ces sujets !!

However, I think we should keep these topics separate; the DuckDB part is quite technical and it’s a long-term change that has impacts far beyond the graphical side. I think I’ll get started on it once I’ve finished my current developments

Regarding your development, it’s really cool!

On the other hand, I think there’s a real need to think about this outside of Gladys before even talking about development. I know it’s always more fun to dive headfirst into development, but first we need to know what we want

What exactly will this feature be used for and who will use it?

Example:

• « I want to know my home’s consumption during the week of January 12 when I was on vacation to see my consumption when my house is empty ».
• … ?

Then, you need to make mockups (I personally use whimsical), and ensure that the mockups answer our questions.

For now the « History » tab you just copy-pasted the dashboard tab, and so in my opinion it doesn’t really meet the need. I understand that you went as fast as possible to do tests, but in this case it would have been even faster to just make a mockup Because now you’re going to end up coding the feature six times, it’s a shame ^^

Do you want to have a call to formalize the development?

[Terdious]

I completely agree with everything you say ^^

Honestly, I’m really not at all comfortable with Whimsical, which I’ve tried several times since you told me about it 2 years ago.

And it doesn’t bother me at all to code for no reason (especially front-end, to be honest ^^) because… it’s not for nothing… I don’t have formal training as a developer and it’s clearly really training me. In my head everything is roughly clear and what isn’t becomes clear when I code it. So frankly it’s win/win ^^

And yet regarding the copy/paste of the dashboard… that’s exactly what I had in mind. I was exactly trying to do that but yes, it’s a very personal vision. For me the chart part on the dashboard has little interest, notably because it’s not very visible on phone and tablet or because it’s too long to access by swiping to the correct box.

But I’ll develop it according to the need and the joint decision. Honestly. I find the zoom part a great addition.

@pierre-gilles

I’ll take the opportunity to put this message here :

DuckDB 1.0 is now available! [Screenshot 2024-06-03 at 15.23.20] We’re going to be able to move forward on these topics!!

Awesome ^^

@pierre-gilles

Example:

• « I want to know my home’s consumption the week of January 12 when I was on vacation to see my consumption when my house is empty ».
• … ?

• I want to compare my production to my consumption
• I want to identify which device(s) trigger recurring overconsumption
• I want to visualize my weather station data over time with temperature, humidity and wind
• I want to be able to easily calculate my electric car’s consumption
• I’m on three-phase power and I want to be able to check my phase imbalances
• I want to see all window/door openings easily and be able to go back in time comparing them to my presence.
• …

I’ll stop there for now but I have plenty of others that don’t come to mind right away.

I have many other improvement areas in mind, notably raised by other contributors who will make other PRs later (export xlsx/xlsm taking an xltm or xltx template file as input; adding an on-the-fly feature on a live chart; adding a checkbox in the editor to be able to use the min/max of the feature; adding multi-legend (for example temperatures + humidity or wind + temperatures + humidity) see https://codepen.io/apexcharts/pen/LBadXo)
But since I’m listening to you , I think I limited myself to the bare minimum.

I’m totally up for a call to formalize things!!

[pierre-gilles]

@Terdious

For me, the curve section on the dashboard is of little interest, notably because it’s hard to see on phone and tablet or because it’s too long to access by swiping to the correct box.

Ok, I’d like to understand this point: why? What’s the difference compared to what you did?

@Terdious

I’ll stop there for now, but I have plenty of others that don’t come to mind immediately.

Thanks for the examples! I’d welcome examples from other users who have more « classic » setups

For me the big question is: what proportion of questions are one-off versus recurring?

Having a « dashboard » workflow doesn’t make sense if the questions are mostly one-off, and in that case it would be better to have a simple screen that lets you answer questions « on the fly » without configuration.

For recurring questions, the dashboard approach makes sense.

@Terdious

I’m very up for a formalization call!!

We can probably wait a bit to get feedback from other users; for me we lack the data to decide.

Otherwise I’m available any day, Gladys, to discuss and formalize all of that!

[cicoub13]

Needs:

• Ad-hoc analysis of electricity consumption over a range of past data
• Visualization of the temperature history for yesterday

[Terdious]

@pierre-gilles

Ok, I’d like to understand this point: why? What’s the difference with what you did then?

I’m correcting my sentence which was missing words and therefore gave the opposite of what I meant ^^ :
« […] has little interest notably because it’s not very visible unlike on phone and tablet […] »
… the dimension ^^ on PC in 3 columns is way too small.
Then, as it stands, even if you zoom out you can’t easily see multiple curves / compare with binary …
… but then … it makes me think … and what if, just as a starting point, I developed the possibility to select the number of columns (because I haven’t really touched much to develop the new menu part ^^)?

[pierre-gilles]

@Terdious

I’m correcting my sentence which was missing words and therefore ends up saying the opposite of what I meant ^^ :

Ok I understand better!

@Terdious

… but then … it makes me think … what if, just for the starting point, I developed the option to select the number of columns (because I haven’t really touched much to develop the new menu part ^^) ?

That’s exactly my point! If it’s just about column width, let’s go ahead and make the number of columns variable No need to create a new tab just for that

[Terdious]

Thanks for your analysis!!
I’ll submit the two PRs soon

• PR1 : just the zoom
• PR2 : just the selection of the number of columns
  And we’ll handle the functional side in the following PRs.

[guim31]

If you’re talking about being able to choose the number of columns, you have to consider that if I want 2 columns, then you must be able to choose the 2/3 1/3 split, or 1/3 2/3 … you see what I mean? ^^

That said, I also think that for visual things like charts or cameras, a larger display would be a big plus for Gladys, at least for use on a computer or a large tablet.

[Terdious]

@guim31

If you mean being able to choose the number of columns, you have to consider that if I want 2 columns, then you must be able to choose the split 2/3 1/3, or 1/3 2/3 … you see what I mean? ^^

No ^^ sorry I didn’t understand ^^

• Either a new dashboard, you select 2 columns: the whole will simply be distributed across the total available screen (current size) into 2 columns.
• Or you want to transform a current dashboard into 2 columns and in that case we need to put safeguards so that you can only delete an empty column (so you’ll have to move or delete the existing boxes beforehand).

But that might not be what you meant!!

[Terdious]

I just got it ^^… let’s say that for the first dev we split it into 2? And then we can do an extra dev to give the option to choose 1/3-2/3;2/3-1/3;1/2-1/2?

[Jluc]

Hello,

• Analysis and comparison of consumption for each device on different dates
• Visualization for comparing temperatures (numerical and on charts) from any dates in the past

[pierre-gilles]

@Terdious

shall we say that for the first dev we split it into two?

Yes, I think that to begin with, simply offering 1, 2, or 3 columns and splitting the screen evenly is great!

[guim31]

I admit I wasn’t very clear! That’s exactly what Pierre-Gilles and you mentioned in your posts

[Terdious]

@pierre-gilles, and everyone ^^

Would something like this work (well, knowing that alignments need to be reviewed in the edit with the addition of the button… but I’m fighting with the alignment of the boxes any advice will of course be welcome ^^) :

The code that's giving me trouble:

              \u003cdiv
                class={cx('d-flex flex-column', columnClass, style.removePadding, {
                  [style.removePaddingFirstCol]: x === 0,
                  [style.removePaddingLastCol]: x === 2
                })}\n              \u003e\n\n                \u003ch3 class=\"text-center\"\u003e\n                  \u003cText id=\"dashboard.boxes.column\" fields={{ index: x + 1 }} /\u003e\n                \u003c/h3\u003e\n                \u003cdiv class=\"d-flex flex-row justify-content-center\"\u003e\n                  {x === nbColumns - 1 \u0026\u0026 (\n                    \u003cdiv class=\"d-flex justify-content-center align-item-center mb-2\"\u003e\n                      {!props.askDeleteColumn \u0026\u0026 nbColumns \u003e 1 \u0026\u0026 (\n                        \u003cbutton onClick={props.askDeleteCurrentColumn} className=\"btn btn-outline-danger btn-sm\"\u003e\n                          \u003cText id=\"dashboard.editDashboardDeleteColumnButton\" /\u003e \u003ci class=\"fe fe-trash\" /\u003e\n                        \u003c/button\u003e\n                      )}\n                      \u003cdiv class=\"mr-2\" /\u003e\n                      {!props.askDeleteColumn \u0026\u0026 nbColumns \u003c 3 \u0026\u0026 (\n                        \u003cbutton class=\"btn btn-outline-primary btn-sm\" onClick={() =\u003e props.addColumn(x)}\u003e\n                          \u003cText id=\"dashboard.editDashboardAddColumnButton\" /\u003e \u003ci class=\"fe fe-plus\" /\u003e\n                        \u003c/button\u003e\n                      )}\n                      {props.askDeleteColumn \u0026\u0026 (\n                        \u003cdiv\u003e\n                          \u003cText id=\"dashboard.editDashboardDeleteText\" /\u003e\n                          \u003cbutton onClick={props.deleteCurrentColumn} className=\"btn btn-outline-danger btn-sm ml-2\"\u003e\n                            \u003cText id=\"dashboard.editDashboardDeleteButton\" /\u003e \u003ci class=\"fe fe-trash\" /\u003e\n                          \u003c/button\u003e\n                          \u003cbutton onClick={props.cancelDeleteCurrentColumn} className=\"btn btn-outline-secondary btn-sm ml-2\"\u003e\n                            \u003cText id=\"dashboard.editDashboardCancelButton\" /\u003e \u003ci class=\"fe fe-slash\" /\u003e\n                          \u003c/button\u003e\n                        \u003c/div\u003e\n                      )}\n                    \u003c/div\u003e\n                  )}\n                \u003c/div\u003e\n                {x === nbColumns - 1 \u0026\u0026 props.boxNotEmptyError \u0026\u0026 (\n                  \u003cdiv class=\"alert alert-danger\"\u003e\n                    \u003cText id=\"dashboard.editDashboardBoxNotEmpty\" /\u003e\n                  \u003c/div\u003e\n                )}\n                {column.length \u003e 0 \u0026\u0026 (\n                  \u003cdiv\u003e\n                    {column.map((box, y) =\u003e (\n                      \u003cEditBox {...props} box={box} x={x} y={y} isMobileReordering={props.isMobileReordering} /\u003e\n                    ))}\n                    \u003cBottomDropZone\n                      moveCard={props.moveCard}\n                      x={x}\n                      y={column.length}\n                      isMobileReordering={props.isMobileReordering}\n                    /\u003e\n                  \u003c/div\u003e\n                )}\n\n                {column.length === 0 \u0026\u0026 \u003cEmptyColumnDropZone moveCard={props.moveCard} x={x} /\u003e}\n\n                {props.isMobileReordering \u0026\u0026 \u003cAutoScrollMobile position=\"bottom\" box_type={DASHBOARD_EDIT_BOX_TYPE} /\u003e}\n                \u003cdiv class=\"d-flex justify-content-center mb-4\"\u003e\n                  \u003cbutton class=\"btn btn-primary\" onClick={() =\u003e props.addBox(x)}\u003e\n                    \u003cText id=\"dashboard.addBoxButton\" /\u003e \u003ci class=\"fe fe-plus\" /\u003e\n                  \u003c/button\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n```

Well in the end I personally like it a lot!! ^^

Anyway @pierre-gilles, apart from the last small adjustments, the 3 PRs are ready for review.

[guim31]

I’m having a blast!!!

[_Will_71]

@Terdious

Well, in the end I really like it!! ^^

I really like it too, but we’d need to see how it looks mixed with other non-graphical boxes and how it renders on mobile when the box is 2/3 width or full width.

[Terdious]

In fact on mobile it won’t change anything… we’re already on a single column ^^

[Terdious]

@Terdious

(bon en sachant qu’il faut revoir les alignements dans l’édition avec l’ajout du bouton … mais je me bat avec l’alignement des boxes tout conseil sera bien entendu le bienvenu ^^) :

Le code me posant soucis :

              \u003cdiv
                class={cx('d-flex flex-column', columnClass, style.removePadding, {
                  [style.removePaddingFirstCol]: x === 0,
                  [style.removePaddingLastCol]: x === 2
                })}\n              \u003e

                \u003ch3 class=\"text-center\"\u003e
                  \u003cText id=\"dashboard.boxes.column\" fields={{ index: x + 1 }} /\u003e
                \u003c/h3\u003e
                \u003cdiv class=\"d-flex flex-row justify-content-center\"\u003e
                  {x === nbColumns - 1 \u0026\u0026 (
                    \u003cdiv class=\"d-flex justify-content-center align-item-center mb-2\"\u003e
                      {!props.askDeleteColumn \u0026\u0026 nbColumns \u003e 1 \u0026\u0026 (
                        \u003cbutton onClick={props.askDeleteCurrentColumn} className=\"btn btn-outline-danger btn-sm\"\u003e
                          \u003cText id=\"dashboard.editDashboardDeleteColumnButton\" /\u003e \u003ci class=\"fe fe-trash\" /\u003e
                        \u003c/button\u003e
                      )}
                      \u003cdiv class=\"mr-2\" /\u003e
                      {!props.askDeleteColumn \u0026\u0026 nbColumns \u003c 3 \u0026\u0026 (
                        \u003cbutton class=\"btn btn-outline-primary btn-sm\" onClick={() =\u003e props.addColumn(x)}\u003e
                          \u003cText id=\"dashboard.editDashboardAddColumnButton\" /\u003e \u003ci class=\"fe fe-plus\" /\u003e
                        \u003c/button\u003e
                      )}
                      {props.askDeleteColumn \u0026\u0026 (
                        \u003cdiv\u003e
                          \u003cText id=\"dashboard.editDashboardDeleteText\" /\u003e
                          \u003cbutton onClick={props.deleteCurrentColumn} className=\"btn btn-outline-danger btn-sm ml-2\"\u003e
                            \u003cText id=\"dashboard.editDashboardDeleteButton\" /\u003e \u003ci class=\"fe fe-trash\" /\u003e
                          \u003c/button\u003e
                          \u003cbutton onClick={props.cancelDeleteCurrentColumn} className=\"btn btn-outline-secondary btn-sm ml-2\"\u003e
                            \u003cText id=\"dashboard.editDashboardCancelButton\" /\u003e \u003ci class=\"fe fe-slash\" /\u003e
                          \u003c/button\u003e
                        \u003c/div\u003e
                      )}
                    \u003c/div\u003e
                  )}
                \u003c/div\u003e
                {x === nbColumns - 1 \u0026\u0026 props.boxNotEmptyError \u0026\u0026 (
                  \u003cdiv class=\"alert alert-danger\"\u003e
                    \u003cText id=\"dashboard.editDashboardBoxNotEmpty\" /\u003e
                  \u003c/div\u003e
                )}
                {column.length \u003e 0 \u0026\u0026 (
                  \u003cdiv\u003e
                    {column.map((box, y) =\u003e (
                      \u003cEditBox {...props} box={box} x={x} y={y} isMobileReordering={props.isMobileReordering} /\u003e
                    ))}
                    \u003cBottomDropZone
                      moveCard={props.moveCard}
                      x={x}
                      y={column.length}
                      isMobileReordering={props.isMobileReordering}
                    /\u003e
                  \u003c/div\u003e
                )}

                {column.length === 0 \u0026\u0026 \u003cEmptyColumnDropZone moveCard={props.moveCard} x={x} /\u003e}

                {props.isMobileReordering \u0026\u0026 \u003cAutoScrollMobile position=\"bottom\" box_type={DASHBOARD_EDIT_BOX_TYPE} /\u003e}
                \u003cdiv class=\"d-flex justify-content-center mb-4\"\u003e
                  \u003cbutton class=\"btn btn-primary\" onClick={() =\u003e props.addBox(x)}\u003e
                    \u003cText id=\"dashboard.addBoxButton\" /\u003e \u003ci class=\"fe fe-plus\" /\u003e
                  \u003c/button\u003e
                \u003c/div\u003e
              \u003c/div\u003e

Well I think I found it … I was fighting in the wind, I was calling the wrong file for the styles.
This would look like this in web version (>992 pixels) :

And this is what it would look like in mobile version or display < 992px :

[pierre-gilles]

Quick @Terdious Great that you handled the case of already-filled columns!

From a design standpoint, the 3 columns need to be at the same level, otherwise it doesn’t look very clean.

You could, for example, put a delete icon (or button) next to the title

For the « Add a column » button, I think it could be a « + » button to the right of the columns, which would only be displayed when necessary:

Example 2 columns:

Example 3 columns:

What do you think?

[Terdious]

Hehe !!

So the case of columns on the same level has been handled, but I really like your design which is no-frills and lighter.

I’ll make the changes accordingly!! With the + on the right!

Thanks for your quick message!!

EDIT: @pierre-gilles I liked the placement of the ‹ + ›, but if there are boxes filled in the other columns… we can’t see it anymore and you have to scroll… maybe just display it on the same line as the columns but on the right, right?

Like this?