Commit d6bab53d by Torkel Ödegaard Committed by GitHub

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

Explore: Make sure line graphs get different colors
parents d8c22646 1994b18b
......@@ -3,9 +3,11 @@ import { PluginMeta } from './plugin';
import { TableData, TimeSeries } from './data';
export interface DataQueryResponse {
data: TimeSeries[] | [TableData] | any;
data: DataQueryResponseData;
}
export type DataQueryResponseData = TimeSeries[] | [TableData] | any;
export interface DataQuery {
/**
* A - Z
......
......@@ -20,6 +20,7 @@ import {
ResultType,
QueryIntervals,
QueryOptions,
ResultGetter,
} from 'app/types/explore';
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);
}
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 alias = seriesData.target;
const colorIndex = index % colors.length;
const colorIndex = (colorIndexOffset + index) % colors.length;
const color = colors[colorIndex];
const series = new TimeSeries({
......@@ -317,7 +331,7 @@ export function makeTimeSeriesList(dataList) {
return series;
});
}
};
/**
* Update the query history. Side-effect: store history in local storage
......
......@@ -597,7 +597,8 @@ function runQueriesForType(
const res = await datasourceInstance.query(transaction.options);
eventBridge.emit('data-received', res.data || []);
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));
} catch (response) {
eventBridge.emit('data-error', response);
......
......@@ -4,13 +4,14 @@ import {
RawTimeRange,
TimeRange,
DataQuery,
DataQueryResponseData,
DataSourceSelectItem,
DataSourceApi,
QueryHint,
ExploreStartPageProps,
} 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 TableModel from 'app/core/table_model';
......@@ -322,6 +323,12 @@ export interface QueryTransaction {
export type RangeScanner = () => RawTimeRange;
export type ResultGetter = (
result: DataQueryResponseData,
transaction: QueryTransaction,
allTransactions: QueryTransaction[]
) => TimeSeries;
export interface TextMatch {
text: string;
start: number;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment