openreplay/frontend/app/components/Dashboard/Widgets/common/Styles.js

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>
    )
};