Histogram

Simple example

A Histogram can be used to visualize the distribution of a field in a layer. In ESRIEACT, the Histogram component is a wrapper around the ESRI Histogram widget. This widget still requires properties derived from the imperative use of smartMapping tools like histogram, and possibly summaryStatistics. As ESRIEACT's focus is on presentational components, the imperative use of smartMapping functions is not abstracted away.

Live Editor

function Example() {
  const layer = useRef<FeatureLayer>(null);

  const [layerReady, setLayerReady] = useState(false);
  const [histogramResult, setHistogramResult] = useState<HistogramResult>(null);
  const [stats, setStats] = useState<SummaryStatisticsResult>(null);

  useEffect(() => {
    if (layerReady) {
      const createHistogram = async () => {
        const histogramResult = await histogram({
          layer: layer.current,
          field: "pop20",
          numBins: 50,
        });
        setHistogramResult(histogramResult);

        const summaryStatisticsResult = await summaryStatistics({
          layer: layer.current,
          field: "pop20",
        });
        setStats(summaryStatisticsResult);
      };

      createHistogram();
    }
  }, [layerReady]);

  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT_2 }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <FeatureLayer
        ref={layer}
        url={HI_CENSUS_2020_FL_URL}
        events={{ "layerview-create": () => setLayerReady(true) }}
        renderer={HI_CENSUS_2020_FL_RENDERER}
      />

      <Legend position="top-right" />

      <h4 className="mt-2! mb-0!">Population 2020</h4>
      <div id="histogram-container" style={{ height: "300px", width: "100%" }}>
        {histogramResult && stats && (
          <Histogram
            container="histogram-container"
            bins={histogramResult.bins}
            min={histogramResult.minValue}
            max={histogramResult.maxValue}
            average={stats.avg}
            labelFormatFunction={function (value) {
              return Math.round(value).toLocaleString();
            }}
          />
        )}
      </div>
      <div className="flex justify-between">
        <div>{histogramResult?.minValue}</div>
        <div>{histogramResult?.maxValue?.toLocaleString()}</div>
      </div>
    </MapView>
  );
}

Result

Loading...