feat(affected-users): added chart data

src/api/events/index.ts

@@ -6,7 +6,8 @@ import {
   QUERY_EVENT,
   QUERY_EVENT_REPETITIONS_PORTION,
   QUERY_PROJECT_DAILY_EVENTS,
-  QUERY_CHART_DATA
+  QUERY_CHART_DATA,
+  QUERY_AFFECTED_USERS_CHART_DATA
 } from './queries';
 import * as api from '@/api';
 import type {
@@ -20,7 +21,7 @@ import {
   EventsSortOrder
 } from '@/types/events';
 import type { User } from '@/types/user';
-import type { EventChartItem, ChartLine } from '@/types/chart';
+import type { ChartLine } from '@/types/chart';
 import type { APIResponse } from '../../types/api';
 
 /**
@@ -82,8 +83,10 @@ export async function fetchDailyEventsPortion(
     response.errors.forEach(e => console.error(e));
   }
 
-  return project?.dailyEventsPortion ?? { cursor: null,
-    dailyEventsPortion: [] };
+  return project?.dailyEventsPortion ?? {
+    cursor: null,
+    dailyEventsPortion: [],
+  };
 }
 
 /**
@@ -96,8 +99,16 @@ export async function fetchDailyEventsPortion(
  */
 export async function getRepetitionsPortion(
   projectId: string, originalEventId: string, limit: number, cursor?: string
-): Promise<APIResponse<{ project: { event: { repetitionsPortion: { repetitions: HawkEvent[];
-  nextCursor?: string; }; }; }; }>> {
+): Promise<APIResponse<{
+  project: {
+    event: {
+      repetitionsPortion: {
+        repetitions: HawkEvent[];
+        nextCursor?: string;
+      };
+    };
+  };
+}>> {
   const response = await api.call(QUERY_EVENT_REPETITIONS_PORTION, {
     limit,
     projectId,
@@ -151,8 +162,10 @@ export async function toggleEventMark(projectId: string, eventId: string, mark:
  * @param eventId - original event id
  * @param assignee - user id to assign
  */
-export async function updateAssignee(projectId: string, eventId: string, assignee: string): Promise<{ success: boolean;
-  record: User; }> {
+export async function updateAssignee(projectId: string, eventId: string, assignee: string): Promise<{
+  success: boolean;
+  record: User;
+}> {
   return (await api.callOld(MUTATION_UPDATE_EVENT_ASSIGNEE, {
     input: {
       projectId,
@@ -196,3 +209,24 @@ export async function fetchChartData(
     timezoneOffset,
   })).project.event.chartData;
 }
+
+/**
+ * Fetch data for affected users daily chart
+ * @param projectId - id of the project owning the event
+ * @param originalEventId - id of the original event
+ * @param days - how many days we need to fetch for displaying in chart
+ * @param timezoneOffset - user's local timezone
+ */
+export async function fetchAffectedUsersChartData(
+  projectId: string,
+  originalEventId: string,
+  days: number,
+  timezoneOffset: number
+): Promise<ChartLine[]> {
+  return (await api.callOld(QUERY_AFFECTED_USERS_CHART_DATA, {
+    projectId,
+    originalEventId,
+    days,
+    timezoneOffset,
+  })).project.event.affectedUsersChartData;
+}

src/api/events/queries.ts

@@ -103,6 +103,35 @@ export const QUERY_CHART_DATA = `
   }
 `;
 
+// language=GraphQL
+/**
+ * Fetch data for affected users chart
+ * Display affected users count for few days
+ */
+export const QUERY_AFFECTED_USERS_CHART_DATA = `
+  query EventAffectedUsersChartData (
+    $projectId: ID!
+    $originalEventId: ID!
+    $days: Int!
+    $timezoneOffset: Int!
+  ) {
+    project(projectId: $projectId) {
+      event(eventId: $originalEventId, originalEventId: $originalEventId) {
+        affectedUsersChartData(
+          days: $days,
+          timezoneOffset: $timezoneOffset
+        ) {
+          label
+          data {
+            timestamp
+            count
+          }
+        }
+      }
+    }
+  }
+`;
+
 // language=GraphQL
 /**
  * GraphQL Mutation to mark event as visited

src/components/event/UsersAffected.vue

@@ -11,15 +11,27 @@
         {{ $t('event.usersAffected.users', { n: event.usersAffected }) }}
       </div>
     </div>
+    <div class="event-users-affected__section">
+      <div class="event-users-affected__label">
+        {{ $t('event.daily.lastTwoWeeks') }}
+      </div>
+      <Chart :lines="chartData" />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { HawkEvent } from '@/types/events';
+import Chart from '../events/Chart.vue';
+import { GET_AFFECTED_USERS_CHART_DATA } from '../../store/modules/events/actionTypes';
+import { ChartLine } from '@/types/chart';
 
 export default defineComponent({
   name: 'UsersAffectedOverview',
+  components: {
+    Chart,
+  },
   props: {
     /**
      * Viewed event
@@ -37,6 +49,38 @@ export default defineComponent({
       required: true,
     },
   },
+  data: function (): {
+    /**
+     * Set of lines for a chart
+     */
+    chartData: ChartLine[];
+  } {
+    return {
+      /**
+       * Data for a chart
+       */
+      chartData: [],
+    };
+  },
+  /**
+   * Vue created hook
+   * Used to fetch chart data on component creation
+   */
+  async created(): Promise<void> {
+    const twoWeeks = 14;
+    const boundingDays = 2;
+
+    if (!this.event.affectedUsersChartData) {
+      await this.$store.dispatch(GET_AFFECTED_USERS_CHART_DATA, {
+        projectId: this.projectId,
+        eventId: this.event.id,
+        originalEventId: this.event.originalEventId,
+        days: twoWeeks + boundingDays,
+      });
+    }
+
+    this.chartData = this.event.affectedUsersChartData || [];
+  },
 });
 </script>
 

src/store/modules/events/actionTypes.js

@@ -58,6 +58,11 @@ export const SET_EVENTS_FILTERS = 'SET_EVENTS_FILTERS';
  */
 export const GET_CHART_DATA = 'GET_CHART_DATA';
 
+/**
+ * Get affected users chart data for target event
+ */
+export const GET_AFFECTED_USERS_CHART_DATA = 'GET_AFFECTED_USERS_CHART_DATA';
+
 /**
  * Get list project with dailyEvents portion
  */