Add affected users chart

schema.graphql

@@ -252,6 +252,15 @@ type Event {
   """How many users catch this error"""
   usersAffected: Int
 
+  """Return graph of affected users for the last few days"""
+  usersAffectedChart(
+    """How many days we need to fetch for displaying in a chart"""
+    days: Int! = 0
+
+    """User's local timezone offset in minutes"""
+    timezoneOffset: Int! = 0
+  ): [ChartDataItem!]!
+
   """Return graph of the error rate for the last few days"""
   chartData(
     """How many days we need to fetch for displaying in a chart"""

src/api/events/index.ts

@@ -6,7 +6,8 @@ import {
   QUERY_EVENT,
   QUERY_LATEST_REPETITIONS,
   QUERY_RECENT_PROJECT_EVENTS,
-  QUERY_CHART_DATA
+  QUERY_CHART_DATA,
+  QUERY_AFFECTED_USERS_CHART
 } from './queries';
 import * as api from '@/api';
 import {
@@ -88,7 +89,7 @@ export async function fetchRecentEvents(
  */
 export async function getLatestRepetitions(
   projectId: string, eventId: string, skip: number, limit: number
-): Promise<APIResponse<{project: { event: { repetitions: HawkEventRepetition[] } } }>> {
+): Promise<APIResponse<{ project: { event: { repetitions: HawkEventRepetition[] } } }>> {
   return api.call(QUERY_LATEST_REPETITIONS, {
     projectId,
     eventId,
@@ -174,3 +175,20 @@ export async function fetchChartData(projectId: string, eventId: string, days: n
     timezoneOffset,
   })).project.event.chartData;
 }
+
+/**
+ * Fetch data for aaffected users chart chart
+ *
+ * @param {string} projectId - project id
+ * @param {string} eventId - event id
+ * @param {number} days - how many days we need to fetch for displaying in chart
+ * @param {number} timezoneOffset - user's local timezone
+ */
+export function fetchAffectedUsersChartData(projectId: string, eventId: string, days: number, timezoneOffset: number): Promise<APIResponse<{ project: { event: { usersAffectedChart: EventChartItem[] } } }>> {
+  return api.call(QUERY_AFFECTED_USERS_CHART, {
+    projectId,
+    eventId,
+    days,
+    timezoneOffset,
+  });
+}

src/api/events/queries.ts

@@ -195,6 +195,32 @@ export const QUERY_CHART_DATA = `
   }
 `;
 
+// language=GraphQL
+/**
+ * Fetch data for affected users chart
+ * Display affected users for few days
+ */
+export const QUERY_AFFECTED_USERS_CHART = `
+  query AffectedUsersChartData (
+    $projectId: ID!
+    $eventId: ID!
+    $days: Int!
+    $timezoneOffset: Int!
+  ) {
+    project(id: $projectId) {
+      event(id: $eventId) {
+        usersAffectedChart(
+          days: $days,
+          timezoneOffset: $timezoneOffset
+        ) {
+          timestamp
+          count
+        }
+      }
+    }
+  }
+`;
+
 // language=GraphQL
 /**
  * GraphQL Mutation to mark event as visited

src/components/event/UsersAffected.vue

@@ -10,16 +10,24 @@
       >
         {{ $tc('event.usersAffected.users', event.usersAffected) }}
       </div>
+      <div class="event-users-affected__label">
+        {{ $t('event.usersAffected.daily') }}
+      </div>
+      <Chart :points="chart" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue 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 {AffectedUsersChartItem} from '../../types/chart';
 
 export default Vue.extend({
   name: 'UsersAffectedOverview',
+  components: { Chart },
   props: {
     /**
      * Viewed event
@@ -39,36 +47,51 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      groupedRepetitions: new Map(),
-    };
+      chart: [],
+    } as { chart: AffectedUsersChartItem[] };
   },
   computed: {
     originalEvent(): HawkEvent {
       return this.$store.getters.getProjectEventById(this.projectId, this.event.id);
     },
   },
+  async created() {
+    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,
+        days: twoWeeks + boundingDays,
+      });
+    }
+
+    this.chart = this.event.affectedUsersChartData || [];
+  },
 });
 </script>
 
 <style>
-  .event-users-affected {
-    &__section {
-      margin-bottom: 30px;
-    }
+.event-users-affected {
+  &__section {
+    margin-bottom: 30px;
+  }
 
-    &__label {
-      margin-bottom: 10px;
-      color: var(--color-text-second);
-      font-weight: bold;
-      font-size: 12px;
-      letter-spacing: 0.15px;
-      text-transform: uppercase;
-    }
+  &__label {
+    margin-bottom: 10px;
+    color: var(--color-text-second);
+    font-weight: bold;
+    font-size: 12px;
+    letter-spacing: 0.15px;
+    text-transform: uppercase;
+  }
 
-    &__affected {
-      color: var(--color-text-main);
-      font-weight: bold;
-      font-size: 24px;
-    }
+  &__affected {
+    margin-bottom: 20px;
+    color: var(--color-text-main);
+    font-weight: bold;
+    font-size: 24px;
   }
+}
 </style>

src/i18n/messages/en.json

@@ -358,7 +358,8 @@
     },
     "usersAffected": {
       "total": "Total",
-      "users": "{n} user | {n} users"
+      "users": "{n} user | {n} users",
+      "daily": "Daily for last two weeks"
     },
     "navigation": {
       "overview": "Overview",

src/i18n/messages/ru.json

@@ -358,7 +358,8 @@
     },
     "usersAffected": {
       "total": "Всего",
-      "users": "{n} пользователь | {n} пользователей"
+      "users": "| {n} пользователь | {n} пользователя | {n} пользователей",
+      "daily": "Ежедневно за последние две недели"
     },
     "navigation": {
       "overview": "Обзор",

src/store/modules/events/actionTypes.js

@@ -57,3 +57,8 @@ export const SET_EVENTS_FILTERS = 'SET_EVENTS_FILTERS';
  * Get chart data for target event
  */
 export const GET_CHART_DATA = 'GET_CHART_DATA';
+
+/**
+ * Get data for affected users chart
+ */
+export const GET_AFFECTED_USERS_CHART_DATA = 'GET_AFFECTED_USERS_CHART_DATA';