mirror of
https://github.com/apache/superset.git
synced 2024-09-19 20:19:37 -04:00
fix: responsive y-axis on stacked charts (#141)
This commit is contained in:
parent
0ab7befc06
commit
a6c10eb3cf
@ -50,7 +50,6 @@ import {
|
||||
setAxisShowMaxMin,
|
||||
stringifyTimeRange,
|
||||
wrapTooltip,
|
||||
computeYDomain,
|
||||
} from './utils';
|
||||
import {
|
||||
annotationLayerType,
|
||||
@ -613,24 +612,10 @@ function nvd3Vis(element, props) {
|
||||
const [min, max] = yAxisBounds;
|
||||
const hasCustomMin = isDefined(min) && !Number.isNaN(min);
|
||||
const hasCustomMax = isDefined(max) && !Number.isNaN(max);
|
||||
let yMin;
|
||||
let yMax;
|
||||
if (hasCustomMin && hasCustomMax) {
|
||||
yMin = min;
|
||||
yMax = max;
|
||||
} else {
|
||||
let [trueMin, trueMax] = [0, 1];
|
||||
// These viz types can be stacked
|
||||
if (isVizTypes(['area', 'bar', 'dist_bar'])) {
|
||||
[trueMin, trueMax] = chart.yAxis.scale().domain();
|
||||
} else {
|
||||
[trueMin, trueMax] = computeYDomain(data);
|
||||
}
|
||||
yMin = hasCustomMin ? min : trueMin;
|
||||
yMax = hasCustomMax ? max : trueMax;
|
||||
chart.yDomain([min, max]);
|
||||
chart.clipEdge(true);
|
||||
}
|
||||
chart.yDomain([yMin, yMax]);
|
||||
chart.clipEdge(true);
|
||||
}
|
||||
|
||||
// align yAxis1 and yAxis2 ticks
|
||||
|
@ -42,6 +42,82 @@ export default [
|
||||
storyName: 'Stacked',
|
||||
storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
|
||||
},
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
chartType="area"
|
||||
chartProps={{
|
||||
datasource: {
|
||||
verboseMap: {},
|
||||
},
|
||||
formData: {
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
contribution: false,
|
||||
groupby: ['region'],
|
||||
lineInterpolation: 'linear',
|
||||
metrics: ['sum__SP_POP_TOTL'],
|
||||
richTooltip: true,
|
||||
showBrush: 'auto',
|
||||
showControls: false,
|
||||
showLegend: true,
|
||||
stackedStyle: 'stack',
|
||||
vizType: 'area',
|
||||
xAxisFormat: '%Y',
|
||||
xAxisLabel: '',
|
||||
xAxisShowminmax: false,
|
||||
xTicksLayout: 'auto',
|
||||
yAxisBounds: [0, 3000000000],
|
||||
yAxisFormat: '.3s',
|
||||
yLogScale: false,
|
||||
},
|
||||
height: 400,
|
||||
payload: { data },
|
||||
width: 400,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
storyName: 'Stacked with yAxisBounds',
|
||||
storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
|
||||
},
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
chartType="area"
|
||||
chartProps={{
|
||||
datasource: {
|
||||
verboseMap: {},
|
||||
},
|
||||
formData: {
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
contribution: false,
|
||||
groupby: ['region'],
|
||||
lineInterpolation: 'linear',
|
||||
metrics: ['sum__SP_POP_TOTL'],
|
||||
richTooltip: true,
|
||||
showBrush: 'auto',
|
||||
showControls: false,
|
||||
showLegend: true,
|
||||
stackedStyle: 'stack',
|
||||
vizType: 'area',
|
||||
xAxisFormat: '%Y',
|
||||
xAxisLabel: '',
|
||||
xAxisShowminmax: false,
|
||||
xTicksLayout: 'auto',
|
||||
yAxisBounds: [1000000000, null],
|
||||
yAxisFormat: '.3s',
|
||||
yLogScale: false,
|
||||
},
|
||||
height: 400,
|
||||
payload: { data },
|
||||
width: 400,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
storyName: 'Stacked with yAxisBounds min only',
|
||||
storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
|
||||
},
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
@ -80,4 +156,42 @@ export default [
|
||||
storyName: 'Expanded',
|
||||
storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
|
||||
},
|
||||
{
|
||||
renderStory: () => (
|
||||
<SuperChart
|
||||
chartType="area"
|
||||
chartProps={{
|
||||
datasource: {
|
||||
verboseMap: {},
|
||||
},
|
||||
formData: {
|
||||
bottomMargin: 'auto',
|
||||
colorCcheme: 'd3Category10',
|
||||
contribution: false,
|
||||
groupby: ['region'],
|
||||
lineInterpolation: 'linear',
|
||||
metrics: ['sum__SP_POP_TOTL'],
|
||||
richTooltip: true,
|
||||
showBrush: 'auto',
|
||||
showControls: true,
|
||||
showLegend: true,
|
||||
stackedStyle: 'stack',
|
||||
vizType: 'area',
|
||||
xAxisFormat: '%Y',
|
||||
xAxisLabel: '',
|
||||
xAxisShowminmax: false,
|
||||
xTicksLayout: 'auto',
|
||||
yAxisBounds: [null, null],
|
||||
yAxisFormat: '.3s',
|
||||
yLogScale: false,
|
||||
},
|
||||
height: 400,
|
||||
payload: { data },
|
||||
width: 400,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
storyName: 'Controls Shown',
|
||||
storyPath: 'legacy-|preset-chart-nvd3|AreaChartPlugin',
|
||||
},
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user