mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
fix(fix issues in superset): fix issues in superset
This commit is contained in:
parent
6f6de6df18
commit
db4863d14b
@ -32,6 +32,8 @@ const defaultProps = {
|
|||||||
onRemoveFilter: NOOP,
|
onRemoveFilter: NOOP,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const SEARCH_BAR_HEIGHT = 40;
|
||||||
|
|
||||||
export type TableProps = Props & Readonly<typeof defaultProps>;
|
export type TableProps = Props & Readonly<typeof defaultProps>;
|
||||||
|
|
||||||
type InternalTableProps = TableProps & WithStylesProps;
|
type InternalTableProps = TableProps & WithStylesProps;
|
||||||
@ -174,8 +176,10 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const tableHeight = includeSearch ? height - SEARCH_BAR_HEIGHT : height;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={cx(styles.container)}>
|
||||||
{includeSearch && (
|
{includeSearch && (
|
||||||
<div className={cx(styles.searchBar)}>
|
<div className={cx(styles.searchBar)}>
|
||||||
<div className={cx(styles.searchBox)}>
|
<div className={cx(styles.searchBox)}>
|
||||||
@ -200,14 +204,17 @@ class TableVis extends React.PureComponent<InternalTableProps, TableState> {
|
|||||||
zebra
|
zebra
|
||||||
rowHeight={heightType}
|
rowHeight={heightType}
|
||||||
renderers={renderers}
|
renderers={renderers}
|
||||||
height={height}
|
height={tableHeight}
|
||||||
/>
|
/>
|
||||||
</>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withStyles(({ unit }) => ({
|
export default withStyles(({ unit }) => ({
|
||||||
|
container: {
|
||||||
|
display: 'grid',
|
||||||
|
},
|
||||||
searchBar: {
|
searchBar: {
|
||||||
alignItems: 'baseline',
|
alignItems: 'baseline',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
|
@ -24,6 +24,8 @@ import buildQuery from './buildQuery';
|
|||||||
import TableFormData from './TableFormData';
|
import TableFormData from './TableFormData';
|
||||||
|
|
||||||
Core.initialize({ name: 'superset-datatable' });
|
Core.initialize({ name: 'superset-datatable' });
|
||||||
|
const { aesthetic } = Core;
|
||||||
|
aesthetic.globals = {};
|
||||||
|
|
||||||
export default class TableChartPlugin extends ChartPlugin<TableFormData> {
|
export default class TableChartPlugin extends ChartPlugin<TableFormData> {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -22,6 +22,8 @@ import transformProps from './transformProps';
|
|||||||
import createMetadata from '../createMetadata';
|
import createMetadata from '../createMetadata';
|
||||||
|
|
||||||
Core.initialize({ name: 'superset-datatable' });
|
Core.initialize({ name: 'superset-datatable' });
|
||||||
|
const { aesthetic } = Core;
|
||||||
|
aesthetic.globals = {};
|
||||||
|
|
||||||
export default class TableChartPlugin extends ChartPlugin {
|
export default class TableChartPlugin extends ChartPlugin {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -51,6 +51,28 @@ export const getRenderer = ({
|
|||||||
const isMetric = column.type === 'metric';
|
const isMetric = column.type === 'metric';
|
||||||
let Parent;
|
let Parent;
|
||||||
|
|
||||||
|
const boxStyle: CSSProperties = {
|
||||||
|
backgroundColor:
|
||||||
|
enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
|
||||||
|
cursor: isMetric ? 'default' : 'pointer',
|
||||||
|
margin: '0px -16px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const boxContainerStyle: CSSProperties = {
|
||||||
|
alignItems: 'center',
|
||||||
|
display: 'flex',
|
||||||
|
height: HEIGHT_TO_PX[heightType],
|
||||||
|
margin: '0px 16px',
|
||||||
|
position: 'relative',
|
||||||
|
textAlign: isMetric ? 'right' : 'left',
|
||||||
|
};
|
||||||
|
|
||||||
|
const FullCellBackgroundWrapper = ({ children }: { children: React.ReactNode }) => (
|
||||||
|
<div style={boxStyle}>
|
||||||
|
<div style={boxContainerStyle}>{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
if (isMetric) {
|
if (isMetric) {
|
||||||
let left = 0;
|
let left = 0;
|
||||||
let width = 0;
|
let width = 0;
|
||||||
@ -66,21 +88,8 @@ export const getRenderer = ({
|
|||||||
width = Math.round((Math.abs(value) / tot) * 100);
|
width = Math.round((Math.abs(value) / tot) * 100);
|
||||||
}
|
}
|
||||||
const color = colorPositiveNegative && value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
|
const color = colorPositiveNegative && value < 0 ? NEGATIVE_COLOR : POSITIVE_COLOR;
|
||||||
Parent = ({ children }: { children: React.ReactNode }) => {
|
|
||||||
const boxStyle: CSSProperties = {
|
|
||||||
backgroundColor:
|
|
||||||
enableFilter && isSelected({ key: keyName, value }) ? SELECTION_COLOR : undefined,
|
|
||||||
margin: '0px -16px',
|
|
||||||
};
|
|
||||||
const boxContainerStyle: CSSProperties = {
|
|
||||||
alignItems: 'center',
|
|
||||||
display: 'flex',
|
|
||||||
height: HEIGHT_TO_PX[heightType],
|
|
||||||
margin: '0px 16px',
|
|
||||||
position: 'relative',
|
|
||||||
textAlign: isMetric ? 'right' : 'left',
|
|
||||||
};
|
|
||||||
|
|
||||||
|
Parent = ({ children }: { children: React.ReactNode }) => {
|
||||||
const barStyle: CSSProperties = {
|
const barStyle: CSSProperties = {
|
||||||
background: color,
|
background: color,
|
||||||
borderRadius: 3,
|
borderRadius: 3,
|
||||||
@ -91,24 +100,28 @@ export const getRenderer = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={boxStyle}>
|
<FullCellBackgroundWrapper>
|
||||||
<div style={boxContainerStyle}>
|
|
||||||
<div style={barStyle} />
|
<div style={barStyle} />
|
||||||
<div style={numberStyle}>{children}</div>
|
<div style={numberStyle}>{children}</div>
|
||||||
</div>
|
</FullCellBackgroundWrapper>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
Parent = ({ children }: { children: React.ReactNode }) => <>{children}</>;
|
Parent = ({ children }: { children: React.ReactNode }) => (
|
||||||
|
<FullCellBackgroundWrapper>{children}</FullCellBackgroundWrapper>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
onClick={handleCellSelected({
|
onClick={
|
||||||
|
isMetric
|
||||||
|
? null
|
||||||
|
: handleCellSelected({
|
||||||
key: keyName,
|
key: keyName,
|
||||||
value,
|
value,
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
>
|
>
|
||||||
<Parent>{column.format ? column.format(value) : value}</Parent>
|
<Parent>{column.format ? column.format(value) : value}</Parent>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user