79399328

Date: 2025-01-30 09:19:49
Score: 3
Natty:
Report link

I have same problem in my code. initially you pass empty array const [data, setData] = useState<CampaignSummary[]>([]); that cause issue in chart. If use add wrpper like that

const [loading, setLoading] = useState(true);
const [data, setData] = useState<CampaignSummary[]>([]);
 const font = useFont(inter, 12);

  useEffect(() => {
    const fetchCampaignSummary = async () => {
      try {
        const response = await axios.get(
          'lead-conversion-history',
        );
        setData(response.data);
setLoading(false)
      } catch (error) {
        console.log('Error fetching lead campaign summary:', error);
      }
    };

    fetchCampaignSummary();
  }, []);

  const campaignData = data.map((item: CampaignSummary) => ({
    campaignName: item.campaignName,
    convertedLeadCount: item.convertedLeadCount,
    totalLeadCount: item.totalLeadCount,
  }));
 if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color={appColors.primary} />
        <Text>Loading chart data...</Text>
      </View>
    );
  }

  return (
    <CartesianChart
      data={campaignData}
      xKey="campaignName"
      yKeys={['convertedLeadCount', 'totalLeadCount']}
      domain={{ y: [0, 50] }}
      padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
      domainPadding={{ left: 50, right: 50, top: 30 }}
      axisOptions={{
        font: { fontFamily: 'Arial', fontSize: 10 }, // Update the font as needed
        tickCount: { y: 10, x: 5 },
        lineColor: '#d4d4d8',
        labelColor: appColors.text.light,
      }}
    >
      {({ points, chartBounds }) => (
        <BarGroup chartBounds={chartBounds} betweenGroupPadding={0.3} withinGroupPadding={0.1}>
          <BarGroup.Bar points={points.convertedLeadCount} animate={{ type: 'timing' }}>
            <LinearGradient
              start={vec(0, 0)}
              end={vec(0, 500)}
              colors={['#c084fc', '#7c3aed90']}
            />
          </BarGroup.Bar>
          <BarGroup.Bar points={points.totalLeadCount} animate={{ type: 'timing' }}>
            <LinearGradient
              start={vec(0, 0)}
              end={vec(0, 500)}
              colors={['#a5f3fc', '#0891b290']}
            />
          </BarGroup.Bar>
        </BarGroup>
      )}
    </CartesianChart>

with that logic you won't get the error. I have tested it and it is working

Reasons:
  • Blacklisted phrase (1): I have same problem
  • Long answer (-1):
  • Has code block (-0.5):
  • Me too answer (2.5): I have same problem
  • Low reputation (1):
Posted by: ibrar hussain