2023-05-12 14:43:48 +08:00
|
|
|
import type { ColorGenInput } from '@rc-component/color-picker';
|
2024-07-29 16:38:50 +08:00
|
|
|
import { Color as RcColor } from '@rc-component/color-picker';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
2024-07-15 17:33:47 +08:00
|
|
|
import { AggregationColor } from './color';
|
2024-07-29 16:38:50 +08:00
|
|
|
import type { ColorValueType } from './interface';
|
2023-05-12 14:43:48 +08:00
|
|
|
|
2024-07-29 16:38:50 +08:00
|
|
|
export const generateColor = (
|
|
|
|
color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>,
|
|
|
|
): AggregationColor => {
|
2024-07-15 17:33:47 +08:00
|
|
|
if (color instanceof AggregationColor) {
|
2023-05-12 14:43:48 +08:00
|
|
|
return color;
|
|
|
|
}
|
2024-07-15 17:33:47 +08:00
|
|
|
return new AggregationColor(color);
|
2023-05-12 14:43:48 +08:00
|
|
|
};
|
|
|
|
|
2023-06-25 15:38:22 +08:00
|
|
|
export const getRoundNumber = (value: number) => Math.round(Number(value || 0));
|
|
|
|
|
2024-07-29 16:38:50 +08:00
|
|
|
export const getColorAlpha = (color: AggregationColor) => getRoundNumber(color.toHsb().a * 100);
|
2023-07-12 19:42:33 +08:00
|
|
|
|
2024-07-29 16:38:50 +08:00
|
|
|
/** Return the color whose `alpha` is 1 */
|
2024-07-15 17:33:47 +08:00
|
|
|
export const genAlphaColor = (color: AggregationColor, alpha?: number) => {
|
2024-09-13 15:41:53 +08:00
|
|
|
const rgba = color.toRgb();
|
|
|
|
|
|
|
|
// Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0
|
|
|
|
// So if rgb is empty, we should get from hsb
|
|
|
|
if (!rgba.r && !rgba.g && !rgba.b) {
|
|
|
|
const hsba = color.toHsb();
|
|
|
|
hsba.a = alpha || 1;
|
|
|
|
return generateColor(hsba);
|
|
|
|
}
|
|
|
|
|
|
|
|
rgba.a = alpha || 1;
|
|
|
|
return generateColor(rgba);
|
2023-07-12 19:42:33 +08:00
|
|
|
};
|
2024-07-29 16:38:50 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
|
|
|
|
*/
|
|
|
|
export const getGradientPercentColor = (
|
|
|
|
colors: { percent: number; color: string }[],
|
|
|
|
percent: number,
|
|
|
|
): string => {
|
|
|
|
const filledColors = [
|
|
|
|
{
|
|
|
|
percent: 0,
|
|
|
|
color: colors[0].color,
|
|
|
|
},
|
|
|
|
...colors,
|
|
|
|
{
|
|
|
|
percent: 100,
|
|
|
|
color: colors[colors.length - 1].color,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
for (let i = 0; i < filledColors.length - 1; i += 1) {
|
|
|
|
const startPtg = filledColors[i].percent;
|
|
|
|
const endPtg = filledColors[i + 1].percent;
|
|
|
|
const startColor = filledColors[i].color;
|
|
|
|
const endColor = filledColors[i + 1].color;
|
|
|
|
|
|
|
|
if (startPtg <= percent && percent <= endPtg) {
|
|
|
|
const dist = endPtg - startPtg;
|
|
|
|
if (dist === 0) {
|
|
|
|
return startColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
const ratio = ((percent - startPtg) / dist) * 100;
|
|
|
|
const startRcColor = new RcColor(startColor);
|
|
|
|
const endRcColor = new RcColor(endColor);
|
|
|
|
|
|
|
|
return startRcColor.mix(endRcColor, ratio).toRgbString();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// This will never reach
|
|
|
|
/* istanbul ignore next */
|
|
|
|
return '';
|
|
|
|
};
|