You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2018/08/13 23:19:21 UTC
[GitHub] williaster closed pull request #5603: [feature] Allow min/max value
for the sparkline in time series table
williaster closed pull request #5603: [feature] Allow min/max value for the sparkline in time series table
URL: https://github.com/apache/incubator-superset/pull/5603
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/src/explore/components/controls/TimeSeriesColumnControl.jsx b/superset/assets/src/explore/components/controls/TimeSeriesColumnControl.jsx
index 2634dd77b5..4c1f0d1a4c 100644
--- a/superset/assets/src/explore/components/controls/TimeSeriesColumnControl.jsx
+++ b/superset/assets/src/explore/components/controls/TimeSeriesColumnControl.jsx
@@ -7,6 +7,7 @@ import Select from 'react-select';
import InfoTooltipWithTrigger from '../../../components/InfoTooltipWithTrigger';
import BoundsControl from './BoundsControl';
+import CheckboxControl from './CheckboxControl';
const propTypes = {
onChange: PropTypes.func,
@@ -47,9 +48,15 @@ export default class TimeSeriesColumnControl extends React.Component {
onTextInputChange(attr, event) {
this.setState({ [attr]: event.target.value }, this.onChange);
}
+ onCheckboxChange(attr, value) {
+ this.setState({ [attr]: value }, this.onChange);
+ }
onBoundsChange(bounds) {
this.setState({ bounds }, this.onChange);
}
+ onYAxisBoundsChange(yAxisBounds) {
+ this.setState({ yAxisBounds }, this.onChange);
+ }
setType() {
}
textSummary() {
@@ -165,6 +172,28 @@ export default class TimeSeriesColumnControl extends React.Component {
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(
'Color bounds',
(
diff --git a/superset/assets/src/modules/visUtils.js b/superset/assets/src/modules/visUtils.js
index 62e5725eeb..c1f2a692d0 100644
--- a/superset/assets/src/modules/visUtils.js
+++ b/superset/assets/src/modules/visUtils.js
@@ -18,7 +18,7 @@ export function getTextDimension({
}
if (isDefined(style)) {
- ['font', 'fontWeight', 'fontStyle', 'fontSize', 'fontFamily']
+ ['font', 'fontWeight', 'fontStyle', 'fontSize', 'fontFamily', 'letterSpacing']
.filter(field => isDefined(style[field]))
.forEach((field) => {
textNode.style[field] = style[field];
diff --git a/superset/assets/src/visualizations/SparklineCell.jsx b/superset/assets/src/visualizations/SparklineCell.jsx
new file mode 100644
index 0000000000..9ca272e9c3
--- /dev/null
+++ b/superset/assets/src/visualizations/SparklineCell.jsx
@@ -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;
diff --git a/superset/assets/src/visualizations/time_table.jsx b/superset/assets/src/visualizations/time_table.jsx
index 900fc5f529..c34e5d01c7 100644
--- a/superset/assets/src/visualizations/time_table.jsx
+++ b/superset/assets/src/visualizations/time_table.jsx
@@ -1,30 +1,17 @@
import ReactDOM from 'react-dom';
import React from 'react';
-import propTypes from 'prop-types';
+import PropTypes from 'prop-types';
import { Table, Thead, Th, Tr, Td } from 'reactable';
import d3 from 'd3';
import Mustache from 'mustache';
-import { Sparkline, LineSeries, PointSeries, VerticalReferenceLine, WithTooltip } from '@data-ui/sparkline';
import MetricOption from '../components/MetricOption';
-import { d3format } from '../modules/utils';
import { formatDateThunk } from '../modules/dates';
+import { d3format } from '../modules/utils';
import InfoTooltipWithTrigger from '../components/InfoTooltipWithTrigger';
+import SparklineCell from './SparklineCell';
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'];
function FormattedNumber({ num, format }) {
@@ -37,8 +24,8 @@ function FormattedNumber({ num, format }) {
}
FormattedNumber.propTypes = {
- num: propTypes.number,
- format: propTypes.string,
+ num: PropTypes.number,
+ format: PropTypes.string,
};
function viz(slice, payload) {
@@ -93,49 +80,27 @@ function viz(slice, payload) {
}
}
}
+
const formatDate = formatDateThunk(column.dateFormat);
+
row[column.key] = {
data: sparkData[sparkData.length - 1],
display: (
- <WithTooltip
- tooltipProps={sparklineTooltipProps}
- hoverStyles={null}
+ <SparklineCell
+ width={parseInt(column.width, 10) || 300}
+ height={parseInt(column.height, 10) || 50}
+ data={sparkData}
+ ariaLabel={`spark-${metricLabel}`}
+ numberFormat={column.d3format}
+ yAxisBounds={column.yAxisBounds}
+ showYAxis={column.showYAxis}
renderTooltip={({ index }) => (
<div>
- <strong>{d3format(column.d3format, sparkData[index])}</strong>
+ <strong>{d3format(column.d3Format, sparkData[index])}</strong>
<div>{formatDate(data[index].iso)}</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 {
@@ -200,6 +165,7 @@ function viz(slice, payload) {
});
return row;
});
+
ReactDOM.render(
<Table
className="table table-no-hover"
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org