Technically, yes, you could force a tabbar onto a card. There are several caveats here: 1) an oh-tabs component does not exist and you can’t use oh-tab components so you would have to build this from scratch using all the f7 components. 2) The tabbar and tab pages are not designed to be shoe-horned into a card container so you are going to run into numerous style issues that are going to take a lot of work to fix.
All, in all, I would strongly advise against going forward with this: for me it would not be worth the substantial effort.
There are several other mechanisms that you could use to create a similar system just using widget variables and basic oh button or link components.
My main problem is, that at the moment it is not possible to dynamically change the period of charts (year, month, week, day), as it is fixed to the chart. So I have created 4 charts and put them into a tapped page. This looks like this:
I was also thinking to put it into a Web Frame Card, but here I’m not able to permenently remove the left Openhab navigation panel.
Some time ago you have posted an example with f7-tabs using the Label component. But I guess there is not something like a Page component to reference the chart pages.
Of course, if you do not specify the chartType property, then the chart does allow for changing the period dynamically using the middle button of the selector (and the period can even be made response with a widget expression). If, for some reason, that doesn’t work for you, however,
it’s very simple to convert chart to a widget or component that can then be built into other widgets. Once you have created the chart page, copy the entire configuration from the code tab of that page. Then you just past that configuration under a oh-cart component:
- component: oh-chart
...copied chart config goes here
Once, you have done that, then the chart will easily format onto a card, and to make it dynamic (again, because the period can be set with an expression), a simple series of oh-link or oh-button components that set a period variable would be sufficient to switch the chart period on just that single chart component without recourse to multiple versions and tabs.
I’m using aggregated series and this seems not to work with dynamic period.
I could make it working like this, but I had to use f7-page instead f7-card. The size does not change dynamic and I had to set fixed height/width. Can I change it to f7-card and make it somehow dynamic?
Because you need the fixed period charts, it would look similar in structure to the tab version. The difference would be that for each oh-cart component you would add a visible property that looks like this:
visible: =vars.chartSelect == 'some distinct value here, e.g. month'
For the first chart that you want to be visible before any selections have been made you could modify that to be:
visible: =vars.chartSelect == 'some distinct value here, e.g. month' || !!vars.chartSelect
Then you would just need a way to set that variable. The advantage over the tabbar at this point is that the selection widgets do not have to be buttons at the bottom of the card if you don’t want them to be. You could make a popover, or a drop down, or just two arrow buttons to scroll, or one big button that covers the whole card just selects the next chart in a loop, etc. The important part is that you choose an oh- component that has actions which allow you to set a variable. For a button that would just be something like this:
It seems to be not that easy, as you need to set several values in the YAML code.
For “year” you have:
chartType: year
dimension1: month
categoryType: year
For “day” you have:
chartType: day
dimension1: hour
categoryType: day
Is it actually possible to have these drop down, button… selection in another widget, so that it is valid for the complete page; the intention is to use this selection for several charts on the page?
Right, but the only one of those that is the real issue (I believe) is the chartType. The other properties accept expressions, but chartType does not which is why I said:
The f7 tabs and tabbar work by creating all the different tabs and then just showing the one that is indicated by the tab button selected and hiding the others. The system I outlined with the variables does the same thing. It uses the visible property to show the one chart you want, while hiding the others. It doesn’t buy you any improvement in the brevity of the widget or resources, but it does buy you flexibility. You have more options for setting variables with oh components than you do with what f7 components can set an active tab. You don’t have to change any of the actual chart properties with the variable system I proposed; you only have to add the visible property.
Yes, widget variables are, by default, scoped to the page they are on (with one exception). This was, in fact, the original idea behind them: to be able to share information between widgets on a page.
You could also cast your net wider and not limit your self to just simulating a tabbar. There are a dizzying array of options at this point with the widget system. For example, you could put you charts in different slides on a swiper and then just swipe through them.
