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

Widget filters overlapped by visualization #4137

Merged
merged 3 commits into from
Sep 18, 2019
Merged

Widget filters overlapped by visualization #4137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c1af432
Fix: widget filters overlapped by visualization
kravets-levko Sep 12, 2019
ab8ca00
Fix tests
kravets-levko Sep 12, 2019
b2c13d3
Fix tests
kravets-levko Sep 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion client/app/assets/less/inc/visualizations/pivot-table.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
.pivot-table-renderer > table,
visualization-renderer > .visualization-renderer-wrapper {
overflow: auto;
}
3 changes: 2 additions & 1 deletion client/app/assets/less/redash/query.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,8 @@ a.label-tag {
border-bottom: 1px solid #efefef;
}

.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
.pivot-table-renderer > table,
visualization-renderer > .visualization-renderer-wrapper {
overflow: visible;
}

Expand Down
5 changes: 3 additions & 2 deletions client/app/pages/dashboards/dashboard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
padding: 0;
}

.pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {
.pivot-table-renderer > table,
visualization-renderer > .visualization-renderer-wrapper {
overflow: visible;
}

Expand Down Expand Up @@ -65,7 +66,7 @@
right: 0;
bottom: 0;

> div {
> .visualization-renderer-wrapper {
flex-grow: 1;
position: relative;
}
Expand Down
16 changes: 9 additions & 7 deletions client/app/visualizations/VisualizationRenderer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,15 @@ export function VisualizationRenderer(props) {
return (
<React.Fragment>
{showFilters && <Filters filters={filters} onChange={setFilters} />}
<Renderer
key={`visualization${visualization.id}`}
options={options}
data={filteredData}
visualizationName={visualization.name}
context={props.context}
/>
<div className="visualization-renderer-wrapper">
<Renderer
key={`visualization${visualization.id}`}
options={options}
data={filteredData}
visualizationName={visualization.name}
context={props.context}
/>
</div>
</React.Fragment>
);
}
Expand Down
4 changes: 4 additions & 0 deletions client/app/visualizations/table/renderer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,10 @@

/* START table x scroll */
.dashboard-widget-wrapper:not(.widget-auto-height-enabled) & {
position: absolute;
left: 0;
top: 0;
width: 100%;
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not a big fan of this unless absolutely (pun intended) necessary.
Instead you can just add overflow-x: auto to:

redash/client/app/pages/dashboards/dashboard.less

Lines 69 to 72 in b2c13d3

> .visualization-renderer-wrapper {
flex-grow: 1;
position: relative;
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@ranbena Tried your suggestion and seems it works. Can you please briefly test it to confirm that your table scroll feature works as expected (with and without filters)? I tested it of course, but want to be sure that I didn't miss anything. Thanks!

Copy link
Contributor

Choose a reason for hiding this comment

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

Sure. I'll be able to within the hour.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Okay, this variant does not work on test environment (not sure why). I'll revert it

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

image

height: 100%;

& div {
Expand Down