Create a power outage map

The first step is to create the map that will serve as the geographic focus of the dashboard. You'll create a web map in ArcGIS Online with Map Viewer Classic and add the power outage layer. You will then style the layer and its pop-ups. This web map and its layers will be the data source for your other dashboard elements.

Add layers to a new map

First, you’ll create the map for your dashboard in ArcGIS Online.

  1. Sign in to your ArcGIS organizational account.
  2. At the top of the page, click Map to open a new map.

    Depending on your organization and user settings, the default map viewer could be different. This lesson uses Map Viewer Classic because it enables you to set a refresh interval for the data. If clicking Map at the top of the page does not take you to Map Viewer Classic, you can access it from the App Launcher.

  3. Click Add and click Add Layer from Web.
  4. Copy and paste the following web service into the URL field:

    https://services.arcgis.com/BLN4oKB0N1YSgvY8/arcgis/rest/services/Power_Outages_(View)/FeatureServer/0

    Note: This layer is the California Governor's Office of Emergency Services (Cal OES) Tracked Power Outage information for the state.

    The power outages in this layer are pulled directly from the utility public power outage maps, and the layer is automatically updated every 15 minutes. The following utility companies are included: Pacific Gas and Electric, Southern California Edison, San Diego Gas & Electric, Sacramento Municipal Utility District (SMUD), and Los Angeles Department of Water and Power (LADWP).

    Layers included in this dataset:

    • Power Outage Incidents—Point layer that shows data from all the utilities and is best for showing a general location of the outage and driving any numbers in dashboards.
    • Power Outage Areas—Polygon layer that shows the approximate geographic extent of the power outage.
    • Power Outages by County—This layer summaries the total impacted customers by county. This layer is useful for showing the impact of outages at the state level.

    Questions about this dataset may be directed to: GIS@caloes.ca.gov

  5. Click Add Layer.

    The map now displays power outages in California. Since the data is updated frequently, you'll set a refresh interval for the layer.

  6. On the Content tab of the Details pane, click the More options button for the Power Outages (View) - Power Outage Incidents layer.

    More options

  7. On the options list, click Refresh Interval.
  8. Check the check box and enter 15 for the number of minutes.

    Refresh interval

    This matches the interval at which the layer is updated.

  9. Click Basemap and choose Streets (Night).

Style the layer

A utility outage represents an event; either scheduled, or the result of a failure, that causes a disruption of service to customers. Outage locations are typically reported by remote devices designed to detect system faults. By default, the incidents on the map are classified as planned and not planned. This is a good way to classify the data, but the layer can be styled to better distinguish the two.

  1. On the Content tab of the Details pane, click Change Style for the Power Outages (View) - Power Outage Incidents layer.

    Change style.

  2. Choose Outage Type for the attribute to show.
  3. For the drawing style, choose Types (Unique symbols) and click Options.

    Configure style.

  4. Click the symbol next to Not Planned.
  5. From the Shapes drop-down menu, choose Firefly, and select a red color.
  6. Click OK.
  7. Change the symbol next to Planned, but choose a green color.
  8. Click OK.

    Change symbol style.

  9. Click Done to close the styles panel.

    Now that the two outage types have been symbolized more distinctly, you will apply clustering to visualize concentrations of outages.

  10. On the Content tab of the Details pane, click Cluster points for the Power Outages (View) - Power Outage Incidents layer.

    Cluster points.

  11. Check the Enable Clustering box and use the cluster slider to adjust the cluster radius.

    Cluster size slider

  12. Click OK.

Configure pop-ups

Pop-ups are useful for summarizing a given data point on the map. By default, most pop-ups show all data fields and values. As a utility officer, however, you’re only interested in seeing the cause of the outage, the estimated fix time, and the associated utility company. Configuring the layer’s pop-ups allows you to tailor the information you see.

  1. On the Content tab of the Details pane, click the More options button for the Power Outages (View) - Power Outage Incidents layer.
  2. From the options, click Configure Pop-up.
  3. In the Pop-up Title, type Power Outage: {IncidentId}.
  4. In the Pop-up Contents section, from the Display drop-down list, choose A custom attribute display.
  5. Click Configure.

    In the Custom Attribute Display editor, you can use a combination of static text, and attribute fields to create a custom pop-up.

  6. Click Add field name and click Impacted Customers {ImpactedCustomers}.

    Custom attribute display window

  7. In the text field, add the following attribute fields and text:

    {ImpactedCustomers} customers impacted. Power is expected to resume {EstimatedRestoreDate}.

    Cause: {Cause}

    Contact {UtilityCompany} for more details.

    Custom pop-up display

  8. Click OK to close the pop-up editor.
  9. Click OK to finish configuring your pop-up.
  10. Zoom in to the map to see individual outages.
  11. Click an outage on your map to view the pop-up.

    If you click a cluster, you will see the default pop-up for the cluster.

  12. Click Save to save your map.
  13. For the Title, type California power outages map and add your initials to make the map name unique within your organization.
  14. For Tags, type California, power, outages.
  15. For Summary, type A map of California power outages to be used in a dashboard.
  16. Click Save Map.

