@d3plus/core 3.0.0-alpha.0

package/es/src/charts/Treemap.js

@@ -0,0 +1,406 @@
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _get(target, property, receiver) {
+    if (typeof Reflect !== "undefined" && Reflect.get) {
+        _get = Reflect.get;
+    } else {
+        _get = function get(target, property, receiver) {
+            var base = _super_prop_base(target, property);
+            if (!base) return;
+            var desc = Object.getOwnPropertyDescriptor(base, property);
+            if (desc.get) {
+                return desc.get.call(receiver || target);
+            }
+            return desc.value;
+        };
+    }
+    return _get(target, property, receiver || target);
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _super_prop_base(object, property) {
+    while(!Object.prototype.hasOwnProperty.call(object, property)){
+        object = _get_prototype_of(object);
+        if (object === null) break;
+    }
+    return object;
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+import { sum } from "d3-array";
+import { nest } from "d3-collection";
+import { hierarchy, treemap } from "d3-hierarchy";
+import { treemapBinary, treemapDice, treemapSlice, treemapSliceDice, treemapSquarify, treemapResquarify } from "d3-hierarchy";
+var tileMethods = {
+    treemapBinary: treemapBinary,
+    treemapDice: treemapDice,
+    treemapSlice: treemapSlice,
+    treemapSliceDice: treemapSliceDice,
+    treemapSquarify: treemapSquarify,
+    treemapResquarify: treemapResquarify
+};
+import { merge } from "@d3plus/data";
+import { assign, elem } from "@d3plus/dom";
+import { formatAbbreviate } from "@d3plus/format";
+import { Rect } from "../shapes/index.js";
+import { accessor, configPrep, constant } from "../utils/index.js";
+import Viz from "./Viz.js";
+var Treemap = /*#__PURE__*/ function(Viz) {
+    "use strict";
+    _inherits(Treemap, Viz);
+    function Treemap() {
+        _class_call_check(this, Treemap);
+        var _this;
+        _this = _call_super(this, Treemap);
+        _this._layoutPadding = 1;
+        var defaultLegend = _this._legend;
+        _this._legend = function(config, arr) {
+            if (arr.length === _this._filteredData.length) return false;
+            return defaultLegend.bind(_this)(config, arr);
+        };
+        _this._legendSort = function(a, b) {
+            return _this._sum(b) - _this._sum(a);
+        };
+        _this._legendTooltip = assign({}, _this._legendTooltip, {
+            tbody: []
+        });
+        _this._shapeConfig = assign({}, _this._shapeConfig, {
+            ariaLabel: function(d, i) {
+                var rank = _this._rankData ? "".concat(_this._rankData.indexOf(d) + 1, ". ") : "";
+                return "".concat(rank).concat(_this._drawLabel(d, i), ", ").concat(_this._sum(d, i), ".");
+            },
+            labelConfig: {
+                fontMax: 32,
+                fontMin: 8,
+                fontResize: true,
+                padding: 5
+            }
+        });
+        _this._sort = function(a, b) {
+            var aggA = isAggregated(a);
+            var aggB = isAggregated(b);
+            return aggA && !aggB ? 1 : !aggA && aggB ? -1 : b.value - a.value;
+        };
+        _this._sum = accessor("value");
+        _this._thresholdKey = _this._sum;
+        _this._tile = treemapSquarify;
+        _this._tooltipConfig = assign({}, _this._tooltipConfig, {
+            tbody: [
+                [
+                    function() {
+                        return _this._translate("Share");
+                    },
+                    function(d, i, x) {
+                        return "".concat(formatAbbreviate(x.share * 100, _this._locale), "%");
+                    }
+                ]
+            ]
+        });
+        _this._treemap = treemap().round(true);
+        var isAggregated = function(leaf) {
+            return leaf.children && leaf.children.length === 1 && leaf.children[0].data._isAggregation;
+        };
+        return _this;
+    }
+    _create_class(Treemap, [
+        {
+            /**
+      @memberof Treemap
+      @desc Extends the draw behavior of the abstract Viz class.
+      @private
+  */ key: "_draw",
+            value: function _draw(callback) {
+                var _this = this;
+                _get(_get_prototype_of(Treemap.prototype), "_draw", this).call(this, callback);
+                var nestedData = nest();
+                for(var i = 0; i <= this._drawDepth; i++)nestedData.key(this._groupBy[i]);
+                nestedData = nestedData.entries(this._filteredData);
+                var tmapData = this._treemap.padding(this._layoutPadding).size([
+                    this._width - this._margin.left - this._margin.right,
+                    this._height - this._margin.top - this._margin.bottom
+                ]).tile(this._tile)(hierarchy({
+                    values: nestedData
+                }, function(d) {
+                    return d.values;
+                }).sum(this._sum).sort(this._sort));
+                var shapeData = [], that = this;
+                /**
+        @memberof Treemap
+        @desc Flattens and merges treemap data.
+        @private
+    */ function extractLayout(children) {
+                    for(var i = 0; i < children.length; i++){
+                        var node = children[i];
+                        if (node.depth <= that._drawDepth) extractLayout(node.children);
+                        else {
+                            var index = node.data.values.length === 1 ? that._filteredData.indexOf(node.data.values[0]) : undefined;
+                            node.__d3plus__ = true;
+                            node.id = node.data.key;
+                            node.i = index > -1 ? index : undefined;
+                            node.data = merge(node.data.values, that._aggs);
+                            node.x = node.x0 + (node.x1 - node.x0) / 2;
+                            node.y = node.y0 + (node.y1 - node.y0) / 2;
+                            shapeData.push(node);
+                        }
+                    }
+                }
+                if (tmapData.children) extractLayout(tmapData.children);
+                this._rankData = shapeData.sort(this._sort).map(function(d) {
+                    return d.data;
+                });
+                var total = tmapData.value;
+                shapeData.forEach(function(d) {
+                    d.share = _this._sum(d.data, d.i) / total;
+                });
+                var transform = "translate(".concat(this._margin.left, ", ").concat(this._margin.top, ")");
+                var rectConfig = configPrep.bind(this)(this._shapeConfig, "shape", "Rect");
+                var fontMax = rectConfig.labelConfig.fontMax;
+                var fontMin = rectConfig.labelConfig.fontMin;
+                var padding = rectConfig.labelConfig.padding;
+                this._shapes.push(new Rect().data(shapeData).label(function(d) {
+                    return [
+                        _this._drawLabel(d.data, d.i),
+                        "".concat(formatAbbreviate(d.share * 100, _this._locale), "%")
+                    ];
+                }).select(elem("g.d3plus-Treemap", {
+                    parent: this._select,
+                    enter: {
+                        transform: transform
+                    },
+                    update: {
+                        transform: transform
+                    }
+                }).node()).config({
+                    height: function(d) {
+                        return d.y1 - d.y0;
+                    },
+                    labelBounds: function(d, i, s) {
+                        var h = s.height;
+                        var sh = Math.min(fontMax, (h - padding * 2) * 0.5);
+                        if (sh < fontMin) sh = 0;
+                        return [
+                            {
+                                width: s.width,
+                                height: h - sh,
+                                x: -s.width / 2,
+                                y: -h / 2
+                            },
+                            {
+                                width: s.width,
+                                height: sh + padding * 2,
+                                x: -s.width / 2,
+                                y: h / 2 - sh - padding * 2
+                            }
+                        ];
+                    },
+                    labelConfig: {
+                        textAnchor: function(d, i, x) {
+                            var line, parent = x;
+                            while(typeof line === "undefined" && parent){
+                                if (typeof parent.l !== "undefined") line = parent.l;
+                                parent = parent.__d3plusParent__;
+                            }
+                            return line ? "middle" : "start";
+                        },
+                        verticalAlign: function(d, i, x) {
+                            var line, parent = x;
+                            while(typeof line === "undefined" && parent){
+                                if (typeof parent.l !== "undefined") line = parent.l;
+                                parent = parent.__d3plusParent__;
+                            }
+                            return line ? "bottom" : "top";
+                        }
+                    },
+                    width: function(d) {
+                        return d.x1 - d.x0;
+                    }
+                }).config(rectConfig).render());
+                return this;
+            }
+        },
+        {
+            /**
+   * Applies the threshold algorithm for Treemaps.
+   * @param {Array} data The data to process.
+   * @private
+   */ key: "_thresholdFunction",
+            value: function _thresholdFunction(data) {
+                var aggs = this._aggs;
+                var drawDepth = this._drawDepth;
+                var groupBy = this._groupBy;
+                var threshold = this._threshold;
+                var thresholdKey = this._thresholdKey;
+                var totalSum = sum(data, thresholdKey);
+                if (threshold && thresholdKey) {
+                    return thresholdByDepth(data, 0);
+                }
+                /**
+     * @memberof Treemap
+     * @desc Explores the data tree recursively and merges elements under the indicated threshold.
+     * @param {object[]} branchData The current subset of the dataset to work on.
+     * @param {number} depth The depth of the current branch.
+     * @private
+     */ function thresholdByDepth(branchData, depth) {
+                    if (depth < drawDepth) {
+                        return nest().key(groupBy[depth]).entries(branchData).reduce(function(bulk, leaf) {
+                            var subBranchData = thresholdByDepth(leaf.values, depth + 1);
+                            return bulk.concat(subBranchData);
+                        }, []);
+                    }
+                    if (depth === drawDepth) {
+                        var thresholdPercent = Math.min(1, Math.max(0, threshold(branchData)));
+                        if (!isFinite(thresholdPercent) || isNaN(thresholdPercent)) return null;
+                        var removedItems = [];
+                        var branchDataCopy = branchData.slice();
+                        var thresholdValue = thresholdPercent * totalSum;
+                        var n = branchDataCopy.length;
+                        while(n--){
+                            var datum = branchDataCopy[n];
+                            if (thresholdKey(datum) < thresholdValue) {
+                                var index = branchDataCopy.indexOf(datum);
+                                branchDataCopy.splice(index, 1);
+                                removedItems.push(datum);
+                            }
+                        }
+                        if (removedItems.length > 0) {
+                            var mergedItem = merge(removedItems, aggs);
+                            mergedItem._isAggregation = true;
+                            mergedItem._threshold = thresholdPercent;
+                            branchDataCopy.push(mergedItem);
+                        }
+                        return branchDataCopy;
+                    }
+                    throw new Error("Depth is higher than the amount of grouping levels.");
+                }
+                return data;
+            }
+        },
+        {
+            /**
+      @memberof Treemap
+      @desc If *value* is specified, sets the inner and outer padding accessor to the specified function or number and returns the current class instance. If *value* is not specified, returns the current padding accessor.
+      @param {Function|Number} [*value*]
+  */ key: "layoutPadding",
+            value: function layoutPadding(_) {
+                return arguments.length ? (this._layoutPadding = typeof _ === "function" ? _ : constant(_), this) : this._layoutPadding;
+            }
+        },
+        {
+            /**
+      @memberof Treemap
+      @desc If *comparator* is specified, sets the sort order for the treemap using the specified comparator function. If *comparator* is not specified, returns the current group sort order, which defaults to descending order by the associated input data's numeric value attribute.
+      @param {Array} [*comparator*]
+      @example
+function comparator(a, b) {
+  return b.value - a.value;
+}
+  */ key: "sort",
+            value: function sort(_) {
+                return arguments.length ? (this._sort = _, this) : this._sort;
+            }
+        },
+        {
+            /**
+      @memberof Treemap
+      @desc If *value* is specified, sets the sum accessor to the specified function or number and returns the current class instance. If *value* is not specified, returns the current sum accessor.
+      @param {Function|Number} [*value*]
+      @example
+function sum(d) {
+  return d.sum;
+}
+  */ key: "sum",
+            value: function sum(_) {
+                if (arguments.length) {
+                    this._sum = typeof _ === "function" ? _ : accessor(_);
+                    this._thresholdKey = this._sum;
+                    return this;
+                } else return this._sum;
+            }
+        },
+        {
+            /**
+      @memberof Treemap
+      @desc Sets the tiling method used when calcuating the size and position of the rectangles.
+
+Can either be a string referring to a d3-hierarchy [tiling method](https://github.com/d3/d3-hierarchy#treemap-tiling), or a custom function in the same format.
+      @param {String|Function} [*value* = "squarify"]
+  */ key: "tile",
+            value: function tile(_) {
+                return arguments.length ? (this._tile = typeof _ === "string" ? tileMethods["treemap".concat(_.charAt(0).toUpperCase()).concat(_.slice(1))] || treemapSquarify : _, this) : this._tile;
+            }
+        }
+    ]);
+    return Treemap;
+}(Viz);
+/**
+    @class Treemap
+    @extends Viz
+    @desc Uses the [d3 treemap layout](https://github.com/mbostock/d3/wiki/Treemap-Layout) to creates SVG rectangles based on an array of data. See [this example](https://d3plus.org/examples/d3plus-hierarchy/getting-started/) for help getting started using the treemap generator.
+*/ export { Treemap as default };