webdev01/WardwiseStreetLight/new 4.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";

type StreetLightCount = {
  zone: string;
  ward: string;
  road_name: string;
  roadside: number;
  centreMedian: number;
  parks: number;
  buildings: number;
  burialGround: number;
  playground: number;
  highmastJunction: number;
  highmastCentreMedian: number;
  highmastRoadside: number;
};

const RoadWiseStreetLightCount: React.FC = () => {
  const [counts, setCounts] = useState<StreetLightCount[]>([]);
  const [zone, setZone] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  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: "post_count",
        }),
        new StatisticDefinition({
          statisticType: "count",
          onStatisticField: "highmast_position",
          outStatisticFieldName: "highmast_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);
      console.log("Query Result:", result.features);

      const summary: Record<string, StreetLightCount> = {};
      
      result.features.forEach((feature) => {
        const { zone, ward, road_name, position_of_post, highmast_position } = feature.attributes;
        const postCount = feature.attributes.post_count || 0;
        const highmastCount = feature.attributes.highmast_count || 0;
        const key = `${zone}_${ward}_${road_name}`;

        if (!summary[key]) {
          summary[key] = { zone, ward, road_name, roadside: 0, centreMedian: 0, parks: 0, buildings: 0, burialGround: 0, playground: 0, highmastJunction: 0, highmastCentreMedian: 0, highmastRoadside: 0 };
        }

        if (position_of_post === 1) summary[key].centreMedian += postCount;
        else if (position_of_post === 2) summary[key].roadside += postCount;
        else if (position_of_post === 3) summary[key].parks += postCount;
        else if (position_of_post === 4) summary[key].buildings += postCount;
        else if (position_of_post === 5) summary[key].burialGround += postCount;
        else if (position_of_post === 6) summary[key].playground += postCount;

        if (highmast_position === 1) summary[key].highmastJunction += highmastCount;
        else if (highmast_position === 2) summary[key].highmastCentreMedian += highmastCount;
        else if (highmast_position === 3) summary[key].highmastRoadside += highmastCount;
      });

      setCounts(Object.values(summary));
    } 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", "Roadside", "Centre Median", "Parks", "Buildings", "Burial Ground", "Playground", "Highmast Junction", "Highmast Centre Median", "Highmast Roadside"].join(","),
      ...counts.map(row => Object.values(row).join(","))
    ].join("\n");

    const blob = new Blob([csvContent], { type: "text/csv" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "Streetlight_Counts.csv";
    a.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 to CSV</button>
      {error && <p className="error-message">{error}</p>}
      {loading ? (
        <p>Loading...</p>
      ) : (
        <table className="road-wise-table">
          <thead>
            <tr>
              {Object.keys(counts[0] || {}).map((key, i) => <th key={i}>{key.replace(/_/g, " ")}</th>)}
            </tr>
          </thead>
          <tbody>
            {counts.map((row, index) => (
              <tr key={index}>
                {Object.values(row).map((value, i) => <td key={i}>{String(value)}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
};

export default RoadWiseStreetLightCount;