You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by li...@apache.org on 2024/03/08 19:33:58 UTC
(superset) branch table-time-compare-hide-show updated (39bb074810 -> b48bff9bb6)
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a change to branch table-time-compare-hide-show
in repository https://gitbox.apache.org/repos/asf/superset.git
from 39bb074810 Table with Time Comparison:
add 78d31905fa Table with Time Comparison:
new cc5bdc1ad5 feat(time-comparison-table): implement comparison columns dropdown
new 4b7d8930ba expand and collapse all time comparison columns
new 8a1979c768 update variable names
new b48bff9bb6 updated style
The 4 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/components/Dropdown.tsx | 5 +-
.../src/components/Menu.tsx} | 3 +-
.../superset-ui-chart-controls/src/index.ts | 4 +-
.../plugins/plugin-chart-table/package.json | 1 +
.../plugin-chart-table/src/DataTable/DataTable.tsx | 20 ++-
.../plugins/plugin-chart-table/src/TableChart.tsx | 172 ++++++++++++++++++++-
.../plugins/plugin-chart-table/src/buildQuery.ts | 5 +-
.../plugin-chart-table/src/controlPanel.tsx | 19 ++-
.../plugin-chart-table/src/transformProps.ts | 3 +-
9 files changed, 209 insertions(+), 23 deletions(-)
copy docs/babel.config.js => superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx (90%)
copy superset-frontend/packages/{superset-ui-core/src/dynamic-plugins/index.ts => superset-ui-chart-controls/src/components/Menu.tsx} (91%)
(superset) 01/04: feat(time-comparison-table): implement comparison columns dropdown
Posted by li...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-compare-hide-show
in repository https://gitbox.apache.org/repos/asf/superset.git
commit cc5bdc1ad5351eccde8294996a54be35a8bbe614
Author: lilykuang <ji...@gmail.com>
AuthorDate: Fri Mar 8 09:04:55 2024 -0800
feat(time-comparison-table): implement comparison columns dropdown
---
.../src/{index.ts => components/Dropdown.tsx} | 20 +--
.../src/{index.ts => components/Menu.tsx} | 20 +--
.../superset-ui-chart-controls/src/index.ts | 4 +-
.../plugins/plugin-chart-table/package.json | 1 +
.../plugin-chart-table/src/DataTable/DataTable.tsx | 14 ++-
.../plugins/plugin-chart-table/src/TableChart.tsx | 134 +++++++++++++++++++--
6 files changed, 146 insertions(+), 47 deletions(-)
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
similarity index 56%
copy from superset-frontend/packages/superset-ui-chart-controls/src/index.ts
copy to superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
index 4e00929119..032365ebd5 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Dropdown.tsx
@@ -16,22 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import * as sectionsModule from './sections';
-export * from './utils';
-export * from './constants';
-export * from './operators';
-
-// can't do `export * as sections from './sections'`, babel-transformer will fail
-export const sections = sectionsModule;
-
-export * from './components/InfoTooltipWithTrigger';
-export * from './components/ColumnOption';
-export * from './components/ColumnTypeLabel/ColumnTypeLabel';
-export * from './components/MetricOption';
-export * from './components/ControlSubSectionHeader';
-export * from './components/Tooltip';
-
-export * from './shared-controls';
-export * from './types';
-export * from './fixtures';
+export { Dropdown } from 'antd';
+export type { DropDownProps } from 'antd/lib/dropdown';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
similarity index 56%
copy from superset-frontend/packages/superset-ui-chart-controls/src/index.ts
copy to superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
index 4e00929119..89a7405cde 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/Menu.tsx
@@ -16,22 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import * as sectionsModule from './sections';
-export * from './utils';
-export * from './constants';
-export * from './operators';
-
-// can't do `export * as sections from './sections'`, babel-transformer will fail
-export const sections = sectionsModule;
-
-export * from './components/InfoTooltipWithTrigger';
-export * from './components/ColumnOption';
-export * from './components/ColumnTypeLabel/ColumnTypeLabel';
-export * from './components/MetricOption';
-export * from './components/ControlSubSectionHeader';
-export * from './components/Tooltip';
-
-export * from './shared-controls';
-export * from './types';
-export * from './fixtures';
+export { Menu } from 'antd';
+export type { MenuProps } from 'antd/lib/menu';
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
index 4e00929119..fed32cae3a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/index.ts
@@ -28,8 +28,10 @@ export const sections = sectionsModule;
export * from './components/InfoTooltipWithTrigger';
export * from './components/ColumnOption';
export * from './components/ColumnTypeLabel/ColumnTypeLabel';
-export * from './components/MetricOption';
export * from './components/ControlSubSectionHeader';
+export * from './components/Dropdown';
+export * from './components/Menu';
+export * from './components/MetricOption';
export * from './components/Tooltip';
export * from './shared-controls';
diff --git a/superset-frontend/plugins/plugin-chart-table/package.json b/superset-frontend/plugins/plugin-chart-table/package.json
index 6df1ceb33e..d43e33808e 100644
--- a/superset-frontend/plugins/plugin-chart-table/package.json
+++ b/superset-frontend/plugins/plugin-chart-table/package.json
@@ -37,6 +37,7 @@
"xss": "^1.0.14"
},
"peerDependencies": {
+ "@ant-design/icons": "^5.0.1",
"@superset-ui/chart-controls": "*",
"@superset-ui/core": "*",
"@testing-library/dom": "^7.29.4",
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index 79ab44981e..18c7ac6214 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
@@ -68,6 +68,7 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
wrapperRef?: MutableRefObject<HTMLDivElement>;
onColumnOrderChange: () => void;
renderGroupingHeaders?: () => JSX.Element;
+ renderTimeComparisonDropdown?: () => JSX.Element;
}
export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -101,6 +102,7 @@ export default typedMemo(function DataTable<D extends object>({
wrapperRef: userWrapperRef,
onColumnOrderChange,
renderGroupingHeaders,
+ renderTimeComparisonDropdown,
...moreUseTableOptions
}: DataTableProps<D>): JSX.Element {
const tableHooks: PluginHook<D>[] = [
@@ -117,7 +119,8 @@ export default typedMemo(function DataTable<D extends object>({
const sortByRef = useRef([]); // cache initial `sortby` so sorting doesn't trigger page reset
const pageSizeRef = useRef([initialPageSize, resultsSize]);
const hasPagination = initialPageSize > 0 && resultsSize > 0; // pageSize == 0 means no pagination
- const hasGlobalControl = hasPagination || !!searchInput;
+ const hasGlobalControl =
+ hasPagination || !!searchInput || renderTimeComparisonDropdown;
const initialState = {
...initialState_,
// zero length means all pages, the `usePagination` plugin does not
@@ -359,7 +362,7 @@ export default typedMemo(function DataTable<D extends object>({
{hasGlobalControl ? (
<div ref={globalControlRef} className="form-inline dt-controls">
<div className="row">
- <div className="col-sm-6">
+ <div className="col-sm-5">
{hasPagination ? (
<SelectPageSize
total={resultsSize}
@@ -375,7 +378,7 @@ export default typedMemo(function DataTable<D extends object>({
) : null}
</div>
{searchInput ? (
- <div className="col-sm-6">
+ <div className="col-sm-5">
<GlobalFilter<D>
searchInput={
typeof searchInput === 'boolean' ? undefined : searchInput
@@ -386,6 +389,11 @@ export default typedMemo(function DataTable<D extends object>({
/>
</div>
) : null}
+ {renderTimeComparisonDropdown ? (
+ <div className="col-sm-2" style={{ float: 'right' }}>
+ {renderTimeComparisonDropdown()}
+ </div>
+ ) : null}
</div>
</div>
) : null}
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index ab75914c97..7034262efc 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -50,6 +50,8 @@ import {
tn,
useTheme,
} from '@superset-ui/core';
+import { Dropdown, Menu } from '@superset-ui/chart-controls';
+import { CheckOutlined, DownOutlined } from '@ant-design/icons';
import { isEmpty } from 'lodash';
import { DataColumnMeta, TableChartTransformedProps } from './types';
@@ -242,6 +244,12 @@ export default function TableChart<D extends DataRecord = DataRecord>(
emitCrossFilters,
enableTimeComparison,
} = props;
+ const comparisonColumns = [
+ { key: 'all', label: t('Display all') },
+ { key: '#', label: '#' },
+ { key: '△', label: '△' },
+ { key: '%', label: '%' },
+ ];
const timestampFormatter = useCallback(
value => getTimeFormatterForGranularity(timeGrain)(value),
[timeGrain],
@@ -252,6 +260,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
});
// keep track of whether column order changed, so that column widths can too
const [columnOrderToggle, setColumnOrderToggle] = useState(false);
+ const [showTimeComparisonDropdown, setShowTimeComparisonDropdown] =
+ useState(false);
+ const [selectedKeys, setSelectedKeys] = useState([comparisonColumns[0].key]);
const theme = useTheme();
// only take relevant page size options
@@ -371,6 +382,33 @@ export default function TableChart<D extends DataRecord = DataRecord>(
};
};
+ const comparisonLabels = [t('Main'), '#', '△', '%'];
+ const filteredColumnsMeta = useMemo(() => {
+ if (!enableTimeComparison) {
+ return columnsMeta;
+ }
+ const allColumns = comparisonColumns[0].key;
+ const isAllColumnsKeySelected = selectedKeys.includes(allColumns);
+ const mainLabel = comparisonLabels[0];
+
+ return columnsMeta.filter(col => {
+ const { label } = col;
+
+ return (
+ label === mainLabel ||
+ !comparisonLabels.includes(label) ||
+ isAllColumnsKeySelected ||
+ selectedKeys.includes(label)
+ );
+ });
+ }, [
+ columnsMeta,
+ comparisonColumns,
+ comparisonLabels,
+ selectedKeys,
+ enableTimeComparison,
+ ]);
+
const handleContextMenu =
onContextMenu && !isRawRecords
? (
@@ -384,7 +422,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
clientY: number,
) => {
const drillToDetailFilters: BinaryQueryObjectFilterClause[] = [];
- columnsMeta.forEach(col => {
+ filteredColumnsMeta.forEach(col => {
if (!col.isMetric) {
const dataRecordValue = value[col.key];
drillToDetailFilters.push({
@@ -416,8 +454,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
}
: undefined;
- const comparisonLabels = [t('Main'), '#', '△', '%'];
-
const getHeaderColumns = (
columnsMeta: DataColumnMeta[],
enableTimeComparison?: boolean,
@@ -447,6 +483,87 @@ export default function TableChart<D extends DataRecord = DataRecord>(
return resultMap;
};
+ const renderTimeComparisonDropdown = (): JSX.Element => {
+ const allKey = comparisonColumns[0].key;
+ const handleOnClick = (data: any) => {
+ const { key } = data;
+ // Toggle 'All' key selection
+ if (key === allKey) {
+ setSelectedKeys([allKey]);
+ } else if (selectedKeys.includes(allKey)) {
+ setSelectedKeys([key]);
+ } else {
+ // Toggle selection for other keys
+ setSelectedKeys(
+ selectedKeys.includes(key)
+ ? selectedKeys.filter(k => k !== key) // Deselect if already selected
+ : [...selectedKeys, key],
+ ); // Select if not already selected
+ }
+ };
+
+ const handleOnBlur = () => {
+ if (selectedKeys.length === 3) {
+ setSelectedKeys([comparisonColumns[0].key]);
+ }
+ };
+
+ return (
+ <Dropdown
+ placement="bottomRight"
+ visible={showTimeComparisonDropdown}
+ onVisibleChange={(flag: boolean) => {
+ setShowTimeComparisonDropdown(flag);
+ }}
+ overlay={
+ <Menu
+ multiple
+ onClick={handleOnClick}
+ onBlur={handleOnBlur}
+ selectedKeys={selectedKeys}
+ >
+ <div
+ css={css`
+ max-width: 242px;
+ padding: 0 ${theme.gridUnit * 2}px;
+ color: ${theme.colors.grayscale.base};
+ font-size: ${theme.typography.sizes.s}px;
+ `}
+ >
+ {t(
+ 'Select columns that will be displayed in the table. You can multiselect columns.',
+ )}
+ </div>
+ {comparisonColumns.map(column => (
+ <Menu.Item key={column.key}>
+ <span
+ css={css`
+ color: ${theme.colors.grayscale.dark2};
+ `}
+ >
+ {column.label}
+ </span>
+ <span
+ css={css`
+ float: right;
+ font-size: ${theme.typography.sizes.s}px;
+ `}
+ >
+ {selectedKeys.includes(column.key) && <CheckOutlined />}
+ </span>
+ </Menu.Item>
+ ))}
+ </Menu>
+ }
+ trigger={['click']}
+ >
+ <span>
+ {t('Display columns')} <DownOutlined />
+ </span>
+ </Dropdown>
+ );
+ };
+
const renderGroupingHeaders = (): JSX.Element => {
// TODO: Make use of ColumnGroup to render the aditional headers
const headers: any = [];
@@ -499,8 +616,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
};
const groupHeaderColumns = useMemo(
- () => getHeaderColumns(columnsMeta, enableTimeComparison),
- [columnsMeta, enableTimeComparison],
+ () => getHeaderColumns(filteredColumnsMeta, enableTimeComparison),
+ [filteredColumnsMeta, enableTimeComparison],
);
const getColumnConfigs = useCallback(
@@ -769,8 +886,8 @@ export default function TableChart<D extends DataRecord = DataRecord>(
);
const columns = useMemo(
- () => columnsMeta.map(getColumnConfigs),
- [columnsMeta, getColumnConfigs],
+ () => filteredColumnsMeta.map(getColumnConfigs),
+ [filteredColumnsMeta, getColumnConfigs],
);
const handleServerPaginationChange = useCallback(
@@ -840,6 +957,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
renderGroupingHeaders={
!isEmpty(groupHeaderColumns) ? renderGroupingHeaders : undefined
}
+ renderTimeComparisonDropdown={
+ enableTimeComparison ? renderTimeComparisonDropdown : undefined
+ }
/>
</Styles>
);
(superset) 02/04: expand and collapse all time comparison columns
Posted by li...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-compare-hide-show
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 4b7d8930baf65c26e577d5178a4ba64f13841ef3
Author: lilykuang <ji...@gmail.com>
AuthorDate: Fri Mar 8 10:37:11 2024 -0800
expand and collapse all time comparison columns
---
.../plugins/plugin-chart-table/src/TableChart.tsx | 54 ++++++++++++++++++----
1 file changed, 44 insertions(+), 10 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 7034262efc..39bab8b358 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -51,7 +51,12 @@ import {
useTheme,
} from '@superset-ui/core';
import { Dropdown, Menu } from '@superset-ui/chart-controls';
-import { CheckOutlined, DownOutlined } from '@ant-design/icons';
+import {
+ CheckOutlined,
+ DownOutlined,
+ MinusCircleOutlined,
+ PlusCircleOutlined,
+} from '@ant-design/icons';
import { isEmpty } from 'lodash';
import { DataColumnMeta, TableChartTransformedProps } from './types';
@@ -263,6 +268,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const [showTimeComparisonDropdown, setShowTimeComparisonDropdown] =
useState(false);
const [selectedKeys, setSelectedKeys] = useState([comparisonColumns[0].key]);
+ const [hideComparisonKeys, setHideComparisonKeys] = useState<string[]>([]);
const theme = useTheme();
// only take relevant page size options
@@ -388,25 +394,31 @@ export default function TableChart<D extends DataRecord = DataRecord>(
return columnsMeta;
}
const allColumns = comparisonColumns[0].key;
- const isAllColumnsKeySelected = selectedKeys.includes(allColumns);
- const mainLabel = comparisonLabels[0];
+ const main = comparisonLabels[0];
+ const showAllColumns = selectedKeys.includes(allColumns);
- return columnsMeta.filter(col => {
- const { label } = col;
+ return columnsMeta.filter(({ label, key }) => {
+ // Extract the key portion after the space, assuming the format is always "label key"
+ const keyPortion = key.substring(label.length);
+ const isKeyHidded = hideComparisonKeys.includes(keyPortion);
+ const isLableMain = label === main;
return (
- label === mainLabel ||
- !comparisonLabels.includes(label) ||
- isAllColumnsKeySelected ||
- selectedKeys.includes(label)
+ (isKeyHidded && isLableMain) ||
+ (!isKeyHidded &&
+ (isLableMain ||
+ !comparisonLabels.includes(label) ||
+ showAllColumns ||
+ selectedKeys.includes(label)))
);
});
}, [
columnsMeta,
comparisonColumns,
comparisonLabels,
- selectedKeys,
enableTimeComparison,
+ hideComparisonKeys,
+ selectedKeys,
]);
const handleContextMenu =
@@ -589,6 +601,28 @@ export default function TableChart<D extends DataRecord = DataRecord>(
headers.push(
<th key={`header-${key}`} colSpan={colSpan} style={{ borderBottom: 0 }}>
{key}
+ <span
+ css={css`
+ float: right;
+ color: ${theme.colors.grayscale.base};
+ `}
+ >
+ {hideComparisonKeys.includes(key) ? (
+ <PlusCircleOutlined
+ onClick={() =>
+ setHideComparisonKeys(
+ hideComparisonKeys.filter(k => k !== key),
+ )
+ }
+ />
+ ) : (
+ <MinusCircleOutlined
+ onClick={() =>
+ setHideComparisonKeys([...hideComparisonKeys, key])
+ }
+ />
+ )}
+ </span>
</th>,
);
(superset) 03/04: update variable names
Posted by li...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-compare-hide-show
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 8a1979c7680a0a3466afbf56ba7ddd677374f4d8
Author: lilykuang <ji...@gmail.com>
AuthorDate: Fri Mar 8 10:52:02 2024 -0800
update variable names
---
.../plugins/plugin-chart-table/src/TableChart.tsx | 46 +++++++++++-----------
1 file changed, 24 insertions(+), 22 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 39bab8b358..be27e3102c 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -265,9 +265,10 @@ export default function TableChart<D extends DataRecord = DataRecord>(
});
// keep track of whether column order changed, so that column widths can too
const [columnOrderToggle, setColumnOrderToggle] = useState(false);
- const [showTimeComparisonDropdown, setShowTimeComparisonDropdown] =
- useState(false);
- const [selectedKeys, setSelectedKeys] = useState([comparisonColumns[0].key]);
+ const [showComparisonDropdown, setShowComparisonDropdown] = useState(false);
+ const [selectedComparisonColumns, setSelectedComparisonColumns] = useState([
+ comparisonColumns[0].key,
+ ]);
const [hideComparisonKeys, setHideComparisonKeys] = useState<string[]>([]);
const theme = useTheme();
@@ -395,7 +396,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
}
const allColumns = comparisonColumns[0].key;
const main = comparisonLabels[0];
- const showAllColumns = selectedKeys.includes(allColumns);
+ const showAllColumns = selectedComparisonColumns.includes(allColumns);
return columnsMeta.filter(({ label, key }) => {
// Extract the key portion after the space, assuming the format is always "label key"
@@ -404,12 +405,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const isLableMain = label === main;
return (
- (isKeyHidded && isLableMain) ||
+ isLableMain ||
(!isKeyHidded &&
- (isLableMain ||
- !comparisonLabels.includes(label) ||
+ (!comparisonLabels.includes(label) ||
showAllColumns ||
- selectedKeys.includes(label)))
+ selectedComparisonColumns.includes(label)))
);
});
}, [
@@ -418,7 +418,7 @@ export default function TableChart<D extends DataRecord = DataRecord>(
comparisonLabels,
enableTimeComparison,
hideComparisonKeys,
- selectedKeys,
+ selectedComparisonColumns,
]);
const handleContextMenu =
@@ -501,38 +501,38 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const { key } = data;
// Toggle 'All' key selection
if (key === allKey) {
- setSelectedKeys([allKey]);
- } else if (selectedKeys.includes(allKey)) {
- setSelectedKeys([key]);
+ setSelectedComparisonColumns([allKey]);
+ } else if (selectedComparisonColumns.includes(allKey)) {
+ setSelectedComparisonColumns([key]);
} else {
// Toggle selection for other keys
- setSelectedKeys(
- selectedKeys.includes(key)
- ? selectedKeys.filter(k => k !== key) // Deselect if already selected
- : [...selectedKeys, key],
+ setSelectedComparisonColumns(
+ selectedComparisonColumns.includes(key)
+ ? selectedComparisonColumns.filter(k => k !== key) // Deselect if already selected
+ : [...selectedComparisonColumns, key],
); // Select if not already selected
}
};
const handleOnBlur = () => {
- if (selectedKeys.length === 3) {
- setSelectedKeys([comparisonColumns[0].key]);
+ if (selectedComparisonColumns.length === 3) {
+ setSelectedComparisonColumns([comparisonColumns[0].key]);
}
};
return (
<Dropdown
placement="bottomRight"
- visible={showTimeComparisonDropdown}
+ visible={showComparisonDropdown}
onVisibleChange={(flag: boolean) => {
- setShowTimeComparisonDropdown(flag);
+ setShowComparisonDropdown(flag);
}}
overlay={
<Menu
multiple
onClick={handleOnClick}
onBlur={handleOnBlur}
- selectedKeys={selectedKeys}
+ selectedKeys={selectedComparisonColumns}
>
<div
css={css`
@@ -561,7 +561,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
font-size: ${theme.typography.sizes.s}px;
`}
>
- {selectedKeys.includes(column.key) && <CheckOutlined />}
+ {selectedComparisonColumns.includes(column.key) && (
+ <CheckOutlined />
+ )}
</span>
</Menu.Item>
))}
(superset) 04/04: updated style
Posted by li...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a commit to branch table-time-compare-hide-show
in repository https://gitbox.apache.org/repos/asf/superset.git
commit b48bff9bb67191964e710a31996b82bb69409533
Author: lilykuang <ji...@gmail.com>
AuthorDate: Fri Mar 8 11:33:26 2024 -0800
updated style
---
.../plugins/plugin-chart-table/src/DataTable/DataTable.tsx | 10 ++++++++--
.../plugins/plugin-chart-table/src/TableChart.tsx | 4 +++-
2 files changed, 11 insertions(+), 3 deletions(-)
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
index 18c7ac6214..242029e163 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/DataTable.tsx
@@ -362,7 +362,9 @@ export default typedMemo(function DataTable<D extends object>({
{hasGlobalControl ? (
<div ref={globalControlRef} className="form-inline dt-controls">
<div className="row">
- <div className="col-sm-5">
+ <div
+ className={renderTimeComparisonDropdown ? 'col-sm-5' : 'col-sm-6'}
+ >
{hasPagination ? (
<SelectPageSize
total={resultsSize}
@@ -378,7 +380,11 @@ export default typedMemo(function DataTable<D extends object>({
) : null}
</div>
{searchInput ? (
- <div className="col-sm-5">
+ <div
+ className={
+ renderTimeComparisonDropdown ? 'col-sm-5' : 'col-sm-6'
+ }
+ >
<GlobalFilter<D>
searchInput={
typeof searchInput === 'boolean' ? undefined : searchInput
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index be27e3102c..c274296ccd 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -606,7 +606,9 @@ export default function TableChart<D extends DataRecord = DataRecord>(
<span
css={css`
float: right;
- color: ${theme.colors.grayscale.base};
+ & svg {
+ color: ${theme.colors.grayscale.base} !important;
+ }
`}
>
{hideComparisonKeys.includes(key) ? (