UNPKG

@antv/g2

Version:

the Grammar of Graphics in Javascript

125 lines 4.27 kB
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; }; import { deepMix } from '@antv/util'; import { treemap as treemapLayout, treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, treemapResquarify, } from 'd3-hierarchy'; import { subObject } from '../utils/helper'; import { maybeTooltip } from '../utils/mark'; import { generateHierarchyRoot, field } from './utils'; function getTileMethod(tile, ratio) { const tiles = { treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, 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 = generateHierarchyRoot(data, layout.path); // Calculate the value and sort. value ? root .sum((d) => layout.ignoreParentValue && d.children ? 0 : field(value)(d)) .sort(layout.sort) : root.count(); treemapLayout() .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' }], }; export 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, deepMix({}, GET_DEFAULT_LAYOUT_OPTIONS(width, height), layout), encode); // Label const labelStyle = subObject(style, 'label'); return 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: maybeTooltip(tooltip, DEFAULT_TOOLTIP_OPTIONS), axis: false })); }; Treemap.props = {}; //# sourceMappingURL=treemap.js.map