IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing (#28641)

Browse Source 
* StatPanel: Fixed value being under graph and reduced likley hood for white and dark value text mixing

* Updated snapshot

* Updated storybook config
This commit is contained in:
Torkel Ödegaard 2020-10-29 14:08:09 +01:00 committed by GitHub
parent 1e51d33d85
commit b46ac2891d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/.storybook/webpack.config.js
View File

@ -103,7 +103,7 @@ module.exports = ({ config, mode }) => {
minimize: isProductionBuild,
minimizer: isProductionBuild
? [
new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco/ }),
new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco|bizcharts/ }),
new OptimizeCSSAssetsPlugin({}),
]
: [],

21
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
View File

@ -1,6 +1,7 @@
// Libraries
import React, { CSSProperties, Suspense } from 'react';
import React, { CSSProperties } from 'react';
import tinycolor from 'tinycolor2';
import { Chart, Geom } from 'bizcharts';
// Utils
import { formattedValueToString, DisplayValue, getColorForTheme } from '@grafana/data';
@ -13,16 +14,6 @@ import { getTextColorForBackground } from '../../utils';
const LINE_HEIGHT = 1.2;
const MAX_TITLE_SIZE = 30;
const Chart = React.lazy(async () => {
const { Chart } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
return { default: Chart };
});
const Geom = React.lazy(async () => {
const { Geom } = await import(/* webpackChunkName: "bizcharts" */ 'bizcharts');
return { default: Geom };
});
export abstract class BigValueLayout {
titleFontSize: number;
valueFontSize: number;
@ -72,6 +63,8 @@ export abstract class BigValueLayout {
fontSize: this.valueFontSize,
fontWeight: 500,
lineHeight: LINE_HEIGHT,
position: 'relative',
zIndex: 1,
};
switch (this.props.colorMode) {
@ -175,7 +168,6 @@ export abstract class BigValueLayout {
}
return (
<Suspense fallback={<div>Loading chart...</div>}>
<Chart
height={this.chartHeight}
width={this.chartWidth}
@ -187,7 +179,6 @@ export abstract class BigValueLayout {
>
{this.renderGeom()}
</Chart>
</Suspense>
);
}
@ -220,10 +211,10 @@ export abstract class BigValueLayout {
lineStyle.stroke = lineColor;
return (
<Suspense fallback={<div>Loading chart...</div>}>
<>
<Geom type="area" position="time*value" size={0} color={fillColor} style={lineStyle} shape="smooth" />
<Geom type="line" position="time*value" size={1} color={lineColor} style={lineStyle} shape="smooth" />
</Suspense>
</>
);
}

4
packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
View File

@ -30,10 +30,12 @@ exports[`BigValue Render with basic options should render 1`] = `
<FormattedDisplayValue
style={
Object {
"color": "#202226",
"color": "#f7f8fa",
"fontSize": 230,
"fontWeight": 500,
"lineHeight": 1.2,
"position": "relative",
"zIndex": 1,
}
}
value={

2
packages/grafana-ui/src/utils/colors.ts
View File

@ -122,7 +122,7 @@ function hslToHex(color: any) {
export function getTextColorForBackground(color: string) {
const b = tinycolor(color).getBrightness();
return b > 150 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
return b > 180 ? lightTheme.colors.textStrong : darkTheme.colors.textStrong;
}
export let sortedColors = sortColorsByHue(colors);