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 20:01:43 UTC
(superset) branch table-time-comparison-columns-show-hide created (now 51758617b3)
This is an automated email from the ASF dual-hosted git repository.
lilykuang pushed a change to branch table-time-comparison-columns-show-hide
in repository https://gitbox.apache.org/repos/asf/superset.git
at 51758617b3 updated style
This branch includes the following new commits:
new 2f4ed93fbd feat(time-comparison-table): implement comparison columns dropdown
new a5a6704728 expand and collapse all time comparison columns
new 3ed24bede3 update variable names
new 51758617b3 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.
(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-comparison-columns-show-hide
in repository https://gitbox.apache.org/repos/asf/superset.git
commit a5a670472867c07adb118fe8b8cec7403495a034
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) 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-comparison-columns-show-hide
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 2f4ed93fbd5a2c0df4143f8f45f3442050d95677
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) 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-comparison-columns-show-hide
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 51758617b36b870b8f2c52f368d7ec1af8221f1f
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) ? (
(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-comparison-columns-show-hide
in repository https://gitbox.apache.org/repos/asf/superset.git
commit 3ed24bede3987e42466f0b31ad8620557fab868d
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>
))}