From 33a6c7d999c3abba284b763c25b480495e9c6a7d Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 07:20:52 -0300
Subject: [PATCH 01/18] implements license fetching and interval selection

---
 .../src/components/QueryEditor.tsx            | 99 ++++++++++++++++---
 .../src/datasource.ts                         | 54 +++++-----
 bitmovin-analytics-datasource/src/types.ts    |  9 +-
 .../src/utils/dataUtils.ts                    | 16 ++-
 .../src/utils/intervalUtils.ts                | 72 ++++++++++++++
 .../src/utils/licenses.ts                     | 61 ++++++++++++
 6 files changed, 263 insertions(+), 48 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/utils/licenses.ts

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index f9b0647..1baf383 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -1,32 +1,99 @@
-import React, { ChangeEvent } from 'react';
-import { InlineField, Input } from '@grafana/ui';
-import { QueryEditorProps } from '@grafana/data';
+import React, { ChangeEvent, useEffect, useState } from 'react';
+import { FieldSet, InlineField, InlineSwitch, Select } from '@grafana/ui';
+import { QueryEditorProps, SelectableValue } from '@grafana/data';
+
 import { DataSource } from '../datasource';
 import { MyDataSourceOptions, MyQuery } from '../types';
+import { fetchLicenses } from '../utils/licenses';
+import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
-export function QueryEditor({ query, onChange, onRunQuery }: Props) {
-  const onQueryTextChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, queryText: event.target.value });
+export enum LoadingState {
+  Default = 'DEFAULT',
+  Loading = 'LOADING',
+  Success = 'SUCCESS',
+  Error = 'ERROR',
+}
+
+export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) {
+  const [selectableLicenses, setSelectableLicenses] = useState<SelectableValue[]>([]);
+  const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
+  const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
+  const [isTimeSeries, setIsTimeSeries] = useState(true);
+
+  useEffect(() => {
+    setLicenseLoadingState(LoadingState.Loading);
+    fetchLicenses(datasource.apiKey, datasource.baseUrl)
+      .then((licenses) => {
+        setSelectableLicenses(licenses);
+        setLicenseLoadingState(LoadingState.Success);
+      })
+      .catch((e) => {
+        setLicenseLoadingState(LoadingState.Error);
+        setLicenseErrorMessage(e.status + ' ' + e.statusText);
+      });
+  }, []);
+
+  const onLicenseChange = (item: SelectableValue) => {
+    onChange({ ...query, licenseKey: item.value });
+    onRunQuery();
   };
 
-  const onConstantChange = (event: ChangeEvent<HTMLInputElement>) => {
-    onChange({ ...query, constant: parseFloat(event.target.value) });
-    // executes the query
+  const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsTimeSeries(event.currentTarget.checked);
+    if (event.currentTarget.checked) {
+      onChange({ ...query, interval: 'AUTO' });
+    } else {
+      onChange({ ...query, interval: undefined });
+    }
     onRunQuery();
   };
 
-  const { queryText, constant } = query;
+  const onIntervalChange = (item: SelectableValue) => {
+    onChange({ ...query, interval: item.value });
+    onRunQuery();
+  };
+
+  const renderTimeSeriesOption = () => {
+    return (
+      <>
+        <InlineField label="Interval" labelWidth={20}>
+          <Select
+            defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
+            onChange={(item) => onIntervalChange(item)}
+            width={40}
+            options={SELECTABLE_QUERY_INTERVALS}
+          />
+        </InlineField>
+      </>
+    );
+  };
 
   return (
     <div className="gf-form">
-      <InlineField label="Constant">
-        <Input onChange={onConstantChange} value={constant} width={8} type="number" step="0.1" />
-      </InlineField>
-      <InlineField label="Query Text" labelWidth={16} tooltip="Not used yet">
-        <Input onChange={onQueryTextChange} value={queryText || ''} />
-      </InlineField>
+      <FieldSet>
+        <InlineField
+          label="License"
+          labelWidth={20}
+          invalid={licenseLoadingState === LoadingState.Error}
+          error={`Error when fetching Analytics Licenses: ${licenseErrorMessage}`}
+          disabled={licenseLoadingState === LoadingState.Error}
+        >
+          <Select
+            onChange={onLicenseChange}
+            width={40}
+            options={selectableLicenses}
+            noOptionsMessage="No Analytics Licenses found"
+            isLoading={licenseLoadingState === LoadingState.Loading}
+            placeholder={licenseLoadingState === LoadingState.Loading ? 'Loading Licenses' : 'Choose License'}
+          />
+        </InlineField>
+        <InlineField label="Format as time series" labelWidth={20}>
+          <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
+        </InlineField>
+        {isTimeSeries && renderTimeSeriesOption()}
+      </FieldSet>
     </div>
   );
 }
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index fc7eb92..917d2b4 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -11,7 +11,7 @@ import { catchError, lastValueFrom, map, Observable, of } from 'rxjs';
 
 import { MixedDataRowList, MyDataSourceOptions, MyQuery, NumberDataRowList } from './types';
 import { transformGroupedTimeSeriesData, transformSimpleTimeSeries, transformTableData } from './utils/dataUtils';
-import { QueryInterval } from './utils/intervalUtils';
+import { calculateQueryInterval, QueryInterval } from './utils/intervalUtils';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
@@ -50,32 +50,38 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
    * */
   async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
     const { range } = options;
-    const from = new Date(range!.from.toDate().setSeconds(0, 0));
+    const from = range!.from.toDate();
     const to = range!.to.toDate();
 
-    const query: AnalyticsQuery = {
-      filters: [
-        {
-          name: 'VIDEO_STARTUPTIME',
-          operator: 'GT',
-          value: 0,
-        },
-      ],
-      groupBy: [],
-      orderBy: [
-        {
-          name: 'MINUTE',
-          order: 'DESC',
-        },
-      ],
-      dimension: 'IMPRESSION_ID',
-      start: from,
-      end: to,
-      licenseKey: '',
-      interval: 'MINUTE',
-    };
-
     const promises = options.targets.map(async (target) => {
+      const interval = target.interval
+        ? calculateQueryInterval(target.interval!, from.getTime(), to.getTime())
+        : undefined;
+
+      const query: AnalyticsQuery = {
+        filters: [
+          {
+            name: 'VIDEO_STARTUPTIME',
+            operator: 'GT',
+            value: 0,
+          },
+        ],
+        groupBy: [],
+        orderBy: interval
+          ? [
+              {
+                name: interval,
+                order: 'DESC',
+              },
+            ]
+          : [],
+        dimension: 'IMPRESSION_ID',
+        start: from,
+        end: to,
+        licenseKey: target.licenseKey,
+        interval: interval,
+      };
+
       const response = await lastValueFrom(this.request(this.getRequestUrl(), 'POST', query));
 
       const dataRows: MixedDataRowList = response.data.data.result.rows;
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index bed9c31..84ceeee 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -1,14 +1,13 @@
 import { DataSourceJsonData } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
+import { QueryInterval } from './utils/intervalUtils';
 
 export interface MyQuery extends DataQuery {
-  queryText?: string;
-  constant: number;
+  licenseKey: string;
+  interval?: QueryInterval | 'AUTO';
 }
 
-export const DEFAULT_QUERY: Partial<MyQuery> = {
-  constant: 6.5,
-};
+export const DEFAULT_QUERY: Partial<MyQuery> = {};
 
 /**
  * These are options configured for each DataSource instance
diff --git a/bitmovin-analytics-datasource/src/utils/dataUtils.ts b/bitmovin-analytics-datasource/src/utils/dataUtils.ts
index 1467836..0ce63b7 100644
--- a/bitmovin-analytics-datasource/src/utils/dataUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/dataUtils.ts
@@ -1,5 +1,5 @@
 import { differenceWith, sortBy, zip } from 'lodash';
-import { intervalToMilliseconds, QueryInterval } from './intervalUtils';
+import { ceilTimestampAccordingToQueryInterval, intervalToMilliseconds, QueryInterval } from './intervalUtils';
 import { Field, FieldType } from '@grafana/data';
 import { MixedDataRow, MixedDataRowList, NumberDataRow, NumberDataRowList } from '../types';
 
@@ -27,6 +27,9 @@ export function padAndSortTimeSeries(
     throw new Error(`Query interval ${interval} is not a valid interval.`);
   }
 
+  // ceil timestamp to pad data with accurate timestamps and to ignore incomplete first datapoints
+  const ceiledTimestamp = ceilTimestampAccordingToQueryInterval(startTimestamp, interval, data[0][0] as number);
+
   let dataRows: MixedDataRow = [0];
   const zeroValueTimeSeries: MixedDataRowList = [];
 
@@ -36,7 +39,7 @@ export function padAndSortTimeSeries(
   }
 
   // Create zero value time series data for the entire interval
-  for (let timestamp = startTimestamp; timestamp <= endTimestamp; timestamp += intervalInMs) {
+  for (let timestamp = ceiledTimestamp; timestamp <= endTimestamp; timestamp += intervalInMs) {
     const row = [timestamp, ...dataRows];
     zeroValueTimeSeries.push(row);
   }
@@ -50,7 +53,14 @@ export function padAndSortTimeSeries(
   // Sort data by timestamp
   const sortedData = sortBy(paddedData, (row) => row[0]);
 
-  return sortedData;
+  // Ignore datapoints before ceiled start timestamp to only show complete datapoints and to not overflow graph to the left
+  let index = 0;
+  while (sortedData[index][0] < ceiledTimestamp) {
+    index++;
+  }
+  const trimmedData = sortedData.slice(index);
+
+  return trimmedData;
 }
 
 /**
diff --git a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
index 1cf9787..d7c7fbb 100644
--- a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
@@ -1,5 +1,16 @@
 export type QueryInterval = 'MINUTE' | 'HOUR' | 'DAY';
 
+export type SelectableQueryInterval = QueryInterval | 'AUTO';
+
+export const SELECTABLE_QUERY_INTERVALS: Array<{ value: SelectableQueryInterval | 'AUTO'; label: string }> = [
+  { value: 'AUTO', label: 'Auto' },
+  { value: 'MINUTE', label: 'Minute' },
+  { value: 'HOUR', label: 'Hour' },
+  { value: 'DAY', label: 'Day' },
+];
+
+export const DEFAULT_SELECTABLE_QUERY_INTERVAL = SELECTABLE_QUERY_INTERVALS[0];
+
 /**
  * Get corresponding interval in milliseconds.
  *
@@ -18,3 +29,64 @@ export const intervalToMilliseconds = (interval: QueryInterval): number => {
       return -1;
   }
 };
+
+/**
+ * Calculates the Query interval based on a given selected interval, start timestamp and end timestamp
+ *
+ * @param {SelectableQueryInterval} interval The selected interval
+ * @param {number} startTimestamp The start timestamp in milliseconds
+ * @param {number} endTimestamp The end timestamp in milliseconds
+ * @returns {QueryInterval} calculated Interval as QueryInterval
+ */
+export const calculateQueryInterval = (
+  interval: SelectableQueryInterval,
+  startTimestamp: number,
+  endTimestamp: number
+): QueryInterval => {
+  if (interval !== 'AUTO') {
+    return interval as QueryInterval;
+  }
+
+  const intervalInMilliseconds = endTimestamp - startTimestamp;
+  const minuteIntervalLimitInMilliseconds = 3 * 60 * 60 * 1000; // MINUTE granularity for timeframes below 3h
+  const hourIntervalLimitInMilliseconds = 6 * 24 * 60 * 60 * 1000; // HOUR granularity for timeframes below 6d
+
+  if (intervalInMilliseconds <= minuteIntervalLimitInMilliseconds) {
+    return 'MINUTE';
+  } else if (intervalInMilliseconds <= hourIntervalLimitInMilliseconds) {
+    return 'HOUR';
+  }
+  return 'DAY';
+};
+
+/**
+ * Rounds up a timestamp according to the specified query interval.
+ *
+ * @param {number} startTimestamp The start timestamp of the query.
+ * @param {QueryInterval} interval       The query interval.
+ * @param {number} dataTimestamp  The timestamp of a data point. Needed to calculate correct Day interval timestamp.
+ * @return {number} The rounded up timestamp.
+ */
+export function ceilTimestampAccordingToQueryInterval(
+  startTimestamp: number,
+  interval: QueryInterval,
+  dataTimestamp: number
+): number {
+  const date = new Date(startTimestamp);
+  switch (interval) {
+    case 'MINUTE':
+      if (date.getSeconds() === 0 && date.getMilliseconds() === 0) {
+        return startTimestamp;
+      }
+      return date.setMinutes(date.getMinutes() + 1, 0, 0);
+    case 'HOUR':
+      if (date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0) {
+        return startTimestamp;
+      }
+      return date.setHours(date.getHours() + 1, 0, 0, 0);
+    case 'DAY':
+      // Take the hours value from the datapoint timestamps as the timestamps for the day interval depend on the timezone of the license
+      const dataHours = new Date(dataTimestamp).getHours();
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), dataHours).getTime();
+  }
+}
diff --git a/bitmovin-analytics-datasource/src/utils/licenses.ts b/bitmovin-analytics-datasource/src/utils/licenses.ts
new file mode 100644
index 0000000..a9c8d15
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/utils/licenses.ts
@@ -0,0 +1,61 @@
+import { lastValueFrom } from 'rxjs';
+import { getBackendSrv } from '@grafana/runtime';
+import { SelectableValue } from '@grafana/data';
+
+const licenseEndpoints = [
+  {
+    endpoint: '/analytics/licenses',
+    mapperFunc: (license: any): SelectableValue => ({
+      value: license.licenseKey,
+      label: license.name ? license.name : license.licenseKey,
+    }),
+  },
+  {
+    endpoint: '/analytics/virtual-licenses',
+    mapperFunc: (license: any): SelectableValue => ({
+      value: license.id,
+      label: license.name ? license.name : license.id,
+    }),
+  },
+  {
+    endpoint: '/analytics/demo-licenses',
+    mapperFunc: (license: any): SelectableValue => ({
+      value: license.id,
+      label: license.name ? license.name : license.id,
+    }),
+  },
+];
+
+async function fetchLicensesForEndpoint(url: string, apiKey: string, mapperFunc: (license: any) => SelectableValue) {
+  const options = {
+    url: url,
+    headers: { 'X-Api-Key': apiKey },
+    method: 'GET',
+  };
+
+  const response = await lastValueFrom(getBackendSrv().fetch(options));
+  // @ts-ignore
+  const licenses = response.data.data.result.items;
+
+  const selectableLicenses = [];
+  for (const license of licenses) {
+    selectableLicenses.push(mapperFunc(license));
+  }
+
+  return selectableLicenses;
+}
+
+export async function fetchLicenses(apiKey: string, baseUrl: string): Promise<SelectableValue[]> {
+  const allLicenses: SelectableValue[] = [];
+
+  for (const licenseEndpoints1 of licenseEndpoints) {
+    const licenses = await fetchLicensesForEndpoint(
+      baseUrl + licenseEndpoints1.endpoint,
+      apiKey,
+      licenseEndpoints1.mapperFunc
+    );
+    allLicenses.push(...licenses);
+  }
+
+  return allLicenses;
+}

From cf28b72c7b5c61a3f7eb6796a4951d222f031533 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 07:28:20 -0300
Subject: [PATCH 02/18] add tests for intervalUtils

---
 .../src/utils/intervalUtils.test.ts           | 149 ++++++++++++++++++
 .../src/utils/intervalUtils.ts                |   5 +-
 2 files changed, 152 insertions(+), 2 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts

diff --git a/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts b/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts
new file mode 100644
index 0000000..57113ad
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts
@@ -0,0 +1,149 @@
+import { calculateQueryInterval, ceilTimestampAccordingToQueryInterval } from './intervalUtils';
+
+describe('calculateQueryInterval', () => {
+  it('should return correct given interval if interval is not AUTO', () => {
+    //arrange
+    const startTimestamp = 1713349080000; //Wednesday, 17 April 2024 10:18:00
+    const endTimestamp = 1713356280000; //Wednesday, 17 April 2024 12:18:00
+    const interval = 'MINUTE';
+
+    // act
+    const result = calculateQueryInterval(interval, startTimestamp, endTimestamp);
+
+    //assert
+    expect(result).toEqual(interval);
+  });
+
+  it('should return MINUTE interval if interval is AUTO and time interval below 3 hours', () => {
+    //arrange
+    const startTimestamp = 1713349080000; //Wednesday, 17 April 2024 10:18:00
+    const endTimestamp = 1713356280000; //Wednesday, 17 April 2024 12:18:00
+
+    // act
+    const result = calculateQueryInterval('AUTO', startTimestamp, endTimestamp);
+
+    //assert
+    expect(result).toEqual('MINUTE');
+  });
+
+  it('should return HOUR interval if interval is AUTO and time interval bigger 3 hours and than below 6 hours', () => {
+    //arrange
+    const startTimestamp = 1713345420000; //Wednesday, 17 April 2024 09:17:00
+    const endTimestamp = 1713356280000; //Wednesday, 17 April 2024 12:18:00
+
+    // act
+    const result = calculateQueryInterval('AUTO', startTimestamp, endTimestamp);
+
+    //assert
+    expect(result).toEqual('HOUR');
+  });
+
+  it('should return DAY interval if interval is AUTO and time interval bigger than 6 days', () => {
+    //arrange
+    const startTimestamp = 1712837820000; //Thursday, 11 April 2024 12:17:00
+    const endTimestamp = 1713356280000; //Wednesday, 17 April 2024 12:18:00
+
+    // act
+    const result = calculateQueryInterval('AUTO', startTimestamp, endTimestamp);
+
+    //assert
+    expect(result).toEqual('DAY');
+  });
+});
+
+describe('ceilTimestampAccordingToQueryInterval', () => {
+  it('should return same timestamp for already rounded MINUTE interval timestamp ', () => {
+    //arrange
+    const timestamp = 1713513900000; //Friday, 19 April 2024 08:05:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+
+    //assert
+    expect(result).toEqual(timestamp);
+  });
+
+  it('should return ceiled timestamp for MINUTE interval timestamp with milliseconds != 0', () => {
+    //arrange
+    const timestamp = 1713513900100; //Friday, 19 April 2024 08:05:00.100
+    const expectedTimestamp = 1713513960000; //Friday, 19 April 2024 08:06:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return ceiled timestamp for MINUTE interval timestamp with seconds != 0', () => {
+    //arrange
+    const timestamp = 1713513912000; //Friday, 19 April 2024 08:05:12
+    const expectedTimestamp = 1713513960000; //Friday, 19 April 2024 08:06:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return same timestamp for already rounded HOUR interval timestamp ', () => {
+    //arrange
+    const timestamp = 1713513600000; //Friday, 19 April 2024 08:00:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+
+    //assert
+    expect(result).toEqual(timestamp);
+  });
+
+  it('should return ceiled timestamp for HOUR interval timestamp with milliseconds != 0', () => {
+    //arrange
+    const timestamp = 1713513600100; //Friday, 19 April 2024 08:00:00.100
+    const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return ceiled timestamp for HOUR interval timestamp with seconds != 0', () => {
+    //arrange
+    const timestamp = 1713513612000; //Friday, 19 April 2024 08:00:12
+    const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return ceiled timestamp for HOUR interval timestamp with minutes != 0', () => {
+    //arrange
+    const timestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
+    const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return correct timestamp DAY interval timestamp ', () => {
+    //arrange
+    const timestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
+    const dataTimestamp = 1713954600000; //Wednesday, 24 April 2024 10:30:00
+    const expectedTimestamp = 1713522600000; //Friday, 19 April 2024 10:30:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'DAY', dataTimestamp);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+});
diff --git a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
index d7c7fbb..2a27f50 100644
--- a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
@@ -85,8 +85,9 @@ export function ceilTimestampAccordingToQueryInterval(
       }
       return date.setHours(date.getHours() + 1, 0, 0, 0);
     case 'DAY':
-      // Take the hours value from the datapoint timestamps as the timestamps for the day interval depend on the timezone of the license
+      // Take the hours and minutes value from the datapoint timestamps as the timestamps for the day interval depend on the timezone of the license
       const dataHours = new Date(dataTimestamp).getHours();
-      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), dataHours).getTime();
+      const dataMinutes = new Date(dataTimestamp).getMinutes();
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), dataHours, dataMinutes).getTime();
   }
 }

