Customising Analytics Visualization: Dashboards and Widgets. DeepSee Web Part 2
Tags: analytics, fronted, json, programming
Published: 2023-12-23 14:49:16

<p dir="ltr"><span>Hi, Community!</span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beec-5e58-0391-e0c5238cdf1c">In the second part about <a href="https://community.intersystems.com/post/deepsee-web-intersystems-analytics-visualization-angularjs-part-1">DeepSee Web</a>, I’ll describe what customization options you have with DSW. &nbsp;</span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beec-5e58-0391-e0c5238cdf1c">There are two&nbsp;types of customizations:&nbsp;widget customization and dashboard panel customization.</span></p>

<p><b id="docs-internal-guid-2d054886-beed-a76b-82df-d6e551c09c09"><a href="https://analytics.community.intersystems.com/dswpub/index.html#!/f/Public/?ns=COMMUNITY&amp;embed=1"><img height="211" src="https://lh3.googleusercontent.com/JWEk68psRGbeSeOJSJz1duOfIKKb6Km2tO7ONPeA0zASc2vvxyoTY_UD7bh7oSleWlDFzVPlAjv1oiJWJX6csw_5HLqQpL2F4vB4MZ05Xmu0pDeIN6WUUEUrSDMVKO94h9lA5ArC" width="624"></a></b></p>
<p><em>Example of dashboard customization on Developer Community analytics.</em><!--break--></p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-beef-58a3-c46b-13121cd55399">Widget Customization</span></strong></p>

<p>&nbsp;</p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beef-58a3-c46b-13121cd55399">Every graph widget in DSW </span><span> can be tweaked by the following elements: legend, legend elements, values, top/all switcher.</span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beef-58a3-c46b-13121cd55399">You can find the tweak panel in the right corner of every graph widget.</span></p>

<p><b id="docs-internal-guid-2d054886-beef-2070-bf04-4b0cc129a710"><img height="200" src="https://lh5.googleusercontent.com/Vj1nxS5Qo9XQz_xANX_8kX9gGMoqQYviLsqGSBEZcfg5aZ2OiutC0AAhq_9HpttNhgK-sE7BWaYwRUGdMF7CWqr9C_Fmy8yM388WNKrrvisD-j5fPiupx8xIvdw3P9xF33qnW4Ig" width="624"></b></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef0-94f0-a338-4bf63436a541">Let’s see how it works.</span></p>

<p>&nbsp;</p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-bef0-94f0-a338-4bf63436a541">The Legend</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef0-94f0-a338-4bf63436a541">The small “i” stands for legend switcher. Click it to show/hide the legend.&nbsp;&nbsp;Also, you can show/hide any certain element of legend.</span></p>
<p dir="ltr"><b id="docs-internal-guid-2d054886-bef1-6cb8-b316-675dc9e270b4"><img height="427" src="https://lh4.googleusercontent.com/Qrkqhrm5zzGM9aNNZh8kkZ9QSRwH9NBpe4Q76zDyaqRvvvyrRzACOt7s25xEI40GMKbIhT_Cyy8Z_wcHb-1AFqo5fBk9QxrWoMxMKqYrNJ3cd5MXw_TZAoc--s9u7WFC6_ALl0Aj" width="541"> </b></p>
<p dir="ltr">&nbsp;</p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-bef1-e7e4-3eac-85092212266a">Top Rows Filter</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef1-e7e4-3eac-85092212266a">The star button is top/all switcher which helps to quickly turn on/off the top-20 filter for the first measure in a pivot.</span></p>

<p><b id="docs-internal-guid-2d054886-bef2-dcb9-6097-e597beb34792"><img height="492" src="https://lh5.googleusercontent.com/SBIuRggFl_bxASv9kuy94xMOYYeztwDuy8Vaj5dW-IlyZ4rns_a7jaDTgfS2D0ENtb_UZZ8DxB0zezvd0GNDmW6kwR8JQ1Njao-R2RTFtIZNLHNUoS6T0vxhsGA9IiiwjH2YHL9s" width="624"></b>If you introduce a&nbsp;rowcount control to a widget top-switcher will automatically use its value for top/all. And of course, you can add general rowcount/colcount controls to introduce special top filter behaviour.</p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-bef5-3e80-3c1d-6d9e2942f160">Values Switcher</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef5-3e80-3c1d-6d9e2942f160">“V” means </span>
vendetta
 values. Click it to show/hide values for the rows.</p>

