Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Commit

Permalink
fix: nvd3 line chart y axis bounds (#17)
Browse files Browse the repository at this point in the history
* fix: 🐛 y axis bounds

* fix: clip edge only when necessary

* docs: update storybook

* fix: remove src ref from storybook

* fix: import order
  • Loading branch information
kristw authored Mar 13, 2019
1 parent 5a6ebe0 commit 1c0e682
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 6 deletions.
15 changes: 12 additions & 3 deletions packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import nv from 'nvd3';
import mathjs from 'mathjs';
import moment from 'moment';
import PropTypes from 'prop-types';
import { isDefined } from '@superset-ui/core';
import { t } from '@superset-ui/translation';
import { CategoricalColorNamespace } from '@superset-ui/color';
import { getNumberFormatter, NumberFormats } from '@superset-ui/number-format';
Expand Down Expand Up @@ -470,9 +471,6 @@ function nvd3Vis(element, props) {
}
}

if (chart.forceY && yAxisBounds && (yAxisBounds[0] !== null || yAxisBounds[1] !== null)) {
chart.forceY(yAxisBounds);
}
if (yIsLogScale) {
chart.yScale(d3.scale.log());
}
Expand Down Expand Up @@ -581,6 +579,17 @@ function nvd3Vis(element, props) {
xTicks.selectAll('text').attr('dx', -6.5);
}

if (chart.yDomain && Array.isArray(yAxisBounds) && yAxisBounds.length === 2) {
const [min, max] = yAxisBounds;
const [trueMin, trueMax] = chart.yAxis.scale().domain();
const yMin = isDefined(min) ? min : trueMin;
const yMax = isDefined(max) ? max : trueMax;
if (yMin !== trueMin || yMax !== trueMax) {
chart.yDomain([yMin, yMax]);
chart.clipEdge(true);
}
}

// align yAxis1 and yAxis2 ticks
if (isVizTypes(['dual_line', 'line_multi'])) {
const count = chart.yAxis1.ticks();
Expand Down
1 change: 1 addition & 0 deletions packages/superset-ui-plugins-demo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@storybook/react": "^4.1.11",
"@superset-ui/chart": "^0.10.2",
"@superset-ui/color": "^0.10.1",
"@superset-ui/time-format": "^0.10.1",
"@superset-ui/translation": "^0.10.0",
"babel-loader": "^8.0.4",
"bootstrap": "^3.3.6",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {

defaultConfig.module.rules.push({
exclude: /node_modules/,
include: new RegExp(`${path.resolve(__dirname, '../../superset-ui-(plugin|preset)-')}.+/src`),
include: new RegExp(
`${path.resolve(__dirname, '../../superset-ui-(legacy-)*(plugin|preset)-')}.+/src`,
),
test: /\.jsx?$/,
use: defaultConfig.module.rules[0].use,
});
Expand Down Expand Up @@ -52,4 +54,4 @@ module.exports = (storybookBaseConfig, configType, defaultConfig) => {

// Return the altered config
return defaultConfig;
};
};
5 changes: 5 additions & 0 deletions packages/superset-ui-plugins-demo/storybook/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import sequentialCommon from '@superset-ui/color/esm/colorSchemes/sequential/com
import sequentialD3 from '@superset-ui/color/esm/colorSchemes/sequential/d3';
import { configure } from '@superset-ui/translation';
import { getCategoricalSchemeRegistry, getSequentialSchemeRegistry } from '@superset-ui/color';
import { getTimeFormatterRegistry, smartDateFormatter } from '@superset-ui/time-format';

setAddon(JSXAddon);

Expand All @@ -27,6 +28,10 @@ const sequentialSchemeRegistry = getSequentialSchemeRegistry();
});
});

getTimeFormatterRegistry()
.registerValue('smart_date', smartDateFormatter)
.setDefaultKey('smart_date');

const EMPTY_EXAMPLES = [
{
renderStory: () => 'Does your default export have an `examples` key?',
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/* eslint-disable no-magic-numbers */
import React from 'react';
import { SuperChart } from '@superset-ui/chart';
import data from './data';

export default [
{
renderStory: () => (
<div className="container">
<h2>yAxisBounds</h2>
<pre>yAxisBounds=[0, 60000]</pre>
<SuperChart
chartType="line"
chartProps={{
datasource: { verboseMap: {} },
formData: {
richTooltip: true,
showLegend: false,
vizType: 'line',
yAxisBounds: [0, 60000],
},
height: 200,
payload: { data },
width: 400,
}}
/>
<pre>yAxisBounds=[null, 60000]</pre>
<SuperChart
chartType="line"
chartProps={{
datasource: { verboseMap: {} },
formData: {
richTooltip: true,
showLegend: false,
vizType: 'line',
yAxisBounds: [null, 60000],
},
height: 200,
payload: { data },
width: 400,
}}
/>
<pre>yAxisBounds=[40000, null]</pre>
<SuperChart
chartType="line"
chartProps={{
datasource: { verboseMap: {} },
formData: {
richTooltip: true,
showLegend: false,
vizType: 'line',
yAxisBounds: [40000, null],
},
height: 200,
payload: { data },
width: 400,
}}
/>
</div>
),
storyName: 'yAxisBounds',
storyPath: 'legacy-|preset-chart-nvd3|LineChartPlugin',
},
];
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { LineChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-nvd3';
import Stories from './Stories';
import YAxisStories from './YAxisStories';

new LineChartPlugin().configure({ key: 'line' }).register();

export default {
examples: [...Stories],
examples: [...Stories, ...YAxisStories],
};

0 comments on commit 1c0e682

Please sign in to comment.