adding stepped line to line and area charts (#9425)
* adding stepped line to line and area charts * fixing based on Thomas' review * updating docs * fixing based on Brandons review
This commit is contained in:
parent
b1a2af74f0
commit
29935c3c0c
|
@ -61,7 +61,7 @@ _silhouette_:: Displays each aggregation as variance from a central line.
|
||||||
|
|
||||||
Checkboxes are available to enable and disable the following behaviors:
|
Checkboxes are available to enable and disable the following behaviors:
|
||||||
|
|
||||||
*Smooth Lines*:: Check this box to curve the top boundary of the area from point to point.
|
*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
|
||||||
*Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific
|
*Set Y-Axis Extents*:: Check this box and enter values in the *y-max* and *y-min* fields to set the Y axis to specific
|
||||||
values.
|
values.
|
||||||
*Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
|
*Scale Y-Axis to Data Bounds*:: The default Y axis bounds are zero and the maximum value returned in the data. Check
|
||||||
|
|
|
@ -38,8 +38,7 @@ regularize the display of data sets with variabilities that are themselves highl
|
||||||
the variability is itself variable over the domain being examined, is known as _heteroscedastic_ data. For example, if
|
the variability is itself variable over the domain being examined, is known as _heteroscedastic_ data. For example, if
|
||||||
a data set of height versus weight has a relatively narrow range of variability at the short end of height, but a wider
|
a data set of height versus weight has a relatively narrow range of variability at the short end of height, but a wider
|
||||||
range at the taller end, the data set is heteroscedastic.
|
range at the taller end, the data set is heteroscedastic.
|
||||||
*Smooth Lines*:: Check this box to curve the line from point to point. Bear in mind that smoothed lines necessarily
|
*Line Mode*:: You can choose between straight line, smoothed line and stepped line.
|
||||||
affect the representation of your data and create a potential for ambiguity.
|
|
||||||
*Show Connecting Lines*:: Check this box to draw lines between the points on the chart.
|
*Show Connecting Lines*:: Check this box to draw lines between the points on the chart.
|
||||||
*Show Circles*:: Check this box to draw each data point on the chart as a small circle.
|
*Show Circles*:: Check this box to draw each data point on the chart as a small circle.
|
||||||
*Current time marker*:: For charts of time-series data, check this box to draw a red line on the current time.
|
*Current time marker*:: For charts of time-series data, check this box to draw a red line on the current time.
|
||||||
|
|
|
@ -19,7 +19,6 @@ export default function HistogramVisType(Private) {
|
||||||
addTooltip: true,
|
addTooltip: true,
|
||||||
addLegend: true,
|
addLegend: true,
|
||||||
legendPosition: 'right',
|
legendPosition: 'right',
|
||||||
smoothLines: false,
|
|
||||||
scale: 'linear',
|
scale: 'linear',
|
||||||
interpolate: 'linear',
|
interpolate: 'linear',
|
||||||
mode: 'stacked',
|
mode: 'stacked',
|
||||||
|
@ -41,6 +40,16 @@ export default function HistogramVisType(Private) {
|
||||||
value: 'bottom',
|
value: 'bottom',
|
||||||
text: 'bottom',
|
text: 'bottom',
|
||||||
}],
|
}],
|
||||||
|
interpolationModes: [{
|
||||||
|
value: 'linear',
|
||||||
|
text: 'straight',
|
||||||
|
}, {
|
||||||
|
value: 'cardinal',
|
||||||
|
text: 'smoothed',
|
||||||
|
}, {
|
||||||
|
value: 'step-after',
|
||||||
|
text: 'stepped',
|
||||||
|
}],
|
||||||
scales: ['linear', 'log', 'square root'],
|
scales: ['linear', 'log', 'square root'],
|
||||||
modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],
|
modes: ['stacked', 'overlap', 'percentage', 'wiggle', 'silhouette'],
|
||||||
editor: areaTemplate
|
editor: areaTemplate
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
<div>
|
<div>
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" value="{{smoothLines}}" ng-model="vis.params.smoothLines" name="smoothLines"
|
Line Mode
|
||||||
ng-checked="vis.params.smoothLines">
|
|
||||||
Smooth Lines
|
|
||||||
</label>
|
</label>
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
ng-model="vis.params.interpolate"
|
||||||
|
ng-options="mode.value as mode.text for mode in vis.type.params.interpolationModes"
|
||||||
|
>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,7 +18,6 @@ export default function HistogramVisType(Private) {
|
||||||
addLegend: true,
|
addLegend: true,
|
||||||
legendPosition: 'right',
|
legendPosition: 'right',
|
||||||
showCircles: true,
|
showCircles: true,
|
||||||
smoothLines: false,
|
|
||||||
interpolate: 'linear',
|
interpolate: 'linear',
|
||||||
scale: 'linear',
|
scale: 'linear',
|
||||||
drawLinesBetweenPoints: true,
|
drawLinesBetweenPoints: true,
|
||||||
|
@ -41,6 +40,16 @@ export default function HistogramVisType(Private) {
|
||||||
value: 'bottom',
|
value: 'bottom',
|
||||||
text: 'bottom',
|
text: 'bottom',
|
||||||
}],
|
}],
|
||||||
|
interpolationModes: [{
|
||||||
|
value: 'linear',
|
||||||
|
text: 'straight',
|
||||||
|
}, {
|
||||||
|
value: 'cardinal',
|
||||||
|
text: 'smoothed',
|
||||||
|
}, {
|
||||||
|
value: 'step-after',
|
||||||
|
text: 'stepped',
|
||||||
|
}],
|
||||||
scales: ['linear', 'log', 'square root'],
|
scales: ['linear', 'log', 'square root'],
|
||||||
editor: lineTemplate
|
editor: lineTemplate
|
||||||
},
|
},
|
||||||
|
|
|
@ -4,6 +4,10 @@ export default function ColumnHandler(Private) {
|
||||||
|
|
||||||
const createSeries = (cfg, series) => {
|
const createSeries = (cfg, series) => {
|
||||||
const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode);
|
const stacked = ['stacked', 'percentage', 'wiggle', 'silhouette'].includes(cfg.mode);
|
||||||
|
let interpolate = cfg.interpolate;
|
||||||
|
// for backward compatibility when loading URLs or configs we need to check smoothLines
|
||||||
|
if (cfg.smoothLines) interpolate = 'cardinal';
|
||||||
|
|
||||||
return {
|
return {
|
||||||
type: 'point_series',
|
type: 'point_series',
|
||||||
series: _.map(series, (seri) => {
|
series: _.map(series, (seri) => {
|
||||||
|
@ -11,8 +15,7 @@ export default function ColumnHandler(Private) {
|
||||||
show: true,
|
show: true,
|
||||||
type: cfg.type || 'line',
|
type: cfg.type || 'line',
|
||||||
mode: stacked ? 'stacked' : 'normal',
|
mode: stacked ? 'stacked' : 'normal',
|
||||||
interpolate: cfg.interpolate,
|
interpolate: interpolate,
|
||||||
smoothLines: cfg.smoothLines,
|
|
||||||
drawLinesBetweenPoints: cfg.drawLinesBetweenPoints,
|
drawLinesBetweenPoints: cfg.drawLinesBetweenPoints,
|
||||||
showCircles: cfg.showCircles,
|
showCircles: cfg.showCircles,
|
||||||
radiusRatio: cfg.radiusRatio,
|
radiusRatio: cfg.radiusRatio,
|
||||||
|
|
|
@ -11,7 +11,6 @@ export default function AreaChartFactory(Private) {
|
||||||
showCircles: true,
|
showCircles: true,
|
||||||
radiusRatio: 9,
|
radiusRatio: 9,
|
||||||
showLines: true,
|
showLines: true,
|
||||||
smoothLines: false,
|
|
||||||
interpolate: 'linear',
|
interpolate: 'linear',
|
||||||
color: undefined,
|
color: undefined,
|
||||||
fillColor: undefined,
|
fillColor: undefined,
|
||||||
|
@ -68,7 +67,7 @@ export default function AreaChartFactory(Private) {
|
||||||
const color = this.handler.data.getColorFunc();
|
const color = this.handler.data.getColorFunc();
|
||||||
const xScale = this.getCategoryAxis().getScale();
|
const xScale = this.getCategoryAxis().getScale();
|
||||||
const yScale = this.getValueAxis().getScale();
|
const yScale = this.getValueAxis().getScale();
|
||||||
const interpolate = (this.seriesConfig.smoothLines) ? 'cardinal' : this.seriesConfig.interpolate;
|
const interpolate = this.seriesConfig.interpolate;
|
||||||
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
|
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
|
||||||
|
|
||||||
// Data layers
|
// Data layers
|
||||||
|
|
|
@ -10,7 +10,6 @@ export default function LineChartFactory(Private) {
|
||||||
showCircles: true,
|
showCircles: true,
|
||||||
radiusRatio: 9,
|
radiusRatio: 9,
|
||||||
showLines: true,
|
showLines: true,
|
||||||
smoothLines: false,
|
|
||||||
interpolate: 'linear',
|
interpolate: 'linear',
|
||||||
color: undefined,
|
color: undefined,
|
||||||
fillColor: undefined
|
fillColor: undefined
|
||||||
|
@ -142,7 +141,7 @@ export default function LineChartFactory(Private) {
|
||||||
const xAxisFormatter = this.handler.data.get('xAxisFormatter');
|
const xAxisFormatter = this.handler.data.get('xAxisFormatter');
|
||||||
const color = this.handler.data.getColorFunc();
|
const color = this.handler.data.getColorFunc();
|
||||||
const ordered = this.handler.data.get('ordered');
|
const ordered = this.handler.data.get('ordered');
|
||||||
const interpolate = (this.seriesConfig.smoothLines) ? 'cardinal' : this.seriesConfig.interpolate;
|
const interpolate = this.seriesConfig.interpolate;
|
||||||
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
|
const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
|
||||||
|
|
||||||
const line = svg.append('g')
|
const line = svg.append('g')
|
||||||
|
|
Loading…
Reference in a new issue