src/components: add get statistics data function in StatsBar component

src/components/__tests__/StatsBar.cy.js

@@ -24,6 +24,14 @@ const dataSelectorStatsBarItemLabel = '[data-cy="stats-bar-item-label"]';
 const iconSize = '18px';
 
 describe('<StatsBar>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext(
+      ['labelSaved', 'labelSustainableRoutes'],
+      'statsBar',
+      i18n,
+    );
+  });
+
   context('desktop', () => {
     beforeEach(() => {
       cy.fixture('statsBar').then((stats) => {

src/components/global/StatsBar.vue

@@ -19,6 +19,9 @@
 // libraries
 import { defineComponent } from 'vue';
 
+// composables
+import { useStatsBar } from '../../composables/useStatsBar';
+
 // config
 import { rideToWorkByBikeConfig } from '../../boot/global_vars';
 
@@ -38,9 +41,13 @@ export default defineComponent({
   },
   setup() {
     const { borderRadiusCard } = rideToWorkByBikeConfig;
+    const { getStatIcon, getStatLabel, getStatUnit } = useStatsBar();
 
     return {
       borderRadiusCard,
+      getStatIcon,
+      getStatLabel,
+      getStatUnit,
       StatisticsId,
     };
   },
@@ -57,39 +64,34 @@ export default defineComponent({
       <q-item
         dense
         v-for="item in stats"
-        :key="item.icon"
+        :key="item.id"
         data-cy="stats-bar-item"
         class="text-grey-10 q-p-none flex items-center"
       >
-        <!-- Icon -->
-        <q-icon
-          :name="item.icon"
-          color="primary"
-          size="18px"
-          class="q-mr-sm"
-          data-cy="stats-bar-item-icon"
-        />
-        <!-- Value -->
-        <strong class="text-weight-bold" data-cy="stats-bar-item-value">{{
-          item.value
-        }}</strong>
-        <!-- Label -->
-        <span
-          v-if="
-            item.id === StatisticsId.co2 || item.id === StatisticsId.distance
-          "
-          data-cy="stats-bar-item-label-unit"
-        >
-          <template v-if="item.id === StatisticsId.co2"
-            >&nbsp;<span v-html="$t('global.carbonDioxideWeightUnit')"
-          /></template>
-          <template v-if="item.id === StatisticsId.distance"
-            >&nbsp;{{ $t('global.routeLengthUnit') }}</template
+        <template v-if="item.id">
+          <!-- Icon -->
+          <q-icon
+            :name="getStatIcon(item.id)"
+            color="primary"
+            size="18px"
+            class="q-mr-sm"
+            data-cy="stats-bar-item-icon"
+          />
+          <!-- Value -->
+          <strong class="text-weight-bold" data-cy="stats-bar-item-value"
+            >{{ item.value }}&nbsp;</strong
           >
-        </span>
-        <span v-if="item.label" data-cy="stats-bar-item-label">
-          <span>&nbsp;{{ item.label }}</span>
-        </span>
+          <!-- Label -->
+          <span
+            v-if="getStatUnit(item.id)"
+            class="text-weight-bold"
+            data-cy="stats-bar-item-label-unit"
+            v-html="getStatUnit(item.id)"
+          />
+          <span v-if="getStatLabel(item.id)" data-cy="stats-bar-item-label">
+            <span>&nbsp;{{ getStatLabel(item.id) }}</span>
+          </span>
+        </template>
       </q-item>
     </q-list>
   </div>

src/components/homepage/ListCardProgress.vue

@@ -15,7 +15,6 @@
  *   progress cards.
  * - `cards` (Array of CardProgressType, required): An array of card items to
  *   be displayed, each representing progress statistics.
- * - `stats` (Array of ItemStatisticsType): An array of statistical items.
  * - `button` (Object of Link type): An object defining the button properties.
  *
  * @components
@@ -35,17 +34,24 @@
  */
 
 // libraries
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 
-// types
-import { CardProgress as CardProgressType, Link } from '../types';
-import type { ItemStatistics } from '../types/Statistics';
+// fixtures
+import memberResultsFixture from '../../../test/cypress/fixtures/memberResults.json';
 
 // components
 import CardProgress from './CardProgress.vue';
 import SectionHeading from '../global/SectionHeading.vue';
 import StatsBar from '../global/StatsBar.vue';
 
+// composables
+import { useStatsBar } from 'src/composables/useStatsBar';
+
+// types
+import type { ItemStatistics } from '../types/Statistics';
+import type { MemberResults } from '../types/Results';
+import { CardProgress as CardProgressType, Link } from '../types';
+
 export default defineComponent({
   name: 'ListCardProgress',
   props: {
@@ -57,9 +63,6 @@ export default defineComponent({
       type: Array as () => CardProgressType[],
       required: true,
     },
-    stats: {
-      type: Array as () => ItemStatistics[],
-    },
     button: {
       type: Object as () => Link,
       required: false,
@@ -70,6 +73,17 @@ export default defineComponent({
     SectionHeading,
     StatsBar,
   },
+  setup() {
+    const memberResults = memberResultsFixture as MemberResults;
+    const { getMemberResultStats } = useStatsBar();
+    const stats = computed<ItemStatistics[]>(() =>
+      getMemberResultStats(memberResults.results),
+    );
+
+    return {
+      stats,
+    };
+  },
 });
 </script>
 

src/components/homepage/SliderProgress.vue

@@ -25,7 +25,6 @@
  * @example
  * <slider-progress
  *   title="sliderProgressTitle"
- *   :stats="itemStats"
  *   :cards="progressCards"
  *   :button="viewAllButton"
  * />
@@ -42,7 +41,14 @@ import CardProgressSlider from './CardProgressSlider.vue';
 import SectionHeading from '../global/SectionHeading.vue';
 import StatsBar from '../global/StatsBar.vue';
 
+// composables
+import { useStatsBar } from 'src/composables/useStatsBar';
+
+// fixtures
+import memberResultsFixture from '../../../test/cypress/fixtures/memberResults.json';
+
 // types
+import type { MemberResults } from '../types/Results';
 import { CardProgress, Link } from '../types';
 import type { ItemStatistics } from '../types/Statistics';
 
@@ -58,9 +64,6 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    stats: {
-      type: Array as () => ItemStatistics[],
-    },
     cards: {
       type: Array as () => CardProgress[],
       required: true,
@@ -71,6 +74,12 @@ export default defineComponent({
     },
   },
   setup() {
+    const memberResults = memberResultsFixture as MemberResults;
+    const { getMemberResultStats } = useStatsBar();
+    const stats = computed<ItemStatistics[]>(() =>
+      getMemberResultStats(memberResults.results),
+    );
+
     const isLargeScreen = computed((): boolean => {
       return Screen.gt.sm;
     });
@@ -81,6 +90,7 @@ export default defineComponent({
 
     return {
       buttonWidth,
+      stats,
     };
   },
 });

src/components/types/Results.ts

@@ -0,0 +1,64 @@
+export interface Emissions {
+  co2: number;
+  co: number;
+  nox: number;
+  n2o: number;
+  voc: number;
+  ch4: number;
+  so2: number;
+  solid: number;
+  pb: number;
+}
+
+export interface TeamMember {
+  distance: number;
+  emissions: Emissions;
+  working_rides_base_count: number;
+  id: number;
+  name: string;
+  frequency: number;
+  avatar_url: string;
+  eco_trip_count: number;
+  rest_url?: string;
+  is_me?: boolean;
+  remaining_rides_count: number;
+  sesame_token: string;
+  is_coordinator: boolean;
+  registration_complete: boolean;
+  gallery: string;
+  unread_notification_count: number;
+  points: number;
+  points_display: string;
+  team: string;
+}
+
+export interface Team {
+  distance: number;
+  frequency: number;
+  emissions: Emissions;
+  eco_trip_count: number;
+  working_rides_base_count: number;
+  name: string | null;
+  id: number;
+  icon_url: string | null;
+  members: TeamMember[];
+  icon: string | null;
+  subsidiary: string;
+  campaign: string;
+  gallery: string;
+  gallery_slug: string;
+}
+
+export interface MemberResults {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: TeamMember[];
+}
+
+export interface TeamResults {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: Team[];
+}

src/components/types/Statistics.ts

@@ -1,12 +1,12 @@
 export enum StatisticsId {
   co2 = 'co2',
   distance = 'distance',
-  routes = 'routes',
+  routes = 'eco_trip_count',
+  frequency = 'frequency',
 }
 
 export interface ItemStatistics {
-  id?: StatisticsId;
-  icon: string;
-  label: string;
+  id: StatisticsId;
+  icon?: string;
   value: string;
 }