const NoImpactFunnelChart = ({ noImpactRules }) => {


  console.log("New No Impact at 6.48pm");

  if (!noImpactRules || noImpactRules.length === 0)
    return (
      <div
        style={{
          padding: 20,
          fontStyle: "italic",
          color: "#666",
          textAlign: "center",
          backgroundColor: "#fafafa",
          borderRadius: 8,
          border: "1px solid #ddd",
          maxWidth: 600,
          margin: "auto",
          boxShadow: "0 2px 5px rgba(0,0,0,0.05)",
        }}
      >
        No No Impact rules to display
      </div>
    );

  const rowHeightPx = 40;
  const visibleRows = 10;

  // Count commas and add 1 to get days in impactDiffWithDate
  const getInactiveDays = (impactDiffWithDate) => {
    if (!impactDiffWithDate) return 0;
    return (impactDiffWithDate.match(/,/g) || []).length + 1;
  };

  return (
    <>
    <style>{`
  .scroll-container {
    max-height: ${rowHeightPx * visibleRows}px;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 12px;
    background-color: #fff;
    transition: scrollbar-width 0.3s ease;
  }

  /* Firefox */
  .scroll-container {
    scrollbar-width: thin;
    scrollbar-color: #a0a0a0 transparent;
  }
  .scroll-container:hover {
    scrollbar-width: auto;
    scrollbar-color: #607d8b transparent;
  }

  /* WebKit-based browsers (Chrome, Edge, Safari) */
  .scroll-container::-webkit-scrollbar {
    width: 6px;
    transition: width 0.3s ease; /* Animate width */
  }
  .scroll-container:hover::-webkit-scrollbar {
    width: 12px;
  }

  .scroll-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .scroll-container::-webkit-scrollbar-thumb {
    background-color: #a0a0a0;
    border-radius: 10px;
    transition: background-color 0.3s ease;
  }

  .scroll-container:hover::-webkit-scrollbar-thumb {
    background-color: #607d8b;
  }

  /* Hide scrollbar buttons (arrows) */
  .scroll-container::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }
`}</style>

      <div
        style={{
          maxWidth: 700,
          overflow: "hidden",
          fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
        }}
      >
        <div className="scroll-container">
          <table
            style={{
              width: "100%",
              borderCollapse: "separate",
              borderSpacing: 0,
              minWidth: 500,
            }}
          >
            <thead>
              <tr>
                <th
                  style={{
                    backgroundColor: "#f5f9ff",
                    color: "#2a3f66",
                    padding: "12px 15px",
                    textAlign: "left",
                    fontWeight: "700",
                    borderBottom: "2px solid #c4d1f5",
                    position: "sticky",
                    top: 0,
                    zIndex: 2,
                    maxWidth: 100,
                    whiteSpace: "nowrap",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                  }}
                >
                  Rule Name
                </th>
                <th
                  style={{
                    backgroundColor: "#f5f9ff",
                    color: "#2a3f66",
                    padding: "12px 40px",
                    textAlign: "center",
                    fontWeight: "700",
                    borderBottom: "2px solid #c4d1f5",
                    position: "sticky",
                    top: 0,
                    zIndex: 2,
                    width: 120,
                  }}
                >
                  Days Inactive
                </th>
              </tr>
            </thead>

            <tbody>
              {noImpactRules.map((rule, idx) => {
                const inactiveDays = getInactiveDays(rule.impactDiffWithDate);
                const tooltipContent = `${rule.name || "N/A"}\nInactive for ${inactiveDays} day${
                  inactiveDays > 1 ? "s" : ""
                }`;

                return (
                  <tr
                    key={rule.id || idx}
                    style={{
                      height: rowHeightPx,
                      backgroundColor: idx % 2 === 0 ? "#fff" : "#f9fbff",
                      transition: "background-color 0.3s ease",
                      cursor: "default",
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = "#d6e4ff";
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = idx % 2 === 0 ? "#fff" : "#f9fbff";
                    }}
                  >
                    <td
                      style={{
                        borderBottom: "1px solid #e5e9f2",
                        padding: "10px 15px",
                        color: "#2d3a5a",
                        fontSize: 15,
                        fontWeight: "500",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        maxWidth: 300,
                      }}
                      title={tooltipContent}
                    >
                      {rule.name || "N/A"}
                    </td>
                    <td
                      style={{
                        borderBottom: "1px solid #e5e9f2",
                        padding: "10px 15px",
                        textAlign: "center",
                        color: "#4a6dff",
                        fontWeight: "600",
                        fontSize: 15,
                        userSelect: "none",
                      }}
                      title={tooltipContent}
                    >
                      {inactiveDays}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
};

const HighImpactColumnChart = ({ rules }) => {
  
  if (!rules || !Array.isArray(rules) || rules.length === 0)
    return <div>No High Impact rules to display</div>;

  const filteredRules = rules.filter(rule => rule.impact > 0);

  if (filteredRules.length === 0)
    return <div>No High Impact rules to display</div>;
  const data = filteredRules.map(rule => ({
    name: rule.name || rule.id || `Rule ${rule.rule_id}`,
    y: rule.impact
  }));

  const totalImpact = filteredRules.reduce((sum, rule) => sum + rule.impact, 0);

  const options = {
    chart: {
      type: 'column',
      height: 300,
    },
    title: { text: '' },
    subtitle: { text: '' },
    xAxis: {
      type: 'category',
      labels: {
        autoRotation: [-45, -90],
        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif',
        },
      },
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Impact (tickets affected)',
      },
      labels: {
        formatter: function () {
          return this.value; // Show the actual number without abbreviation
        },
        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif',
        },
      },
    },
    legend: { enabled: false },
    tooltip: {
      formatter: function () {
        const percentage = ((this.y / totalImpact) * 100).toFixed(2);
        return `<b>${this.point.name}</b><br/>Impact: <b>${this.y}</b><br/>Percentage: <b>${percentage}%</b>`;
      }
    },
    series: [
      {
        name: 'Impact',
        colorByPoint: true,
        groupPadding: 0,
        data,
        dataLabels: {
          enabled: true,
          color: '#000000',
          verticalAlign: 'bottom',
          inside: false,
          format: '{y}',
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif',
          },
        },
      }
    ],
    colors: [
      '#9b20d9', '#9215ac', '#861ec9', '#7a17e6', '#7010f9', '#691af3',
      '#6225ed', '#5b30e7', '#533be1', '#4c46db', '#4551d5', '#3e5ccf',
      '#3667c9', '#2f72c3', '#277dbd', '#1f88b7', '#1693b1', '#0a9eaa',
      '#03c69b', '#00f194'
    ],
    credits: { enabled: false },
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

const LowImpactVariablePieChart = ({ rules }) => {
  if (!rules || rules.length === 0) 
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",    // or a fixed height like 200px if you want
          fontSize: 18,
          color: "#666",
          minHeight: 150      // or whatever fits your layout
        }}
      >
        No Low Impact rules to display
      </div>
    );

  const data = rules.map((rule) => ({
    name: rule.name || rule.id || `Rule ${rule.rule_id}`,
    y: rule.impact,
    z: rule.impact,  // same value used for radius - modify if you have other metric
  }));

  const colors = [
    '#4caefe',
    '#3dc3e8',
    '#2dd9db',
    '#1feeaf',
    '#0ff3a0',
    '#00e887',
    '#23e274',
    '#a3cb38',
    '#f7b731',
    '#fc5c65'
  ];

  const options = {
    chart: {
      type: 'variablepie',
      height: 400,
    },
    title: {
      text: '',
    },
    tooltip: {
      headerFormat: '',
      pointFormatter: function () {
        return `${this.name}<br/>Impact: <b>${this.y}</b><br/>Percentage: <b>${this.percentage.toFixed(2)}%</b>`;
      }
    },
    
    
    plotOptions: {
      variablepie: {
        dataLabels: {
          enabled: true,
          formatter: function() {
            return `${this.point.percentage.toFixed(1)}%`;
          },
          color: '#000',
          style: {
            fontWeight: 'bold',
            textOutline: 'none'
          }
        }
      }
    },
    series: [{
      minPointSize: 10,
      innerSize: '20%',
      zMin: 0,
      colors,
      name: 'Rules',
      data,
      borderRadius: 5,
    }],
    credits: { enabled: false },
  };

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};


in this, 


until fetch and showing graph , show spinner


import { FwSpinner } from "@freshworks/crayons/react";
function App() {
  return (<div>
        <label>A small loader</label><br/>
        <FwSpinner size="small"></FwSpinner><br/><br/>
        <label>A medium sized loader</label><br/>
        <FwSpinner size="medium" color="green"></FwSpinner>
    </div>);
}