This sample demonstrates using Calcite components and the ArcGIS Maps SDK for JavaScript to create a dashboard-style application layout — with a header, map, and various panels to display information and controls.
Dashboards are commonly used for displaying important data points alongside a map, and providing controls for users to configure the display or information shown.
Often, a map is only one part of the experience, and in some cases may not be present at all. The flexibility of the Shell and other layout components helps support a variety of dashboard-style layouts, with the map as the focal point, or as a supporting element to other content.
Layout considerations
This application demonstrates the display of configuration options and data points alongside a map. The map is the focal point of the application, so the other elements should take only as much room as necessary.
This dashboard display is comprised of a variety of Panels, used to display key metrics, configuration options, and the map. Shell Panels are placed in the Shell's default slot, and CSS grid is used to position the Panels in a way that makes the most of the available space while keeping the map as the focal point.
When resizing the screen, the orientation and order of the Panels change to stack on top of each other to make the most use of the available space.
Responsive behavior
While responsive behaviors are built into many Calcite components, this sample application uses custom CSS to change the orientation of components based on the width of the viewport.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes. This often involves moving content to different slots, changing component properties, or even hiding content altogether. In this sample, a combination of CSS and JavaScript adjustments to component properties create an adaptive experience.
The "Dashboard options" set of controls is within a visible Panel on wider viewports. On smaller viewports, the same component is housed with a Sheet. CSS is used to control the visibility of the Panel within the grid layout, and JavaScript is used to control the open state of the Sheet. Additionally, the navigation-action property of Navigation is used to display an interactive control to invoke the Sheet.