webdev01/OFCAbstract/new 42.txt

import React, { useEffect, useState } from "react";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Query from "@arcgis/core/rest/support/Query";
import StatisticDefinition from "@arcgis/core/rest/support/StatisticDefinition";
import "../styles.css";

const streetLightLayerUrl =
  "https://gisgcc.chennaicorporation.gov.in/server/rest/services/GCCDepts/streetlight_Enumeration/FeatureServer/0";

const RoadWiseStreetLightCount: React.FC = () => {
  const [counts, setCounts] = useState<
    { zone: string; ward: string; road_name: string; RoadSide_Count: number; CentreMedianCount: number;ParksCount: number;BuildingsCount: number;BurialGround:number;PlayGround:number }[]
  >([]);
  const [zone, setZone] = useState<string>("");
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  const fetchCountData = async () => {
    try {
      setLoading(true);
      setError("");
      const streetLightLayer = new FeatureLayer({ url: streetLightLayerUrl });
      let whereClause = "1=1";
      if (zone) whereClause = `zone='${zone}'`;

      const query = new Query();
      query.where = whereClause;
      query.returnGeometry = false;
      query.groupByFieldsForStatistics = ["zone", "ward", "road_name", "Position_of_post","highmast_position"];
      query.outStatistics = [
        new StatisticDefinition({
          statisticType: "count",
          onStatisticField: "Position_of_post",
          outStatisticFieldName: "count",
        }),
      ];
      query.outFields = ["zone", "ward", "road_name", "Position_of_post","highmast_position"];
      query.orderByFields = ["zone ASC", "ward ASC", "road_name ASC"];

      const result = await streetLightLayer.queryFeatures(query);
      const summary: { [key: string]: { RoadSide_Count: number; CentreMedianCount: number;ParksCount: number;BuildingsCount: number;BurialGround:number;PlayGround:number } } = {};

      result.features.forEach((feature) => {
        const { zone, ward, road_name, category } = feature.attributes;
        const count = feature.attributes.count as number || 0;
        const key = `${zone}_${ward}_${road_name}`;

        if (!summary[key]) {
          summary[key] = { RoadSide_Count: 0; CentreMedianCount: 0;ParksCount: 0;BuildingsCount: 0;BurialGround:0;PlayGround:0 };
        }

        if (Position_of_post === "Centre median") {
          summary[key].CentreMedianCount += count;
        } else if (Position_of_post === "Roadside") {
          summary[key].RoadSide_Count += count;
        }
		} else if (Position_of_post === "Parks") {
          summary[key].ParksCount += count;
        }
		} else if (Position_of_post === "Buildings") {
          summary[key].BuildingsCount += count;
        }
			} else if (Position_of_post === "Burial Ground") {
          summary[key].BurialGround += count;
        }
			} else if (Position_of_post === "Playground") {
          summary[key].PlayGround += count;
        }
      });

      const countsArray = Object.keys(summary).map((key) => {
        const [zone, ward, road_name] = key.split("_");
        return {
          zone,
          ward,
          road_name,
          CentreMedianCount: summary[key].CentreMedianCount,
          RoadSide_Count: summary[key].RoadSide_Count,
		  ParksCount: summary[key].ParksCount,
         BuildingsCount: summary[key].BuildingsCount,
		  BurialGround: summary[key].BurialGround,
          PlayGround: summary[key].PlayGround,
        };
      });

      setCounts(countsArray);
    } catch (error) {
      console.error("Error fetching streetlight category count:", error);
      setError("Failed to fetch data. Please try again later.");
      setCounts([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchCountData();
  }, [zone]);

  const exportToCSV = () => {
    const csvContent = [
      ["Zone", "Ward", "Road Name", "CentreMedianCount", "RoadSide_Count","ParksCount","BuildingsCount"].join(","),
      ...counts.map(({ zone, ward, road_name, streetLightCount, highmastCount }) =>
        [zone, ward, road_name, streetLightCount, highmastCount].join(",")
      ),
    ].join("\n");

    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    link.href = URL.createObjectURL(blob);
    link.download = `StreetLight_Count_Zone_${zone || "All"}.csv`;
    link.click();
  };

  return (
    <div className="road-wise-streetlight-container">
      <h3>Road Wise - Street Light Count</h3>

      <label>
        Select Zone:
        <select value={zone} onChange={(e) => setZone(e.target.value)} className="zone-select">
          <option value="">-- Select Zone --</option>
          {[...Array(15)].map((_, i) => (
            <option key={i} value={String(i + 1).padStart(2, "0")}>
              {String(i + 1).padStart(2, "0")}
            </option>
          ))}
        </select>
      </label>

      <button onClick={exportToCSV} className="export-button">Export CSV</button>

      {error && <p className="error-message">{error}</p>}
      {loading ? <p>Loading...</p> : (
        <div className="table-container">
          <table className="road-wise-table">
            <thead>
              <tr>
                <th>Zone</th>
                <th>Ward</th>
                <th>Road Name</th>
                <th>Street Light Count</th>
                <th>Highmast Count</th>
              </tr>
            </thead>
            <tbody>
              {counts.map(({ zone, ward, road_name, streetLightCount, highmastCount }, index) => (
                <tr key={index}>
                  <td>{zone}</td>
                  <td>{ward}</td>
                  <td>{road_name}</td>
                  <td>{streetLightCount}</td>
                  <td>{highmastCount}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default RoadWiseStreetLightCount;