Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

fix(forcedirected.js): make force directed graph zoomable and pannable #393

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

IndexOutOfRange
Copy link

💔 Breaking Changes

🏆 Enhancements

📜 Documentation

🐛 Bug Fix
Fix apache/superset#7246
Force directed graph can now be zoomed in/out and panned.

🏠 Internal

@IndexOutOfRange IndexOutOfRange requested a review from a team as a code owner March 8, 2020 16:21
@netlify
Copy link

netlify bot commented Mar 8, 2020

Deploy preview for superset-ui-plugins ready!

Built with commit d7ba315

https://deploy-preview-393--superset-ui-plugins.netlify.com

@codecov
Copy link

codecov bot commented Mar 8, 2020

Codecov Report

Merging #393 into master will increase coverage by 1.29%.
The diff coverage is 0%.

Impacted file tree graph

@@            Coverage Diff            @@
##           master    #393      +/-   ##
=========================================
+ Coverage    1.48%   2.78%   +1.29%     
=========================================
  Files         185     186       +1     
  Lines        5805    5827      +22     
  Branches      370     372       +2     
=========================================
+ Hits           86     162      +76     
+ Misses       5707    5638      -69     
- Partials       12      27      +15
Impacted Files Coverage Δ
...y-plugin-chart-force-directed/src/ForceDirected.js 0% <0%> (ø) ⬆️
...rset-ui-legacy-plugin-chart-table/test/testData.ts 100% <0%> (ø)
...i-legacy-plugin-chart-table/src/ReactDataTable.tsx 75.64% <0%> (+75.64%) ⬆️
...ui-legacy-plugin-chart-table/src/transformProps.ts 76.47% <0%> (+76.47%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 073341b...d7ba315. Read the comment docs.

@@ -38,11 +38,18 @@ const propTypes = {
/* Modified from http://bl.ocks.org/d3noob/5141278 */
function ForceDirected(element, props) {
const { data, width, height, linkLength = 200, charge = -500 } = props;

let w = window.innerWidth;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chart does not always have width and height being 100% of the window width and height.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the input. I commited a version where width/height are inherited.

@IndexOutOfRange IndexOutOfRange changed the title [WIP] fix(forcedirected.js): make force directed graph zoomable and pannable fix(forcedirected.js): make force directed graph zoomable and pannable Mar 9, 2020
.attr('width', width)
.attr('height', height);
function resize() {
const { innerWidth, innerHeight } = window;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using window 's innerWidth and innerHeight makes the chart expand beyond its supposed size.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Forced Directed graph is cut off and returns [object Object] after resize
2 participants