[{"data":1,"prerenderedAt":652},["ShallowReactive",2],{"blog-\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-7":3},{"id":4,"title":5,"body":6,"description":12,"extension":641,"meta":642,"navigation":647,"path":648,"seo":649,"stem":650,"__hash__":651},"blog\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-7.md","Chart Improvements & Migrating to Dashboard 2.0",{"type":7,"value":8,"toc":627},"minimark",[9,13,18,40,43,48,58,67,72,75,99,102,117,121,134,137,141,150,158,165,168,171,174,178,187,190,194,198,201,217,220,319,334,340,343,348,352,367,378,381,500,507,512,515,520,523,527,530,569,572,595,599,607,623],[10,11,12],"p",{},"It's been a little while since we've done an update, since we last posted we've moved into the 0.7.x releases for Dashboard 2.0. With these we're making big strides in improving the UX for charting your data, as well as starting to focus on migration paths from Dashboard 1.0 to 2.0.",[14,15,17],"h2",{"id":16},"package-name-changes","Package Name Changes",[10,19,20,21,25,26,31,32,35,36,39],{},"Firstly a bit of news regarding the ",[22,23,24],"code",{},"npm"," package we publish. Inline with our own ",[27,28,30],"a",{"href":29},"\u002Fblog\u002F2023\u002F08\u002Fflowforge-is-now-flowfuse","company name change",", we've had to update Dashboard 2.0's npm package, and so, we've changed from ",[22,33,34],{},"@flowforge\u002Fnode-red-dashboard"," to ",[22,37,38],{},"@flowfuse\u002Fnode-red-dashboard",".",[10,41,42],{},"In the short term, we'll be keeping @flowforge available on the Node-RED Palette Manager, but it will be removed soon, and the associated NPM Package will be put into a \"deprecated\" mode.",[44,45,47],"h3",{"id":46},"npm-package-migration","NPM Package Migration",[10,49,50,51,35,54,57],{},"Unfortunately, this migration from ",[22,52,53],{},"@flowforge\u002F",[22,55,56],{},"@flowfuse\u002F"," requires a little bit of manual work, and isn't as easy as just clicking \"update\" in the Node-RED Editor.",[10,59,60,61,63,64,66],{},"In any case, there is no need to update your flow in this migration, you'll just need to uninstall ",[22,62,34],{}," and install ",[22,65,38],{}," instead.",[68,69,71],"h4",{"id":70},"running-locally","Running Locally",[10,73,74],{},"If you're running Node-RED locally, or in your own infrastructure, you'll need to manually uninstall the old package:",[76,77,82],"pre",{"className":78,"code":79,"language":80,"meta":81,"style":81},"language-bash shiki shiki-themes github-light github-dark","npm uninstall @flowforge\u002Fnode-red-dashboard\n","bash","",[22,83,84],{"__ignoreMap":81},[85,86,89,92,96],"span",{"class":87,"line":88},"line",1,[85,90,24],{"class":91},"sScJk",[85,93,95],{"class":94},"sZZnC"," uninstall",[85,97,98],{"class":94}," @flowforge\u002Fnode-red-dashboard\n",[10,100,101],{},"and re-install the new one:",[76,103,105],{"className":78,"code":104,"language":80,"meta":81,"style":81},"npm install @flowfuse\u002Fnode-red-dashboard\n",[22,106,107],{"__ignoreMap":81},[85,108,109,111,114],{"class":87,"line":88},[85,110,24],{"class":91},[85,112,113],{"class":94}," install",[85,115,116],{"class":94}," @flowfuse\u002Fnode-red-dashboard\n",[68,118,120],{"id":119},"running-in-flowfuse","Running in FlowFuse",[10,122,123,124,126,127,129,130,133],{},"Navigate to your Instance > Settings > Palette, and then change the ",[22,125,34],{}," entry to ",[22,128,38],{}," (the latest version as of this post is ",[22,131,132],{},"0.7.2",").",[10,135,136],{},"Restart your instance, and the new package will automatically install.",[14,138,140],{"id":139},"dashboard-10-to-20-migration-guide","Dashboard 1.0 to 2.0 Migration Guide",[10,142,143,144,39],{},"As part of our mission to ensure a smooth transition from Dashboard 1.0 to Dashboard 2.0, we have published a first draft of a ",[27,145,149],{"href":146,"rel":147},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fuser\u002Fmigration.html",[148],"nofollow","Migration Guide",[10,151,152,153,157],{},"As a starting point, we have comprehesively covered the Dashboard 1.0 widgets and their associated properties. We've then detailed which properties are already supported, which have partial support, and where appropriate, we do not support and ",[154,155,156],"em",{},"why"," (most of the time, it's just because we haven't got round to it yet!)",[10,159,160],{},[161,162],"img",{"alt":163,"src":164},"Migration Guide Snippet","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fmigration-guide-snippet.png",[10,166,167],{},"We fully appreciate that the migration path is not yet complete, and we that we are missing some features and properties, but please know that we are working hard to ensure that as many of the features from Dashboard 1.0 are available in Dashboard 2.0. We will be updating this guide as we progress.",[10,169,170],{},"We will also be adding \"event\" and \"dynamic properties\" sections to the guide, to detail how you can update and control elements via runtime messages (e.g. dynamically change the label of a button), and how this differs (if at all) from Dashboard 1.0.",[10,172,173],{},"Whilst we aren't quite there yet, this guide offers a comprehensive breakdown on our progress in backporting all of the properties from Dashboard 1.0",[44,175,177],{"id":176},"automated-script","Automated Script",[10,179,180,181,186],{},"An ambitious plan that we have is to also provide a ",[27,182,185],{"href":183,"rel":184},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues\u002F261",[148],"Migration Script",". Any feedback, ideas or concerns are most welcome as comments on the issue.",[10,188,189],{},"Whilst this will never provide 100% perfect migration, we hope to be able to provide a script that can be run against your flows to automatically convert as much as possible from Dashboard 1.0 to 2.0. In most cases, as you can see in the Migration guide, we match most properties 1:1, so this should do a lot of the heavy lifting for you.",[14,191,193],{"id":192},"updates-to-ui-chart","Updates to UI Chart",[44,195,197],{"id":196},"key-mapping","Key Mapping",[10,199,200],{},"One of the core purposes of Node-RED Dashboard has always been to provide low-code access to charting your data. With the 0.7.x releases we've made some big improvements to the UI Chart node to make it easier to use and more powerful.",[10,202,203,204,207,208,211,212,216],{},"In Dashboard 1.0, it was common place to have to regularly re-format your own data into ",[22,205,206],{},"{x, y}"," structure to be chart-friendly. In ",[22,209,210],{},"0.7.0"," we've introduced the concept of ",[213,214,215],"strong",{},"key mapping",", where you can specify which keys in your data object should be used for the x and y axes. This means you can now pass in data in the format you want to use, and the chart will do the rest.",[10,218,219],{},"For example, when rendering a chart of our weekly npm downloads, we have a data structure:",[76,221,225],{"className":222,"code":223,"language":224,"meta":81,"style":81},"language-json shiki shiki-themes github-light github-dark","[{\n    \"day\": \"YYYY-MM-DD\",\n    \"downloads\": 128\n}, {\n    \"day\": \"YYYY-MM-DD\",\n    \"downloads\": 256\n}, {\n    \"day\": \"YYYY-MM-DD\",\n    \"downloads\": 512\n}]\n","json",[22,226,227,233,249,260,266,277,287,292,303,313],{"__ignoreMap":81},[85,228,229],{"class":87,"line":88},[85,230,232],{"class":231},"sVt8B","[{\n",[85,234,236,240,243,246],{"class":87,"line":235},2,[85,237,239],{"class":238},"sj4cs","    \"day\"",[85,241,242],{"class":231},": ",[85,244,245],{"class":94},"\"YYYY-MM-DD\"",[85,247,248],{"class":231},",\n",[85,250,252,255,257],{"class":87,"line":251},3,[85,253,254],{"class":238},"    \"downloads\"",[85,256,242],{"class":231},[85,258,259],{"class":238},"128\n",[85,261,263],{"class":87,"line":262},4,[85,264,265],{"class":231},"}, {\n",[85,267,269,271,273,275],{"class":87,"line":268},5,[85,270,239],{"class":238},[85,272,242],{"class":231},[85,274,245],{"class":94},[85,276,248],{"class":231},[85,278,280,282,284],{"class":87,"line":279},6,[85,281,254],{"class":238},[85,283,242],{"class":231},[85,285,286],{"class":238},"256\n",[85,288,290],{"class":87,"line":289},7,[85,291,265],{"class":231},[85,293,295,297,299,301],{"class":87,"line":294},8,[85,296,239],{"class":238},[85,298,242],{"class":231},[85,300,245],{"class":94},[85,302,248],{"class":231},[85,304,306,308,310],{"class":87,"line":305},9,[85,307,254],{"class":238},[85,309,242],{"class":231},[85,311,312],{"class":238},"512\n",[85,314,316],{"class":87,"line":315},10,[85,317,318],{"class":231},"}]\n",[10,320,321,322,325,326,329,330,333],{},"Rather than having to pipe this into a ",[22,323,324],{},"function"," node and re-map the properties to ",[22,327,328],{},"{ x, y }",", we can now use the ",[22,331,332],{},"ui-chart","'s key mapping properties:",[10,335,336],{},[161,337],{"alt":338,"src":339},"ui-chart-key-mapping","\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fui-chart-keymap-properties.png",[10,341,342],{},"Resulting in the following chart:",[10,344,345],{},[161,346],{"alt":338,"src":347},"\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fui-chart-mapping.png",[44,349,351],{"id":350},"multiple-lines","Multiple Lines",[10,353,354,355,358,359,362,363,366],{},"Note above, another new option has been added to define ",[154,356,357],{},"\"Series\"",". In Dashboard 1.0 this was fixed as ",[22,360,361],{},"msg.topic"," at all times, and defined which line\u002Fseries data points rendered too. Now, this is configurable, and can even be set as a ",[22,364,365],{},"key:"," type too, whereby each data point being treated individually, and grouped based on a given key\u002Fproperty.",[10,368,369,370,373,374,377],{},"Another great new feature here is the type ",[22,371,372],{},"JSON"," for this property. We can provide a ",[154,375,376],{},"list"," of series labels, and the chart will render each value from a single data point as separate lines.",[10,379,380],{},"For example, if we consider the data:",[76,382,384],{"className":222,"code":383,"language":224,"meta":81,"style":81},"[{\n    \"day\": \"2023-10-23\",\n    \"temperature\": 28,\n    \"humidity\": 16\n}, {\n    \"day\": \"2023-10-24\",\n    \"temperature\": 26,\n    \"humidity\": 19\n}, {\n    \"day\": \"2023-10-25\",\n    \"temperature\": 27,\n    \"humidity\": 24\n}]\n",[22,385,386,390,401,413,423,427,438,449,458,462,473,485,495],{"__ignoreMap":81},[85,387,388],{"class":87,"line":88},[85,389,232],{"class":231},[85,391,392,394,396,399],{"class":87,"line":235},[85,393,239],{"class":238},[85,395,242],{"class":231},[85,397,398],{"class":94},"\"2023-10-23\"",[85,400,248],{"class":231},[85,402,403,406,408,411],{"class":87,"line":251},[85,404,405],{"class":238},"    \"temperature\"",[85,407,242],{"class":231},[85,409,410],{"class":238},"28",[85,412,248],{"class":231},[85,414,415,418,420],{"class":87,"line":262},[85,416,417],{"class":238},"    \"humidity\"",[85,419,242],{"class":231},[85,421,422],{"class":238},"16\n",[85,424,425],{"class":87,"line":268},[85,426,265],{"class":231},[85,428,429,431,433,436],{"class":87,"line":279},[85,430,239],{"class":238},[85,432,242],{"class":231},[85,434,435],{"class":94},"\"2023-10-24\"",[85,437,248],{"class":231},[85,439,440,442,444,447],{"class":87,"line":289},[85,441,405],{"class":238},[85,443,242],{"class":231},[85,445,446],{"class":238},"26",[85,448,248],{"class":231},[85,450,451,453,455],{"class":87,"line":294},[85,452,417],{"class":238},[85,454,242],{"class":231},[85,456,457],{"class":238},"19\n",[85,459,460],{"class":87,"line":305},[85,461,265],{"class":231},[85,463,464,466,468,471],{"class":87,"line":315},[85,465,239],{"class":238},[85,467,242],{"class":231},[85,469,470],{"class":94},"\"2023-10-25\"",[85,472,248],{"class":231},[85,474,476,478,480,483],{"class":87,"line":475},11,[85,477,405],{"class":238},[85,479,242],{"class":231},[85,481,482],{"class":238},"27",[85,484,248],{"class":231},[85,486,488,490,492],{"class":87,"line":487},12,[85,489,417],{"class":238},[85,491,242],{"class":231},[85,493,494],{"class":238},"24\n",[85,496,498],{"class":87,"line":497},13,[85,499,318],{"class":231},[10,501,502,503,506],{},"We can provide a series: ",[22,504,505],{},"[\"temperature\", \"humidity\"]"," like so:",[10,508,509],{},[161,510],{"alt":338,"src":511},"\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fui-chart-series-property.png",[10,513,514],{},"Which would result in the following plot:",[10,516,517],{},[161,518],{"alt":338,"src":519},"\u002Fblog\u002F2023\u002F11\u002Fimages\u002Fui-chart-multipoint.png",[10,521,522],{},"We appreciate this offers a new way of working with data in Dashboard, but hopefully, once you've tried it, you'll find it much easier to work with, and see the value it brings when working with your own data sets.",[14,524,526],{"id":525},"what-else-is-new-in-07x","What else is new in 0.7.x?",[10,528,529],{},"Whilst we focussed this article on the migration paths and new UI Chart features, we did also squeeze quite a lot more into the 0.7.x releases too with plenty other fixes and improvements:",[531,532,533,541,548,555,562],"ul",{},[534,535,536],"li",{},[27,537,540],{"href":538,"rel":539},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F279",[148],"Re-architecture of Server-side State Management",[534,542,543],{},[27,544,547],{"href":545,"rel":546},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F327",[148],"Y Axis Min\u002FMax Options",[534,549,550],{},[27,551,554],{"href":552,"rel":553},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F320",[148],"\"Focus\" button for widgets added to Sidebar",[534,556,557],{},[27,558,561],{"href":559,"rel":560},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F310",[148],"No more \"blue screen\" and improved error reporting",[534,563,564],{},[27,565,568],{"href":566,"rel":567},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fpull\u002F301",[148],"Better route handling",[10,570,571],{},"You can also read the more comprehensive release notes for each release here:",[531,573,574,581,588],{},[534,575,576],{},[27,577,580],{"href":578,"rel":579},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.7.0",[148],"0.7.0 Release Notes",[534,582,583],{},[27,584,587],{"href":585,"rel":586},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.7.1",[148],"0.7.1 Release Notes",[534,589,590],{},[27,591,594],{"href":592,"rel":593},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv0.7.2",[148],"0.7.2 Release Notes",[14,596,598],{"id":597},"follow-our-progress","Follow our Progress",[10,600,601,602,39],{},"As always, thanks for reading and your interested in Dashboard 2.0. If you have any feature requests, bugs\u002Fcomplaints or general feedback, please do reach out, and raise issues on our relevant ",[27,603,606],{"href":604,"rel":605},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard",[148],"GitHub repository",[531,608,609,616],{},[534,610,611],{},[27,612,615],{"href":613,"rel":614},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[148],"Dashboard 2.0 Activity Tracker",[534,617,618],{},[27,619,622],{"href":620,"rel":621},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F4",[148],"Dashboard 2.0 Planning Board",[624,625,626],"style",{},"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 .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 .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":81,"searchDepth":235,"depth":235,"links":628},[629,632,635,639,640],{"id":16,"depth":235,"text":17,"children":630},[631],{"id":46,"depth":251,"text":47},{"id":139,"depth":235,"text":140,"children":633},[634],{"id":176,"depth":251,"text":177},{"id":192,"depth":235,"text":193,"children":636},[637,638],{"id":196,"depth":251,"text":197},{"id":350,"depth":251,"text":351},{"id":525,"depth":235,"text":526},{"id":597,"depth":235,"text":598},"md",{"navTitle":5,"excerpt":643},{"type":7,"value":644},[645],[10,646,12],{},true,"\u002Fblog\u002F2023\u002F11\u002Fdashboard-0-7",{"title":5,"description":12},"blog\u002F2023\u002F11\u002Fdashboard-0-7","2HtPNCPgOZo575f6qgtgtZMx9_n56fvIbi11i6xy-4Q",1780070551145]