UNPKG

@antv/g2

Version:

the Grammar of Graphics in Javascript

109 lines 4.09 kB
"use strict"; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.Treemap = void 0; const util_1 = require("@antv/util"); const helper_1 = require("../utils/helper"); const mark_1 = require("../utils/mark"); const treeDataTransform_1 = require("../utils/treeDataTransform"); // Defaults const GET_DEFAULT_LAYOUT_OPTIONS = (width, height) => ({ tile: 'treemapSquarify', ratio: 0.5 * (1 + Math.sqrt(5)), size: [width, height], round: false, ignoreParentValue: true, padding: 0, paddingInner: 0, paddingOuter: 0, paddingTop: 0, paddingRight: 0, paddingBottom: 0, paddingLeft: 0, sort: (a, b) => b.value - a.value, layer: 0, }); const GET_DEFAULT_OPTIONS = (width, height) => ({ type: 'rect', axis: false, encode: { x: 'x', y: 'y', key: 'id', color: (d) => d.path[1], }, scale: { x: { domain: [0, width], range: [0, 1] }, y: { domain: [0, height], range: [0, 1] }, }, style: { stroke: '#fff', }, state: { active: { opacity: 0.6 }, inactive: { opacity: 1 }, }, }); const DEFAULT_LABEL_OPTIONS = { fontSize: 10, text: (d) => (0, util_1.last)(d.path), position: 'inside', fill: '#000', textOverflow: 'clip', wordWrap: true, maxLines: 1, wordWrapWidth: (d) => d.x1 - d.x0, }; const DEFAULT_TOOLTIP_OPTIONS = { title: (d) => { var _a, _b; return (_b = (_a = d.path) === null || _a === void 0 ? void 0 : _a.join) === null || _b === void 0 ? void 0 : _b.call(_a, '.'); }, items: [{ field: 'value' }], }; const DEFAULT_TOOLTIP_OPTIONS_DRILL = { title: (d) => (0, util_1.last)(d.path), items: [{ field: 'value' }], }; const Treemap = (options, context) => { const { width, height, options: markOptions } = context; const { data, encode = {}, scale, style = {}, layout = {}, labels = [], tooltip = {} } = options, resOptions = __rest(options, ["data", "encode", "scale", "style", "layout", "labels", "tooltip"]); const treemapDrillDown = (0, util_1.get)(markOptions, [ 'interaction', 'treemapDrillDown', ]); // Layout const layoutOptions = (0, util_1.deepMix)({}, GET_DEFAULT_LAYOUT_OPTIONS(width, height), layout, { layer: treemapDrillDown ? (d) => { return d.depth === 1; } : layout.layer, }); // Data const [transformedData, transformedDataAll] = (0, treeDataTransform_1.treeDataTransform)(data, layoutOptions, encode); // Label const labelStyle = (0, helper_1.subObject)(style, 'label'); return (0, util_1.deepMix)({}, GET_DEFAULT_OPTIONS(width, height), Object.assign(Object.assign({ data: transformedData, scale, style, labels: [ Object.assign(Object.assign({}, DEFAULT_LABEL_OPTIONS), labelStyle), ...labels, ] }, resOptions), { encode, tooltip: (0, mark_1.maybeTooltip)(tooltip, DEFAULT_TOOLTIP_OPTIONS), axis: false }), treemapDrillDown ? { interaction: Object.assign(Object.assign({}, resOptions.interaction), { treemapDrillDown: treemapDrillDown ? Object.assign(Object.assign({}, treemapDrillDown), { originData: transformedDataAll, layout: layoutOptions }) : undefined }), encode: Object.assign({ color: (d) => (0, util_1.last)(d.path) }, encode), tooltip: (0, mark_1.maybeTooltip)(tooltip, DEFAULT_TOOLTIP_OPTIONS_DRILL), } : {}); }; exports.Treemap = Treemap; exports.Treemap.props = {}; //# sourceMappingURL=treemap.js.map