diff --git a/superset/assets/src/explore/components/controls/AnnotationLayer.jsx b/superset/assets/src/explore/components/controls/AnnotationLayer.jsx index 875b95922a743..6cb2f2d209012 100644 --- a/superset/assets/src/explore/components/controls/AnnotationLayer.jsx +++ b/superset/assets/src/explore/components/controls/AnnotationLayer.jsx @@ -36,6 +36,8 @@ const propTypes = { opacity: PropTypes.string, style: PropTypes.string, width: PropTypes.number, + showMarkers: PropTypes.bool, + hideLine: PropTypes.bool, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), overrides: PropTypes.object, show: PropTypes.bool, @@ -61,6 +63,8 @@ const defaultProps = { opacity: '', style: 'solid', width: 1, + showMarkers: false, + hideLine: false, overrides: {}, colorScheme: 'd3Category10', show: true, @@ -78,7 +82,7 @@ export default class AnnotationLayer extends React.PureComponent { constructor(props) { super(props); const { name, annotationType, sourceType, - color, opacity, style, width, value, + color, opacity, style, width, showMarkers, hideLine, value, overrides, show, titleColumn, descriptionColumns, timeColumn, intervalEndColumn } = props; this.state = { @@ -100,6 +104,8 @@ export default class AnnotationLayer extends React.PureComponent { opacity, style, width, + showMarkers, + hideLine, // refData isNew: !this.props.name, isLoadingOptions: true, @@ -469,7 +475,7 @@ export default class AnnotationLayer extends React.PureComponent { } renderDisplayConfiguration() { - const { color, opacity, style, width } = this.state; + const { color, opacity, style, width, showMarkers, hideLine, annotationType } = this.state; const colorScheme = [...ALL_COLOR_SCHEMES[this.props.colorScheme]]; if (color && color !== AUTOMATIC_COLOR && !colorScheme.find(x => x.toLowerCase() === color.toLowerCase())) { @@ -533,6 +539,26 @@ export default class AnnotationLayer extends React.PureComponent { value={width} onChange={v => this.setState({ width: v })} /> + {annotationType === AnnotationTypes.TIME_SERIES && + this.setState({ showMarkers: v })} + /> + } + {annotationType === AnnotationTypes.TIME_SERIES && + this.setState({ hideLine: v })} + /> + } ); } diff --git a/superset/assets/src/visualizations/nvd3_vis.js b/superset/assets/src/visualizations/nvd3_vis.js index 64a91689da9ed..a58850ff48802 100644 --- a/superset/assets/src/visualizations/nvd3_vis.js +++ b/superset/assets/src/visualizations/nvd3_vis.js @@ -611,7 +611,7 @@ export default function nvd3Vis(slice, payload) { key, color: a.color, strokeWidth: a.width, - classed: `${a.opacity} ${a.style}`, + classed: `${a.opacity} ${a.style} nv-timeseries-annotation-layer showMarkers${a.showMarkers} hideLine${a.hideLine}`, }; })), []); data.push(...timeSeriesAnnotations); @@ -842,6 +842,13 @@ export default function nvd3Vis(slice, payload) { .attr('height', height) .attr('width', width) .call(chart); + + // Display styles for Time Series Annotations + d3.selectAll('.slice_container .nv-timeseries-annotation-layer.showMarkerstrue .nv-point') + .style('stroke-opacity', 1) + .style('fill-opacity', 1); + d3.selectAll('.slice_container .nv-timeseries-annotation-layer.hideLinetrue') + .style('stroke-width', 0); } } return chart;