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

[FE-17481] Preven table sorting option from being hidden #669

Merged
merged 4 commits into from
Jun 7, 2024
Merged

[FE-17481] Preven table sorting option from being hidden #669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1ae101
Use flexbox, stop from overflowing, hide align bts when too smol
May 16, 2024
0dd020e
FIxed icon alignment and border
May 17, 2024
917507d
Remove old positioning props
May 17, 2024
a853c0c
Update build files
May 20, 2024
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
29 changes: 17 additions & 12 deletions dist/charting.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -784,28 +784,33 @@ body {
left: 0;
width: 100%;
padding: 0 12px;
overflow: hidden; }
overflow: hidden;
border-bottom: 1px solid #e2e2e2; }
.dc-chart .docked-table-header {
display: flex;
position: relative; }
.dc-chart .table-header-item {
position: relative;
white-space: nowrap; }
white-space: nowrap;
display: flex;
align-items: center;
flex-direction: row; }
.dc-chart .table-header-item .align-btn-container {
display: flex;
align-items: center; }
.dc-chart .table-header-item .left-align-btn, .dc-chart .table-header-item .center-align-btn, .dc-chart .table-header-item .right-align-btn {
width: 18px;
height: 24px;
position: absolute;
right: 0;
top: 1px;
min-width: 18px;
min-height: 24px;
padding: 4px 0px;
cursor: pointer;
display: none; }
visibility: hidden;
display: flex; }
.dc-chart .table-header-item .left-align-btn.active .svg-icon, .dc-chart .table-header-item .center-align-btn.active .svg-icon, .dc-chart .table-header-item .right-align-btn.active .svg-icon {
fill: #22A7F0; }
.dc-chart .table-header-item .left-align-btn:hover .svg-icon, .dc-chart .table-header-item .center-align-btn:hover .svg-icon, .dc-chart .table-header-item .right-align-btn:hover .svg-icon {
fill: #22A7F0; }
.dc-chart .table-header-item:hover .left-align-btn, .dc-chart .table-header-item:hover .center-align-btn, .dc-chart .table-header-item:hover .right-align-btn {
display: block; }
visibility: visible; }
.dc-chart .table-header-item.isFiltered .unfilter-btn {
display: block; }
.dc-chart .table-header-item .unfilter-btn {
Expand All @@ -824,13 +829,13 @@ body {
.dc-chart .null-value {
font-style: italic; }
.dc-chart .table-sort {
border-bottom: 1px solid #e2e2e2;
color: #868686;
font-size: 13px;
padding: 4px 24px 4px 20px;
padding: 4px 4px 4px 20px;
background: white;
position: relative;
cursor: text; }
cursor: text;
margin-right: auto; }
.dc-chart .table-sort.active {
color: #22A7F0; }
.dc-chart .table-sort.active:after {
Expand Down
13 changes: 7 additions & 6 deletions dist/charting.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95005,12 +95005,11 @@ function heavyaiTable(parent, chartGroup) {
table.selectAll("th").each(function (d, i) {
var headerItem = dockedHeader.append("div").attr("class", "table-header-item").classed("isFiltered", function () {
return d.expression in _filteredColumns;
});
}).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
var sortLabel = headerItem.append("div").attr("class", "table-sort").classed("disabled", function () {
var isString = data[0] ? typeof data[0]["col".concat(i)] === "string" : false;
return !_isGroupedData && isString;
}).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true).style("width", __WEBPACK_IMPORTED_MODULE_0_d3___default.a.select(this).node().getBoundingClientRect().width + "px");
var textSpan = sortLabel.append("span").text(d.label);
}).classed("active", _sortColumn ? _sortColumn.index === i : false).classed(_sortColumn ? _sortColumn.order : "", true);
var sortButton = sortLabel.append("div").attr("class", "sort-btn").on("click", function () {
_tableWrapper.selectAll(".table-sort").classed("active asc desc", false);
if (_sortColumn && _sortColumn.index === i) {
Expand All @@ -95029,11 +95028,13 @@ function heavyaiTable(parent, chartGroup) {
_chart._invokeSortListener(_sortColumn);
_chart.redrawAsync();
});
var textSpan = sortLabel.append("span").text(d.label);
sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-sort");
sortButton.append("svg").attr("class", "svg-icon").classed("icon-sort-arrow", true).attr("viewBox", "0 0 48 48").append("use").attr("xlink:href", "#icon-arrow1");
var alignBtnContainer = headerItem.append("div").attr("class", "align-btn-container");

// left align button
headerItem.append("div").attr("class", "left-align-btn").classed("active", function () {
alignBtnContainer.append("div").attr("class", "left-align-btn").classed("active", function () {
return _chart.isColLeftAligned(i);
}).on("click", function () {
if (!_chart.isColLeftAligned(i)) {
Expand All @@ -95044,7 +95045,7 @@ function heavyaiTable(parent, chartGroup) {
}).style("left", headerItem.node().getBoundingClientRect().width - 54 + "px").append("svg").attr("class", "svg-icon").classed("icon-caret-left", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-caret-left");

// center align button
headerItem.append("div").attr("class", "center-align-btn").classed("active", function () {
alignBtnContainer.append("div").attr("class", "center-align-btn").classed("active", function () {
return _chart.isColCenterAligned(i);
}).on("click", function () {
if (!_chart.isColCenterAligned(i)) {
Expand All @@ -95055,7 +95056,7 @@ function heavyaiTable(parent, chartGroup) {
}).style("left", headerItem.node().getBoundingClientRect().width - 36 + "px").append("svg").attr("class", "svg-icon").classed("icon-align-center", true).attr("viewBox", "0 0 16 16").append("use").attr("xlink:href", "#icon-align-center");

// right align button
headerItem.append("div").attr("class", "right-align-btn").classed("active", function () {
alignBtnContainer.append("div").attr("class", "right-align-btn").classed("active", function () {
return _chart.isColRightAligned(i);
}).on("click", function () {
if (!_chart.isColRightAligned(i)) {
Expand Down
24 changes: 15 additions & 9 deletions scss/chart.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -666,6 +666,7 @@ body {
width: 100%;
padding: 0 12px;
overflow: hidden;
border-bottom: 1px solid $gray2;
}

.docked-table-header {
Expand All @@ -676,16 +677,21 @@ body {
.table-header-item {
position: relative;
white-space: nowrap;
display: flex;
align-items: center;
flex-direction: row;

.align-btn-container {
display: flex;
align-items: center;
}
.left-align-btn, .center-align-btn, .right-align-btn {
width: 18px;
height: 24px;
position: absolute;
right: 0;
top: 1px;
min-width: 18px;
min-height: 24px;
padding: 4px 0px;
cursor: pointer;
display: none;
visibility: hidden;
display: flex;

&.active {
.svg-icon {
Expand All @@ -702,7 +708,7 @@ body {

&:hover {
.left-align-btn, .center-align-btn, .right-align-btn {
display: block;
visibility: visible;
}
}

Expand Down Expand Up @@ -741,13 +747,13 @@ body {
}

.table-sort {
border-bottom: 1px solid $gray2;
color: $gray5;
font-size: 13px;
padding: 4px 24px 4px 20px;
padding: 4px 4px 4px 20px;
background: white;
position: relative;
cursor: text;
margin-right: auto;

&.active {
color: $blue-main;
Expand Down
28 changes: 16 additions & 12 deletions src/charts/heavyai-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,13 @@ export default function heavyaiTable(parent, chartGroup) {
.append("div")
.attr("class", "table-header-item")
.classed("isFiltered", () => d.expression in _filteredColumns)
.style(
"width",
d3
.select(this)
.node()
.getBoundingClientRect().width + "px"
)

const sortLabel = headerItem
.append("div")
Expand All @@ -517,15 +524,6 @@ export default function heavyaiTable(parent, chartGroup) {
})
.classed("active", _sortColumn ? _sortColumn.index === i : false)
.classed(_sortColumn ? _sortColumn.order : "", true)
.style(
"width",
d3
.select(this)
.node()
.getBoundingClientRect().width + "px"
)

const textSpan = sortLabel.append("span").text(d.label)

const sortButton = sortLabel
.append("div")
Expand All @@ -548,6 +546,8 @@ export default function heavyaiTable(parent, chartGroup) {
_chart.redrawAsync()
})

const textSpan = sortLabel.append("span").text(d.label)

sortButton
.append("svg")
.attr("class", "svg-icon")
Expand All @@ -564,8 +564,12 @@ export default function heavyaiTable(parent, chartGroup) {
.append("use")
.attr("xlink:href", "#icon-arrow1")

const alignBtnContainer = headerItem
.append("div")
.attr("class", "align-btn-container")

// left align button
headerItem
alignBtnContainer
.append("div")
.attr("class", "left-align-btn")
.classed("active", () => _chart.isColLeftAligned(i))
Expand All @@ -588,7 +592,7 @@ export default function heavyaiTable(parent, chartGroup) {
.attr("xlink:href", "#icon-caret-left")

// center align button
headerItem
alignBtnContainer
.append("div")
.attr("class", "center-align-btn")
.classed("active", () => _chart.isColCenterAligned(i))
Expand All @@ -611,7 +615,7 @@ export default function heavyaiTable(parent, chartGroup) {
.attr("xlink:href", "#icon-align-center")

// right align button
headerItem
alignBtnContainer
.append("div")
.attr("class", "right-align-btn")
.classed("active", () => _chart.isColRightAligned(i))
Expand Down