<p><b id="docs-internal-guid-2d054886-bef5-ee76-7e33-f11e23ba7709"><img height="496" src="https://lh6.googleusercontent.com/YCqFfMqfYEfk07PRqMnnH7N2_WMY_QBGaMs0F7jeshpyNz243Fz06MuUBTGKq_mHKzB_a23Os-HS9Mc_lX0a-c7fPKaEbYcy6Ut5QVEON7BwKiebRrEttiimiLoFUYI03dGmVEhE" width="502"></b></p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-bef6-3bd4-7f71-b1b6ee955410">Widgets Layout</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef6-3bd4-7f71-b1b6ee955410">DSW initially gets widget layout from DeepSee dashboard resource and scales it accordingly to scale in DSW Settings: colcount (12 default) and widgets minimal height (100).</span></p>

<p><b id="docs-internal-guid-2d054886-bef6-eade-dd0c-444c0ee31d09"><img height="213" src="https://lh5.googleusercontent.com/rYtGMbCcKOHSF2TJ8ulnYQNZ9_LiHMc9Iy9x4CQTzY--2Hke7oFITaKiGe8MAq9FHlD6En99z4rVIc-PGKcExg6UDCBQjPpkMd1hJVgvOCCgo0o2io9S8rtmis3PYRUuGcLmdqDs" width="444"></b></p>
<p><span id="docs-internal-guid-2d054886-bef7-169f-187f-12ec115085c4">You can move and set the layout of widgets in the way you want. Especially it makes sense when you need to place the Filter control (Filter control automatically appears if you have any filters placed on the dashboard instead of widget).</span></p>
<p><b id="docs-internal-guid-2d054886-bef8-337f-acb6-f456cf8c200f"><img height="611" src="https://lh5.googleusercontent.com/38gGzwC3FoJXKGYLWJySSOdnD6t-d5ZqcuXqrLyJrkyPre6HeOCIuexPhZ6JVwbWC1BQX8aD_tvjteKUZpNI5WdhAkYst01sBEMuQrvKVk3gbV4FVZHR26TpNXy9mevT1fW3_5yz" width="624"></b></p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-bef8-78aa-b20d-cf0e8cb04769">Dashboard panel customization</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef8-78aa-b20d-cf0e8cb04769">In DSW you can customize how dashboard panel and tiles/covers look like.</span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-bef8-78aa-b20d-cf0e8cb04769">Here is &nbsp;Classic DeepSee Dashboards panel view:</span></p>

<p><b id="docs-internal-guid-2d054886-bef9-0e05-89ed-fbbeb3dc95d7"><img height="224" src="https://lh5.googleusercontent.com/PUKbvCpdHOY2DCXx3x9Tl6VKrT5kIDB9ly8ErQ8m3wSFHLohAPPf8laklTJ30yFp9RoNTi7ubUTM1aEooMduekP02uTj0FV1KdblZ-zzBgQVMIzksn1Erna49gO3vSkfrS8hLaNX" width="624"></b></p>
<p>&nbsp;</p>
<p><span id="docs-internal-guid-2d054886-befa-0b53-7227-7c3cb7c5e353">There &nbsp;are 3 ways In DSW to customize the Dashboard panel view ( you can alter customization in Settings):</span></p>
<p><b id="docs-internal-guid-2d054886-befa-6822-e469-c2af1c55374f"><img height="107" src="https://lh6.googleusercontent.com/eFZoqKj2a7JiHVMMA8LtSVvzyxmRq67cRbBjlOz9upNP4Iucfp7o3U7UCULlrOCnkVCNvo_lIcGirtjnF5YK-Ynxe_bj0xTyM2P0M0PgCdRNFMnGpP0f0EtkQr7vkhVtXCJ9kMOF" width="331"></b></p>
<p>&nbsp;</p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befa-8afa-097d-fb4190ed69b8">Turn on Show images to get images from DeepSee on dashboards covers:</span></p>

