mirror of
https://github.com/apache/superset.git
synced 2024-09-06 22:07:34 -04:00
fix: properly render booleans in FilterBox and explore page data preview (#12116)
This commit is contained in:
parent
d543ca87fb
commit
8e625e0a64
@ -19,3 +19,6 @@
|
|||||||
export const DATETIME_WITH_TIME_ZONE = 'YYYY-MM-DD HH:mm:ssZ';
|
export const DATETIME_WITH_TIME_ZONE = 'YYYY-MM-DD HH:mm:ssZ';
|
||||||
|
|
||||||
export const TIME_WITH_MS = 'HH:mm:ss.SSS';
|
export const TIME_WITH_MS = 'HH:mm:ss.SSS';
|
||||||
|
|
||||||
|
export const BOOL_TRUE_DISPLAY = 'True';
|
||||||
|
export const BOOL_FALSE_DISPLAY = 'False';
|
||||||
|
@ -19,7 +19,10 @@
|
|||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { styled, t } from '@superset-ui/core';
|
import { styled, t } from '@superset-ui/core';
|
||||||
import { FormControl } from 'react-bootstrap';
|
import { FormControl } from 'react-bootstrap';
|
||||||
|
import { Column } from 'react-table';
|
||||||
import debounce from 'lodash/debounce';
|
import debounce from 'lodash/debounce';
|
||||||
|
|
||||||
|
import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
|
||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import {
|
import {
|
||||||
applyFormattingToTabularData,
|
applyFormattingToTabularData,
|
||||||
@ -95,11 +98,30 @@ export const useFilteredTableData = (
|
|||||||
);
|
);
|
||||||
}, [data, filterText]);
|
}, [data, filterText]);
|
||||||
|
|
||||||
export const useTableColumns = (data?: Record<string, any>[]) =>
|
export const useTableColumns = (
|
||||||
|
data?: Record<string, any>[],
|
||||||
|
moreConfigs?: { [key: string]: Partial<Column> },
|
||||||
|
) =>
|
||||||
useMemo(
|
useMemo(
|
||||||
() =>
|
() =>
|
||||||
data?.length
|
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],
|
||||||
);
|
);
|
||||||
|
@ -235,28 +235,34 @@ const ExploreChartPanel = props => {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const panelBody = <div className="panel-body">{renderChart()}</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Styles className="panel panel-default chart-container">
|
<Styles className="panel panel-default chart-container">
|
||||||
<div className="panel-heading" ref={panelHeadingRef}>
|
<div className="panel-heading" ref={panelHeadingRef}>
|
||||||
{header}
|
{header}
|
||||||
</div>
|
</div>
|
||||||
<Split
|
{props.vizType === 'filter_box' ? (
|
||||||
sizes={splitSizes}
|
panelBody
|
||||||
minSize={MIN_SIZES}
|
) : (
|
||||||
direction="vertical"
|
<Split
|
||||||
gutterSize={gutterHeight}
|
sizes={splitSizes}
|
||||||
onDragStart={onDragStart}
|
minSize={MIN_SIZES}
|
||||||
onDragEnd={onDragEnd}
|
direction="vertical"
|
||||||
elementStyle={elementStyle}
|
gutterSize={gutterHeight}
|
||||||
>
|
onDragStart={onDragStart}
|
||||||
<div className="panel-body">{renderChart()}</div>
|
onDragEnd={onDragEnd}
|
||||||
<DataTablesPane
|
elementStyle={elementStyle}
|
||||||
queryFormData={props.chart.latestQueryFormData}
|
>
|
||||||
tableSectionHeight={tableSectionHeight}
|
{panelBody}
|
||||||
onCollapseChange={onCollapseChange}
|
<DataTablesPane
|
||||||
displayBackground={displaySouthPaneBackground}
|
queryFormData={props.chart.latestQueryFormData}
|
||||||
/>
|
tableSectionHeight={tableSectionHeight}
|
||||||
</Split>
|
onCollapseChange={onCollapseChange}
|
||||||
|
displayBackground={displaySouthPaneBackground}
|
||||||
|
/>
|
||||||
|
</Split>
|
||||||
|
)}
|
||||||
</Styles>
|
</Styles>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -24,8 +24,8 @@ import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
|
|||||||
import Button from 'src/components/Button';
|
import Button from 'src/components/Button';
|
||||||
import { t, styled, SupersetClient } from '@superset-ui/core';
|
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 FormLabel from 'src/components/FormLabel';
|
||||||
|
|
||||||
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
||||||
import ControlRow from 'src/explore/components/ControlRow';
|
import ControlRow from 'src/explore/components/ControlRow';
|
||||||
import Control from 'src/explore/components/Control';
|
import Control from 'src/explore/components/Control';
|
||||||
@ -216,7 +216,13 @@ class FilterBox extends React.PureComponent {
|
|||||||
const color = 'lightgrey';
|
const color = 'lightgrey';
|
||||||
const backgroundImage = `linear-gradient(to right, ${color}, ${color} ${perc}%, rgba(0,0,0,0) ${perc}%`;
|
const backgroundImage = `linear-gradient(to right, ${color}, ${color} ${perc}%, rgba(0,0,0,0) ${perc}%`;
|
||||||
const style = { backgroundImage };
|
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 };
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user