Skip to content

N
nexpie-grafana-theme
Commit a174ad4c by Alexander Zobnin Committed by Torkel Ödegaard
Options

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
parent 6ce990af
Showing with 84 additions and 96 deletions
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"
}
}
public/app/core/components/colorpicker/ColorPicker.tsx
......@@ -77,5 +77,8 @@ export class ColorPicker extends React.Component<IProps, any> {
}
coreModule.directive('colorPicker', function (reactDirective) {
return reactDirective(ColorPicker, ['color', 'onChange']);
return reactDirective(ColorPicker, [
'color',
['onChange', { watchDepth: 'reference', wrapApply: true }]
]);
});
public/app/core/components/colorpicker/ColorPickerPopover.tsx
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<IProps, any> {
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
};
}
......
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";
......
public/app/core/directives/spectrum_picker.js deleted 100644 → 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: "<span><input class='input-small' /></span>",
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');
});
}
};
});
});
public/app/core/utils/colors.ts
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",
......
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();
}
......
public/app/features/annotations/event_manager.ts
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');
} 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(',') + ')';
function addAlphaToRGB(colorString: string, alpha: number): string {
let color = tinycolor(colorString);
if (color.isValid()) {
color.setAlpha(alpha);
return color.toRgbString();
} else {
return '';
return colorString;
}
}
public/app/features/annotations/partials/editor.html
......@@ -119,8 +119,10 @@
label-class="width-7">
</gf-form-switch>
<div class="gf-form">
<label class="gf-form-label">Color</label>
<spectrum-picker class="gf-form-input width-3" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
<label class="gf-form-label width-9">Color</label>
<span class="gf-form-label">
<color-picker color="ctrl.currentAnnotation.iconColor" onChange="ctrl.onColorChange"></color-picker>
</span>
</div>
</div>
</div>
......
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 = `
<div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
<label class="gf-form-label">Fill color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="threshold.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
<color-picker color="threshold.fillColor" onChange="ctrl.onFillColorChange($index)"></color-picker>
</span>
</div>
......@@ -87,7 +101,7 @@ var template = `
<div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
<label class="gf-form-label">Line color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="threshold.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
<color-picker color="threshold.lineColor" onChange="ctrl.onLineColorChange($index)"></color-picker>
</span>
</div>
......
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,
......
public/app/plugins/panel/heatmap/partials/display_editor.html
......@@ -12,7 +12,7 @@
<div class="gf-form">
<label class="gf-form-label width-9">Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.color.cardColor" ng-change="ctrl.render()" ></spectrum-picker>
<color-picker color="ctrl.panel.color.cardColor" onChange="ctrl.onCardColorChange"></color-picker>
</span>
</div>
<div class="gf-form">
......
public/app/plugins/panel/singlestat/editor.html
......@@ -68,14 +68,8 @@
</div>
<div class="gf-form">
<label class="gf-form-label width-8">Colors</label>
<span class="gf-form-label">
<color-picker color="ctrl.panel.colors[0]" onChange="ctrl.onColorChange(0)"></color-picker>
</span>
<span class="gf-form-label">
<color-picker color="ctrl.panel.colors[1]" onChange="ctrl.onColorChange(1)"></color-picker>
</span>
<span class="gf-form-label">
<color-picker color="ctrl.panel.colors[2]" onChange="ctrl.onColorChange(2)"></color-picker>
<span class="gf-form-label" ng-repeat="color in ctrl.panel.colors track by $index">
<color-picker color="color" onChange="ctrl.onColorChange($index)"></color-picker>
</span>
<span class="gf-form-label">
<a ng-click="ctrl.invertColorOrder()">
......@@ -93,13 +87,13 @@
<div class="gf-form">
<label class="gf-form-label width-9">Line Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
<color-picker color="ctrl.panel.sparkline.lineColor" onChange="ctrl.onSparklineColorChange"></color-picker>
</span>
</div>
<div class="gf-form">
<label class="gf-form-label width-9">Fill Color</label>
<span class="gf-form-label">
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
<color-picker color="ctrl.panel.sparkline.fillColor" onChange="ctrl.onSparklineFillChange"></color-picker>
</span>
</div>
</div>
......
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};
......
public/app/plugins/panel/table/column_options.html
......@@ -80,13 +80,13 @@
<div class="gf-form">
<label class="gf-form-label width-8">Colors</label>
<span class="gf-form-label">
<spectrum-picker ng-model="style.colors[0]" ng-change="editor.render()"></spectrum-picker>
<color-picker color="style.colors[0]" onChange="editor.onColorChange($index, 0)"></color-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="style.colors[1]" ng-change="editor.render()"></spectrum-picker>
<color-picker color="style.colors[1]" onChange="editor.onColorChange($index, 1)"></color-picker>
</span>
<span class="gf-form-label">
<spectrum-picker ng-model="style.colors[2]" ng-change="editor.render()"></spectrum-picker>
<color-picker color="style.colors[2]" onChange="editor.onColorChange($index, 2)"></color-picker>
</span>
<div class="gf-form-label">
<a class="pointer" ng-click="editor.invertColorOrder($index)">Invert</a>
......
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 */
......
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