Skip to content

Commit

Permalink
use slightly shaded colors by default
Browse files Browse the repository at this point in the history
  • Loading branch information
@drewdaemon
drewdaemon committed Jul 26, 2022
1 parent dc19403 commit 75c4632
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 24 deletions.
45 changes: 23 additions & 22 deletions src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import numeral from '@elastic/numeral';
import { HtmlAttributes } from 'csstype';
import { CustomPaletteState } from '@kbn/charts-plugin/common/expressions/palette/types';
import { DimensionsVisParam } from '../../common';
import { euiThemeVars } from '@kbn/ui-theme';

const mockDeserialize = jest.fn((params) => {
const converter =
Expand Down Expand Up @@ -241,7 +242,7 @@ describe('MetricVisComponent', function () {

expect(visConfig).toMatchInlineSnapshot(`
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": undefined,
"title": "Median products.base_price",
Expand All @@ -268,7 +269,7 @@ describe('MetricVisComponent', function () {

expect(visConfig).toMatchInlineSnapshot(`
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "subtitle",
"title": "Median products.base_price",
Expand Down Expand Up @@ -301,7 +302,7 @@ describe('MetricVisComponent', function () {

expect(visConfig).toMatchInlineSnapshot(`
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span>
secondary prefix
13.63
Expand Down Expand Up @@ -349,7 +350,7 @@ describe('MetricVisComponent', function () {

expect(configWithProgress).toMatchInlineSnapshot(`
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 28.984375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand Down Expand Up @@ -391,39 +392,39 @@ describe('MetricVisComponent', function () {
expect(visConfig).toMatchInlineSnapshot(`
Array [
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Friday",
"value": 28.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Wednesday",
"value": 28.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Saturday",
"value": 25.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Sunday",
"value": 25.784375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Thursday",
Expand Down Expand Up @@ -551,39 +552,39 @@ describe('MetricVisComponent', function () {
Array [
Array [
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Friday",
"value": 28.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Wednesday",
"value": 28.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Saturday",
"value": 25.984375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Sunday",
"value": 25.784375,
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Thursday",
Expand All @@ -593,7 +594,7 @@ describe('MetricVisComponent', function () {
],
Array [
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"extra": <span />,
"subtitle": "Median products.base_price",
"title": "Other",
Expand Down Expand Up @@ -633,7 +634,7 @@ describe('MetricVisComponent', function () {
Array [
Array [
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 28.984375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand All @@ -643,7 +644,7 @@ describe('MetricVisComponent', function () {
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 28.984375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand All @@ -653,7 +654,7 @@ describe('MetricVisComponent', function () {
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 25.984375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand All @@ -663,7 +664,7 @@ describe('MetricVisComponent', function () {
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 25.784375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand All @@ -673,7 +674,7 @@ describe('MetricVisComponent', function () {
"valueFormatter": [Function],
},
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 25.348011363636363,
"extra": <span />,
"progressBarDirection": "vertical",
Expand All @@ -685,7 +686,7 @@ describe('MetricVisComponent', function () {
],
Array [
Object {
"color": "#ffffff",
"color": "#f5f7fa",
"domainMax": 24.984375,
"extra": <span />,
"progressBarDirection": "vertical",
Expand Down Expand Up @@ -1068,7 +1069,7 @@ describe('MetricVisComponent', function () {

const [[datum]] = component.find(Metric).props().data!;

expect(datum!.color).toBe('#ffffff');
expect(datum!.color).toBe(euiThemeVars.euiColorLightestShade);
expect(mockGetColorForValue).not.toHaveBeenCalled();
});
});
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import {
import { getCurrencyCode } from './currency_codes';
import { getDataBoundsForPalette } from '../utils';

export const defaultColor = euiThemeVars.euiColorEmptyShade;
export const defaultColor = euiThemeVars.euiColorLightestShade;
const getBytesUnit = (value: number) => {
const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte'];
const abs = Math.abs(value);
Expand Down Expand Up @@ -322,7 +322,7 @@ export const MetricVis = ({
background: { color: 'transparent' },
metric: {
background: defaultColor,
barBackground: euiThemeVars.euiColorLightestShade,
barBackground: euiThemeVars.euiColorLightShade,
},
},
chartTheme,
Expand Down

0 comments on commit 75c4632

Please sign in to comment.