watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-04 12:47:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Replaced color library.

Browse source
This commit is contained in:
Mike Cao 2022-01-14 00:39:27 -08:00
parent 7d2ab240e6
commit 6bfaa4d40c
6 changed files with 23 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/common/WorldMap.js
View file

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import tinycolor from 'tinycolor2';
import { colord } from 'colord';
import useTheme from 'hooks/useTheme';
import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
import styles from './WorldMap.module.css';
@ -35,9 +35,9 @@ function WorldMap({ data, className }) {
return colors.fillColor;
}
return tinycolor(colors.baseColor)[theme === 'light' ? 'lighten' : 'darken'](
40 * (1.0 - country.z / 100),
);
return colord(colors.baseColor)
[theme === 'light' ? 'lighten' : 'darken'](0.4 * (1.0 - country.z / 100))
.toHex();
}
function getOpacity(code) {

8
components/metrics/EventsChart.js
View file

@ -1,5 +1,5 @@
import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2';
import { colord } from 'colord';
import BarChart from './BarChart';
import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
@ -51,13 +51,13 @@ export default function EventsChart({ websiteId, className, token }) {
});
return Object.keys(map).map((key, index) => {
const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
const color = colord(EVENT_COLORS[index % EVENT_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.setAlpha(0.6).toRgbString(),
borderColor: color.setAlpha(0.7).toRgbString(),
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
});

6
components/metrics/Legend.js
View file

@ -1,5 +1,5 @@
import React from 'react';
import tinycolor from 'tinycolor2';
import { colord } from 'colord';
import classNames from 'classnames';
import Dot from 'components/common/Dot';
import useLocale from 'hooks/useLocale';
@ -27,7 +27,7 @@ export default function Legend({ chart }) {
return (
<div className={styles.legend}>
{chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => {
const color = tinycolor(fillStyle);
const color = colord(fillStyle);
return (
<div
@ -35,7 +35,7 @@ export default function Legend({ chart }) {
className={classNames(styles.label, { [styles.hidden]: hidden })}
onClick={() => handleClick(datasetIndex)}
>
<Dot color={color.setAlpha(color.getAlpha() + 0.2).toHexString()} />
<Dot color={color.alpha(color.alpha() + 0.2).toHex()} />
<span className={locale}>{text}</span>
</div>
);

12
components/metrics/PageviewsChart.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import { useIntl } from 'react-intl';
import tinycolor from 'tinycolor2';
import { colord } from 'colord';
import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
@ -18,15 +18,15 @@ export default function PageviewsChart({
}) {
const intl = useIntl();
const [theme] = useTheme();
const primaryColor = tinycolor(THEME_COLORS[theme].primary);
const primaryColor = colord(THEME_COLORS[theme].primary);
const colors = {
views: {
background: primaryColor.setAlpha(0.4).toRgbString(),
border: primaryColor.setAlpha(0.5).toRgbString(),
background: primaryColor.alpha(0.4).toRgbString(),
border: primaryColor.alpha(0.5).toRgbString(),
},
visitors: {
background: primaryColor.setAlpha(0.6).toRgbString(),
border: primaryColor.setAlpha(0.7).toRgbString(),
background: primaryColor.alpha(0.6).toRgbString(),
border: primaryColor.alpha(0.7).toRgbString(),
},
};