Dashboard Template
Hello everyone!
After the post, I decided to start a new one. This will make it easier to follow the changes.
New features have been added:
- Sticky buttons. Thanks to CSS hacks, I was able to make the buttons component sticky. Now the buttons always remain visible to the top of the page as we scroll down.
- Scroll into View. By clicking a button the page automatically scrolls into the correspoding section. In the attached database press the first button "Accounts" to see it in action.
The combination of the above two features has the potential to transform the way we design our Dashboards. Like the one-page websites, we can present our content in sections on one long Dashboard.
In Safari works but I haven't check it in other browsers. Let me know if you find any bug.
What other functionalities would you like to see?
Leave here your suggestions, ideas or improvements!
Enjoy!
204 replies
-
Hi works perfect on Chrome and Firefox on Android Tablet
-
Can the four charts be configured to provide a constant, real-time display of numerical data?
-
this is nice. We can get the data in a table as well in this presentation, however my doubt still remains about the vertical sidebar layout. You have shown how we can successfully implement the buttons sidebar nd the charts on the right side.
The only problem with that layout is that it looks like the whole individual CSS grid that we make still goes into one of the columns of the internal column layout of the Ninox design editor. That's why we cannot nave varied size columns. It picks up the largest height column and then aligns everything according to that height.
I was just thinking if there was a way to have varied cell/column heights for internal Ninox column system or if we could just fit the CSS grid with varied cell heights on the right side, we can create the desired layout for the dashboard. I have already started studying the CSS grid.
The point is that Ninox allows horizontal layouts and it's easy to layout the components in that way. We should give them feedback to maybe its time for them to change their layout system to a better one (CSS Grid).
Also regarding the charts, I was thinking that these charts are all using an external JS library that loads in the beginning. Aren't we supposed to use the internal charts view of Ninox ? Can we use the internal Charts and fit them into the CSS grid within the formula box?
-
Dashboard Template project major update (v4):
- Elimination of the padding of the parent Ninox form. The buttons stick to the top of the form just below the Ninox Tab creating a sticky ribbon.
- New text-line section dividers have been introduced.
- The scroll-margin-top property of all section dividers has been set to 98px. By controlling the distance between the snap position of the section divider and the parent Ninox form, the former sits perfectly just below the buttons after scrolling.
- A new sticky scroll-up arrow has been added. Always visible the clickable arrow lets the users easily return to the top of the form.
With the above refinements, the basic structure of the dashboard is complete. It's a long, multi-section dashboard. There is a ribbon of ten buttons corresponding to the ten sections.
Between section dividers, the users can add as many Ninox fields as they want. Bear in mind that each time you insert a new Ninox field into the dashboard you must manually increase the id number of the scroll-up arrow accordingly in the following line of code:
.form .component:nth-child(14)
Enjoy!
-
Version 4.1
Bug fix: On Chrome the "scroll-margin-top" property does not work. To fix this I had to use the alternative "scroll-padding-top" property that applies to the <div> where the vertical scroll bar appears. I discovered that this is the parent <div> with the class '.page-view>.object'
I tested it in Safari, Chrome, and Firefox. It runs smoothly.
PS. I wouldn't have had the courage to open my browser's developer console to explore the Ninox page <div> elements without 's encouragement.
-
Version 5.0
I have imported this dataset from Kaggle to demonstrate how we can visualize our Ninox data using the eCharts library.
The new eCharts 'dataset' component has been adopted because it is convenient for separating data from configs and is easy to construct as an 'array of JSON' within the Ninox script.
The legends are interactive, allowing you to click to hide/show the relevant series data.
Although there is an initial steep learning curve, once you understand the basics of the chart components, the possibilities are endless, even for statistical analysis. I recommend the eCharts Handbook as a starting point.
BONUS: A beautiful real-time analog clock, which is essentially a gauge chart that displays time data, for those who love clocks!
Have fun!
-
Thanks for sharing this piece of art!
-
Version 6.0
New feature:
Real-time weather data right to your home section by calling the tomorrow.io API. I've set the location to New York just to show you what it looks like! You can easily change the location 'Value' field inside the 'Settings' subtable. It accepts the following formats:
- Latitude and Longitude (Decimal degree)
location=42.3478, -71.0466
- City name
location=new york
- US zip
location=10001 US
(2-letter code based on ISO-3166) - UK postcode
location=SW1
I'm happy to leave my API Key so that everyone has a chance to test out the service. Just a quick heads-up, though, there are limits on requests (3/sec, 25/hour, 500/day). But there is a free account tier, so just create one and paste your API Key inside the 'Settings' subtable.
This company seems promising but I am not sure how accurate the results we get are. If you know of a better weather API, I'd love to hear about it!
Improvements:
- Responsive layout for both the 'Home' CSS flexbox and 'Dog Stats' CSS grid. I used @media CSS queries to make it all work together seamlessly. On smaller devices, the layouts switch to a single column, which is great for viewing the charts one after the other.
- No dependencies on external sources. I've downloaded and saved the eCharts js library, the Phosphor icons stylesheet, and the weather codes into the 'Sources' subtable for you.
All the best!
- Latitude and Longitude (Decimal degree)
Content aside
-
8
Likes
- 2 hrs agoLast active
- 204Replies
- 2285Views
-
16
Following