From 9e211e6968b79dd5979469c03d6d7f7ee897f588 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Toulet?= <agnes.toulet@gmail.com>
Date: Fri, 2 Oct 2020 11:46:09 +0200
Subject: [PATCH 1/2] Add custom activity type support

---
 src/components/QueryEditor.tsx | 23 +++++++++++++++++++++--
 src/datasource.ts              | 22 +++++++++++++++-------
 src/types.ts                   |  1 +
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 365fc23..88b8e43 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -1,6 +1,6 @@
-import React, { PureComponent } from 'react';
+import React, { ChangeEvent, PureComponent } from 'react';
 import { SelectableValue, QueryEditorProps } from '@grafana/data';
-import { InlineFormLabel, Select } from '@grafana/ui';
+import { InlineFormLabel, Input, Select } from '@grafana/ui';
 import {
   StravaQuery,
   StravaQueryType,
@@ -34,6 +34,7 @@ const stravaActivityTypeOptions: Array<SelectableValue<StravaActivityType>> = [
   { value: 'Run', label: 'Run' },
   { value: 'Ride', label: 'Ride' },
   { value: 'Other', label: 'Other' },
+  { value: 'Custom', label: 'Custom' },
 ];
 
 const FORMAT_OPTIONS: Array<SelectableValue<StravaQueryFormat>> = [
@@ -56,6 +57,7 @@ export const DefaultTarget: State = {
   athlete: {},
   queryType: StravaQueryType.Activities,
   activityType: null,
+  customActivityType: '',
   activityStat: StravaActivityStat.Distance,
   format: StravaQueryFormat.TimeSeries,
   interval: StravaQueryInterval.Auto,
@@ -74,6 +76,7 @@ export class QueryEditor extends PureComponent<Props, State> {
     format: StravaQueryFormat.TimeSeries,
     queryType: StravaQueryType.Activities,
     activityType: null,
+    customActivityType: '',
     activityStat: StravaActivityStat.Distance,
   };
 
@@ -123,6 +126,13 @@ export class QueryEditor extends PureComponent<Props, State> {
     }
   };
 
+  onCustomActivityTypeChanged = (event: ChangeEvent<HTMLInputElement>) => {
+    const { query } = this.props;
+    if (event.target.value) {
+      this.onChange({ ...query, customActivityType: event.target.value })
+    }
+  }
+
   onFormatChange = (option: SelectableValue<StravaQueryFormat>) => {
     const { query } = this.props;
     if (option.value) {
@@ -145,6 +155,7 @@ export class QueryEditor extends PureComponent<Props, State> {
 
   render() {
     const { athlete } = this.state;
+    const { query } = this.props;
 
     return (
       <>
@@ -168,6 +179,14 @@ export class QueryEditor extends PureComponent<Props, State> {
             onChange={this.onActivityTypeChanged}
             className="gf-form-select"
           />
+          {
+            this.getSelectedActivityType()?.value == 'Custom' &&
+            (<Input
+                width={15}
+                value={query.customActivityType || ''}
+                onChange={this.onCustomActivityTypeChanged}
+              />)
+          }
           <InlineFormLabel width={5}>Stat</InlineFormLabel>
           <Select
             isSearchable={false}
diff --git a/src/datasource.ts b/src/datasource.ts
index 25fdfca..8b7419c 100644
--- a/src/datasource.ts
+++ b/src/datasource.ts
@@ -9,6 +9,7 @@ import {
   TimeSeriesPoints,
   TimeSeriesValue,
 } from '@grafana/data';
+import { getTemplateSrv } from '@grafana/runtime';
 import StravaApi from './stravaApi';
 import polyline from './polyline';
 import {
@@ -55,7 +56,7 @@ export default class StravaDatasource extends DataSourceApi<StravaQuery, StravaJ
     });
 
     for (const target of options.targets) {
-      const filteredActivities = this.filterActivities(activities, target.activityType);
+      const filteredActivities = this.filterActivities(activities, target.activityType, target.customActivityType);
       switch (target.format) {
         case StravaQueryFormat.Table:
           const tableData = this.transformActivitiesToTable(filteredActivities, target);
@@ -105,18 +106,25 @@ export default class StravaDatasource extends DataSourceApi<StravaQuery, StravaJ
     return authCode;
   }
 
-  filterActivities(activities: any[], activityType: StravaActivityType): any[] {
+  filterActivities(allActivities: any[], activityType: StravaActivityType, customActivityType: string): any[] {
+    let activities = [activityType]
     if (!activityType) {
       // No filter, return all
-      return activities;
+      return allActivities;
+    } else if (activityType === 'Custom' && customActivityType) {
+      // Handle template variables if any
+      if (customActivityType.indexOf('$') != -1) {
+        customActivityType = getTemplateSrv().replace(customActivityType, undefined, 'csv')
+      }
+      activities = customActivityType.split(',').map(activity => activity.trim())
     }
 
-    return activities.filter(activity => {
+    return allActivities.filter(activity => {
       if (activityType === 'Other') {
         return activity.type !== 'Run' && activity.type !== 'Ride';
-      } else {
-      }
-      return activity.type === activityType;
+      } 
+      
+      return activities.indexOf(activity.type) != -1
     });
   }
 
diff --git a/src/types.ts b/src/types.ts
index b677e89..e989af6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -13,6 +13,7 @@ export interface StravaQuery extends DataQuery {
   queryType: StravaQueryType;
   activityStat: StravaActivityStat;
   activityType: StravaActivityType;
+  customActivityType: string;
   format: StravaQueryFormat;
   interval: StravaQueryInterval;
 }

From 6b3e7c61193cb025917ba171a97a8d87e9b75251 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Toulet?= <agnes.toulet@gmail.com>
Date: Fri, 2 Oct 2020 14:28:45 +0200
Subject: [PATCH 2/2] Add tooltip for activity type field

---
 src/components/QueryEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index 88b8e43..8ce0d1e 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -170,7 +170,7 @@ export class QueryEditor extends PureComponent<Props, State> {
             onChange={this.onQueryTypeChanged}
             className="gf-form-select"
           />
-          <InlineFormLabel width={7}>Activity</InlineFormLabel>
+          <InlineFormLabel width={7} tooltip="The Custom option allows you to type a comma-separated list of activity types or a variable name.">Activity</InlineFormLabel>
           <Select
             isSearchable={false}
             width={10}