聚合空间统计

此示例演示在使用 groupByFieldsForStatistics 时，如何在 FeatureLayerView 上运行聚合空间统计信息，以获取分组要素的凸包。每个统计信息组将有一个凸包，表示包含该组中所有要素的最小区域。

工作方式

该地图显示了按地区符号化的国家森林系统（NFS）土地。数据是从美国林务局网站下载的。

当应用程序启动时，查询将运行一次以生成聚合统计信息，以获取按其区域分组的林的计数和总英亩数。统计查询还会返回每个分组要素的凸包几何。凸壳包表示包含一个区域中所有森林的最小区域。

Use dark colors for code blocks
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Aggregate spatial statistics | Sample | GeoScene API for JavaScript 4.23</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <script type="module" src="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.esm.js"></script>
    <script nomodule="" src="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.css"/>
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      }

      calcite-shell-panel {
        --calcite-shell-panel-max-width: 345px;
        --calcite-shell-panel-min-width: 345px;
      }

      .content-container {
        overflow-x: hidden;
      }

      .geoscene-feature {
        letter-spacing: 0em;
        line-height: 1.55rem;
        font-feature-settings: "liga"1, "calt"0;
        background: #fff;
        padding: 1em;
      }
    </style>
    <script>
    require([
      "geoscene/Map",
      "geoscene/views/MapView",
      "geoscene/layers/FeatureLayer",
      "geoscene/widgets/Legend",
      "geoscene/widgets/Expand",
      "geoscene/widgets/Feature",
      "geoscene/core/reactiveUtils"
    ], (Map, MapView, FeatureLayer, Legend, Expand, Feature, reactiveUtils) =>
      (async () => {
        let chart;
        let groupField = "REGION";
        let statsField = "GIS_ACRES";

        const layer = new FeatureLayer({
          portalItem: {
            id: "6e8c367e59ab425a955623bba36e8e1b"
          },
          outFields: ["*"],
          blendMode: "multiply",
          effect: "drop-shadow(2px, 2px, 2px)",
          title: "National Forests By Regions"
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "eedd0d4fff1347dcb188c09832e640b4"
            }
          },
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 73957191,
          center: [-120, 38],
          padding: {
            right: 345
          },
          constraints: {
            minScale: 73957191
          }
        });

        const legendExpand = new Expand({
          content: new Legend({
            view
          }),
          expanded: false,
          expandIconClass: "esri-icon-legend",
          expandTooltip: "Expand Legend"
        });
        view.ui.add(legendExpand, "top-left");

        // Provide graphic to a new instance of a Feature widget
        const feature = new Feature({
          // graphic: graphic,
          map: view.map,
          spatialReference: view.spatialReference,
          visible: false
        });

        view.ui.add(feature, "bottom-left");

        const layerView = await view.whenLayerView(layer);
        await reactiveUtils.whenOnce(() => !layerView.updating);

        const aggregateForestDataByRegions = [];
        await runStats();

        // function runs once after when the app loads and runs stats query
        // on the national forests layer to get count, total acres of forests
        // in each region. It will also return convex-hull for each region so that
        // they can be used to show the convex-hull of features in each stats group.
        async function runStats() {

          const consumeStatsByRegion = {
            onStatisticField: statsField,
            outStatisticFieldName: "totalAcresStatsField",
            statisticType: "sum"
          };

          const forestsInRegion = {
            onStatisticField: "OBJECTID",
            outStatisticFieldName: "forestCountStatsField",
            statisticType: "count"
          };

          const aggregatedConvex = {
            statisticType: "convex-hull-aggregate",
            outStatisticFieldName: "aggregateConvexHull"
          };

          const query = layer.createQuery();
          query.groupByFieldsForStatistics = [groupField];
          query.orderByFields = [`${groupField} desc`];
          query.outStatistics = [
            consumeStatsByRegion,
            forestsInRegion,
            aggregatedConvex
          ];

          const statsResults = await layerView.queryFeatures(query);


          const regions = statsResults.features.map(function (feature, i) {
            return feature.attributes[groupField];
          });

          const chartData = statsResults.features.map(function (feature, i) {
            const region = {
              extent: feature.aggregateGeometries.aggregateConvexHull,
              region: feature.attributes[groupField],
              count: feature.attributes.forestCountStatsField,
              totalAcres: feature.attributes.totalAcresStatsField
            };
            aggregateForestDataByRegions.push(region);
            return feature.attributes.totalAcresStatsField;
          });
          const chartBlock = document.getElementById("chart-block");
          chartBlock.loading = false;
          updateChart(regions, chartData);
        }

        let currentBiggestPark = null;
        let previousRegion = "";

        const factSection = document.getElementById("factSection");
        factSection.addEventListener("calciteBlockSectionToggle", (event) => {
          handleParkPopup();
        });
        const resultBlock = document.getElementById("resultsHeading");
        const clearAction = document.getElementById("clearAction");

        // this function is called when user hovers over the donut chart
        // it will run stats on the region user is hovering over
        // get the number of forests in the region and get the largest forest
        function getForestStatsByRegion(data) {
          // run the query only when user is hovering over a new region on the chart
          if (data.region !== previousRegion) {
            resultBlock.heading = `Region ${data.region}`;
            resultBlock.disabled = false;
            resultBlock.open = true;
            clearAction.icon = "x";
            clearAction.disabled = false;
            clearAction.addEventListener("click", () => clearStatsInfo());

            const queryBiggestForest = layer.createQuery();
            queryBiggestForest.set({
              geometry: data.extent,
              orderByFields: [`${statsField} desc`],
              returnGeometry: true,
              num: 1
            });

            const totalAcres = parseInt(data.totalAcres).toLocaleString("en-US");

            // query for the selected region's forests for region specific stats
            layerView.queryFeatures(queryBiggestForest).then(async (results) => {
              if (results.features.length) {
                document.getElementById(
                  "acreageCount"
                ).innerHTML = `<b>${totalAcres}</b>`;
                document.getElementById(
                  "forestCount"
                ).innerHTML = `<b>${data.count}</b>`;

                currentBiggestPark = results.features[0];
                if (factSection.open) {
                  await handleParkPopup();
                }

                const card = document.createElement("calcite-card");
                const cardTitle = document.createElement("span");
                cardTitle.slot = "title";
                cardTitle.innerHTML = currentBiggestPark.attributes.FORESTNAME;

                const cardSubtitle = document.createElement("span");
                cardSubtitle.slot = "subtitle";
                cardSubtitle.innerHTML = `${currentBiggestPark.attributes.GIS_ACRES.toLocaleString("en-US")} acres`;

                const button = document.createElement("calcite-button");
                button.innerHTML = `Visit ${currentBiggestPark.attributes.FORESTNAME}`;
                button.iconEnd = `launch`;
                button.target = "_blank";
                button.width = "full";
                button.value = currentBiggestPark;
                button.href = currentBiggestPark.attributes.url;
                button.slot = "footer-trailing";

                factSection.innerHTML = "";
                factSection.text = `Highlight largest forest in region ${data.region}`;
                card.appendChild(button);
                card.appendChild(cardTitle);
                card.appendChild(cardSubtitle);
                factSection.appendChild(card);
              }
            });
          }
          previousRegion = data.region;
        }

        // this function is called once after the aggregate spatial statistics runs
        // show the total acres of forests in each region in the chart
        function updateChart(regions, chartData) {
          // Get the canvas element and render the chart in it
          const canvasElement = document.getElementById("chart");
          chart = new Chart(canvasElement.getContext("2d"), {
            type: "doughnut",
            data: {
              labels: regions,
              datasets: [
                {
                  backgroundColor: [
                    "#64bfae",
                    "#b277b0",
                    "#b8d161",
                    "#49b1d8",
                    "#f17474",
                    "#fda853",
                    "#f8a1e0",
                    "#ffe569",
                    "#c69a6f"
                  ],
                  borderWidth: 0,
                  data: chartData
                }
              ]
            },
            options: {
              responsive: false,
              legend: {
                display: false
              },
              title: {
                display: false
              },
              tooltips: {
                callbacks: {
                  label: (tooltipItem, data) => {
                    const acres =
                      data.datasets[tooltipItem.datasetIndex].data[
                        tooltipItem.index
                      ];
                    return (
                      "Region: " + data.labels[tooltipItem.index] + " Total acres: " + parseInt(acres).toLocaleString("en-US")
                    );
                  }
                }
              }
            }
          });

          async function updateMapForSelectedRegion(data) {
            view.graphics.removeAll();
            view.graphics.add({
              geometry: data.extent,
              symbol: {
                type: "simple-fill",
                color: [0, 0, 0, 0],
                outline: {
                  width: "3px",
                  color: "magenta"
                }
              }
            });
            getForestStatsByRegion(data);

            layerView.featureEffect = {
              filter: {
                where: `${groupField} = '${data.region}'`
              },
              excludedEffect: "blur(0pt) opacity(0.5) grayscale(1)",
              includedEffect: "drop-shadow(3pt 2pt 2pt rgba(50, 50, 50, 0.5))"
            };
          }


          // Add the convex hull of grouped forests for that region
          // set a featureffect on the layerview
          // run stats on forests of the clicked region
          canvasElement.addEventListener("mousemove", async () => {
            const data = await getRegionFromChart(event);
            if (data) {
              await updateMapForSelectedRegion(data);
            }
          });
        }


        // runs when user clicks on the largest forest stats
        let highlight;
        async function handleParkPopup() {
          if (currentBiggestPark && factSection.open) {
            if (!feature.visible) {
              feature.visible = true;
              feature.graphic = currentBiggestPark;
              highlight = layerView.highlight(currentBiggestPark);
            }

            if (feature.graphic && feature.graphic.attributes.OBJECTID !== currentBiggestPark.attributes.OBJECTID){
              highlight && highlight.remove();
              feature.graphic = currentBiggestPark;
              highlight = layerView.highlight(currentBiggestPark);
            }
          } else {
            feature.visible = false;
            highlight && highlight.remove();
          }
        }

        // clear out region related graphics and stats when user is not hovering over the chart
        function clearStatsInfo() {
          layerView.featureEffect = null;
          highlight && highlight.remove();
          feature.visible = false;
          view.graphics.removeAll();
          resultBlock.heading = `No region selected`;
          resultBlock.disabled = true;
          resultBlock.open = false;
          clearAction.icon = "blank";
          clearAction.disabled = true;
          clearAction.addEventListener("click", () => clearStatsInfo());
          factSection.open = false;
        }

        // called when user hovers over the donut chart
        async function getRegionFromChart(event) {
          const activePoints = chart.getElementsAtEvent(event);
          let selectedRegion = null;
          if (activePoints[0]) {
            const chartData = activePoints[0]["_chart"].config.data;
            const idx = activePoints[0]["_index"];

            const label = chartData.labels[idx];
            myLabel = label;
            const value = chartData.datasets[0].data[idx];

            aggregateForestDataByRegions.forEach((data) => {
              if (data.region === label) {
                selectedRegion = data;
              }
            });
          }
          return selectedRegion;
        }
      })());
    </script>
