@hpcc-js/html 3.4.0 → 3.4.2

package/dist/index.js

@@ -2,7 +2,7 @@ import { HTMLWidget as t, format as n, select as r } from "@hpcc-js/common";
 import { scopedLogger as i } from "@hpcc-js/util";
 import { React as a } from "@hpcc-js/react";
 //#region \0rolldown/runtime.js
-var o = "@hpcc-js/html", s = "3.4.0", c = "3.26.0", HTMLTooltip = class extends t {
+var o = "@hpcc-js/html", s = "3.4.2", c = "3.27.0", HTMLTooltip = class extends t {
 	_triggerElement;
 	_contentNode;
 	_prevContentNode;

package/dist/index.umd.cjs

@@ -1,4 +1,4 @@
-(function(t,n){typeof exports==`object`&&typeof module<`u`?n(exports,require("@hpcc-js/common"),require("@hpcc-js/util"),require("@hpcc-js/react")):typeof define==`function`&&define.amd?define([`exports`,`@hpcc-js/common`,`@hpcc-js/util`,`@hpcc-js/react`],n):(t=typeof globalThis<`u`?globalThis:t||self,n(t[`@hpcc-js/html`]={},t[`@hpcc-js/common`],t[`@hpcc-js/util`],t[`@hpcc-js/react`]))})(this,function(t,n,r,i){Object.defineProperty(t,Symbol.toStringTag,{value:`Module`});var a=`@hpcc-js/html`,o=`3.4.0`,s=`3.26.0`,HTMLTooltip=class extends n.HTMLWidget{_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=t=>`<b>_tooltipHTMLCallback is undefined</b>`;_logger=(0,r.scopedLogger)(`html/HTMLTooltip`);constructor(){super(),this.visible(!1)}tooltipHTML(t){return this._tooltipHTMLCallback=t,this}tooltipContent(t){return arguments.length?(this._contentNode=t,this):this._contentNode}triggerElement(t){return this._triggerElement=t,this}enter(t,r){super.enter(t,r);let i=(0,n.select)(`body`);this._tooltipElement=i.append(`div`).attr(`class`,`tooltip-div`).style(`z-index`,`2147483638`).style(`position`,`fixed`),this._arrowElement=i.append(`div`).attr(`class`,`arrow-div`).style(`z-index`,`2147483638`).style(`position`,`fixed`)}update(t,n){if(super.update(t,n),this._contentNode!==this._prevContentNode){let t=this._tooltipElement.node();[...t.querySelectorAll(`*`)].map(t=>t.__data__).filter(t=>t).forEach(t=>{typeof t.target==`function`&&t.target(null),typeof t.exit==`function`&&t.exit()}),t.innerHTML=``,t.appendChild(this._contentNode),this._prevContentNode=this._contentNode}if(this._contentNode?this.onShowContent(this._contentNode):this._tooltipElement.html(()=>this._tooltipHTMLCallback(this.data())),this.fitContent()){this._tooltipElement.style(`width`,`auto`).style(`height`,`auto`).style(`padding`,`0px`).style(`box-sizing`,`content-box`);let t=this._tooltipElement.node().getBoundingClientRect();this.tooltipWidth_default(t.width),this.tooltipHeight_default(t.height)}this._closing=!1,this._tooltipElement.style(`background-color`,this.tooltipColor()).style(`color`,this.fontColor()).style(`width`,this.tooltipWidth()+`px`).style(`height`,this.tooltipHeight()+`px`).style(`opacity`,1).style(`padding`,this.padding()+`px`).style(`pointer-events`,this.enablePointerEvents()?`all`:`none`).style(`box-sizing`,`content-box`),this._arrowElement.style(`opacity`,1).style(`pointer-events`,`none`),this.updateTooltipPosition()}onShowContent(t){}updateTooltipPosition(){let t=this.calcReferenceBBox(),n=this.calcTooltipDirection(t),r=t[n];return this._tooltipElement.style(`top`,r.y+`px`).style(`left`,r.x+`px`),this.setArrowPosition(r,n),r}calcTooltipDirection(t){let n=Object.keys(t),r=this.direction();n.sort((t,n)=>t===r?-1:1);let i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<n.length;r++){let a={top:t[n[r]].y,left:t[n[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(a,i))return n[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${r}'`),this._logger.debug(i),this._logger.debug({top:t[r].y,left:t[r].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),r}rectFits(t,n){return t.top>=n.top&&t.left>=n.left&&t.width+t.left<=n.width+n.left&&t.height+t.top<=n.height+n.top}setArrowPosition(t,n){let r,i,a=`border-top-color`;switch(this._arrowElement.style(`border`,`${this.arrowHeight()}px solid ${this.tooltipColor()}`).style(`border-top-color`,`transparent`).style(`border-right-color`,`transparent`).style(`border-bottom-color`,`transparent`).style(`border-left-color`,`transparent`),n){case`n`:r=t.y+this.tooltipHeight()+this.padding()*2,i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),a=`border-top-color`,this._arrowElement.style(`border-top-width`,`${this.arrowHeight()}px`).style(`border-bottom-width`,`0px`).style(`border-left-width`,`${this.arrowWidth()/2}px`).style(`border-right-width`,`${this.arrowWidth()/2}px`);break;case`s`:r=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,a=`border-bottom-color`,this._arrowElement.style(`border-top-width`,`0px`).style(`border-bottom-width`,`${this.arrowHeight()}px`).style(`border-left-width`,`${this.arrowWidth()/2}px`).style(`border-right-width`,`${this.arrowWidth()/2}px`);break;case`e`:r=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),a=`border-right-color`,this._arrowElement.style(`border-top-width`,`${this.arrowWidth()/2}px`).style(`border-bottom-width`,`${this.arrowWidth()/2}px`).style(`border-left-width`,`0px`).style(`border-right-width`,`${this.arrowHeight()}px`);break;case`w`:r=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+this.padding()*2,a=`border-left-color`,this._arrowElement.style(`border-top-width`,`${this.arrowWidth()/2}px`).style(`border-bottom-width`,`${this.arrowWidth()/2}px`).style(`border-left-width`,`${this.arrowHeight()}px`).style(`border-right-width`,`0px`);break}return r!==void 0&&i!==void 0?this._arrowElement.style(`top`,r+`px`).style(`left`,i+`px`).style(a,this.tooltipColor()).style(`opacity`,1):this._arrowElement.style(`opacity`,0),t}getReferenceNode(){return this._triggerElement?this._triggerElement.node():this.element().node().parentNode.parentNode}_cursorLoc;calcReferenceBBox(){let{top:t,left:n,width:r,height:i}=this.getReferenceNode().getBoundingClientRect(),a=this.tooltipWidth(),o=this.tooltipHeight(),s=a/2,c=o/2,l=this.arrowHeight(),d=this.padding(),f=d*2;return this.followCursor()&&this._cursorLoc&&(n=this._cursorLoc[0],t=this._cursorLoc[1],r=1,i=1),{n:{x:n+r/2-s-d,y:t-o-l-f},e:{x:n+r+l,y:t+i/2-c-d},s:{x:n+r/2-s-d,y:t+i+l},w:{x:n-a-l-f,y:t+i/2-c-d},nw:{x:n-a-f,y:t-o-f},ne:{x:n+r,y:t-o-f},se:{x:n+r,y:t+i},sw:{x:n-a-f,y:t+i}}}_closing=!1;mouseout(){this._closing=!0,this._tooltipElement.on(`mouseover`,()=>{this._closing=!1}),this._tooltipElement.on(`mouseout`,()=>{this.mouseout()}),setTimeout(()=>{this._closing&&this.visible(!1)},this.closeDelay())}visible(t){return arguments.length?(this._arrowElement&&(this._arrowElement.style(`visibility`,t?`visible`:`hidden`),this._tooltipElement.style(`visibility`,t?`visible`:`hidden`)),super.visible(t),this):super.visible()}exit(t,n){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,n)}};HTMLTooltip.prototype._class+=` html_HTMLTooltip`,HTMLTooltip.prototype.publish(`fitContent`,!1,`boolean`,`If true, tooltip will grow to fit its html content`),HTMLTooltip.prototype.publish(`followCursor`,!1,`boolean`,`If true, tooltip will display relative to cursor location`),HTMLTooltip.prototype.publish(`closeDelay`,400,`number`,`Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)`),HTMLTooltip.prototype.publish(`direction`,`n`,`set`,`Direction in which to display the tooltip`,[`n`,`s`,`e`,`w`,`ne`,`nw`,`se`,`sw`]),HTMLTooltip.prototype.publish(`padding`,8,`number`,`Padding (pixels)`),HTMLTooltip.prototype.publish(`arrowWidth`,16,`number`,`Width (or height depending on direction) of the tooltip arrow (pixels)`),HTMLTooltip.prototype.publish(`arrowHeight`,8,`number`,`Height (or width depending on direction) of the tooltip arrow (pixels)`),HTMLTooltip.prototype.publish(`fontColor`,`#FFF`,`html-color`,`The default font color for text in the tooltip`),HTMLTooltip.prototype.publish(`tooltipColor`,`#000000EE`,`html-color`,`Background color of the tooltip`),HTMLTooltip.prototype.publish(`tooltipWidth`,200,`number`,`Width of the tooltip (not including arrow) (pixels)`),HTMLTooltip.prototype.publish(`tooltipHeight`,200,`number`,`Height of the tooltip (not including arrow) (pixels)`),HTMLTooltip.prototype.publish(`enablePointerEvents`,!1,`boolean`,`If true, the 'pointer-events: all' style will be used`);var SimpleTable=class extends n.HTMLWidget{_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,n){super.enter(t,n),this._table=n.append(`table`),this._thead=this._table.append(`thead`),this._theadRow=this._thead.append(`tr`),this._tbody=this._table.append(`tbody`)}update(t,r){super.update(t,r),this._table.style(`width`,this.autoWidth()?`auto`:`100%`);let i=this._theadRow.selectAll(`th`).data(this.columns());i.enter().append(`th`).attr(`class`,(t,n)=>`th-${n}`).merge(i).text(t=>t.toString()),i.exit().remove();let a=this._tbody.selectAll(`tr`).data(this.transformData());a.enter().append(`tr`).merge(a).each(function(t){let r=(0,n.select)(this).selectAll(`td`).data(t);r.enter().append(`td`).attr(`class`,(t,n)=>`col-${n}`).merge(r).text(t=>t.toString()),r.exit().remove()}),a.exit().remove()}};SimpleTable.prototype._class+=` html_SimpleTable`,SimpleTable.prototype.publish(`autoWidth`,!1,`boolean`,`If true, table width will be set to 'auto'. If false, the width is set to '100%'`);var StyledTable=class extends SimpleTable{constructor(){super()}applyStyleObject(t,n){Object.keys(n).forEach(r=>{t.style(r,n[r])})}update(t,n){super.update(t,n),n.selectAll(`tr,th,td`).attr(`style`,``).style(`font-family`,this.fontFamily()).style(`color`,this.fontColor()),this.theadColumnStyles().forEach((t,r)=>{this.applyStyleObject(n.select(`.th-${r}`),t)}),this.tbodyColumnStyles().forEach((t,r)=>{this.applyStyleObject(n.selectAll(`.col-${r}`),t)});let r=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,a=n.selectAll(`tbody > tr`);if(r){let t=a.select(function(t,n){return n%2?this:null});this.applyStyleObject(t,this.evenRowStyles())}if(i){let t=a.select(function(t,n,r){return n===r.length-1?this:null});this.applyStyleObject(t,this.lastRowStyles())}}};StyledTable.prototype._class+=` html_StyledTable`,StyledTable.prototype.publish(`fontFamily`,`Verdana`,`string`,`Base font-family used within the table`),StyledTable.prototype.publish(`fontColor`,`#333`,`string`,`Base font color used within the table`),StyledTable.prototype.publish(`theadColumnStyles`,[],`array`,`Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])`),StyledTable.prototype.publish(`tbodyColumnStyles`,[],`array`,`Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])`),StyledTable.prototype.publish(`lastRowStyles`,{},`object`,`Object containing styles for the last row (ex: {"color":"red"})`),StyledTable.prototype.publish(`evenRowStyles`,{},`object`,`Object containing styles for even rows (ex: {"background-color":"#AAA"})`);var BreakdownTable=class extends StyledTable{_tooltip;constructor(){super()}transformData(){let t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){let n=this.data().length,r=this.data().reduce((t,n)=>t+n[1],0),i=[],a=0;this.data().sort((t,n)=>t[1]>n[1]?-1:1);let o=n-t>0;if(this.data().filter((n,r)=>o?r<t-1:!0).forEach(t=>{let n=Math.round(t[1]/r*100);a+=n,i.push([t[0],n+`%`])}),o){let r=`${this.otherLabel()} (${n-t+1})`,o=`~`+(100-a)+`%`;i.push([r,o])}return i}calculateRowCount(){let t=this.columns().length>0?this.thFontSize()+5:0,n=this.fontSize()+5,r=this.height()-t;return Math.floor(r/n)}enter(t,n){super.enter(t,n),this._tooltip=new HTMLTooltip().target(t),this._tooltip.tooltipHTML(t=>{let n=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),r=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),i=2*(Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).width))+30)+this._tooltip.padding()*2,a=r*Math.ceil((t.length-n)/2)+this._tooltip.padding()*2;this._tooltip.tooltipWidth(i),this._tooltip.tooltipHeight(a);let o=this.breakdownData(this.data().length).slice(n-1);return`<div style="
+(function(t,n){typeof exports==`object`&&typeof module<`u`?n(exports,require("@hpcc-js/common"),require("@hpcc-js/util"),require("@hpcc-js/react")):typeof define==`function`&&define.amd?define([`exports`,`@hpcc-js/common`,`@hpcc-js/util`,`@hpcc-js/react`],n):(t=typeof globalThis<`u`?globalThis:t||self,n(t[`@hpcc-js/html`]={},t[`@hpcc-js/common`],t[`@hpcc-js/util`],t[`@hpcc-js/react`]))})(this,function(t,n,r,i){Object.defineProperty(t,Symbol.toStringTag,{value:`Module`});var a=`@hpcc-js/html`,o=`3.4.2`,s=`3.27.0`,HTMLTooltip=class extends n.HTMLWidget{_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=t=>`<b>_tooltipHTMLCallback is undefined</b>`;_logger=(0,r.scopedLogger)(`html/HTMLTooltip`);constructor(){super(),this.visible(!1)}tooltipHTML(t){return this._tooltipHTMLCallback=t,this}tooltipContent(t){return arguments.length?(this._contentNode=t,this):this._contentNode}triggerElement(t){return this._triggerElement=t,this}enter(t,r){super.enter(t,r);let i=(0,n.select)(`body`);this._tooltipElement=i.append(`div`).attr(`class`,`tooltip-div`).style(`z-index`,`2147483638`).style(`position`,`fixed`),this._arrowElement=i.append(`div`).attr(`class`,`arrow-div`).style(`z-index`,`2147483638`).style(`position`,`fixed`)}update(t,n){if(super.update(t,n),this._contentNode!==this._prevContentNode){let t=this._tooltipElement.node();[...t.querySelectorAll(`*`)].map(t=>t.__data__).filter(t=>t).forEach(t=>{typeof t.target==`function`&&t.target(null),typeof t.exit==`function`&&t.exit()}),t.innerHTML=``,t.appendChild(this._contentNode),this._prevContentNode=this._contentNode}if(this._contentNode?this.onShowContent(this._contentNode):this._tooltipElement.html(()=>this._tooltipHTMLCallback(this.data())),this.fitContent()){this._tooltipElement.style(`width`,`auto`).style(`height`,`auto`).style(`padding`,`0px`).style(`box-sizing`,`content-box`);let t=this._tooltipElement.node().getBoundingClientRect();this.tooltipWidth_default(t.width),this.tooltipHeight_default(t.height)}this._closing=!1,this._tooltipElement.style(`background-color`,this.tooltipColor()).style(`color`,this.fontColor()).style(`width`,this.tooltipWidth()+`px`).style(`height`,this.tooltipHeight()+`px`).style(`opacity`,1).style(`padding`,this.padding()+`px`).style(`pointer-events`,this.enablePointerEvents()?`all`:`none`).style(`box-sizing`,`content-box`),this._arrowElement.style(`opacity`,1).style(`pointer-events`,`none`),this.updateTooltipPosition()}onShowContent(t){}updateTooltipPosition(){let t=this.calcReferenceBBox(),n=this.calcTooltipDirection(t),r=t[n];return this._tooltipElement.style(`top`,r.y+`px`).style(`left`,r.x+`px`),this.setArrowPosition(r,n),r}calcTooltipDirection(t){let n=Object.keys(t),r=this.direction();n.sort((t,n)=>t===r?-1:1);let i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<n.length;r++){let a={top:t[n[r]].y,left:t[n[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(a,i))return n[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${r}'`),this._logger.debug(i),this._logger.debug({top:t[r].y,left:t[r].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),r}rectFits(t,n){return t.top>=n.top&&t.left>=n.left&&t.width+t.left<=n.width+n.left&&t.height+t.top<=n.height+n.top}setArrowPosition(t,n){let r,i,a=`border-top-color`;switch(this._arrowElement.style(`border`,`${this.arrowHeight()}px solid ${this.tooltipColor()}`).style(`border-top-color`,`transparent`).style(`border-right-color`,`transparent`).style(`border-bottom-color`,`transparent`).style(`border-left-color`,`transparent`),n){case`n`:r=t.y+this.tooltipHeight()+this.padding()*2,i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),a=`border-top-color`,this._arrowElement.style(`border-top-width`,`${this.arrowHeight()}px`).style(`border-bottom-width`,`0px`).style(`border-left-width`,`${this.arrowWidth()/2}px`).style(`border-right-width`,`${this.arrowWidth()/2}px`);break;case`s`:r=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,a=`border-bottom-color`,this._arrowElement.style(`border-top-width`,`0px`).style(`border-bottom-width`,`${this.arrowHeight()}px`).style(`border-left-width`,`${this.arrowWidth()/2}px`).style(`border-right-width`,`${this.arrowWidth()/2}px`);break;case`e`:r=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),a=`border-right-color`,this._arrowElement.style(`border-top-width`,`${this.arrowWidth()/2}px`).style(`border-bottom-width`,`${this.arrowWidth()/2}px`).style(`border-left-width`,`0px`).style(`border-right-width`,`${this.arrowHeight()}px`);break;case`w`:r=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+this.padding()*2,a=`border-left-color`,this._arrowElement.style(`border-top-width`,`${this.arrowWidth()/2}px`).style(`border-bottom-width`,`${this.arrowWidth()/2}px`).style(`border-left-width`,`${this.arrowHeight()}px`).style(`border-right-width`,`0px`);break}return r!==void 0&&i!==void 0?this._arrowElement.style(`top`,r+`px`).style(`left`,i+`px`).style(a,this.tooltipColor()).style(`opacity`,1):this._arrowElement.style(`opacity`,0),t}getReferenceNode(){return this._triggerElement?this._triggerElement.node():this.element().node().parentNode.parentNode}_cursorLoc;calcReferenceBBox(){let{top:t,left:n,width:r,height:i}=this.getReferenceNode().getBoundingClientRect(),a=this.tooltipWidth(),o=this.tooltipHeight(),s=a/2,c=o/2,l=this.arrowHeight(),d=this.padding(),f=d*2;return this.followCursor()&&this._cursorLoc&&(n=this._cursorLoc[0],t=this._cursorLoc[1],r=1,i=1),{n:{x:n+r/2-s-d,y:t-o-l-f},e:{x:n+r+l,y:t+i/2-c-d},s:{x:n+r/2-s-d,y:t+i+l},w:{x:n-a-l-f,y:t+i/2-c-d},nw:{x:n-a-f,y:t-o-f},ne:{x:n+r,y:t-o-f},se:{x:n+r,y:t+i},sw:{x:n-a-f,y:t+i}}}_closing=!1;mouseout(){this._closing=!0,this._tooltipElement.on(`mouseover`,()=>{this._closing=!1}),this._tooltipElement.on(`mouseout`,()=>{this.mouseout()}),setTimeout(()=>{this._closing&&this.visible(!1)},this.closeDelay())}visible(t){return arguments.length?(this._arrowElement&&(this._arrowElement.style(`visibility`,t?`visible`:`hidden`),this._tooltipElement.style(`visibility`,t?`visible`:`hidden`)),super.visible(t),this):super.visible()}exit(t,n){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,n)}};HTMLTooltip.prototype._class+=` html_HTMLTooltip`,HTMLTooltip.prototype.publish(`fitContent`,!1,`boolean`,`If true, tooltip will grow to fit its html content`),HTMLTooltip.prototype.publish(`followCursor`,!1,`boolean`,`If true, tooltip will display relative to cursor location`),HTMLTooltip.prototype.publish(`closeDelay`,400,`number`,`Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)`),HTMLTooltip.prototype.publish(`direction`,`n`,`set`,`Direction in which to display the tooltip`,[`n`,`s`,`e`,`w`,`ne`,`nw`,`se`,`sw`]),HTMLTooltip.prototype.publish(`padding`,8,`number`,`Padding (pixels)`),HTMLTooltip.prototype.publish(`arrowWidth`,16,`number`,`Width (or height depending on direction) of the tooltip arrow (pixels)`),HTMLTooltip.prototype.publish(`arrowHeight`,8,`number`,`Height (or width depending on direction) of the tooltip arrow (pixels)`),HTMLTooltip.prototype.publish(`fontColor`,`#FFF`,`html-color`,`The default font color for text in the tooltip`),HTMLTooltip.prototype.publish(`tooltipColor`,`#000000EE`,`html-color`,`Background color of the tooltip`),HTMLTooltip.prototype.publish(`tooltipWidth`,200,`number`,`Width of the tooltip (not including arrow) (pixels)`),HTMLTooltip.prototype.publish(`tooltipHeight`,200,`number`,`Height of the tooltip (not including arrow) (pixels)`),HTMLTooltip.prototype.publish(`enablePointerEvents`,!1,`boolean`,`If true, the 'pointer-events: all' style will be used`);var SimpleTable=class extends n.HTMLWidget{_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,n){super.enter(t,n),this._table=n.append(`table`),this._thead=this._table.append(`thead`),this._theadRow=this._thead.append(`tr`),this._tbody=this._table.append(`tbody`)}update(t,r){super.update(t,r),this._table.style(`width`,this.autoWidth()?`auto`:`100%`);let i=this._theadRow.selectAll(`th`).data(this.columns());i.enter().append(`th`).attr(`class`,(t,n)=>`th-${n}`).merge(i).text(t=>t.toString()),i.exit().remove();let a=this._tbody.selectAll(`tr`).data(this.transformData());a.enter().append(`tr`).merge(a).each(function(t){let r=(0,n.select)(this).selectAll(`td`).data(t);r.enter().append(`td`).attr(`class`,(t,n)=>`col-${n}`).merge(r).text(t=>t.toString()),r.exit().remove()}),a.exit().remove()}};SimpleTable.prototype._class+=` html_SimpleTable`,SimpleTable.prototype.publish(`autoWidth`,!1,`boolean`,`If true, table width will be set to 'auto'. If false, the width is set to '100%'`);var StyledTable=class extends SimpleTable{constructor(){super()}applyStyleObject(t,n){Object.keys(n).forEach(r=>{t.style(r,n[r])})}update(t,n){super.update(t,n),n.selectAll(`tr,th,td`).attr(`style`,``).style(`font-family`,this.fontFamily()).style(`color`,this.fontColor()),this.theadColumnStyles().forEach((t,r)=>{this.applyStyleObject(n.select(`.th-${r}`),t)}),this.tbodyColumnStyles().forEach((t,r)=>{this.applyStyleObject(n.selectAll(`.col-${r}`),t)});let r=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,a=n.selectAll(`tbody > tr`);if(r){let t=a.select(function(t,n){return n%2?this:null});this.applyStyleObject(t,this.evenRowStyles())}if(i){let t=a.select(function(t,n,r){return n===r.length-1?this:null});this.applyStyleObject(t,this.lastRowStyles())}}};StyledTable.prototype._class+=` html_StyledTable`,StyledTable.prototype.publish(`fontFamily`,`Verdana`,`string`,`Base font-family used within the table`),StyledTable.prototype.publish(`fontColor`,`#333`,`string`,`Base font color used within the table`),StyledTable.prototype.publish(`theadColumnStyles`,[],`array`,`Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])`),StyledTable.prototype.publish(`tbodyColumnStyles`,[],`array`,`Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])`),StyledTable.prototype.publish(`lastRowStyles`,{},`object`,`Object containing styles for the last row (ex: {"color":"red"})`),StyledTable.prototype.publish(`evenRowStyles`,{},`object`,`Object containing styles for even rows (ex: {"background-color":"#AAA"})`);var BreakdownTable=class extends StyledTable{_tooltip;constructor(){super()}transformData(){let t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){let n=this.data().length,r=this.data().reduce((t,n)=>t+n[1],0),i=[],a=0;this.data().sort((t,n)=>t[1]>n[1]?-1:1);let o=n-t>0;if(this.data().filter((n,r)=>o?r<t-1:!0).forEach(t=>{let n=Math.round(t[1]/r*100);a+=n,i.push([t[0],n+`%`])}),o){let r=`${this.otherLabel()} (${n-t+1})`,o=`~`+(100-a)+`%`;i.push([r,o])}return i}calculateRowCount(){let t=this.columns().length>0?this.thFontSize()+5:0,n=this.fontSize()+5,r=this.height()-t;return Math.floor(r/n)}enter(t,n){super.enter(t,n),this._tooltip=new HTMLTooltip().target(t),this._tooltip.tooltipHTML(t=>{let n=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),r=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),i=2*(Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).width))+30)+this._tooltip.padding()*2,a=r*Math.ceil((t.length-n)/2)+this._tooltip.padding()*2;this._tooltip.tooltipWidth(i),this._tooltip.tooltipHeight(a);let o=this.breakdownData(this.data().length).slice(n-1);return`<div style="
                     width: 100%;
                     height: 100%;
                     font-size: ${this.fontSize()}px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/html",
-    "version": "3.4.0",
+    "version": "3.4.2",
     "description": "hpcc-js - Viz HTML",
     "type": "module",
     "main": "./dist/index.umd.cjs",
@@ -21,7 +21,7 @@
         "types/*"
     ],
     "scripts": {
-        "clean": "rimraf --glob lib* types dist *.tsbuildinfo .turbo",
+        "clean": "rimraf --glob lib* types types-3.4 dist *.tsbuildinfo .turbo",
         "bundle": "vite build",
         "bundle-watch": "vite build --watch",
         "bundle-serve": "vite --port 5510",
@@ -39,12 +39,12 @@
         "update-major": "npx --yes npm-check-updates -u"
     },
     "dependencies": {
-        "@hpcc-js/common": "^3.8.0",
-        "@hpcc-js/react": "^3.5.0",
-        "@hpcc-js/util": "^3.6.0"
+        "@hpcc-js/common": "^3.8.2",
+        "@hpcc-js/react": "^3.5.2",
+        "@hpcc-js/util": "^3.6.2"
     },
     "devDependencies": {
-        "@hpcc-js/esbuild-plugins": "^1.9.0",
+        "@hpcc-js/esbuild-plugins": "^1.9.2",
         "d3-format": "^1",
         "d3-selection": "^1"
     },
@@ -59,5 +59,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "b762adfab7d03d06ea8cfab59059456100ea757c"
+    "gitHead": "9d31241482c78decca86e3bf624244ce5b40f3d6"
 }