From 7561513eea064b00de4349f22cd6fb2a8c41c492 Mon Sep 17 00:00:00 2001 From: Ilfat Galiev Date: Thu, 24 Aug 2017 14:20:09 +0300 Subject: [PATCH] Fix restoring settings when data set was filtered (#25) Fix links labels for graph with cycles Fix saving settings for graph with cycles --- CHANGELOG.md | 6 ++++++ package.json | 2 +- pbiviz.json | 4 ++-- src/visual.ts | 54 ++++++++++++++++++++++++++++++++++++++------------- 4 files changed, 50 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 264dfd3..e8fd63f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 1.4.1 + +* Fix restoring settings when data set was filtered +* Fix links labels for graph with cycles +* Fix saving settings for graph with cycles + ## 1.4.0 * Feature to move nodes to any place in the viewport diff --git a/package.json b/package.json index 16e33ef..4f971c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "powerbi-visuals-sankey", - "version": "1.4.0", + "version": "1.4.1", "description": "Sankey is a type of flow diagram in which the width of the series is in proportion to the quantity of the flow. Use it to find major contributions to an overall flow.", "repository": { "type": "git", diff --git a/pbiviz.json b/pbiviz.json index d9915dd..457533c 100644 --- a/pbiviz.json +++ b/pbiviz.json @@ -1,10 +1,10 @@ { "visual": { "name": "SankeyDiagram", - "displayName": "Sankey 1.4.0", + "displayName": "Sankey 1.4.1", "guid": "SankeyDiagram1446463184954", "visualClassName": "SankeyDiagram", - "version": "1.4.0", + "version": "1.4.1", "description": "Sankey is a type of flow diagram in which the width of the series is in proportion to the quantity of the flow. Use it to find major contributions to an overall flow.", "supportUrl": "http://community.powerbi.com", "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-sankey" diff --git a/src/visual.ts b/src/visual.ts index 85bf0e2..36e50b9 100755 --- a/src/visual.ts +++ b/src/visual.ts @@ -364,7 +364,10 @@ module powerbi.extensibility.visual { let cycles: SankeyDiagramCycleDictionary = this.checkCycles(nodes); - links = this.processCycles(cycles, nodes, links); + links = this.processCycles(cycles, nodes, links, settings); + + this.checkNodePositionSettings(nodes, settings); + this.restoreNodePositions(nodes, settings); return { nodes, @@ -375,7 +378,7 @@ module powerbi.extensibility.visual { } // in this method we breaking simple cycles for typical displaying with twice rendering onr node in cycle - private processCycles(cycles: SankeyDiagramCycleDictionary, nodes: SankeyDiagramNode[], links: SankeyDiagramLink[]): SankeyDiagramLink[] { + private processCycles(cycles: SankeyDiagramCycleDictionary, nodes: SankeyDiagramNode[], links: SankeyDiagramLink[], settings: SankeyDiagramSettings): SankeyDiagramLink[] { let createdNodes: SankeyDiagramNode[] = []; for (let nodeName in cycles) { let firstCyclesNode: SankeyDiagramNode = (cycles[nodeName].filter((node: SankeyDiagramNode): boolean => { @@ -426,6 +429,33 @@ module powerbi.extensibility.visual { return links; } + private checkNodePositionSettings(nodes: SankeyDiagramNode[], settings: SankeyDiagramSettings) { + let nodePositions: SankeyDiagramNodePositionSetting[] = settings._nodePositions; + + nodePositions.forEach((position: SankeyDiagramNodePositionSetting) => { + let check: boolean = nodes.some((node: SankeyDiagramNode) => { + if (node.label.name === position.name) { + return true; + } + + return false; + }); + + // if check failed then reset positions + if (!check) { + settings.nodeComplexSettings.nodePositions = "{}"; + settings._nodePositions = []; + } + }); + } + + private restoreNodePositions(nodes: SankeyDiagramNode[], settings: SankeyDiagramSettings) { + nodes.forEach( (node: SankeyDiagramNode) => { + let nodeSettings: SankeyDiagramNodePositionSetting = this.getNodeSettings(node.label.name, settings); + node.settings = nodeSettings; + }); + } + // remove dublicated links private static fixLinksCount(node: SankeyDiagramNode) { node.links = _.uniq(node.links); @@ -549,8 +579,6 @@ module powerbi.extensibility.visual { color: settings.labels.fill }; - let nodeSettings: SankeyDiagramNodePositionSetting = this.getNodeSettings(item, settings); - nodes.push({ label: label, links: [], @@ -561,7 +589,7 @@ module powerbi.extensibility.visual { colour: this.colorPalette.getColor(index.toString()).value, tooltipInfo: [], selectableDataPoints: [], - settings: nodeSettings + settings: null }); }); @@ -700,12 +728,12 @@ module powerbi.extensibility.visual { } private getNodeSettings( - internalName: string, + name: string, settings: SankeyDiagramSettings): SankeyDiagramNodePositionSetting { let setting: SankeyDiagramNodePositionSetting = null; settings._nodePositions.some( (nodePositions: SankeyDiagramNodePositionSetting) => { - if (nodePositions.name === internalName) { + if (nodePositions.name === name) { setting = nodePositions; return true; } @@ -1341,13 +1369,13 @@ module powerbi.extensibility.visual { node.settings = { x: node.x.toFixed(2), y: node.y.toFixed(2), - name: node.label.internalName + name: node.label.name }; // Update each link related with this node node.links.forEach( (link: SankeyDiagramLink) => { // select link svg element by ID generated in link creation as Source-Destination - d3.select(`#${(link.source.label.internalName || "").replace(/\W*/g,"")}-${(link.destination.label.internalName || "").replace(/\W*/g,"")}`).attr({ + d3.select(`#${(link.source.label.name || "").replace(/\W*/g,"")}-${(link.destination.label.name || "").replace(/\W*/g,"")}`).attr({ // get updated path params based on actual positions of node d: sankeyVisual.getSvgPath(link) }); @@ -1400,7 +1428,7 @@ module powerbi.extensibility.visual { return; } let settings: SankeyDiagramNodePositionSetting = { - name: node.label.internalName, + name: node.label.name, x: node.x.toFixed(0), y: node.y.toFixed(0) }; @@ -1468,7 +1496,7 @@ module powerbi.extensibility.visual { d: (link: SankeyDiagramLink) => { return this.getSvgPath(link); }, - id: (link: SankeyDiagramLink) => `${(link.source.label.internalName || "").replace(/\W*/g,"")}-${(link.destination.label.internalName || "").replace(/\W*/g,"")}` + id: (link: SankeyDiagramLink) => `${(link.source.label.name || "").replace(/\W*/g,"")}-${(link.destination.label.name || "").replace(/\W*/g,"")}` }) .style({ "stroke-width": (link: SankeyDiagramLink) => link.height < SankeyDiagram.MinWidthOfLink ? SankeyDiagram.MinWidthOfLink : link.height, @@ -1518,7 +1546,7 @@ module powerbi.extensibility.visual { d: (link: SankeyDiagramLink) => { return this.getSvgPath(link); }, - id: (link: SankeyDiagramLink) => `${(link.source.label.internalName || "").replace(/\W*/g,"")}-${(link.destination.label.internalName || "").replace(/\W*/g,"")}` + id: (link: SankeyDiagramLink) => `${(link.source.label.name || "").replace(/\W*/g,"")}-${(link.destination.label.name || "").replace(/\W*/g,"")}` }); linkLabelPathsSelection @@ -1549,7 +1577,7 @@ module powerbi.extensibility.visual { textPathSelection .attr({ startOffset: "50%", - href: (link: SankeyDiagramLink) => `#${(link.source.label.internalName || "").replace(/\W*/g,"")}-${(link.destination.label.internalName || "").replace(/\W*/g,"")}` + href: (link: SankeyDiagramLink) => `#${(link.source.label.name || "").replace(/\W*/g,"")}-${(link.destination.label.name || "").replace(/\W*/g,"")}` }) .style({ "font-size": this.dataView.settings.linkLabels.fontSize,