@hpcc-js/html 3.3.0 → 3.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +782 -979
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +3 -2
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +6 -6
package/dist/index.umd.cjs
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@hpcc-js/common"),require("@hpcc-js/util"),require("@hpcc-js/react")):"function"==typeof define&&define.amd?define(["exports","@hpcc-js/common","@hpcc-js/util","@hpcc-js/react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["@hpcc-js/html"]={},t["@hpcc-js/common"],t["@hpcc-js/util"],t["@hpcc-js/react"])}(this,function(t,e,o,i){var n=Object.create,r=Object.defineProperty,l=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,h=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty,a=(t,e,o)=>(o=null!=t?n(h(t)):{},((t,e,o,i)=>{if(e&&"object"==typeof e||"function"==typeof e)for(var n,h=s(e),a=0,c=h.length;a<c;a++)n=h[a],p.call(t,n)||n===o||r(t,n,{get:(t=>e[t]).bind(null,n),enumerable:!(i=l(e,n))||i.enumerable});return t})(!e&&t&&t.__esModule?o:r(o,"default",{value:t,enumerable:!0}),t));e=a(e),o=a(o),i=a(i);var c=class extends e.HTMLWidget{_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=t=>"<b>_tooltipHTMLCallback is undefined</b>";_logger=(0,o.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,o){super.enter(t,o);const i=(0,e.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,e){if(super.update(t,e),this._contentNode!==this._prevContentNode){const t=this._tooltipElement.node();[...t.querySelectorAll("*")].map(t=>t.__data__).filter(t=>t).forEach(t=>{"function"==typeof t.target&&t.target(null),"function"==typeof t.exit&&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");const 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(){const t=this.calcReferenceBBox(),e=this.calcTooltipDirection(t),o=t[e];return this._tooltipElement.style("top",o.y+"px").style("left",o.x+"px"),this.setArrowPosition(o,e),o}calcTooltipDirection(t){const e=Object.keys(t),o=this.direction();e.sort((t,e)=>t===o?-1:1);const i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let n=0;n<e.length;n++){const o={top:t[e[n]].y,left:t[e[n]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(o,i))return e[n]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${o}'`),this._logger.debug(i),this._logger.debug({top:t[o].y,left:t[o].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),o}rectFits(t,e){return t.top>=e.top&&t.left>=e.left&&t.width+t.left<=e.width+e.left&&t.height+t.top<=e.height+e.top}setArrowPosition(t,e){let o,i,n="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"),e){case"n":o=t.y+this.tooltipHeight()+2*this.padding(),i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),n="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":o=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,n="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":o=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),n="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":o=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+2*this.padding(),n="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")}return void 0!==o&&void 0!==i?this._arrowElement.style("top",o+"px").style("left",i+"px").style(n,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:e,width:o,height:i}=this.getReferenceNode().getBoundingClientRect();const n=this.tooltipWidth(),r=this.tooltipHeight(),l=n/2,s=r/2,h=this.arrowHeight(),p=this.padding(),a=2*p;return this.followCursor()&&this._cursorLoc&&(e=this._cursorLoc[0],t=this._cursorLoc[1],o=1,i=1),{n:{x:e+o/2-l-p,y:t-r-h-a},e:{x:e+o+h,y:t+i/2-s-p},s:{x:e+o/2-l-p,y:t+i+h},w:{x:e-n-h-a,y:t+i/2-s-p},nw:{x:e-n-a,y:t-r-a},ne:{x:e+o,y:t-r-a},se:{x:e+o,y:t+i},sw:{x:e-n-a,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,e){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,e)}};c.prototype._class+=" html_HTMLTooltip",c.prototype.publish("fitContent",!1,"boolean","If true, tooltip will grow to fit its html content"),c.prototype.publish("followCursor",!1,"boolean","If true, tooltip will display relative to cursor location"),c.prototype.publish("closeDelay",400,"number","Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)"),c.prototype.publish("direction","n","set","Direction in which to display the tooltip",["n","s","e","w","ne","nw","se","sw"]),c.prototype.publish("padding",8,"number","Padding (pixels)"),c.prototype.publish("arrowWidth",16,"number","Width (or height depending on direction) of the tooltip arrow (pixels)"),c.prototype.publish("arrowHeight",8,"number","Height (or width depending on direction) of the tooltip arrow (pixels)"),c.prototype.publish("fontColor","#FFF","html-color","The default font color for text in the tooltip"),c.prototype.publish("tooltipColor","#000000EE","html-color","Background color of the tooltip"),c.prototype.publish("tooltipWidth",200,"number","Width of the tooltip (not including arrow) (pixels)"),c.prototype.publish("tooltipHeight",200,"number","Height of the tooltip (not including arrow) (pixels)"),c.prototype.publish("enablePointerEvents",!1,"boolean","If true, the 'pointer-events: all' style will be used");var _=class extends e.HTMLWidget{_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,e){super.enter(t,e),this._table=e.append("table"),this._thead=this._table.append("thead"),this._theadRow=this._thead.append("tr"),this._tbody=this._table.append("tbody")}update(t,o){super.update(t,o),this._table.style("width",this.autoWidth()?"auto":"100%");const i=this._theadRow.selectAll("th").data(this.columns());i.enter().append("th").attr("class",(t,e)=>`th-${e}`).merge(i).text(t=>t.toString()),i.exit().remove();const n=this._tbody.selectAll("tr").data(this.transformData());n.enter().append("tr").merge(n).each(function(t){const o=(0,e.select)(this).selectAll("td").data(t);o.enter().append("td").attr("class",(t,e)=>`col-${e}`).merge(o).text(t=>t.toString()),o.exit().remove()}),n.exit().remove()}};_.prototype._class+=" html_SimpleTable",_.prototype.publish("autoWidth",!1,"boolean","If true, table width will be set to 'auto'. If false, the width is set to '100%'");var d=class extends _{constructor(){super()}applyStyleObject(t,e){Object.keys(e).forEach(o=>{t.style(o,e[o])})}update(t,e){super.update(t,e),e.selectAll("tr,th,td").attr("style","").style("font-family",this.fontFamily()).style("color",this.fontColor()),this.theadColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.select(`.th-${o}`),t)}),this.tbodyColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.selectAll(`.col-${o}`),t)});const o=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,n=e.selectAll("tbody > tr");if(o){const t=n.select(function(t,e){return e%2?this:null});this.applyStyleObject(t,this.evenRowStyles())}if(i){const t=n.select(function(t,e,o){return e===o.length-1?this:null});this.applyStyleObject(t,this.lastRowStyles())}}};d.prototype._class+=" html_StyledTable",d.prototype.publish("fontFamily","Verdana","string","Base font-family used within the table"),d.prototype.publish("fontColor","#333","string","Base font color used within the table"),d.prototype.publish("theadColumnStyles",[],"array",'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])'),d.prototype.publish("tbodyColumnStyles",[],"array",'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])'),d.prototype.publish("lastRowStyles",{},"object",'Object containing styles for the last row (ex: {"color":"red"})'),d.prototype.publish("evenRowStyles",{},"object",'Object containing styles for even rows (ex: {"background-color":"#AAA"})');var u=class extends d{_tooltip;constructor(){super()}transformData(){const t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){const e=this.data().length,o=this.data().reduce((t,e)=>t+e[1],0),i=[];let n=0;this.data().sort((t,e)=>t[1]>e[1]?-1:1);const r=e-t>0;if(this.data().filter((e,o)=>!r||o<t-1).forEach(t=>{const e=Math.round(t[1]/o*100);n+=e,i.push([t[0],e+"%"])}),r){const o=`${this.otherLabel()} (${e-t+1})`,r="~"+(100-n)+"%";i.push([o,r])}return i}calculateRowCount(){const t=this.columns().length>0?this.thFontSize()+5:0,e=this.fontSize()+5,o=this.height()-t;return Math.floor(o/e)}enter(t,e){super.enter(t,e),this._tooltip=(new c).target(t),this._tooltip.tooltipHTML(t=>{const e=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),o=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),i=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).width)),n=2*(i+30)+2*this._tooltip.padding(),r=o*Math.ceil((t.length-e)/2)+2*this._tooltip.padding();this._tooltip.tooltipWidth(n),this._tooltip.tooltipHeight(r);const l=this.breakdownData(this.data().length).slice(e-1);return`<div style="\n width: 100%;\n height: 100%;\n font-size: ${this.fontSize()}px;\n ">${l.map(t=>`<div style="\n float:left;\n width:${Math.floor(49.5)}%;\n ">${t[0]}: ${t[1]}</div>`).join("")}</div>`})}update(t,e){if(this.theadColumnStyles_default([{color:this.thFirstColor(),"font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.labelAlignment(),width:"auto",padding:"0px"},{width:"1%","font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.percentageAlignment(),padding:"0px"}]),this.tbodyColumnStyles_default([{color:this.topLabelColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.topPercentageColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),this.lastRowStyles_default([{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherLabelBold()?"bold":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherPercentageBold()?"bold":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),super.update(t,e),(this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount())<this.data().length){const t=e.select("tbody > tr:last-child"),o=this;t.on("mouseout.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.visible(!1).render()}).on("mouseenter.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.direction("n").data(o.data()).visible(!0).render()})}}};u.prototype._class+=" html_BreakdownTable",u.prototype.publish("useCalculatedRowCount",!0,"boolean","If true, rowCount will be calculated and its default will be overwritten"),u.prototype.publish("rowCount",5,"number","Number of total rows to display (including the 'other' row)",void 0,{disable:t=>t.useCalculatedRowCount()}),u.prototype.publish("fontSize",14,"number","Font size (pixels)"),u.prototype.publish("labelAlignment","left","set","Alignment of the label column text",["left","center","right"]),u.prototype.publish("percentageAlignment","center","set","Alignment of the percentage column text",["left","center","right"]),u.prototype.publish("topLabelColor","#333","html-color","Color of displayed 'top' labels"),u.prototype.publish("topPercentageColor","#1A99D5","html-color","Color of displayed 'top' percentages"),u.prototype.publish("topPercentageBold",!0,"html-color","If true, the 'top' percentages will be bold"),u.prototype.publish("otherLabel","Other","string","Label text for the 'other' row"),u.prototype.publish("otherLabelColor","#AAA","html-color","Color of the 'other' label"),u.prototype.publish("otherLabelBold",!1,"html-color","If true, the 'other' label will be bold"),u.prototype.publish("otherPercentageColor","#AAA","html-color","Color of the 'other' percentage"),u.prototype.publish("otherPercentageBold",!1,"html-color","If true, the 'other' percentage will be bold"),u.prototype.publish("thFontWeight","bold","string","Font weight for th elements"),u.prototype.publish("thFontSize",26,"number","Font size for th elements"),u.prototype.publish("thFirstColor","#333","html-color","Text color of the first th element"),u.prototype.publish("thLastColor","#333","html-color","Text color of the last th element");var f=class extends e.HTMLWidget{static Component=i.React.Component;static createElement=i.React.createElement;rootNode;jsxRender(t,e){this.rootNode=i.React.render(t,e,this.rootNode)}};f.prototype._class+=" html_JSXWidget";var y=class{_attrs;_children;constructor(t,e){this._attrs=t,this._children=e}type(){return"div"}attrs(){return this._attrs}attr(t){return this._attrs[t]}children(){return this._children}update(t){for(const e in this._attrs)t.attr(e,this._attrs[e])}render(t){const o=t.selectAll(`${t.node().tagName} > *`).data([this]);return o.exit().remove(),o.enter().append(this.type()).attr("reactd3",0).merge(o).each(function(t){const o=(0,e.select)(this);t.update(o),t.renderChildren(o)})}renderChildren(t){const o=t.selectAll(`${t.node().tagName} > *`).data(this._children);return o.exit().remove(),o.enter().append(t=>document.createElement(t.type())).attr("reactd3",(t,e)=>e).merge(o).each(function(t){const o=(0,e.select)(this);t.update(o),t.renderChildren(o)})}},g=class extends y{_type;constructor(t,e,o){super(e,o),this._type=t}type(){return this._type}},m=class extends y{_text;constructor(t){super({},[]),this._text=t}type(){return"span"}update(t){super.update(t),t.text(this._text)}};var b,w,v,x,C,S,k,E,T,W,R,A={},P=[],H=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,F=Array.isArray;function L(t,e){for(var o in e)t[o]=e[o];return t}function M(t){t&&t.parentNode&&t.parentNode.removeChild(t)}function j(t,e,o,i,n){var r={type:t,props:e,key:o,ref:i,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:null==n?++v:n,__i:-1,__u:0};return null==n&&null!=w.vnode&&w.vnode(r),r}function B(t){return t.children}function N(t,e){this.props=t,this.context=e}function D(t,e){if(null==e)return t.__?D(t.__,t.__i+1):null;for(var o;e<t.__k.length;e++)if(null!=(o=t.__k[e])&&null!=o.__e)return o.__e;return"function"==typeof t.type?D(t):null}function z(t){var e,o;if(null!=(t=t.__)&&null!=t.__c){for(t.__e=t.__c.base=null,e=0;e<t.__k.length;e++)if(null!=(o=t.__k[e])&&null!=o.__e){t.__e=t.__c.base=o.__e;break}return z(t)}}function O(t){(!t.__d&&(t.__d=!0)&&x.push(t)&&!$.__r++||C!=w.debounceRendering)&&((C=w.debounceRendering)||S)($)}function $(){for(var t,e,o,i,n,r,l,s=1;x.length;)x.length>s&&x.sort(k),t=x.shift(),s=x.length,t.__d&&(o=void 0,i=void 0,n=(i=(e=t).__v).__e,r=[],l=[],e.__P&&((o=L({},i)).__v=i.__v+1,w.vnode&&w.vnode(o),K(e.__P,o,i,e.__n,e.__P.namespaceURI,32&i.__u?[n]:null,r,null==n?D(i):n,!!(32&i.__u),l),o.__v=i.__v,o.__.__k[o.__i]=o,Q(r,o,l),i.__e=i.__=null,o.__e!=n&&z(o)));$.__r=0}function I(t,e,o,i,n,r,l,s,h,p,a){var c,_,d,u,f,y,g,m=i&&i.__k||P,b=e.length;for(h=function(t,e,o,i,n){var r,l,s,h,p,a=o.length,c=a,_=0;for(t.__k=new Array(n),r=0;r<n;r++)null!=(l=e[r])&&"boolean"!=typeof l&&"function"!=typeof l?(h=r+_,(l=t.__k[r]="string"==typeof l||"number"==typeof l||"bigint"==typeof l||l.constructor==String?j(null,l,null,null,null):F(l)?j(B,{children:l},null,null,null):null==l.constructor&&l.__b>0?j(l.type,l.props,l.key,l.ref?l.ref:null,l.__v):l).__=t,l.__b=t.__b+1,s=null,-1!=(p=l.__i=V(l,o,h,c))&&(c--,(s=o[p])&&(s.__u|=2)),null==s||null==s.__v?(-1==p&&(n>a?_--:n<a&&_++),"function"!=typeof l.type&&(l.__u|=4)):p!=h&&(p==h-1?_--:p==h+1?_++:(p>h?_--:_++,l.__u|=4))):t.__k[r]=null;if(c)for(r=0;r<a;r++)null!=(s=o[r])&&!(2&s.__u)&&(s.__e==i&&(i=D(s)),tt(s,s));return i}(o,e,m,h,b),c=0;c<b;c++)null!=(d=o.__k[c])&&(_=-1==d.__i?A:m[d.__i]||A,d.__i=c,y=K(t,d,_,n,r,l,s,h,p,a),u=d.__e,d.ref&&_.ref!=d.ref&&(_.ref&&Z(_.ref,null,d),a.push(d.ref,d.__c||u,d)),null==f&&null!=u&&(f=u),(g=!!(4&d.__u))||_.__k===d.__k?h=U(d,h,t,g):"function"==typeof d.type&&void 0!==y?h=y:u&&(h=u.nextSibling),d.__u&=-7);return o.__e=f,h}function U(t,e,o,i){var n,r;if("function"==typeof t.type){for(n=t.__k,r=0;n&&r<n.length;r++)n[r]&&(n[r].__=t,e=U(n[r],e,o,i));return e}t.__e!=e&&(i&&(e&&t.type&&!e.parentNode&&(e=D(t)),o.insertBefore(t.__e,e||null)),e=t.__e);do{e=e&&e.nextSibling}while(null!=e&&8==e.nodeType);return e}function V(t,e,o,i){var n,r,l,s=t.key,h=t.type,p=e[o],a=null!=p&&!(2&p.__u);if(null===p&&null==t.key||a&&s==p.key&&h==p.type)return o;if(i>(a?1:0))for(n=o-1,r=o+1;n>=0||r<e.length;)if(null!=(p=e[l=n>=0?n--:r++])&&!(2&p.__u)&&s==p.key&&h==p.type)return l;return-1}function q(t,e,o){"-"==e[0]?t.setProperty(e,null==o?"":o):t[e]=null==o?"":"number"!=typeof o||H.test(e)?o:o+"px"}function G(t,e,o,i,n){var r,l;t:if("style"==e)if("string"==typeof o)t.style.cssText=o;else{if("string"==typeof i&&(t.style.cssText=i=""),i)for(e in i)o&&e in o||q(t.style,e,"");if(o)for(e in o)i&&o[e]==i[e]||q(t.style,e,o[e])}else if("o"==e[0]&&"n"==e[1])r=e!=(e=e.replace(E,"$1")),l=e.toLowerCase(),e=l in t||"onFocusOut"==e||"onFocusIn"==e?l.slice(2):e.slice(2),t.l||(t.l={}),t.l[e+r]=o,o?i?o.u=i.u:(o.u=T,t.addEventListener(e,r?R:W,r)):t.removeEventListener(e,r?R:W,r);else{if("http://www.w3.org/2000/svg"==n)e=e.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!=e&&"height"!=e&&"href"!=e&&"list"!=e&&"form"!=e&&"tabIndex"!=e&&"download"!=e&&"rowSpan"!=e&&"colSpan"!=e&&"role"!=e&&"popover"!=e&&e in t)try{t[e]=null==o?"":o;break t}catch(s){}"function"==typeof o||(null==o||!1===o&&"-"!=e[4]?t.removeAttribute(e):t.setAttribute(e,"popover"==e&&1==o?"":o))}}function J(t){return function(e){if(this.l){var o=this.l[e.type+t];if(null==e.t)e.t=T++;else if(e.t<o.u)return;return o(w.event?w.event(e):e)}}}function K(t,e,o,i,n,r,l,s,h,p){var a,c,_,d,u,f,y,g,m,v,x,C,S,k,E,T,W,R=e.type;if(null!=e.constructor)return null;128&o.__u&&(h=!!(32&o.__u),r=[s=e.__e=o.__e]),(a=w.__b)&&a(e);t:if("function"==typeof R)try{if(g=e.props,m="prototype"in R&&R.prototype.render,v=(a=R.contextType)&&i[a.__c],x=a?v?v.props.value:a.__:i,o.__c?y=(c=e.__c=o.__c).__=c.__E:(m?e.__c=c=new R(g,x):(e.__c=c=new N(g,x),c.constructor=R,c.render=et),v&&v.sub(c),c.props=g,c.state||(c.state={}),c.context=x,c.__n=i,_=c.__d=!0,c.__h=[],c._sb=[]),m&&null==c.__s&&(c.__s=c.state),m&&null!=R.getDerivedStateFromProps&&(c.__s==c.state&&(c.__s=L({},c.__s)),L(c.__s,R.getDerivedStateFromProps(g,c.__s))),d=c.props,u=c.state,c.__v=e,_)m&&null==R.getDerivedStateFromProps&&null!=c.componentWillMount&&c.componentWillMount(),m&&null!=c.componentDidMount&&c.__h.push(c.componentDidMount);else{if(m&&null==R.getDerivedStateFromProps&&g!==d&&null!=c.componentWillReceiveProps&&c.componentWillReceiveProps(g,x),!c.__e&&null!=c.shouldComponentUpdate&&!1===c.shouldComponentUpdate(g,c.__s,x)||e.__v==o.__v){for(e.__v!=o.__v&&(c.props=g,c.state=c.__s,c.__d=!1),e.__e=o.__e,e.__k=o.__k,e.__k.some(function(t){t&&(t.__=e)}),C=0;C<c._sb.length;C++)c.__h.push(c._sb[C]);c._sb=[],c.__h.length&&l.push(c);break t}null!=c.componentWillUpdate&&c.componentWillUpdate(g,c.__s,x),m&&null!=c.componentDidUpdate&&c.__h.push(function(){c.componentDidUpdate(d,u,f)})}if(c.context=x,c.props=g,c.__P=t,c.__e=!1,S=w.__r,k=0,m){for(c.state=c.__s,c.__d=!1,S&&S(e),a=c.render(c.props,c.state,c.context),E=0;E<c._sb.length;E++)c.__h.push(c._sb[E]);c._sb=[]}else do{c.__d=!1,S&&S(e),a=c.render(c.props,c.state,c.context),c.state=c.__s}while(c.__d&&++k<25);c.state=c.__s,null!=c.getChildContext&&(i=L(L({},i),c.getChildContext())),m&&!_&&null!=c.getSnapshotBeforeUpdate&&(f=c.getSnapshotBeforeUpdate(d,u)),T=a,null!=a&&a.type===B&&null==a.key&&(T=Y(a.props.children)),s=I(t,F(T)?T:[T],e,o,i,n,r,l,s,h,p),c.base=e.__e,e.__u&=-161,c.__h.length&&l.push(c),y&&(c.__E=c.__=null)}catch(P){if(e.__v=null,h||null!=r)if(P.then){for(e.__u|=h?160:128;s&&8==s.nodeType&&s.nextSibling;)s=s.nextSibling;r[r.indexOf(s)]=null,e.__e=s}else{for(W=r.length;W--;)M(r[W]);X(e)}else e.__e=o.__e,e.__k=o.__k,P.then||X(e);w.__e(P,e,o)}else null==r&&e.__v==o.__v?(e.__k=o.__k,e.__e=o.__e):s=e.__e=function(t,e,o,i,n,r,l,s,h){var p,a,c,_,d,u,f,y=o.props,g=e.props,m=e.type;if("svg"==m?n="http://www.w3.org/2000/svg":"math"==m?n="http://www.w3.org/1998/Math/MathML":n||(n="http://www.w3.org/1999/xhtml"),null!=r)for(p=0;p<r.length;p++)if((d=r[p])&&"setAttribute"in d==!!m&&(m?d.localName==m:3==d.nodeType)){t=d,r[p]=null;break}if(null==t){if(null==m)return document.createTextNode(g);t=document.createElementNS(n,m,g.is&&g),s&&(w.__m&&w.__m(e,r),s=!1),r=null}if(null==m)y===g||s&&t.data==g||(t.data=g);else{if(r=r&&b.call(t.childNodes),y=o.props||A,!s&&null!=r)for(y={},p=0;p<t.attributes.length;p++)y[(d=t.attributes[p]).name]=d.value;for(p in y)if(d=y[p],"children"==p);else if("dangerouslySetInnerHTML"==p)c=d;else if(!(p in g)){if("value"==p&&"defaultValue"in g||"checked"==p&&"defaultChecked"in g)continue;G(t,p,null,d,n)}for(p in g)d=g[p],"children"==p?_=d:"dangerouslySetInnerHTML"==p?a=d:"value"==p?u=d:"checked"==p?f=d:s&&"function"!=typeof d||y[p]===d||G(t,p,d,y[p],n);if(a)s||c&&(a.__html==c.__html||a.__html==t.innerHTML)||(t.innerHTML=a.__html),e.__k=[];else if(c&&(t.innerHTML=""),I("template"==e.type?t.content:t,F(_)?_:[_],e,o,i,"foreignObject"==m?"http://www.w3.org/1999/xhtml":n,r,l,r?r[0]:o.__k&&D(o,0),s,h),null!=r)for(p=r.length;p--;)M(r[p]);s||(p="value","progress"==m&&null==u?t.removeAttribute("value"):null!=u&&(u!==t[p]||"progress"==m&&!u||"option"==m&&u!=y[p])&&G(t,p,u,y[p],n),p="checked",null!=f&&f!=t[p]&&G(t,p,f,y[p],n))}return t}(o.__e,e,o,i,n,r,l,h,p);return(a=w.diffed)&&a(e),128&e.__u?void 0:s}function X(t){t&&t.__c&&(t.__c.__e=!0),t&&t.__k&&t.__k.forEach(X)}function Q(t,e,o){for(var i=0;i<o.length;i++)Z(o[i],o[++i],o[++i]);w.__c&&w.__c(e,t),t.some(function(e){try{t=e.__h,e.__h=[],t.some(function(t){t.call(e)})}catch(o){w.__e(o,e.__v)}})}function Y(t){return"object"!=typeof t||null==t||t.__b&&t.__b>0?t:F(t)?t.map(Y):L({},t)}function Z(t,e,o){try{if("function"==typeof t){var i="function"==typeof t.__u;i&&t.__u(),i&&null==e||(t.__u=t(e))}else t.current=e}catch(n){w.__e(n,o)}}function tt(t,e,o){var i,n;if(w.unmount&&w.unmount(t),(i=t.ref)&&(i.current&&i.current!=t.__e||Z(i,null,e)),null!=(i=t.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(r){w.__e(r,e)}i.base=i.__P=null}if(i=t.__k)for(n=0;n<i.length;n++)i[n]&&tt(i[n],e,o||"function"!=typeof t.type);o||M(t.__e),t.__c=t.__=t.__e=void 0}function et(t,e,o){return this.constructor(t,o)}b=P.slice,w={__e:function(t,e,o,i){for(var n,r,l;e=e.__;)if((n=e.__c)&&!n.__)try{if((r=n.constructor)&&null!=r.getDerivedStateFromError&&(n.setState(r.getDerivedStateFromError(t)),l=n.__d),null!=n.componentDidCatch&&(n.componentDidCatch(t,i||{}),l=n.__d),l)return n.__E=n}catch(s){t=s}throw t}},v=0,N.prototype.setState=function(t,e){var o=null!=this.__s&&this.__s!=this.state?this.__s:this.__s=L({},this.state);"function"==typeof t&&(t=t(L({},o),this.props)),t&&L(o,t),null!=t&&this.__v&&(e&&this._sb.push(e),O(this))},N.prototype.forceUpdate=function(t){this.__v&&(this.__e=!0,t&&this.__h.push(t),O(this))},N.prototype.render=B,x=[],S="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,k=function(t,e){return t.__v.__b-e.__v.__b},$.__r=0,E=/(PointerCapture)$|Capture$/i,T=0,W=J(!1),R=J(!0);var ot=0;Array.isArray;function it(t,e,o,i,n,r){e||(e={});var l,s,h=e;if("ref"in h)for(s in h={},e)"ref"==s?l=e[s]:h[s]=e[s];var p={type:t,props:h,key:o,ref:l,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--ot,__i:-1,__u:0,__source:n,__self:r};if("function"==typeof t&&(l=t.defaultProps))for(s in l)void 0===h[s]&&(h[s]=l[s]);return w.vnode&&w.vnode(p),p}var nt=class extends f.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=(new this.props.type).target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return it("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}},rt=class extends f.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=this.props.instance.target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return it("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}},lt=class extends d{transformData(){const t=[["Total",0,0]],o=this.data();return o.forEach(e=>{t[0][1]+=e[1],t[0][2]+=e[2]}),o.concat(t).map(t=>[t[0],this.secondColumnFormat_exists()?(0,e.format)(this.secondColumnFormat())(t[1]):t[1],this.thirdColumnFormat_exists()?(0,e.format)(this.thirdColumnFormat())(t[2]):t[2]])}update(t,e){this.tbodyColumnStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left"},{width:this.secondColumnWidth(),"text-align":"right"},{width:this.thirdColumnWidth(),"text-align":"right"}]),this.evenRowStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.secondColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.thirdColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()}]),this.lastRowStyles_default({"font-weight":"bold"}),super.update(t,e)}};lt.prototype._class+=" html_StatsTable",lt.prototype.publish("labelColor","#333","html-color","Color of the text in the first column"),lt.prototype.publish("primaryValueColor","#333","html-color","Color of the text in the second column"),lt.prototype.publish("secondaryValueColor","#333","html-color","Color of the text in the third column"),lt.prototype.publish("evenRowBackgroundColor","#333","html-color","Background color of the even rows"),lt.prototype.publish("evenRowFontColor","#333","html-color","Font color of the even rows"),lt.prototype.publish("firstColumnWidth","auto","string","CSS style applied as the 'width' for the first column (ex: 40px)"),lt.prototype.publish("secondColumnWidth","1%","string","CSS style applied as the 'width' for the second column (ex: 40px)"),lt.prototype.publish("thirdColumnWidth","1%","string","CSS style applied as the 'width' for the third column (ex: 40px)"),lt.prototype.publish("secondColumnFormat","$,.0f","string","d3-format specifier applied to the second column's values",void 0,{optional:!0}),lt.prototype.publish("thirdColumnFormat",null,"string","d3-format specifier applied to the third column's values",void 0,{optional:!0});var st=class extends e.HTMLWidget{_owner;constructor(t){super(),this._owner=t,this._tag="a"}};st.prototype._class+=" html_Item";var ht=class extends st{_icon;constructor(t,e){super(t),this._icon=e}icon(){return this._icon}enter(t,e){super.enter(t,e),e.attr("href","#").on("click",(t,e,o)=>this._owner.titleBarClick(this,t,e,o)).append("i").attr("class",`fa ${this._icon} fa-lg fa-fw`)}};ht.prototype._class+=" html_Button";var pt=class extends ht{enter(t,e){e.on("click.sel",(t,e,o)=>{this.selected(!this.selected()),this.render()}),super.enter(t,e)}update(t,e){super.update(t,e),this._element.classed("selected",this.selected())}};pt.prototype._class+=" html_ToggleButton",pt.prototype.publish("selected",!1,"boolean");var at=class extends st{enter(t,e){super.enter(t,e),e.attr("class","spacer").attr("href","#").append("i")}};at.prototype._class+=" html_Spacer";var ct=class extends f{_divMain;_divIconBar;_divTitle;constructor(){super()}enter(t,e){super.enter(t,e),this._divMain=e.append("div").attr("class","main"),this._divIconBar=this._divMain.append("div").attr("class","icon-bar"),this._divTitle=this._divMain.append("div").attr("class","title")}update(t,e){super.update(t,e),this._divTitle.text(this.title());const o=this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());o.enter().append("div").attr("class","icon-bar-item").each(function(t){t.target(this)}).merge(o).each(function(t){t.render()}),o.exit().each(function(t){t.target(null)}).remove(),o.order()}};ct.prototype._class+=" html_TitleBar",ct.prototype.publish("title","","string"),ct.prototype.publish("buttons",[],"widgetArray"),t.BUILD_VERSION="3.15.0",t.BreakdownTable=u,t.Button=ht,t.HTMLTooltip=c,t.Item=st,t.JSXWidget=f,t.PKG_NAME="@hpcc-js/html",t.PKG_VERSION="3.3.0",t.ReactD3=class{static createElement(t,e,...o){return(i=t).prototype&&i.prototype instanceof y?new t(e):function(t){return"function"==typeof t}(t)?t(e):new g(t,e,o.map(t=>"string"==typeof t?new m(t):t));var i}static render(t,e){t.render(e)}},t.SimpleTable=_,t.Spacer=at,t.StatsTable=lt,t.StyledTable=d,t.TitleBar=ct,t.ToggleButton=pt,t.VNode=y,t.VizComponent=nt,t.VizInstance=rt});
|
|
2
|
-
//# sourceMappingURL=index.umd.cjs.map
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@hpcc-js/common"),require("@hpcc-js/util"),require("@hpcc-js/react")):"function"==typeof define&&define.amd?define(["exports","@hpcc-js/common","@hpcc-js/util","@hpcc-js/react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["@hpcc-js/html"]={},t["@hpcc-js/common"],t["@hpcc-js/util"],t["@hpcc-js/react"])}(this,function(t,e,o,i){"use strict";var r=Object.defineProperty,s=(t,e)=>r(t,"name",{value:e,configurable:!0}),l=(t,e,o)=>((t,e,o)=>e in t?r(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o)(t,"symbol"!=typeof e?e+"":e,o);const n=class _HTMLTooltip extends e.HTMLWidget{_triggerElement;_contentNode;_prevContentNode;_tooltipElement;_arrowElement;_tooltipHTMLCallback=s(t=>"<b>_tooltipHTMLCallback is undefined</b>","_tooltipHTMLCallback");_logger=o.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,o){super.enter(t,o);const i=e.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,e){if(super.update(t,e),this._contentNode!==this._prevContentNode){const t=this._tooltipElement.node();[...t.querySelectorAll("*")].map(t=>t.__data__).filter(t=>t).forEach(t=>{"function"==typeof t.target&&t.target(null),"function"==typeof t.exit&&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");const 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(){const t=this.calcReferenceBBox(),e=this.calcTooltipDirection(t),o=t[e];return this._tooltipElement.style("top",o.y+"px").style("left",o.x+"px"),this.setArrowPosition(o,e),o}calcTooltipDirection(t){const e=Object.keys(t),o=this.direction();e.sort((t,e)=>t===o?-1:1);const i={top:0,left:0,width:window.innerWidth,height:window.innerHeight};for(let r=0;r<e.length;r++){const o={top:t[e[r]].y,left:t[e[r]].x,width:this.tooltipWidth(),height:this.tooltipHeight()};if(this.rectFits(o,i))return e[r]}return this._logger.warning(`Tooltip doesn't fit in the window for any of the directions. Defaulting to '${o}'`),this._logger.debug(i),this._logger.debug({top:t[o].y,left:t[o].x,width:this.tooltipWidth(),height:this.tooltipHeight()}),o}rectFits(t,e){return t.top>=e.top&&t.left>=e.left&&t.width+t.left<=e.width+e.left&&t.height+t.top<=e.height+e.top}setArrowPosition(t,e){let o,i,r="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"),e){case"n":o=t.y+this.tooltipHeight()+2*this.padding(),i=t.x+this.tooltipWidth()/2-this.arrowWidth()/2+this.padding(),r="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":o=t.y-this.arrowHeight(),i=t.x+this.padding()+this.tooltipWidth()/2-this.arrowWidth()/2,r="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":o=t.y+this.tooltipHeight()/2+this.padding()-this.arrowWidth()/2,i=t.x-this.arrowHeight(),r="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":o=t.y+this.tooltipHeight()/2-this.arrowWidth()/2+this.padding(),i=t.x+this.tooltipWidth()+2*this.padding(),r="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")}return void 0!==o&&void 0!==i?this._arrowElement.style("top",o+"px").style("left",i+"px").style(r,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(){const t=this.getReferenceNode();let{top:e,left:o,width:i,height:r}=t.getBoundingClientRect();const s=this.tooltipWidth(),l=this.tooltipHeight(),n=s/2,h=l/2,a=this.arrowHeight(),p=this.padding(),d=2*p;this.followCursor()&&this._cursorLoc&&(o=this._cursorLoc[0],e=this._cursorLoc[1],i=1,r=1);return{n:{x:o+i/2-n-p,y:e-l-a-d},e:{x:o+i+a,y:e+r/2-h-p},s:{x:o+i/2-n-p,y:e+r+a},w:{x:o-s-a-d,y:e+r/2-h-p},nw:{x:o-s-d,y:e-l-d},ne:{x:o+i,y:e-l-d},se:{x:o+i,y:e+r},sw:{x:o-s-d,y:e+r}}}_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,e){this._arrowElement&&(this._arrowElement.remove(),this._tooltipElement.remove()),super.exit(t,e)}};s(n,"HTMLTooltip");let h=n;h.prototype._class+=" html_HTMLTooltip",h.prototype.publish("fitContent",!1,"boolean","If true, tooltip will grow to fit its html content"),h.prototype.publish("followCursor",!1,"boolean","If true, tooltip will display relative to cursor location"),h.prototype.publish("closeDelay",400,"number","Number of milliseconds to wait before closing tooltip (cancelled on tooltip mouseover event)"),h.prototype.publish("direction","n","set","Direction in which to display the tooltip",["n","s","e","w","ne","nw","se","sw"]),h.prototype.publish("padding",8,"number","Padding (pixels)"),h.prototype.publish("arrowWidth",16,"number","Width (or height depending on direction) of the tooltip arrow (pixels)"),h.prototype.publish("arrowHeight",8,"number","Height (or width depending on direction) of the tooltip arrow (pixels)"),h.prototype.publish("fontColor","#FFF","html-color","The default font color for text in the tooltip"),h.prototype.publish("tooltipColor","#000000EE","html-color","Background color of the tooltip"),h.prototype.publish("tooltipWidth",200,"number","Width of the tooltip (not including arrow) (pixels)"),h.prototype.publish("tooltipHeight",200,"number","Height of the tooltip (not including arrow) (pixels)"),h.prototype.publish("enablePointerEvents",!1,"boolean","If true, the 'pointer-events: all' style will be used");const a=class _SimpleTable extends e.HTMLWidget{_table;_tbody;_thead;_theadRow;constructor(){super()}transformData(){return this.data()}enter(t,e){super.enter(t,e),this._table=e.append("table"),this._thead=this._table.append("thead"),this._theadRow=this._thead.append("tr"),this._tbody=this._table.append("tbody")}update(t,o){super.update(t,o),this._table.style("width",this.autoWidth()?"auto":"100%");const i=this._theadRow.selectAll("th").data(this.columns());i.enter().append("th").attr("class",(t,e)=>`th-${e}`).merge(i).text(t=>t.toString()),i.exit().remove();const r=this._tbody.selectAll("tr").data(this.transformData());r.enter().append("tr").merge(r).each(function(t){const o=e.select(this).selectAll("td").data(t);o.enter().append("td").attr("class",(t,e)=>`col-${e}`).merge(o).text(t=>t.toString()),o.exit().remove()}),r.exit().remove()}};s(a,"SimpleTable");let p=a;p.prototype._class+=" html_SimpleTable",p.prototype.publish("autoWidth",!1,"boolean","If true, table width will be set to 'auto'. If false, the width is set to '100%'");const d=class _StyledTable extends p{constructor(){super()}applyStyleObject(t,e){Object.keys(e).forEach(o=>{t.style(o,e[o])})}update(t,e){super.update(t,e),e.selectAll("tr,th,td").attr("style","").style("font-family",this.fontFamily()).style("color",this.fontColor()),this.theadColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.select(`.th-${o}`),t)}),this.tbodyColumnStyles().forEach((t,o)=>{this.applyStyleObject(e.selectAll(`.col-${o}`),t)});const o=Object.keys(this.evenRowStyles()).length>0,i=Object.keys(this.lastRowStyles()).length>0,r=e.selectAll("tbody > tr");if(o){const t=r.select(function(t,e){return e%2?this:null});this.applyStyleObject(t,this.evenRowStyles())}if(i){const t=r.select(function(t,e,o){return e===o.length-1?this:null});this.applyStyleObject(t,this.lastRowStyles())}}};s(d,"StyledTable");let c=d;c.prototype._class+=" html_StyledTable",c.prototype.publish("fontFamily","Verdana","string","Base font-family used within the table"),c.prototype.publish("fontColor","#333","string","Base font color used within the table"),c.prototype.publish("theadColumnStyles",[],"array",'Array of objects containing styles for the thead columns (ex: [{"color":"red"},{"color":"blue"}])'),c.prototype.publish("tbodyColumnStyles",[],"array",'Array of objects containing styles for the tbody columns (ex: [{"color":"red"},{"color":"blue"}])'),c.prototype.publish("lastRowStyles",{},"object",'Object containing styles for the last row (ex: {"color":"red"})'),c.prototype.publish("evenRowStyles",{},"object",'Object containing styles for even rows (ex: {"background-color":"#AAA"})');const u=class _BreakdownTable extends c{_tooltip;constructor(){super()}transformData(){const t=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount();return this.breakdownData(t)}breakdownData(t){const e=this.data().length,o=this.data().reduce((t,e)=>t+e[1],0),i=[];let r=0;this.data().sort((t,e)=>t[1]>e[1]?-1:1);const s=e-t>0;if(this.data().filter((e,o)=>!s||o<t-1).forEach(t=>{const e=Math.round(t[1]/o*100);r+=e,i.push([t[0],e+"%"])}),s){const o=`${this.otherLabel()} (${e-t+1})`,s="~"+(100-r)+"%";i.push([o,s])}return i}calculateRowCount(){const t=this.columns().length>0?this.thFontSize()+5:0,e=this.fontSize()+5,o=this.height()-t;return Math.floor(o/e)}enter(t,e){super.enter(t,e),this._tooltip=(new h).target(t),this._tooltip.tooltipHTML(t=>{const e=this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount(),o=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).height))??this.fontSize(),i=Math.max(...t.map(t=>this.textSize(t[0],this.fontFamily(),this.fontSize()).width)),r=2*(i+30)+2*this._tooltip.padding(),s=o*Math.ceil((t.length-e)/2)+2*this._tooltip.padding();this._tooltip.tooltipWidth(r),this._tooltip.tooltipHeight(s);const l=this.breakdownData(this.data().length).slice(e-1);return`<div style="\n width: 100%;\n height: 100%;\n font-size: ${this.fontSize()}px;\n ">${l.map(t=>`<div style="\n float:left;\n width:${Math.floor(49.5)}%;\n ">${t[0]}: ${t[1]}</div>`).join("")}</div>`})}update(t,e){this.theadColumnStyles_default([{color:this.thFirstColor(),"font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.labelAlignment(),width:"auto",padding:"0px"},{width:"1%","font-size":this.thFontSize()+"px","font-weight":this.thFontWeight(),"text-align":this.percentageAlignment(),padding:"0px"}]),this.tbodyColumnStyles_default([{color:this.topLabelColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.topPercentageColor(),"font-size":this.fontSize()+"px","font-weight":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),this.lastRowStyles_default([{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherLabelBold()?"bold":"normal","text-align":this.labelAlignment(),width:"auto",padding:"0px"},{color:this.otherLabelColor(),"font-size":this.fontSize()+"px","font-weight":this.otherPercentageBold()?"bold":"normal","text-align":this.percentageAlignment(),width:"1%",padding:"0px"}]),super.update(t,e);if((this.useCalculatedRowCount()?this.calculateRowCount():this.rowCount())<this.data().length){const t=e.select("tbody > tr:last-child"),o=this;t.on("mouseout.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.visible(!1).render()}).on("mouseenter.tooltip",e=>{o._tooltip._triggerElement=t,o._tooltip.direction("n").data(o.data()).visible(!0).render()})}}};s(u,"BreakdownTable");let g=u;g.prototype._class+=" html_BreakdownTable",g.prototype.publish("useCalculatedRowCount",!0,"boolean","If true, rowCount will be calculated and its default will be overwritten"),g.prototype.publish("rowCount",5,"number","Number of total rows to display (including the 'other' row)",void 0,{disable:s(t=>t.useCalculatedRowCount(),"disable")}),g.prototype.publish("fontSize",14,"number","Font size (pixels)"),g.prototype.publish("labelAlignment","left","set","Alignment of the label column text",["left","center","right"]),g.prototype.publish("percentageAlignment","center","set","Alignment of the percentage column text",["left","center","right"]),g.prototype.publish("topLabelColor","#333","html-color","Color of displayed 'top' labels"),g.prototype.publish("topPercentageColor","#1A99D5","html-color","Color of displayed 'top' percentages"),g.prototype.publish("topPercentageBold",!0,"html-color","If true, the 'top' percentages will be bold"),g.prototype.publish("otherLabel","Other","string","Label text for the 'other' row"),g.prototype.publish("otherLabelColor","#AAA","html-color","Color of the 'other' label"),g.prototype.publish("otherLabelBold",!1,"html-color","If true, the 'other' label will be bold"),g.prototype.publish("otherPercentageColor","#AAA","html-color","Color of the 'other' percentage"),g.prototype.publish("otherPercentageBold",!1,"html-color","If true, the 'other' percentage will be bold"),g.prototype.publish("thFontWeight","bold","string","Font weight for th elements"),g.prototype.publish("thFontSize",26,"number","Font size for th elements"),g.prototype.publish("thFirstColor","#333","html-color","Text color of the first th element"),g.prototype.publish("thLastColor","#333","html-color","Text color of the last th element");const b=class _JSXWidget extends e.HTMLWidget{rootNode;jsxRender(t,e){this.rootNode=i.React.render(t,e,this.rootNode)}};s(b,"JSXWidget"),l(b,"Component",i.React.Component),l(b,"createElement",i.React.createElement);let y=b;y.prototype._class+=" html_JSXWidget";const m=class _VNode{_attrs;_children;constructor(t,e){this._attrs=t,this._children=e}type(){return"div"}attrs(){return this._attrs}attr(t){return this._attrs[t]}children(){return this._children}update(t){for(const e in this._attrs)t.attr(e,this._attrs[e])}render(t){const o=t.selectAll(`${t.node().tagName} > *`).data([this]);return o.exit().remove(),o.enter().append(this.type()).attr("reactd3",0).merge(o).each(function(t){const o=e.select(this);t.update(o),t.renderChildren(o)})}renderChildren(t){const o=t.selectAll(`${t.node().tagName} > *`).data(this._children);return o.exit().remove(),o.enter().append(t=>document.createElement(t.type())).attr("reactd3",(t,e)=>e).merge(o).each(function(t){const o=e.select(this);t.update(o),t.renderChildren(o)})}};s(m,"VNode");let f=m;const _=class _ConstVNode extends f{_type;constructor(t,e,o){super(e,o),this._type=t}type(){return this._type}};s(_,"ConstVNode");let w=_;const x=class _TextVNode extends f{_text;constructor(t){super({},[]),this._text=t}type(){return"span"}update(t){super.update(t),t.text(this._text)}};s(x,"TextVNode");let C=x;function v(t){return"function"==typeof t}function S(t){return t.prototype&&t.prototype instanceof f}s(v,"isReactFn"),s(S,"isIVNode");const T=class _ReactD3{static createElement(t,e,...o){return S(t)?new t(e):v(t)?t(e):new w(t,e,o.map(t=>"string"==typeof t?new C(t):t))}static render(t,e){t.render(e)}};s(T,"ReactD3");let E=T;var W;W={__e:s(function(t,e,o,i){for(var r,s,l;e=e.__;)if((r=e.__c)&&!r.__)try{if((s=r.constructor)&&null!=s.getDerivedStateFromError&&(r.setState(s.getDerivedStateFromError(t)),l=r.__d),null!=r.componentDidCatch&&(r.componentDidCatch(t,i||{}),l=r.__d),l)return r.__E=r}catch(n){t=n}throw t},"__e")},"function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout;var R=0;function B(t,e,o,i,r,s){e||(e={});var l,n,h=e;if("ref"in h)for(n in h={},e)"ref"==n?l=e[n]:h[n]=e[n];var a={type:t,props:h,key:o,ref:l,__k:null,__:null,__b:0,__e:null,__c:null,constructor:void 0,__v:--R,__i:-1,__u:0,__source:r,__self:s};return W.vnode&&W.vnode(a),a}s(B,"u");const H=class _VizComponent extends y.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=(new this.props.type).target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return B("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};s(H,"VizComponent");let A=H;const k=class _VizInstance extends y.Component{widget;refreshProps(){for(const t in this.props)this.widget[t]&&"function"==typeof this.widget[t]&&this.widget[t](this.props[t])}componentDidMount(){this.widget=this.props.instance.target(this.base),this.refreshProps(),this.widget.render()}componentWillUnmount(){this.widget.target(null).render()}render(){return B("div",{style:this.props.style})}componentDidUpdate(){this.refreshProps(),this.widget.render()}};s(k,"VizInstance");let z=k;const F=class _StatsTable extends c{transformData(){const t=[["Total",0,0]],o=this.data();return o.forEach(e=>{t[0][1]+=e[1],t[0][2]+=e[2]}),o.concat(t).map(t=>[t[0],this.secondColumnFormat_exists()?e.format(this.secondColumnFormat())(t[1]):t[1],this.thirdColumnFormat_exists()?e.format(this.thirdColumnFormat())(t[2]):t[2]])}update(t,e){this.tbodyColumnStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left"},{width:this.secondColumnWidth(),"text-align":"right"},{width:this.thirdColumnWidth(),"text-align":"right"}]),this.evenRowStyles_default([{"font-weight":"bold",width:this.firstColumnWidth(),"text-align":"left","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.secondColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()},{width:this.thirdColumnWidth(),"text-align":"right","font-color":this.evenRowFontColor(),"background-color":this.evenRowBackgroundColor()}]),this.lastRowStyles_default({"font-weight":"bold"}),super.update(t,e)}};s(F,"StatsTable");let L=F;L.prototype._class+=" html_StatsTable",L.prototype.publish("labelColor","#333","html-color","Color of the text in the first column"),L.prototype.publish("primaryValueColor","#333","html-color","Color of the text in the second column"),L.prototype.publish("secondaryValueColor","#333","html-color","Color of the text in the third column"),L.prototype.publish("evenRowBackgroundColor","#333","html-color","Background color of the even rows"),L.prototype.publish("evenRowFontColor","#333","html-color","Font color of the even rows"),L.prototype.publish("firstColumnWidth","auto","string","CSS style applied as the 'width' for the first column (ex: 40px)"),L.prototype.publish("secondColumnWidth","1%","string","CSS style applied as the 'width' for the second column (ex: 40px)"),L.prototype.publish("thirdColumnWidth","1%","string","CSS style applied as the 'width' for the third column (ex: 40px)"),L.prototype.publish("secondColumnFormat","$,.0f","string","d3-format specifier applied to the second column's values",void 0,{optional:!0}),L.prototype.publish("thirdColumnFormat",null,"string","d3-format specifier applied to the third column's values",void 0,{optional:!0});const N=class _Item extends e.HTMLWidget{_owner;constructor(t){super(),this._owner=t,this._tag="a"}};s(N,"Item");let j=N;j.prototype._class+=" html_Item";const M=class _Button extends j{_icon;constructor(t,e){super(t),this._icon=e}icon(){return this._icon}enter(t,e){super.enter(t,e),e.attr("href","#").on("click",(t,e,o)=>this._owner.titleBarClick(this,t,e,o)).append("i").attr("class",`fa ${this._icon} fa-lg fa-fw`)}};s(M,"Button");let D=M;D.prototype._class+=" html_Button";const P=class _ToggleButton extends D{enter(t,e){e.on("click.sel",(t,e,o)=>{this.selected(!this.selected()),this.render()}),super.enter(t,e)}update(t,e){super.update(t,e),this._element.classed("selected",this.selected())}};s(P,"ToggleButton");let I=P;I.prototype._class+=" html_ToggleButton",I.prototype.publish("selected",!1,"boolean");const $=class _Spacer extends j{enter(t,e){super.enter(t,e),e.attr("class","spacer").attr("href","#").append("i")}};s($,"Spacer");let V=$;V.prototype._class+=" html_Spacer";const O=class _TitleBar extends y{_divMain;_divIconBar;_divTitle;constructor(){super()}enter(t,e){super.enter(t,e),this._divMain=e.append("div").attr("class","main"),this._divIconBar=this._divMain.append("div").attr("class","icon-bar"),this._divTitle=this._divMain.append("div").attr("class","title")}update(t,e){super.update(t,e),this._divTitle.text(this.title());const o=this._divIconBar.selectAll(".icon-bar-item").data(this.buttons());o.enter().append("div").attr("class","icon-bar-item").each(function(t){t.target(this)}).merge(o).each(function(t){t.render()}),o.exit().each(function(t){t.target(null)}).remove(),o.order()}};s(O,"TitleBar");let U=O;U.prototype._class+=" html_TitleBar",U.prototype.publish("title","","string"),U.prototype.publish("buttons",[],"widgetArray"),t.BUILD_VERSION="3.15.1",t.BreakdownTable=g,t.Button=D,t.HTMLTooltip=h,t.Item=j,t.JSXWidget=y,t.PKG_NAME="@hpcc-js/html",t.PKG_VERSION="3.3.1",t.ReactD3=E,t.SimpleTable=p,t.Spacer=V,t.StatsTable=L,t.StyledTable=c,t.TitleBar=U,t.ToggleButton=I,t.VNode=f,t.VizComponent=A,t.VizInstance=z,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});
|
|
2
|
+
//# sourceMappingURL=index.umd.cjs.map
|
|
3
|
+
!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode("#wrap{width:100%}#left,#right{padding:5px}#left{background-color:red;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#right{background-color:orange;float:right;text-align:right;white-space:nowrap}.html_TitleBar>.main{width:100%;display:block}.html_TitleBar .title{padding:4px;text-align:left;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:20px;font-weight:700}.html_TitleBar .icon-bar{padding:4px;float:right;text-align:right;white-space:nowrap;line-height:28px}.html_TitleBar .icon-bar-item{display:inline}.html_TitleBar .icon-bar-item>div{display:inline}.html_TitleBar .icon-bar a{text-align:center;padding-top:4px;padding-bottom:4px;transition:all .3s ease;color:#a9a9a9}.html_TitleBar .icon-bar a:hover{background-color:#f5f5f5}.html_TitleBar .icon-bar a.selected{background-color:#efe5e5}.html_TitleBar .icon-bar a.spacer{text-align:center;padding-top:2px;padding-left:8px;padding-bottom:0;color:none}.html_TitleBar .icon-bar a.spacer:hover{background-color:transparent}.html_TitleBar .icon-bar .active{background-color:#4caf50}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
|