From b332c7d70a4e95b4c0261acce1330c2379923e7c Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 11:04:20 -0300
Subject: [PATCH 03/18] fix ceiling of timestamp for DAY interval

---
 .../src/utils/intervalUtils.ts                | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
index 2a27f50..b473d20 100644
--- a/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
+++ b/bitmovin-analytics-datasource/src/utils/intervalUtils.ts
@@ -72,22 +72,33 @@ export function ceilTimestampAccordingToQueryInterval(
   interval: QueryInterval,
   dataTimestamp: number
 ): number {
-  const date = new Date(startTimestamp);
+  const startDate = new Date(startTimestamp);
   switch (interval) {
     case 'MINUTE':
-      if (date.getSeconds() === 0 && date.getMilliseconds() === 0) {
+      if (startDate.getSeconds() === 0 && startDate.getMilliseconds() === 0) {
         return startTimestamp;
       }
-      return date.setMinutes(date.getMinutes() + 1, 0, 0);
+      return startDate.setMinutes(startDate.getMinutes() + 1, 0, 0);
     case 'HOUR':
-      if (date.getMinutes() === 0 && date.getSeconds() === 0 && date.getMilliseconds() === 0) {
+      if (startDate.getMinutes() === 0 && startDate.getSeconds() === 0 && startDate.getMilliseconds() === 0) {
         return startTimestamp;
       }
-      return date.setHours(date.getHours() + 1, 0, 0, 0);
+      return startDate.setHours(startDate.getHours() + 1, 0, 0, 0);
     case 'DAY':
       // Take the hours and minutes value from the datapoint timestamps as the timestamps for the day interval depend on the timezone of the license
       const dataHours = new Date(dataTimestamp).getHours();
       const dataMinutes = new Date(dataTimestamp).getMinutes();
-      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), dataHours, dataMinutes).getTime();
+      const startDateWithCorrectTime = new Date(
+        startDate.getFullYear(),
+        startDate.getMonth(),
+        startDate.getDate(),
+        dataHours,
+        dataMinutes
+      );
+
+      if (startDateWithCorrectTime.getTime() > startTimestamp) {
+        return startDateWithCorrectTime.getTime();
+      }
+      return new Date(startDateWithCorrectTime).setDate(startDateWithCorrectTime.getDate() + 1);
   }
 }

From 5a525792c3a555150f8ab510565f61a3ac4f984f Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 11:04:32 -0300
Subject: [PATCH 04/18] add tests

---
 .../src/utils/dataUtils.test.ts               | 110 +++++++++++++++++-
 .../src/utils/intervalUtils.test.ts           |  76 ++++++++----
 2 files changed, 155 insertions(+), 31 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/utils/dataUtils.test.ts b/bitmovin-analytics-datasource/src/utils/dataUtils.test.ts
