@unovis/ts 1.5.1-exf.3 → 1.5.1-exf.4

package/components/treemap/index.js

@@ -0,0 +1,149 @@
+import { hierarchy, treemap } from 'd3-hierarchy';
+import { group, max } from 'd3-array';
+import { scaleLinear } from 'd3-scale';
+import { ComponentCore } from '../../core/component/index.js';
+import { SeriesDataModel } from '../../data-models/series.js';
+import { getColor } from '../../utils/color.js';
+import { isNumber, getString, getNumber } from '../../utils/data.js';
+import { smartTransition } from '../../utils/d3.js';
+import { TreemapDefaultConfig } from './config.js';
+import * as style from './style.js';
+import { tiles, tile, tileBackground, tileForeground, label } from './style.js';
+
+class Treemap extends ComponentCore {
+    constructor(config) {
+        super();
+        this._defaultConfig = TreemapDefaultConfig;
+        this.config = this._defaultConfig;
+        this.datamodel = new SeriesDataModel();
+        if (config)
+            this.setConfig(config);
+        this.tiles = this.g.append('g').attr('class', tiles);
+    }
+    _render(customDuration) {
+        var _a;
+        const { config, datamodel: { data } } = this;
+        const duration = isNumber(customDuration) ? customDuration : config.duration;
+        if (!((_a = config.layers) === null || _a === void 0 ? void 0 : _a.length)) {
+            console.warn('Unovis | Treemap: No layers defined');
+            return;
+        }
+        // Map each layer accessor function to get string values from the data array
+        const layerAccessors = config.layers.map(layerAccessor => {
+            return (i) => getString(data[i], layerAccessor, i);
+        });
+        // Group the data indices by the layer accessors to create a hierarchical structure
+        const nestedData = group(data.keys(), ...layerAccessors);
+        const rootNode = config.value !== undefined
+            ? hierarchy(nestedData).sum(index => typeof index === 'number' && getNumber(data[index], config.value, index))
+            : hierarchy(nestedData).count();
+        const treemapLayout = treemap()
+            .size([this._width, this._height])
+            .round(true)
+            .padding(this.config.tilePadding);
+        if (this.config.tilePaddingTop !== undefined) {
+            treemapLayout.paddingTop(this.config.tilePaddingTop);
+        }
+        const treemapData = treemapLayout(rootNode);
+        const descendants = treemapData.descendants();
+        // Set up the opacity scale based on depth
+        const maxDepth = max(descendants, d => d.depth);
+        const opacity = scaleLinear()
+            .domain([1, maxDepth])
+            .range([1, 0.2]);
+        // Set fill color and opacity for each node
+        treemapData
+            .eachBefore((node) => {
+            if (!node.children)
+                return;
+            node.children.forEach((child, i) => {
+                const treemapChild = child;
+                // Calculate color for this child using the color accessor function
+                const color = getColor(treemapChild, config.tileColor, i, treemapChild.depth !== 1);
+                // If no color for this child, use the parent's color
+                treemapChild._fill = color !== null && color !== void 0 ? color : node._fill;
+                // Set opacity based on depth
+                treemapChild._fillOpacity = color === null ? opacity(treemapChild.depth) : null;
+            });
+        });
+        // Render tiles
+        const visibleNodes = descendants.filter(d => d.depth > 0);
+        const tiles = this.tiles
+            .selectAll(`g.${tile}`)
+            .data(visibleNodes, d => d._id);
+        const tilesEnter = tiles
+            .enter()
+            .append('g')
+            .attr('class', tile);
+        // Tile background rectangles
+        tilesEnter
+            .append('rect')
+            .attr('class', tileBackground)
+            // Initialize tile positions so that the initial transition is smooth
+            .attr('x', d => d.x0)
+            .attr('y', d => d.y0)
+            .attr('width', d => d.x1 - d.x0)
+            .attr('height', d => d.y1 - d.y0);
+        tiles.merge(tilesEnter).select(`rect.${tileBackground}`)
+            .call(selection => smartTransition(selection, duration)
+            .attr('x', d => d.x0)
+            .attr('y', d => d.y0)
+            .attr('width', d => d.x1 - d.x0)
+            .attr('height', d => d.y1 - d.y0));
+        // Tile foreground rectangles
+        tilesEnter
+            .append('rect')
+            .attr('class', tileForeground)
+            // Initialize tile positions so that the initial transition is smooth
+            .attr('x', d => d.x0)
+            .attr('y', d => d.y0)
+            .attr('width', d => d.x1 - d.x0)
+            .attr('height', d => d.y1 - d.y0)
+            .style('fill', d => { var _a; return (_a = d._fill) !== null && _a !== void 0 ? _a : getColor(d, config.tileColor); })
+            // Make the tiles fade in on enter
+            .style('fill-opacity', 0);
+        tiles.merge(tilesEnter).select(`rect.${tileForeground}`)
+            .call(selection => smartTransition(selection, duration)
+            .style('fill', d => { var _a; return (_a = d._fill) !== null && _a !== void 0 ? _a : getColor(d, config.tileColor); })
+            .style('fill-opacity', d => { var _a; return (_a = d._fillOpacity) !== null && _a !== void 0 ? _a : 1; })
+            .attr('x', d => d.x0)
+            .attr('y', d => d.y0)
+            .attr('width', d => d.x1 - d.x0)
+            .attr('height', d => d.y1 - d.y0));
+        // Tile labels
+        tilesEnter
+            .append('text')
+            .attr('class', label);
+        tiles.merge(tilesEnter)
+            .filter(config.labelInternalNodes
+            ? () => true
+            : d => !d.children)
+            .select(`text.${label}`)
+            .attr('x', d => d.x0 + config.labelOffsetX)
+            .attr('y', d => d.y0 + config.labelOffsetY)
+            .text(d => {
+            if (typeof d.data === 'number') {
+                const index = d.data;
+                // Leaf node case
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                return config.value(data[index]);
+            }
+            else {
+                // Internal node case
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                return d.data[0];
+            }
+        });
+        // Exit
+        const tilesExit = tiles.exit();
+        smartTransition(tilesExit, duration)
+            .style('opacity', 0)
+            .remove();
+    }
+}
+Treemap.selectors = style;
+
+export { Treemap };
+//# sourceMappingURL=index.js.map

