fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
133 lines
3 KiB
JavaScript
133 lines
3 KiB
JavaScript
import React from 'react';
|
|
import { numberWithCommas } from 'App/utils';
|
|
|
|
const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
|
|
const colors = [
|
|
'#6774E2',
|
|
'#929ACD',
|
|
'#3EAAAF',
|
|
'#565D97',
|
|
'#8F9F9F',
|
|
'#376F72',
|
|
];
|
|
const colorsx = [
|
|
'#256669',
|
|
'#38999e',
|
|
'#3eaaaf',
|
|
'#51b3b7',
|
|
'#78c4c7',
|
|
'#9fd5d7',
|
|
'#c5e6e7',
|
|
].reverse();
|
|
const compareColors = ['#192EDB', '#6272FF', '#808DFF', '#B3BBFF', '#C9CFFF'];
|
|
const compareColorsx = [
|
|
'#222F99',
|
|
'#2E3ECC',
|
|
'#394EFF',
|
|
'#6171FF',
|
|
'#8895FF',
|
|
'#B0B8FF',
|
|
'#D7DCFF',
|
|
].reverse();
|
|
const customMetricColors = ['#394EFF', '#3EAAAF', '#565D97'];
|
|
const colorsPie = colors.concat(['#DDDDDD']);
|
|
const safeColors = [
|
|
'#394EFF',
|
|
'#3EAAAF',
|
|
'#9276da',
|
|
'#ceba64',
|
|
'#bc6f9d',
|
|
'#966fbc',
|
|
'#64ce86',
|
|
'#e06da3',
|
|
'#6dabe0',
|
|
];
|
|
|
|
const countView = (count) => {
|
|
const isMoreThanK = count >= 1000;
|
|
return numberWithCommas(isMoreThanK ? `${Math.trunc(count / 1000)}k` : count);
|
|
};
|
|
|
|
export default {
|
|
customMetricColors,
|
|
colors,
|
|
colorsTeal,
|
|
colorsPie,
|
|
colorsx,
|
|
compareColors,
|
|
compareColorsx,
|
|
safeColors,
|
|
lineColor: '#2A7B7F',
|
|
lineColorCompare: '#394EFF',
|
|
strokeColor: compareColors[0],
|
|
xaxis: {
|
|
axisLine: { stroke: '#CCCCCC' },
|
|
interval: 0,
|
|
dataKey: 'time',
|
|
tick: { fill: '#000000', fontSize: 9 },
|
|
tickLine: { stroke: '#CCCCCC' },
|
|
strokeWidth: 0.5,
|
|
},
|
|
yaxis: {
|
|
axisLine: { stroke: '#CCCCCC' },
|
|
tick: { fill: '#000000', fontSize: 9 },
|
|
tickLine: { stroke: '#CCCCCC' },
|
|
},
|
|
axisLabelLeft: {
|
|
angle: -90,
|
|
fill: '#999999',
|
|
offset: 10,
|
|
style: { textAnchor: 'middle' },
|
|
position: 'insideLeft',
|
|
fontSize: 11,
|
|
},
|
|
tickFormatter: (val) => `${countView(val)}`,
|
|
tickFormatterBytes: (val) => Math.round(val / 1024 / 1024),
|
|
chartMargins: {
|
|
left: 0,
|
|
right: 20,
|
|
top: 10,
|
|
bottom: 5,
|
|
},
|
|
tooltip: {
|
|
wrapperStyle: {
|
|
zIndex: 999,
|
|
},
|
|
contentStyle: {
|
|
padding: '5px',
|
|
background: 'white',
|
|
border: '1px solid #DDD',
|
|
borderRadius: '3px',
|
|
lineHeight: '1.25rem',
|
|
color: '#888',
|
|
fontSize: '10px',
|
|
},
|
|
labelStyle: {},
|
|
formatter: (value, name, { unit }) => {
|
|
if (unit && unit.trim() === 'mb') {
|
|
return numberWithCommas(Math.round(value / 1024 / 1024));
|
|
}
|
|
return numberWithCommas(Math.round(value));
|
|
},
|
|
itemStyle: {
|
|
lineHeight: '0.75rem',
|
|
color: '#000',
|
|
fontSize: '12px',
|
|
},
|
|
cursor: {
|
|
fill: '#eee',
|
|
},
|
|
},
|
|
gradientDef: () => (
|
|
<defs>
|
|
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={compareColors[2]} stopOpacity={0.5} />
|
|
<stop offset="95%" stopColor={compareColors[2]} stopOpacity={0.2} />
|
|
</linearGradient>
|
|
<linearGradient id="colorCountCompare" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="5%" stopColor={compareColors[4]} stopOpacity={0.9} />
|
|
<stop offset="95%" stopColor={compareColors[4]} stopOpacity={0.2} />
|
|
</linearGradient>
|
|
</defs>
|
|
),
|
|
};
|