index ab37f0f..57820ee 100644
--- a/bitmovin-analytics-datasource/src/utils/dataUtils.test.ts
+++ b/bitmovin-analytics-datasource/src/utils/dataUtils.test.ts
@@ -7,14 +7,15 @@ import {
 import { FieldType } from '@grafana/data';
 
 describe('padAndSortTimeSeries', () => {
-  it('should return sorted and padded data for simple time series data', () => {
+  it('should return sorted and padded data for simple time series data for MINUTE interval', () => {
     //arrange
     const data = [
+      [1712919540000, 1], //Friday, 12 April 2024 10:59:00
       [1712919600000, 2], //Friday, 12 April 2024 11:00:00
       [1712919720000, 5], //Friday, 12 April 2024 11:02:00
     ];
 
-    const startTimestamp = 1712919540000; //Friday, 12 April 2024 10:59:00
+    const startTimestamp = 1712919560000; //Friday, 12 April 2024 10:59:20
     const endTimestamp = 1712919780000; //Friday, 12 April 2024 11:03:00
 
     //act
@@ -22,7 +23,6 @@ describe('padAndSortTimeSeries', () => {
 
     //assert
     expect(result).toEqual([
-      [1712919540000, 0],
       [1712919600000, 2],
       [1712919660000, 0],
       [1712919720000, 5],
@@ -30,14 +30,64 @@ describe('padAndSortTimeSeries', () => {
     ]);
   });
 
-  it('should return sorted and padded data for grouped time series data', () => {
+  it('should return sorted and padded data for simple time series data for HOUR Interval', () => {
+    //arrange
+    const data = [
+      [1712916000000, 1], //Friday, 12 April 2024 10:00:00
+      [1712919600000, 7], //Friday, 12 April 2024 11:00:00
+      [1712930400000, 5], //Friday, 12 April 2024 14:00:00
+      [1712934000000, 2], //Friday, 12 April 2024 15:00:00
+    ];
+
+    const startTimestamp = 1712917444000; //Friday, 12 April 2024 10:24:04
+    const endTimestamp = 1712935444000; //Friday, 12 April 2024 15:24:04
+
+    //act
+    const result = padAndSortTimeSeries(data, startTimestamp, endTimestamp, 'HOUR');
+
+    //assert
+    expect(result).toEqual([
+      [1712919600000, 7], //Friday, 12 April 2024 11:00:00
+      [1712923200000, 0], //Friday, 12 April 2024 12:00:00
+      [1712926800000, 0], //Friday, 12 April 2024 13:00:00
+      [1712930400000, 5], //Friday, 12 April 2024 14:00:00
+      [1712934000000, 2], //Friday, 12 April 2024 15:00:00
+    ]);
+  });
+
+  it('should return sorted and padded data for simple time series data for DAY interval', () => {
+    //arrange
+    const data = [
+      [1712917800000, 1], //Friday, 12 April 2024 10:30:00
+      [1713004200000, 2], //Saturday, 13 April 2024 10:30:00
+      [1713263400000, 5], //Tuesday, 16 April 2024 10:30:00
+    ];
+
+    const startTimestamp = 1712919560000; //Friday, 12 April 2024 10:59:20
+    const endTimestamp = 1713351560000; //Wednesday, 17 April 2024 10:59:20
+
+    //act
+    const result = padAndSortTimeSeries(data, startTimestamp, endTimestamp, 'DAY');
+
+    //assert
+    expect(result).toEqual([
+      [1713004200000, 2], //Saturday, 13 April 2024 10:30:00
+      [1713090600000, 0], //Sunday, 14 April 2024 10:30:00
+      [1713177000000, 0], //Monday, 15 April 2024 10:30:00
+      [1713263400000, 5], //Tuesday, 16 April 2024 10:30:00
+      [1713349800000, 0], //Wednesday, 17 April 2024 10:30:00
+    ]);
+  });
+
+  it('should return sorted and padded data for grouped time series data for MINUTE interval', () => {
     //arrange
     const data = [
+      [1712919540000, 'BROWSER', 'DEVICE_TYPE', 1], //Friday, 12 April 2024 10:59:00
       [1712919600000, 'BROWSER', 'DEVICE_TYPE', 2], //Friday, 12 April 2024 11:00:00
       [1712919720000, 'BROWSER', 'DEVICE_TYPE', 5], //Friday, 12 April 2024 11:02:00
     ];
 
-    const startTimestamp = 1712919540000; //Friday, 12 April 2024 10:59:00
+    const startTimestamp = 1712919560000; //Friday, 12 April 2024 10:59:20
     const endTimestamp = 1712919780000; //Friday, 12 April 2024 11:03:00
 
     //act
@@ -45,7 +95,6 @@ describe('padAndSortTimeSeries', () => {
 
     //assert
     expect(result).toEqual([
-      [1712919540000, 'BROWSER', 'DEVICE_TYPE', 0],
       [1712919600000, 'BROWSER', 'DEVICE_TYPE', 2],
       [1712919660000, 'BROWSER', 'DEVICE_TYPE', 0],
       [1712919720000, 'BROWSER', 'DEVICE_TYPE', 5],
@@ -53,6 +102,55 @@ describe('padAndSortTimeSeries', () => {
     ]);
   });
 
+  it('should return sorted and padded data for grouped time series data for HOUR interval', () => {
+    //arrange
+    const data = [
+      [1712916000000, 'BROWSER', 'DEVICE_TYPE', 1], //Friday, 12 April 2024 10:00:00
+      [1712919600000, 'BROWSER', 'DEVICE_TYPE', 7], //Friday, 12 April 2024 11:00:00
+      [1712930400000, 'BROWSER', 'DEVICE_TYPE', 5], //Friday, 12 April 2024 14:00:00
+      [1712934000000, 'BROWSER', 'DEVICE_TYPE', 2], //Friday, 12 April 2024 15:00:00
+    ];
+
+    const startTimestamp = 1712917444000; //Friday, 12 April 2024 10:24:04
+    const endTimestamp = 1712935444000; //Friday, 12 April 2024 15:24:04
+
+    //act
+    const result = padAndSortTimeSeries(data, startTimestamp, endTimestamp, 'HOUR');
+
+    //assert
+    expect(result).toEqual([
+      [1712919600000, 'BROWSER', 'DEVICE_TYPE', 7], //Friday, 12 April 2024 11:00:00
+      [1712923200000, 'BROWSER', 'DEVICE_TYPE', 0], //Friday, 12 April 2024 12:00:00
+      [1712926800000, 'BROWSER', 'DEVICE_TYPE', 0], //Friday, 12 April 2024 13:00:00
+      [1712930400000, 'BROWSER', 'DEVICE_TYPE', 5], //Friday, 12 April 2024 14:00:00
+      [1712934000000, 'BROWSER', 'DEVICE_TYPE', 2], //Friday, 12 April 2024 15:00:00
+    ]);
+  });
+
+  it('should return sorted and padded data for grouped time series data for DAY interval', () => {
+    //arrange
+    const data = [
+      [1712917800000, 'BROWSER', 'DEVICE_TYPE', 1], //Friday, 12 April 2024 10:30:00
+      [1713004200000, 'BROWSER', 'DEVICE_TYPE', 2], //Saturday, 13 April 2024 10:30:00
+      [1713263400000, 'BROWSER', 'DEVICE_TYPE', 5], //Tuesday, 16 April 2024 10:30:00
+    ];
+
+    const startTimestamp = 1712919560000; //Friday, 12 April 2024 10:59:20
+    const endTimestamp = 1713351560000; //Wednesday, 17 April 2024 10:59:20
+
+    //act
+    const result = padAndSortTimeSeries(data, startTimestamp, endTimestamp, 'DAY');
+
+    //assert
+    expect(result).toEqual([
+      [1713004200000, 'BROWSER', 'DEVICE_TYPE', 2], //Saturday, 13 April 2024 10:30:00
+      [1713090600000, 'BROWSER', 'DEVICE_TYPE', 0], //Sunday, 14 April 2024 10:30:00
+      [1713177000000, 'BROWSER', 'DEVICE_TYPE', 0], //Monday, 15 April 2024 10:30:00
+      [1713263400000, 'BROWSER', 'DEVICE_TYPE', 5], //Tuesday, 16 April 2024 10:30:00
+      [1713349800000, 'BROWSER', 'DEVICE_TYPE', 0], //Wednesday, 17 April 2024 10:30:00
+    ]);
+  });
+
   it('should throw error when interval is not valid', () => {
     //arrange
     const data = [[0, 0]];
diff --git a/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts b/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts
index 57113ad..a0ce99c 100644
--- a/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts
+++ b/bitmovin-analytics-datasource/src/utils/intervalUtils.test.ts
@@ -52,94 +52,120 @@ describe('calculateQueryInterval', () => {
 });
 
 describe('ceilTimestampAccordingToQueryInterval', () => {
-  it('should return same timestamp for already rounded MINUTE interval timestamp ', () => {
+  it('should return same timestamp for already rounded MINUTE interval start timestamp ', () => {
     //arrange
-    const timestamp = 1713513900000; //Friday, 19 April 2024 08:05:00
+    const startTimestamp = 1713513900000; //Friday, 19 April 2024 08:05:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'MINUTE', 0);
 
     //assert
-    expect(result).toEqual(timestamp);
+    expect(result).toEqual(startTimestamp);
   });
 
-  it('should return ceiled timestamp for MINUTE interval timestamp with milliseconds != 0', () => {
+  it('should return ceiled timestamp for MINUTE interval and start timestamp with milliseconds != 0', () => {
     //arrange
-    const timestamp = 1713513900100; //Friday, 19 April 2024 08:05:00.100
+    const startTimestamp = 1713513900100; //Friday, 19 April 2024 08:05:00.100
     const expectedTimestamp = 1713513960000; //Friday, 19 April 2024 08:06:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'MINUTE', 0);
 
     //assert
     expect(result).toEqual(expectedTimestamp);
   });
 
-  it('should return ceiled timestamp for MINUTE interval timestamp with seconds != 0', () => {
+  it('should return ceiled timestamp for MINUTE interval and start timestamp with seconds != 0', () => {
     //arrange
-    const timestamp = 1713513912000; //Friday, 19 April 2024 08:05:12
+    const startTimestamp = 1713513912000; //Friday, 19 April 2024 08:05:12
     const expectedTimestamp = 1713513960000; //Friday, 19 April 2024 08:06:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'MINUTE', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'MINUTE', 0);
 
     //assert
     expect(result).toEqual(expectedTimestamp);
   });
 
-  it('should return same timestamp for already rounded HOUR interval timestamp ', () => {
+  it('should return same timestamp for already rounded HOUR interval start timestamp ', () => {
     //arrange
-    const timestamp = 1713513600000; //Friday, 19 April 2024 08:00:00
+    const startTimestamp = 1713513600000; //Friday, 19 April 2024 08:00:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'HOUR', 0);
 
     //assert
-    expect(result).toEqual(timestamp);
+    expect(result).toEqual(startTimestamp);
   });
 
-  it('should return ceiled timestamp for HOUR interval timestamp with milliseconds != 0', () => {
+  it('should return ceiled timestamp for HOUR interval and start timestamp with milliseconds != 0', () => {
     //arrange
-    const timestamp = 1713513600100; //Friday, 19 April 2024 08:00:00.100
+    const startTimestamp = 1713513600100; //Friday, 19 April 2024 08:00:00.100
     const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'HOUR', 0);
 
     //assert
     expect(result).toEqual(expectedTimestamp);
   });
 
-  it('should return ceiled timestamp for HOUR interval timestamp with seconds != 0', () => {
+  it('should return ceiled timestamp for HOUR interval and start timestamp with seconds != 0', () => {
     //arrange
-    const timestamp = 1713513612000; //Friday, 19 April 2024 08:00:12
+    const startTimestamp = 1713513612000; //Friday, 19 April 2024 08:00:12
     const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'HOUR', 0);
 
     //assert
     expect(result).toEqual(expectedTimestamp);
   });
 
-  it('should return ceiled timestamp for HOUR interval timestamp with minutes != 0', () => {
+  it('should return ceiled timestamp for HOUR interval and start timestamp with minutes != 0', () => {
     //arrange
-    const timestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
+    const startTimestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
     const expectedTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
 
     //act
-    const result = ceilTimestampAccordingToQueryInterval(timestamp, 'HOUR', 0);
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'HOUR', 0);
 
     //assert
     expect(result).toEqual(expectedTimestamp);
   });
 
-  it('should return correct timestamp DAY interval timestamp ', () => {
+  it('should return correct timestamp with DAY interval and start timestamp before data timestamp', () => {
     //arrange
-    const timestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
+    const startTimestamp = 1713514320000; //Friday, 19 April 2024 08:12:00
     const dataTimestamp = 1713954600000; //Wednesday, 24 April 2024 10:30:00
     const expectedTimestamp = 1713522600000; //Friday, 19 April 2024 10:30:00
 
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'DAY', dataTimestamp);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return ceiled timestamp with DAY interval and start timestamp after data timestamp', () => {
+    //arrange
+    const startTimestamp = 1713522184000; //Friday, 19 April 2024 10:23:04
+    const dataTimestamp = 1713517200000; //Friday, 19 April 2024 09:00:00
+    const expectedTimestamp = 1713603600000; //Saturday, 20 April 2024 09:00:00
+
+    //act
+    const result = ceilTimestampAccordingToQueryInterval(startTimestamp, 'DAY', dataTimestamp);
+
+    //assert
+    expect(result).toEqual(expectedTimestamp);
+  });
+
+  it('should return ceiled timestamp with DAY interval and start timestamp after data timestamp and start timestamp being last day of a month', () => {
+    //arrange
+    const timestamp = 1714474760000; //Tuesday, 30 April 2024 10:59:20
+    const dataTimestamp = 1714467600000; //Tuesday, 30 April 2024 09:00:00
+    const expectedTimestamp = 1714554000000; //Wednesday, 1 May 2024 09:00:00
+
     //act
     const result = ceilTimestampAccordingToQueryInterval(timestamp, 'DAY', dataTimestamp);
 

From 37423e7ab8a8060f3518660714849d2abf252823 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 11:08:21 -0300
Subject: [PATCH 05/18] fix linting

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

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 1baf383..a5abe31 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -33,7 +33,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         setLicenseLoadingState(LoadingState.Error);
         setLicenseErrorMessage(e.status + ' ' + e.statusText);
       });
-  }, []);
+  }, [datasource.apiKey, datasource.baseUrl]);
 
   const onLicenseChange = (item: SelectableValue) => {
     onChange({ ...query, licenseKey: item.value });

From af161161a648da3c846dd5f0dd777519a96dc9fa Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 11:09:31 -0300
Subject: [PATCH 06/18] delete unnecessary export of enum

---
 .../src/components/QueryEditor.tsx                          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index a5abe31..1f8bcf6 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -7,15 +7,15 @@ import { MyDataSourceOptions, MyQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 
-type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
-
-export enum LoadingState {
+enum LoadingState {
   Default = 'DEFAULT',
   Loading = 'LOADING',
   Success = 'SUCCESS',
   Error = 'ERROR',
 }
 
+type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
+
 export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props) {
   const [selectableLicenses, setSelectableLicenses] = useState<SelectableValue[]>([]);
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);

From b82e5c245841646ee202e04eb4f5079942b22b08 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 15:50:04 -0300
Subject: [PATCH 07/18] implement metric selection

---
 .../src/components/QueryEditor.tsx                | 14 ++++++++++++++
 bitmovin-analytics-datasource/src/datasource.ts   |  7 ++++---
 bitmovin-analytics-datasource/src/types.ts        |  2 ++
 .../src/types/aggregations.ts                     | 15 +++++++++++++++
 4 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/types/aggregations.ts

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 1f8bcf6..5f52b62 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -6,6 +6,7 @@ import { DataSource } from '../datasource';
 import { MyDataSourceOptions, MyQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
+import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -40,6 +41,11 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
+  const onMetricChange = (item: SelectableValue) => {
+    onChange({ ...query, aggregation: item.value });
+    onRunQuery();
+  };
+
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
     if (event.currentTarget.checked) {
@@ -89,6 +95,14 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             placeholder={licenseLoadingState === LoadingState.Loading ? 'Loading Licenses' : 'Choose License'}
           />
         </InlineField>
+        <InlineField label="Metric" labelWidth={20}>
+          <Select
+            defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
+            onChange={(item) => onMetricChange(item)}
+            width={40}
+            options={SELECTABLE_AGGREGATIONS}
+          />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index 917d2b4..9be8ea3 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -54,6 +54,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     const to = range!.to.toDate();
 
     const promises = options.targets.map(async (target) => {
+      const urlAppendix = target.aggregation;
       const interval = target.interval
         ? calculateQueryInterval(target.interval!, from.getTime(), to.getTime())
         : undefined;
@@ -82,7 +83,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
         interval: interval,
       };
 
-      const response = await lastValueFrom(this.request(this.getRequestUrl(), 'POST', query));
+      const response = await lastValueFrom(this.request(this.getRequestUrl() + urlAppendix, 'POST', query));
 
       const dataRows: MixedDataRowList = response.data.data.result.rows;
       const columnLabels: Array<{ key: string; label: string }> = response.data.data.result.columnLabels;
@@ -121,10 +122,10 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
 
   getRequestUrl(): string {
     if (this.adAnalytics === true) {
-      return '/analytics/ads/queries';
+      return '/analytics/ads/queries/';
     }
 
-    return '/analytics/queries/count';
+    return '/analytics/queries/';
   }
 
   request(url: string, method: string, payload?: any): Observable<Record<any, any>> {
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index 84ceeee..b2831fc 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -1,10 +1,12 @@
 import { DataSourceJsonData } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
 import { QueryInterval } from './utils/intervalUtils';
+import { Aggregation } from './types/aggregations';
 
 export interface MyQuery extends DataQuery {
   licenseKey: string;
   interval?: QueryInterval | 'AUTO';
+  aggregation: Aggregation;
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {};
diff --git a/bitmovin-analytics-datasource/src/types/aggregations.ts b/bitmovin-analytics-datasource/src/types/aggregations.ts
new file mode 100644
index 0000000..273a437
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/types/aggregations.ts
@@ -0,0 +1,15 @@
+export type Aggregation = 'count' | 'sum' | 'avg' | 'min' | 'max' | 'stddev' | 'percentile' | 'variance' | 'median';
+
+export const SELECTABLE_AGGREGATIONS: Array<{ value: Aggregation; label: string }> = [
+  { value: 'count', label: 'Count' },
+  { value: 'sum', label: 'Sum' },
+  { value: 'avg', label: 'Avg' },
+  { value: 'min', label: 'Min' },
+  { value: 'max', label: 'Max' },
+  { value: 'stddev', label: 'Stddev' },
+  { value: 'percentile', label: 'Percentile' },
+  { value: 'variance', label: 'Variance' },
+  { value: 'median', label: 'Median' },
+];
+
+export const DEFAULT_SELECTABLE_AGGREGATION = SELECTABLE_AGGREGATIONS[0];

From 737bdd015287b2c808e6d1320a4dad40de1ede4e Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 16:36:11 -0300
Subject: [PATCH 08/18] implement dimension selection

---
 .../src/components/QueryEditor.tsx            |  14 +
 .../src/datasource.ts                         |   6 +-
 bitmovin-analytics-datasource/src/types.ts    |   3 +
 .../src/types/queryAdAttributes.ts            | 301 ++++++++++++++++++
 .../src/types/queryAttributes.ts              | 277 ++++++++++++++++
 5 files changed, 599 insertions(+), 2 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
 create mode 100644 bitmovin-analytics-datasource/src/types/queryAttributes.ts

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 5f52b62..87e02c6 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -7,6 +7,8 @@ import { MyDataSourceOptions, MyQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
+import { SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -46,6 +48,11 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
+  const onDimensionChange = (item: SelectableValue) => {
+    onChange({ ...query, dimension: item.value });
+    onRunQuery();
+  };
+
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
     if (event.currentTarget.checked) {
@@ -103,6 +110,13 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             options={SELECTABLE_AGGREGATIONS}
           />
         </InlineField>
+        <InlineField label="Dimension" labelWidth={20}>
+          <Select
+            onChange={onDimensionChange}
+            width={40}
+            options={datasource.adAnalytics ? SELECTABLE_QUERY_AD_ATTRIBUTES : SELECTABLE_QUERY_ATTRIBUTES}
+          />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index 9be8ea3..fbf980c 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -12,12 +12,14 @@ import { catchError, lastValueFrom, map, Observable, of } from 'rxjs';
 import { MixedDataRowList, MyDataSourceOptions, MyQuery, NumberDataRowList } from './types';
 import { transformGroupedTimeSeriesData, transformSimpleTimeSeries, transformTableData } from './utils/dataUtils';
 import { calculateQueryInterval, QueryInterval } from './utils/intervalUtils';
+import { QueryAttribute } from './types/queryAttributes';
+import { QueryAdAttribute } from './types/queryAdAttributes';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
   groupBy: string[];
   orderBy: Array<{ name: string; order: string }>;
-  dimension: string;
+  dimension: QueryAttribute | QueryAdAttribute;
   start: Date;
   end: Date;
   licenseKey: string;
@@ -76,7 +78,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
               },
             ]
           : [],
-        dimension: 'IMPRESSION_ID',
+        dimension: target.dimension,
         start: from,
         end: to,
         licenseKey: target.licenseKey,
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index b2831fc..72b5fcc 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -2,11 +2,14 @@ import { DataSourceJsonData } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
 import { QueryInterval } from './utils/intervalUtils';
 import { Aggregation } from './types/aggregations';
+import { QueryAttribute } from './types/queryAttributes';
+import { QueryAdAttribute } from './types/queryAdAttributes';
 
 export interface MyQuery extends DataQuery {
   licenseKey: string;
   interval?: QueryInterval | 'AUTO';
   aggregation: Aggregation;
+  dimension: QueryAttribute | QueryAdAttribute;
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {};
diff --git a/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts b/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
new file mode 100644
index 0000000..ac7de81
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
@@ -0,0 +1,301 @@
+import { SelectableValue } from '@grafana/data';
+
+export enum QUERY_AD_ATTRIBUTES {
+  ADVERTISER_NAME = 'ADVERTISER_NAME',
+  AD_CLICKTHROUGH_URL = 'AD_CLICKTHROUGH_URL',
+  AD_DESCRIPTION = 'AD_DESCRIPTION',
+  AD_DURATION = 'AD_DURATION',
+  AD_FALLBACK_INDEX = 'AD_FALLBACK_INDEX',
+  AD_ID = 'AD_ID',
+  AD_ID_PLAYER = 'AD_ID_PLAYER',
+  AD_IMPRESSION_ID = 'AD_IMPRESSION_ID',
+  AD_IS_PERSISTENT = 'AD_IS_PERSISTENT',
+  AD_MODULE = 'AD_MODULE',
+  AD_OFFSET = 'AD_OFFSET',
+  AD_PLAYBACK_HEIGHT = 'AD_PLAYBACK_HEIGHT',
+  AD_PLAYBACK_WIDTH = 'AD_PLAYBACK_WIDTH',
+  AD_POSITION = 'AD_POSITION',
+  AD_PRELOAD_OFFSET = 'AD_PRELOAD_OFFSET',
+  AD_REPLACE_CONTENT_DURATION = 'AD_REPLACE_CONTENT_DURATION',
+  AD_SCHEDULE_TIME = 'AD_SCHEDULE_TIME',
+  AD_SKIPPABLE = 'AD_SKIPPABLE',
+  AD_SKIP_AFTER = 'AD_SKIP_AFTER',
+  AD_STARTUP_TIME = 'AD_STARTUP_TIME',
+  AD_SYSTEM = 'AD_SYSTEM',
+  AD_TAG_PATH = 'AD_TAG_PATH',
+  AD_TAG_SERVER = 'AD_TAG_SERVER',
+  AD_TAG_TYPE = 'AD_TAG_TYPE',
+  AD_TAG_URL = 'AD_TAG_URL',
+  AD_TITLE = 'AD_TITLE',
+  AD_WRAPPER_ADS_COUNT = 'AD_WRAPPER_ADS_COUNT',
+  ANALYTICS_VERSION = 'ANALYTICS_VERSION',
+  APIORG_ID = 'APIORG_ID',
+  APIUSER_ID = 'APIUSER_ID',
+  API_FRAMEWORK = 'API_FRAMEWORK',
+  AUDIO_BITRATE = 'AUDIO_BITRATE',
+  AUTOPLAY = 'AUTOPLAY',
+  BROWSER = 'BROWSER',
+  BROWSER_IS_BOT = 'BROWSER_IS_BOT',
+  BROWSER_VERSION_MAJOR = 'BROWSER_VERSION_MAJOR',
+  BROWSER_VERSION_MINOR = 'BROWSER_VERSION_MINOR',
+  CDN_PROVIDER = 'CDN_PROVIDER',
+  CITY = 'CITY',
+  CLICKED = 'CLICKED',
+  CLICK_PERCENTAGE = 'CLICK_PERCENTAGE',
+  CLICK_POSITION = 'CLICK_POSITION',
+  CLICK_RATE = 'CLICK_RATE',
+  CLIENT_TIME = 'CLIENT_TIME',
+  CLOSED = 'CLOSED',
+  CLOSE_PERCENTAGE = 'CLOSE_PERCENTAGE',
+  CLOSE_POSITION = 'CLOSE_POSITION',
+  COMPLETED = 'COMPLETED',
+  COUNTRY = 'COUNTRY',
+  CREATIVE_AD_ID = 'CREATIVE_AD_ID',
+  CREATIVE_ID = 'CREATIVE_ID',
+  CUSTOM_DATA_10 = 'CUSTOM_DATA_10',
+  CUSTOM_DATA_11 = 'CUSTOM_DATA_11',
+  CUSTOM_DATA_12 = 'CUSTOM_DATA_12',
+  CUSTOM_DATA_13 = 'CUSTOM_DATA_13',
+  CUSTOM_DATA_14 = 'CUSTOM_DATA_14',
+  CUSTOM_DATA_15 = 'CUSTOM_DATA_15',
+  CUSTOM_DATA_16 = 'CUSTOM_DATA_16',
+  CUSTOM_DATA_17 = 'CUSTOM_DATA_17',
+  CUSTOM_DATA_18 = 'CUSTOM_DATA_18',
+  CUSTOM_DATA_19 = 'CUSTOM_DATA_19',
+  CUSTOM_DATA_1 = 'CUSTOM_DATA_1',
+  CUSTOM_DATA_20 = 'CUSTOM_DATA_20',
+  CUSTOM_DATA_21 = 'CUSTOM_DATA_21',
+  CUSTOM_DATA_22 = 'CUSTOM_DATA_22',
+  CUSTOM_DATA_23 = 'CUSTOM_DATA_23',
+  CUSTOM_DATA_24 = 'CUSTOM_DATA_24',
+  CUSTOM_DATA_25 = 'CUSTOM_DATA_25',
+  CUSTOM_DATA_26 = 'CUSTOM_DATA_26',
+  CUSTOM_DATA_27 = 'CUSTOM_DATA_27',
+  CUSTOM_DATA_28 = 'CUSTOM_DATA_28',
+  CUSTOM_DATA_29 = 'CUSTOM_DATA_29',
+  CUSTOM_DATA_2 = 'CUSTOM_DATA_2',
+  CUSTOM_DATA_30 = 'CUSTOM_DATA_30',
+  CUSTOM_DATA_3 = 'CUSTOM_DATA_3',
+  CUSTOM_DATA_4 = 'CUSTOM_DATA_4',
+  CUSTOM_DATA_5 = 'CUSTOM_DATA_5',
+  CUSTOM_DATA_6 = 'CUSTOM_DATA_6',
+  CUSTOM_DATA_7 = 'CUSTOM_DATA_7',
+  CUSTOM_DATA_8 = 'CUSTOM_DATA_8',
+  CUSTOM_DATA_9 = 'CUSTOM_DATA_9',
+  CUSTOM_USER_ID = 'CUSTOM_USER_ID',
+  DAY = 'DAY',
+  DAYPART = 'DAYPART',
+  DEAL_ID = 'DEAL_ID',
+  DEVICE_TYPE = 'DEVICE_TYPE',
+  DOMAIN = 'DOMAIN',
+  ERROR_CODE = 'ERROR_CODE',
+  ERROR_MESSAGE = 'ERROR_MESSAGE',
+  EXPERIMENT_NAME = 'EXPERIMENT_NAME',
+  HOUR = 'HOUR',
+  IP_ADDRESS = 'IP_ADDRESS',
+  ISP = 'ISP',
+  IS_LINEAR = 'IS_LINEAR',
+  LANGUAGE = 'LANGUAGE',
+  LICENSE_KEY = 'LICENSE_KEY',
+  MANIFEST_DOWNLOAD_TIME = 'MANIFEST_DOWNLOAD_TIME',
+  MEDIA_PATH = 'MEDIA_PATH',
+  MEDIA_SERVER = 'MEDIA_SERVER',
+  MEDIA_URL = 'MEDIA_URL',
+  MIDPOINT = 'MIDPOINT',
+  MINUTE = 'MINUTE',
+  MIN_SUGGESTED_DURATION = 'MIN_SUGGESTED_DURATION',
+  MONTH = 'MONTH',
+  OPERATINGSYSTEM = 'OPERATINGSYSTEM',
+  OPERATINGSYSTEM_VERSION_MAJOR = 'OPERATINGSYSTEM_VERSION_MAJOR',
+  OPERATINGSYSTEM_VERSION_MINOR = 'OPERATINGSYSTEM_VERSION_MINOR',
+  PAGE_LOAD_TIME = 'PAGE_LOAD_TIME',
+  PAGE_LOAD_TYPE = 'PAGE_LOAD_TYPE',
+  PATH = 'PATH',
+  PERCENTAGE_IN_VIEWPORT = 'PERCENTAGE_IN_VIEWPORT',
+  PLATFORM = 'PLATFORM',
+  PLAYER = 'PLAYER',
+  PLAYER_KEY = 'PLAYER_KEY',
+  PLAYER_STARTUPTIME = 'PLAYER_STARTUPTIME',
+  PLAYER_TECH = 'PLAYER_TECH',
+  PLAYER_VERSION = 'PLAYER_VERSION',
+  PLAY_PERCENTAGE = 'PLAY_PERCENTAGE',
+  QUARTILE_1 = 'QUARTILE_1',
+  QUARTILE_3 = 'QUARTILE_3',
+  REGION = 'REGION',
+  SCREEN_HEIGHT = 'SCREEN_HEIGHT',
+  SCREEN_WIDTH = 'SCREEN_WIDTH',
+  SIZE = 'SIZE',
+  SKIPPED = 'SKIPPED',
+  SKIP_PERCENTAGE = 'SKIP_PERCENTAGE',
+  SKIP_POSITION = 'SKIP_POSITION',
+  STARTED = 'STARTED',
+  STREAM_FORMAT = 'STREAM_FORMAT',
+  SURVEY_URL = 'SURVEY_URL',
+  TIME = 'TIME',
+  TIME_HOVERED = 'TIME_HOVERED',
+  TIME_IN_VIEWPORT = 'TIME_IN_VIEWPORT',
+  TIME_PLAYED = 'TIME_PLAYED',
+  TIME_TO_FIRST_AD = 'TIME_TO_FIRST_AD',
+  TIME_UNTIL_HOVER = 'TIME_UNTIL_HOVER',
+  UNIVERSAL_AD_ID_REGISTRY = 'UNIVERSAL_AD_ID_REGISTRY',
+  UNIVERSAL_AD_ID_VALUE = 'UNIVERSAL_AD_ID_VALUE',
+  USER_ID = 'USER_ID',
+  VIDEO_BITRATE = 'VIDEO_BITRATE',
+  VIDEO_ID = 'VIDEO_ID',
+  VIDEO_IMPRESSION_ID = 'VIDEO_IMPRESSION_ID',
+  VIDEO_TITLE = 'VIDEO_TITLE',
+  VIDEO_WINDOW_HEIGHT = 'VIDEO_WINDOW_HEIGHT',
+  VIDEO_WINDOW_WIDTH = 'VIDEO_WINDOW_WIDTH',
+  YEAR = 'YEAR',
+}
+
+export type QueryAdAttribute = keyof typeof QUERY_AD_ATTRIBUTES;
+
+export const SELECTABLE_QUERY_AD_ATTRIBUTES: SelectableValue<QueryAdAttribute>[] = [
+  { value: QUERY_AD_ATTRIBUTES.ADVERTISER_NAME, label: 'Advertiser Name' },
+  { value: QUERY_AD_ATTRIBUTES.AD_CLICKTHROUGH_URL, label: 'Ad Clickthrough Url' },
+  { value: QUERY_AD_ATTRIBUTES.AD_DESCRIPTION, label: 'Ad Description' },
+  { value: QUERY_AD_ATTRIBUTES.AD_DURATION, label: 'Ad Duration' },
+  { value: QUERY_AD_ATTRIBUTES.AD_FALLBACK_INDEX, label: 'Ad Fallback Position' },
+  { value: QUERY_AD_ATTRIBUTES.AD_ID, label: 'Ad Id' },
+  { value: QUERY_AD_ATTRIBUTES.AD_ID_PLAYER, label: 'Ad Id Player' },
+  { value: QUERY_AD_ATTRIBUTES.AD_IMPRESSION_ID, label: 'Ad Impression Id' },
+  { value: QUERY_AD_ATTRIBUTES.AD_IS_PERSISTENT, label: 'Ad Is Persistent' },
+  { value: QUERY_AD_ATTRIBUTES.AD_MODULE, label: 'Ad Module' },
+  { value: QUERY_AD_ATTRIBUTES.AD_OFFSET, label: 'Ad Offset' },
+  { value: QUERY_AD_ATTRIBUTES.AD_PLAYBACK_HEIGHT, label: 'Ad Playback Height' },
+  { value: QUERY_AD_ATTRIBUTES.AD_PLAYBACK_WIDTH, label: 'Ad Playback Width' },
+  { value: QUERY_AD_ATTRIBUTES.AD_POSITION, label: 'Ad Position' },
+  { value: QUERY_AD_ATTRIBUTES.AD_PRELOAD_OFFSET, label: 'Ad Preload Offset' },
+  { value: QUERY_AD_ATTRIBUTES.AD_REPLACE_CONTENT_DURATION, label: 'Ad Replace Content Duration' },
+  { value: QUERY_AD_ATTRIBUTES.AD_SCHEDULE_TIME, label: 'Ad Schedule Time' },
+  { value: QUERY_AD_ATTRIBUTES.AD_SKIPPABLE, label: 'Ad Skippable' },
+  { value: QUERY_AD_ATTRIBUTES.AD_SKIP_AFTER, label: 'Ad Skip After' },
+  { value: QUERY_AD_ATTRIBUTES.AD_STARTUP_TIME, label: 'Ad Startup Time' },
+  { value: QUERY_AD_ATTRIBUTES.AD_SYSTEM, label: 'Ad System' },
+  { value: QUERY_AD_ATTRIBUTES.AD_TAG_PATH, label: 'Ad Tag Path' },
+  { value: QUERY_AD_ATTRIBUTES.AD_TAG_SERVER, label: 'Tag Server' },
+  { value: QUERY_AD_ATTRIBUTES.AD_TAG_TYPE, label: 'Tag Type' },
+  { value: QUERY_AD_ATTRIBUTES.AD_TAG_URL, label: 'Ad Tag Url' },
+  { value: QUERY_AD_ATTRIBUTES.AD_TITLE, label: 'Ad Title' },
+  { value: QUERY_AD_ATTRIBUTES.AD_WRAPPER_ADS_COUNT, label: 'Wrapper Position' },
+  { value: QUERY_AD_ATTRIBUTES.ANALYTICS_VERSION, label: 'Analytics Version' },
+  { value: QUERY_AD_ATTRIBUTES.APIORG_ID, label: 'Api Organization Id' },
+  { value: QUERY_AD_ATTRIBUTES.APIUSER_ID, label: 'Api User Id' },
+  { value: QUERY_AD_ATTRIBUTES.API_FRAMEWORK, label: 'Api Framework' },
+  { value: QUERY_AD_ATTRIBUTES.AUDIO_BITRATE, label: 'Audio Bitrate' },
+  { value: QUERY_AD_ATTRIBUTES.AUTOPLAY, label: 'Autoplay' },
+  { value: QUERY_AD_ATTRIBUTES.BROWSER, label: 'Browser' },
+  { value: QUERY_AD_ATTRIBUTES.BROWSER_IS_BOT, label: 'Is Bot' },
+  { value: QUERY_AD_ATTRIBUTES.BROWSER_VERSION_MAJOR, label: 'Browser Version Major' },
+  { value: QUERY_AD_ATTRIBUTES.BROWSER_VERSION_MINOR, label: 'Browser Version Minor' },
+  { value: QUERY_AD_ATTRIBUTES.CDN_PROVIDER, label: 'Cdn Provider' },
+  { value: QUERY_AD_ATTRIBUTES.CITY, label: 'City' },
+  { value: QUERY_AD_ATTRIBUTES.CLICKED, label: 'Clicked' },
+  { value: QUERY_AD_ATTRIBUTES.CLICK_PERCENTAGE, label: 'Click Percentage' },
+  { value: QUERY_AD_ATTRIBUTES.CLICK_POSITION, label: 'Click Position' },
+  { value: QUERY_AD_ATTRIBUTES.CLICK_RATE, label: 'Click Rate' },
+  { value: QUERY_AD_ATTRIBUTES.CLIENT_TIME, label: 'Client Time' },
+  { value: QUERY_AD_ATTRIBUTES.CLOSED, label: 'Closed' },
+  { value: QUERY_AD_ATTRIBUTES.CLOSE_PERCENTAGE, label: 'Close Percentage' },
+  { value: QUERY_AD_ATTRIBUTES.CLOSE_POSITION, label: 'Close Position' },
+  { value: QUERY_AD_ATTRIBUTES.COMPLETED, label: 'Completed' },
+  { value: QUERY_AD_ATTRIBUTES.COUNTRY, label: 'Country' },
+  { value: QUERY_AD_ATTRIBUTES.CREATIVE_AD_ID, label: 'Creative Ad Id' },
+  { value: QUERY_AD_ATTRIBUTES.CREATIVE_ID, label: 'Creative Id' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_10, label: 'Custom Data 10' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_11, label: 'Custom Data 11' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_12, label: 'Custom Data 12' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_13, label: 'Custom Data 13' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_14, label: 'Custom Data 14' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_15, label: 'Custom Data 15' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_16, label: 'Custom Data 16' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_17, label: 'Custom Data 17' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_18, label: 'Custom Data 18' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_19, label: 'Custom Data 19' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_1, label: 'Custom Data 1' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_20, label: 'Custom Data 20' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_21, label: 'Custom Data 21' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_22, label: 'Custom Data 22' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_23, label: 'Custom Data 23' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_24, label: 'Custom Data 24' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_25, label: 'Custom Data 25' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_26, label: 'Custom Data 26' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_27, label: 'Custom Data 27' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_28, label: 'Custom Data 28' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_29, label: 'Custom Data 29' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_2, label: 'Custom Data 2' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_30, label: 'Custom Data 30' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_3, label: 'Custom Data 3' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_4, label: 'Custom Data 4' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_5, label: 'Custom Data 5' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_6, label: 'Custom Data 6' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_7, label: 'Custom Data 7' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_8, label: 'Custom Data 8' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_DATA_9, label: 'Custom Data 9' },
+  { value: QUERY_AD_ATTRIBUTES.CUSTOM_USER_ID, label: 'Custom User Id' },
+  { value: QUERY_AD_ATTRIBUTES.DAY, label: 'Day' },
+  { value: QUERY_AD_ATTRIBUTES.DAYPART, label: 'Daypart' },
+  { value: QUERY_AD_ATTRIBUTES.DEAL_ID, label: 'Deal Id' },
+  { value: QUERY_AD_ATTRIBUTES.DEVICE_TYPE, label: 'Device Type' },
+  { value: QUERY_AD_ATTRIBUTES.DOMAIN, label: 'Domain' },
+  { value: QUERY_AD_ATTRIBUTES.ERROR_CODE, label: 'Error Code' },
+  { value: QUERY_AD_ATTRIBUTES.ERROR_MESSAGE, label: 'Error Message' },
+  { value: QUERY_AD_ATTRIBUTES.EXPERIMENT_NAME, label: 'Experiment Name' },
+  { value: QUERY_AD_ATTRIBUTES.HOUR, label: 'Hour' },
+  { value: QUERY_AD_ATTRIBUTES.IP_ADDRESS, label: 'Ip Address' },
+  { value: QUERY_AD_ATTRIBUTES.ISP, label: 'Internet Service Provider' },
+  { value: QUERY_AD_ATTRIBUTES.IS_LINEAR, label: 'Is Linear' },
+  { value: QUERY_AD_ATTRIBUTES.LANGUAGE, label: 'Language' },
+  { value: QUERY_AD_ATTRIBUTES.LICENSE_KEY, label: 'License Key' },
+  { value: QUERY_AD_ATTRIBUTES.MANIFEST_DOWNLOAD_TIME, label: 'Manifest Download Time' },
+  { value: QUERY_AD_ATTRIBUTES.MEDIA_PATH, label: 'Media Path' },
+  { value: QUERY_AD_ATTRIBUTES.MEDIA_SERVER, label: 'Creative Server' },
+  { value: QUERY_AD_ATTRIBUTES.MEDIA_URL, label: 'Media Url' },
+  { value: QUERY_AD_ATTRIBUTES.MIDPOINT, label: 'Midpoint' },
+  { value: QUERY_AD_ATTRIBUTES.MINUTE, label: 'Minute' },
+  { value: QUERY_AD_ATTRIBUTES.MIN_SUGGESTED_DURATION, label: 'Min Suggested Duration' },
+  { value: QUERY_AD_ATTRIBUTES.MONTH, label: 'Month' },
+  { value: QUERY_AD_ATTRIBUTES.OPERATINGSYSTEM, label: 'Operating System' },
+  { value: QUERY_AD_ATTRIBUTES.OPERATINGSYSTEM_VERSION_MAJOR, label: 'Operating System Version Major' },
+  { value: QUERY_AD_ATTRIBUTES.OPERATINGSYSTEM_VERSION_MINOR, label: 'Operating System Version Minor' },
+  { value: QUERY_AD_ATTRIBUTES.PAGE_LOAD_TIME, label: 'Page Load Time' },
+  { value: QUERY_AD_ATTRIBUTES.PAGE_LOAD_TYPE, label: 'Page Load Type' },
+  { value: QUERY_AD_ATTRIBUTES.PATH, label: 'Path' },
+  { value: QUERY_AD_ATTRIBUTES.PERCENTAGE_IN_VIEWPORT, label: 'Percentage In Viewport' },
+  { value: QUERY_AD_ATTRIBUTES.PLATFORM, label: 'Platform' },
+  { value: QUERY_AD_ATTRIBUTES.PLAYER, label: 'Player Software' },
+  { value: QUERY_AD_ATTRIBUTES.PLAYER_KEY, label: 'Player Key' },
+  { value: QUERY_AD_ATTRIBUTES.PLAYER_STARTUPTIME, label: 'Player Startuptime' },
+  { value: QUERY_AD_ATTRIBUTES.PLAYER_TECH, label: 'Player Technology' },
+  { value: QUERY_AD_ATTRIBUTES.PLAYER_VERSION, label: 'Player Software Version' },
+  { value: QUERY_AD_ATTRIBUTES.PLAY_PERCENTAGE, label: 'Play Percentage' },
+  { value: QUERY_AD_ATTRIBUTES.QUARTILE_1, label: 'Quartile 1' },
+  { value: QUERY_AD_ATTRIBUTES.QUARTILE_3, label: 'Quartile 3' },
+  { value: QUERY_AD_ATTRIBUTES.REGION, label: 'Region' },
+  { value: QUERY_AD_ATTRIBUTES.SCREEN_HEIGHT, label: 'Screen Height' },
+  { value: QUERY_AD_ATTRIBUTES.SCREEN_WIDTH, label: 'Screen Width' },
+  { value: QUERY_AD_ATTRIBUTES.SIZE, label: 'Size' },
+  { value: QUERY_AD_ATTRIBUTES.SKIPPED, label: 'Skipped' },
+  { value: QUERY_AD_ATTRIBUTES.SKIP_PERCENTAGE, label: 'Skip Percentage' },
+  { value: QUERY_AD_ATTRIBUTES.SKIP_POSITION, label: 'Skip Position' },
+  { value: QUERY_AD_ATTRIBUTES.STARTED, label: 'Started' },
+  { value: QUERY_AD_ATTRIBUTES.STREAM_FORMAT, label: 'Stream Format' },
+  { value: QUERY_AD_ATTRIBUTES.SURVEY_URL, label: 'Survey Url' },
+  { value: QUERY_AD_ATTRIBUTES.TIME, label: 'Time' },
+  { value: QUERY_AD_ATTRIBUTES.TIME_HOVERED, label: 'Time Hovered' },
+  { value: QUERY_AD_ATTRIBUTES.TIME_IN_VIEWPORT, label: 'Time In Viewport' },
+  { value: QUERY_AD_ATTRIBUTES.TIME_PLAYED, label: 'Time Played' },
+  { value: QUERY_AD_ATTRIBUTES.TIME_TO_FIRST_AD, label: 'Time To First Ad' },
+  { value: QUERY_AD_ATTRIBUTES.TIME_UNTIL_HOVER, label: 'Time Until Hover' },
+  { value: QUERY_AD_ATTRIBUTES.UNIVERSAL_AD_ID_REGISTRY, label: 'Universal Ad Id Registry' },
+  { value: QUERY_AD_ATTRIBUTES.UNIVERSAL_AD_ID_VALUE, label: 'Universal Ad Id Value' },
+  { value: QUERY_AD_ATTRIBUTES.USER_ID, label: 'User Id' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_BITRATE, label: 'Video Bitrate' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_ID, label: 'Video Id' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_IMPRESSION_ID, label: 'Video Impression Id' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_TITLE, label: 'Video Title' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_WINDOW_HEIGHT, label: 'Video Window Height' },
+  { value: QUERY_AD_ATTRIBUTES.VIDEO_WINDOW_WIDTH, label: 'Video Window Width' },
+  { value: QUERY_AD_ATTRIBUTES.YEAR, label: 'Year' },
+];
diff --git a/bitmovin-analytics-datasource/src/types/queryAttributes.ts b/bitmovin-analytics-datasource/src/types/queryAttributes.ts
new file mode 100644
index 0000000..18cb92c
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/types/queryAttributes.ts
@@ -0,0 +1,277 @@
+import { SelectableValue } from '@grafana/data';
+
+export enum QUERY_ATTRIBUTES {
+  AD = 'AD',
+  ANALYTICS_VERSION = 'ANALYTICS_VERSION',
+  AUDIO_BITRATE = 'AUDIO_BITRATE',
+  AUDIO_CODEC = 'AUDIO_CODEC',
+  AUDIO_LANGUAGE = 'AUDIO_LANGUAGE',
+  AUTOPLAY = 'AUTOPLAY',
+  BROWSER = 'BROWSER',
+  BROWSER_IS_BOT = 'BROWSER_IS_BOT',
+  BROWSER_VERSION_MAJOR = 'BROWSER_VERSION_MAJOR',
+  BROWSER_VERSION_MINOR = 'BROWSER_VERSION_MINOR',
+  BUFFERED = 'BUFFERED',
+  CAST_TECH = 'CAST_TECH',
+  CDN_PROVIDER = 'CDN_PROVIDER',
+  CITY = 'CITY',
+  CLIENT_TIME = 'CLIENT_TIME',
+  CONTEXT = 'CONTEXT',
+  COUNTRY = 'COUNTRY',
+  CUSTOM_DATA_10 = 'CUSTOM_DATA_10',
+  CUSTOM_DATA_11 = 'CUSTOM_DATA_11',
+  CUSTOM_DATA_12 = 'CUSTOM_DATA_12',
+  CUSTOM_DATA_13 = 'CUSTOM_DATA_13',
+  CUSTOM_DATA_14 = 'CUSTOM_DATA_14',
+  CUSTOM_DATA_15 = 'CUSTOM_DATA_15',
+  CUSTOM_DATA_16 = 'CUSTOM_DATA_16',
+  CUSTOM_DATA_17 = 'CUSTOM_DATA_17',
+  CUSTOM_DATA_18 = 'CUSTOM_DATA_18',
+  CUSTOM_DATA_19 = 'CUSTOM_DATA_19',
+  CUSTOM_DATA_1 = 'CUSTOM_DATA_1',
+  CUSTOM_DATA_20 = 'CUSTOM_DATA_20',
+  CUSTOM_DATA_21 = 'CUSTOM_DATA_21',
+  CUSTOM_DATA_22 = 'CUSTOM_DATA_22',
+  CUSTOM_DATA_23 = 'CUSTOM_DATA_23',
+  CUSTOM_DATA_24 = 'CUSTOM_DATA_24',
+  CUSTOM_DATA_25 = 'CUSTOM_DATA_25',
+  CUSTOM_DATA_26 = 'CUSTOM_DATA_26',
+  CUSTOM_DATA_27 = 'CUSTOM_DATA_27',
+  CUSTOM_DATA_28 = 'CUSTOM_DATA_28',
+  CUSTOM_DATA_29 = 'CUSTOM_DATA_29',
+  CUSTOM_DATA_2 = 'CUSTOM_DATA_2',
+  CUSTOM_DATA_30 = 'CUSTOM_DATA_30',
+  CUSTOM_DATA_3 = 'CUSTOM_DATA_3',
+  CUSTOM_DATA_4 = 'CUSTOM_DATA_4',
+  CUSTOM_DATA_5 = 'CUSTOM_DATA_5',
+  CUSTOM_DATA_6 = 'CUSTOM_DATA_6',
+  CUSTOM_DATA_7 = 'CUSTOM_DATA_7',
+  CUSTOM_DATA_8 = 'CUSTOM_DATA_8',
+  CUSTOM_DATA_9 = 'CUSTOM_DATA_9',
+  CUSTOM_USER_ID = 'CUSTOM_USER_ID',
+  DAY = 'DAY',
+  DAYPART = 'DAYPART',
+  DEVICE_CLASS = 'DEVICE_CLASS',
+  DEVICE_TYPE = 'DEVICE_TYPE',
+  DOMAIN = 'DOMAIN',
+  DOWNLOAD_SPEED = 'DOWNLOAD_SPEED',
+  DRM_LOAD_TIME = 'DRM_LOAD_TIME',
+  DRM_TYPE = 'DRM_TYPE',
+  DROPPED_FRAMES = 'DROPPED_FRAMES',
+  DURATION = 'DURATION',
+  ERROR_CODE = 'ERROR_CODE',
+  ERROR_MESSAGE = 'ERROR_MESSAGE',
+  ERROR_PERCENTAGE = 'ERROR_PERCENTAGE',
+  EXPERIMENT_NAME = 'EXPERIMENT_NAME',
+  FUNCTION = 'FUNCTION',
+  HOUR = 'HOUR',
+  ID = 'ID',
+  IMPRESSION_ID = 'IMPRESSION_ID',
+  INITIAL_TIME_TO_TARGET_LATENCY = 'INITIAL_TIME_TO_TARGET_LATENCY',
+  IP_ADDRESS = 'IP_ADDRESS',
+  ISP = 'ISP',
+  IS_CASTING = 'IS_CASTING',
+  IS_LIVE = 'IS_LIVE',
+  IS_LOW_LATENCY = 'IS_LOW_LATENCY',
+  IS_MUTED = 'IS_MUTED',
+  LANGUAGE = 'LANGUAGE',
+  LATENCY = 'LATENCY',
+  LICENSE_KEY = 'LICENSE_KEY',
+  M3U8_URL = 'M3U8_URL',
+  MINUTE = 'MINUTE',
+  MONTH = 'MONTH',
+  MPD_URL = 'MPD_URL',
+  OPERATINGSYSTEM = 'OPERATINGSYSTEM',
+  OPERATINGSYSTEM_VERSION_MAJOR = 'OPERATINGSYSTEM_VERSION_MAJOR',
+  OPERATINGSYSTEM_VERSION_MINOR = 'OPERATINGSYSTEM_VERSION_MINOR',
+  ORGANIZATION = 'ORGANIZATION',
+  PAGE_LOAD_TIME = 'PAGE_LOAD_TIME',
+  PAGE_LOAD_TYPE = 'PAGE_LOAD_TYPE',
+  PATH = 'PATH',
+  PAUSED = 'PAUSED',
+  PLATFORM = 'PLATFORM',
+  PLAYED = 'PLAYED',
+  PLAYER = 'PLAYER',
+  PLAYER_STARTUPTIME = 'PLAYER_STARTUPTIME',
+  PLAYER_TECH = 'PLAYER_TECH',
+  PLAYER_VERSION = 'PLAYER_VERSION',
+  PLAY_ATTEMPTS = 'PLAY_ATTEMPTS',
+  PROG_URL = 'PROG_URL',
+  REBUFFER_PERCENTAGE = 'REBUFFER_PERCENTAGE',
+  REGION = 'REGION',
+  SCALE_FACTOR = 'SCALE_FACTOR',
+  SCREEN_HEIGHT = 'SCREEN_HEIGHT',
+  SCREEN_ORIENTATION = 'SCREEN_ORIENTATION',
+  SCREEN_WIDTH = 'SCREEN_WIDTH',
+  SEEKED = 'SEEKED',
+  SIZE = 'SIZE',
+  STARTUPTIME = 'STARTUPTIME',
+  STATE = 'STATE',
+  STREAM_FORMAT = 'STREAM_FORMAT',
+  SUBTITLE_ENABLED = 'SUBTITLE_ENABLED',
+  SUBTITLE_LANGUAGE = 'SUBTITLE_LANGUAGE',
+  SUPPORTED_VIDEO_CODECS = 'SUPPORTED_VIDEO_CODECS',
+  TARGET_LATENCY = 'TARGET_LATENCY',
+  TARGET_LATENCY_DELTA = 'TARGET_LATENCY_DELTA',
+  TIME = 'TIME',
+  TIME_TO_TARGET_LATENCY = 'TIME_TO_TARGET_LATENCY',
+  USER_ID = 'USER_ID',
+  VIDEOSTART_FAILED = 'VIDEOSTART_FAILED',
+  VIDEOSTART_FAILED_REASON = 'VIDEOSTART_FAILED_REASON',
+  VIDEOTIME_END = 'VIDEOTIME_END',
+  VIDEOTIME_START = 'VIDEOTIME_START',
+  VIDEO_BITRATE = 'VIDEO_BITRATE',
+  VIDEO_CODEC = 'VIDEO_CODEC',
+  VIDEO_CODEC_TYPE = 'VIDEO_CODEC_TYPE',
+  VIDEO_DURATION = 'VIDEO_DURATION',
+  VIDEO_ID = 'VIDEO_ID',
+  VIDEO_PLAYBACK_HEIGHT = 'VIDEO_PLAYBACK_HEIGHT',
+  VIDEO_PLAYBACK_WIDTH = 'VIDEO_PLAYBACK_WIDTH',
+  VIDEO_SEGMENTS_DOWNLOADED = 'VIDEO_SEGMENTS_DOWNLOADED',
+  VIDEO_SEGMENTS_DOWNLOAD_SIZE = 'VIDEO_SEGMENTS_DOWNLOAD_SIZE',
+  VIDEO_STARTUPTIME = 'VIDEO_STARTUPTIME',
+  VIDEO_TITLE = 'VIDEO_TITLE',
+  VIDEO_WINDOW_HEIGHT = 'VIDEO_WINDOW_HEIGHT',
+  VIDEO_WINDOW_WIDTH = 'VIDEO_WINDOW_WIDTH',
+  VIEWTIME = 'VIEWTIME',
+  YEAR = 'YEAR',
+}
+
+export type QueryAttribute = keyof typeof QUERY_ATTRIBUTES;
+
+export const SELECTABLE_QUERY_ATTRIBUTES: SelectableValue<QueryAttribute>[] = [
+  { value: QUERY_ATTRIBUTES.AD, label: 'Ad' },
+  { value: QUERY_ATTRIBUTES.ANALYTICS_VERSION, label: 'Analytics Software Version' },
+  { value: QUERY_ATTRIBUTES.AUDIO_BITRATE, label: 'Audio Bitrate' },
+  { value: QUERY_ATTRIBUTES.AUDIO_CODEC, label: 'Audio Codec' },
+  { value: QUERY_ATTRIBUTES.AUDIO_LANGUAGE, label: 'Audio Language' },
+  { value: QUERY_ATTRIBUTES.AUTOPLAY, label: 'Autoplay' },
+  { value: QUERY_ATTRIBUTES.BROWSER, label: 'Browser' },
+  { value: QUERY_ATTRIBUTES.BROWSER_IS_BOT, label: 'Is Bot' },
+  { value: QUERY_ATTRIBUTES.BROWSER_VERSION_MAJOR, label: 'Browser Version Major' },
+  { value: QUERY_ATTRIBUTES.BROWSER_VERSION_MINOR, label: 'Browser Version Minor' },
+  { value: QUERY_ATTRIBUTES.BUFFERED, label: 'Buffered' },
+  { value: QUERY_ATTRIBUTES.CAST_TECH, label: 'Casting Tech' },
+  { value: QUERY_ATTRIBUTES.CDN_PROVIDER, label: 'Cdn Provider' },
+  { value: QUERY_ATTRIBUTES.CITY, label: 'City' },
+  { value: QUERY_ATTRIBUTES.CLIENT_TIME, label: 'Client Time' },
+  { value: QUERY_ATTRIBUTES.CONTEXT, label: 'Context' },
+  { value: QUERY_ATTRIBUTES.COUNTRY, label: 'Country' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_10, label: 'Custom Data 10' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_11, label: 'Custom Data 11' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_12, label: 'Custom Data 12' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_13, label: 'Custom Data 13' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_14, label: 'Custom Data 14' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_15, label: 'Custom Data 15' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_16, label: 'Custom Data 16' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_17, label: 'Custom Data 17' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_18, label: 'Custom Data 18' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_19, label: 'Custom Data 19' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_1, label: 'Custom Data 1' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_20, label: 'Custom Data 20' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_21, label: 'Custom Data 21' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_22, label: 'Custom Data 22' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_23, label: 'Custom Data 23' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_24, label: 'Custom Data 24' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_25, label: 'Custom Data 25' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_26, label: 'Custom Data 26' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_27, label: 'Custom Data 27' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_28, label: 'Custom Data 28' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_29, label: 'Custom Data 29' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_2, label: 'Custom Data 2' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_30, label: 'Custom Data 30' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_3, label: 'Custom Data 3' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_4, label: 'Custom Data 4' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_5, label: 'Custom Data 5' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_6, label: 'Custom Data 6' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_7, label: 'Custom Data 7' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_8, label: 'Custom Data 8' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_DATA_9, label: 'Custom Data 9' },
+  { value: QUERY_ATTRIBUTES.CUSTOM_USER_ID, label: 'Custom User Id' },
+  { value: QUERY_ATTRIBUTES.DAY, label: 'Day' },
+  { value: QUERY_ATTRIBUTES.DAYPART, label: 'Daypart' },
+  { value: QUERY_ATTRIBUTES.DEVICE_CLASS, label: 'Device Class' },
+  { value: QUERY_ATTRIBUTES.DEVICE_TYPE, label: 'Device Type' },
+  { value: QUERY_ATTRIBUTES.DOMAIN, label: 'Domain' },
+  { value: QUERY_ATTRIBUTES.DOWNLOAD_SPEED, label: 'Download Speed' },
+  { value: QUERY_ATTRIBUTES.DRM_LOAD_TIME, label: 'Drm Load Time' },
+  { value: QUERY_ATTRIBUTES.DRM_TYPE, label: 'Drm Type' },
+  { value: QUERY_ATTRIBUTES.DROPPED_FRAMES, label: 'Dropped Frames' },
+  { value: QUERY_ATTRIBUTES.DURATION, label: 'Duration' },
+  { value: QUERY_ATTRIBUTES.ERROR_CODE, label: 'Error Code' },
+  { value: QUERY_ATTRIBUTES.ERROR_MESSAGE, label: 'Error Message' },
+  { value: QUERY_ATTRIBUTES.ERROR_PERCENTAGE, label: 'Error Percentage' },
+  { value: QUERY_ATTRIBUTES.EXPERIMENT_NAME, label: 'Experiment Name' },
+  { value: QUERY_ATTRIBUTES.FUNCTION, label: 'Function' },
+  { value: QUERY_ATTRIBUTES.HOUR, label: 'Hour' },
+  { value: QUERY_ATTRIBUTES.ID, label: 'Id' },
+  { value: QUERY_ATTRIBUTES.IMPRESSION_ID, label: 'Impression Id' },
+  { value: QUERY_ATTRIBUTES.INITIAL_TIME_TO_TARGET_LATENCY, label: 'Initial Time to Target Latency' },
+  { value: QUERY_ATTRIBUTES.IP_ADDRESS, label: 'Ip Address' },
+  { value: QUERY_ATTRIBUTES.ISP, label: 'Internet Service Provider' },
+  { value: QUERY_ATTRIBUTES.IS_CASTING, label: 'Casting' },
+  { value: QUERY_ATTRIBUTES.IS_LIVE, label: 'Live' },
+  { value: QUERY_ATTRIBUTES.IS_LOW_LATENCY, label: 'Is Low Latency' },
+  { value: QUERY_ATTRIBUTES.IS_MUTED, label: 'Muted' },
+  { value: QUERY_ATTRIBUTES.LANGUAGE, label: 'Language' },
+  { value: QUERY_ATTRIBUTES.LATENCY, label: 'Latency' },
+  { value: QUERY_ATTRIBUTES.LICENSE_KEY, label: 'License Key' },
+  { value: QUERY_ATTRIBUTES.M3U8_URL, label: 'M3U8 Url' },
+  { value: QUERY_ATTRIBUTES.MINUTE, label: 'Minute' },
+  { value: QUERY_ATTRIBUTES.MONTH, label: 'Month' },
+  { value: QUERY_ATTRIBUTES.MPD_URL, label: 'MPD Url' },
+  { value: QUERY_ATTRIBUTES.OPERATINGSYSTEM, label: 'Operating System' },
+  { value: QUERY_ATTRIBUTES.OPERATINGSYSTEM_VERSION_MAJOR, label: 'Operating System Version Major' },
+  { value: QUERY_ATTRIBUTES.OPERATINGSYSTEM_VERSION_MINOR, label: 'Operating System Version Minor' },
+  { value: QUERY_ATTRIBUTES.ORGANIZATION, label: 'Organization' },
+  { value: QUERY_ATTRIBUTES.PAGE_LOAD_TIME, label: 'Page Load Time' },
+  { value: QUERY_ATTRIBUTES.PAGE_LOAD_TYPE, label: 'Page Load Type' },
+  { value: QUERY_ATTRIBUTES.PATH, label: 'Path' },
+  { value: QUERY_ATTRIBUTES.PAUSED, label: 'Paused' },
+  { value: QUERY_ATTRIBUTES.PLATFORM, label: 'Platform' },
+  { value: QUERY_ATTRIBUTES.PLAYED, label: 'Played' },
+  { value: QUERY_ATTRIBUTES.PLAYER, label: 'Player Software' },
+  { value: QUERY_ATTRIBUTES.PLAYER_STARTUPTIME, label: 'Player Startuptime' },
+  { value: QUERY_ATTRIBUTES.PLAYER_TECH, label: 'Player Technology' },
+  { value: QUERY_ATTRIBUTES.PLAYER_VERSION, label: 'Player Software Version' },
+  { value: QUERY_ATTRIBUTES.PLAY_ATTEMPTS, label: 'play Attempts' },
+  { value: QUERY_ATTRIBUTES.PROG_URL, label: 'Prog Url' },
+  { value: QUERY_ATTRIBUTES.REBUFFER_PERCENTAGE, label: 'Rebuffer Percentage' },
+  { value: QUERY_ATTRIBUTES.REGION, label: 'Region' },
+  { value: QUERY_ATTRIBUTES.SCALE_FACTOR, label: 'Scale Factor' },
+  { value: QUERY_ATTRIBUTES.SCREEN_HEIGHT, label: 'Screen Height' },
+  { value: QUERY_ATTRIBUTES.SCREEN_ORIENTATION, label: 'Screen Orientation' },
+  { value: QUERY_ATTRIBUTES.SCREEN_WIDTH, label: 'Screen Width' },
+  { value: QUERY_ATTRIBUTES.SEEKED, label: 'Seeked' },
+  { value: QUERY_ATTRIBUTES.SIZE, label: 'Size' },
+  { value: QUERY_ATTRIBUTES.STARTUPTIME, label: 'Startuptime' },
+  { value: QUERY_ATTRIBUTES.STATE, label: 'State' },
+  { value: QUERY_ATTRIBUTES.STREAM_FORMAT, label: 'Stream Format' },
+  { value: QUERY_ATTRIBUTES.SUBTITLE_ENABLED, label: 'Subtitle Enabled' },
+  { value: QUERY_ATTRIBUTES.SUBTITLE_LANGUAGE, label: 'Subtitle Language' },
+  { value: QUERY_ATTRIBUTES.SUPPORTED_VIDEO_CODECS, label: 'Supported Video Codecs' },
+  { value: QUERY_ATTRIBUTES.TARGET_LATENCY, label: 'Target Latency' },
+  { value: QUERY_ATTRIBUTES.TARGET_LATENCY_DELTA, label: 'Target Latency Delta' },
+  { value: QUERY_ATTRIBUTES.TIME, label: 'Time' },
+  { value: QUERY_ATTRIBUTES.TIME_TO_TARGET_LATENCY, label: 'Time to Target Latency' },
+  { value: QUERY_ATTRIBUTES.USER_ID, label: 'User Id' },
+  { value: QUERY_ATTRIBUTES.VIDEOSTART_FAILED, label: 'Video Start Failed' },
+  { value: QUERY_ATTRIBUTES.VIDEOSTART_FAILED_REASON, label: 'Video Start Failed Reason' },
+  { value: QUERY_ATTRIBUTES.VIDEOTIME_END, label: 'Videotime End' },
+  { value: QUERY_ATTRIBUTES.VIDEOTIME_START, label: 'Videotime Start' },
+  { value: QUERY_ATTRIBUTES.VIDEO_BITRATE, label: 'Video Bitrate' },
+  { value: QUERY_ATTRIBUTES.VIDEO_CODEC, label: 'Video Codec' },
+  { value: QUERY_ATTRIBUTES.VIDEO_CODEC_TYPE, label: 'Video Codec Type' },
+  { value: QUERY_ATTRIBUTES.VIDEO_DURATION, label: 'Video Duration' },
+  { value: QUERY_ATTRIBUTES.VIDEO_ID, label: 'Video Id' },
+  { value: QUERY_ATTRIBUTES.VIDEO_PLAYBACK_HEIGHT, label: 'Video Playback Height' },
+  { value: QUERY_ATTRIBUTES.VIDEO_PLAYBACK_WIDTH, label: 'Video Playback Width' },
+  { value: QUERY_ATTRIBUTES.VIDEO_SEGMENTS_DOWNLOADED, label: 'Video Segments Downloaded' },
+  { value: QUERY_ATTRIBUTES.VIDEO_SEGMENTS_DOWNLOAD_SIZE, label: 'Video Segments Download Size' },
+  { value: QUERY_ATTRIBUTES.VIDEO_STARTUPTIME, label: 'Video Startuptime' },
+  { value: QUERY_ATTRIBUTES.VIDEO_TITLE, label: 'Video Title' },
+  { value: QUERY_ATTRIBUTES.VIDEO_WINDOW_HEIGHT, label: 'Video Window Height' },
+  { value: QUERY_ATTRIBUTES.VIDEO_WINDOW_WIDTH, label: 'Video Window Width' },
+  { value: QUERY_ATTRIBUTES.VIEWTIME, label: 'Viewtime' },
+  { value: QUERY_ATTRIBUTES.YEAR, label: 'Year' },
+];

From 086546705b7965afe554e0881cf542894d93942d Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 16:39:34 -0300
Subject: [PATCH 09/18] fix linting errors

---
 bitmovin-analytics-datasource/src/types/queryAdAttributes.ts | 2 +-
 bitmovin-analytics-datasource/src/types/queryAttributes.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts b/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
index ac7de81..2d2b012 100644
--- a/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
+++ b/bitmovin-analytics-datasource/src/types/queryAdAttributes.ts
@@ -151,7 +151,7 @@ export enum QUERY_AD_ATTRIBUTES {
 
 export type QueryAdAttribute = keyof typeof QUERY_AD_ATTRIBUTES;
 
-export const SELECTABLE_QUERY_AD_ATTRIBUTES: SelectableValue<QueryAdAttribute>[] = [
+export const SELECTABLE_QUERY_AD_ATTRIBUTES: Array<SelectableValue<QueryAdAttribute>> = [
   { value: QUERY_AD_ATTRIBUTES.ADVERTISER_NAME, label: 'Advertiser Name' },
   { value: QUERY_AD_ATTRIBUTES.AD_CLICKTHROUGH_URL, label: 'Ad Clickthrough Url' },
   { value: QUERY_AD_ATTRIBUTES.AD_DESCRIPTION, label: 'Ad Description' },
diff --git a/bitmovin-analytics-datasource/src/types/queryAttributes.ts b/bitmovin-analytics-datasource/src/types/queryAttributes.ts
index 18cb92c..b38d92b 100644
--- a/bitmovin-analytics-datasource/src/types/queryAttributes.ts
+++ b/bitmovin-analytics-datasource/src/types/queryAttributes.ts
@@ -139,7 +139,7 @@ export enum QUERY_ATTRIBUTES {
 
 export type QueryAttribute = keyof typeof QUERY_ATTRIBUTES;
 
-export const SELECTABLE_QUERY_ATTRIBUTES: SelectableValue<QueryAttribute>[] = [
+export const SELECTABLE_QUERY_ATTRIBUTES: Array<SelectableValue<QueryAttribute>> = [
   { value: QUERY_ATTRIBUTES.AD, label: 'Ad' },
   { value: QUERY_ATTRIBUTES.ANALYTICS_VERSION, label: 'Analytics Software Version' },
   { value: QUERY_ATTRIBUTES.AUDIO_BITRATE, label: 'Audio Bitrate' },

From f4851dafe317b00b7d3fd1d7c14e83522b74bc9e Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Thu, 2 May 2024 18:03:37 -0300
Subject: [PATCH 10/18] add metric support

---
 .../src/components/QueryEditor.tsx            | 38 +++++++++++++------
 .../src/datasource.ts                         | 21 +++++++---
 bitmovin-analytics-datasource/src/types.ts    |  6 ++-
 .../src/types/metric.ts                       | 19 ++++++++++
 4 files changed, 64 insertions(+), 20 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/types/metric.ts

diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 87e02c6..bdce976 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -9,6 +9,7 @@ import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '.
 import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
 import { SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { isMetric, SELECTABLE_METRICS } from '../types/metric';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -24,6 +25,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
   const [licenseLoadingState, setLicenseLoadingState] = useState<LoadingState>(LoadingState.Default);
   const [licenseErrorMessage, setLicenseErrorMessage] = useState('');
   const [isTimeSeries, setIsTimeSeries] = useState(true);
+  const [isDimensionMetricSelected, setIsDimensionMetricSelected] = useState(false);
 
   useEffect(() => {
     setLicenseLoadingState(LoadingState.Loading);
@@ -43,13 +45,19 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
-  const onMetricChange = (item: SelectableValue) => {
-    onChange({ ...query, aggregation: item.value });
+  const onAggregationChange = (item: SelectableValue) => {
+    onChange({ ...query, aggregation: item.value, metric: undefined });
     onRunQuery();
   };
 
   const onDimensionChange = (item: SelectableValue) => {
-    onChange({ ...query, dimension: item.value });
+    if (isMetric(item.value)) {
+      setIsDimensionMetricSelected(true);
+      onChange({ ...query, aggregation: undefined, dimension: undefined, metric: item.value });
+    } else {
+      setIsDimensionMetricSelected(false);
+      onChange({ ...query, dimension: item.value });
+    }
     onRunQuery();
   };
 
@@ -102,19 +110,25 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             placeholder={licenseLoadingState === LoadingState.Loading ? 'Loading Licenses' : 'Choose License'}
           />
         </InlineField>
-        <InlineField label="Metric" labelWidth={20}>
-          <Select
-            defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
-            onChange={(item) => onMetricChange(item)}
-            width={40}
-            options={SELECTABLE_AGGREGATIONS}
-          />
-        </InlineField>
+        {!isDimensionMetricSelected && (
+          <InlineField label="Metric" labelWidth={20}>
+            <Select
+              defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
+              onChange={(item) => onAggregationChange(item)}
+              width={40}
+              options={SELECTABLE_AGGREGATIONS}
+            />
+          </InlineField>
+        )}
         <InlineField label="Dimension" labelWidth={20}>
           <Select
             onChange={onDimensionChange}
             width={40}
-            options={datasource.adAnalytics ? SELECTABLE_QUERY_AD_ATTRIBUTES : SELECTABLE_QUERY_ATTRIBUTES}
+            options={
+              datasource.adAnalytics
+                ? SELECTABLE_QUERY_AD_ATTRIBUTES
+                : SELECTABLE_QUERY_ATTRIBUTES.concat(SELECTABLE_METRICS)
+            }
           />
         </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index fbf980c..d1584e8 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -14,12 +14,15 @@ import { transformGroupedTimeSeriesData, transformSimpleTimeSeries, transformTab
 import { calculateQueryInterval, QueryInterval } from './utils/intervalUtils';
 import { QueryAttribute } from './types/queryAttributes';
 import { QueryAdAttribute } from './types/queryAdAttributes';
+import { Metric } from './types/metric';
+import { Aggregation } from './types/aggregations';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
   groupBy: string[];
   orderBy: Array<{ name: string; order: string }>;
-  dimension: QueryAttribute | QueryAdAttribute;
+  dimension?: QueryAttribute | QueryAdAttribute;
+  metric?: Metric;
   start: Date;
   end: Date;
   licenseKey: string;
@@ -56,7 +59,6 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     const to = range!.to.toDate();
 
     const promises = options.targets.map(async (target) => {
-      const urlAppendix = target.aggregation;
       const interval = target.interval
         ? calculateQueryInterval(target.interval!, from.getTime(), to.getTime())
         : undefined;
@@ -85,7 +87,9 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
         interval: interval,
       };
 
-      const response = await lastValueFrom(this.request(this.getRequestUrl() + urlAppendix, 'POST', query));
+      const response = await lastValueFrom(
+        this.request(this.getRequestUrl(target.metric, target.aggregation), 'POST', query)
+      );
 
       const dataRows: MixedDataRowList = response.data.data.result.rows;
       const columnLabels: Array<{ key: string; label: string }> = response.data.data.result.columnLabels;
@@ -122,12 +126,17 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     return Promise.all(promises).then((data) => ({ data }));
   }
 
-  getRequestUrl(): string {
+  getRequestUrl(metric?: Metric, aggregation?: Aggregation): string {
+    let url = '/analytics';
     if (this.adAnalytics === true) {
-      return '/analytics/ads/queries/';
+      url += '/ads';
     }
 
-    return '/analytics/queries/';
+    if (metric !== undefined) {
+      return url + '/metrics/' + metric;
+    }
+
+    return url + '/queries/' + aggregation;
   }
 
   request(url: string, method: string, payload?: any): Observable<Record<any, any>> {
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index 72b5fcc..d53deec 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -4,12 +4,14 @@ import { QueryInterval } from './utils/intervalUtils';
 import { Aggregation } from './types/aggregations';
 import { QueryAttribute } from './types/queryAttributes';
 import { QueryAdAttribute } from './types/queryAdAttributes';
+import { Metric } from './types/metric';
 
 export interface MyQuery extends DataQuery {
   licenseKey: string;
   interval?: QueryInterval | 'AUTO';
-  aggregation: Aggregation;
-  dimension: QueryAttribute | QueryAdAttribute;
+  aggregation?: Aggregation;
+  metric?: Metric;
+  dimension?: QueryAttribute | QueryAdAttribute;
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {};
diff --git a/bitmovin-analytics-datasource/src/types/metric.ts b/bitmovin-analytics-datasource/src/types/metric.ts
new file mode 100644
index 0000000..37743ba
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/types/metric.ts
@@ -0,0 +1,19 @@
+import { SelectableValue } from '@grafana/data';
+
+export enum METRICS {
+  AVG_CONCURRENTVIEWERS = 'avg-concurrentviewers',
+  MAX_CONCURRENTVIEWERS = 'max-concurrentviewers',
+  AVG_DROPPED_FRAMES = 'avg-dropped-frames',
+}
+
+export type Metric = (typeof METRICS)[keyof typeof METRICS];
+
+export const SELECTABLE_METRICS: Array<SelectableValue<Metric>> = [
+  { value: METRICS.AVG_CONCURRENTVIEWERS, label: 'Avg Concurrent Viewers' },
+  { value: METRICS.MAX_CONCURRENTVIEWERS, label: 'Max Concurrent Viewers' },
+  { value: METRICS.AVG_DROPPED_FRAMES, label: 'Avg Dropped Frames' },
+];
+
+export const isMetric = (value: string): boolean => {
+  return Object.values(METRICS).includes(value as Metric);
+};

From f4c55a6c42be1d0f1b51950b0c4356c62867d676 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Fri, 3 May 2024 08:23:58 -0300
Subject: [PATCH 11/18] add metric to query and check for null instead of
 undefined

---
 bitmovin-analytics-datasource/src/datasource.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index d1584e8..54f3027 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -81,6 +81,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
             ]
           : [],
         dimension: target.dimension,
+        metric: target.metric,
         start: from,
         end: to,
         licenseKey: target.licenseKey,
@@ -132,7 +133,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
       url += '/ads';
     }
 
-    if (metric !== undefined) {
+    if (metric != null) {
       return url + '/metrics/' + metric;
     }
 

From 40f0da90db5fe47ba1453a93352ae085d385f2bf Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Fri, 3 May 2024 11:52:07 -0300
Subject: [PATCH 12/18] implements groupBy selection

---
 .../src/components/GroupByInput.tsx           | 22 ++++++
 .../src/components/GroupByRow.tsx             | 69 +++++++++++++++++++
 .../src/components/QueryEditor.tsx            | 21 ++++--
 .../src/datasource.ts                         |  4 +-
 bitmovin-analytics-datasource/src/types.ts    |  1 +
 5 files changed, 109 insertions(+), 8 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/components/GroupByInput.tsx
 create mode 100644 bitmovin-analytics-datasource/src/components/GroupByRow.tsx

diff --git a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
new file mode 100644
index 0000000..b0d3588
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { HorizontalGroup, IconButton, Select } from '@grafana/ui';
+import { QueryAttribute } from '../types/queryAttributes';
+import { QueryAdAttribute } from '../types/queryAdAttributes';
+import { SelectableValue } from '@grafana/data';
+
+type Props = {
+  groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
+  selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
+  onDelete: () => void;
+  onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+};
+export function GroupByInput(props: Props) {
+  //TODOMY delete margin between select and icon
+  //TODOMY border around the icon
+  return (
+    <HorizontalGroup>
+      <Select value={props.groupBy} onChange={props.onChange} options={props.selectableGroupBys} width={30} />
+      <IconButton tooltip="Delete Group By" name="trash-alt" onClick={() => props.onDelete()} size="lg" />
+    </HorizontalGroup>
+  );
+}
diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
new file mode 100644
index 0000000..b0779e3
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { IconButton, Stack } from '@grafana/ui';
+import { GroupByInput } from './GroupByInput';
+import { difference } from 'lodash';
+
+type Props = {
+  readonly isAdAnalytics: boolean;
+  readonly onChange: (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => void;
+};
+
+export function GroupByRow(props: Props) {
+  const [selectedGroupBys, setSelectedGroupBys] = useState<Array<SelectableValue<QueryAdAttribute | QueryAttribute>>>(
+    []
+  );
+
+  const mapGroupBysToSelectableValue = (): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
+    if (props.isAdAnalytics) {
+      return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedGroupBys);
+    } else {
+      return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedGroupBys);
+    }
+  };
+
+  const deleteGroupByInput = (index: number) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    newSelectedGroupBys.splice(index, 1);
+
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+  };
+
+  const onSelectedGroupByChange = (
+    index: number,
+    newSelectedGroupBy: SelectableValue<QueryAttribute | QueryAdAttribute>
+  ) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    newSelectedGroupBys.splice(index, 1, newSelectedGroupBy);
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+  };
+
+  const addGroupByInput = () => {
+    setSelectedGroupBys((prevState) => [...prevState, { name: '', label: '' }]);
+  };
+
+  //TODOMY fix the overflowing of a lot of selects are created, make it go to the next row
+  return (
+    <Stack>
+      {selectedGroupBys?.map((item, index) => (
+        <GroupByInput
+          groupBy={item}
+          onChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
+            onSelectedGroupByChange(index, newValue)
+          }
+          selectableGroupBys={mapGroupBysToSelectableValue()}
+          onDelete={() => deleteGroupByInput(index)}
+        />
+      ))}
+      <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
+    </Stack>
+  );
+}
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index bdce976..6425522 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -7,9 +7,10 @@ import { MyDataSourceOptions, MyQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
-import { SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
-import { SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { isMetric, SELECTABLE_METRICS } from '../types/metric';
+import { GroupByRow } from './GroupByRow';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -61,6 +62,11 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
+  const onGroupByChange = (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => {
+    onChange({ ...query, groupBy: newGroupBys });
+    onRunQuery();
+  };
+
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
     if (event.currentTarget.checked) {
@@ -83,7 +89,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
           <Select
             defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
             onChange={(item) => onIntervalChange(item)}
-            width={40}
+            width={30}
             options={SELECTABLE_QUERY_INTERVALS}
           />
         </InlineField>
@@ -103,7 +109,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         >
           <Select
             onChange={onLicenseChange}
-            width={40}
+            width={30}
             options={selectableLicenses}
             noOptionsMessage="No Analytics Licenses found"
             isLoading={licenseLoadingState === LoadingState.Loading}
@@ -115,7 +121,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             <Select
               defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
               onChange={(item) => onAggregationChange(item)}
-              width={40}
+              width={30}
               options={SELECTABLE_AGGREGATIONS}
             />
           </InlineField>
@@ -123,7 +129,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         <InlineField label="Dimension" labelWidth={20}>
           <Select
             onChange={onDimensionChange}
-            width={40}
+            width={30}
             options={
               datasource.adAnalytics
                 ? SELECTABLE_QUERY_AD_ATTRIBUTES
@@ -131,6 +137,9 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             }
           />
         </InlineField>
+        <InlineField label="Group By" labelWidth={20}>
+          <GroupByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onGroupByChange} />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index 54f3027..db37e2d 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -19,7 +19,7 @@ import { Aggregation } from './types/aggregations';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
-  groupBy: string[];
+  groupBy: QueryAttribute[] | QueryAdAttribute[];
   orderBy: Array<{ name: string; order: string }>;
   dimension?: QueryAttribute | QueryAdAttribute;
   metric?: Metric;
@@ -71,7 +71,7 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
             value: 0,
           },
         ],
-        groupBy: [],
+        groupBy: target.groupBy,
         orderBy: interval
           ? [
               {
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index d53deec..a25440d 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -12,6 +12,7 @@ export interface MyQuery extends DataQuery {
   aggregation?: Aggregation;
   metric?: Metric;
   dimension?: QueryAttribute | QueryAdAttribute;
+  groupBy: QueryAttribute[] | QueryAdAttribute[];
 }
 
 export const DEFAULT_QUERY: Partial<MyQuery> = {};

From 862cb9248a65b54527f1fa92c455224f0528f75e Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Mon, 6 May 2024 11:19:01 -0300
Subject: [PATCH 13/18] fix linting

---
 .../src/components/GroupByRow.tsx              |  7 ++++---
 .../src/components/QueryEditor.tsx             | 18 +++++++++---------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index b0779e3..4f910a3 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -8,7 +8,7 @@ import { difference } from 'lodash';
 
 type Props = {
   readonly isAdAnalytics: boolean;
-  readonly onChange: (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => void;
+  readonly onChange: (newGroupBys: QueryAdAttribute[] | QueryAttribute[]) => void;
 };
 
 export function GroupByRow(props: Props) {
@@ -31,7 +31,7 @@ export function GroupByRow(props: Props) {
     setSelectedGroupBys(newSelectedGroupBys);
 
     const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
-    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
   };
 
   const onSelectedGroupByChange = (
@@ -43,7 +43,7 @@ export function GroupByRow(props: Props) {
     setSelectedGroupBys(newSelectedGroupBys);
 
     const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
-    props.onChange(groupBys as Array<QueryAttribute> | Array<QueryAdAttribute>);
+    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
   };
 
   const addGroupByInput = () => {
@@ -55,6 +55,7 @@ export function GroupByRow(props: Props) {
     <Stack>
       {selectedGroupBys?.map((item, index) => (
         <GroupByInput
+          key={index}
           groupBy={item}
           onChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
             onSelectedGroupByChange(index, newValue)
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 6e10bd1..9f4701d 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -7,8 +7,8 @@ import { MyDataSourceOptions, BitmovinAnalyticsDataQuery } from '../types';
 import { fetchLicenses } from '../utils/licenses';
 import { DEFAULT_SELECTABLE_QUERY_INTERVAL, SELECTABLE_QUERY_INTERVALS } from '../utils/intervalUtils';
 import { DEFAULT_SELECTABLE_AGGREGATION, SELECTABLE_AGGREGATIONS } from '../types/aggregations';
-import {QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES} from '../types/queryAdAttributes';
-import {QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES} from '../types/queryAttributes';
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { isMetric, SELECTABLE_METRICS } from '../types/metric';
 import { GroupByRow } from './GroupByRow';
 
@@ -62,10 +62,10 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
-    const onGroupByChange = (newGroupBys: Array<QueryAdAttribute> | Array<QueryAttribute>) => {
-        onChange({ ...query, groupBy: newGroupBys });
-        onRunQuery();
-    };
+  const onGroupByChange = (newGroupBys: QueryAdAttribute[] | QueryAttribute[]) => {
+    onChange({ ...query, groupBy: newGroupBys });
+    onRunQuery();
+  };
 
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
@@ -137,9 +137,9 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             }
           />
         </InlineField>
-          <InlineField label="Group By" labelWidth={20}>
-              <GroupByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onGroupByChange} />
-          </InlineField>
+        <InlineField label="Group By" labelWidth={20}>
+          <GroupByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onGroupByChange} />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>

From 1abcfadce76d1916e8a0169f334c551ae0969ff9 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Tue, 7 May 2024 08:49:32 -0300
Subject: [PATCH 14/18] implements reordering of GroupBys and fixes position of
 Add Button

---
 .../src/components/GroupByInput.tsx           | 33 +++++++++++++++---
 .../src/components/GroupByRow.tsx             | 34 ++++++++++++++-----
 .../src/components/QueryEditor.tsx            |  8 ++---
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
index b0d3588..56de55d 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
@@ -1,22 +1,47 @@
 import React from 'react';
+import { SelectableValue } from '@grafana/data';
 import { HorizontalGroup, IconButton, Select } from '@grafana/ui';
+
 import { QueryAttribute } from '../types/queryAttributes';
 import { QueryAdAttribute } from '../types/queryAdAttributes';
-import { SelectableValue } from '@grafana/data';
 
 type Props = {
   groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
   selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
   onDelete: () => void;
   onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+  isFirst: boolean;
+  isLast: boolean;
+  onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
 };
+
+export enum REORDER_DIRECTION {
+  UP,
+  DOWN,
+}
 export function GroupByInput(props: Props) {
-  //TODOMY delete margin between select and icon
-  //TODOMY border around the icon
   return (
     <HorizontalGroup>
       <Select value={props.groupBy} onChange={props.onChange} options={props.selectableGroupBys} width={30} />
-      <IconButton tooltip="Delete Group By" name="trash-alt" onClick={() => props.onDelete()} size="lg" />
+      <IconButton
+        tooltip="Move down"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.DOWN)}
+        name="arrow-down"
+        disabled={props.isLast}
+      />
+      <IconButton
+        tooltip="Move up"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.UP)}
+        name="arrow-up"
+        disabled={props.isFirst}
+      />
+      <IconButton
+        tooltip="Delete Group By"
+        name="trash-alt"
+        onClick={() => props.onDelete()}
+        size="lg"
+        variant="destructive"
+      />
     </HorizontalGroup>
   );
 }
diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index 4f910a3..b6e7772 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import { SelectableValue } from '@grafana/data';
+import { Box, IconButton, VerticalGroup } from '@grafana/ui';
+import { difference } from 'lodash';
+
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
-import { IconButton, Stack } from '@grafana/ui';
-import { GroupByInput } from './GroupByInput';
-import { difference } from 'lodash';
+import { GroupByInput, REORDER_DIRECTION } from './GroupByInput';
 
 type Props = {
   readonly isAdAnalytics: boolean;
@@ -46,14 +47,26 @@ export function GroupByRow(props: Props) {
     props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
   };
 
+  const reorderGroupBy = (direction: REORDER_DIRECTION, index: number) => {
+    const newSelectedGroupBys = [...selectedGroupBys];
+    const groupByToMove = newSelectedGroupBys[index];
+    newSelectedGroupBys.splice(index, 1);
+
+    const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
+    newSelectedGroupBys.splice(newIndex, 0, groupByToMove);
+    setSelectedGroupBys(newSelectedGroupBys);
+
+    const groupBys = newSelectedGroupBys.map((groupBy) => groupBy.value);
+    props.onChange(groupBys as QueryAttribute[] | QueryAdAttribute[]);
+  };
+
   const addGroupByInput = () => {
     setSelectedGroupBys((prevState) => [...prevState, { name: '', label: '' }]);
   };
 
-  //TODOMY fix the overflowing of a lot of selects are created, make it go to the next row
   return (
-    <Stack>
-      {selectedGroupBys?.map((item, index) => (
+    <VerticalGroup>
+      {selectedGroupBys?.map((item, index, groupBys) => (
         <GroupByInput
           key={index}
           groupBy={item}
@@ -62,9 +75,14 @@ export function GroupByRow(props: Props) {
           }
           selectableGroupBys={mapGroupBysToSelectableValue()}
           onDelete={() => deleteGroupByInput(index)}
+          isFirst={index === 0}
+          isLast={index === groupBys.length - 1}
+          onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderGroupBy(direction, index)}
         />
       ))}
-      <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
-    </Stack>
+      <Box paddingTop={selectedGroupBys.length === 0 ? 0.5 : 0}>
+        <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
+      </Box>
+    </VerticalGroup>
   );
 }
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index 9f4701d..c6c0c52 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -89,7 +89,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
           <Select
             defaultValue={DEFAULT_SELECTABLE_QUERY_INTERVAL}
             onChange={(item) => onIntervalChange(item)}
-            width={40}
+            width={30}
             options={SELECTABLE_QUERY_INTERVALS}
           />
         </InlineField>
@@ -109,7 +109,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         >
           <Select
             onChange={onLicenseChange}
-            width={40}
+            width={30}
             options={selectableLicenses}
             noOptionsMessage="No Analytics Licenses found"
             isLoading={licenseLoadingState === LoadingState.Loading}
@@ -121,7 +121,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
             <Select
               defaultValue={DEFAULT_SELECTABLE_AGGREGATION}
               onChange={(item) => onAggregationChange(item)}
-              width={40}
+              width={30}
               options={SELECTABLE_AGGREGATIONS}
             />
           </InlineField>
@@ -129,7 +129,7 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         <InlineField label="Dimension" labelWidth={20}>
           <Select
             onChange={onDimensionChange}
-            width={40}
+            width={30}
             options={
               datasource.adAnalytics
                 ? SELECTABLE_QUERY_AD_ATTRIBUTES

From 4d085ba76ba78814d9fbb3305cccddcb87cd88b1 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Tue, 7 May 2024 08:54:26 -0300
Subject: [PATCH 15/18] make props readonly

---
 .../src/components/GroupByInput.tsx           | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
index 56de55d..1ac2561 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByInput.tsx
@@ -5,20 +5,21 @@ import { HorizontalGroup, IconButton, Select } from '@grafana/ui';
 import { QueryAttribute } from '../types/queryAttributes';
 import { QueryAdAttribute } from '../types/queryAdAttributes';
 
-type Props = {
-  groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
-  selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
-  onDelete: () => void;
-  onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
-  isFirst: boolean;
-  isLast: boolean;
-  onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
-};
-
 export enum REORDER_DIRECTION {
   UP,
   DOWN,
 }
+
+type Props = {
+  readonly groupBy: SelectableValue<QueryAttribute | QueryAdAttribute>;
+  readonly selectableGroupBys: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
+  readonly onDelete: () => void;
+  readonly onChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
+  readonly isFirst: boolean;
+  readonly isLast: boolean;
+  readonly onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
+};
+
 export function GroupByInput(props: Props) {
   return (
     <HorizontalGroup>

From 556fd9cdbb7f1c0b5cef711157294eb3ba2c7be8 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Tue, 7 May 2024 13:48:13 -0300
Subject: [PATCH 16/18] implements order By selection

---
 .../src/components/GroupByRow.tsx             |   4 +-
 .../src/components/OrderByInput.tsx           |  63 +++++++++++
 .../src/components/OrderByRow.tsx             | 103 ++++++++++++++++++
 .../src/components/QueryEditor.tsx            |  10 ++
 .../src/datasource.ts                         |  13 +--
 bitmovin-analytics-datasource/src/types.ts    |   2 +
 .../src/types/queryOrderBy.ts                 |  14 +++
 7 files changed, 197 insertions(+), 12 deletions(-)
 create mode 100644 bitmovin-analytics-datasource/src/components/OrderByInput.tsx
 create mode 100644 bitmovin-analytics-datasource/src/components/OrderByRow.tsx
 create mode 100644 bitmovin-analytics-datasource/src/types/queryOrderBy.ts

diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index b6e7772..441a417 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -66,7 +66,7 @@ export function GroupByRow(props: Props) {
 
   return (
     <VerticalGroup>
-      {selectedGroupBys?.map((item, index, groupBys) => (
+      {selectedGroupBys.map((item, index, groupBys) => (
         <GroupByInput
           key={index}
           groupBy={item}
@@ -81,7 +81,7 @@ export function GroupByRow(props: Props) {
         />
       ))}
       <Box paddingTop={selectedGroupBys.length === 0 ? 0.5 : 0}>
-        <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xxl" />
+        <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addGroupByInput()} size="xl" />
       </Box>
     </VerticalGroup>
   );
diff --git a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
new file mode 100644
index 0000000..c977a51
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { SelectableValue } from '@grafana/data';
+import { HorizontalGroup, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
+
+import { QueryAttribute } from '../types/queryAttributes';
+import { QueryAdAttribute } from '../types/queryAdAttributes';
+import { QuerySortOrder } from '../types/queryOrderBy';
+import { REORDER_DIRECTION } from './GroupByInput';
+
+type Props = {
+  readonly isAdAnalytics: boolean;
+  readonly attribute: QueryAttribute | QueryAdAttribute | '';
+  readonly selectableGroupByAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
+  readonly onAttributeChange: (newValue: QueryAttribute | QueryAdAttribute) => void;
+  readonly sortOrder: QuerySortOrder;
+  readonly onSortOrderChange: (newValue: QuerySortOrder) => void;
+  readonly onDelete: () => void;
+  readonly isFirst: boolean;
+  readonly isLast: boolean;
+  readonly onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
+};
+
+const sortOrderOption: SelectableValue<QuerySortOrder>[] = [
+  { value: 'ASC', description: 'Sort by ascending', icon: 'sort-amount-up' },
+  { value: 'DESC', description: 'Sort by descending', icon: 'sort-amount-down' },
+];
+
+export function OrderByInput(props: Props) {
+  return (
+    <HorizontalGroup spacing="xs">
+      <Select
+        value={props.attribute}
+        onChange={(value) => props.onAttributeChange(value.value as QueryAttribute | QueryAdAttribute)}
+        options={props.selectableGroupByAttributes}
+        width={30}
+      />
+      <RadioButtonGroup
+        options={sortOrderOption}
+        value={props.sortOrder}
+        onChange={(value) => props.onSortOrderChange(value)}
+      />
+      <IconButton
+        tooltip="Move down"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.DOWN)}
+        name="arrow-down"
+        disabled={props.isLast}
+      />
+      <IconButton
+        tooltip="Move up"
+        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.UP)}
+        name="arrow-up"
+        disabled={props.isFirst}
+      />
+      <IconButton
+        tooltip="Delete Group By"
+        name="trash-alt"
+        onClick={() => props.onDelete()}
+        size="lg"
+        variant="destructive"
+      />
+    </HorizontalGroup>
+  );
+}
diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
new file mode 100644
index 0000000..89b3086
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Box, IconButton, VerticalGroup } from '@grafana/ui';
+import { SelectableValue } from '@grafana/data';
+import { cloneDeep, differenceWith } from 'lodash';
+
+import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
+import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
+import { QueryOrderBy, QuerySortOrder, SelectableQueryOrderBy } from '../types/queryOrderBy';
+import { OrderByInput } from './OrderByInput';
+import { REORDER_DIRECTION } from './GroupByInput';
+
+type Props = {
+  readonly isAdAnalytics: boolean;
+  readonly onChange: (newOrderBy: QueryOrderBy[]) => void;
+};
+
+export function OrderByRow(props: Props) {
+  const [orderBys, setOrderBys] = useState<SelectableQueryOrderBy[]>([]);
+
+  const mapOrderBysToSelectableValue = (): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
+    if (props.isAdAnalytics) {
+      const orderByAdAttributes = orderBys.map((orderBy) => orderBy.name as QueryAdAttribute);
+      return differenceWith(
+        SELECTABLE_QUERY_AD_ATTRIBUTES,
+        orderByAdAttributes,
+        (selectableAttribute, orderByAdAttribute) => selectableAttribute.value === orderByAdAttribute
+      );
+    } else {
+      const orderByAttributes = orderBys.map((orderBy) => orderBy.name as QueryAdAttribute);
+      return differenceWith(
+        SELECTABLE_QUERY_ATTRIBUTES,
+        orderByAttributes,
+        (selectableAttribute, orderByAttribute) => selectableAttribute.value === orderByAttribute
+      );
+    }
+  };
+
+  const deleteOrderByInput = (index: number) => {
+    const newOrderBys = [...orderBys];
+    newOrderBys.splice(index, 1);
+
+    setOrderBys(newOrderBys);
+    props.onChange(newOrderBys as QueryOrderBy[]);
+  };
+
+  const onAttributesChange = (index: number, newAttribute: QueryAttribute | QueryAdAttribute) => {
+    const newOrderBys = [...orderBys];
+    const newValue = { name: newAttribute, order: newOrderBys[index].order } as QueryOrderBy;
+    newOrderBys.splice(index, 1, newValue);
+    setOrderBys(newOrderBys);
+    props.onChange(newOrderBys as QueryOrderBy[]);
+  };
+
+  const onSortOrdersChange = (index: number, newSortOrder: QuerySortOrder) => {
+    const newOrderBys = [...orderBys];
+    const newValue = { name: newOrderBys[index].name, order: newSortOrder } as QueryOrderBy;
+    newOrderBys.splice(index, 1, newValue);
+    setOrderBys(newOrderBys);
+    props.onChange(newOrderBys as QueryOrderBy[]);
+  };
+
+  const reorderOrderBy = (direction: REORDER_DIRECTION, index: number) => {
+    const clonedOrderbys = cloneDeep(orderBys);
+    const orderByToMove = clonedOrderbys[index];
+    const orderBysWithoutOrderByToMove = clonedOrderbys.slice(0, index).concat(clonedOrderbys.slice(index + 1));
+    const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
+
+    const newOrderBys = orderBysWithoutOrderByToMove
+      .slice(0, newIndex)
+      .concat(orderByToMove)
+      .concat(orderBysWithoutOrderByToMove.slice(newIndex));
+
+    //TODOMY why is this not triggering a rerender?
+    setOrderBys(newOrderBys);
+    props.onChange(newOrderBys as QueryOrderBy[]);
+  };
+  const addOrderByInput = () => {
+    setOrderBys((prevState) => [...prevState, { name: '', order: 'ASC' }]);
+  };
+
+  return (
+    <VerticalGroup>
+      {orderBys.map((item, index, orderBys) => (
+        <OrderByInput
+          isAdAnalytics={props.isAdAnalytics}
+          selectableGroupByAttributes={mapOrderBysToSelectableValue()}
+          attribute={item.name}
+          onAttributeChange={(newValue: QueryAttribute | QueryAdAttribute) => onAttributesChange(index, newValue)}
+          sortOrder={item.order}
+          onSortOrderChange={(newValue: QuerySortOrder) => onSortOrdersChange(index, newValue)}
+          onDelete={() => deleteOrderByInput(index)}
+          isFirst={index === 0}
+          isLast={index === orderBys.length - 1}
+          onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderOrderBy(direction, index)}
+        />
+      ))}
+
+      <Box paddingTop={orderBys.length === 0 ? 0.5 : 0}>
+        <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addOrderByInput()} size="xl" />
+      </Box>
+    </VerticalGroup>
+  );
+}
diff --git a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
index c6c0c52..d324b75 100644
--- a/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
+++ b/bitmovin-analytics-datasource/src/components/QueryEditor.tsx
@@ -11,6 +11,8 @@ import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/query
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
 import { isMetric, SELECTABLE_METRICS } from '../types/metric';
 import { GroupByRow } from './GroupByRow';
+import { OrderByRow } from './OrderByRow';
+import { QueryOrderBy } from '../types/queryOrderBy';
 
 enum LoadingState {
   Default = 'DEFAULT',
@@ -67,6 +69,11 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
     onRunQuery();
   };
 
+  const onOrderByChange = (newOrderBys: QueryOrderBy[]) => {
+    onChange({ ...query, orderBy: newOrderBys });
+    onRunQuery();
+  };
+
   const onFormatAsTimeSeriesChange = (event: ChangeEvent<HTMLInputElement>) => {
     setIsTimeSeries(event.currentTarget.checked);
     if (event.currentTarget.checked) {
@@ -140,6 +147,9 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
         <InlineField label="Group By" labelWidth={20}>
           <GroupByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onGroupByChange} />
         </InlineField>
+        <InlineField label="Order By" labelWidth={20}>
+          <OrderByRow isAdAnalytics={datasource.adAnalytics ? true : false} onChange={onOrderByChange} />
+        </InlineField>
         <InlineField label="Format as time series" labelWidth={20}>
           <InlineSwitch value={isTimeSeries} onChange={onFormatAsTimeSeriesChange}></InlineSwitch>
         </InlineField>
diff --git a/bitmovin-analytics-datasource/src/datasource.ts b/bitmovin-analytics-datasource/src/datasource.ts
index a23f5a4..6211340 100644
--- a/bitmovin-analytics-datasource/src/datasource.ts
+++ b/bitmovin-analytics-datasource/src/datasource.ts
@@ -16,12 +16,12 @@ import { QueryAttribute } from './types/queryAttributes';
 import { QueryAdAttribute } from './types/queryAdAttributes';
 import { Metric } from './types/metric';
 import { Aggregation } from './types/aggregations';
-
+import { QueryOrderBy } from './types/queryOrderBy';
 
 type AnalyticsQuery = {
   filters: Array<{ name: string; operator: string; value: number }>;
   groupBy: QueryAttribute[] | QueryAdAttribute[];
-  orderBy: Array<{ name: string; order: string }>;
+  orderBy: QueryOrderBy[];
   dimension?: QueryAttribute | QueryAdAttribute;
   metric?: Metric;
   start: Date;
@@ -73,14 +73,7 @@ export class DataSource extends DataSourceApi<BitmovinAnalyticsDataQuery, MyData
           },
         ],
         groupBy: target.groupBy,
-        orderBy: interval
-          ? [
-              {
-                name: interval,
-                order: 'DESC',
-              },
-            ]
-          : [],
+        orderBy: target.orderBy,
         dimension: target.dimension,
         metric: target.metric,
         start: from,
diff --git a/bitmovin-analytics-datasource/src/types.ts b/bitmovin-analytics-datasource/src/types.ts
index 6a0605a..b7d5f82 100644
--- a/bitmovin-analytics-datasource/src/types.ts
+++ b/bitmovin-analytics-datasource/src/types.ts
@@ -5,6 +5,7 @@ import { Aggregation } from './types/aggregations';
 import { QueryAttribute } from './types/queryAttributes';
 import { QueryAdAttribute } from './types/queryAdAttributes';
 import { Metric } from './types/metric';
+import { QueryOrderBy } from './types/queryOrderBy';
 
 export interface BitmovinAnalyticsDataQuery extends DataQuery {
   licenseKey: string;
@@ -13,6 +14,7 @@ export interface BitmovinAnalyticsDataQuery extends DataQuery {
   metric?: Metric;
   dimension?: QueryAttribute | QueryAdAttribute;
   groupBy: QueryAttribute[] | QueryAdAttribute[];
+  orderBy: QueryOrderBy[];
 }
 
 export const DEFAULT_QUERY: Partial<BitmovinAnalyticsDataQuery> = {};
diff --git a/bitmovin-analytics-datasource/src/types/queryOrderBy.ts b/bitmovin-analytics-datasource/src/types/queryOrderBy.ts
new file mode 100644
index 0000000..80bf239
--- /dev/null
+++ b/bitmovin-analytics-datasource/src/types/queryOrderBy.ts
@@ -0,0 +1,14 @@
+import { QueryAttribute } from './queryAttributes';
+import { QueryAdAttribute } from './queryAdAttributes';
+
+export type QuerySortOrder = 'ASC' | 'DESC';
+
+export type QueryOrderBy = {
+  name: QueryAttribute | QueryAdAttribute;
+  order: QuerySortOrder;
+};
+
+export type SelectableQueryOrderBy = {
+  name: QueryAttribute | QueryAdAttribute | '';
+  order: QuerySortOrder;
+};

From ef563a5e986ecd5875a7095700536f1f157f35bd Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Tue, 7 May 2024 17:36:20 -0300
Subject: [PATCH 17/18] splits orderBy state into two seperate states to fix
 rendering and renames variables

---
 .../src/components/GroupByRow.tsx             |   2 +-
 .../src/components/OrderByInput.tsx           |  16 +--
 .../src/components/OrderByRow.tsx             | 115 ++++++++++--------
 .../src/types/queryOrderBy.ts                 |   5 -
 4 files changed, 75 insertions(+), 63 deletions(-)

diff --git a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
index 441a417..2ff83a8 100644
--- a/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/GroupByRow.tsx
@@ -61,7 +61,7 @@ export function GroupByRow(props: Props) {
   };
 
   const addGroupByInput = () => {
-    setSelectedGroupBys((prevState) => [...prevState, { name: '', label: '' }]);
+    setSelectedGroupBys((prevState) => [...prevState, {}]);
   };
 
   return (
diff --git a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
index c977a51..41311bc 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
@@ -9,15 +9,15 @@ import { REORDER_DIRECTION } from './GroupByInput';
 
 type Props = {
   readonly isAdAnalytics: boolean;
-  readonly attribute: QueryAttribute | QueryAdAttribute | '';
-  readonly selectableGroupByAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
-  readonly onAttributeChange: (newValue: QueryAttribute | QueryAdAttribute) => void;
+  readonly attribute: SelectableValue<QueryAttribute | QueryAdAttribute>;
+  readonly selectableOrderByAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>;
+  readonly onAttributeChange: (newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) => void;
   readonly sortOrder: QuerySortOrder;
   readonly onSortOrderChange: (newValue: QuerySortOrder) => void;
   readonly onDelete: () => void;
   readonly isFirst: boolean;
   readonly isLast: boolean;
-  readonly onReorderGroupBy: (direction: REORDER_DIRECTION) => void;
+  readonly onReorderOrderBy: (direction: REORDER_DIRECTION) => void;
 };
 
 const sortOrderOption: SelectableValue<QuerySortOrder>[] = [
@@ -30,8 +30,8 @@ export function OrderByInput(props: Props) {
     <HorizontalGroup spacing="xs">
       <Select
         value={props.attribute}
-        onChange={(value) => props.onAttributeChange(value.value as QueryAttribute | QueryAdAttribute)}
-        options={props.selectableGroupByAttributes}
+        onChange={(value) => props.onAttributeChange(value)}
+        options={props.selectableOrderByAttributes}
         width={30}
       />
       <RadioButtonGroup
@@ -41,13 +41,13 @@ export function OrderByInput(props: Props) {
       />
       <IconButton
         tooltip="Move down"
-        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.DOWN)}
+        onClick={() => props.onReorderOrderBy(REORDER_DIRECTION.DOWN)}
         name="arrow-down"
         disabled={props.isLast}
       />
       <IconButton
         tooltip="Move up"
-        onClick={() => props.onReorderGroupBy(REORDER_DIRECTION.UP)}
+        onClick={() => props.onReorderOrderBy(REORDER_DIRECTION.UP)}
         name="arrow-up"
         disabled={props.isFirst}
       />
diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
index 89b3086..61d0abd 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Box, IconButton, VerticalGroup } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
-import { cloneDeep, differenceWith } from 'lodash';
+import { difference } from 'lodash';
 
 import { QueryAdAttribute, SELECTABLE_QUERY_AD_ATTRIBUTES } from '../types/queryAdAttributes';
 import { QueryAttribute, SELECTABLE_QUERY_ATTRIBUTES } from '../types/queryAttributes';
-import { QueryOrderBy, QuerySortOrder, SelectableQueryOrderBy } from '../types/queryOrderBy';
+import { QueryOrderBy, QuerySortOrder } from '../types/queryOrderBy';
 import { OrderByInput } from './OrderByInput';
 import { REORDER_DIRECTION } from './GroupByInput';
 
@@ -15,87 +15,104 @@ type Props = {
 };
 
 export function OrderByRow(props: Props) {
-  const [orderBys, setOrderBys] = useState<SelectableQueryOrderBy[]>([]);
+  const [selectedAttributes, setSelectedAttributes] = useState<
+    Array<SelectableValue<QueryAdAttribute | QueryAttribute>>
+  >([]);
+  const [selectedSortOrders, setSelectedSortOrders] = useState<QuerySortOrder[]>([]);
 
   const mapOrderBysToSelectableValue = (): Array<SelectableValue<QueryAttribute | QueryAdAttribute>> => {
     if (props.isAdAnalytics) {
-      const orderByAdAttributes = orderBys.map((orderBy) => orderBy.name as QueryAdAttribute);
-      return differenceWith(
-        SELECTABLE_QUERY_AD_ATTRIBUTES,
-        orderByAdAttributes,
-        (selectableAttribute, orderByAdAttribute) => selectableAttribute.value === orderByAdAttribute
-      );
+      return difference(SELECTABLE_QUERY_AD_ATTRIBUTES, selectedAttributes);
     } else {
-      const orderByAttributes = orderBys.map((orderBy) => orderBy.name as QueryAdAttribute);
-      return differenceWith(
-        SELECTABLE_QUERY_ATTRIBUTES,
-        orderByAttributes,
-        (selectableAttribute, orderByAttribute) => selectableAttribute.value === orderByAttribute
-      );
+      return difference(SELECTABLE_QUERY_ATTRIBUTES, selectedAttributes);
     }
   };
 
+  const mapSelectedValuesToQueryOrderBy = (
+    selectedAttributes: Array<SelectableValue<QueryAttribute | QueryAdAttribute>>,
+    selectedSortOrders: QuerySortOrder[]
+  ): QueryOrderBy[] => {
+    const queryOrderBys: QueryOrderBy[] = [];
+    for (let i = 0; i < selectedAttributes.length; i++) {
+      queryOrderBys.push({
+        name: selectedAttributes[i].value!,
+        order: selectedSortOrders[i],
+      });
+    }
+    return queryOrderBys;
+  };
+
   const deleteOrderByInput = (index: number) => {
-    const newOrderBys = [...orderBys];
-    newOrderBys.splice(index, 1);
+    const newSelectedAttributes = [...selectedAttributes];
+    newSelectedAttributes.splice(index, 1);
+
+    const newSelectedSortOrders = [...selectedSortOrders];
+    newSelectedSortOrders.splice(index, 1);
 
-    setOrderBys(newOrderBys);
-    props.onChange(newOrderBys as QueryOrderBy[]);
+    setSelectedAttributes(newSelectedAttributes);
+    setSelectedSortOrders(newSelectedSortOrders);
+    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, newSelectedSortOrders));
   };
 
-  const onAttributesChange = (index: number, newAttribute: QueryAttribute | QueryAdAttribute) => {
-    const newOrderBys = [...orderBys];
-    const newValue = { name: newAttribute, order: newOrderBys[index].order } as QueryOrderBy;
-    newOrderBys.splice(index, 1, newValue);
-    setOrderBys(newOrderBys);
-    props.onChange(newOrderBys as QueryOrderBy[]);
+  const onAttributesChange = (index: number, newAttribute: SelectableValue<QueryAttribute | QueryAdAttribute>) => {
+    const newSelectedAttributes = [...selectedAttributes];
+    newSelectedAttributes.splice(index, 1, newAttribute);
+    setSelectedAttributes(newSelectedAttributes);
+
+    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, selectedSortOrders));
   };
 
   const onSortOrdersChange = (index: number, newSortOrder: QuerySortOrder) => {
-    const newOrderBys = [...orderBys];
-    const newValue = { name: newOrderBys[index].name, order: newSortOrder } as QueryOrderBy;
-    newOrderBys.splice(index, 1, newValue);
-    setOrderBys(newOrderBys);
-    props.onChange(newOrderBys as QueryOrderBy[]);
+    const newSelectedSortOrders = [...selectedSortOrders];
+    newSelectedSortOrders.splice(index, 1, newSortOrder);
+    setSelectedSortOrders(newSelectedSortOrders);
+
+    props.onChange(mapSelectedValuesToQueryOrderBy(selectedAttributes, newSelectedSortOrders));
   };
 
   const reorderOrderBy = (direction: REORDER_DIRECTION, index: number) => {
-    const clonedOrderbys = cloneDeep(orderBys);
-    const orderByToMove = clonedOrderbys[index];
-    const orderBysWithoutOrderByToMove = clonedOrderbys.slice(0, index).concat(clonedOrderbys.slice(index + 1));
     const newIndex = direction === REORDER_DIRECTION.UP ? index - 1 : index + 1;
 
-    const newOrderBys = orderBysWithoutOrderByToMove
-      .slice(0, newIndex)
-      .concat(orderByToMove)
-      .concat(orderBysWithoutOrderByToMove.slice(newIndex));
+    const newSelectedAttributes = [...selectedAttributes];
+    const attributeToMove = newSelectedAttributes[index];
+    newSelectedAttributes.splice(index, 1);
+    newSelectedAttributes.splice(newIndex, 0, attributeToMove);
+
+    const newSelectedSortOrders = [...selectedSortOrders];
+    const sortOrderToMove = newSelectedSortOrders[index];
+    newSelectedSortOrders.splice(index, 1);
+    newSelectedSortOrders.splice(newIndex, 0, sortOrderToMove);
+
+    setSelectedAttributes(newSelectedAttributes);
+    setSelectedSortOrders(newSelectedSortOrders);
 
-    //TODOMY why is this not triggering a rerender?
-    setOrderBys(newOrderBys);
-    props.onChange(newOrderBys as QueryOrderBy[]);
+    props.onChange(mapSelectedValuesToQueryOrderBy(newSelectedAttributes, newSelectedSortOrders));
   };
   const addOrderByInput = () => {
-    setOrderBys((prevState) => [...prevState, { name: '', order: 'ASC' }]);
+    setSelectedAttributes((prevState) => [...prevState, {}]);
+    setSelectedSortOrders((prevState) => [...prevState, 'ASC']);
   };
 
   return (
     <VerticalGroup>
-      {orderBys.map((item, index, orderBys) => (
+      {selectedAttributes.map((attribute, index, array) => (
         <OrderByInput
           isAdAnalytics={props.isAdAnalytics}
-          selectableGroupByAttributes={mapOrderBysToSelectableValue()}
-          attribute={item.name}
-          onAttributeChange={(newValue: QueryAttribute | QueryAdAttribute) => onAttributesChange(index, newValue)}
-          sortOrder={item.order}
+          selectableOrderByAttributes={mapOrderBysToSelectableValue()}
+          attribute={attribute}
+          onAttributeChange={(newValue: SelectableValue<QueryAdAttribute | QueryAttribute>) =>
+            onAttributesChange(index, newValue)
+          }
+          sortOrder={selectedSortOrders[index]}
           onSortOrderChange={(newValue: QuerySortOrder) => onSortOrdersChange(index, newValue)}
           onDelete={() => deleteOrderByInput(index)}
           isFirst={index === 0}
-          isLast={index === orderBys.length - 1}
-          onReorderGroupBy={(direction: REORDER_DIRECTION) => reorderOrderBy(direction, index)}
+          isLast={index === array.length - 1}
+          onReorderOrderBy={(direction: REORDER_DIRECTION) => reorderOrderBy(direction, index)}
         />
       ))}
 
-      <Box paddingTop={orderBys.length === 0 ? 0.5 : 0}>
+      <Box paddingTop={selectedAttributes.length === 0 ? 0.5 : 0}>
         <IconButton name="plus-square" tooltip="Add Group By" onClick={() => addOrderByInput()} size="xl" />
       </Box>
     </VerticalGroup>
diff --git a/bitmovin-analytics-datasource/src/types/queryOrderBy.ts b/bitmovin-analytics-datasource/src/types/queryOrderBy.ts
index 80bf239..2b146c4 100644
--- a/bitmovin-analytics-datasource/src/types/queryOrderBy.ts
+++ b/bitmovin-analytics-datasource/src/types/queryOrderBy.ts
@@ -7,8 +7,3 @@ export type QueryOrderBy = {
   name: QueryAttribute | QueryAdAttribute;
   order: QuerySortOrder;
 };
-
-export type SelectableQueryOrderBy = {
-  name: QueryAttribute | QueryAdAttribute | '';
-  order: QuerySortOrder;
-};

From abb48c04935297e3bd1476ea24730964d3a7ab93 Mon Sep 17 00:00:00 2001
From: MGJamJam <myriam.gantner@gmail.com>
Date: Tue, 7 May 2024 17:46:39 -0300
Subject: [PATCH 18/18] lint

---
 bitmovin-analytics-datasource/src/components/OrderByInput.tsx | 2 +-
 bitmovin-analytics-datasource/src/components/OrderByRow.tsx   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
index 41311bc..033a3fc 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByInput.tsx
@@ -20,7 +20,7 @@ type Props = {
   readonly onReorderOrderBy: (direction: REORDER_DIRECTION) => void;
 };
 
-const sortOrderOption: SelectableValue<QuerySortOrder>[] = [
+const sortOrderOption: Array<SelectableValue<QuerySortOrder>> = [
   { value: 'ASC', description: 'Sort by ascending', icon: 'sort-amount-up' },
   { value: 'DESC', description: 'Sort by descending', icon: 'sort-amount-down' },
 ];
diff --git a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
index 61d0abd..9067925 100644
--- a/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
+++ b/bitmovin-analytics-datasource/src/components/OrderByRow.tsx
@@ -97,6 +97,7 @@ export function OrderByRow(props: Props) {
     <VerticalGroup>
       {selectedAttributes.map((attribute, index, array) => (
         <OrderByInput
+          key={index}
           isAdAnalytics={props.isAdAnalytics}
           selectableOrderByAttributes={mapOrderBysToSelectableValue()}
           attribute={attribute}