This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new 8e625e0 fix: properly render booleans in FilterBox and explore page
data preview (#12116)
8e625e0 is described below
commit 8e625e0a6490e1433e9d8e001b05c43e000f8ded
Author: Jesse Yang <[email protected]>
AuthorDate: Fri Dec 18 10:40:56 2020 -0800
fix: properly render booleans in FilterBox and explore page data preview
(#12116)
---
superset-frontend/src/constants.ts | 3 ++
.../src/explore/components/DataTableControl.tsx | 28 +++++++++++++--
.../src/explore/components/ExploreChartPanel.jsx | 40 +++++++++++++---------
.../src/visualizations/FilterBox/FilterBox.jsx | 10 ++++--
4 files changed, 59 insertions(+), 22 deletions(-)
diff --git a/superset-frontend/src/constants.ts
b/superset-frontend/src/constants.ts
index a1ce0ae..ab19f14 100644
--- a/superset-frontend/src/constants.ts
+++ b/superset-frontend/src/constants.ts
@@ -19,3 +19,6 @@
export const DATETIME_WITH_TIME_ZONE = 'YYYY-MM-DD HH:mm:ssZ';
export const TIME_WITH_MS = 'HH:mm:ss.SSS';
+
+export const BOOL_TRUE_DISPLAY = 'True';
+export const BOOL_FALSE_DISPLAY = 'False';
diff --git a/superset-frontend/src/explore/components/DataTableControl.tsx
b/superset-frontend/src/explore/components/DataTableControl.tsx
index 52619f3..cae88b0 100644
--- a/superset-frontend/src/explore/components/DataTableControl.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl.tsx
@@ -19,7 +19,10 @@
import React, { useMemo } from 'react';
import { styled, t } from '@superset-ui/core';
import { FormControl } from 'react-bootstrap';
+import { Column } from 'react-table';
import debounce from 'lodash/debounce';
+
+import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
import Button from 'src/components/Button';
import {
applyFormattingToTabularData,
@@ -95,11 +98,30 @@ export const useFilteredTableData = (
);
}, [data, filterText]);
-export const useTableColumns = (data?: Record<string, any>[]) =>
+export const useTableColumns = (
+ data?: Record<string, any>[],
+ moreConfigs?: { [key: string]: Partial<Column> },
+) =>
useMemo(
() =>
data?.length
- ? Object.keys(data[0]).map(key => ({ accessor: key, Header: key }))
+ ? Object.keys(data[0]).map(
+ key =>
+ ({
+ accessor: key,
+ Header: key,
+ Cell: ({ value }) => {
+ if (value === true) {
+ return BOOL_TRUE_DISPLAY;
+ }
+ if (value === false) {
+ return BOOL_FALSE_DISPLAY;
+ }
+ return String(value);
+ },
+ ...moreConfigs?.[key],
+ } as Column),
+ )
: [],
- [data],
+ [data, moreConfigs],
);
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
index 0c608ea..088ee1a 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel.jsx
@@ -235,28 +235,34 @@ const ExploreChartPanel = props => {
};
};
+ const panelBody = <div className="panel-body">{renderChart()}</div>;
+
return (
<Styles className="panel panel-default chart-container">
<div className="panel-heading" ref={panelHeadingRef}>
{header}
</div>
- <Split
- sizes={splitSizes}
- minSize={MIN_SIZES}
- direction="vertical"
- gutterSize={gutterHeight}
- onDragStart={onDragStart}
- onDragEnd={onDragEnd}
- elementStyle={elementStyle}
- >
- <div className="panel-body">{renderChart()}</div>
- <DataTablesPane
- queryFormData={props.chart.latestQueryFormData}
- tableSectionHeight={tableSectionHeight}
- onCollapseChange={onCollapseChange}
- displayBackground={displaySouthPaneBackground}
- />
- </Split>
+ {props.vizType === 'filter_box' ? (
+ panelBody
+ ) : (
+ <Split
+ sizes={splitSizes}
+ minSize={MIN_SIZES}
+ direction="vertical"
+ gutterSize={gutterHeight}
+ onDragStart={onDragStart}
+ onDragEnd={onDragEnd}
+ elementStyle={elementStyle}
+ >
+ {panelBody}
+ <DataTablesPane
+ queryFormData={props.chart.latestQueryFormData}
+ tableSectionHeight={tableSectionHeight}
+ onCollapseChange={onCollapseChange}
+ displayBackground={displaySouthPaneBackground}
+ />
+ </Split>
+ )}
</Styles>
);
};
diff --git a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
index 08e3155..0a382c5 100644
--- a/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
+++ b/superset-frontend/src/visualizations/FilterBox/FilterBox.jsx
@@ -24,8 +24,8 @@ import { AsyncCreatableSelect, CreatableSelect } from
'src/components/Select';
import Button from 'src/components/Button';
import { t, styled, SupersetClient } from '@superset-ui/core';
+import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
import FormLabel from 'src/components/FormLabel';
-
import DateFilterControl from
'src/explore/components/controls/DateFilterControl';
import ControlRow from 'src/explore/components/ControlRow';
import Control from 'src/explore/components/Control';
@@ -216,7 +216,13 @@ class FilterBox extends React.PureComponent {
const color = 'lightgrey';
const backgroundImage = `linear-gradient(to right, ${color}, ${color}
${perc}%, rgba(0,0,0,0) ${perc}%`;
const style = { backgroundImage };
- return { value: opt.id, label: opt.id, style };
+ let label = opt.id;
+ if (label === true) {
+ label = BOOL_TRUE_DISPLAY;
+ } else if (label === false) {
+ label = BOOL_FALSE_DISPLAY;
+ }
+ return { value: opt.id, label, style };
});
}
