Dashboard 2.0: Vuetify Labs Examples
This flow demonstrates some of the new (in-preview) Vuetify components made available in Dashboard 2.0's v1.8.0 release.
In particular, it demonstrates:
- Sparkline
- Number Input
- Treeview
[{"id":"0318b78e790954f1","type":"ui-template","z":"47b2904dbecb9aa7","group":"8907e8392c1cd840","page":"","ui":"","name":"Sparkline","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-sparkline class=\"nrdb-ui-sparkline\" :auto-line-width=\"false\" :fill=\"false\" :gradient=\"gradient\"\n :gradient-direction=\"'top'\" :line-width=\"2\" :model-value=\"value\" :padding=\"8\"\n :smooth=\"10\" :stroke-linecap=\"'round'\" :type=\"'trend'\" auto-draw></v-sparkline>\n</template>\n\n<script>\n export default {\n data: function () {\n return {\n gradient: ['#f72047', '#ffd200', '#1feaea'],\n value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]\n }\n },\n watch: {\n msg: function () {\n this.value.push(this.msg.payload)\n }\n }\n }\n</script>\n\n<style>\n.nrdb-ui-sparkline path {\n stroke-dasharray: 0 !important;\n}\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":260,"y":60,"wires":[[]]},{"id":"ea042f9c9e5fc756","type":"ui-template","z":"47b2904dbecb9aa7","group":"188b1a98f5af0e62","page":"","ui":"","name":"Treeview","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-treeview :items=\"items\"></v-treeview>\n</template>\n\n<script>\n export default {\n data: () => ({\n items: [\n {\n id: 1,\n title: 'Applications :',\n children: [\n { id: 2, title: 'Calendar : app' },\n { id: 3, title: 'Chrome : app' },\n { id: 4, title: 'Webstorm : app' },\n ],\n },\n {\n id: 5,\n title: 'Documents :',\n children: [\n {\n id: 6,\n title: 'vuetify :',\n children: [\n {\n id: 7,\n title: 'src :',\n children: [\n { id: 8, title: 'index : ts' },\n { id: 9, title: 'bootstrap : ts' },\n ],\n },\n ],\n },\n {\n id: 10,\n title: 'material2 :',\n children: [\n {\n id: 11,\n title: 'src :',\n children: [\n { id: 12, title: 'v-btn : ts' },\n { id: 13, title: 'v-card : ts' },\n { id: 14, title: 'v-window : ts' },\n ],\n },\n ],\n },\n ],\n },\n {\n id: 15,\n title: 'Downloads :',\n children: [\n { id: 16, title: 'October : pdf' },\n { id: 17, title: 'November : pdf' },\n { id: 18, title: 'Tutorial : html' },\n ],\n },\n {\n id: 19,\n title: 'Videos :',\n children: [\n {\n id: 20,\n title: 'Tutorials :',\n children: [\n { id: 21, title: 'Basic layouts : mp4' },\n { id: 22, title: 'Advanced techniques : mp4' },\n { id: 23, title: 'All about app : dir' },\n ],\n },\n { id: 24, title: 'Intro : mov' },\n { id: 25, title: 'Conference introduction : avi' },\n ],\n },\n ],\n }),\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":260,"y":100,"wires":[[]]},{"id":"028d1733d6848a45","type":"ui-slider","z":"47b2904dbecb9aa7","group":"8907e8392c1cd840","name":"","label":"slider","tooltip":"","order":0,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":true,"min":0,"max":10,"step":1,"className":"","x":110,"y":60,"wires":[["0318b78e790954f1"]]},{"id":"ba21ffc41dcfeeeb","type":"ui-template","z":"47b2904dbecb9aa7","group":"8907e8392c1cd840","page":"","ui":"","name":"Data Table (with Sparkline)","order":0,"width":0,"height":0,"head":"","format":"<template>\n <!-- Provide an input text box to search the content -->\n <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n hide-details></v-text-field>\n <v-data-table v-model:search=\"search\" :items=\"msg?.payload\" :headers=\"headers\">\n <template v-slot:header.pingvalues=\"{ item }\">\n Ping History\n </template>\n <template v-slot:item.ping=\"{ item }\">\n {{ item.ping }}ms\n </template>\n <template v-slot:item.pingvalues=\"{ item }\">\n <v-sparkline v-model=\"item.pingValues\" :gradient=\"['#42b3f480', '#42b3f400']\"\n :line-width=\"2\" gradientDirection=\"top\" :smooth=\"true\" :fill=\"true\">\n </template>\n\n </v-data-table>\n</template>\n\n<script>\nexport default {\n data () {\n return {\n search: '',\n headers: [\n { key: 'id', title: 'ID' },\n { key: 'ping', title: 'Ping' },\n { key: 'pingvalues', title: 'Ping History' }\n ]\n }\n }\n}\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":140,"wires":[[]]},{"id":"d2d0063b794f45e7","type":"inject","z":"47b2904dbecb9aa7","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"[{\"id\":1,\"ping\":20,\"pingValues\":[22,12,22,19,21,20]},{\"id\":2,\"ping\":30,\"pingValues\":[28,18,32,12,31,24]},{\"id\":3,\"ping\":40,\"pingValues\":[38,40,42,32,41,16]},{\"id\":4,\"ping\":50,\"pingValues\":[49,50,47,49,51,32]},{\"id\":5,\"ping\":60,\"pingValues\":[58,60,48,59,61,67]}]","payloadType":"json","x":110,"y":140,"wires":[["ba21ffc41dcfeeeb"]]},{"id":"f83ceaddc4656522","type":"ui-template","z":"47b2904dbecb9aa7","group":"25b62e6f29840c5c","page":"","ui":"","name":"v-number-input","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-number-input v-model=\"value\"></v-number-input>\n {{ inputValue }}\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 0\n }\n },\n watch: {\n value: function () {\n this.send({payload: this.value})\n }\n }\n }\n</script>\n\n<style>\n .v-number-input__control .v-btn {\n color: var(--v-theme-on-surface);\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":280,"y":180,"wires":[["d0d79a7595f1640f"]]},{"id":"d0d79a7595f1640f","type":"debug","z":"47b2904dbecb9aa7","name":"debug 380","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":180,"wires":[]},{"id":"8907e8392c1cd840","type":"ui-group","name":"Sparkline","page":"729fe675749ced1e","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"188b1a98f5af0e62","type":"ui-group","name":"Treeview","page":"729fe675749ced1e","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"25b62e6f29840c5c","type":"ui-group","name":"Number Input","page":"729fe675749ced1e","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"729fe675749ced1e","type":"ui-page","name":"Vuetify Labs","ui":"c2e1aa56f50f03bd","path":"/vuetify-labs","icon":"beaker","layout":"grid","theme":"129e99574def90a3","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"c2e1aa56f50f03bd","type":"ui-base","name":"Dashboard","path":"/dashboard","showPathInSidebar":false,"navigationStyle":"default"},{"id":"129e99574def90a3","type":"ui-theme","name":"Another Theme","colors":{"surface":"#000000","primary":"#ff4000","bgPage":"#f0f0f0","groupBg":"#ffffff","groupOutline":"#d9d9d9"},"sizes":{"pagePadding":"9px","groupGap":"12px","groupBorderRadius":"9px","widgetGap":"6px"}}]
