Skip to content

Commit

Permalink
Gray out unselected rows in table (#3420)
Browse files Browse the repository at this point in the history 
* Remove unecessary class name

* gray out unselected rows in tdd

* Factor in exclude mode

* Remove style

* Move regular-table styles to repo

* Apply same style as other tables
  • Loading branch information
@djbarnwal
djbarnwal authored Nov 9, 2023
1 parent eca2213 commit 433edd6
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 44 deletions.
2 changes: 1 addition & 1 deletion web-common/src/features/dashboards/pivot/Pivot.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import "regular-table";
import "regular-table/dist/css/material.css";
import "./regular-table-style.css";
import type { RegularTableElement } from "regular-table";
import { createEventDispatcher, onMount } from "svelte";
import type { PivotPos, PivotRenderCallback } from "./types";
Expand Down
39 changes: 39 additions & 0 deletions web-common/src/features/dashboards/pivot/regular-table-style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* Copy of regular-table/dist/css/material.css with some styles removed */

regular-table tbody td,regular-table thead th:not(.rt-group-corner){transform:translate(var(--regular-table--transform-x,0px),0);}
regular-table tbody{transform:translate(0,var(--regular-table--transform-y,0px));}
regular-table tbody tr:first-child td,regular-table tbody tr:first-child th{-webkit-clip-path:polygon(0 var(--regular-table--clip-y,0),0 100%,100% 100%,100% var(--regular-table--clip-y,0));clip-path:polygon(0 var(--regular-table--clip-y,0),0 100%,100% 100%,100% var(--regular-table--clip-y,0));}
regular-table tbody tr td:first-of-type{-webkit-clip-path:polygon(var(--regular-table--clip-x,0)0,var(--regular-table--clip-x,0)100%,100% 100%,100% 0);clip-path:polygon(var(--regular-table--clip-x,0)0,var(--regular-table--clip-x,0)100%,100% 100%,100% 0);}
regular-table tbody tr:first-child td:first-of-type{-webkit-clip-path:polygon(var(--regular-table--clip-x,0)var(--regular-table--clip-y,0),var(--regular-table--clip-x,0)100%,100% 100%,100% var(--regular-table--clip-y,0));clip-path:polygon(var(--regular-table--clip-x,0)var(--regular-table--clip-y,0),var(--regular-table--clip-x,0)100%,100% 100%,100% var(--regular-table--clip-y,0));}
regular-table{padding-top:12px;padding-left:12px;padding-bottom:0;padding-right:0;scrollbar-color:transparent transparent;scrollbar-width:thin;outline:none;}
regular-table:hover{scrollbar-color:rgba(0,0,0,0.3)transparent;}
regular-table div[tabindex]{outline:none;}
regular-table>div{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;}
regular-table th{text-align:center;}
regular-table thead tr:not(:last-child) th{overflow:hidden;max-width:0px;}
regular-table thead tr:last-child .rt-float,regular-table tbody .rt-float{text-align:right;}
regular-table thead .rt-integer,regular-table tbody .rt-integer{text-align:right;}
regular-table tbody th{text-align:left;}
regular-table span.rt-tree-container{display:flex;align-items:center;height:100%;}
regular-table thead .rt-string,regular-table tbody .rt-string,regular-table thead .rt-date,regular-table tbody .rt-date,regular-table thead .rt-datetime,regular-table tbody .rt-datetime{text-align:left;}
regular-table thead tr:last-child th{border-bottom:1px solid#ddd;}
regular-table th{position:relative;}
regular-table tr th span.rt-tree-group{margin-left:5px;margin-right:15px;border-left:1px solid#eee;height:100%;}
regular-table td,regular-table th{white-space:nowrap;font-size:12px;padding-right:5px;padding-left:5px;padding-top:0px;padding-bottom:0px;height:19px;}
regular-table table *{box-sizing:border-box;}
regular-table table{position:absolute;overflow:hidden;color:#666;outline:none;}
regular-table span.rt-row-header-icon{color:#aaa;padding-right:4px;font-family:"Material Icons";}
regular-table span.rt-column-header-icon{font-size:10px;padding-left:3px;display:inline-block;width:10px;font-family:"Material Icons";}
regular-table span.rt-row-header-icon:hover{color:#1a7da1;text-shadow:0px 0px 3px#1a7da1;}
regular-table .rt-selected td{background-color:#eee;}
regular-table .rt-cell-clip{overflow:hidden;text-overflow:ellipsis;}
regular-table td span.rt-group-name,regular-table th span.rt-group-name{margin-right:-5px;padding-right:5px;padding-left:8px;flex:1;height:100%;}
regular-table th span.rt-group-name{text-align:left;}
regular-table td th span.rt-group-leaf,regular-table th span.rt-group-leaf{margin-left:16px;height:100%;}
regular-table .rt-column-resize{height:100%;width:10px;position:absolute;top:0;right:0;cursor:col-resize;}
regular-table::-webkit-scrollbar,regular-table::-webkit-scrollbar-corner{background-color:transparent;height:12px;width:12px;}
regular-table::-webkit-scrollbar-thumb{background-clip:content-box;background-color:rgba(0,0,0,0);border-radius:5px;}
regular-table::-webkit-scrollbar-thumb:horizontal{border-bottom:2px solid transparent;border-top:2px solid transparent;}
regular-table::-webkit-scrollbar-thumb:vertical{border-left:2px solid transparent;border-right:2px solid transparent;}
regular-table:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);}
regular-table::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.3);}
82 changes: 48 additions & 34 deletions web-common/src/features/dashboards/time-dimension-details/TDDTable.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,15 +54,15 @@
const renderCell: PivotRenderCallback = (data) => {
const classesToAdd = ["text-right"];
const classesToRemove = [
"!bg-white",
"!bg-gray-100",
"!bg-gray-200",
"!bg-blue-50",
"!bg-blue-100",
"!bg-blue-200",
"!bg-slate-50",
"!bg-slate-100",
"!bg-slate-200",
"bg-white",
"bg-gray-100",
"bg-gray-200",
"bg-blue-50",
"bg-blue-100",
"bg-blue-200",
"bg-slate-50",
"bg-slate-100",
"bg-slate-200",
];
if (data.y === 2) {
Expand Down Expand Up @@ -124,34 +124,44 @@
const getMarker = (value, y) => {
if (y === 0) {
noSelectionMarkerCount = 0;
return ``;
return { icon: ``, muted: false };
}
const visibleIdx = tableData?.selectedValues.indexOf(value.value);
if (comparing === "time") {
if (y == 1) return SelectedCheckmark("fill-blue-500");
else if (y == 2) return SelectedCheckmark("fill-gray-300");
else return ``;
let icon = "";
if (y == 1) icon = SelectedCheckmark("fill-blue-500");
else if (y == 2) icon = SelectedCheckmark("fill-gray-300");
return { icon, muted: false };
}
if (visibleIdx > -1) {
if (excludeMode) return ExcludeIcon;
if (excludeMode) return { icon: ExcludeIcon, muted: true };
// Only show colored markers for first 11 selected values
else
return SelectedCheckmark(
"fill-" +
(visibleIdx < 11 ? CHECKMARK_COLORS[visibleIdx] : "gray-300")
);
return {
icon: SelectedCheckmark(
"fill-" +
(visibleIdx < 11 ? CHECKMARK_COLORS[visibleIdx] : "gray-300")
),
muted: false,
};
} else if (noSelectionMarkerCount < 3) {
if (excludeMode || !tableData?.selectedValues.length) {
noSelectionMarkerCount += 1;
return `<div class="rounded-full bg-${
CHECKMARK_COLORS[noSelectionMarkerCount - 1]
}" style="width: 13px; height: 13px;"></div>`;
return {
icon: `<div class="rounded-full bg-${
CHECKMARK_COLORS[noSelectionMarkerCount - 1]
}" style="width: 13px; height: 13px;"></div>`,
muted: false,
};
}
}
return ``;
return {
icon: ``,
muted: !excludeMode && tableData?.selectedValues.length > 0,
};
};
const renderRowHeader: PivotRenderCallback = ({ value, x, y, element }) => {
Expand All @@ -171,35 +181,39 @@
x - tableData?.fixedColCount
);
if (x > 0) {
element.classList.remove(
"!bg-slate-50",
"!bg-slate-100",
"!bg-slate-200"
);
element.classList.remove("bg-slate-50", "bg-slate-100", "bg-slate-200");
element.classList.add(cellBgColor);
}
if (x === 0) {
element.classList.add("pl-0");
const marker = getMarker(value, y);
// Gray out rows which are not included
if (marker.muted) {
element?.parentElement?.classList.add("ui-copy-disabled-faint");
} else {
element?.parentElement?.classList.remove("ui-copy-disabled-faint");
}
const justifyTotal = y === 0 ? "justify-end" : "";
const fontWeight = y === 0 ? "font-semibold" : "font-normal";
return `<div class="flex items-center w-full h-full overflow-hidden pr-2 gap-1 ${justifyTotal}">
<div class="w-5 shrink-0 h-full flex items-center justify-center" toggle-visible="${y}">${marker}</div>
<div class="truncate text-xs ${fontWeight} text-gray-700">${value.value}</div></div>`;
<div class="w-5 shrink-0 h-full flex items-center justify-center" toggle-visible="${y}">${marker.icon}</div>
<div class="truncate text-xs ${fontWeight}">${value.value}</div></div>`;
} else if (x === 1)
return `<div class="text-xs font-semibold text-right text-gray-700 flex items-center justify-end gap-2" >${value.value}
return `<div class="text-xs font-semibold text-right flex items-center justify-end gap-2" >${value.value}
${value.spark}
</div>`;
else
return `<div class="text-xs font-normal text-right text-gray-700" >${value.value}</div>`;
return `<div class="text-xs font-normal text-right" >${value.value}</div>`;
};
const renderRowCorner: PivotRenderCallback = (data) => {
data.element.classList.add("bg-white", "z-10");
if (data.x === 0)
return `
<div class="flex items-center font-medium text-gray-700 text-left" sort="dimension">
<div class="flex items-center font-medium text-left" sort="dimension">
<span class="truncate">${dimensionLabel} </span>
${
comparing === "dimension" && sortType === SortType.DIMENSION
Expand All @@ -208,7 +222,7 @@
}
</div>`;
if (data.x === 1)
return `<div class="text-right font-medium text-gray-700 flex items-center" sort="value">
return `<div class="text-right font-medium flex items-center" sort="value">
<span class="truncate">${measureLabel} </span>
${
comparing === "dimension" &&
Expand All @@ -219,7 +233,7 @@
}
</div>`;
if (data.x === 2)
return `<div class="flex items-center justify-end text-gray-700" sort="value">${PieChart} %
return `<div class="flex items-center justify-end" sort="value">${PieChart} %
${
comparing === "dimension" && sortType === SortType.VALUE
? MeasureArrow(sortDirection)
Expand Down
18 changes: 9 additions & 9 deletions web-common/src/features/dashboards/time-dimension-details/util.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,19 @@ export function getClassForCell(
) {
const bgColors = {
fixed: {
base: "!bg-slate-50",
highlighted: "!bg-slate-100",
doubleHighlighted: "!bg-slate-200",
base: "bg-slate-50",
highlighted: "bg-slate-100",
doubleHighlighted: "bg-slate-200",
},
scrubbed: {
base: "!bg-blue-50",
highlighted: "!bg-blue-100",
doubleHighlighted: "!bg-blue-200",
base: "bg-blue-50",
highlighted: "bg-blue-100",
doubleHighlighted: "bg-blue-200",
},
default: {
base: "!bg-white",
highlighted: "!bg-gray-100",
doubleHighlighted: "!bg-gray-200",
base: "bg-white",
highlighted: "bg-gray-100",
doubleHighlighted: "bg-gray-200",
},
};

Expand Down

1 comment on commit 433edd6

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

🎉 Published on https://ui.rilldata.io as production
🚀 Deployed on https://654cbf0777617b1d4d0c3029--rill-ui-stage.netlify.app

Please sign in to comment.