mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[feature] Allow min/max value for the sparkline in time series table (#5603)
* Allow min/max value for the sparkline in time series table * show bound lines * User can choose to show y-axis bounds * show label for the bounds * compute necessary padding for the bound label * extract sparkline code to another component * can show y-axis in sparkline without setting bounds * reorder option rows
This commit is contained in:
parent
e0c02be14e
commit
536478e96d
@ -7,6 +7,7 @@ import Select from 'react-select';
|
|||||||
|
|
||||||
import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
|
import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
|
||||||
import BoundsControl from './BoundsControl';
|
import BoundsControl from './BoundsControl';
|
||||||
|
import CheckboxControl from './CheckboxControl';
|
||||||
|
|
||||||
const propTypes = {
|
const propTypes = {
|
||||||
onChange: PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
@ -47,9 +48,15 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||||||
onTextInputChange(attr, event) {
|
onTextInputChange(attr, event) {
|
||||||
this.setState({ [attr]: event.target.value }, this.onChange);
|
this.setState({ [attr]: event.target.value }, this.onChange);
|
||||||
}
|
}
|
||||||
|
onCheckboxChange(attr, value) {
|
||||||
|
this.setState({ [attr]: value }, this.onChange);
|
||||||
|
}
|
||||||
onBoundsChange(bounds) {
|
onBoundsChange(bounds) {
|
||||||
this.setState({ bounds }, this.onChange);
|
this.setState({ bounds }, this.onChange);
|
||||||
}
|
}
|
||||||
|
onYAxisBoundsChange(yAxisBounds) {
|
||||||
|
this.setState({ yAxisBounds }, this.onChange);
|
||||||
|
}
|
||||||
setType() {
|
setType() {
|
||||||
}
|
}
|
||||||
textSummary() {
|
textSummary() {
|
||||||
@ -165,6 +172,28 @@ export default class TimeSeriesColumnControl extends React.Component {
|
|||||||
options={comparisonTypeOptions}
|
options={comparisonTypeOptions}
|
||||||
/>,
|
/>,
|
||||||
)}
|
)}
|
||||||
|
{this.state.colType === 'spark' && this.formRow(
|
||||||
|
'Show Y-axis',
|
||||||
|
(
|
||||||
|
'Show Y-axis on the sparkline. Will display the manually set min/max if set or min/max values in the data otherwise.'
|
||||||
|
),
|
||||||
|
'show-y-axis-bounds',
|
||||||
|
<CheckboxControl
|
||||||
|
value={this.state.showYAxis}
|
||||||
|
onChange={this.onCheckboxChange.bind(this, 'showYAxis')}
|
||||||
|
/>,
|
||||||
|
)}
|
||||||
|
{this.state.colType === 'spark' && this.formRow(
|
||||||
|
'Y-axis bounds',
|
||||||
|
(
|
||||||
|
'Manually set min/max values for the y-axis.'
|
||||||
|
),
|
||||||
|
'y-axis-bounds',
|
||||||
|
<BoundsControl
|
||||||
|
value={this.state.yAxisBounds}
|
||||||
|
onChange={this.onYAxisBoundsChange.bind(this)}
|
||||||
|
/>,
|
||||||
|
)}
|
||||||
{this.state.colType !== 'spark' && this.formRow(
|
{this.state.colType !== 'spark' && this.formRow(
|
||||||
'Color bounds',
|
'Color bounds',
|
||||||
(
|
(
|
||||||
|
@ -18,7 +18,7 @@ export function getTextDimension({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (isDefined(style)) {
|
if (isDefined(style)) {
|
||||||
['font', 'fontWeight', 'fontStyle', 'fontSize', 'fontFamily']
|
['font', 'fontWeight', 'fontStyle', 'fontSize', 'fontFamily', 'letterSpacing']
|
||||||
.filter(field => isDefined(style[field]))
|
.filter(field => isDefined(style[field]))
|
||||||
.forEach((field) => {
|
.forEach((field) => {
|
||||||
textNode.style[field] = style[field];
|
textNode.style[field] = style[field];
|
||||||
|
173
superset/assets/src/visualizations/SparklineCell.jsx
Normal file
173
superset/assets/src/visualizations/SparklineCell.jsx
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Sparkline, LineSeries, PointSeries, HorizontalReferenceLine, VerticalReferenceLine, WithTooltip } from '@data-ui/sparkline';
|
||||||
|
import { d3format } from '../modules/utils';
|
||||||
|
import { getTextDimension } from '../modules/visUtils';
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
className: PropTypes.string,
|
||||||
|
width: PropTypes.number,
|
||||||
|
height: PropTypes.number,
|
||||||
|
data: PropTypes.array.isRequired,
|
||||||
|
ariaLabel: PropTypes.string,
|
||||||
|
numberFormat: PropTypes.string,
|
||||||
|
yAxisBounds: PropTypes.array,
|
||||||
|
showYAxis: PropTypes.bool,
|
||||||
|
renderTooltip: PropTypes.func,
|
||||||
|
};
|
||||||
|
const defaultProps = {
|
||||||
|
className: '',
|
||||||
|
width: 300,
|
||||||
|
height: 50,
|
||||||
|
ariaLabel: '',
|
||||||
|
numberFormat: undefined,
|
||||||
|
yAxisBounds: [null, null],
|
||||||
|
showYAxis: false,
|
||||||
|
renderTooltip() { return <div />; },
|
||||||
|
};
|
||||||
|
|
||||||
|
const MARGIN = {
|
||||||
|
top: 8,
|
||||||
|
right: 8,
|
||||||
|
bottom: 8,
|
||||||
|
left: 8,
|
||||||
|
};
|
||||||
|
const tooltipProps = {
|
||||||
|
style: {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
offsetTop: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
function getSparklineTextWidth(text) {
|
||||||
|
return getTextDimension({
|
||||||
|
text,
|
||||||
|
style: {
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: 200,
|
||||||
|
letterSpacing: 0.4,
|
||||||
|
},
|
||||||
|
}).width + 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isValidBoundValue(value) {
|
||||||
|
return value !== null && value !== undefined && value !== '' && !Number.isNaN(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
class SparklineCell extends React.Component {
|
||||||
|
renderHorizontalReferenceLine(value, label) {
|
||||||
|
return (
|
||||||
|
<HorizontalReferenceLine
|
||||||
|
reference={value}
|
||||||
|
labelPosition="right"
|
||||||
|
renderLabel={() => label}
|
||||||
|
stroke="#bbb"
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
strokeWidth={1}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
data,
|
||||||
|
ariaLabel,
|
||||||
|
numberFormat,
|
||||||
|
yAxisBounds,
|
||||||
|
showYAxis,
|
||||||
|
renderTooltip,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const yScale = {};
|
||||||
|
let hasMinBound = false;
|
||||||
|
let hasMaxBound = false;
|
||||||
|
|
||||||
|
if (yAxisBounds) {
|
||||||
|
const [minBound, maxBound] = yAxisBounds;
|
||||||
|
hasMinBound = isValidBoundValue(minBound);
|
||||||
|
if (hasMinBound) {
|
||||||
|
yScale.min = minBound;
|
||||||
|
}
|
||||||
|
hasMaxBound = isValidBoundValue(maxBound);
|
||||||
|
if (hasMaxBound) {
|
||||||
|
yScale.max = maxBound;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let min;
|
||||||
|
let max;
|
||||||
|
let minLabel;
|
||||||
|
let maxLabel;
|
||||||
|
let labelLength = 0;
|
||||||
|
if (showYAxis) {
|
||||||
|
const [minBound, maxBound] = yAxisBounds;
|
||||||
|
min = hasMinBound
|
||||||
|
? minBound
|
||||||
|
: data.reduce((acc, current) => Math.min(acc, current), data[0]);
|
||||||
|
max = hasMaxBound
|
||||||
|
? maxBound
|
||||||
|
: data.reduce((acc, current) => Math.max(acc, current), data[0]);
|
||||||
|
|
||||||
|
minLabel = d3format(numberFormat, min);
|
||||||
|
maxLabel = d3format(numberFormat, max);
|
||||||
|
labelLength = Math.max(
|
||||||
|
getSparklineTextWidth(minLabel),
|
||||||
|
getSparklineTextWidth(maxLabel),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const margin = {
|
||||||
|
...MARGIN,
|
||||||
|
right: MARGIN.right + labelLength,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WithTooltip
|
||||||
|
tooltipProps={tooltipProps}
|
||||||
|
hoverStyles={null}
|
||||||
|
renderTooltip={renderTooltip}
|
||||||
|
>
|
||||||
|
{({ onMouseLeave, onMouseMove, tooltipData }) => (
|
||||||
|
<Sparkline
|
||||||
|
ariaLabel={ariaLabel}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
margin={margin}
|
||||||
|
data={data}
|
||||||
|
onMouseLeave={onMouseLeave}
|
||||||
|
onMouseMove={onMouseMove}
|
||||||
|
{...yScale}
|
||||||
|
>
|
||||||
|
{showYAxis &&
|
||||||
|
this.renderHorizontalReferenceLine(min, minLabel)}
|
||||||
|
{showYAxis &&
|
||||||
|
this.renderHorizontalReferenceLine(max, maxLabel)}
|
||||||
|
<LineSeries
|
||||||
|
showArea={false}
|
||||||
|
stroke="#767676"
|
||||||
|
/>
|
||||||
|
{tooltipData &&
|
||||||
|
<VerticalReferenceLine
|
||||||
|
reference={tooltipData.index}
|
||||||
|
strokeDasharray="3 3"
|
||||||
|
strokeWidth={1}
|
||||||
|
/>}
|
||||||
|
{tooltipData &&
|
||||||
|
<PointSeries
|
||||||
|
points={[tooltipData.index]}
|
||||||
|
fill="#767676"
|
||||||
|
strokeWidth={1}
|
||||||
|
/>}
|
||||||
|
</Sparkline>
|
||||||
|
)}
|
||||||
|
</WithTooltip>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
SparklineCell.propTypes = propTypes;
|
||||||
|
SparklineCell.defaultProps = defaultProps;
|
||||||
|
|
||||||
|
export default SparklineCell;
|
@ -1,30 +1,17 @@
|
|||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import propTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Table, Thead, Th, Tr, Td } from 'reactable';
|
import { Table, Thead, Th, Tr, Td } from 'reactable';
|
||||||
import d3 from 'd3';
|
import d3 from 'd3';
|
||||||
import Mustache from 'mustache';
|
import Mustache from 'mustache';
|
||||||
import { Sparkline, LineSeries, PointSeries, VerticalReferenceLine, WithTooltip } from '@data-ui/sparkline';
|
|
||||||
|
|
||||||
import MetricOption from '../components/MetricOption';
|
import MetricOption from '../components/MetricOption';
|
||||||
import { d3format } from '../modules/utils';
|
|
||||||
import { formatDateThunk } from '../modules/dates';
|
import { formatDateThunk } from '../modules/dates';
|
||||||
|
import { d3format } from '../modules/utils';
|
||||||
import InfoTooltipWithTrigger from '../components/InfoTooltipWithTrigger';
|
import InfoTooltipWithTrigger from '../components/InfoTooltipWithTrigger';
|
||||||
|
import SparklineCell from './SparklineCell';
|
||||||
import './time_table.css';
|
import './time_table.css';
|
||||||
|
|
||||||
const SPARKLINE_MARGIN = {
|
|
||||||
top: 8,
|
|
||||||
right: 8,
|
|
||||||
bottom: 8,
|
|
||||||
left: 8,
|
|
||||||
};
|
|
||||||
const sparklineTooltipProps = {
|
|
||||||
style: {
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
offsetTop: 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
const ACCESSIBLE_COLOR_BOUNDS = ['#ca0020', '#0571b0'];
|
const ACCESSIBLE_COLOR_BOUNDS = ['#ca0020', '#0571b0'];
|
||||||
|
|
||||||
function FormattedNumber({ num, format }) {
|
function FormattedNumber({ num, format }) {
|
||||||
@ -37,8 +24,8 @@ function FormattedNumber({ num, format }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
FormattedNumber.propTypes = {
|
FormattedNumber.propTypes = {
|
||||||
num: propTypes.number,
|
num: PropTypes.number,
|
||||||
format: propTypes.string,
|
format: PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
function viz(slice, payload) {
|
function viz(slice, payload) {
|
||||||
@ -93,49 +80,27 @@ function viz(slice, payload) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const formatDate = formatDateThunk(column.dateFormat);
|
const formatDate = formatDateThunk(column.dateFormat);
|
||||||
|
|
||||||
row[column.key] = {
|
row[column.key] = {
|
||||||
data: sparkData[sparkData.length - 1],
|
data: sparkData[sparkData.length - 1],
|
||||||
display: (
|
display: (
|
||||||
<WithTooltip
|
<SparklineCell
|
||||||
tooltipProps={sparklineTooltipProps}
|
width={parseInt(column.width, 10) || 300}
|
||||||
hoverStyles={null}
|
height={parseInt(column.height, 10) || 50}
|
||||||
|
data={sparkData}
|
||||||
|
ariaLabel={`spark-${metricLabel}`}
|
||||||
|
numberFormat={column.d3format}
|
||||||
|
yAxisBounds={column.yAxisBounds}
|
||||||
|
showYAxis={column.showYAxis}
|
||||||
renderTooltip={({ index }) => (
|
renderTooltip={({ index }) => (
|
||||||
<div>
|
<div>
|
||||||
<strong>{d3format(column.d3format, sparkData[index])}</strong>
|
<strong>{d3format(column.d3Format, sparkData[index])}</strong>
|
||||||
<div>{formatDate(data[index].iso)}</div>
|
<div>{formatDate(data[index].iso)}</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
>
|
/>
|
||||||
{({ onMouseLeave, onMouseMove, tooltipData }) => (
|
|
||||||
<Sparkline
|
|
||||||
ariaLabel={`spark-${metricLabel}`}
|
|
||||||
width={parseInt(column.width, 10) || 300}
|
|
||||||
height={parseInt(column.height, 10) || 50}
|
|
||||||
margin={SPARKLINE_MARGIN}
|
|
||||||
data={sparkData}
|
|
||||||
onMouseLeave={onMouseLeave}
|
|
||||||
onMouseMove={onMouseMove}
|
|
||||||
>
|
|
||||||
<LineSeries
|
|
||||||
showArea={false}
|
|
||||||
stroke="#767676"
|
|
||||||
/>
|
|
||||||
{tooltipData &&
|
|
||||||
<VerticalReferenceLine
|
|
||||||
reference={tooltipData.index}
|
|
||||||
strokeDasharray="3 3"
|
|
||||||
strokeWidth={1}
|
|
||||||
/>}
|
|
||||||
{tooltipData &&
|
|
||||||
<PointSeries
|
|
||||||
points={[tooltipData.index]}
|
|
||||||
fill="#767676"
|
|
||||||
strokeWidth={1}
|
|
||||||
/>}
|
|
||||||
</Sparkline>
|
|
||||||
)}
|
|
||||||
</WithTooltip>
|
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
@ -200,6 +165,7 @@ function viz(slice, payload) {
|
|||||||
});
|
});
|
||||||
return row;
|
return row;
|
||||||
});
|
});
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Table
|
<Table
|
||||||
className="table table-no-hover"
|
className="table table-no-hover"
|
||||||
|
Loading…
Reference in New Issue
Block a user