</head>

<body>
  <calcite-shell>
    <div id="viewDiv"></div>
    <calcite-shell-panel slot="contextual-panel" width-scale="">
      <calcite-panel heading="Total acreages of forests by region">
        <calcite-block open loading id="chart-block">
          <canvas id="chart" height="250" width="315" style="margin: 0 auto 1rem"></canvas>
          <calcite-notice active width="full" scale="s">
              <span slot="title">Instructions</span>
              <div slot="message">
                  Hover over the donut chart to see facts about forests in that
                  region.
              </div>
          </calcite-notice>
        </calcite-block>
        <calcite-block disabled id="resultsHeading" heading="No region selected" summary="Forest facts">
          <calcite-action disabled id="clearAction" slot="control" text="Clear" icon="blank">
          </calcite-action>
          <calcite-label layout="inline-space-between">Forests<span id="forestCount"></span></calcite-label>
          <calcite-label layout="inline-space-between">Acres<span id="acreageCount"></span></calcite-label>
          <calcite-block-section id="factSection" text="Highlight largest forest" toggle-display="switch">
          </calcite-block-section>
        </calcite-block>
    </calcite-panel>
    </calcite-shell-panel>
  </calcite-shell>
  </body>
</html>

然后，创建一个图表以显示每个区域中森林的总英亩数。用户可以将鼠标悬停在图表上以查看地图上的森林区域。表示包含该区域中所有森林的最小区域的凸包将添加到地图中，并且 featureEffect 将应用于图层视图以高亮显示所选区域中的森林。

