Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reactify dashboard grid #523

Merged
merged 13 commits into from
Jun 2, 2016
Merged

Reactify dashboard grid #523

merged 13 commits into from
Jun 2, 2016

Conversation

georgeke
Copy link
Contributor

@georgeke georgeke commented May 26, 2016 •
edited
Loading

Using react-grid-layout.

Notable changes:
  • Resizing and dragging are smoother
  • the grid is now responsive, the number of columns as well as column width will change based on browser width
Considerations:
  • this may break some custom CSS. The most notable change is that slices are now divs instead of lis. The gridster class is still in place for legacy purposes.
  • layouts that use less than 12 columns will not be centered anymore. We recommend always using 12 columns.
  • you cannot increase the number of rows of a slice past the screen/browser bounds
  • responsiveness isn't perfect yet, the number of columns at each breakpoint is fixed and can be made better. Also, you have to do a dashboard refresh to resize your slices after changing window size

@landscape-bot
Copy link

Code Health
Repository health decreased by 0.03% when pulling a2033c4 on georgeke:reactify-grid into 7d27692 on airbnb:master.

@coveralls
Copy link

coveralls commented May 26, 2016 •
edited
Loading

Coverage Status

Coverage increased (+0.03%) to 82.197% when pulling a2033c46a5ef565581167c5e48b1a672232223ed on georgeke:reactify-grid into 7d27692 on airbnb:master.

@mistercrunch
Copy link
Member

img

I think we should leave a gridster class on the div where it used to be for backwards compatibility of CSS templates. I'd just add a comment nearby in the code /* gridster for backwards css compatiblity */.

@williaster
Copy link
Contributor

ahhhh I cannot say how happy this makes me 😁 😭 #tearsofjoy and all of the ES6!

williaster
williaster reviewed Jun 1, 2016
View reviewed changes
caravel/assets/javascripts/dashboard.jsx

class SliceCell extends React.Component {
render() {
var slice = this.props.slice,
Copy link
Contributor

Choose a reason for hiding this comment

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

any reason this isn't const slice = ...? and ditto for createMarkup functon.

georgeke added 12 commits June 1, 2016 11:21
@georgeke
Use react-grid-layout instead of gridster
88c66a6
@georgeke
visualizations show and resize
dfd93a8
@georgeke
display slice name and description; links work
2f57d2e
@georgeke
positioning of widgets to match gridster, rowHeight matches
72d98fc
@georgeke
Change margins, rowHeight, unpositioned viz, and expandedSlices to ma…
9f23582 
…tch gridster
@georgeke
Saving dashboard, deleting slices, formatting on slices (chart contro…
a44d362 
…l and resize handle), expanded slices fixed.
@georgeke
responsiveness + use es6 classes
162906a
@georgeke
Minor ui fixes + linting
341838e
@georgeke
CSS transforms on slices messes up nvd3 tooltip positioning.
66d3925 
Turn off CSS transforms for the time being, with a cost of painting speed.

Issue is currently being looked at on the nvd3 repo
PR: novus/nvd3#1674
@georgeke
Remove breakpoint listener, fires when it shouldn't (i.e. too often)
5021643
@georgeke
resize is no longer buggy, minor cleanup
85068bb
@georgeke
gridster class, const, landscape error
b1bf018
@georgeke
Copy link
Contributor Author

georgeke commented Jun 1, 2016

@mistercrunch that's a great idea. There still will be css that needs to be changed since I switched from list elements to divs and some people select with ".gridster li.widget"

@coveralls
Copy link

coveralls commented Jun 1, 2016 •
edited
Loading

Coverage Status

Coverage increased (+0.03%) to 82.139% when pulling b1bf018 on georgeke:reactify-grid into 087c47a on airbnb:master.

@coveralls
Copy link

coveralls commented Jun 2, 2016 •
edited
Loading

Coverage Status

Coverage increased (+0.01%) to 82.12% when pulling ed7ab73 on georgeke:reactify-grid into 087c47a on airbnb:master.

@mistercrunch
Copy link
Member

img

@mistercrunch mistercrunch merged commit c78d368 into apache:master Jun 2, 2016
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 17, 2021
@dependabot-preview @zhaoyongjie
build(deps): bump @airbnb/nimbus from 3.1.3 to 3.1.4 (apache#523)
8cf23ed 
Bumps [@airbnb/nimbus](https://github.com/airbnb/nimbus) from 3.1.3 to 3.1.4.
- [Release notes](https://github.com/airbnb/nimbus/releases)
- [Changelog](https://github.com/airbnb/nimbus/blob/master/CHANGELOG.md)
- [Commits](https://github.com/airbnb/nimbus/compare/@airbnb/nimbus@3.1.3...@airbnb/nimbus@3.1.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 24, 2021
@dependabot-preview @zhaoyongjie
build(deps): bump @airbnb/nimbus from 3.1.3 to 3.1.4 (apache#523)
eaa55b2 
Bumps [@airbnb/nimbus](https://github.com/airbnb/nimbus) from 3.1.3 to 3.1.4.
- [Release notes](https://github.com/airbnb/nimbus/releases)
- [Changelog](https://github.com/airbnb/nimbus/blob/master/CHANGELOG.md)
- [Commits](https://github.com/airbnb/nimbus/compare/@airbnb/nimbus@3.1.3...@airbnb/nimbus@3.1.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 25, 2021
@dependabot-preview @zhaoyongjie
build(deps): bump @airbnb/nimbus from 3.1.3 to 3.1.4 (apache#523)
1101c5b 
Bumps [@airbnb/nimbus](https://github.com/airbnb/nimbus) from 3.1.3 to 3.1.4.
- [Release notes](https://github.com/airbnb/nimbus/releases)
- [Changelog](https://github.com/airbnb/nimbus/blob/master/CHANGELOG.md)
- [Commits](https://github.com/airbnb/nimbus/compare/@airbnb/nimbus@3.1.3...@airbnb/nimbus@3.1.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
zhaoyongjie pushed a commit to zhaoyongjie/incubator-superset that referenced this pull request Nov 26, 2021
@dependabot-preview @zhaoyongjie
build(deps): bump @airbnb/nimbus from 3.1.3 to 3.1.4 (apache#523)
fadf0d6 
Bumps [@airbnb/nimbus](https://github.com/airbnb/nimbus) from 3.1.3 to 3.1.4.
- [Release notes](https://github.com/airbnb/nimbus/releases)
- [Changelog](https://github.com/airbnb/nimbus/blob/master/CHANGELOG.md)
- [Commits](https://github.com/airbnb/nimbus/compare/@airbnb/nimbus@3.1.3...@airbnb/nimbus@3.1.4)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.9.1 labels Feb 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.9.1
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@georgeke @landscape-bot @coveralls @mistercrunch @williaster