Create a power outage dashboard

Using ArcGIS Dashboards, you can create a dashboard that allows users to quickly see power outages and the relevant information about them. Dashboards offers many configuration options to visualize data. With advanced formatting, you can derive and visualize data that is not available in the feature layer. The first piece of information you will derive is the outage duration, which represents the total time in hours and minutes of each outage event from the reported time to the current time. The second piece of information you will derive is the Reliability Impact Index (commonly referred to as SAIDI, the System Average Interruption Duration Index), which represents the total number of customers impacted divided by the outage duration in minutes.

Create the dashboard

  1. On the California power outages map in Map Viewer Classic, click Share.

    Share

  2. Click Create a web app.
  3. Click the ArcGIS Dashboards tab.
  4. Enter the following information:
    • For the Title, type California power outages and add your initials.
    • For the Tags, add the tags Power outage and California separated by commas.
    • For the Summary, type This dashboard displays the current planned and unplanned power outages in the State of California.
  5. Click Done.

    ArcGIS Dashboards opens a newly created dashboard with the California power outages map element. You’ll make the theme of the dashboard dark to match the basemap.

  6. At the top of the dashboard, click the More options button and click Dark.

Dashboard theme options

Next, you will configure a list element using colors chosen to be seen on a dark background.

Configure the list element

