const LowImpactVariablePieChart = ({ rules }) => {
  if (!rules || rules.length === 0)
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 18,
          color: "#666",
          minHeight: 150
        }}
      >
        No Data Available
      </div>
    );

  // Helper function to count recent 7 comma-separated entries in impactDiffWithDate
  const countRecentEntries = (impactDiffWithDate, limit = 7) => {
    if (!impactDiffWithDate) return 0;
    const parts = impactDiffWithDate.split(',').filter(Boolean);
    return parts.slice(-limit).length;
  };

  const minZ = 60;

  // Build the data array using countRecentEntries instead of impact
  const data = rules.map((rule) => {
    const recentImpact = countRecentEntries(rule.impactDiffWithDate, 7);
    return {
      name: rule.name || rule.id || `Rule ${rule.rule_id}`,
      y: recentImpact,
      // z will be assigned below after maxImpact calculation
    };
  });

  // Calculate maxImpact based on recentImpact counts to normalize 'z' values
  const maxImpact = Math.max(...data.map(d => d.y)) || 1; // avoid division by zero

  // Normalize z values for bubble size with a minimum threshold
  data.forEach(d => {
    const normalizedZ = (d.y / maxImpact) * 100;
    d.z = Math.max(normalizedZ, minZ);
  });

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

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

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


in this code, instead of calculationg commas not like that it should sum of the total 

impactDiffWithDate: "6/26/2025:0,6/27/2025:545,6/28/2025:0,6/29/2025:181,6/30/2025:720,6/30/2025:0,7/1/2025:153,7/2/2025:90,7/3/2025:150,7/4/2025:41"

in this, : after this is the total before is the days to take total of recent 7 days and show in the value



const HighImpactColumnChart = ({ rules }) => {

  if (!rules || !Array.isArray(rules) || rules.length === 0)
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 18,
          color: "#666",
          minHeight: 150,
        }}
      >
        No Data Available
      </div>
    );

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

  if (filteredRules.length === 0)
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 18,
          color: "#666",
          minHeight: 150,
        }}
      >
        No Data Available
      </div>
    );

  // New helper function to sum the impact values from 'impactDiffWithDate' string
  const sumRecentImpacts = (impactDiffWithDate, limit = 7) => {
    if (!impactDiffWithDate) return 0;

    // Split the string into date:value parts
    const parts = impactDiffWithDate.split(",").filter(Boolean);

    // Take only the last 'limit' entries
    const recentEntries = parts.slice(-limit);

    // Sum the numeric values after the colon ':'
    const total = recentEntries.reduce((sum, entry) => {
      const [, valueStr] = entry.split(":");
      const value = parseFloat(valueStr);
      return sum + (isNaN(value) ? 0 : value);
    }, 0);

    return total;
  };

  // Use the summation in map instead of counting entries
  const data = filteredRules.map((rule) => ({
    name: rule.name || rule.id || `Rule ${rule.rule_id}`,
    y: sumRecentImpacts(rule.impactDiffWithDate, 7),
  }));

  // Total impact over all rules in recent 7 entries
  const totalImpact = data.reduce((sum, item) => sum + item.y, 0);

  const options = {
    chart: {
      type: "column",
      height: 400,
    },
    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;
        },
        style: {
          fontSize: "13px",
          fontFamily: "Verdana, sans-serif",
        },
      },
    },
    legend: { enabled: false },
    tooltip: {
      formatter: function () {
        const percentage = totalImpact 
          ? ((this.y / totalImpact) * 100).toFixed(2) 
          : "0.00";
        return `
          <b>Rule Name:</b> ${this.point.name}<br/>
          <b>Impact Count:</b> ${this.y}<br/>
          <b>Percentage:</b> ${percentage}%
        `;
      },
    },
    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} />;
};


in this it has handled correctly,. same way change in above lowimpact too