diff --git a/public/app/plugins/panel/graph/specs/time_region_manager.test.ts b/public/app/plugins/panel/graph/specs/time_region_manager.test.ts index fc0b86d1b68..691247a0f75 100644 --- a/public/app/plugins/panel/graph/specs/time_region_manager.test.ts +++ b/public/app/plugins/panel/graph/specs/time_region_manager.test.ts @@ -43,6 +43,25 @@ describe('TimeRegionManager', () => { }); } + describe('When colors missing in config', () => { + plotOptionsScenario('should not throw an error when fillColor is undefined', ctx => { + const regions = [ + { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, lineColor: '#ffffff', colorMode: 'custom' }, + ]; + const from = moment('2018-01-01T00:00:00+01:00'); + const to = moment('2018-01-01T23:59:00+01:00'); + expect(() => ctx.setup(regions, from, to)).not.toThrow(); + }); + plotOptionsScenario('should not throw an error when lineColor is undefined', ctx => { + const regions = [ + { fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, fillColor: '#ffffff', line: true, colorMode: 'custom' }, + ]; + const from = moment('2018-01-01T00:00:00+01:00'); + const to = moment('2018-01-01T23:59:00+01:00'); + expect(() => ctx.setup(regions, from, to)).not.toThrow(); + }); + }); + describe('When creating plot markings using local time', () => { plotOptionsScenario('for day of week region', ctx => { const regions = [{ fromDayOfWeek: 1, toDayOfWeek: 1, fill: true, line: true, colorMode: 'red' }]; diff --git a/public/app/plugins/panel/graph/time_region_manager.ts b/public/app/plugins/panel/graph/time_region_manager.ts index be5de722fe2..2917583ff36 100644 --- a/public/app/plugins/panel/graph/time_region_manager.ts +++ b/public/app/plugins/panel/graph/time_region_manager.ts @@ -50,8 +50,8 @@ function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition { if (timeRegion.colorMode === 'custom') { return { - fill: getColorFromHexRgbOrName(timeRegion.fillColor, theme), - line: getColorFromHexRgbOrName(timeRegion.lineColor, theme), + fill: timeRegion.fill && timeRegion.fillColor ? getColorFromHexRgbOrName(timeRegion.fillColor, theme) : null, + line: timeRegion.line && timeRegion.lineColor ? getColorFromHexRgbOrName(timeRegion.lineColor, theme) : null, }; } @@ -62,8 +62,8 @@ function getColor(timeRegion, theme: GrafanaTheme): TimeRegionColorDefinition { } return { - fill: getColorFromHexRgbOrName(colorMode.color.fill, theme), - line: getColorFromHexRgbOrName(colorMode.color.line, theme), + fill: timeRegion.fill ? getColorFromHexRgbOrName(colorMode.color.fill, theme) : null, + line: timeRegion.fill ? getColorFromHexRgbOrName(colorMode.color.line, theme) : null, }; }