@antv/g6
Version:
A Graph Visualization Framework in JavaScript
117 lines • 4.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.parsePalette = parsePalette;
exports.assignColorByPalette = assignColorByPalette;
exports.getPaletteColors = getPaletteColors;
const util_1 = require("@antv/util");
const get_1 = require("../registry/get");
const id_1 = require("./id");
const print_1 = require("./print");
/**
* <zh/> 解析色板配置
*
* <en/> Parse palette options
* @param palette - <zh/> 色板配置 | <en/> PaletteOptions options
* @returns <zh/> 标准色板配置 | <en/> Standard palette options
*/
function parsePalette(palette) {
if (!palette)
return undefined;
if (
// 色板名 palette name
typeof palette === 'string' ||
// 插值函数 interpolate function
typeof palette === 'function' ||
// 颜色数组 color array
Array.isArray(palette)) {
// 默认为离散色板
// Default to discrete palette, default group field is id
return {
type: 'group',
field: (d) => d.id,
color: palette,
invert: false,
};
}
return palette;
}
/**
* <zh/> 根据色板分配颜色
*
* <en/> Assign colors according to the palette
* @param data - <zh/> 元素数据 | <en/> Element data
* @param palette - <zh/> 色板配置 | <en/> PaletteOptions options
* @returns <zh/> 元素颜色 | <en/> Element color
* @remarks
* <zh/> 返回值结果是一个以元素 id 为 key，颜色值为 value 的对象
*
* <en/> The return value is an object with element id as key and color value as value
*/
function assignColorByPalette(data, palette) {
if (!palette)
return {};
const { type, color: colorPalette, field, invert } = palette;
const assignColor = (args) => {
const palette = typeof colorPalette === 'string' ? (0, get_1.getExtension)('palette', colorPalette) : colorPalette;
if (typeof palette === 'function') {
// assign by continuous
const result = {};
args.forEach(([id, value]) => {
result[id] = palette(invert ? 1 - value : value);
});
return result;
}
else if (Array.isArray(palette)) {
// assign by discrete
const colors = invert ? [...palette].reverse() : palette;
const result = {};
args.forEach(([id, index]) => {
result[id] = colors[index % palette.length];
});
return result;
}
return {};
};
const parseField = (field, datum) => { var _a; return typeof field === 'string' ? (_a = datum.data) === null || _a === void 0 ? void 0 : _a[field] : field === null || field === void 0 ? void 0 : field(datum); };
if (type === 'group') {
const groupData = (0, util_1.groupBy)(data, (datum) => {
if (!field)
return 'default';
const key = parseField(field, datum);
return key ? String(key) : 'default';
});
const groupKeys = Object.keys(groupData);
const assignResult = assignColor(groupKeys.map((key, index) => [key, index]));
const result = {};
Object.entries(groupData).forEach(([groupKey, groupData]) => {
groupData.forEach((datum) => {
result[(0, id_1.idOf)(datum)] = assignResult[groupKey];
});
});
return result;
}
else if (type === 'value') {
const [min, max] = data.reduce(([min, max], datum) => {
const value = parseField(field, datum);
if (typeof value !== 'number')
throw new Error((0, print_1.format)(`Palette field ${field} is not a number`));
return [Math.min(min, value), Math.max(max, value)];
}, [Infinity, -Infinity]);
const range = max - min;
return assignColor(data.map((datum) => [datum.id, (parseField(field, datum) - min) / range]));
}
}
/**
* <zh/> 获取离散色板配色
*
* <en/> Get discrete palette colors
* @param colorPalette - <zh/> 色板名或着颜色数组 | <en/> Palette name or color array
* @returns <zh/> 色板上具体颜色 | <en/> Specific color on the palette
*/
function getPaletteColors(colorPalette) {
const palette = typeof colorPalette === 'string' ? (0, get_1.getExtension)('palette', colorPalette) : colorPalette;
if (typeof palette === 'function')
return undefined;
return palette;
}
//# sourceMappingURL=palette.js.map