Merge pull request #15626 from grafana/davkal/15607-explore-line-colors

Explore: Make sure line graphs get different colors

packages/grafana-ui/src/types/datasource.ts

@@ -3,9 +3,11 @@ import { PluginMeta } from './plugin';
 import { TableData, TimeSeries } from './data';
 import { TableData, TimeSeries } from './data';
 
 
 export interface DataQueryResponse {
 export interface DataQueryResponse {
-  data: TimeSeries[] | [TableData] | any;
+  data: DataQueryResponseData;
 }
 }
 
 
+export type DataQueryResponseData = TimeSeries[] | [TableData] | any;
+
 export interface DataQuery {
 export interface DataQuery {
   /**
   /**
    * A - Z
    * A - Z

public/app/core/utils/explore.ts

@@ -20,6 +20,7 @@ import {
   ResultType,
   ResultType,
   QueryIntervals,
   QueryIntervals,
   QueryOptions,
   QueryOptions,
+  ResultGetter,
 } from 'app/types/explore';
 } from 'app/types/explore';
 import { LogsDedupStrategy } from 'app/core/logs_model';
 import { LogsDedupStrategy } from 'app/core/logs_model';
 
 
@@ -301,11 +302,24 @@ export function getIntervals(range: RawTimeRange, lowLimit: string, resolution:
   return kbn.calculateInterval(absoluteRange, resolution, lowLimit);
   return kbn.calculateInterval(absoluteRange, resolution, lowLimit);
 }
 }
 
 
-export function makeTimeSeriesList(dataList) {
-  return dataList.map((seriesData, index) => {
+export const makeTimeSeriesList: ResultGetter = (dataList, transaction, allTransactions) => {
+  // Prevent multiple Graph transactions to have the same colors
+  let colorIndexOffset = 0;
+  for (const other of allTransactions) {
+    // Only need to consider transactions that came before the current one
+    if (other === transaction) {
+      break;
+    }
+    // Count timeseries of previous query results
+    if (other.resultType === 'Graph' && other.done) {
+      colorIndexOffset += other.result.length;
+    }
+  }
+
+  return dataList.map((seriesData, index: number) => {
     const datapoints = seriesData.datapoints || [];
     const datapoints = seriesData.datapoints || [];
     const alias = seriesData.target;
     const alias = seriesData.target;
-    const colorIndex = index % colors.length;
+    const colorIndex = (colorIndexOffset + index) % colors.length;
     const color = colors[colorIndex];
     const color = colors[colorIndex];
 
 
     const series = new TimeSeries({
     const series = new TimeSeries({
@@ -317,7 +331,7 @@ export function makeTimeSeriesList(dataList) {
 
 
     return series;
     return series;
   });
   });
-}
+};
 
 
 /**
 /**
  * Update the query history. Side-effect: store history in local storage
  * Update the query history. Side-effect: store history in local storage

public/app/features/explore/state/actions.ts

@@ -597,7 +597,8 @@ function runQueriesForType(
         const res = await datasourceInstance.query(transaction.options);
         const res = await datasourceInstance.query(transaction.options);
         eventBridge.emit('data-received', res.data || []);
         eventBridge.emit('data-received', res.data || []);
         const latency = Date.now() - now;
         const latency = Date.now() - now;
-        const results = resultGetter ? resultGetter(res.data) : res.data;
+        const { queryTransactions } = getState().explore[exploreId];
+        const results = resultGetter ? resultGetter(res.data, transaction, queryTransactions) : res.data;
         dispatch(queryTransactionSuccess(exploreId, transaction.id, results, latency, queries, datasourceId));
         dispatch(queryTransactionSuccess(exploreId, transaction.id, results, latency, queries, datasourceId));
       } catch (response) {
       } catch (response) {
         eventBridge.emit('data-error', response);
         eventBridge.emit('data-error', response);

public/app/types/explore.ts

@@ -4,13 +4,14 @@ import {
   RawTimeRange,
   RawTimeRange,
   TimeRange,
   TimeRange,
   DataQuery,
   DataQuery,
+  DataQueryResponseData,
   DataSourceSelectItem,
   DataSourceSelectItem,
   DataSourceApi,
   DataSourceApi,
   QueryHint,
   QueryHint,
   ExploreStartPageProps,
   ExploreStartPageProps,
 } from '@grafana/ui';
 } from '@grafana/ui';
 
 
-import { Emitter } from 'app/core/core';
+import { Emitter, TimeSeries } from 'app/core/core';
 import { LogsModel, LogsDedupStrategy, LogLevel } from 'app/core/logs_model';
 import { LogsModel, LogsDedupStrategy, LogLevel } from 'app/core/logs_model';
 import TableModel from 'app/core/table_model';
 import TableModel from 'app/core/table_model';
 
 
@@ -322,6 +323,12 @@ export interface QueryTransaction {
 
 
 export type RangeScanner = () => RawTimeRange;
 export type RangeScanner = () => RawTimeRange;
 
 
+export type ResultGetter = (
+  result: DataQueryResponseData,
+  transaction: QueryTransaction,
+  allTransactions: QueryTransaction[]
+) => TimeSeries;
+
 export interface TextMatch {
 export interface TextMatch {
   text: string;
   text: string;
   start: number;
   start: number;