public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated table tests to new behavior for colors (values are always rendered as hex/rgb)

Browse Source
This commit is contained in:
Dominik Prokop
2019-01-22 09:11:30 +01:00
parent 84caf0bc9d
commit ed48ecfe1d
6 changed files with 24 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx
+3 -1
View File
@@ -4,6 +4,7 @@ import Popper, { RenderPopperArrowFn } from '../Tooltip/Popper';
import { ColorPickerPopover } from './ColorPickerPopover';
import { Themeable, GrafanaTheme } from '../../types';
import { getColorFromHexRgbOrName } from '../../utils/colorsPalette';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
export interface ColorPickerProps extends Themeable {
color: string;
@@ -78,4 +79,5 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
};
};
export default colorPickerFactory(ColorPickerPopover, 'ColorPicker');
export const ColorPicker = colorPickerFactory(ColorPickerPopover, 'ColorPicker');
export const SeriesColorPicker = colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker');
packages/grafana-ui/src/components/ColorPicker/SeriesColorPicker.tsx
-11
View File
@@ -1,11 +0,0 @@
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
import { ColorPickerProps, colorPickerFactory } from './ColorPicker';
export interface SeriesColorPickerProps extends ColorPickerProps {
yaxis?: number;
optionalClass?: string;
onToggleAxis?: () => void;
children: JSX.Element;
}
export default colorPickerFactory(SeriesColorPickerPopover ,'SeriesColorPicker')
packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx
+1 -3
View File
@@ -1,8 +1,6 @@
import React, { PureComponent } from 'react';
// import tinycolor, { ColorInput } from 'tinycolor2';
import { Threshold } from '../../types';
import ColorPicker from '../ColorPicker/ColorPicker';
import { ColorPicker } from '../ColorPicker/ColorPicker';
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
import { colors } from '../../utils';
packages/grafana-ui/src/components/index.ts
+1 -2
View File
@@ -14,9 +14,8 @@ export { FormLabel } from './FormLabel/FormLabel';
export { FormField } from './FormField/FormField';
export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
export { default as ColorPicker } from './ColorPicker/ColorPicker';
export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
export { SeriesColorPickerPopover } from './ColorPicker/SeriesColorPickerPopover';
export { default as SeriesColorPicker } from './ColorPicker/SeriesColorPicker';
export { ThresholdsEditor } from './ThresholdsEditor/ThresholdsEditor';
export { Graph } from './Graph/Graph';
export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';
public/app/plugins/panel/heatmap/heatmap_ctrl.ts
-1
View File
@@ -304,7 +304,6 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
}
onCardColorChange(newColor) {
console.log(newColor)
this.panel.color.cardColor = newColor;
this.render();
}
public/app/plugins/panel/table/specs/renderer.test.ts
+19 -18
View File
@@ -1,6 +1,7 @@
import _ from 'lodash';
import TableModel from 'app/core/table_model';
import { TableRenderer } from '../renderer';
import { SemiDarkOrange } from '@grafana/ui/src/utils/colorsPalette';
describe('when rendering table', () => {
describe('given 13 columns', () => {
@@ -47,7 +48,7 @@ describe('when rendering table', () => {
decimals: 1,
colorMode: 'value',
thresholds: [50, 80],
colors: ['green', 'orange', 'red'],
colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
},
{
pattern: 'String',
@@ -138,7 +139,7 @@ describe('when rendering table', () => {
],
colorMode: 'value',
thresholds: [1, 2],
colors: ['green', 'orange', 'red'],
colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
},
{
pattern: 'RangeMappingColored',
@@ -158,7 +159,7 @@ describe('when rendering table', () => {
],
colorMode: 'value',
thresholds: [2, 5],
colors: ['green', 'orange', 'red'],
colors: ['#00ff00', SemiDarkOrange.name, 'rgb(1,0,0)'],
},
],
};
@@ -226,19 +227,19 @@ describe('when rendering table', () => {
expect(html).toBe('<td>asd</td>');
});
it('colored cell should have style', () => {
it('colored cell should have style (handles HEX color values)', () => {
const html = renderer.renderCell(2, 0, 40);
expect(html).toBe('<td style="color:green">40.0</td>');
expect(html).toBe('<td style="color:#00ff00">40.0</td>');
});
it('colored cell should have style', () => {
it('colored cell should have style (handles named color values', () => {
const html = renderer.renderCell(2, 0, 55);
expect(html).toBe('<td style="color:orange">55.0</td>');
expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">55.0</td>`);
});
it('colored cell should have style', () => {
it('colored cell should have style handles(rgb color values)', () => {
const html = renderer.renderCell(2, 0, 85);
expect(html).toBe('<td style="color:red">85.0</td>');
expect(html).toBe('<td style="color:rgb(1,0,0)">85.0</td>');
});
it('unformated undefined should be rendered as string', () => {
@@ -333,47 +334,47 @@ describe('when rendering table', () => {
it('value should be mapped to text and colored cell should have style', () => {
const html = renderer.renderCell(11, 0, 1);
expect(html).toBe('<td style="color:orange">on</td>');
expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
});
it('value should be mapped to text and colored cell should have style', () => {
const html = renderer.renderCell(11, 0, '1');
expect(html).toBe('<td style="color:orange">on</td>');
expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">on</td>`);
});
it('value should be mapped to text and colored cell should have style', () => {
const html = renderer.renderCell(11, 0, 0);
expect(html).toBe('<td style="color:green">off</td>');
expect(html).toBe('<td style="color:#00ff00">off</td>');
});
it('value should be mapped to text and colored cell should have style', () => {
const html = renderer.renderCell(11, 0, '0');
expect(html).toBe('<td style="color:green">off</td>');
expect(html).toBe('<td style="color:#00ff00">off</td>');
});
it('value should be mapped to text and colored cell should have style', () => {
const html = renderer.renderCell(11, 0, '2.1');
expect(html).toBe('<td style="color:red">2.1</td>');
expect(html).toBe('<td style="color:rgb(1,0,0)">2.1</td>');
});
it('value should be mapped to text (range) and colored cell should have style', () => {
const html = renderer.renderCell(12, 0, 0);
expect(html).toBe('<td style="color:green">0</td>');
expect(html).toBe('<td style="color:#00ff00">0</td>');
});
it('value should be mapped to text (range) and colored cell should have style', () => {
const html = renderer.renderCell(12, 0, 1);
expect(html).toBe('<td style="color:green">on</td>');
expect(html).toBe('<td style="color:#00ff00">on</td>');
});
it('value should be mapped to text (range) and colored cell should have style', () => {
const html = renderer.renderCell(12, 0, 4);
expect(html).toBe('<td style="color:orange">off</td>');
expect(html).toBe(`<td style="color:${SemiDarkOrange.variants.dark}">off</td>`);
});
it('value should be mapped to text (range) and colored cell should have style', () => {
const html = renderer.renderCell(12, 0, '7.1');
expect(html).toBe('<td style="color:red">7.1</td>');
expect(html).toBe('<td style="color:rgb(1,0,0)">7.1</td>');
});
});
});