@antv/g2/lib/mark/treemap.js

the Grammar of Graphics in Javascript

"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 d3_hierarchy_1 = require("d3-hierarchy");
const helper_1 = require("../utils/helper");
const mark_1 = require("../utils/mark");
const utils_1 = require("./utils");
function getTileMethod(tile, ratio) {
    const tiles = {
        treemapBinary: d3_hierarchy_1.treemapBinary,
        treemapDice: d3_hierarchy_1.treemapDice,
        treemapSlice: d3_hierarchy_1.treemapSlice,
        treemapSliceDice: d3_hierarchy_1.treemapSliceDice,
        treemapSquarify: d3_hierarchy_1.treemapSquarify,
        treemapResquarify: d3_hierarchy_1.treemapResquarify,
    };
    const tileMethod = tile === 'treemapSquarify' ? tiles[tile].ratio(ratio) : tiles[tile];
    if (!tileMethod) {
        throw new TypeError('Invalid tile method!');
    }
    return tileMethod;
}
function dataTransform(data, layout, encode) {
    const { value } = encode;
    const tileMethod = getTileMethod(layout.tile, layout.ratio);
    const root = (0, utils_1.generateHierarchyRoot)(data, layout.path);
    // Calculate the value and sort.
    value
        ? root
            .sum((d) => layout.ignoreParentValue && d.children ? 0 : (0, utils_1.field)(value)(d))
            .sort(layout.sort)
        : root.count();
    (0, d3_hierarchy_1.treemap)()
        .tile(tileMethod)
        // @ts-ignore
        .size(layout.size)
        .round(layout.round)
        .paddingInner(layout.paddingInner)
        .paddingOuter(layout.paddingOuter)
        .paddingTop(layout.paddingTop)
        .paddingRight(layout.paddingRight)
        .paddingBottom(layout.paddingBottom)
        .paddingLeft(layout.paddingLeft)(root);
    return root
        .descendants()
        .map((d) => Object.assign(d, {
        x: [d.x0, d.x1],
        y: [d.y0, d.y1],
    }))
        .filter(typeof layout.layer === 'function'
        ? layout.layer
        : (d) => d.height === layout.layer);
}
// 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',
        color: (d) => d.data.parent.name,
    },
    scale: {
        x: { domain: [0, width], range: [0, 1] },
        y: { domain: [0, height], range: [0, 1] },
    },
    style: {
        stroke: '#fff',
    },
});
const DEFAULT_LABEL_OPTIONS = {
    fontSize: 10,
    text: (d) => d.data.name,
    position: 'inside',
    fill: '#000',
    textOverflow: 'clip',
    wordWrap: true,
    maxLines: 1,
    wordWrapWidth: (d) => d.x1 - d.x0,
};
const DEFAULT_TOOLTIP_OPTIONS = {
    title: (d) => d.data.name,
    items: [{ field: 'value' }],
};
const Treemap = (options, context) => {
    const { width, height } = context;
    const { data, encode = {}, scale, style = {}, layout = {}, labels = [], tooltip = {} } = options, resOptions = __rest(options, ["data", "encode", "scale", "style", "layout", "labels", "tooltip"]);
    // Data
    const transformedData = dataTransform(data, (0, util_1.deepMix)({}, GET_DEFAULT_LAYOUT_OPTIONS(width, height), layout), 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, encode,
        scale,
        style, labels: [
            Object.assign(Object.assign({}, DEFAULT_LABEL_OPTIONS), labelStyle),
            ...labels,
        ] }, resOptions), { tooltip: (0, mark_1.maybeTooltip)(tooltip, DEFAULT_TOOLTIP_OPTIONS), axis: false }));
};
exports.Treemap = Treemap;
exports.Treemap.props = {};
//# sourceMappingURL=treemap.js.map