From a174ad4c9a590a9ce8c04ef7715f89412dbe9e63 Mon Sep 17 00:00:00 2001 From: Alexander Zobnin Date: Mon, 9 Oct 2017 14:54:14 +0300 Subject: [PATCH] Unified Color picker fixes (#9466) * colorpicker: fix opening error when color is undefined * colorpicker: replace spectrum picker by new color picker * colorpicker: remove old spectrum picker directive * annotations: use tinycolor for working with region colors --- package.json | 3 +- .../components/colorpicker/ColorPicker.tsx | 5 ++- .../colorpicker/ColorPickerPopover.tsx | 8 ++-- public/app/core/core.ts | 1 - public/app/core/directives/spectrum_picker.js | 41 ------------------- public/app/core/utils/colors.ts | 5 +-- .../app/features/annotations/editor_ctrl.ts | 6 +++ .../app/features/annotations/event_manager.ts | 36 ++++------------ .../features/annotations/partials/editor.html | 6 ++- .../plugins/panel/graph/thresholds_form.ts | 18 +++++++- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 7 ++++ .../heatmap/partials/display_editor.html | 2 +- .../app/plugins/panel/singlestat/editor.html | 14 ++----- public/app/plugins/panel/singlestat/module.ts | 13 ++++++ .../plugins/panel/table/column_options.html | 6 +-- .../app/plugins/panel/table/column_options.ts | 9 ++++ 16 files changed, 84 insertions(+), 96 deletions(-) delete mode 100644 public/app/core/directives/spectrum_picker.js diff --git a/package.json b/package.json index bb4c64b3789..bffbea9f547 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "remarkable": "^1.7.1", "rxjs": "^5.4.3", "tether": "^1.4.0", - "tether-drop": "https://github.com/torkelo/drop" + "tether-drop": "https://github.com/torkelo/drop", + "tinycolor2": "^1.4.1" } } diff --git a/public/app/core/components/colorpicker/ColorPicker.tsx b/public/app/core/components/colorpicker/ColorPicker.tsx index 8ef51ce0be7..baf3f87cf81 100644 --- a/public/app/core/components/colorpicker/ColorPicker.tsx +++ b/public/app/core/components/colorpicker/ColorPicker.tsx @@ -77,5 +77,8 @@ export class ColorPicker extends React.Component { } coreModule.directive('colorPicker', function (reactDirective) { - return reactDirective(ColorPicker, ['color', 'onChange']); + return reactDirective(ColorPicker, [ + 'color', + ['onChange', { watchDepth: 'reference', wrapApply: true }] + ]); }); diff --git a/public/app/core/components/colorpicker/ColorPickerPopover.tsx b/public/app/core/components/colorpicker/ColorPickerPopover.tsx index 5c1d90d6046..09b6b8ec2c2 100644 --- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx +++ b/public/app/core/components/colorpicker/ColorPickerPopover.tsx @@ -1,11 +1,11 @@ import React from 'react'; import $ from 'jquery'; +import tinycolor from 'tinycolor2'; import coreModule from 'app/core/core_module'; import { GfColorPalette } from './ColorPalette'; import { GfSpectrumPicker } from './SpectrumPicker'; -// Spectrum picker uses TinyColor and loads it as a global variable, so we can use it here also -declare var tinycolor; +const DEFAULT_COLOR = '#000000'; export interface IProps { color: string; @@ -19,8 +19,8 @@ export class ColorPickerPopover extends React.Component { super(props); this.state = { tab: 'palette', - color: this.props.color, - colorString: this.props.color + color: this.props.color || DEFAULT_COLOR, + colorString: this.props.color || DEFAULT_COLOR }; } diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 95b2e20aab6..3b4fdd68611 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -5,7 +5,6 @@ import "./directives/dropdown_typeahead"; import "./directives/metric_segment"; import "./directives/misc"; import "./directives/ng_model_on_blur"; -import "./directives/spectrum_picker"; import "./directives/tags"; import "./directives/value_select_dropdown"; import "./directives/rebuild_on_change"; diff --git a/public/app/core/directives/spectrum_picker.js b/public/app/core/directives/spectrum_picker.js deleted file mode 100644 index 612188b71d9..00000000000 --- a/public/app/core/directives/spectrum_picker.js +++ /dev/null @@ -1,41 +0,0 @@ -define([ - 'angular', - '../core_module', - 'vendor/spectrum', -], -function (angular, coreModule) { - 'use strict'; - - coreModule.default.directive('spectrumPicker', function() { - return { - restrict: 'E', - require: 'ngModel', - scope: false, - replace: true, - template: "", - link: function(scope, element, attrs, ngModel) { - var input = element.find('input'); - var options = angular.extend({ - showAlpha: true, - showButtons: false, - color: ngModel.$viewValue, - change: function(color) { - scope.$apply(function() { - ngModel.$setViewValue(color.toRgbString()); - }); - } - }, scope.$eval(attrs.options)); - - ngModel.$render = function() { - input.spectrum('set', ngModel.$viewValue || ''); - }; - - input.spectrum(options); - - scope.$on('$destroy', function() { - input.spectrum('destroy'); - }); - } - }; - }); -}); diff --git a/public/app/core/utils/colors.ts b/public/app/core/utils/colors.ts index 96ce5df9fcd..a38c92a6476 100644 --- a/public/app/core/utils/colors.ts +++ b/public/app/core/utils/colors.ts @@ -1,7 +1,5 @@ import _ from 'lodash'; - -// Spectrum picker uses TinyColor and loads it as a global variable, so we can use it here also -declare var tinycolor; +import tinycolor from 'tinycolor2'; export const PALETTE_ROWS = 4; export const PALETTE_COLUMNS = 14; @@ -9,6 +7,7 @@ export const DEFAULT_ANNOTATION_COLOR = 'rgba(0, 211, 255, 1)'; export const OK_COLOR = "rgba(11, 237, 50, 1)"; export const ALERTING_COLOR = "rgba(237, 46, 24, 1)"; export const NO_DATA_COLOR = "rgba(150, 150, 150, 1)"; +export const REGION_FILL_ALPHA = 0.09; let colors = [ "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts index fafb51aea08..a52e241ce35 100644 --- a/public/app/features/annotations/editor_ctrl.ts +++ b/public/app/features/annotations/editor_ctrl.ts @@ -33,6 +33,8 @@ export class AnnotationsEditorCtrl { this.datasources = datasourceSrv.getAnnotationSources(); this.annotations = $scope.dashboard.annotations.list; this.reset(); + + this.onColorChange = this.onColorChange.bind(this); } datasourceChanged() { @@ -83,6 +85,10 @@ export class AnnotationsEditorCtrl { this.$scope.broadcastRefresh(); } + onColorChange(newColor) { + this.currentAnnotation.iconColor = newColor; + } + annotationEnabledChange() { this.$scope.broadcastRefresh(); } diff --git a/public/app/features/annotations/event_manager.ts b/public/app/features/annotations/event_manager.ts index 5f4534bacb1..e8ddd2d95d6 100644 --- a/public/app/features/annotations/event_manager.ts +++ b/public/app/features/annotations/event_manager.ts @@ -1,8 +1,9 @@ import _ from 'lodash'; import moment from 'moment'; +import tinycolor from 'tinycolor2'; import {MetricsPanelCtrl} from 'app/plugins/sdk'; import {AnnotationEvent} from './event'; -import {OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, DEFAULT_ANNOTATION_COLOR} from 'app/core/utils/colors'; +import {OK_COLOR, ALERTING_COLOR, NO_DATA_COLOR, DEFAULT_ANNOTATION_COLOR, REGION_FILL_ALPHA} from 'app/core/utils/colors'; export class EventManager { event: AnnotationEvent; @@ -151,36 +152,17 @@ function addRegionMarking(regions, flotOptions) { fillColor = defaultColor; } - // Convert #FFFFFF to rgb(255, 255, 255) - // because panels with alerting use this format - let hexPattern = /^#[\da-fA-f]{3,6}/; - if (hexPattern.test(fillColor)) { - fillColor = convertToRGB(fillColor); - } - - fillColor = addAlphaToRGB(fillColor, 0.09); + fillColor = addAlphaToRGB(fillColor, REGION_FILL_ALPHA); markings.push({xaxis: {from: region.min, to: region.timeEnd}, color: fillColor}); }); } -function addAlphaToRGB(rgb: string, alpha: number): string { - let rgbPattern = /^rgb\(/; - if (rgbPattern.test(rgb)) { - return rgb.replace(')', `, ${alpha})`).replace('rgb', 'rgba'); +function addAlphaToRGB(colorString: string, alpha: number): string { + let color = tinycolor(colorString); + if (color.isValid()) { + color.setAlpha(alpha); + return color.toRgbString(); } else { - return rgb.replace(/[\d\.]+\)/, `${alpha})`); - } -} - -function convertToRGB(hex: string): string { - let hexPattern = /#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})/g; - let match = hexPattern.exec(hex); - if (match) { - let rgb = _.map(match.slice(1), hex_val => { - return parseInt(hex_val, 16); - }); - return 'rgb(' + rgb.join(',') + ')'; - } else { - return ''; + return colorString; } } diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index e4d9c2c413f..4c0b8f7b127 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -119,8 +119,10 @@ label-class="width-7">
- - + + + +
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index acf9c4e0030..c9f6a69c6b2 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -37,6 +37,20 @@ export class ThresholdFormCtrl { render() { this.panelCtrl.render(); } + + onFillColorChange(index) { + return (newColor) => { + this.panel.thresholds[index].fillColor = newColor; + this.render(); + }; + } + + onLineColorChange(index) { + return (newColor) => { + this.panel.thresholds[index].lineColor = newColor; + this.render(); + }; + } } var template = ` @@ -77,7 +91,7 @@ var template = `
- +
@@ -87,7 +101,7 @@ var template = `
- +
diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index b564339673f..10a5e1b3d4e 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -119,6 +119,8 @@ export class HeatmapCtrl extends MetricsPanelCtrl { this.events.on('data-error', this.onDataError.bind(this)); this.events.on('data-snapshot-load', this.onDataReceived.bind(this)); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); + + this.onCardColorChange = this.onCardColorChange.bind(this); } onInitEditMode() { @@ -236,6 +238,11 @@ export class HeatmapCtrl extends MetricsPanelCtrl { this.render(); } + onCardColorChange(newColor) { + this.panel.color.cardColor = newColor; + this.render(); + } + seriesHandler(seriesData) { let series = new TimeSeries({ datapoints: seriesData.datapoints, diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html index f161bf6cab4..929cf1fe7d4 100644 --- a/public/app/plugins/panel/heatmap/partials/display_editor.html +++ b/public/app/plugins/panel/heatmap/partials/display_editor.html @@ -12,7 +12,7 @@
- +
diff --git a/public/app/plugins/panel/singlestat/editor.html b/public/app/plugins/panel/singlestat/editor.html index 1981b4357f8..f00d909d39c 100644 --- a/public/app/plugins/panel/singlestat/editor.html +++ b/public/app/plugins/panel/singlestat/editor.html @@ -68,14 +68,8 @@
- - - - - - - - + + @@ -93,13 +87,13 @@
- +
- +
diff --git a/public/app/plugins/panel/singlestat/module.ts b/public/app/plugins/panel/singlestat/module.ts index e6e8858d6e8..92d03562557 100644 --- a/public/app/plugins/panel/singlestat/module.ts +++ b/public/app/plugins/panel/singlestat/module.ts @@ -92,6 +92,9 @@ class SingleStatCtrl extends MetricsPanelCtrl { this.events.on('data-error', this.onDataError.bind(this)); this.events.on('data-snapshot-load', this.onDataReceived.bind(this)); this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); + + this.onSparklineColorChange = this.onSparklineColorChange.bind(this); + this.onSparklineFillChange = this.onSparklineFillChange.bind(this); } onInitEditMode() { @@ -221,6 +224,16 @@ class SingleStatCtrl extends MetricsPanelCtrl { }; } + onSparklineColorChange(newColor) { + this.panel.sparkline.lineColor = newColor; + this.render(); + } + + onSparklineFillChange(newColor) { + this.panel.sparkline.fillColor = newColor; + this.render(); + } + getDecimalsForValue(value) { if (_.isNumber(this.panel.decimals)) { return {decimals: this.panel.decimals, scaledDecimals: null}; diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html index 3bd8ec24841..996f10960f9 100644 --- a/public/app/plugins/panel/table/column_options.html +++ b/public/app/plugins/panel/table/column_options.html @@ -80,13 +80,13 @@
- + - + - +
Invert diff --git a/public/app/plugins/panel/table/column_options.ts b/public/app/plugins/panel/table/column_options.ts index c95382804c3..23035293080 100644 --- a/public/app/plugins/panel/table/column_options.ts +++ b/public/app/plugins/panel/table/column_options.ts @@ -53,6 +53,8 @@ export class ColumnOptionsCtrl { return col.text; }); }; + + this.onColorChange = this.onColorChange.bind(this); } render() { @@ -104,6 +106,13 @@ export class ColumnOptionsCtrl { ref[2] = copy; this.panelCtrl.render(); } + + onColorChange(styleIndex, colorIndex) { + return (newColor) => { + this.panel.styles[styleIndex].colors[colorIndex] = newColor; + this.render(); + }; + } } /** @ngInject */