Activity: Data Visualization for Impact

const humanizeAQI = (aqi) => {
  const contexts = {
    good: { 
      message: "Great day for a neighborhood walk!",
      icon: "🌱",
      action: "Perfect time for outdoor activities"
    },
    moderate: {
      message: "Air quality like a busy city street",
      icon: "🚗", 
      action: "Sensitive groups should limit prolonged outdoor activities"
    },
    unhealthy: {
      message: "Air quality like sitting near a campfire",
      icon: "🔥",
      action: "Everyone should avoid outdoor exercise"
    }
  };
  
  return contexts[getAQICategory(aqi)];
};

const CommunityImpactChart = ({ data }) => {
  return (
    <View>
      <Text>Our Neighborhood This Month</Text>
      
      {/* Progress Ring showing community goal */}
      <ProgressRing 
        progress={data.treePlanting.percentage}
        target={data.treePlanting.goal}
        label="Trees Planted"
      />
      
      {/* Before/After Comparison */}
      <View style={styles.comparison}>
        <View style={styles.before}>
          <Text>Last Year</Text>
          <Bar height={data.airQuality.lastYear} color="#ff6b6b" />
        </View>
        <Arrow />
        <View style={styles.after}>
          <Text>This Year</Text>
          <Bar height={data.airQuality.thisYear} color="#4ecdc4" />
        </View>
      </View>
      
      {/* Personal Connection */}
      <Text>
        Thanks to community efforts, your family breathes cleaner air {data.improvement.days} more days this year!
      </Text>
    </View>
  );
};

const ActionableDataPoint = ({ metric, value, trend }) => {
  const getActions = (metric, trend) => {
    const actionMap = {
      'air-quality': {
        improving: [
          'Plant native trees in your yard',
          'Join the community bike-to-work day',
          'Share success story with neighbors'
        ],
        declining: [
          'Report excessive idling vehicles',
          'Advocate for better public transit',
          'Organize neighborhood car-free streets'
        ]
      },
      'energy-usage': {
        improving: [
          'Help neighbors learn your energy-saving tips',
          'Start a tool-sharing program',
          'Celebrate at community sustainability fair'
        ],
        declining: [
          'Schedule home energy audit',
          'Connect with weatherization assistance',
          'Join bulk renewable energy purchase group'
        ]
      }
    };
    
    return actionMap[metric][trend];
  };

  return (
    <TouchableOpacity onPress={() => showActionDetails(metric)}>
      <View style={styles.dataCard}>
        <Text style={styles.metricValue}>{value}</Text>
        <Text style={styles.trendIndicator}>{trend === 'improving' ? '↗️' : '↘️'}</Text>
        <Text style={styles.actionPrompt}>
          Tap to see how you can help →
        </Text>
      </View>
    </TouchableOpacity>
  );
};