package/components/treemap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/treemap/index.ts"],"sourcesContent":["import { Selection } from 'd3-selection'\nimport { hierarchy, treemap } from 'd3-hierarchy'\nimport { group, max } from 'd3-array'\nimport { scaleLinear } from 'd3-scale'\nimport { ComponentCore } from 'core/component'\nimport { SeriesDataModel } from 'data-models/series'\nimport { getColor } from 'utils/color'\nimport { getString, getNumber, isNumber } from 'utils/data'\nimport { smartTransition } from 'utils/d3'\nimport { TreemapConfigInterface, TreemapDefaultConfig } from './config'\nimport { TreemapNode } from './types'\n\nimport * as s from './style'\n\nexport class Treemap<Datum> extends ComponentCore<Datum[], TreemapConfigInterface<Datum>> {\n  static selectors = s\n  protected _defaultConfig = TreemapDefaultConfig as TreemapConfigInterface<Datum>\n  public config: TreemapConfigInterface<Datum> = this._defaultConfig\n\n  datamodel: SeriesDataModel<Datum> = new SeriesDataModel()\n  tiles: Selection<SVGGElement, unknown, SVGGElement, unknown>\n\n  constructor (config?: TreemapConfigInterface<Datum>) {\n    super()\n    if (config) this.setConfig(config)\n    this.tiles = this.g.append('g').attr('class', s.tiles)\n  }\n\n  _render (customDuration?: number): void {\n    const { config, datamodel: { data } } = this\n    const duration = isNumber(customDuration) ? customDuration : config.duration\n\n    if (!config.layers?.length) {\n      console.warn('Unovis | Treemap: No layers defined')\n      return\n    }\n\n    // Map each layer accessor function to get string values from the data array\n    const layerAccessors = config.layers.map(layerAccessor => {\n      return (i: number) => getString(data[i], layerAccessor, i)\n    })\n\n    // Group the data indices by the layer accessors to create a hierarchical structure\n    const nestedData = group(data.keys(), ...layerAccessors as [(d: number) => string])\n\n    const rootNode = config.value !== undefined\n      ? hierarchy(nestedData).sum(index => typeof index === 'number' && getNumber(data[index], config.value, index))\n      : hierarchy(nestedData).count()\n\n    const treemapLayout = treemap()\n      .size([this._width, this._height])\n      .round(true)\n      .padding(this.config.tilePadding)\n\n    if (this.config.tilePaddingTop !== undefined) {\n      treemapLayout.paddingTop(this.config.tilePaddingTop)\n    }\n\n    const treemapData = treemapLayout(rootNode) as TreemapNode<Datum>\n\n    const descendants = treemapData.descendants()\n\n    // Set up the opacity scale based on depth\n    const maxDepth = max(descendants, d => d.depth)\n    const opacity = scaleLinear()\n      .domain([1, maxDepth])\n      .range([1, 0.2])\n\n    // Set fill color and opacity for each node\n    treemapData\n      .eachBefore((node) => {\n        if (!node.children) return\n        node.children.forEach((child, i) => {\n          const treemapChild = child as TreemapNode<Datum>\n\n          // Calculate color for this child using the color accessor function\n          const color = getColor(treemapChild, config.tileColor, i, treemapChild.depth !== 1)\n\n          // If no color for this child, use the parent's color\n          treemapChild._fill = color ?? (node as TreemapNode<Datum>)._fill\n\n          // Set opacity based on depth\n          treemapChild._fillOpacity = color === null ? opacity(treemapChild.depth) : null\n        })\n      })\n\n    // Render tiles\n    const visibleNodes = descendants.filter(d => d.depth > 0)\n    const tiles = this.tiles\n      .selectAll<SVGGElement, TreemapNode<Datum>>(`g.${s.tile}`)\n      .data(visibleNodes, d => d._id)\n    const tilesEnter = tiles\n      .enter()\n      .append('g')\n      .attr('class', s.tile)\n\n    // Tile background rectangles\n    tilesEnter\n      .append('rect')\n      .attr('class', s.tileBackground)\n\n      // Initialize tile positions so that the initial transition is smooth\n      .attr('x', d => d.x0)\n      .attr('y', d => d.y0)\n      .attr('width', d => d.x1 - d.x0)\n      .attr('height', d => d.y1 - d.y0)\n\n    tiles.merge(tilesEnter).select(`rect.${s.tileBackground}`)\n      .call(selection => smartTransition(selection, duration)\n        .attr('x', d => d.x0)\n        .attr('y', d => d.y0)\n        .attr('width', d => d.x1 - d.x0)\n        .attr('height', d => d.y1 - d.y0)\n      )\n\n    // Tile foreground rectangles\n    tilesEnter\n      .append('rect')\n      .attr('class', s.tileForeground)\n      // Initialize tile positions so that the initial transition is smooth\n      .attr('x', d => d.x0)\n      .attr('y', d => d.y0)\n      .attr('width', d => d.x1 - d.x0)\n      .attr('height', d => d.y1 - d.y0)\n      .style('fill', d => d._fill ?? getColor(d, config.tileColor))\n\n      // Make the tiles fade in on enter\n      .style('fill-opacity', 0)\n\n    tiles.merge(tilesEnter).select(`rect.${s.tileForeground}`)\n      .call(selection => smartTransition(selection, duration)\n        .style('fill', d => d._fill ?? getColor(d, config.tileColor))\n        .style('fill-opacity', d => d._fillOpacity ?? 1)\n        .attr('x', d => d.x0)\n        .attr('y', d => d.y0)\n        .attr('width', d => d.x1 - d.x0)\n        .attr('height', d => d.y1 - d.y0)\n      )\n\n    // Tile labels\n    tilesEnter\n      .append('text')\n      .attr('class', s.label)\n    tiles.merge(tilesEnter)\n      .filter(config.labelInternalNodes\n        ? () => true\n        : d => !d.children\n      )\n      .select(`text.${s.label}`)\n      .attr('x', d => d.x0 + config.labelOffsetX)\n      .attr('y', d => d.y0 + config.labelOffsetY)\n      .text(d => {\n        if (typeof d.data === 'number') {\n          const index = d.data\n          // Leaf node case\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          return config.value(data[index])\n        } else {\n          // Internal node case\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          return d.data[0]\n        }\n      })\n\n    // Exit\n    const tilesExit = tiles.exit()\n    smartTransition(tilesExit, duration)\n      .style('opacity', 0)\n      .remove()\n  }\n}\n"],"names":["s.tiles","s.tile","s.tileBackground","s.tileForeground","s.label","s"],"mappings":"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"}

package/components/treemap/style.d.ts

@@ -0,0 +1,19 @@
+export declare const root: string;
+export declare const variables: {
+    treemapTileStrokeColor: "--vis-treemap-tile-stroke-color";
+    treemapTileStrokeWidth: "--vis-treemap-tile-stroke-width";
+    treemapTileFillColor: "--vis-treemap-tile-fill-color";
+    treemapTileBackgroundColor: "--vis-treemap-tile-background-color";
+    treemapTileCursor: "--vis-treemap-tile-cursor";
+    treemapLabelFontFamily: "--vis-treemap-label-font-family";
+    treemapLabelTextColor: "--vis-treemap-label-text-color";
+    treemapLabelFontSize: "--vis-treemap-label-font-size";
+    darkTreemapTileStrokeColor: "--vis-dark-treemap-tile-stroke-color";
+    darkTreemapTileFillColor: "--vis-dark-treemap-tile-fill-color";
+    darkTreemapLabelTextColor: "--vis-dark-treemap-label-text-color";
+};
+export declare const tiles: string;
+export declare const tile: string;
+export declare const tileBackground: string;
+export declare const tileForeground: string;
+export declare const label: string;

package/components/treemap/style.js

@@ -0,0 +1,49 @@
+import { css } from '@emotion/css';
+import { getCssVarNames, injectGlobalCssVariables } from '../../utils/style.js';
+
+const cssVarDefaults = {
+    '--vis-treemap-tile-stroke-color': '#fff',
+    '--vis-treemap-tile-stroke-width': '1px',
+    '--vis-treemap-tile-fill-color': '#B9BEC3',
+    '--vis-treemap-tile-background-color': '#fff',
+    '--vis-treemap-tile-cursor': 'default',
+    /* Undefined by default to allow proper fallback to var(--vis-font-family) */
+    '--vis-treemap-label-font-family': undefined,
+    '--vis-treemap-label-text-color': '#5b5f6d',
+    '--vis-treemap-label-font-size': '12px',
+    /* Dark Theme */
+    '--vis-dark-treemap-tile-stroke-color': '#2c2c2c',
+    '--vis-dark-treemap-tile-fill-color': '#5b5f6d',
+    '--vis-dark-treemap-label-text-color': '#fff',
+};
+const root = css `
+  label: treemap-component;
+  width: 100%;
+  height: 100%;
+  position: relative;
+`;
+const variables = getCssVarNames(cssVarDefaults);
+injectGlobalCssVariables(cssVarDefaults, root);
+const tiles = css `
+  label: g-tiles;
+`;
+const tile = css `
+  label: tile;
+`;
+const tileBackground = css `
+  label: tile-background;
+  fill: var(--vis-treemap-tile-background-color);
+`;
+const tileForeground = css `
+  label: tile-foreground;
+`;
+const label = css `
+  label: label;
+  text-anchor: start;
+  dominant-baseline: hanging;
+  user-select: none;
+  font-size: var(--vis-treemap-label-font-size);
+`;
+
+export { label, root, tile, tileBackground, tileForeground, tiles, variables };
+//# sourceMappingURL=style.js.map

package/components/treemap/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":["../../../src/components/treemap/style.ts"],"sourcesContent":["import { css } from '@emotion/css'\n\n// Utils\nimport { getCssVarNames, injectGlobalCssVariables } from 'utils/style'\n\nconst cssVarDefaults = {\n  '--vis-treemap-tile-stroke-color': '#fff',\n  '--vis-treemap-tile-stroke-width': '1px',\n  '--vis-treemap-tile-fill-color': '#B9BEC3',\n  '--vis-treemap-tile-background-color': '#fff',\n  '--vis-treemap-tile-cursor': 'default',\n  /* Undefined by default to allow proper fallback to var(--vis-font-family) */\n  '--vis-treemap-label-font-family': undefined as undefined,\n  '--vis-treemap-label-text-color': '#5b5f6d',\n  '--vis-treemap-label-font-size': '12px',\n\n  /* Dark Theme */\n  '--vis-dark-treemap-tile-stroke-color': '#2c2c2c',\n  '--vis-dark-treemap-tile-fill-color': '#5b5f6d',\n  '--vis-dark-treemap-label-text-color': '#fff',\n}\n\nexport const root = css`\n  label: treemap-component;\n  width: 100%;\n  height: 100%;\n  position: relative;\n`\n\nexport const variables = getCssVarNames(cssVarDefaults)\ninjectGlobalCssVariables(cssVarDefaults, root)\n\nexport const tiles = css`\n  label: g-tiles;\n`\n\nexport const tile = css`\n  label: tile;\n`\n\nexport const tileBackground = css`\n  label: tile-background;\n  fill: var(--vis-treemap-tile-background-color);\n`\n\nexport const tileForeground = css`\n  label: tile-foreground;\n`\n\nexport const label = css`\n  label: label;\n  text-anchor: start;\n  dominant-baseline: hanging;\n  user-select: none;\n  font-size: var(--vis-treemap-label-font-size);\n`\n"],"names":[],"mappings":";;;AAKA,MAAM,cAAc,GAAG;AACrB,IAAA,iCAAiC,EAAE,MAAM;AACzC,IAAA,iCAAiC,EAAE,KAAK;AACxC,IAAA,+BAA+B,EAAE,SAAS;AAC1C,IAAA,qCAAqC,EAAE,MAAM;AAC7C,IAAA,2BAA2B,EAAE,SAAS;;AAEtC,IAAA,iCAAiC,EAAE,SAAsB;AACzD,IAAA,gCAAgC,EAAE,SAAS;AAC3C,IAAA,+BAA+B,EAAE,MAAM;;AAGvC,IAAA,sCAAsC,EAAE,SAAS;AACjD,IAAA,oCAAoC,EAAE,SAAS;AAC/C,IAAA,qCAAqC,EAAE,MAAM;CAC9C,CAAA;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;EAKtB;MAEY,SAAS,GAAG,cAAc,CAAC,cAAc,EAAC;AACvD,wBAAwB,CAAC,cAAc,EAAE,IAAI,CAAC,CAAA;AAEvC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;EAEvB;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;EAGhC;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;EAEhC;AAEM,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;"}

package/components/treemap/types.d.ts

@@ -0,0 +1,10 @@
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+export declare type TreemapDatum<Datum> = {
+    datum: Datum;
+    index: number;
+};
+export interface TreemapNode<Datum> extends HierarchyRectangularNode<TreemapDatum<Datum>> {
+    _id: string;
+    _fill?: string;
+    _fillOpacity?: number | null;
+}

package/components/treemap/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/treemap/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components.d.ts

@@ -27,6 +27,7 @@ export { FreeBrush } from './components/free-brush';
 export { XYLabels } from './components/xy-labels';
 export { NestedDonut } from './components/nested-donut';
 export { Annotations } from "./components/annotations";
+export { Treemap } from './components/treemap';
 export * from './components/donut/constants';
 export type { LineConfigInterface } from './components/line/config';
 export type { StackedBarConfigInterface } from './components/stacked-bar/config';
@@ -52,3 +53,4 @@ export type { FreeBrushConfigInterface } from './components/free-brush/config';
 export type { XYLabelsConfigInterface } from './components/xy-labels/config';
 export type { NestedDonutConfigInterface } from './components/nested-donut/config';
 export type { AnnotationsConfigInterface } from './components/annotations/config';
+export type { TreemapConfigInterface } from './components/treemap/config';

package/components.js

@@ -25,6 +25,7 @@ export { FreeBrush } from './components/free-brush/index.js';
 export { XYLabels } from './components/xy-labels/index.js';
 export { NestedDonut } from './components/nested-donut/index.js';
 export { Annotations } from './components/annotations/index.js';
+export { Treemap } from './components/treemap/index.js';
 export { DONUT_HALF_ANGLE_RANGES, DONUT_HALF_ANGLE_RANGE_BOTTOM, DONUT_HALF_ANGLE_RANGE_LEFT, DONUT_HALF_ANGLE_RANGE_RIGHT, DONUT_HALF_ANGLE_RANGE_TOP } from './components/donut/constants.js';
 
 // Core

package/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":["../src/components.ts"],"sourcesContent":["// Core\nexport { ComponentCore } from 'core/component'\nexport type { ComponentConfigInterface } from 'core/component/config'\nexport { XYComponentCore } from 'core/xy-component'\nexport type { XYComponentConfigInterface } from 'core/xy-component/config'\n\n// Components\nexport { Tooltip } from 'components/tooltip'\nexport { Line } from './components/line'\nexport { StackedBar } from './components/stacked-bar'\nexport { GroupedBar } from './components/grouped-bar'\nexport { Axis } from './components/axis'\nexport { Scatter } from './components/scatter'\nexport { Brush } from './components/brush'\nexport { BulletLegend } from './components/bullet-legend'\nexport { FlowLegend } from './components/flow-legend'\nexport { Crosshair } from './components/crosshair'\nexport { Timeline } from './components/timeline'\nexport { Sankey } from './components/sankey'\nexport { Area } from './components/area'\nexport { TopoJSONMap } from './components/topojson-map'\nexport { LeafletMap } from './components/leaflet-map'\nexport { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style'\nexport { LeafletFlowMap } from './components/leaflet-flow-map'\nexport { ChordDiagram } from './components/chord-diagram'\nexport { Graph } from './components/graph'\nexport { VisControls } from './components/vis-controls'\nexport { Donut } from './components/donut'\nexport { FreeBrush } from './components/free-brush'\nexport { XYLabels } from './components/xy-labels'\nexport { NestedDonut } from './components/nested-donut'\nexport { Annotations } from 'components/annotations'\n\n// Constants\nexport * from './components/donut/constants'\n\n// Config Interfaces\nexport type { LineConfigInterface } from './components/line/config'\nexport type { StackedBarConfigInterface } from './components/stacked-bar/config'\nexport type { GroupedBarConfigInterface } from './components/grouped-bar/config'\nexport type { ScatterConfigInterface } from './components/scatter/config'\nexport type { TooltipConfigInterface } from './components/tooltip/config'\nexport type { BrushConfigInterface } from './components/brush/config'\nexport type { AxisConfigInterface } from './components/axis/config'\nexport type { BulletLegendConfigInterface } from './components/bullet-legend/config'\nexport type { FlowLegendConfigInterface } from './components/flow-legend/config'\nexport type { CrosshairConfigInterface } from './components/crosshair/config'\nexport type { TimelineConfigInterface } from './components/timeline/config'\nexport type { SankeyConfigInterface } from './components/sankey/config'\nexport type { AreaConfigInterface } from './components/area/config'\nexport type { TopoJSONMapConfigInterface } from './components/topojson-map/config'\nexport type { LeafletMapConfigInterface } from './components/leaflet-map/config'\nexport type { LeafletFlowMapConfigInterface } from './components/leaflet-flow-map/config'\nexport type { ChordDiagramConfigInterface } from './components/chord-diagram/config'\nexport type { GraphConfigInterface } from './components/graph/config'\nexport type { VisControlsConfigInterface } from './components/vis-controls/config'\nexport type { DonutConfigInterface } from './components/donut/config'\nexport type { FreeBrushConfigInterface } from './components/free-brush/config'\nexport type { XYLabelsConfigInterface } from './components/xy-labels/config'\nexport type { NestedDonutConfigInterface } from './components/nested-donut/config'\nexport type { AnnotationsConfigInterface } from './components/annotations/config'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"file":"components.js","sources":["../src/components.ts"],"sourcesContent":["// Core\nexport { ComponentCore } from 'core/component'\nexport type { ComponentConfigInterface } from 'core/component/config'\nexport { XYComponentCore } from 'core/xy-component'\nexport type { XYComponentConfigInterface } from 'core/xy-component/config'\n\n// Components\nexport { Tooltip } from 'components/tooltip'\nexport { Line } from './components/line'\nexport { StackedBar } from './components/stacked-bar'\nexport { GroupedBar } from './components/grouped-bar'\nexport { Axis } from './components/axis'\nexport { Scatter } from './components/scatter'\nexport { Brush } from './components/brush'\nexport { BulletLegend } from './components/bullet-legend'\nexport { FlowLegend } from './components/flow-legend'\nexport { Crosshair } from './components/crosshair'\nexport { Timeline } from './components/timeline'\nexport { Sankey } from './components/sankey'\nexport { Area } from './components/area'\nexport { TopoJSONMap } from './components/topojson-map'\nexport { LeafletMap } from './components/leaflet-map'\nexport { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style'\nexport { LeafletFlowMap } from './components/leaflet-flow-map'\nexport { ChordDiagram } from './components/chord-diagram'\nexport { Graph } from './components/graph'\nexport { VisControls } from './components/vis-controls'\nexport { Donut } from './components/donut'\nexport { FreeBrush } from './components/free-brush'\nexport { XYLabels } from './components/xy-labels'\nexport { NestedDonut } from './components/nested-donut'\nexport { Annotations } from 'components/annotations'\nexport { Treemap } from './components/treemap'\n\n// Constants\nexport * from './components/donut/constants'\n\n// Config Interfaces\nexport type { LineConfigInterface } from './components/line/config'\nexport type { StackedBarConfigInterface } from './components/stacked-bar/config'\nexport type { GroupedBarConfigInterface } from './components/grouped-bar/config'\nexport type { ScatterConfigInterface } from './components/scatter/config'\nexport type { TooltipConfigInterface } from './components/tooltip/config'\nexport type { BrushConfigInterface } from './components/brush/config'\nexport type { AxisConfigInterface } from './components/axis/config'\nexport type { BulletLegendConfigInterface } from './components/bullet-legend/config'\nexport type { FlowLegendConfigInterface } from './components/flow-legend/config'\nexport type { CrosshairConfigInterface } from './components/crosshair/config'\nexport type { TimelineConfigInterface } from './components/timeline/config'\nexport type { SankeyConfigInterface } from './components/sankey/config'\nexport type { AreaConfigInterface } from './components/area/config'\nexport type { TopoJSONMapConfigInterface } from './components/topojson-map/config'\nexport type { LeafletMapConfigInterface } from './components/leaflet-map/config'\nexport type { LeafletFlowMapConfigInterface } from './components/leaflet-flow-map/config'\nexport type { ChordDiagramConfigInterface } from './components/chord-diagram/config'\nexport type { GraphConfigInterface } from './components/graph/config'\nexport type { VisControlsConfigInterface } from './components/vis-controls/config'\nexport type { DonutConfigInterface } from './components/donut/config'\nexport type { FreeBrushConfigInterface } from './components/free-brush/config'\nexport type { XYLabelsConfigInterface } from './components/xy-labels/config'\nexport type { NestedDonutConfigInterface } from './components/nested-donut/config'\nexport type { AnnotationsConfigInterface } from './components/annotations/config'\nexport type { TreemapConfigInterface } from './components/treemap/config'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}

package/index.js

@@ -34,6 +34,7 @@ export { FreeBrush } from './components/free-brush/index.js';
 export { XYLabels } from './components/xy-labels/index.js';
 export { NestedDonut } from './components/nested-donut/index.js';
 export { Annotations } from './components/annotations/index.js';
+export { Treemap } from './components/treemap/index.js';
 export { DONUT_HALF_ANGLE_RANGES, DONUT_HALF_ANGLE_RANGE_BOTTOM, DONUT_HALF_ANGLE_RANGE_LEFT, DONUT_HALF_ANGLE_RANGE_RIGHT, DONUT_HALF_ANGLE_RANGE_TOP } from './components/donut/constants.js';
 export { Curve, CurveType } from './types/curve.js';
 export { Symbol, SymbolType } from './types/symbol.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unovis/ts",
   "description": "Modular data visualization framework for React, Angular, Svelte, Vue, Solid, and vanilla TypeScript or JavaScript",
-  "version": "1.5.1-exf.3",
+  "version": "1.5.1-exf.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/f5/unovis.git",

package/types.d.ts

@@ -26,3 +26,4 @@ export * from "./components/bullet-legend/types";
 export * from "./components/xy-labels/types";
 export * from "./components/nested-donut/types";
 export * from "./components/annotations/types";
+export * from "./components/treemap/types";

package/types.js

@@ -26,6 +26,7 @@ export { BulletLegendOrientation, BulletShape } from './components/bullet-legend
 export { XYLabelPositioning } from './components/xy-labels/types.js';
 export { NestedDonutDirection, NestedDonutSegmentLabelAlignment } from './components/nested-donut/types.js';
 import './components/annotations/types.js';
+import './components/treemap/types.js';
 
 /* eslint-disable max-len */
 //# sourceMappingURL=types.js.map

package/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["/* eslint-disable max-len */\n// Global Types\nexport * from 'types/accessor'\nexport * from 'types/curve'\nexport * from 'types/symbol'\nexport * from 'types/scale'\nexport * from 'types/position'\nexport * from 'types/shape'\nexport * from 'types/component'\nexport * from 'types/text'\nexport * from 'types/map'\nexport * from 'types/spacing'\nexport * from 'types/graph'\nexport * from 'types/data'\nexport * from 'types/direction'\n\n// Component Types\nexport * from 'core/component/types'\nexport * from 'components/crosshair/types'\nexport * from 'components/axis/types'\nexport * from 'components/chord-diagram/types'\nexport * from 'components/topojson-map/types'\nexport * from 'components/leaflet-map/types'\nexport * from 'components/leaflet-map/renderer/map-style'\nexport * from 'components/graph/types'\nexport * from 'components/sankey/types'\nexport * from 'components/vis-controls/types'\nexport * from 'components/free-brush/types'\nexport * from 'components/bullet-legend/types'\nexport * from 'components/xy-labels/types'\nexport * from 'components/nested-donut/types'\nexport * from 'components/annotations/types'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["/* eslint-disable max-len */\n// Global Types\nexport * from 'types/accessor'\nexport * from 'types/curve'\nexport * from 'types/symbol'\nexport * from 'types/scale'\nexport * from 'types/position'\nexport * from 'types/shape'\nexport * from 'types/component'\nexport * from 'types/text'\nexport * from 'types/map'\nexport * from 'types/spacing'\nexport * from 'types/graph'\nexport * from 'types/data'\nexport * from 'types/direction'\n\n// Component Types\nexport * from 'core/component/types'\nexport * from 'components/crosshair/types'\nexport * from 'components/axis/types'\nexport * from 'components/chord-diagram/types'\nexport * from 'components/topojson-map/types'\nexport * from 'components/leaflet-map/types'\nexport * from 'components/leaflet-map/renderer/map-style'\nexport * from 'components/graph/types'\nexport * from 'components/sankey/types'\nexport * from 'components/vis-controls/types'\nexport * from 'components/free-brush/types'\nexport * from 'components/bullet-legend/types'\nexport * from 'components/xy-labels/types'\nexport * from 'components/nested-donut/types'\nexport * from 'components/annotations/types'\nexport * from 'components/treemap/types'\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA"}