<div id="viewDiv">
</div>
html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/layers/GraphicsLayer",
  "esri/widgets/LayerList",
  "esri/widgets/Sketch",
  "esri/tasks/support/StatisticDefinition"
], function (ArcGISMap, MapView, FeatureLayer, GraphicsLayer, LayerList, Sketch, StatisticDefinition) {
  
  const graphicsLayer = new GraphicsLayer({
    listMode: "hide"
  });
  
  const featureLayer = new FeatureLayer({
    portalItem: {
      id: "b234a118ab6b4c91908a1cf677941702"
    },
    outFields: ["NAME", "STATE_NAME", "VACANT", "HSE_UNITS"],
    title: "U.S. counties",
    opacity: 0.8
  });

  const map = new ArcGISMap({
    basemap: "streets",
    layers: [featureLayer, graphicsLayer]
  });
  const view = new MapView({
    container: "viewDiv",
    map: map
  });
  
  const layerList = new LayerList({ view });
  
  const sketch = new Sketch({
    view,
    layer: graphicsLayer
  });
  
  view.ui.add(layerList, "top-right");
  view.ui.add(sketch, "top-right");
  
  view.when(async () => {
    await featureLayer.when();
    view.extent = featureLayer.fullExtent;
    
    const layerView = await view.whenLayerView(featureLayer);
    
    sketch.on("create", async ({ graphic, state }) => {
      if (state === "complete") {
        const avgStatistic = new StatisticDefinition({
          onStatisticField: "VACANT",
          outStatisticFieldName: "VACANT_AVG",
          statisticType: "avg"
        });
        
        const query = featureLayer.createQuery();
        query.geometry = graphic.geometry;
        query.outStatistics = [avgStatistic];
        
        const featureSet = await layerView.queryFeatures(query);
        console.log(featureSet)
      }
    });
  });
});

External CSS

  1. https://js.arcgis.com/4.18/esri/themes/dark/main.css

External JavaScript

  1. https://js.arcgis.com/4.18