updating translation files, adding new styles, implement new design f…

…or activity card and mobility card and update their models
cph-cachet · Jan 30, 2025 · a5a922d · a5a922d
1 parent 5978fc3
commit a5a922d
Show file tree

Hide file tree

Showing 9 changed files with 215 additions and 26 deletions.
diff --git a/assets/lang/da.json b/assets/lang/da.json
@@ -42,12 +42,13 @@
     "cards.study_progress.completed": "Afsluttet",
     "cards.study_progress.expired": "Udløbet",
     "cards.activity.title": "Fysisk Aktivitet",
+    "cards.activity.total.min": "min",
     "cards.activity.walking": "min gang",
     "cards.activity.running": "min løb",
     "cards.activity.cycling": "min cykling",
     "cards.mobility.title": "Mobilitet",
     "cards.mobility.distance": "km tilbagelagt",
-    "cards.mobility.homestay": "% hjemme",
+    "cards.mobility.homestay": "hjemme",
     "cards.mobility.places": "steder",
     "cards.distance.title": "Afstand",
     "cards.distance.distance": "km tilbagelagt",

diff --git a/assets/lang/en.json b/assets/lang/en.json
@@ -44,12 +44,13 @@
   "cards.study_progress.completed": "Completed",
   "cards.study_progress.expired": "Expired",
   "cards.activity.title": "Activity",
+  "cards.activity.total.min": "min",
   "cards.activity.walking": "min walking",
   "cards.activity.running": "min running",
   "cards.activity.cycling": "min cycling",
   "cards.mobility.title": "Mobility",
   "cards.mobility.distance": "km travelled",
-  "cards.mobility.homestay": "% at home",
+  "cards.mobility.homestay": "at home",
   "cards.mobility.places": "places",
   "cards.distance.title": "Distance",
   "cards.distance.distance": "km travelled",

diff --git a/assets/lang/es.json b/assets/lang/es.json
@@ -36,7 +36,7 @@
     "cards.activity.cycling": "min pedaleando",
     "cards.mobility.title": "Movilidad",
     "cards.mobility.distance": "km viajados",
-    "cards.mobility.homestay": "% en casa",
+    "cards.mobility.homestay": "en casa",
     "cards.mobility.places": "lugares",
     "cards.steps.title": "Numero de pasos",
     "cards.steps.steps": "pasos",

diff --git a/lib/ui/cards/activity_card.dart b/lib/ui/cards/activity_card.dart
@@ -5,7 +5,7 @@ class ActivityCard extends StatefulWidget {
   final List<Color> colors;
   const ActivityCard(this.model,
       {super.key,
-      this.colors = const [CACHET.BLUE_1, CACHET.BLUE_2, CACHET.BLUE_3]});
+      this.colors = const [CACHET.CAQUI, CACHET.OCEAN, CACHET.BLUE_2]});
 
   @override
   State<StatefulWidget> createState() => ActivityCardState();