The first element you will add to your dashboard is a list. A list is useful for showing features, in this case, outages. Using some advanced formatting, you can configure the list to display derived information about an outage.

  1. From the Add elements menu, choose List.
    Add element.
  2. On the list configuration page, click Power Outages (View) - Power Outage Incidents.
  3. On the Data tab, in the Sort by section, click Add field.
  4. From the drop-down list, choose StartDate/Time.
  5. Click Sort descending.

    Your list sorts to show the most recent outages at the top.

  6. Click the List tab.

    The list shows the Object ID for each data point. The ObjectID, however, doesn’t tell you anything about the outage. While some information is already available in the data, the outage duration and reliability index are not. You can calculate this using an Arcade expression. Arcade is a flexible expression language that allows you to work with data in real time in ArcGIS. You can use Arcade to perform field calculations on your data and customize how your data points render. You can build and apply Arcade expressions using the Arcade expression editor.

  7. Click Enable next to Advanced formatting.

    Enable advanced formatting.

    The Arcade editor opens.

    Note: Once advanced formatting is enabled, system-defined properties are made unavailable. All formatting of the list visualization is done through the expression.

    The Expression section is where you build the expression. The Globals and Functions tabs are where you find the elements you’ll use in the expression. The Globals tab includes a list of predefined variables to assist with building expressions. For example, $datapoint gives you access to the fields in your data. The Functions tab is where you access the library of Arcade functions. You can click the information button Information next to each function to see the function’s help on parameters, syntax, and usage. Using an Arcade expression, you will calculate the time elapsed between when the report was added and the current time. To do so, you will create a variable for the time the outage was reported, one for the current time, and use a built-in Arcade function to calculate the difference.

  8. On the Expression tab, delete the current expression.
  9. Type var dateOpened = to replace the deleted expression.
  10. Click after the equals sign, add a space, and click the click the Globals tab.
  11. Click the $datapoint.StartDate variable, then click the Expression tab.

    This line defines the StartDate value as the time the outage was reported.

    The dateOpened variable defined.

  12. Click after StartDate and press the Enter key.

    On the next line, you will define the second variable, which is the current time.

    1. Type var currentTime =
  13. Click the Functions tab and scroll down to the Now function.
  14. Click the Now function and click the Expression tab.

    This adds the function to your expression. The Now() function returns the current date and time:

    Now function

    var dateOpened = $datapoint.StartDate

    var currentTime =Now()

    Next, you'll use the two defined variables to calculate the time elapsed using the DateDiff function. The DateDiff function subtracts two dates and returns the difference in the specified units. For this calculation, you’ll return the time in minutes.

  15. Add a new line and type var minutesOpened = DateDiff(currentTime, dateOpened, 'minutes');

    Your Arcade editor should now look like the following:

    The minutesOpened variable defined.

    var minutesOpened = DateDiff(currentTime, dateOpened, 'minutes');

    That calculation returns how many minutes an outage has been active. However, there are times when outages last for hours, or even days. In these cases, seeing the number of minutes is not as meaningful. You can format how the elapsed time is shown using a function written in Arcade, to show minutes, hours, and days.

  16. You may notice that the code pane is a bit narrow. Click the Expand button in the Advanced formatting page to expand the code pane.

    Expand

    Now you can see more of each line.

  17. Add two lines and type the following function statement. See the comments (comments start with //) in the expression to review what each portion of the function does.

    Function for formatting elapsed time.

    //Define the function name.
    function formatElapsedTime(numMinutes) 
    { 
    //The elapsed time of an outage is not always a whole number.  
        numMinutes = Floor(Abs(numMinutes)); 
    //Using the Floor function, you can round down the time to number of hours and days. 
        var numHours = Floor((numMinutes/60),0); 
        var numDays = Floor((numMinutes/(60*24)),0); 
    //Using a When logic function, you can append the unit prefix to the value. 
        var elapsedTime = When( 
            numHours < 1, numMinutes + 'm', 
            numDays < 1, numHours + 'h ', 
            numDays + 'd ' 
             ); 
          return elapsedTime;  
    }

    Format elapsed time function.

    The function rounds the number of minutes down to get whole numbers, then uses floor division on those rounded minutes to calculate hours and days. Using a When logic function, it then appends the appropriate unit prefix.

    You will now define your final outage duration variable. This line creates a variable named timeFormatted that holds the results of the formatElapsedTime function you just created, applied to the minutesOpened variable to correctly display the elapsed time.

  18. Add another line after your function and type var timeFormatted = formatElapsedTime(minutesOpened);

    After calculating the outage duration, you can now calculate the reliability impact index. The reliability impact index is determined by calculating the number of customers impacted by the outage duration.

  19. Add another line and type var reliabilityIndex = Floor(($datapoint["ImpactedCustomers"]/minutesOpened),2);

    This new variable takes the Impacted Customers data point and divides it by the minutesOpened variable you created earlier. Since this value will likely be a fraction, applying the Floor function on the entire calculation rounds the number to a value with two decimal points.

    Now that you have the reliability impact index value, you can determine which outages are more severe or likely need more immediate attention. To make it easier to spot these outages on the list, you will create a color variable that will highlight incidents with a reliability impact index greater than 1.

  20. Add another line and type var severityColor = IIF(reliabilityIndex > 1, '#C22E00', '#363636')

    The variable uses the IFF function, which returns a given value, in this case, a color, if a condition is true and an alternate one if the value is false. In this case, if the value for the reliability impact index is above the threshold of 1, the color will be red. Otherwise, the color will be gray.

    Once you have your final variables, timeFormatted, reliabilityIndex, and severityColor, you will return them in the expression. This allows you to reference them in the line item template as new attributes to populate the list item.

  21. Add a line and type the following at the end of your expression:
    return { 
      attributes: { 
        timeFormatted: timeFormatted, 
        reliabilityIndex: reliabilityIndex, 
        severityColor: severityColor 
    } 
    }

    Your Arcade editor will look like this:

    Final

    The complete code is:

    var dateOpened = $datapoint.StartDate
    var currentTime =Now()
    var minutesOpened = DateDiff(currentTime, dateOpened, 'minutes');
    
    //Define the function name. 
    function formatElapsedTime(numMinutes)
    {
    //The elapsed time of an outage is not always a whole number. 
        numMinutes = Floor(Abs(numMinutes));
    //Using the Floor function, you can round down the time to number of hours and days.
        var numHours = Floor((numMinutes/60),0);
        var numDays = Floor((numMinutes/(60*24)),0);
    //Using a When logic function, you can append the unit prefix to the value.
        var elapsedTime = When(
            numHours < 1, numMinutes + 'm',
            numDays < 1, numHours + 'h ',
            numDays + 'd '
             );
          return elapsedTime; 
    }
    
    var timeFormatted = formatElapsedTime(minutesOpened);
    var reliabilityIndex = Floor(($datapoint["ImpactedCustomers"]/minutesOpened),2);
    var severityColor = IIF(reliabilityIndex > 1, '#C22E00', '#363636')
    
    return {
      attributes: {
        timeFormatted: timeFormatted,
        reliabilityIndex: reliabilityIndex,
        severityColor: severityColor
    }
    }

  22. Click the Reduce button.

    Reduce

  23. In the List options pane, scroll down below the Expression box to see the Line item template.

    Line item template

  24. Click Source.

    Source

    Dashboards allows you to use custom HTML to format your list items. Along with advanced formatting, this allows you to create custom visualizations that are not part of the system-defined properties. In the Line item template field, you can use the expression you just created along with HTML to format how each list item will display.

  25. Delete the <p>{OBJECTID}</p> line.
  26. Copy and paste the following into the editor:
    <div style="background-color:#363636; border-left:3px solid white; padding:0.4rem 0.3rem 0.3rem 0.6rem"> 
    
    <p><span style="font-size:16px; opacity:1">Time elapsed: {expression/timeFormatted}</span></p> 
    
    <p><span style="font-size:14px; opacity:1; padding:1px">{UtilityCompany} - {County}</span></p> 
    
    <p><span style="background-color:{expression/severityColor}; border-radius:5px; font-size:14px; opacity:1; padding:1px 6px">SAIDI: {expression/reliabilityIndex}</span></p> 
    
    </div>

    The first tag, <div style>, determines the structure line item. Within the div style, you determine the background color, border, and padding of the line item.

    The next lines that use the paragraph tag, <p>, determine the formatting of each piece of information included in the line item. For your list, you want to display the newly calculated time elapsed, the utility company, and the reliability impact index.

    For each <p> tag, you determine its styling using the <span style> tag and any styling properties. Within the <p> tag, you determine the text that is displayed in the line item. For example, in the first <p> tag, you are using displaying the text “Time elapsed:” and following it with the time elapsed expression.

  27. Click Source to preview your list formatting.
  28. Click Done.

Each list item now displays the time elapsed, the associated utility company, and the Reliability Impact Index (SAIDI) value. When the value is higher than the threshold, the value is highlighted in red.

List item

Configure the outage indicator

Now that you have a list that itemizes reported outages, the next step is to add an indicator. The indicator gives an at-a-glance summary of the number of outages that are active in the state. In addition to seeing the number of active outages, with the use of a reference value, advanced formatting, and custom HTML, you will create an alert for when an outage has been reported.

  1. Click Add elements and click Indicator.
  2. On the Select a layer page, click Power Outages (View) - Power Outage Incidents.
  3. On the Data tab, in the Reference type list, click Statistic.

    The reference value will be used to determine when a new outage is reported. You will filter the value to only include the outages that are within the last 5 minutes. This will set your baseline for a new outage to be 5 minutes.

  4. In the Reference section, click + Filter.
  5. Click the Field for the condition drop-down list and click Start Date/Time.
  6. For the operator, choose is within the last.
  7. For the value, enter 5 and for the unit, choose minutes.

    Date filter

    Now that you have the reference value, you’ll use advanced formatting to set up the data alert that will be added to the indicator title.

  8. Click the Indicator tab.
  9. For Advanced formatting, click Enable.

    Using Arcade, you will create the variable that will be used to determine when the new outage alert displays using an IFF logic function. Your condition will be based on the reference value you configured. The condition will state that if the count of outages reported within the last 5 minutes is greater than none, the message will be visible. If not, it will be hidden.

  10. In the editor, after the first several lines defining variables, add a line and type var visibility = IIF($reference.count > 0, 'visible', 'hidden')

    Next, you’ll return the visibility condition and the rest of what the indicator displays. You will also create the message you want displayed when there is a new outage. In this case, you’ll configure the message to read “New outage reported in the last 5 minutes”.

  11. In the editor, delete the block of code from return { to the last line.
  12. Copy and paste the following in its place:
    return { 
        middleText: $datapoint["count"], 
        middleTextMaxSize: 'large', 
        bottomText:'Active outages', 
        bottomTextMaxSize: 'medium', 
        attributes: { 
           visibility: visibility,  
           message: 'New outage reported in the last 5 mins' 
       } 
    
    }

    The return statement is where the different properties of the indicator are defined. For this indicator, you are only using the middle and bottom text areas. You also define the visibility variable that was created along with the message that is displayed when the visibility is true.

    Tip:

    You can define all parts of an indicator using advanced formatting. These properties are ones that would otherwise be defined using the standard configuration settings of the indicator. For a full list of indicator properties that can be defined, see Advanced formatting in an indicator.

  13. Scroll down below the code block and in the Icons section, click + Add.
  14. Choose the icon shown below.

    Power icon

    Tip:

    If your organization has a standard icon or graphic that is used for information visualization, you can use a custom SVG icon to display it.

    Now that the indicator has been set up, you can add the outage alert that will display when an outage is reported.

  15. Click the General tab.
  16. In the Title section, click Edit.

    Edit title.

  17. In the rich text editor, click Source.
  18. Copy and paste the following into the editor:
    <div style="background-color:#de290033; border-left:2px solid #de2900; box-shadow:0 4px 6px 0 hsla(0,0%,0%,0.2); color:##de2900; margin-bottom:0.4rem; margin-left:0.4rem; margin-right:0.4rem; margin-top:0.1rem; padding:0.7rem; visibility: {expression/visibility}; width:98%"> 
    <span style="font-size:16px">{expression/message} </span> 
    
    </div>

    In this case, HTML is used to define the style properties of the message. The first tag, <div style>, determines the structure. Within the <div style> tag, several properties, such as background color and border, are set. The visibility of the message is controlled by the visibility expression you created earlier.

  19. Click Source to preview your message.
  20. Click Done.

Your outage indicator now shows the total number of active outages in the state. When an outage has been reported in the last 5 minutes, the alert message appears at the top.

Indicator with and without alert

Configure the customer impact indicator

The last element you will add is an indicator summarizing the number of customers impacted by the outages, broken down by whether the outage type was planned or unplanned. Knowing the number of impacted customers is important to better assess the situation.

  1. Click Add elements and click Indicator.
  2. Click Power Outages (View) - Power Outage Incidents.
  3. From the Statistic drop-down list, choose Sum.
  4. From the Field drop-down list, choose Impacted Customers.

    Indicator statistic configuration

  5. In the Reference section, choose Statistic from the Reference type drop-down list.
  6. Click + Filter.
  7. From the Field for the condition drop-down list, choose Outage Type.
  8. For the operator, choose equal.
  9. For the value, choose Planned.

    Reference filter

  10. From the Statistic drop-down list, choose Sum.
  11. From the Field drop-down list, choose Impacted Customers.

    You now have the value and reference values to use in your indicator’s display. In this case, the value is the total number of impacted customers, and the reference value is the number of impacted customers from planned outages.

  12. Click the Indicator tab.

    Values, reference values, and predefined calculations can be directly injected into the indicator’s visualization using curly brackets {} or by using the Fields: {} button.

  13. In the Top text field, type Impacted customers.
  14. In the Middle text field, type Total:{value}.
  15. In the Bottom text field, type Planned: {reference} Unplanned: {difference}.

    Indicator configuration

  16. In the Value formatting section, click Edit.
  17. Turn off the Unit prefix.

    This allows you to see the exact values for the impacted customers.

  18. Click Done.

The indicator display is now populated with the total number of impacted customers, along with how many are impacted by planned and unplanned outages.

Final impacted customers indicator

Prepare the dashboard for viewing

Once you have created all of your dashboard elements, the next step is to arrange them in a readable way.

  1. Hover over the list element to see the Drag item option, then click and drag the list element toward the left side of the dashboard, and dock it to the left edge of the dashboard.

    Drag item

  2. Repeat for the two indicators, moving them to be stacked on top of each other on the right side of the dashboard.
  3. Hover over the left edge of the indicator column to get a resize cursor, then click and drag the column to make the map larger and the indicators smaller.

    Resize element.

    Your dashboard layout will look like this:

    Final power outage dashboard

  4. Click the Add elements menu and click Header.
  5. By default, the header title is the same as your dashboard’s title. Since your dashboard’s title is appropriate for the dashboard header, you can leave the rest of the settings as their default.
  6. Click Done.
  7. Click Save to save your dashboard.

In this lesson, you created a power outage map and a dashboard that allows you to quickly view incoming outages in the state of California. Using advanced formatting of list and indicator elements, you were able to derive and visualize data that was not readily available. In addition to visualizing new information, you were able to configure an alert for when an outage occurs. Being able to see outages as they come in can help cities, counties, and states make informed decisions and mobilize resources to more efficiently solve problems.