<p><b id="docs-internal-guid-2d054886-befa-b2ad-659c-fc0f2ed08a29"><img height="229" src="https://lh5.googleusercontent.com/vOjRuZCWBAtdDrPg1s3s5SDULLX_uVHFOxLPi8KAM-_-4GxXdJybBkCQmlchMSXyuhy_QN0VzHGUx0zIMUMM36kdVX1-bcy-z8ePV_42vgnVi_TaW_7uZSz8ZfpiRh3hgb2ac66X" width="333"></b></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befa-d871-0641-41a3c52351a8">And get the Dashboards panel with images:</span></p>

<p><b id="docs-internal-guid-2d054886-befb-1644-dcdf-1cf0cfdf711f"><img height="177" src="https://lh5.googleusercontent.com/uyCvGO1FN9-1JyrFFiV_6Dr60m4D6OCmxZfs01UQ-O6R6KQQnxGTfQwpnPK32zeo4j70UNVBqPqo_mquHr7nEpdi0qWK7jv-s_s7Rz5xiGAHS8Tz4yCFA5gvgiavpALcv0E5kh4O" width="624"></b></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befb-3a16-3407-c33c3185fe7c">Choose Show folders, and get same Dashboard panel organized in folders:</span></p>

<p><b id="docs-internal-guid-2d054886-befb-5c2e-2b8d-a303f0265b4f"><img height="127" src="https://lh5.googleusercontent.com/dsTMglmLSeG9n2vpNdInxdnxUGh4zkxHDEvZWeZVTWArhqxUSN1l9ZJrgJvgBU8LAz0PVun69H5xzMDTBUs7BfZhUYxhYpoyxAiUhGPxeyOaZMXhG3VX3krSwknVFrOY9bdOJzMD" width="624"></b></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befb-7e5f-a63b-94d741ca5bd0">Also, you can tweak the color, size of dashboard covers and make them interactive. </span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befb-7e5f-a63b-94d741ca5bd0">Open the Tile Editor in the right corner of Dashboards Panel.</span></p>