@@ -68,17 +68,35 @@ class ActivityCardState extends State<ActivityCard> {
         padding: const EdgeInsets.all(8.0),
         child: Column(
           children: [
-            ChartsLegend(
-              title: locale.translate('cards.activity.title'),
-              iconAssetName: Icon(Icons.fitness_center,
-                  color: Theme.of(context).colorScheme.primary),
-              heroTag: 'activity-card',
-              values: [
-                '$_walk ${locale.translate('cards.activity.walking')}',
-                '$_run ${locale.translate('cards.activity.running')}',
-                '$_cycle ${locale.translate('cards.activity.cycling')}'
+            Row(
+              children: [
+                Text(
+                  '${_walk! + _run! + _cycle!}',
+                  style: dataVizCardTitleNumber.copyWith(
+                    color: Theme.of(context).extension<CarpColors>()!.grey900!,
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 4.0),
+                  child: Text(
+                    locale.translate('cards.activity.total.min'),
+                    style: dataVizCardTitleText.copyWith(
+                      color: Theme.of(context).extension<CarpColors>()!.grey600,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            Row(
+              children: [
+                Text(
+                  "${widget.model.currentMonth} ${widget.model.startOfWeek} - ${int.parse(widget.model.endOfWeek) < int.parse(widget.model.startOfWeek) ? widget.model.nextMonth : widget.model.currentMonth} ${widget.model.endOfWeek}, ${widget.model.currentYear}",
+                  style: dataVizCardTitleText.copyWith(
+                    color: Theme.of(context).extension<CarpColors>()!.grey600,
+                  ),
+                ),
+                Spacer(),
               ],
-              colors: widget.colors,
             ),
             SizedBox(
               height: 160,
@@ -90,6 +108,82 @@ class ActivityCardState extends State<ActivityCard> {
                 },
               ),
             ),
+            Column(
+              children: [
+                Row(
+                  children: [
+                    Expanded(
+                      child: Row(
+                        children: [
+                          Text(
+                            '$_walk',
+                            style: dataVizCardBottomNumber.copyWith(
+                              color: widget.colors[0],
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.all(4.0),
+                            child: Text(
+                              locale.translate('cards.activity.walking'),
+                              style: dataVizCardBottomText.copyWith(
+                                  color: Theme.of(context)
+                                      .extension<CarpColors>()!
+                                      .grey800),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Expanded(
+                      child: Row(
+                        children: [
+                          Padding(
+                            padding: const EdgeInsets.only(left: 8.0),
+                            child: Text(
+                              '$_run',
+                              style: dataVizCardBottomNumber.copyWith(
+                                color: widget.colors[1],
+                              ),
+                            ),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.all(4.0),
+                            child: Text(
+                              locale.translate('cards.activity.running'),
+                              style: dataVizCardBottomText.copyWith(
+                                  color: Theme.of(context)
+                                      .extension<CarpColors>()!
+                                      .grey800),
+                            ),
+                          ),
+                        ],
+                      ),
+                    )
+                  ],
+                ),
+                Row(
+                  children: [
+                    Text(
+                      '$_cycle',
+                      style: dataVizCardBottomNumber.copyWith(
+                        color: widget.colors[2],
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.only(left: 4.0),
+                      child: Text(
+                        locale.translate('cards.activity.cycling'),
+                        style: dataVizCardBottomText.copyWith(
+                          color: Theme.of(context)
+                              .extension<CarpColors>()!
+                              .grey800,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
           ],
         ),
       ),

diff --git a/lib/ui/cards/mobility_card.dart b/lib/ui/cards/mobility_card.dart
@@ -6,7 +6,7 @@ class MobilityCard extends StatefulWidget {
   final MobilityCardViewModel model;
   const MobilityCard(this.model,
       {super.key,
-      this.colors = const [CACHET.BLUE_1, CACHET.BLUE_2, CACHET.BLUE_3]});
+      this.colors = const [CACHET.CAQUI, CACHET.ORANGE, CACHET.BLUE_3]});
 
   @override
   State<MobilityCard> createState() => _MobilityCardState();
@@ -35,16 +35,36 @@ class _MobilityCardState extends State<MobilityCard> {
         padding: const EdgeInsets.all(8.0),
         child: Column(
           children: [
-            ChartsLegend(
-              title: locale.translate('cards.mobility.title'),
-              iconAssetName: Icon(Icons.emoji_transportation,
-                  color: Theme.of(context).primaryColor),
-              heroTag: 'mobility-card',
-              values: [
-                '$_homestay ${locale.translate('cards.mobility.homestay')}',
-                '$_places ${locale.translate('cards.mobility.places')}',
+            Row(
+              children: [
+                Text(
+                  '$_homestay%',
+                  style: dataVizCardTitleNumber.copyWith(
+                    color: widget.colors[0],
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 4.0),
+                  child: Text(
+                    locale.translate('cards.mobility.homestay'),
+                    style: dataVizCardTitleText.copyWith(
+                      color:
+                          Theme.of(context).extension<CarpColors>()!.grey900!,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            Row(
+              children: [
+                Text(
+                  "${widget.model.currentMonth} ${widget.model.startOfWeek} - ${int.parse(widget.model.endOfWeek) < int.parse(widget.model.startOfWeek) ? widget.model.nextMonth : widget.model.currentMonth} ${widget.model.endOfWeek}, ${widget.model.currentYear}",
+                  style: dataVizCardTitleText.copyWith(
+                    color: Theme.of(context).extension<CarpColors>()!.grey600,
+                  ),
+                ),
+                Spacer(),
               ],
-              colors: widget.colors,
             ),
             SizedBox(
               height: 160,
@@ -56,6 +76,35 @@ class _MobilityCardState extends State<MobilityCard> {
                 },
               ),
             ),
+            // Column(
+            //   children: [
+
+            //   ]
+            // ),
+            Column(
+              children: [
+                Row(
+                  children: [
+                    Text(
+                      '$_places',
+                      style: dataVizCardBottomNumber.copyWith(
+                        color: widget.colors[0],
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.all(4.0),
+                      child: Text(
+                        locale.translate('cards.mobility.places'),
+                        style: dataVizCardBottomText.copyWith(
+                            color: Theme.of(context)
+                                .extension<CarpColors>()!
+                                .grey800),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
           ],
         ),
       ),
@@ -135,7 +184,7 @@ class _MobilityCardState extends State<MobilityCard> {
       barRods: [
         BarChartRodData(
           toY: places.toDouble(),
-          color: widget.colors[1].withOpacity(isTouched ? 0.8 : 1),
+          color: widget.colors[0].withOpacity(isTouched ? 0.8 : 1),
           width: 16,
           borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(4),
@@ -144,7 +193,7 @@ class _MobilityCardState extends State<MobilityCard> {
         ),
         BarChartRodData(
           toY: homestay.toDouble(),
-          color: widget.colors[0].withOpacity(isTouched ? 0.8 : 1),
+          color: widget.colors[1].withOpacity(isTouched ? 0.8 : 1),
           width: 16,
           borderRadius: const BorderRadius.only(
             topLeft: Radius.circular(4),

diff --git a/lib/ui/carp_study_style.dart b/lib/ui/carp_study_style.dart
@@ -331,6 +331,10 @@ TextStyle dataVizCardTitleNumber =
     const TextStyle(fontSize: 28, fontWeight: FontWeight.w700);
 TextStyle dataVizCardTitleText =
     const TextStyle(fontSize: 12, fontWeight: FontWeight.w700);
+TextStyle dataVizCardBottomNumber =
+    const TextStyle(fontSize: 22, fontWeight: FontWeight.w700);
+TextStyle dataVizCardBottomText =
+    const TextStyle(fontSize: 12, fontWeight: FontWeight.w700);
 
 TextStyle profileSectionStyle = TextStyle(
     fontSize: 12,

diff --git a/lib/ui/colors.dart b/lib/ui/colors.dart
@@ -21,6 +21,8 @@ class CACHET {
   static const Color ORANGE = Color.fromRGBO(236, 99, 48, 1.0);
   static const Color CYAN = Color.fromRGBO(79, 100, 50, 1.0);
   static const Color PURPLE = Color.fromRGBO(118, 30, 169, 1.0);
+  static const Color CAQUI = Color.fromRGBO(126, 145, 70, 1.0);
+  static const Color OCEAN = Color.fromRGBO(34, 139, 137, 1.0);
 
   static const Color LIGHT_2 = Color(0xffE5E5EA);
   static const Color LIGHT_GREY = Color.fromRGBO(100, 99, 99, .2);

diff --git a/lib/view_models/cards/activity_data_model.dart b/lib/view_models/cards/activity_data_model.dart
@@ -14,6 +14,25 @@ class ActivityCardViewModel extends SerializableViewModel<WeeklyActivities> {
   Stream<Measurement>? get activityEvents => controller?.measurements
       .where((measurement) => measurement.data is Activity);
 
+  final DateTime _startOfWeek =
+      DateTime.now().subtract(Duration(days: DateTime.now().weekday - 1));
+  final DateTime _endOfWeek = DateTime.now()
+      .subtract(Duration(days: DateTime.now().weekday - 1))
+      .add(Duration(days: 6));
+
+  String get startOfWeek => DateFormat('dd').format(_startOfWeek);
+
+  String get endOfWeek => DateFormat('dd').format(_endOfWeek);
+
+  String get currentMonth =>
+      DateFormat('MMM').format(DateTime(_startOfWeek.month));
+
+  String get nextMonth => DateFormat('MMM')
+      .format(DateTime(_startOfWeek.year, _startOfWeek.month + 1, 1));
+
+  String get currentYear =>
+      DateFormat('yyyy').format(DateTime(DateTime.now().year));
+
   @override
   void init(SmartphoneDeploymentController ctrl) {
     super.init(ctrl);

diff --git a/lib/view_models/cards/mobility_data_model.dart b/lib/view_models/cards/mobility_data_model.dart
@@ -10,6 +10,25 @@ class MobilityCardViewModel extends SerializableViewModel<WeeklyMobility> {
   Stream<Measurement>? get mobilityEvents => controller?.measurements
       .where((measurement) => measurement.data is Mobility);
 
+  final DateTime _startOfWeek =
+      DateTime.now().subtract(Duration(days: DateTime.now().weekday - 1));
+  final DateTime _endOfWeek = DateTime.now()
+      .subtract(Duration(days: DateTime.now().weekday - 1))
+      .add(Duration(days: 6));
+
+  String get startOfWeek => DateFormat('dd').format(_startOfWeek);
+
+  String get endOfWeek => DateFormat('dd').format(_endOfWeek);
+
+  String get currentMonth =>
+      DateFormat('MMM').format(DateTime(_startOfWeek.month));
+
+  String get nextMonth => DateFormat('MMM')
+      .format(DateTime(_startOfWeek.year, _startOfWeek.month + 1, 1));
+
+  String get currentYear =>
+      DateFormat('yyyy').format(DateTime(DateTime.now().year));
+
   MobilityCardViewModel();
   @override
   void init(SmartphoneDeploymentController ctrl) {