Use dark colors for code blocks
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Aggregate spatial statistics | Sample | GeoScene API for JavaScript 4.23</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <script type="module" src="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.esm.js"></script>
    <script nomodule="" src="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.geoscene.cn/calcite-components/1.0.0-beta.76/calcite.css"/>
    <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
    <script src="https://js.geoscene.cn/4.23/"></script>

    <style>
      html,
      body,
      #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
      }

      calcite-shell-panel {
        --calcite-shell-panel-max-width: 345px;
        --calcite-shell-panel-min-width: 345px;
      }

      .content-container {
        overflow-x: hidden;
      }

      .geoscene-feature {
        letter-spacing: 0em;
        line-height: 1.55rem;
        font-feature-settings: "liga"1, "calt"0;
        background: #fff;
        padding: 1em;
      }
    </style>
    <script>
    require([
      "geoscene/Map",
      "geoscene/views/MapView",
      "geoscene/layers/FeatureLayer",
      "geoscene/widgets/Legend",
      "geoscene/widgets/Expand",
      "geoscene/widgets/Feature",
      "geoscene/core/reactiveUtils"
    ], (Map, MapView, FeatureLayer, Legend, Expand, Feature, reactiveUtils) =>
      (async () => {
        let chart;
        let groupField = "REGION";
        let statsField = "GIS_ACRES";

        const layer = new FeatureLayer({
          portalItem: {
            id: "6e8c367e59ab425a955623bba36e8e1b"
          },
          outFields: ["*"],
          blendMode: "multiply",
          effect: "drop-shadow(2px, 2px, 2px)",
          title: "National Forests By Regions"
        });

        const map = new Map({
          basemap: {
            portalItem: {
              id: "eedd0d4fff1347dcb188c09832e640b4"
            }
          },
          layers: [layer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          scale: 73957191,
          center: [-120, 38],
          padding: {
            right: 345
          },
          constraints: {
            minScale: 73957191
          }
        });

        const legendExpand = new Expand({
          content: new Legend({
            view
          }),
          expanded: false,
          expandIconClass: "esri-icon-legend",
          expandTooltip: "Expand Legend"
        });
        view.ui.add(legendExpand, "top-left");

        // Provide graphic to a new instance of a Feature widget
        const feature = new Feature({
          // graphic: graphic,
          map: view.map,
          spatialReference: view.spatialReference,
          visible: false
        });

        view.ui.add(feature, "bottom-left");

        const layerView = await view.whenLayerView(layer);
        await reactiveUtils.whenOnce(() => !layerView.updating);

        const aggregateForestDataByRegions = [];
        await runStats();

        // function runs once after when the app loads and runs stats query
        // on the national forests layer to get count, total acres of forests
        // in each region. It will also return convex-hull for each region so that
        // they can be used to show the convex-hull of features in each stats group.
        async function runStats() {

          const consumeStatsByRegion = {
            onStatisticField: statsField,
            outStatisticFieldName: "totalAcresStatsField",
            statisticType: "sum"
          };

          const forestsInRegion = {
            onStatisticField: "OBJECTID",
            outStatisticFieldName: "forestCountStatsField",
            statisticType: "count"
          };

          const aggregatedConvex = {
            statisticType: "convex-hull-aggregate",
            outStatisticFieldName: "aggregateConvexHull"
          };

          const query = layer.createQuery();
          query.groupByFieldsForStatistics = [groupField];
          query.orderByFields = [`${groupField} desc`];
          query.outStatistics = [
            consumeStatsByRegion,
            forestsInRegion,
            aggregatedConvex
          ];

          const statsResults = await layerView.queryFeatures(query);


          const regions = statsResults.features.map(function (feature, i) {
            return feature.attributes[groupField];
          });

          const chartData = statsResults.features.map(function (feature, i) {
            const region = {
              extent: feature.aggregateGeometries.aggregateConvexHull,
              region: feature.attributes[groupField],
              count: feature.attributes.forestCountStatsField,
              totalAcres: feature.attributes.totalAcresStatsField
            };
            aggregateForestDataByRegions.push(region);
            return feature.attributes.totalAcresStatsField;
          });
          const chartBlock = document.getElementById("chart-block");
          chartBlock.loading = false;
          updateChart(regions, chartData);
        }

        let currentBiggestPark = null;
        let previousRegion = "";

        const factSection = document.getElementById("factSection");
        factSection.addEventListener("calciteBlockSectionToggle", (event) => {
          handleParkPopup();
        });
        const resultBlock = document.getElementById("resultsHeading");
        const clearAction = document.getElementById("clearAction");

        // this function is called when user hovers over the donut chart
        // it will run stats on the region user is hovering over
        // get the number of forests in the region and get the largest forest
        function getForestStatsByRegion(data) {
          // run the query only when user is hovering over a new region on the chart
          if (data.region !== previousRegion) {
            resultBlock.heading = `Region ${data.region}`;
            resultBlock.disabled = false;
            resultBlock.open = true;
            clearAction.icon = "x";
            clearAction.disabled = false;
            clearAction.addEventListener("click", () => clearStatsInfo());

            const queryBiggestForest = layer.createQuery();
            queryBiggestForest.set({
              geometry: data.extent,
              orderByFields: [`${statsField} desc`],
              returnGeometry: true,
              num: 1
            });

            const totalAcres = parseInt(data.totalAcres).toLocaleString("en-US");

            // query for the selected region's forests for region specific stats
            layerView.queryFeatures(queryBiggestForest).then(async (results) => {
              if (results.features.length) {
                document.getElementById(
                  "acreageCount"
                ).innerHTML = `<b>${totalAcres}</b>`;
                document.getElementById(
                  "forestCount"
                ).innerHTML = `<b>${data.count}</b>`;

                currentBiggestPark = results.features[0];
                if (factSection.open) {
                  await handleParkPopup();
                }

                const card = document.createElement("calcite-card");
                const cardTitle = document.createElement("span");
                cardTitle.slot = "title";
                cardTitle.innerHTML = currentBiggestPark.attributes.FORESTNAME;

                const cardSubtitle = document.createElement("span");
                cardSubtitle.slot = "subtitle";
                cardSubtitle.innerHTML = `${currentBiggestPark.attributes.GIS_ACRES.toLocaleString("en-US")} acres`;

                const button = document.createElement("calcite-button");
                button.innerHTML = `Visit ${currentBiggestPark.attributes.FORESTNAME}`;
                button.iconEnd = `launch`;
                button.target = "_blank";
                button.width = "full";
                button.value = currentBiggestPark;
                button.href = currentBiggestPark.attributes.url;
                button.slot = "footer-trailing";

                factSection.innerHTML = "";
                factSection.text = `Highlight largest forest in region ${data.region}`;
                card.appendChild(button);
                card.appendChild(cardTitle);
                card.appendChild(cardSubtitle);
                factSection.appendChild(card);
              }
            });
          }
          previousRegion = data.region;
        }

        // this function is called once after the aggregate spatial statistics runs
        // show the total acres of forests in each region in the chart
        function updateChart(regions, chartData) {
          // Get the canvas element and render the chart in it
          const canvasElement = document.getElementById("chart");
          chart = new Chart(canvasElement.getContext("2d"), {
            type: "doughnut",
            data: {
              labels: regions,
              datasets: [
                {
                  backgroundColor: [
                    "#64bfae",
                    "#b277b0",
                    "#b8d161",
                    "#49b1d8",
                    "#f17474",
                    "#fda853",
                    "#f8a1e0",
                    "#ffe569",
                    "#c69a6f"
                  ],
                  borderWidth: 0,
                  data: chartData
                }
              ]
            },
            options: {
              responsive: false,
              legend: {
                display: false
              },
              title: {
                display: false
              },
              tooltips: {
                callbacks: {
                  label: (tooltipItem, data) => {
                    const acres =
                      data.datasets[tooltipItem.datasetIndex].data[
                        tooltipItem.index
                      ];
                    return (
                      "Region: " + data.labels[tooltipItem.index] + " Total acres: " + parseInt(acres).toLocaleString("en-US")
                    );
                  }
                }
              }
            }
          });

          async function updateMapForSelectedRegion(data) {
            view.graphics.removeAll();
            view.graphics.add({
              geometry: data.extent,
              symbol: {
                type: "simple-fill",
                color: [0, 0, 0, 0],
                outline: {
                  width: "3px",
                  color: "magenta"
                }
              }
            });
            getForestStatsByRegion(data);

            layerView.featureEffect = {
              filter: {
                where: `${groupField} = '${data.region}'`
              },
              excludedEffect: "blur(0pt) opacity(0.5) grayscale(1)",
              includedEffect: "drop-shadow(3pt 2pt 2pt rgba(50, 50, 50, 0.5))"
            };
          }


          // Add the convex hull of grouped forests for that region
          // set a featureffect on the layerview
          // run stats on forests of the clicked region
          canvasElement.addEventListener("mousemove", async () => {
            const data = await getRegionFromChart(event);
            if (data) {
              await updateMapForSelectedRegion(data);
            }
          });
        }


        // runs when user clicks on the largest forest stats
        let highlight;
        async function handleParkPopup() {
          if (currentBiggestPark && factSection.open) {
            if (!feature.visible) {
              feature.visible = true;
              feature.graphic = currentBiggestPark;
              highlight = layerView.highlight(currentBiggestPark);
            }

            if (feature.graphic && feature.graphic.attributes.OBJECTID !== currentBiggestPark.attributes.OBJECTID){
              highlight && highlight.remove();
              feature.graphic = currentBiggestPark;
              highlight = layerView.highlight(currentBiggestPark);
            }
          } else {
            feature.visible = false;
            highlight && highlight.remove();
          }
        }

        // clear out region related graphics and stats when user is not hovering over the chart
        function clearStatsInfo() {
          layerView.featureEffect = null;
          highlight && highlight.remove();
          feature.visible = false;
          view.graphics.removeAll();
          resultBlock.heading = `No region selected`;
          resultBlock.disabled = true;
          resultBlock.open = false;
          clearAction.icon = "blank";
          clearAction.disabled = true;
          clearAction.addEventListener("click", () => clearStatsInfo());
          factSection.open = false;
        }

        // called when user hovers over the donut chart
        async function getRegionFromChart(event) {
          const activePoints = chart.getElementsAtEvent(event);
          let selectedRegion = null;
          if (activePoints[0]) {
            const chartData = activePoints[0]["_chart"].config.data;
            const idx = activePoints[0]["_index"];

            const label = chartData.labels[idx];
            myLabel = label;
            const value = chartData.datasets[0].data[idx];

            aggregateForestDataByRegions.forEach((data) => {
              if (data.region === label) {
                selectedRegion = data;
              }
            });
          }
          return selectedRegion;
        }
      })());
    </script>
</head>

<body>
  <calcite-shell>
    <div id="viewDiv"></div>
    <calcite-shell-panel slot="contextual-panel" width-scale="">
      <calcite-panel heading="Total acreages of forests by region">
        <calcite-block open loading id="chart-block">
          <canvas id="chart" height="250" width="315" style="margin: 0 auto 1rem"></canvas>
          <calcite-notice active width="full" scale="s">
              <span slot="title">Instructions</span>
              <div slot="message">
                  Hover over the donut chart to see facts about forests in that
                  region.
              </div>
          </calcite-notice>
        </calcite-block>
        <calcite-block disabled id="resultsHeading" heading="No region selected" summary="Forest facts">
          <calcite-action disabled id="clearAction" slot="control" text="Clear" icon="blank">
          </calcite-action>
          <calcite-label layout="inline-space-between">Forests<span id="forestCount"></span></calcite-label>
          <calcite-label layout="inline-space-between">Acres<span id="acreageCount"></span></calcite-label>
          <calcite-block-section id="factSection" text="Highlight largest forest" toggle-display="switch">
          </calcite-block-section>
        </calcite-block>
    </calcite-panel>
    </calcite-shell-panel>
  </calcite-shell>
  </body>
</html>