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, minimize: isProductionBuild,
minimizer: 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({}), new OptimizeCSSAssetsPlugin({}),
] ]
: [], : [],

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

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

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

@ -122,7 +122,7 @@ function hslToHex(color: any) {
export function getTextColorForBackground(color: string) { export function getTextColorForBackground(color: string) {
const b = tinycolor(color).getBrightness(); 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); export let sortedColors = sortColorsByHue(colors);