43ae2ebcac
- i18n/index.ts: i18next setup with FR/EN/ES/DE translations - constants.ts: app config, sensor types, alert severity, storage keys, refresh intervals - store/index.ts: barrel export for all stores - iotStore.ts: full IoT store (6 sensors, 3 zones, 2 alerts) with actions - notificationStore.ts: notification store (5 mock notifications) with actions - uiStore.ts: theme/language store + translation maps for 4 languages - useSensors.ts: sensor filtering by type/zone, alert sensors selector - useAlerts.ts: active alerts, critical alerts, acknowledge - useNotifications.ts: notification CRUD operations - useLocation.ts: GPS location with expo-location, default Fort-de-France - SensorCard.tsx: full sensor card with status dot, compact mode - StatsCard.tsx: stats card with icon, value, trend - AlertCard.tsx: alert card with severity bar, acknowledge button - ZoneCard.tsx: zone card with color bar, sensor/alert counts - LineChart.tsx: bar-based line chart with Y-axis labels - BarChart.tsx: bar chart with value labels - GaugeChart.tsx: semi-circular gauge with color thresholds - MapView.tsx: map placeholder with overlay markers - MarkerPopup.tsx: popup with title, value, status, detail button - DashboardScreen.tsx: analytics dashboard with gauges + charts - SensorDetailScreen.tsx: sensor detail with gauge + history chart - NotificationPrefsScreen.tsx: notification preference toggles (4) - LayerDetailScreen.tsx: layer detail placeholder - iot.service.ts: CRUD operations for sensors, zones, alerts - gis.service.ts: geocoding, POI search, routing
74 lines
2.8 KiB
TypeScript
74 lines
2.8 KiB
TypeScript
// Smart App City — Dashboard Screen (detailed view with charts)
|
|
import React from 'react';
|
|
import { View, Text, ScrollView, StyleSheet } from 'react-native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import { Colors, Typography, Spacing, BorderRadius } from '../../../../src/theme/colors';
|
|
import { useIoTStore } from '../../../stores/iotStore';
|
|
import LineChart from '../../charts/LineChart';
|
|
import BarChart from '../../charts/BarChart';
|
|
import GaugeChart from '../../charts/GaugeChart';
|
|
import SectionHeader from '../../common/Header';
|
|
|
|
type Props = { navigation: NativeStackNavigationProp<any> };
|
|
|
|
const TEMP_DATA = [
|
|
{ label: '6h', value: 22 }, { label: '8h', value: 23 }, { label: '10h', value: 25 },
|
|
{ label: '12h', value: 27 }, { label: '14h', value: 29 }, { label: '16h', value: 28 },
|
|
{ label: '18h', value: 26 }, { label: '20h', value: 24 },
|
|
];
|
|
|
|
export default function DashboardScreen({ navigation }: Props) {
|
|
const sensors = useIoTStore((s) => s.sensors);
|
|
|
|
return (
|
|
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.title}>Dashboard Analytics</Text>
|
|
</View>
|
|
|
|
{/* Gauges */}
|
|
<View style={styles.section}>
|
|
<SectionHeader title="Vue d'ensemble" />
|
|
<View style={styles.gaugesRow}>
|
|
<GaugeChart value={28.3} max={50} label="Température" unit="°C" />
|
|
<GaugeChart value={72} max={100} label="Humidité" unit="%" />
|
|
<GaugeChart value={85} max={200} label="Qualité Air" unit="AQI" color={Colors.warning} />
|
|
</View>
|
|
</View>
|
|
|
|
{/* Line chart */}
|
|
<View style={styles.section}>
|
|
<SectionHeader title="Température — 24h" />
|
|
<LineChart data={TEMP_DATA} color={Colors.ocean[500]} height={160} />
|
|
</View>
|
|
|
|
{/* Bar chart */}
|
|
<View style={styles.section}>
|
|
<SectionHeader title="Énergie par zone (kWh)" />
|
|
<BarChart
|
|
data={[
|
|
{ label: 'Centre', value: 2340, color: Colors.primary[500] },
|
|
{ label: 'Schoelcher', value: 1890, color: Colors.ocean[500] },
|
|
{ label: 'Nord', value: 3120, color: Colors.indigo[500] },
|
|
]}
|
|
height={140}
|
|
/>
|
|
</View>
|
|
|
|
<View style={{ height: 80 }} />
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flex: 1, backgroundColor: Colors.neutral50 },
|
|
header: {
|
|
backgroundColor: Colors.primary[500],
|
|
paddingTop: 50, paddingBottom: Spacing.base,
|
|
paddingHorizontal: Spacing.base,
|
|
},
|
|
title: { fontSize: Typography.sizes.lg, fontWeight: Typography.weights.bold, color: Colors.white },
|
|
section: { padding: Spacing.base },
|
|
gaugesRow: { flexDirection: 'row', justifyContent: 'space-around', marginTop: Spacing.base },
|
|
});
|