<p><b id="docs-internal-guid-2d054886-befb-da97-d08d-1d8ec0863d27"><img height="169" src="https://lh6.googleusercontent.com/a8KRXDP7EoeGSgpVh2xEIRYV_RjNuxKFmGDCcuZTHPk4kAsyvv_Ohov54fLMHB8xxYwVq2BE46izCN1yHVMjddFWp_6m5RKZPs7I4_uQGJ1TnjX9hJ4hGlgpYFWkvG_KjFmxjXqd" width="232"></b><span id="docs-internal-guid-2d054886-befc-0378-5071-7c54c275b2c4">You can alter the color, title, image or put a widget from dashboard on top of dashboard cover:</span><b id="docs-internal-guid-2d054886-befc-3cc9-1592-26b6f3449c7b"><img height="675" src="https://lh3.googleusercontent.com/Vr4-7O3TkHNv_cUm6LUqs347NYM4NHHGFCycK6DW2D2n_SwGcuG5feAz8UQ4kwBPdG3Ha_IkLOXSXkwYhMooPH6F4n2m1o8HXgh7kXgMtEryfop5hwN_8ef7a26RW6O1pr-QFpnw" width="624"></b><span id="docs-internal-guid-2d054886-befc-6a94-814c-b29171322dee">And you can peak the color theme for tiles in settings:</span><b id="docs-internal-guid-2d054886-befc-a5e4-a40e-4e1a8bb12688"><img height="233" src="https://lh4.googleusercontent.com/XeYNvGQCrH7G5HowS4EO-d7I7-aXeJyMZucslsJF5Bb3mCsR7UjwhI3G3OYDr4-zYeP5BS9OX-k-kE7As34j66vefYM6jkbVWNDqw5m3k_GA3sDx8lJfoc50BnKM0J7Qd7dZMGkr" width="341"></b><span id="docs-internal-guid-2d054886-befc-e48b-ba17-4297b8e07e97">E.g. here is the contrast theme for </span><a href="https://analytics.community.intersystems.com/dswpub/index.html#!/f/Public?ns=COMMUNITY">Community Analytics:</a><b id="docs-internal-guid-2d054886-befd-11bf-23b7-0a4f111ff772"><img height="211" src="https://lh3.googleusercontent.com/JWEk68psRGbeSeOJSJz1duOfIKKb6Km2tO7ONPeA0zASc2vvxyoTY_UD7bh7oSleWlDFzVPlAjv1oiJWJX6csw_5HLqQpL2F4vB4MZ05Xmu0pDeIN6WUUEUrSDMVKO94h9lA5ArC" width="624"></b><span id="docs-internal-guid-2d054886-befd-3805-061b-2cdacf851677">And here is metro theme for the same dashboards panel:</span><b id="docs-internal-guid-2d054886-befd-5e50-4171-4ba9ea272b17"><img height="209" src="https://lh5.googleusercontent.com/LhOqQHmUPbJEMI9-jHzc6noZUAMdOysVm1q8Jg7OtwH9KgRi3jK9cjz-tI9hHjLo22tLWi9rQmY6KZDAj08ttNN_NamQCuMKMcrF2oS9bP2TAAAMhG2huPlGTPkpkqIr3Py3mXta" width="624"> </b></p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-befd-9733-d9db-72210374a3a6">Customization Deployment</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befd-9733-d9db-72210374a3a6">What about deployment? How to deliver the settings and customizations from dev to your production solution?</span></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befd-9733-d9db-72210374a3a6">To do this you can export the current set of customizations in&nbsp;the Settings menu. </span></p>

<p><b id="docs-internal-guid-2d054886-befe-c081-87dd-cf0ecfe9b91e"><img height="266" src="https://lh5.googleusercontent.com/ehVD8aFtt-1vGuaH-IgoaxB52eeNYiCbHj159Me4wb801FFAEyrgXS3wiubf1vkY1WMqKhjbyLAbGhdGN-WqeREcEUBnLrhvleKBee61EUCRwDX1lJLh8m3TYrfKMWfarDgJv4VN" width="386"></b></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-befe-ea90-0844-42d02b8bd519">It will export all the settings to settings.json file, which you can deploy on a target production server. DSW expects to find the file with settings in /csp/dsw/configs/namespace.json file.</span></p>

<p><span id="docs-internal-guid-2d054886-befe-ea90-0844-42d02b8bd519">E.g. here is the </span><a href="https://gist.github.com/evshvarov/cbfe29b8d5fe87acf3db0c96ac84f76f#file-samples-json">samples.json</a> file, which you can place in your DSW installation in /csp/dsw/config/samples.json and DSW will automatically load the settings for dashboards in this namespace.</p>
<p dir="ltr"><strong><span id="docs-internal-guid-2d054886-beff-2dd4-18f8-a7dd36753631">Customization never ends</span></strong></p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beff-2dd4-18f8-a7dd36753631">It’s a known issue that in every case with design, settings, tweaks, etc there is always a room for more customization. So, if you want any more features in this field, please feel free to introduce </span><a href="https://github.com/intersystems-ru/DeepSeeWeb">issues</a>, or implement this features and introduce a <a href="https://github.com/intersystems-ru/DeepSeeWeb/pulls">pull request</a>.</p>
<p dir="ltr"><span id="docs-internal-guid-2d054886-beff-2dd4-18f8-a7dd36753631">And there would be more parts about DSW features. See <a href="https://community.intersystems.com/post/deepsee-web-intersystems-analytics-visualization-angularjs-part-1">the part 1</a> and stay tuned!</span></p>