const layer = new GeoJSONLayer({
  ...
  // specify timeInfo for the layer
  timeInfo: {
    startField: "time", // name of the date field
    interval: {
      unit: "days",
      value: 1
    }
  }
  ...
});

      <!-- Initialize the Time Bar with ticks and a locked time window -->
      <arcgis-time-bar show-play show-next show-previous show-time-extent id="time-bar" play-rate="50">
        <arcgis-time-bar-slider
          slot="time-extent"
          show-min
          show-max
          show-ticks
          show-lock-time-window
          lock-time-window
          popover-display="always"
        >
          <arcgis-ticks slot="content-end" mode="value" show-labels> </arcgis-ticks>
          <div slot="popover" class="time-label"></div>
        </arcgis-time-bar-slider>
      </arcgis-time-bar>

      // Hide earthquakes after the selected time window and dim those before it
      // Show statistics for earthquakes within both the window and the current map extent
      // Update the slider popover content whenever the time extent changes
      timeBar.addEventListener("arcgisPropertyChange", async (event) => {
        try {
          if (event.detail.name === "timeExtent") {
            updatePopover();
          }

          // Exclude earthquakes after the window's end from the layer
          const date = new Date(timeBar.timeExtent.end).toISOString().replace("T", " ").replace("Z", "");
          layer.definitionExpression = `time <= Timestamp '${date}'`;

          // Dim earthquakes outside the selected time window or current map extent
          layerView.featureEffect = {
            filter: {
              timeExtent: timeBar.timeExtent,
              geometry: viewElement.extent,
            },
            excludedEffect: "grayscale(20%) opacity(12%)",
          };

          // Count earthquakes and summarize magnitude and depth within the time window and map extent
          const statQuery = layerView.featureEffect.filter.createQuery();
          statQuery.outStatistics = [magMax, magAvg, magMin, tremorCount, avgDepth];

          const result = await layer.queryFeatures(statQuery);
          statsDiv.textContent = "";

          // Display the returned count and summary statistics in the panel
          if (result.features.length >= 1) {
            const attributes = result.features[0].attributes;

            // Format the magnitude and depth statistics to two decimal places
            const statisticsHtml = Object.keys(statsFields)
              .map((name) => {
                if (attributes[name] != null) {
                  return `<br/>${statsFields[name]}: <span>${attributes[name].toFixed(2)}</span>`;
                }
                return "";
              })
              .join("");

            // Pair the earthquake count with the selected start and end dates
            const timeWindowHtml = `
                <span>${attributes.tremor_count}</span> earthquakes were recorded between
                ${timeBar.timeExtent.start.toLocaleDateString()} -
                ${timeBar.timeExtent.end.toLocaleDateString()}.<br/>
              `;

            statsDiv.innerHTML = timeWindowHtml + statisticsHtml;
          }
        } catch (error) {
          console.error(error);
        }
      });