[{"data":1,"prerenderedAt":196},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F10\u002Fdashboard-new-group-type-app-icon-and-charts":3},{"id":4,"title":5,"body":6,"description":12,"extension":185,"meta":186,"navigation":191,"path":192,"seo":193,"stem":194,"__hash__":195},"blog\u002Fblog\u002F2024\u002F10\u002Fdashboard-new-group-type-app-icon-and-charts.md","Dialogs, Customizable Icons and Histograms Now Available in FlowFuse Dashboard",{"type":7,"value":8,"toc":177},"minimark",[9,13,18,21,24,35,38,49,53,56,65,68,76,80,95,98,106,109,116,120,128,131,155,159],[10,11,12],"p",{},"This update introduces new ways to enhance data visualization and customization in your dashboards. With key improvements, including a new chart type, customizable app icon support and a dialog feature for groups, this release helps tailor dashboards for better user interaction and flexibility.",[14,15,17],"h2",{"id":16},"new-chart-type-histogram","New Chart Type: Histogram",[10,19,20],{},"Histograms are an essential tool for data analysis, offering a clear way to visualize distributions. The latest Dashboard update introduces a fully customizable histogram chart type, allowing you to present frequency distributions for your data.",[10,22,23],{},"Whether analyzing performance metrics or user activity, histograms can give you a clear view of how data points are distributed across predefined ranges. You can now easily group data and control the range, providing deeper insights at a glance.",[10,25,26,32],{},[27,28],"img",{"alt":29,"dataZoomable":30,"src":31},"Screenshot showing the new Histogram chart type","","\u002Fblog\u002F2024\u002F10\u002Fimages\u002Fchart-histogram.png",[33,34,29],"em",{},[10,36,37],{},"The real advantage of this new Histogram chart type is that it simplifies the process for you. Just pass in the raw data, and the histogram will automatically organize it into meaningful ranges, then display how often each range occurs. This makes it incredibly easy to extract valuable insights without the need for manual data processing.",[10,39,40,41,48],{},"You can see an example flow for the Histogram chart type ",[42,43,47],"a",{"href":44,"rel":45},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-chart.html#histograms",[46],"nofollow","here"," in our documentation.",[14,50,52],{"id":51},"customizable-app-icon","Customizable App Icon",[10,54,55],{},"Branding is an essential part of any user experience and with this new feature, you can customize your dashboard's app icon. The Node-RED Dashboard 2.0 now allows users to provide their own application icon, which appears in the browser tab and when the dashboard is installed as a Progressive Web App (PWA). This customization helps reinforce your brand, whether you’re developing IoT solutions, monitoring systems or creating dashboards for end-users.",[10,57,58,63],{},[27,59],{"alt":60,"dataZoomable":30,"src":61,"style":62},"Screenshot showing the customizable app icon in browser and as a PWA","\u002Fblog\u002F2024\u002F10\u002Fimages\u002Fapp-icon-installation.png","max-width: 400px; margin: auto;",[33,64,60],{},[10,66,67],{},"You can configure the icon by navigating to the base UI settings (ui-base) and providing an icon URL.",[10,69,70,71],{},"You can read more about how to use this feature in the ",[42,72,75],{"href":73,"rel":74},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fconfig\u002Fui-base.html#application-icon",[46],"App Icon Documentation",[14,77,79],{"id":78},"building-dialogs","Building Dialogs",[10,81,82,83,88,89,94],{},"Organizing data on dashboards has become more efficient with the new \"Dialog\u002FModal\" feature. Groups in Dashboard now have a new ",[42,84,87],{"href":85,"rel":86},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fconfig\u002Fui-group.html#type",[46],"\"Type\""," property, so they can be rendered inline as before, or instead rendered as a Dialog. The display of the dialog groups can be controlled (opened\u002Fclosed) via the ",[42,90,93],{"href":91,"rel":92},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-control.html#show-hide",[46],"Control"," node.",[10,96,97],{},"This removes the need for building custom modals and dialogs in a Template node, and makes the entire experience of building your dialogs low-code.",[10,99,100,104],{},[27,101],{"alt":102,"dataZoomable":30,"src":103},"Screenshot showing groups rendered as dialogs in the dashboard","\u002Fblog\u002F2024\u002F10\u002Fimages\u002Fui-group-type-dialog.png",[33,105,102],{},[10,107,108],{},"By utilizing groups as dialogs, users can maintain a clean dashboard while still having quick access to detailed data when required.",[10,110,111,112],{},"You can read more about the new property, and see an example flow in the ",[42,113,115],{"href":85,"rel":114},[46],"UI Group Documentation",[14,117,119],{"id":118},"what-else-is-new","What else is new?",[10,121,122,123,127],{},"You can find the full 1.18.0 Release Notes ",[42,124,47],{"href":125,"rel":126},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv1.18.0",[46],".",[10,129,130],{},"Just to highlight a few, particularly valuable, updates and fixes:",[132,133,134,138,149,152],"ul",{},[135,136,137],"li",{},"UI Chart - Group tooltips for line chart.",[135,139,140,141],{},"UI Button Group\n",[132,142,143,146],{},[135,144,145],{},"Show node status",[135,147,148],{},"Add pointerdown\u002Fpointerup event handling and fix button theming bug",[135,150,151],{},"UI Table - Support key type option for entering fixed strings as item labels",[135,153,154],{},"UI Switch - Layout Switching with Dynamic Configuration Support",[14,156,158],{"id":157},"whats-next","What's Next?",[10,160,161,162,166,167,171,172],{},"Work has already begun on the next release, ",[163,164,165],"code",{},"1.19.0",", you can see what items we have queued up ",[42,168,47],{"href":169,"rel":170},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[46],", if you've got any feedback or suggestions, please do let us know, and feel free to open new issues on our ",[42,173,176],{"href":174,"rel":175},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues",[46],"GitHub",{"title":30,"searchDepth":178,"depth":178,"links":179},2,[180,181,182,183,184],{"id":16,"depth":178,"text":17},{"id":51,"depth":178,"text":52},{"id":78,"depth":178,"text":79},{"id":118,"depth":178,"text":119},{"id":157,"depth":178,"text":158},"md",{"navTitle":5,"excerpt":187},{"type":7,"value":188},[189],[10,190,12],{},true,"\u002Fblog\u002F2024\u002F10\u002Fdashboard-new-group-type-app-icon-and-charts",{"title":5,"description":12},"blog\u002F2024\u002F10\u002Fdashboard-new-group-type-app-icon-and-charts","rPX8e-Xo8-C4mVTzO2bz3AFhd06lcrWEojGut3zEPuA",1780070552284]