fe4bbcda6d
* Various improvements Cards, OmniSearch and Cards Listing * Improved cards listing page * Various improvements in product analytics * Charts UI improvements --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
95 lines
3.2 KiB
JavaScript
95 lines
3.2 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>
|
|
)
|
|
};
|