@nebula.js/sn-funnel-chart 1.4.3 → 1.4.5

package/dist/sn-funnel-chart.systemjs.js

@@ -0,0 +1,7 @@
+/*
+* @nebula.js/sn-funnel-chart v1.4.5
+* Copyright (c) 2022 QlikTech International AB
+* Released under the MIT license.
+*/
+
+System.register(["picasso.js","picasso-plugin-q","@nebula.js/stardust","qlik-chart-modules"],(function(e){"use strict";var t,o,n,a,s,i,l,r,u,c,d,h,m,f,p,g,b,y,v,x,R;return{setters:[function(e){t=e.default},function(e){o=e.default},function(e){n=e.useElement,a=e.useSelections,s=e.useModel,i=e.useApp,l=e.useTranslator,r=e.useOptions,u=e.useState,c=e.useEffect,d=e.useStaleLayout,h=e.useTheme,m=e.useConstraints,f=e.useRect,p=e.usePlugins,g=e.useAppLayout,b=e.usePromise,y=e.onTakeSnapshot},function(e){v=e.colorService,x=e.selectionService,R=e.pluginService}],execute:function(){e("default",(function(e){const n=t();n.use(o),n.component("funnel",E);const{flags:a}=e;return{ext:N,qae:{properties:{initial:A},data:{targets:T}},component(){!function({picasso:e,flags:t}){const o=d(),n=h(),a=m(),s=f(),i=p(),l=g().qLocaleInfo,[r,u,v]=B({picasso:e,layout:o}),[x]=b((()=>{if(!u)return Promise.resolve();const t=({getUseBaseColors:e})=>({theme:n,colorProps:{...o.color,useBaseColors:e(o)},layout:o,hc:o.qHyperCube}),a=function(e){return{layout:e,keys:{SCALE:{FILL:"fill"},COMPONENT:{FUNNEL:"fun",FUNNEL_LABELS:"funnel-labels",DIMENSION_TITLE:"dimension-title"}}}}(o),s=R({picassoInstance:e,plugins:i,pluginArgs:a});return Promise.all([u.initialize({createConfig:t}),s.initialize()]).then((()=>s))}),[o,u]);c((()=>{if(!r||!u||!x)return;const e=[{type:"q",key:"qHyperCube",data:o.qHyperCube,config:{localeInfo:l}},...u.getData()],s=function({layout:e,constraints:t,colorService:o,theme:n,pluginService:a,flags:s}){const i=function(e){return{...e.getScales()}}(o),l=o.getPalettes(),r=[F({layout:e,constraints:t,colorService:o,flags:s}),k(e,n,s),V(e,s)];return{palettes:l,style:{"$font-family":n.getStyle("","","fontFamily"),"$font-color":n.getStyle("","","color"),"$font-size":n.getStyle("","","fontSize")},scales:i,components:a.extendComponents(r),formatters:W()}}({layout:o,constraints:a,colorService:u,theme:n,pluginService:x,flags:t});r.update({data:e,settings:s})}),[r,u,n.name(),x,a]),c((()=>{r&&r.update()}),[s.width,s.height]),c((()=>{v&&v.setLayout(o)}),[o]),y((e=>u.getSnapshotData().then((t=>(e.snapshotData=e.snapshotData||{},e.snapshotData.content=e.snapshotData.content||{},e.snapshotData.content.chartData=t,e))).catch((()=>e))))}({picasso:n,flags:a})}}}));const L={fill:"steelblue",num:1},S=.9,D=150,M=(e,t,o)=>{let n=0,a=0,s=0,i={},l=0;if("labelCenter"===e)n=t.bottomLeft.x,a=t.topRight.y,s=t.bottomRight.x-t.bottomLeft.x,l=t.bottomRight.y-t.topRight.y,i={share:o.share,fill:o.fill};else{const e=180/Math.PI*Math.atan((t.bottomRight.y-t.topRight.y)/(t.topRight.x-t.bottomRight.x));n=e<15&&e>=0?t.topRight.x:e>-15&&e<0?t.bottomRight.x:e<-15?(t.bottomRight.x-t.topRight.x)/2+t.topRight.x+15:(t.topRight.x-t.bottomRight.x)/2+t.bottomRight.x+15,a=t.topRight.y,s=t.width-n,l=t.bottomRight.y-t.topRight.y,i={fill:o.fill}}return{tag:e,type:"rect",x:n,y:a,width:s,height:l,data:o.data,desc:i,fill:"none"}},C=(e,t)=>{const o=(e=>{const t=(e=>{let t=0;return e.forEach((e=>{e.num>t&&(t=e.num)})),t})(e);let o=0;return e.slice().reverse().map((e=>{const n={datum:e,s:o/t,e:e.num/t};return o=e.num,n})).reverse()})(e),n=t.width*S,a=t.height*S,s=(t.width-n)/2,i=(t.height-a)/2,l=n-(n>D&&a>D?100:0),r=(a-1*(o.length-1))/o.length,u=[];return o.forEach(((e,n)=>{const a=(c=e.e,d=n<o.length-1?e.s:e.e,[.5-.5*c,.5+.5*c,.5+.5*d,.5-.5*d]).map((e=>Math.round(e*l+s)));var c,d;const h=r*n+1*n+i,m={bottomRight:{x:a[2],y:Math.round(h+r)},bottomLeft:{x:a[3],y:Math.round(h+r)},topRight:{x:a[1],y:Math.round(h)},topLeft:{x:a[0],y:Math.round(h)},width:t.width},f=`M${m.topLeft.x},${m.topLeft.y} L${m.topRight.x},${m.topRight.y} ${m.bottomRight.x},${m.bottomRight.y} ${m.bottomLeft.x},${m.bottomLeft.y}Z`;u.push({tag:"section",type:"path",d:f,data:e.datum.data,fill:e.datum.fill});const p={share:e.e,fill:e.datum.fill,data:e.datum.data};r>12&&(m.bottomRight.x-m.bottomLeft.x>32&&u.push(M("labelCenter",m,p)),u.push(M("labelLeft",m,p)))})),u},q=(e,t,o,n)=>(n-e)/n*(t-o)+o,I=(e,t,o)=>{const n=e.filter((e=>"NaN"!==e.num&&e.num>0)),a=n.length,s=o.width*S,i=o.height*S,l=Math.round((o.width-s)/2),r=Math.round((o.height-i)/2),u=s-(s>D&&i>D?100:0),c=i-1*(a-1),d=[],h=n[0].data.num.value;let m=r;return n.forEach(((e,n)=>{const a=t[n]*c,s=Math.round(q(m-r,u,.2*u,i)/2),f=Math.round(q(m-r+a,u,.2*u,i)/2),p=l+Math.round(u/2),g={bottomRight:{x:p+f,y:Math.round(m+a)},bottomLeft:{x:p-f,y:Math.round(m+a)},topRight:{x:p+s,y:m},topLeft:{x:p-s,y:m},width:o.width},b=`M${g.topLeft.x},${g.topLeft.y} L${g.topRight.x},${g.topRight.y} ${g.bottomRight.x},${g.bottomRight.y} ${g.bottomLeft.x},${g.bottomLeft.y}Z`;d.push({tag:"section",type:"path",d:b,data:e.data,fill:e.fill});const y={share:e.data.num.value/h,fill:e.fill,data:e.data};a>2&&(g.bottomRight.x-g.bottomLeft.x>32&&d.push(M("labelCenter",g,y)),d.push(M("labelLeft",g,y))),m+=a+1})),d},w=(e,t,o)=>{const n=e.filter((e=>"NaN"!==e.num&&e.num>0));if(n&&n.length>0)switch(t){case"WIDTH":return C(n,o);case"ORDER":return I(n,n.map((()=>1/n.length)),o);case"HEIGHT":return I(n,(e=>{const t=e.reduce(((e,t)=>e+t.data.num.value),0);return e.map((e=>e.data.num.value/t))})(n),o);case"AREA":return I(n,((e,t,o)=>{const n=e.reduce(((e,t)=>e+t.data.num.value),0),a=t.width*S,s=t.height*S,i=a*o,l=s*(a+i)/2,r=(a-i)/2/s,u=[];let c=0;for(let t=e.length-1;t>=0;t--){const o=e[t].data.num.value/n,a=2*r*c+i,d=-a/(2*r)+Math.sqrt(a*a/(4*r*r)+o*l/r);u[t]=d/s,c+=d}return u})(n,o,.2),o);default:return C(n,o)}return[]};var E={require:["resolver"],defaultSettings:{settings:{},data:{},style:{item:"$shape"}},render({data:e}){const t=this.resolver.resolve({data:e,defaults:{...L,...this.style.item},settings:this.settings.settings});return w(t.items,this.settings.settings.mode,this.rect)}};const A={version:"1.4.5",color:{auto:!0,autoMinMax:!0,byDimDef:void 0,byMeasureDef:void 0,colorExpression:void 0,dimensionScheme:"12",expressionIsColor:!0,expressionLabel:"",measureMin:void 0,measureMax:void 0,measureScheme:"sg",mode:"primary",paletteColor:{index:6},persistent:!1,reverseScheme:!1,singleColor:void 0,useBaseColors:"off",useDimColVal:!0,useMeasureGradient:!0},dataPoint:{auto:!0,labelMode:"share"},footnote:"",funnel:{mode:"WIDTH"},qHyperCubeDef:{qDimensions:[],qMeasures:[],qInterColumnSortOrder:[],qInitialDataFetch:[{qWidth:2,qHeight:5e3}],qSuppressMissing:!0,qSuppressZero:!1},showDimensionTitle:!0,showTitles:!0,subtitle:"",title:""};var N={definition:{type:"items",component:"accordion",items:{data:{uses:"data",items:{dimensions:{uses:"dimensions",items:{others:{items:{suppressOther:{defaultValue:!0,show:!1}}}},disabledRef:""},measures:{uses:"measures",disabledRef:""}}},sorting:{uses:"sorting"},settings:{uses:"settings",items:{presentation:{type:"items",label:"Presentation",grouped:!0,items:{funnelmode:{ref:"funnel.mode",label:"Funnel Mode",type:"string",component:"dropdown",options:[{value:"AREA",label:"Area"},{value:"HEIGHT",label:"Height"},{value:"WIDTH",label:"Width"},{value:"ORDER",label:"Ordering"}],defaultValue:"WIDTH"},dimensionTitle:{ref:"showDimensionTitle",type:"boolean",component:"switch",label:"Dimension label",defaultValue:!0,options:[{value:!0,label:"Auto"},{value:!1,label:"Off"}]},valuesAuto:{ref:"dataPoint.auto",type:"boolean",label:"Value labels",component:"switch",defaultValue:!0,options:[{value:!0,label:"Auto"},{value:!1,label:"Custom"}]},labelMode:{ref:"dataPoint.labelMode",type:"string",component:"dropdown",options:[{value:"none",label:"None"},{value:"share",label:"Share"},{value:"value",label:"Values"}],defaultValue:"share",show:e=>!e.dataPoint.auto}}},colorsAndLegend:{uses:"colorsAndLegend",translation:"Colors",items:{colors:{items:{colorByLabel:{show:!1},expressionLabel:{show:!1}}},legend:{show:!1}}}}}}},support:{export:!0,exportData:!0,snapshot:!0,viewData:!1},importProperties:null,exportProperties:null};const T=[{path:"/qHyperCubeDef",dimensions:{min:1,max:1,description:()=>"Segments"},measures:{min:1,max:1,description(e){switch(e.funnel.mode){case"WIDTH":return"Width";case"AREA":return"Area";case"HEIGHT":return"Height";case"ORDER":return"Order";default:return""}},added(e,t){2===t.qHyperCubeDef.qInterColumnSortOrder.length&&1!==t.qHyperCubeDef.qInterColumnSortOrder[0]&&(t.qHyperCubeDef.qInterColumnSortOrder=[1,0])}}}];function H(e){const t=e.node.desc&&e.node.desc.share;return t?e.formatter("share")(t):""}function $(e){return e.formatter("num")(e.node.data.num.value)}function O({data:e}){return e?e.label:""}function P(e){if(e.dataPoint.auto)return H;switch(e.dataPoint.labelMode){case"share":return H;case"value":return $;case"none":return null;default:return H}}function k(e,t,o){const n=(o,n=1)=>({component:"fun",selector:o,strategy:{type:"rows",settings:{align:n,fill:".labelCenter"===o?({node:e})=>t.getContrastingColorTo(e.desc.fill):t.getStyle("","","color"),labels:".labelCenter"===o?[{label:P(e)}]:[{label:O}]}}});return{key:"funnel-labels",type:"labels",layout:{displayOrder:2},settings:{sources:[n(".labelLeft",0),n(".labelCenter",.5)]},animations:{enabled:null==o?void 0:o.isEnabled("ANIMATIONS_FUNNEL")}}}function F({layout:e,constraints:t,colorService:o,flags:n}){const a=o.getDatumProps(),s=o.getColor();return{type:"funnel",key:"fun",data:{extract:{field:"qDimensionInfo/0",props:{num:{field:"qMeasureInfo/0"},...a}}},brush:t.select||t.active?{}:{trigger:[{contexts:["selection"],data:[""]}],consume:[{context:"selection",filter:e=>"section"===e.tag,style:{inactive:{opacity:.3}}}]},settings:{num:{ref:"num"},fill:s,mode:e.funnel.mode},animations:{enabled:null==n?void 0:n.isEnabled("ANIMATIONS_FUNNEL"),trackBy:e=>`${e.tag}: ${e.data.value}`}}}function V(e,t){if(!e.showDimensionTitle||!e.qHyperCube.qDimensionInfo[0].qFallbackTitle)return!1;return{key:"dimension-title",type:"text",text:e.qHyperCube.qDimensionInfo[0].qFallbackTitle,layout:{dock:"top"},animations:{enabled:null==t?void 0:t.isEnabled("ANIMATIONS_FUNNEL")}}}function W(){return{share:{type:"d3-number",format:".1%"},num:{data:{field:"qMeasureInfo/0"}}}}function B({picasso:e}){const t=n(),o=a(),d=s(),h=i(),m=l(),f=r(),[p,g]=u(),[b,y]=u(),[R,L]=u();return c((()=>{const n=v({picasso:e,model:d,app:h,translator:m,config:{auto:!1,key:"fill"}});t.style.overflow="hidden";const a=e({renderer:{prio:[f.renderer||"svg"]}}).chart({element:t,data:[],settings:{}}),s=x({chart:a,selections:o,config:{selectionActions:!1}});return L(s),y(n),g(a),()=>{s.destroy(),a.destroy()}}),[]),[p,b,R]}}}}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebula.js/sn-funnel-chart",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "A sequential chart visualizing a linear process with connected stages, for example a sales process with potential revenue at each stage.",
   "author": "QlikTech International AB",
   "license": "MIT",