[{"data":1,"prerenderedAt":1395},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F04\u002Fdashboard-milestones-pwa-new-components":3},{"id":4,"title":5,"body":6,"description":12,"extension":1385,"meta":1386,"navigation":218,"path":1391,"seo":1392,"stem":1393,"__hash__":1394},"blog\u002Fblog\u002F2024\u002F04\u002Fdashboard-milestones-pwa-new-components.md","Dashboard 2.0: Milestones, PWA and New Components",{"type":7,"value":8,"toc":1378},"minimark",[9,13,18,21,24,52,61,65,72,75,79,88,108,114,125,136,152,410,418,427,436,442,456,827,838,847,853,1240,1248,1257,1269,1275,1278,1286,1290,1293,1329,1337,1341,1344,1367,1375],[10,11,12],"p",{},"With a new release of Node-RED Dashboard 2.0 we have plenty of new fixes and improvements being added to the project. In this post, we'll deep dive into community contributions, PWA support, new Vuetify components, and the rest of the great work published in this latest release.",[14,15,17],"h2",{"id":16},"community-contributions","Community Contributions",[10,19,20],{},"We firstly wanted to take this opportunity to point out a big milestone that we're very proud to see in Node-RED Dashboard 2.0.",[10,22,23],{},"This release marks the first time we've had more contributions in a single release from the community, than from FlowFuse employees. I think this is a testament to the community, and a big milestone in validating the success, and popularity, of Dashboard 2.0 in the wider Node-RED community.",[10,25,26,27,34,35,34,40,45,46,51],{},"So thank you very much ",[28,29,33],"a",{"href":30,"rel":31},"https:\u002F\u002Fgithub.com\u002Fbartbutenaers",[32],"nofollow","@BartButenaers",", ",[28,36,39],{"href":37,"rel":38},"https:\u002F\u002Fgithub.com\u002FEk1nox",[32],"@Ek1nox",[28,41,44],{"href":42,"rel":43},"https:\u002F\u002Fgithub.com\u002Ffullmetal-fred",[32],"@fullmetal-fred"," and ",[28,47,50],{"href":48,"rel":49},"https:\u002F\u002Fgithub.com\u002Fcgjgh",[32],"@cgjgh"," for for great efforts and initiative in improving Node-RED Dashboard 2.0.",[10,53,54,55,60],{},"For anyone else that's interested in contributing to the project, please do reach out, and we'll be happy to help you get started. We also have a ",[28,56,59],{"href":57,"rel":58},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fcontributing\u002F",[32],"Contributing Guide"," if you want to dive straight in.",[14,62,64],{"id":63},"progressive-web-app-pwa-support","Progressive Web App (PWA) Support",[10,66,67,68,71],{},"The biggest community contribution we saw in this release was the addition of Progressive Web App (PWA) support. This feature was added by ",[28,69,50],{"href":48,"rel":70},[32],", and allows you to install your Node-RED Dashboard 2.0 applications directly onto your platform, including Windows, iOS and Android.",[10,73,74],{},"This work will give your Dashboard's a much more native\u002Fnatural feel when running on your own machines, and mean you no longer need to go via your browser to access your applications.",[14,76,78],{"id":77},"new-vuetify-preview-components-available","New Vuetify (Preview) Components Available",[10,80,81,82,87],{},"Vuetify is the component library on which most of our Dashboard 2.0 components are built. Our core widgets implement the more fundamental UI elements, but that doesn't stop you from building out fully customized interfaces yourself using our ",[28,83,86],{"href":84,"rel":85},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-template.html",[32],"ui-template node"," with the vast collection of Vuetify components.",[10,89,90,91,95,96,101,102,107],{},"Within the ",[92,93,94],"code",{},"ui-template"," node, we natively support any of the ",[28,97,100],{"href":98,"rel":99},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fcomponents\u002Fall\u002F#containment",[32],"core Vuetify components",", but Vuetify itself is always evolving and often they release components into their ",[28,103,106],{"href":104,"rel":105},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Flabs\u002Fintroduction\u002F#what-is-labs",[32],"Vuetify Labs",".",[10,109,110,111,113],{},"In their latest releases, a few of the new components have caught our eye as we've seen them regularly requested in Dashboard 2.0. As such, we've now made available the following Vuetify components inside a ",[92,112,94],{}," node:",[115,116,118,119,124],"h4",{"id":117},"number-input-docs","Number Input (",[28,120,123],{"href":121,"rel":122},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fcomponents\u002Fnumber-inputs\u002F#installation",[32],"docs",")",[10,126,127,132],{},[128,129],"img",{"alt":130,"src":131},"Number Input","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fvuetify-numeric.png",[133,134,135],"em",{},"An example v-number-input from Vuetify's component library",[10,137,138,139,144,145,148,149,151],{},"We do have ",[28,140,143],{"href":141,"rel":142},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues\u002F41",[32],"plans"," for this to become a core widget, and will likely introduce this sooner, rather than later, however, in the mean time, you can now use the ",[92,146,147],{},"v-number-input"," component in a ",[92,150,94],{}," node to create your own number inputs instead.",[153,154,159],"pre",{"className":155,"code":156,"language":157,"meta":158,"style":158},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n    \u003Cv-number-input v-model=\"value\">\u003C\u002Fv-number-input>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\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\u003C\u002Fscript>\n\n\u003Cstyle>\n    .v-number-input__control .v-btn {\n        color: var(--v-theme-on-surface);\n    }\n\u003C\u002Fstyle>\n","html","",[92,160,161,177,203,213,220,230,243,252,260,270,276,282,288,303,323,328,334,340,349,354,364,375,396,401],{"__ignoreMap":158},[162,163,166,170,174],"span",{"class":164,"line":165},"line",1,[162,167,169],{"class":168},"sVt8B","\u003C",[162,171,173],{"class":172},"s9eBZ","template",[162,175,176],{"class":168},">\n",[162,178,180,183,185,189,192,196,199,201],{"class":164,"line":179},2,[162,181,182],{"class":168},"    \u003C",[162,184,147],{"class":172},[162,186,188],{"class":187},"sScJk"," v-model",[162,190,191],{"class":168},"=",[162,193,195],{"class":194},"sZZnC","\"value\"",[162,197,198],{"class":168},">\u003C\u002F",[162,200,147],{"class":172},[162,202,176],{"class":168},[162,204,206,209,211],{"class":164,"line":205},3,[162,207,208],{"class":168},"\u003C\u002F",[162,210,173],{"class":172},[162,212,176],{"class":168},[162,214,216],{"class":164,"line":215},4,[162,217,219],{"emptyLinePlaceholder":218},true,"\n",[162,221,223,225,228],{"class":164,"line":222},5,[162,224,169],{"class":168},[162,226,227],{"class":172},"script",[162,229,176],{"class":168},[162,231,233,237,240],{"class":164,"line":232},6,[162,234,236],{"class":235},"szBVR","  export",[162,238,239],{"class":235}," default",[162,241,242],{"class":168}," {\n",[162,244,246,249],{"class":164,"line":245},7,[162,247,248],{"class":187},"    data",[162,250,251],{"class":168},"() {\n",[162,253,255,258],{"class":164,"line":254},8,[162,256,257],{"class":235},"      return",[162,259,242],{"class":168},[162,261,263,266],{"class":164,"line":262},9,[162,264,265],{"class":168},"        value: ",[162,267,269],{"class":268},"sj4cs","0\n",[162,271,273],{"class":164,"line":272},10,[162,274,275],{"class":168},"      }\n",[162,277,279],{"class":164,"line":278},11,[162,280,281],{"class":168},"    },\n",[162,283,285],{"class":164,"line":284},12,[162,286,287],{"class":168},"    watch: {\n",[162,289,291,294,297,300],{"class":164,"line":290},13,[162,292,293],{"class":187},"      value",[162,295,296],{"class":168},": ",[162,298,299],{"class":235},"function",[162,301,302],{"class":168}," () {\n",[162,304,306,309,311,314,317,320],{"class":164,"line":305},14,[162,307,308],{"class":268},"        this",[162,310,107],{"class":168},[162,312,313],{"class":187},"send",[162,315,316],{"class":168},"({payload: ",[162,318,319],{"class":268},"this",[162,321,322],{"class":168},".value})\n",[162,324,326],{"class":164,"line":325},15,[162,327,275],{"class":168},[162,329,331],{"class":164,"line":330},16,[162,332,333],{"class":168},"    }\n",[162,335,337],{"class":164,"line":336},17,[162,338,339],{"class":168},"  }\n",[162,341,343,345,347],{"class":164,"line":342},18,[162,344,208],{"class":168},[162,346,227],{"class":172},[162,348,176],{"class":168},[162,350,352],{"class":164,"line":351},19,[162,353,219],{"emptyLinePlaceholder":218},[162,355,357,359,362],{"class":164,"line":356},20,[162,358,169],{"class":168},[162,360,361],{"class":172},"style",[162,363,176],{"class":168},[162,365,367,370,373],{"class":164,"line":366},21,[162,368,369],{"class":187},"    .v-number-input__control",[162,371,372],{"class":187}," .v-btn",[162,374,242],{"class":168},[162,376,378,381,383,386,389,393],{"class":164,"line":377},22,[162,379,380],{"class":268},"        color",[162,382,296],{"class":168},[162,384,385],{"class":268},"var",[162,387,388],{"class":168},"(",[162,390,392],{"class":391},"s4XuR","--v-theme-on-surface",[162,394,395],{"class":168},");\n",[162,397,399],{"class":164,"line":398},23,[162,400,333],{"class":168},[162,402,404,406,408],{"class":164,"line":403},24,[162,405,208],{"class":168},[162,407,361],{"class":172},[162,409,176],{"class":168},[115,411,413,414,124],{"id":412},"sparkline-docs","Sparkline (",[28,415,123],{"href":416,"rel":417},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fcomponents\u002Fsparklines\u002F#installation",[32],[10,419,420,424],{},[128,421],{"alt":422,"src":423},"Sparkline","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fvuetify-sparkline.png",[133,425,426],{},"An example v-sparkline rendering the output from a ui-slider",[10,428,429,430,148,433,435],{},"Sparklines are a great way to visualize data trends in a small space, and we've seen them requested a few times in the past. Now you can use the ",[92,431,432],{},"v-sparkline",[92,434,94],{}," node to create your own sparklines.",[10,437,438,439,441],{},"This will also likely become a standalone node at some point too, possibly as a third-party widget, but for now implementing into a ",[92,440,94],{}," is very straight forward.",[10,443,444,445,447,448,451,452,455],{},"In the following example ",[92,446,94],{},", we append any incoming ",[92,449,450],{},"msg.payload"," to a ",[92,453,454],{},"value"," array and render the sparkline accordingly.",[153,457,459],{"className":155,"code":458,"language":157,"meta":158,"style":158},"\u003Ctemplate>\n  \u003Cv-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>\u003C\u002Fv-sparkline>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\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\u003C\u002Fscript>\n\n\u003Cstyle>\n.nrdb-ui-sparkline path {\n  stroke-dasharray: 0 !important;\n}\n\u003C\u002Fstyle>\n",[92,460,461,469,507,540,575,583,587,595,603,613,619,640,714,718,722,726,737,754,758,762,766,774,778,786,796,812,818],{"__ignoreMap":158},[162,462,463,465,467],{"class":164,"line":165},[162,464,169],{"class":168},[162,466,173],{"class":172},[162,468,176],{"class":168},[162,470,471,474,476,479,481,484,487,489,492,495,497,499,502,504],{"class":164,"line":179},[162,472,473],{"class":168},"  \u003C",[162,475,432],{"class":172},[162,477,478],{"class":187}," class",[162,480,191],{"class":168},[162,482,483],{"class":194},"\"nrdb-ui-sparkline\"",[162,485,486],{"class":187}," :auto-line-width",[162,488,191],{"class":168},[162,490,491],{"class":194},"\"false\"",[162,493,494],{"class":187}," :fill",[162,496,191],{"class":168},[162,498,491],{"class":194},[162,500,501],{"class":187}," :gradient",[162,503,191],{"class":168},[162,505,506],{"class":194},"\"gradient\"\n",[162,508,509,512,514,517,520,522,525,528,530,532,535,537],{"class":164,"line":205},[162,510,511],{"class":187},"    :gradient-direction",[162,513,191],{"class":168},[162,515,516],{"class":194},"\"'top'\"",[162,518,519],{"class":187}," :line-width",[162,521,191],{"class":168},[162,523,524],{"class":194},"\"2\"",[162,526,527],{"class":187}," :model-value",[162,529,191],{"class":168},[162,531,195],{"class":194},[162,533,534],{"class":187}," :padding",[162,536,191],{"class":168},[162,538,539],{"class":194},"\"8\"\n",[162,541,542,545,547,550,553,555,558,561,563,566,569,571,573],{"class":164,"line":215},[162,543,544],{"class":187},"    :smooth",[162,546,191],{"class":168},[162,548,549],{"class":194},"\"10\"",[162,551,552],{"class":187}," :stroke-linecap",[162,554,191],{"class":168},[162,556,557],{"class":194},"\"'round'\"",[162,559,560],{"class":187}," :type",[162,562,191],{"class":168},[162,564,565],{"class":194},"\"'trend'\"",[162,567,568],{"class":187}," auto-draw",[162,570,198],{"class":168},[162,572,432],{"class":172},[162,574,176],{"class":168},[162,576,577,579,581],{"class":164,"line":222},[162,578,208],{"class":168},[162,580,173],{"class":172},[162,582,176],{"class":168},[162,584,585],{"class":164,"line":232},[162,586,219],{"emptyLinePlaceholder":218},[162,588,589,591,593],{"class":164,"line":245},[162,590,169],{"class":168},[162,592,227],{"class":172},[162,594,176],{"class":168},[162,596,597,599,601],{"class":164,"line":254},[162,598,236],{"class":235},[162,600,239],{"class":235},[162,602,242],{"class":168},[162,604,605,607,609,611],{"class":164,"line":262},[162,606,248],{"class":187},[162,608,296],{"class":168},[162,610,299],{"class":235},[162,612,302],{"class":168},[162,614,615,617],{"class":164,"line":272},[162,616,257],{"class":235},[162,618,242],{"class":168},[162,620,621,624,627,629,632,634,637],{"class":164,"line":278},[162,622,623],{"class":168},"        gradient: [",[162,625,626],{"class":194},"'#f72047'",[162,628,34],{"class":168},[162,630,631],{"class":194},"'#ffd200'",[162,633,34],{"class":168},[162,635,636],{"class":194},"'#1feaea'",[162,638,639],{"class":168},"],\n",[162,641,642,645,648,650,653,655,658,660,663,665,667,669,672,674,677,679,681,683,685,687,689,691,694,696,699,701,703,705,707,709,711],{"class":164,"line":284},[162,643,644],{"class":168},"        value: [",[162,646,647],{"class":268},"0",[162,649,34],{"class":168},[162,651,652],{"class":268},"2",[162,654,34],{"class":168},[162,656,657],{"class":268},"5",[162,659,34],{"class":168},[162,661,662],{"class":268},"9",[162,664,34],{"class":168},[162,666,657],{"class":268},[162,668,34],{"class":168},[162,670,671],{"class":268},"10",[162,673,34],{"class":168},[162,675,676],{"class":268},"3",[162,678,34],{"class":168},[162,680,657],{"class":268},[162,682,34],{"class":168},[162,684,647],{"class":268},[162,686,34],{"class":168},[162,688,647],{"class":268},[162,690,34],{"class":168},[162,692,693],{"class":268},"1",[162,695,34],{"class":168},[162,697,698],{"class":268},"8",[162,700,34],{"class":168},[162,702,652],{"class":268},[162,704,34],{"class":168},[162,706,662],{"class":268},[162,708,34],{"class":168},[162,710,647],{"class":268},[162,712,713],{"class":168},"]\n",[162,715,716],{"class":164,"line":290},[162,717,275],{"class":168},[162,719,720],{"class":164,"line":305},[162,721,281],{"class":168},[162,723,724],{"class":164,"line":325},[162,725,287],{"class":168},[162,727,728,731,733,735],{"class":164,"line":330},[162,729,730],{"class":187},"      msg",[162,732,296],{"class":168},[162,734,299],{"class":235},[162,736,302],{"class":168},[162,738,739,741,744,747,749,751],{"class":164,"line":336},[162,740,308],{"class":268},[162,742,743],{"class":168},".value.",[162,745,746],{"class":187},"push",[162,748,388],{"class":168},[162,750,319],{"class":268},[162,752,753],{"class":168},".msg.payload)\n",[162,755,756],{"class":164,"line":342},[162,757,275],{"class":168},[162,759,760],{"class":164,"line":351},[162,761,333],{"class":168},[162,763,764],{"class":164,"line":356},[162,765,339],{"class":168},[162,767,768,770,772],{"class":164,"line":366},[162,769,208],{"class":168},[162,771,227],{"class":172},[162,773,176],{"class":168},[162,775,776],{"class":164,"line":377},[162,777,219],{"emptyLinePlaceholder":218},[162,779,780,782,784],{"class":164,"line":398},[162,781,169],{"class":168},[162,783,361],{"class":172},[162,785,176],{"class":168},[162,787,788,791,794],{"class":164,"line":403},[162,789,790],{"class":187},".nrdb-ui-sparkline",[162,792,793],{"class":172}," path",[162,795,242],{"class":168},[162,797,799,802,804,806,809],{"class":164,"line":798},25,[162,800,801],{"class":268},"  stroke-dasharray",[162,803,296],{"class":168},[162,805,647],{"class":268},[162,807,808],{"class":235}," !important",[162,810,811],{"class":168},";\n",[162,813,815],{"class":164,"line":814},26,[162,816,817],{"class":168},"}\n",[162,819,821,823,825],{"class":164,"line":820},27,[162,822,208],{"class":168},[162,824,361],{"class":172},[162,826,176],{"class":168},[10,828,829,830,833,834,837],{},"There is no limitation on ",[133,831,832],{},"where"," you can use the sparkline either, we could, for example, add it to a ",[92,835,836],{},"v-data-table"," to show a sparkline of a particular feature for each row in the table:",[10,839,840,844],{},[128,841],{"alt":842,"src":843},"Data Table with Sparkline","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fvuetify-data-table-sparkline.png",[133,845,846],{},"An example v-data-table that renders a v-sparkline on each row",[10,848,849,850,852],{},"Here we see the corresponding template for the above ",[92,851,836],{}," example:",[153,854,856],{"className":155,"code":855,"language":157,"meta":158,"style":158},"\u003Ctemplate>\n    \u003C!-- Provide an input text box to search the content -->\n    \u003Cv-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n        hide-details>\u003C\u002Fv-text-field>\n    \u003Cv-data-table v-model:search=\"search\" :items=\"msg?.payload\" :headers=\"headers\">\n        \u003Ctemplate v-slot:header.pingvalues=\"{ item }\">\n            Ping History\n        \u003C\u002Ftemplate>\n        \u003Ctemplate v-slot:item.ping=\"{ item }\">\n            {{ item.ping }}ms\n        \u003C\u002Ftemplate>\n        \u003Ctemplate v-slot:item.pingvalues=\"{ item }\">\n            \u003Cv-sparkline v-model=\"item.pingValues\" :gradient=\"['#42b3f4', '#42b3f400']\"\n                :line-width=\"2\" gradientDirection=\"top\" :smooth=\"true\" :fill=\"true\">\n        \u003C\u002Ftemplate>\n\n    \u003C\u002Fv-data-table>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\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\u003C\u002Fscript>\n",[92,857,858,866,872,913,924,955,972,977,986,1001,1006,1014,1029,1050,1083,1091,1095,1104,1112,1116,1124,1133,1140,1147,1158,1163,1180,1194,1210,1216,1221,1226,1231],{"__ignoreMap":158},[162,859,860,862,864],{"class":164,"line":165},[162,861,169],{"class":168},[162,863,173],{"class":172},[162,865,176],{"class":168},[162,867,868],{"class":164,"line":179},[162,869,871],{"class":870},"sJ8bj","    \u003C!-- Provide an input text box to search the content -->\n",[162,873,874,876,879,881,883,886,889,891,894,897,899,902,905,908,910],{"class":164,"line":205},[162,875,182],{"class":168},[162,877,878],{"class":172},"v-text-field",[162,880,188],{"class":187},[162,882,191],{"class":168},[162,884,885],{"class":194},"\"search\"",[162,887,888],{"class":187}," label",[162,890,191],{"class":168},[162,892,893],{"class":194},"\"Search\"",[162,895,896],{"class":187}," prepend-inner-icon",[162,898,191],{"class":168},[162,900,901],{"class":194},"\"mdi-magnify\"",[162,903,904],{"class":187}," single-line",[162,906,907],{"class":187}," variant",[162,909,191],{"class":168},[162,911,912],{"class":194},"\"outlined\"\n",[162,914,915,918,920,922],{"class":164,"line":215},[162,916,917],{"class":187},"        hide-details",[162,919,198],{"class":168},[162,921,878],{"class":172},[162,923,176],{"class":168},[162,925,926,928,930,933,935,937,940,942,945,948,950,953],{"class":164,"line":222},[162,927,182],{"class":168},[162,929,836],{"class":172},[162,931,932],{"class":187}," v-model:search",[162,934,191],{"class":168},[162,936,885],{"class":194},[162,938,939],{"class":187}," :items",[162,941,191],{"class":168},[162,943,944],{"class":194},"\"msg?.payload\"",[162,946,947],{"class":187}," :headers",[162,949,191],{"class":168},[162,951,952],{"class":194},"\"headers\"",[162,954,176],{"class":168},[162,956,957,960,962,965,967,970],{"class":164,"line":232},[162,958,959],{"class":168},"        \u003C",[162,961,173],{"class":172},[162,963,964],{"class":187}," v-slot:header.pingvalues",[162,966,191],{"class":168},[162,968,969],{"class":194},"\"{ item }\"",[162,971,176],{"class":168},[162,973,974],{"class":164,"line":245},[162,975,976],{"class":168},"            Ping History\n",[162,978,979,982,984],{"class":164,"line":254},[162,980,981],{"class":168},"        \u003C\u002F",[162,983,173],{"class":172},[162,985,176],{"class":168},[162,987,988,990,992,995,997,999],{"class":164,"line":262},[162,989,959],{"class":168},[162,991,173],{"class":172},[162,993,994],{"class":187}," v-slot:item.ping",[162,996,191],{"class":168},[162,998,969],{"class":194},[162,1000,176],{"class":168},[162,1002,1003],{"class":164,"line":272},[162,1004,1005],{"class":168},"            {{ item.ping }}ms\n",[162,1007,1008,1010,1012],{"class":164,"line":278},[162,1009,981],{"class":168},[162,1011,173],{"class":172},[162,1013,176],{"class":168},[162,1015,1016,1018,1020,1023,1025,1027],{"class":164,"line":284},[162,1017,959],{"class":168},[162,1019,173],{"class":172},[162,1021,1022],{"class":187}," v-slot:item.pingvalues",[162,1024,191],{"class":168},[162,1026,969],{"class":194},[162,1028,176],{"class":168},[162,1030,1031,1034,1036,1038,1040,1043,1045,1047],{"class":164,"line":290},[162,1032,1033],{"class":168},"            \u003C",[162,1035,432],{"class":172},[162,1037,188],{"class":187},[162,1039,191],{"class":168},[162,1041,1042],{"class":194},"\"item.pingValues\"",[162,1044,501],{"class":187},[162,1046,191],{"class":168},[162,1048,1049],{"class":194},"\"['#42b3f4', '#42b3f400']\"\n",[162,1051,1052,1055,1057,1059,1062,1064,1067,1070,1072,1075,1077,1079,1081],{"class":164,"line":305},[162,1053,1054],{"class":187},"                :line-width",[162,1056,191],{"class":168},[162,1058,524],{"class":194},[162,1060,1061],{"class":187}," gradientDirection",[162,1063,191],{"class":168},[162,1065,1066],{"class":194},"\"top\"",[162,1068,1069],{"class":187}," :smooth",[162,1071,191],{"class":168},[162,1073,1074],{"class":194},"\"true\"",[162,1076,494],{"class":187},[162,1078,191],{"class":168},[162,1080,1074],{"class":194},[162,1082,176],{"class":168},[162,1084,1085,1087,1089],{"class":164,"line":325},[162,1086,981],{"class":168},[162,1088,173],{"class":172},[162,1090,176],{"class":168},[162,1092,1093],{"class":164,"line":330},[162,1094,219],{"emptyLinePlaceholder":218},[162,1096,1097,1100,1102],{"class":164,"line":336},[162,1098,1099],{"class":168},"    \u003C\u002F",[162,1101,836],{"class":172},[162,1103,176],{"class":168},[162,1105,1106,1108,1110],{"class":164,"line":342},[162,1107,208],{"class":168},[162,1109,173],{"class":172},[162,1111,176],{"class":168},[162,1113,1114],{"class":164,"line":351},[162,1115,219],{"emptyLinePlaceholder":218},[162,1117,1118,1120,1122],{"class":164,"line":356},[162,1119,169],{"class":168},[162,1121,227],{"class":172},[162,1123,176],{"class":168},[162,1125,1126,1129,1131],{"class":164,"line":366},[162,1127,1128],{"class":235},"export",[162,1130,239],{"class":235},[162,1132,242],{"class":168},[162,1134,1135,1138],{"class":164,"line":377},[162,1136,1137],{"class":187},"  data",[162,1139,302],{"class":168},[162,1141,1142,1145],{"class":164,"line":398},[162,1143,1144],{"class":235},"    return",[162,1146,242],{"class":168},[162,1148,1149,1152,1155],{"class":164,"line":403},[162,1150,1151],{"class":168},"      search: ",[162,1153,1154],{"class":194},"''",[162,1156,1157],{"class":168},",\n",[162,1159,1160],{"class":164,"line":798},[162,1161,1162],{"class":168},"      headers: [\n",[162,1164,1165,1168,1171,1174,1177],{"class":164,"line":814},[162,1166,1167],{"class":168},"        { key: ",[162,1169,1170],{"class":194},"'id'",[162,1172,1173],{"class":168},", title: ",[162,1175,1176],{"class":194},"'ID'",[162,1178,1179],{"class":168}," },\n",[162,1181,1182,1184,1187,1189,1192],{"class":164,"line":820},[162,1183,1167],{"class":168},[162,1185,1186],{"class":194},"'ping'",[162,1188,1173],{"class":168},[162,1190,1191],{"class":194},"'Ping'",[162,1193,1179],{"class":168},[162,1195,1197,1199,1202,1204,1207],{"class":164,"line":1196},28,[162,1198,1167],{"class":168},[162,1200,1201],{"class":194},"'pingvalues'",[162,1203,1173],{"class":168},[162,1205,1206],{"class":194},"'Ping History'",[162,1208,1209],{"class":168}," }\n",[162,1211,1213],{"class":164,"line":1212},29,[162,1214,1215],{"class":168},"      ]\n",[162,1217,1219],{"class":164,"line":1218},30,[162,1220,333],{"class":168},[162,1222,1224],{"class":164,"line":1223},31,[162,1225,339],{"class":168},[162,1227,1229],{"class":164,"line":1228},32,[162,1230,817],{"class":168},[162,1232,1234,1236,1238],{"class":164,"line":1233},33,[162,1235,208],{"class":168},[162,1237,227],{"class":172},[162,1239,176],{"class":168},[115,1241,1243,1244,124],{"id":1242},"treeview-docs","Treeview (",[28,1245,123],{"href":1246,"rel":1247},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fcomponents\u002Ftreeview\u002F#installation",[32],[10,1249,1250,1254],{},[128,1251],{"alt":1252,"src":1253},"Treeview","\u002Fblog\u002F2024\u002F04\u002Fimages\u002Fvuetify-treeview.png",[133,1255,1256],{},"An example v-treeview from Vuetify Lab's component library",[10,1258,1259,1260,1263,1264,148,1266,1268],{},"The ",[92,1261,1262],{},"v-treeview"," component is a great way to visualize hierarchical data in a tree-like structure. We've seen this requested a few times in the past, and now you can use the ",[92,1265,1262],{},[92,1267,94],{}," node to create your own treeviews.",[10,1270,1271,1272,1274],{},"There is still scope for this to, one day, become a core or third party widget, but in the mean time, it's very easy to get this up and running in a ",[92,1273,94],{}," node.",[10,1276,1277],{},"The Treeview example, and other examples above are available in this sample flow:",[1279,1280],"iframe",{"width":1281,"height":1282,"src":1283,"allow":1284,"style":1285},"100%","340px","https:\u002F\u002Fflows.nodered.org\u002Fflow\u002F0ac4d82aaf97409cb0dce9812cfa214c\u002Fshare?height=300","clipboard-read; clipboard-write","border: none;",[14,1287,1289],{"id":1288},"other-highlights","Other Highlights",[10,1291,1292],{},"Whilst the above are the main highlights of this release, we've also had a number of other smaller improvements and fixes that have been added to the project. These include:",[1294,1295,1296,1305,1313,1321],"ul",{},[1297,1298,1299,1300],"li",{},"UI Radio Group - Dynamic radio options in ",[28,1301,1304],{"href":1302,"rel":1303},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F765",[32],"#765",[1297,1306,1307,1308],{},"UI Notification - Notification output & output msg when button clicked in ",[28,1309,1312],{"href":1310,"rel":1311},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F766",[32],"#766",[1297,1314,1315,1316],{},"UI Dropdown - Clear dropdown selection in ",[28,1317,1320],{"href":1318,"rel":1319},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F775",[32],"#775",[1297,1322,1323,1324],{},"UI Button - Add \"Emulate Click\" option in ",[28,1325,1328],{"href":1326,"rel":1327},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F783",[32],"#783",[10,1330,1331,1332,107],{},"You can see the full list of changes in the ",[28,1333,1336],{"href":1334,"rel":1335},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv1.8.0",[32],"1.8.0 Release Notes",[14,1338,1340],{"id":1339},"follow-our-progress","Follow our Progress",[10,1342,1343],{},"New features and improvements are coming to Node-RED Dashboard 2.0 every week, if you're interested in what we have lined up, or want to contribute yourself, then you can track the work we have lined up on our GitHub Projects:",[1294,1345,1346,1353,1360],{},[1297,1347,1348],{},[28,1349,1352],{"href":1350,"rel":1351},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[32],"Dashboard 2.0 Activity Tracker",[1297,1354,1355],{},[28,1356,1359],{"href":1357,"rel":1358},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[32],"Dashboard 2.0 Planning Board",[1297,1361,1362],{},[28,1363,1366],{"href":1364,"rel":1365},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F5",[32],"Dashboard 1.0 Feature Parity Tracker",[10,1368,1369,1370,107],{},"If you have any feature requests, bugs\u002Fcomplaints or general feedback, please do reach out, and raise issues on our relevant ",[28,1371,1374],{"href":1372,"rel":1373},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[32],"GitHub repository",[361,1376,1377],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":158,"searchDepth":179,"depth":179,"links":1379},[1380,1381,1382,1383,1384],{"id":16,"depth":179,"text":17},{"id":63,"depth":179,"text":64},{"id":77,"depth":179,"text":78},{"id":1288,"depth":179,"text":1289},{"id":1339,"depth":179,"text":1340},"md",{"navTitle":5,"excerpt":1387},{"type":7,"value":1388},[1389],[10,1390,12],{},"\u002Fblog\u002F2024\u002F04\u002Fdashboard-milestones-pwa-new-components",{"title":5,"description":12},"blog\u002F2024\u002F04\u002Fdashboard-milestones-pwa-new-components","4fiOR-wcZV3JvQeH0ztx8gI7iSG3T14lGwcqDtvi-z4",1780070551655]