require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/renderers/smartMapping/statistics/histogram",
  "esri/renderers/smartMapping/statistics/summaryStatistics",
  "esri/widgets/Histogram",
  "esri/widgets/Legend",
  "esri/intl"
], function(
  Map,
  MapView,
  FeatureLayer,
  histogram,
  summaryStatistics,
  Histogram,
  Legend,
  intl
) {
  
  // Go to line 103 to see how to add an average
  // and data lines to your histogram

  const layer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/California_Housing_and_Population_Stats_by_1km/FeatureServer/0",
    definitionExpression: "MEDHINC_CY > 0",
    title: "Income in Southern California",
    renderer: {
      type: "simple",
      label: "Each feature is 1 square km",
      symbol: {
        type: "simple-fill",
        outline: {
          color: [153,153,153,0.25],
          width: 0.375
        }
      },
      visualVariables: [{
        type: "color",
        field: "MEDHINC_CY",
        legendOptions: {
          title: "Median Household Income"
        },
        stops: [
          { value: 30000, color: "rgba(237, 248, 251, 1)", label: "< $30,000" },
          { value: 60000, color: "rgba(179, 205, 227, 1)", label: "" },
          { value: 85000, color: "rgba(140, 150, 198, 1)", label: "$85,000" },
          { value: 120000, color: "rgba(136, 86, 167, 1)", label: "" },
          { value: 180000, color: "rgba(129, 15, 124, 1)", label: "> $180,000" }
        ]
      }]
    },
    popupEnabled: false
  });

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

  const view = new MapView({
    container: "viewDiv",
    map: map,
    scale: 577790,
    center: [-117.8099, 34.0441]
  });

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

  const field = "MEDHINC_CY";
  let layerView = null;
  view.whenLayerView(layer)
    .then(function(lv){
      layerView = lv;
      return getAverage(field)
    })
    .then(function(average){
      return generateHistogram(field, average);
    })
    .catch(function(error){
      console.error(error);
    });


  let histogramMinLabel = document.getElementById("minLabel");
  let histogramMaxLabel = document.getElementById("maxLabel");
  let histogramTitle = document.getElementById("title");

  function generateHistogram(fieldName, average){
    return histogram({
      layer: layer,
      field: fieldName,
      numBins: 100
    }).then(function(histogramResult){
      
      const histogramChart = Histogram.fromHistogramResult(histogramResult);
      histogramChart.container = "histogramDiv";
      
      // Add more context to your histogram with average
      // and data lines
      histogramChart.average = average;
      histogramChart.dataLines = [{
        value: 25750,
        label: "Federal Poverty Line"
      }];
      
      // The labelFormatFunction allows you to customize
      // the formatting of numeric values
      histogramChart.labelFormatFunction = formatValueToCurrency;
      histogramMaxLabel.innerText = formatValueToCurrency(histogramResult.maxValue);
      histogramMinLabel.innerText = formatValueToCurrency(histogramResult.minValue);
      const vv = layer.renderer.visualVariables[0];
      histogramTitle.innerText = vv.legendOptions.title;
    });
  }

  function getAverage(fieldName) {
    return summaryStatistics({
      layer: layer,
      field: fieldName
    }).then(function(statistics) {
      return statistics.avg;
    });
  }

  function formatValueToCurrency (value) {
    return intl.formatNumber(value, {
      style: "currency",
      currency: "USD",
      currencyDisplay: "symbol",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    });
  }

});