New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@nebula.js/sn-funnel-chart
Advanced tools
@nebula.js/sn-funnel-chart - npm Package Compare versions
Comparing version 1.5.1 to 1.5.2
@@ -24,3 +24,3 @@ # API Reference | ||
| - [.useDimColVal](#properties.color.useDimColVal) : <code>boolean</code> | ||
| - [.useMeasureGradient](#properties.color.useMeasureGradient) | ||
| - [.useMeasureGradient](#properties.color.useMeasureGradient) : <code>boolean</code> | ||
| - [.dataPoint](#properties.dataPoint) : <code>object</code> | ||
@@ -81,3 +81,3 @@ - [.auto](#properties.dataPoint.auto) : <code>boolean</code> | ||
| - [.useDimColVal](#properties.color.useDimColVal) : <code>boolean</code> | ||
| - [.useMeasureGradient](#properties.color.useMeasureGradient) | ||
| - [.useMeasureGradient](#properties.color.useMeasureGradient) : <code>boolean</code> | ||
@@ -270,3 +270,3 @@ <a name="properties.color.auto"></a> | ||
| #### color.useMeasureGradient | ||
| #### color.useMeasureGradient : <code>boolean</code> | ||
@@ -399,137 +399,1 @@ Set to true if you want to apply the colors defined for library measures when used. Only applicable if `"mode": "byMeasure"`. | ||
| # Definitions | ||
| <a name="paletteColor"></a> | ||
| ## paletteColor : <code>object</code> | ||
| Color information structure. Holds the actual color and index in palette. | ||
| **Kind**: global typedef | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ----- | ------------------- | -------------------------------------------- | | ||
| | color | <code>string</code> | Color as hex string (mandatory if index: -1) | | ||
| | index | <code>number</code> | Index in palette | | ||
| <a name="byDimDef"></a> | ||
| ## byDimDef : <code>object</code> | ||
| Settings when coloring by dimension (`"mode": "byDimension"`) | ||
| **Kind**: global typedef | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ----- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | key | <code>string</code> | libraryId if `"type": "libraryItem"`, dimension expression if `"type": "expression"` | | ||
| | label | <code>string</code> | Label displayed for coloring (in legend and tooltip for instance). String or expression. Not used when coloring by library items. | | ||
| | type | <code>'expression'</code> \| <code>'libraryItem'</code> | | | ||
| <a name="byMeasureDef"></a> | ||
| ## byMeasureDef : <code>object</code> | ||
| Settings when coloring by measure (`"mode": "byMeasure"`) | ||
| **Kind**: global typedef | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ----- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | key | <code>string</code> | libraryId if `"type": "libraryItem"`, measure expression if `"type": "expression"` | | ||
| | label | <code>string</code> | Label displayed for coloring (in legend and tooltip for instance). String or expression. Not used when coloring by library items. | | ||
| | type | <code>'expression'</code> \| <code>'libraryItem'</code> | | | ||
| <a name="DimensionProperties"></a> | ||
| ## DimensionProperties : <code>object</code> | ||
| Extends `NxDimension`, see Engine API: `NxDimension`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxDimension</code> | ||
| **Properties** | ||
| | Name | Type | | ||
| | -------------------- | ---------------------------------------------------------------------------------------- | | ||
| | qAttributeDimensions | [<code>Array.<AttributeDimensionProperties></code>](#AttributeDimensionProperties) | | ||
| | qDef | [<code>InlineDimensionDef</code>](#InlineDimensionDef) | | ||
| <a name="InlineDimensionDef"></a> | ||
| ## InlineDimensionDef : <code>object</code> | ||
| Extends `NxInlineDimensionDef`, see Engine API: `NxInlineDimensionDef`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxInlineDimensionDef</code> | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ----------- | ---------------------------------------------------- | ------------------------------------------------------------------- | | ||
| | [autoSort] | <code>boolean</code> | Set to automatically sort the dimension. | | ||
| | [cId] | <code>string</code> | ID used by the Qlik Sense. Must be unique within the current chart. | | ||
| | othersLabel | <code>string</code> \| <code>StringExpression</code> | | | ||
| <a name="MeasureProperties"></a> | ||
| ## MeasureProperties : <code>object</code> | ||
| Extends `NxMeasure`, see Engine API: `NxMeasure`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxMeasure</code> | ||
| **Properties** | ||
| | Name | Type | | ||
| | --------------------- | ------------------------------------------------------------------------------------------ | | ||
| | qAttributeExpressions | [<code>Array.<AttributeExpressionProperties></code>](#AttributeExpressionProperties) | | ||
| | qDef | [<code>InlineMeasureDef</code>](#InlineMeasureDef) | | ||
| <a name="InlineMeasureDef"></a> | ||
| ## InlineMeasureDef : <code>object</code> | ||
| Extends `NxInlineMeasureDef`, see Engine API: `NxInlineMeasureDef`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxInlineMeasureDef</code> | ||
| **Properties** | ||
| | Name | Type | Default | Description | | ||
| | --------------------- | ---------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------- | | ||
| | [autoSort] | <code>boolean</code> | | Set to automatically sort the measure. | | ||
| | [cId] | <code>string</code> | | ID used by the Qlik Sense. Must be unique within the current chart. | | ||
| | isCustomFormatted | <code>boolean</code> | | Set to true to toggle off the default client formatting. | | ||
| | numFormatFromTemplate | <code>boolean</code> | <code>true</code> | When enabled, the number format to use can be selected from multiple predefined formats based on the desired type (number, date). | | ||
| | othersLabel | <code>string</code> \| <code>StringExpression</code> | | | | ||
| <a name="AttributeDimensionProperties"></a> | ||
| ## AttributeDimensionProperties : <code>object</code> | ||
| Extends `NxAttrDimDef`, see Engine API: `NxAttrDimDef`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxAttrDimDef</code> | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ---- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | id | <code>string</code> | One of: `colorByAlternative`: colors the chart using different dimensions (can be used together with color.mode="byDimension") or `colorByExpression` together with color.mode="byExpression". | | ||
| <a name="AttributeExpressionProperties"></a> | ||
| ## AttributeExpressionProperties : <code>object</code> | ||
| Extends `NxAttrExprDef`, see Engine API: `NxAttrExprDef`. | ||
| **Kind**: global typedef | ||
| **Extends**: <code>NxAttrExprDef</code> | ||
| **Properties** | ||
| | Name | Type | Description | | ||
| | ---- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | id | <code>string</code> | One of: `colorByAlternative`: colors the chart using different dimensions (can be used together with color.mode="byDimension") or `colorByExpression` together with color.mode="byExpression". | |
| { | ||
| "scriptappy": "1.0.0", | ||
| "scriptappy": "1.1.0", | ||
| "info": { | ||
| "name": "@nebula.js/sn-funnel-chart:plugins", | ||
| "description": "Funnel chart plugins API definitions", | ||
| "version": "1.5.1", | ||
| "version": "1.5.2", | ||
| "license": "MIT", | ||
@@ -18,7 +18,5 @@ "stability": "experimental", | ||
| "description": "The keys (references) to different types of chart internals", | ||
| "kind": "object", | ||
| "entries": { | ||
| "COMPONENT": { | ||
| "description": "The unique keys of the existing components available in the funnel chart.\nThey are useful if you want to extend or override the existing components.", | ||
| "kind": "object", | ||
| "entries": { | ||
@@ -40,7 +38,7 @@ "DIMENSION_TITLE": { | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| }, | ||
| "SCALE": { | ||
| "description": "The scales associated with the funnel chart.\nThey are useful if you want to, via plugin, add a new component that\nuses the same scale as one of the measures.", | ||
| "kind": "object", | ||
| "entries": { | ||
@@ -52,10 +50,11 @@ "FILL": { | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| }, | ||
| "layout": { | ||
| "description": "The layout from the enigma model.", | ||
| "kind": "object", | ||
| "entries": {} | ||
| "type": "object" | ||
| } | ||
@@ -65,3 +64,18 @@ } | ||
| }, | ||
| "definitions": {} | ||
| "definitions": { | ||
| "getPluginArgs": { | ||
| "description": "Prepare important chart internals for the users to build their own plugins", | ||
| "kind": "function", | ||
| "params": [ | ||
| { | ||
| "name": "layoutService", | ||
| "type": "object" | ||
| } | ||
| ], | ||
| "returns": { | ||
| "description": "Chart internals that will be exposed to the users.", | ||
| "type": "#/entries/pluginArguments" | ||
| } | ||
| } | ||
| } | ||
| } |
| { | ||
| "scriptappy": "1.0.0", | ||
| "scriptappy": "1.1.0", | ||
| "info": { | ||
| "name": "@nebula.js/sn-funnel-chart:properties", | ||
| "description": "Funnel chart generic object definition", | ||
| "version": "1.5.1", | ||
| "version": "1.5.2", | ||
| "license": "MIT", | ||
@@ -17,3 +17,2 @@ "stability": "stable", | ||
| "description": "Color settings.\nMost color options for visualizations are set in the color object in the options. You activate custom coloring by setting `\"auto\": false` which turns off auto-coloring.\nIf `\"auto\": true`, no other properties need to be defined in the color object.\nNote: Some of the color properties are depending on which theme is currently being used.", | ||
| "kind": "object", | ||
| "entries": { | ||
@@ -97,4 +96,3 @@ "auto": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| }, | ||
@@ -126,4 +124,3 @@ "mode": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| }, | ||
@@ -168,4 +165,3 @@ "paletteColor": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| }, | ||
@@ -180,10 +176,9 @@ "useDimColVal": { | ||
| "defaultValue": true, | ||
| "kind": "literal", | ||
| "value": true | ||
| "type": "boolean" | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| }, | ||
| "dataPoint": { | ||
| "description": "Data point settings.", | ||
| "kind": "object", | ||
| "entries": { | ||
@@ -212,6 +207,6 @@ "auto": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| }, | ||
@@ -230,8 +225,6 @@ "footnote": { | ||
| } | ||
| ], | ||
| "type": "any" | ||
| ] | ||
| }, | ||
| "funnel": { | ||
| "description": "Funnel settings", | ||
| "kind": "object", | ||
| "entries": { | ||
@@ -259,6 +252,6 @@ "mode": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
| "kind": "object" | ||
| }, | ||
@@ -319,4 +312,3 @@ "qHyperCubeDef": { | ||
| } | ||
| ], | ||
| "type": "any" | ||
| ] | ||
| }, | ||
@@ -335,4 +327,3 @@ "title": { | ||
| } | ||
| ], | ||
| "type": "any" | ||
| ] | ||
| }, | ||
@@ -400,4 +391,3 @@ "version": { | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| } | ||
@@ -429,4 +419,3 @@ } | ||
| } | ||
| ], | ||
| "type": "string" | ||
| ] | ||
| } | ||
@@ -464,2 +453,13 @@ } | ||
| "entries": { | ||
| "othersLabel": { | ||
| "kind": "union", | ||
| "items": [ | ||
| { | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "type": "StringExpression" | ||
| } | ||
| ] | ||
| }, | ||
| "autoSort": { | ||
@@ -474,14 +474,2 @@ "description": "Set to automatically sort the dimension.", | ||
| "type": "string" | ||
| }, | ||
| "othersLabel": { | ||
| "kind": "union", | ||
| "items": [ | ||
| { | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "type": "StringExpression" | ||
| } | ||
| ], | ||
| "type": "any" | ||
| } | ||
@@ -499,12 +487,2 @@ } | ||
| "entries": { | ||
| "autoSort": { | ||
| "description": "Set to automatically sort the measure.", | ||
| "optional": true, | ||
| "type": "boolean" | ||
| }, | ||
| "cId": { | ||
| "description": "ID used by the Qlik Sense. Must be unique within the current chart.", | ||
| "optional": true, | ||
| "type": "string" | ||
| }, | ||
| "isCustomFormatted": { | ||
@@ -528,4 +506,13 @@ "description": "Set to true to toggle off the default client formatting.", | ||
| } | ||
| ], | ||
| "type": "any" | ||
| ] | ||
| }, | ||
| "autoSort": { | ||
| "description": "Set to automatically sort the measure.", | ||
| "optional": true, | ||
| "type": "boolean" | ||
| }, | ||
| "cId": { | ||
| "description": "ID used by the Qlik Sense. Must be unique within the current chart.", | ||
| "optional": true, | ||
| "type": "string" | ||
| } | ||
@@ -532,0 +519,0 @@ } |
| /* | ||
| * @nebula.js/sn-funnel-chart v1.5.1 | ||
| * Copyright (c) 2022 QlikTech International AB | ||
| * @nebula.js/sn-funnel-chart v1.5.2 | ||
| * Copyright (c) 2023 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,n,o,a,s,i,l,r,u,c,d,h,m,f,p,g,b,y,v,x,R,M;return{setters:[function(e){t=e.default},function(e){n=e.default},function(e){o=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.cache,M=e.pluginService}],execute:function(){e("default",(function(e){const o=t();o.use(n),o.component("funnel",H);const{flags:a}=e;return{ext:T,qae:{properties:{initial:$},data:{targets:A}},component(){!function({picasso:e,flags:t}){const n=d(),o=h(),a=m(),s=f(),i=p(),l=g().qLocaleInfo,[u,v,x,R]=_({picasso:e,layout:n}),C=r(),D=()=>{const e=u.element.clientWidth!==R.get("width")||u.element.clientHeight!==R.get("height");return!1!==C.chartAnimations&&t.isEnabled("IM_1355_ANIMATIONS_FUNNEL")&&!a.active&&!e},[L]=b((()=>{if(!v)return Promise.resolve();const t=({getUseBaseColors:e})=>({theme:o,colorProps:{...n.color,useBaseColors:e(n)},layout:n,hc:n.qHyperCube}),a=function(e){return{layout:e,keys:{SCALE:{FILL:"fill"},COMPONENT:{FUNNEL:"fun",FUNNEL_LABELS:"funnel-labels",DIMENSION_TITLE:"dimension-title"}}}}(n),s=M({picassoInstance:e,plugins:i,pluginArgs:a});return Promise.all([v.initialize({createConfig:t}),s.initialize()]).then((()=>s))}),[n,v]);c((()=>{if(!u||!v||!L)return;const e=[{type:"q",key:"qHyperCube",data:n.qHyperCube,config:{localeInfo:l}},...v.getData()],t=function({layout:e,constraints:t,colorService:n,theme:o,pluginService:a,animationsEnabled:s}){const i=function(e){return{...e.getScales()}}(n),l=n.getPalettes(),r=[F({layout:e,constraints:t,colorService:n,animationsEnabled:s}),W(e,o,s),V(e)];return{palettes:l,style:{"$font-family":o.getStyle("","","fontFamily"),"$font-color":o.getStyle("","","color"),"$font-size":o.getStyle("","","fontSize")},scales:i,components:a.extendComponents(r),formatters:B()}}({layout:n,constraints:a,colorService:v,theme:o,pluginService:L,animationsEnabled:D});u.update({data:e,settings:t}),R.set("width",u.element.clientWidth),R.set("height",u.element.clientHeight)}),[u,v,o.name(),L,a]),c((()=>{u&&(u.update(),R.set("width",u.element.clientWidth),R.set("height",u.element.clientHeight))}),[s.width,s.height]),c((()=>{x&&x.setLayout(n)}),[n]),y((e=>v.getSnapshotData().then((t=>(e.snapshotData=e.snapshotData||{},e.snapshotData.content=e.snapshotData.content||{},e.snapshotData.content.chartData=t,e))).catch((()=>e))))}({picasso:o,flags:a})}}}));const C={fill:"steelblue",num:1},D=.9,L=150,S=(e,t,n)=>{let o=0,a=0,s=0,i={},l=0;if("labelCenter"===e)o=t.bottomLeft.x,a=t.topRight.y,s=t.bottomRight.x-t.bottomLeft.x,l=t.bottomRight.y-t.topRight.y,i={share:n.share,fill:n.fill};else{const e=180/Math.PI*Math.atan((t.bottomRight.y-t.topRight.y)/(t.topRight.x-t.bottomRight.x));o=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-o,l=t.bottomRight.y-t.topRight.y,i={fill:n.fill}}return{tag:e,type:"rect",x:o,y:a,width:s,height:l,data:n.data,desc:i,fill:"none"}},q=(e,t)=>{const n=(e=>{const t=(e=>{let t=0;return e.forEach((e=>{e.num>t&&(t=e.num)})),t})(e);let n=0;return e.slice().reverse().map((e=>{const o={datum:e,s:n/t,e:e.num/t};return n=e.num,o})).reverse()})(e),o=t.width*D,a=t.height*D,s=(t.width-o)/2,i=(t.height-a)/2,l=o-(o>L&&a>L?100:0),r=(a-1*(n.length-1))/n.length,u=[];return n.forEach(((e,o)=>{const a=(c=e.e,d=o<n.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*o+1*o+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(S("labelCenter",m,p)),u.push(S("labelLeft",m,p)))})),u},w=(e,t,n,o)=>(o-e)/o*(t-n)+n,I=(e,t,n)=>{const o=e.filter((e=>"NaN"!==e.num&&e.num>0)),a=o.length,s=n.width*D,i=n.height*D,l=Math.round((n.width-s)/2),r=Math.round((n.height-i)/2),u=s-(s>L&&i>L?100:0),c=i-1*(a-1),d=[],h=o[0].data.num.value;let m=r;return o.forEach(((e,o)=>{const a=t[o]*c,s=Math.round(w(m-r,u,.2*u,i)/2),f=Math.round(w(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:n.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(S("labelCenter",g,y)),d.push(S("labelLeft",g,y))),m+=a+1})),d},E=(e,t,n)=>{const o=e.filter((e=>"NaN"!==e.num&&e.num>0));if(o&&o.length>0)switch(t){case"WIDTH":return q(o,n);case"ORDER":return I(o,o.map((()=>1/o.length)),n);case"HEIGHT":return I(o,(e=>{const t=e.reduce(((e,t)=>e+t.data.num.value),0);return e.map((e=>e.data.num.value/t))})(o),n);case"AREA":return I(o,((e,t,n)=>{const o=e.reduce(((e,t)=>e+t.data.num.value),0),a=t.width*D,s=t.height*D,i=a*n,l=s*(a+i)/2,r=(a-i)/2/s,u=[];let c=0;for(let t=e.length-1;t>=0;t--){const n=e[t].data.num.value/o,a=2*r*c+i,d=-a/(2*r)+Math.sqrt(a*a/(4*r*r)+n*l/r);u[t]=d/s,c+=d}return u})(o,n,.2),n);default:return q(o,n)}return[]};var H={require:["resolver"],defaultSettings:{settings:{},data:{},style:{item:"$shape"}},render({data:e}){const t=this.resolver.resolve({data:e,defaults:{...C,...this.style.item},settings:this.settings.settings});return E(t.items,this.settings.settings.mode,this.rect)}};const $={version:"1.5.1",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 T={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 title",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 A=[{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 P(e){const t=e.node.desc&&e.node.desc.share;return t?e.formatter("share")(t):""}function N(e){return e.formatter("num")(e.node.data.num.value)}function O({data:e}){return e?e.label:""}function k(e){if(e.dataPoint.auto)return P;switch(e.dataPoint.labelMode){case"share":return P;case"value":return N;case"none":return null;default:return P}}function W(e,t,n){const o=(n,o=1)=>({component:"fun",selector:n,strategy:{type:"rows",settings:{align:o,fill:".labelCenter"===n?({node:e})=>t.getContrastingColorTo(e.desc.fill):t.getStyle("","","color"),labels:".labelCenter"===n?[{label:k(e)}]:[{label:O}],linkData:t=>".labelCenter"===n?"none"===e.dataPoint.labelMode?Math.random():`${t.data.value} ${k(e)(t)}`:`${t.data.value} ${O(t)}`}}});return{key:"funnel-labels",type:"labels",layout:{displayOrder:2},settings:{sources:[o(".labelLeft",0),o(".labelCenter",.5)]},animations:{enabled:n,trackBy:e=>e.data}}}function F({layout:e,constraints:t,colorService:n,animationsEnabled:o}){const a=n.getDatumProps(),s=n.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:o,isMainComponent:!0,trackBy:e=>`${e.tag}: ${e.data.value}`}}}function V(e){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"}}}function B(){return{share:{type:"d3-number",format:".1%"},num:{data:{field:"qMeasureInfo/0"}}}}function _({picasso:e}){const t=o(),n=a(),d=s(),h=i(),m=l(),f=r(),[p,g]=u(),[b,y]=u(),[M,C]=u(),[D,L]=u();return c((()=>{const o=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:n,config:{selectionActions:!1}});return C(s),y(o),g(a),L(R()),()=>{s.destroy(),a.destroy()}}),[]),[p,b,M,D]}}}})); | ||
| System.register(["picasso.js","picasso-plugin-q","@nebula.js/stardust","qlik-chart-modules"],(function(e){"use strict";var t,n,o,a,s,i,l,r,u,c,d,h,m,f,p,g,b,y,v,x,R,M;return{setters:[function(e){t=e.default},function(e){n=e.default},function(e){o=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.cache,M=e.pluginService}],execute:function(){e("default",(function(e){const o=t();o.use(n),o.component("funnel",H);const{flags:a}=e;return{ext:T,qae:{properties:{initial:$},data:{targets:A}},component(){!function({picasso:e,flags:t}){const n=d(),o=h(),a=m(),s=f(),i=p(),l=g().qLocaleInfo,[u,v,x,R]=_({picasso:e,layout:n}),C=r(),D=()=>{const e=u.element.clientWidth!==R.get("width")||u.element.clientHeight!==R.get("height");return!1!==C.chartAnimations&&t.isEnabled("IM_1355_ANIMATIONS_FUNNEL")&&!a.active&&!e},[L]=b((()=>{if(!v)return Promise.resolve();const t=({getUseBaseColors:e})=>({theme:o,colorProps:{...n.color,useBaseColors:e(n)},layout:n,hc:n.qHyperCube}),a=function(e){return{layout:e,keys:{SCALE:{FILL:"fill"},COMPONENT:{FUNNEL:"fun",FUNNEL_LABELS:"funnel-labels",DIMENSION_TITLE:"dimension-title"}}}}(n),s=M({picassoInstance:e,plugins:i,pluginArgs:a});return Promise.all([v.initialize({createConfig:t}),s.initialize()]).then((()=>s))}),[n,v]);c((()=>{if(!u||!v||!L)return;const e=[{type:"q",key:"qHyperCube",data:n.qHyperCube,config:{localeInfo:l}},...v.getData()],t=function({layout:e,constraints:t,colorService:n,theme:o,pluginService:a,animationsEnabled:s}){const i=function(e){return{...e.getScales()}}(n),l=n.getPalettes(),r=[F({layout:e,constraints:t,colorService:n,animationsEnabled:s}),W(e,o,s),V(e)];return{palettes:l,style:{"$font-family":o.getStyle("","","fontFamily"),"$font-color":o.getStyle("","","color"),"$font-size":o.getStyle("","","fontSize")},scales:i,components:a.extendComponents(r),formatters:B()}}({layout:n,constraints:a,colorService:v,theme:o,pluginService:L,animationsEnabled:D});u.update({data:e,settings:t}),R.set("width",u.element.clientWidth),R.set("height",u.element.clientHeight)}),[u,v,o.name(),L,a]),c((()=>{u&&(u.update(),R.set("width",u.element.clientWidth),R.set("height",u.element.clientHeight))}),[s.width,s.height]),c((()=>{x&&x.setLayout(n)}),[n]),y((e=>v.getSnapshotData().then((t=>(e.snapshotData=e.snapshotData||{},e.snapshotData.content=e.snapshotData.content||{},e.snapshotData.content.chartData=t,e))).catch((()=>e))))}({picasso:o,flags:a})}}}));const C={fill:"steelblue",num:1},D=.9,L=150,S=(e,t,n)=>{let o=0,a=0,s=0,i={},l=0;if("labelCenter"===e)o=t.bottomLeft.x,a=t.topRight.y,s=t.bottomRight.x-t.bottomLeft.x,l=t.bottomRight.y-t.topRight.y,i={share:n.share,fill:n.fill};else{const e=180/Math.PI*Math.atan((t.bottomRight.y-t.topRight.y)/(t.topRight.x-t.bottomRight.x));o=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-o,l=t.bottomRight.y-t.topRight.y,i={fill:n.fill}}return{tag:e,type:"rect",x:o,y:a,width:s,height:l,data:n.data,desc:i,fill:"none"}},q=(e,t)=>{const n=(e=>{const t=(e=>{let t=0;return e.forEach((e=>{e.num>t&&(t=e.num)})),t})(e);let n=0;return e.slice().reverse().map((e=>{const o={datum:e,s:n/t,e:e.num/t};return n=e.num,o})).reverse()})(e),o=t.width*D,a=t.height*D,s=(t.width-o)/2,i=(t.height-a)/2,l=o-(o>L&&a>L?100:0),r=(a-1*(n.length-1))/n.length,u=[];return n.forEach(((e,o)=>{const a=(c=e.e,d=o<n.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*o+1*o+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(S("labelCenter",m,p)),u.push(S("labelLeft",m,p)))})),u},w=(e,t,n,o)=>(o-e)/o*(t-n)+n,I=(e,t,n)=>{const o=e.filter((e=>"NaN"!==e.num&&e.num>0)),a=o.length,s=n.width*D,i=n.height*D,l=Math.round((n.width-s)/2),r=Math.round((n.height-i)/2),u=s-(s>L&&i>L?100:0),c=i-1*(a-1),d=[],h=o[0].data.num.value;let m=r;return o.forEach(((e,o)=>{const a=t[o]*c,s=Math.round(w(m-r,u,.2*u,i)/2),f=Math.round(w(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:n.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(S("labelCenter",g,y)),d.push(S("labelLeft",g,y))),m+=a+1})),d},E=(e,t,n)=>{const o=e.filter((e=>"NaN"!==e.num&&e.num>0));if(o&&o.length>0)switch(t){case"WIDTH":return q(o,n);case"ORDER":return I(o,o.map((()=>1/o.length)),n);case"HEIGHT":return I(o,(e=>{const t=e.reduce(((e,t)=>e+t.data.num.value),0);return e.map((e=>e.data.num.value/t))})(o),n);case"AREA":return I(o,((e,t,n)=>{const o=e.reduce(((e,t)=>e+t.data.num.value),0),a=t.width*D,s=t.height*D,i=a*n,l=s*(a+i)/2,r=(a-i)/2/s,u=[];let c=0;for(let t=e.length-1;t>=0;t--){const n=e[t].data.num.value/o,a=2*r*c+i,d=-a/(2*r)+Math.sqrt(a*a/(4*r*r)+n*l/r);u[t]=d/s,c+=d}return u})(o,n,.2),n);default:return q(o,n)}return[]};var H={require:["resolver"],defaultSettings:{settings:{},data:{},style:{item:"$shape"}},render({data:e}){const t=this.resolver.resolve({data:e,defaults:{...C,...this.style.item},settings:this.settings.settings});return E(t.items,this.settings.settings.mode,this.rect)}};const $={version:"1.5.2",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 T={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 title",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 A=[{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 P(e){const t=e.node.desc&&e.node.desc.share;return t?e.formatter("share")(t):""}function N(e){return e.formatter("num")(e.node.data.num.value)}function O({data:e}){return e?e.label:""}function k(e){if(e.dataPoint.auto)return P;switch(e.dataPoint.labelMode){case"share":return P;case"value":return N;case"none":return null;default:return P}}function W(e,t,n){const o=(n,o=1)=>({component:"fun",selector:n,strategy:{type:"rows",settings:{align:o,fill:".labelCenter"===n?({node:e})=>t.getContrastingColorTo(e.desc.fill):t.getStyle("","","color"),labels:".labelCenter"===n?[{label:k(e)}]:[{label:O}],linkData:t=>".labelCenter"===n?"none"===e.dataPoint.labelMode?Math.random():`${t.data.value} ${k(e)(t)}`:`${t.data.value} ${O(t)}`}}});return{key:"funnel-labels",type:"labels",layout:{displayOrder:2},settings:{sources:[o(".labelLeft",0),o(".labelCenter",.5)]},animations:{enabled:n,trackBy:e=>e.data}}}function F({layout:e,constraints:t,colorService:n,animationsEnabled:o}){const a=n.getDatumProps(),s=n.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:o,isMainComponent:!0,trackBy:e=>`${e.tag}: ${e.data.value}`}}}function V(e){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"}}}function B(){return{share:{type:"d3-number",format:".1%"},num:{data:{field:"qMeasureInfo/0"}}}}function _({picasso:e}){const t=o(),n=a(),d=s(),h=i(),m=l(),f=r(),[p,g]=u(),[b,y]=u(),[M,C]=u(),[D,L]=u();return c((()=>{const o=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:n,config:{selectionActions:!1}});return C(s),y(o),g(a),L(R()),()=>{s.destroy(),a.destroy()}}),[]),[p,b,M,D]}}}})); |
| { | ||
| "name": "@nebula.js/sn-funnel-chart", | ||
| "version": "1.5.1", | ||
| "version": "1.5.2", | ||
| "description": "A sequential chart visualizing a linear process with connected stages, for example a sales process with potential revenue at each stage.", | ||
@@ -5,0 +5,0 @@ "author": "QlikTech International AB", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.77%
1951195
- Lines of code
- increased by1.75%
5413
No dependency changes