Explore: Configure explore series colours via field config (#20239)

packages/grafana-data/src/dataframe/processDataFrame.ts

@@ -63,10 +63,9 @@ function convertTimeSeriesToDataFrame(timeSeries: TimeSeries): DataFrame {
       type: FieldType.number,
       type: FieldType.number,
       config: {
       config: {
         unit: timeSeries.unit,
         unit: timeSeries.unit,
-        color: timeSeries.color,
       },
       },
       values: new ArrayVector<TimeSeriesValue>(),
       values: new ArrayVector<TimeSeriesValue>(),
-    } as Field<TimeSeriesValue, ArrayVector<TimeSeriesValue>>,
+    },
     {
     {
       name: 'Time',
       name: 'Time',
       type: FieldType.time,
       type: FieldType.time,
@@ -74,7 +73,7 @@ function convertTimeSeriesToDataFrame(timeSeries: TimeSeries): DataFrame {
         unit: 'dateTimeAsIso',
         unit: 'dateTimeAsIso',
       },
       },
       values: new ArrayVector<number>(),
       values: new ArrayVector<number>(),
-    } as Field<number, ArrayVector<number>>,
+    },
   ];
   ];
 
 
   for (const point of timeSeries.datapoints) {
   for (const point of timeSeries.datapoints) {

packages/grafana-data/src/types/data.ts

@@ -58,7 +58,6 @@ export interface TimeSeries extends QueryResultBase {
   target: string;
   target: string;
   datapoints: TimeSeriesPoints;
   datapoints: TimeSeriesPoints;
   unit?: string;
   unit?: string;
-  color?: string;
   tags?: Labels;
   tags?: Labels;
 }
 }
 
 

public/app/core/logs_model.ts

@@ -149,13 +149,18 @@ export function makeSeriesForLogs(rows: LogRowModel[], intervalMs: number, timeZ
     });
     });
 
 
     const timeField = data.fields[1];
     const timeField = data.fields[1];
-
     timeField.display = getDisplayProcessor({
     timeField.display = getDisplayProcessor({
       config: timeField.config,
       config: timeField.config,
       type: timeField.type,
       type: timeField.type,
       isUtc: timeZone === 'utc',
       isUtc: timeZone === 'utc',
     });
     });
 
 
+    const valueField = data.fields[0];
+    valueField.config = {
+      ...valueField.config,
+      color: series.color,
+    };
+
     const graphSeries: GraphSeriesXY = {
     const graphSeries: GraphSeriesXY = {
       color: series.color,
       color: series.color,
       label: series.alias,
       label: series.alias,
@@ -168,7 +173,7 @@ export function makeSeriesForLogs(rows: LogRowModel[], intervalMs: number, timeZ
       },
       },
       seriesIndex: i,
       seriesIndex: i,
       timeField,
       timeField,
-      valueField: data.fields[0],
+      valueField,
       // for now setting the time step to be 0,
       // for now setting the time step to be 0,
       // and handle the bar width by setting lineWidth instead of barWidth in flot options
       // and handle the bar width by setting lineWidth instead of barWidth in flot options
       timeStep: 0,
       timeStep: 0,
@@ -197,7 +202,6 @@ export function dataFrameToLogsModel(dataFrame: DataFrame[], intervalMs: number,
       // Create metrics from logs
       // Create metrics from logs
       logsModel.series = makeSeriesForLogs(logsModel.rows, intervalMs, timeZone);
       logsModel.series = makeSeriesForLogs(logsModel.rows, intervalMs, timeZone);
     } else {
     } else {
-      // We got metrics in the dataFrame so process those
       logsModel.series = getGraphSeriesModel(
       logsModel.series = getGraphSeriesModel(
         metricSeries,
         metricSeries,
         timeZone,
         timeZone,

public/app/plugins/panel/graph2/getGraphSeriesModel.ts

@@ -74,10 +74,16 @@ export const getGraphSeriesModel = (
           });
           });
         }
         }
 
 
-        const seriesColor =
-          seriesOptions[field.name] && seriesOptions[field.name].color
-            ? getColorFromHexRgbOrName(seriesOptions[field.name].color)
-            : colors[graphs.length % colors.length];
+        let seriesColor;
+        if (seriesOptions[field.name] && seriesOptions[field.name].color) {
+          // Case when panel has settings provided via SeriesOptions, i.e. graph panel
+          seriesColor = getColorFromHexRgbOrName(seriesOptions[field.name].color);
+        } else if (field.config && field.config.color) {
+          // Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs)
+          seriesColor = field.config.color;
+        } else {
+          seriesColor = colors[graphs.length % colors.length];
+        }
 
 
         field.config = fieldOptions
         field.config = fieldOptions
           ? {
           ? {
@@ -86,7 +92,7 @@ export const getGraphSeriesModel = (
               decimals: fieldOptions.defaults.decimals,
               decimals: fieldOptions.defaults.decimals,
               color: seriesColor,
               color: seriesColor,
             }
             }
-          : { ...field.config };
+          : { ...field.config, color: seriesColor };
 
 
         field.display = getDisplayProcessor({ config: { ...field.config }, type: field.type });
         field.display = getDisplayProcessor({ config: { ...field.config }, type: field.type });