The Diagnostic Analytics

The Diagnostic Analytics tool further breaks down the INFORM risk into Hazard, Exposure and Vulnerability indexes for selected sub-national level. The diagnostic analytics shows graphs of the three dimensions, each followed by components in numeric value (on the scale of 0 to 10, 0 being no risk factor to 10 being high risk factor). With a new released, the diagnostic analytics has been improved based on users’ feedback such as scale on the graphs are uniform begin with 0 to 10, and improving map display performance

The Diagnostic Analytics tool is developed using Calcite Web, Chart.js, and ArcGIS API for JavaScript 4.16.

• Calcite Web is a branded CSS & JavaScript framework, web style guide, and visual design system for Esri. You can use Calcite Web to quickly build on-brand, lightweight, and accessible websites. The robust codebase is well supported, steadily maintained, and always being improved.
• Chart.js is an easy way to include animated, interactive graphs on your website for free. Simple, clean, and engaging HTML5 based JavaScript charts.
• The ArcGIS API for JavaScript is a lightweight way to embed maps and tasks in web applications. You can get these maps from ArcGIS Online, your own ArcGIS Enterprise or others' servers.

This document will walk you through exploring diagnostic page with Calcite Web. We'll go over getting a basic HTML page, stubbing out a layout, and adding map. Then, we will use the Chart.js library to create a radar chart.

Overview the Diagnostic HTML page

The diagnostic HTML page can be found in <<your web server path>>\DSS\FJI\Diagnostic\index.html.

Load all CSS and JavaScript files.

The above code does a lot of things:

1. General HTML boilerplate (meta, title, conditional IE classes, head and body tags)
2. Load the 1.2.5 version of Calcite Web's CSS and JS from the CDN
3. Load custom CSS file in line 14.
4. Load the 2.9.3 version Chart.js library in line 15.
5. Load the ArcGIS API for JavaScript version 4.16 in line 17.
6. Load custom JavaScript libraries which are Main.js and radarChart.js in line 19 and 21 respectively.
   • Main.js is a JavaScript library for creating a map.
   • radarChart.js is a JavaScript library for creating radar charts to display exposure to hazard, vulnerability, and lack of coping capacity charts.

Add navigation bar.

A navigation bar is a navigation header that is placed at the top of the page. See Navigation Examples

Design a page layout.

The Diagnostic application is designed using the Calcite Grid System.

The Calcite Grid System includes a full, responsive, and configurable grid with columns, a container, and a 'Block Group' grid. The main grid is different from standard CSS grid systems in two keyways:

1. Column widths are defined by the viewport size rather than percentage of their containers.
2. Built-in smart defaults for responsive sizing puts less columns across the screen at smaller sizes, rather than smaller columns.

Please see the Calcite Grid System for full details.

Configuring the application to work with your data

By default, the Diagnostic application displays map, list, and radar charts using an INFORM feature service hosted by UNOSAT. In order to configure it to work with your own data, you will have to follow the steps outlined in this document.

Once you have a feature service, you will have to modify some of the configuration settings in before deploying the application.

The following settings must be modified:

1. Go to application folder: <<your web server path>>\DSS\FJI\Diagnostic\app\Main.js
2. Open the JavaScript file in a text editor and replace the default featureLayer ID in line 95.
3. Make sure you have the same fields schema with this feature service.
4. Find your web map id, navigate to ArcGIS Online, and find the feature service you want to display. If it is one of your feature services, make sure it's shared with everyone (public). View the item details and copy the ID from the URL in the top of your browser. The section you need to copy is bolded in the following URL: arcgis.com/home/item.html?id=e4b5ff939c7d475582c37dd7bab54fce

In addition, you may need to change the following settings:

1. Go to application folder: <<your web server path>>\DSS\FJI\Diagnostic\app\radarChart.js
2. Open the JavaScript file in a text editor and edit radar chart properties. For updating radar chart properties, see Radar Chart.

For more information, see

• QuickStart Calcite Web
• Navigation Examples
• Calcite Grid System
• Radar Chart with Chart.js