diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/images/thumbnail.png b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/images/thumbnail.png new file mode 100644 index 000000000..e01c482cb Binary files /dev/null and b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/images/thumbnail.png differ diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/index.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/index.js new file mode 100644 index 000000000..dc8040c21 --- /dev/null +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/LineBar/index.js @@ -0,0 +1,48 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ +import { t } from '@superset-ui/translation'; +import { ChartMetadata, ChartPlugin } from '@superset-ui/chart'; +import transformProps from '../transformProps'; +import thumbnail from './images/thumbnail.png'; +import { ANNOTATION_TYPES } from '../vendor/superset/AnnotationTypes'; + +const metadata = new ChartMetadata({ + canBeAnnotationTypes: [ANNOTATION_TYPES.TIME_SERIES], + credits: ['http://nvd3.org'], + description: '', + name: t('Line Bar Chart'), + supportedAnnotationTypes: [ + ANNOTATION_TYPES.TIME_SERIES, + ANNOTATION_TYPES.INTERVAL, + ANNOTATION_TYPES.EVENT, + ANNOTATION_TYPES.FORMULA, + ], + thumbnail, + useLegacyApi: true, +}); + +export default class LineBarChartPlugin extends ChartPlugin { + constructor() { + super({ + loadChart: () => import('../ReactNVD3'), + metadata, + transformProps, + }); + } +} diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js index 51c9ec6ca..31d06b9cb 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js @@ -77,6 +77,7 @@ const BREAKPOINTS = { const TIMESERIES_VIZ_TYPES = [ 'line', 'dual_line', + 'line_bar', 'line_multi', 'area', 'compare', @@ -100,7 +101,7 @@ const propTypes = { key: PropTypes.arrayOf(PropTypes.string), values: PropTypes.arrayOf(numericXYType), }), - // dual-line + // dual-line. line-bar PropTypes.shape({ classed: PropTypes.string, key: PropTypes.string, @@ -146,6 +147,7 @@ const propTypes = { 'column', 'dist_bar', 'line', + 'line_bar', 'line_multi', 'time_pivot', 'pie', @@ -176,7 +178,7 @@ const propTypes = { onBrushEnd: PropTypes.func, // 'line-multi' or 'dual-line' yAxis2Format: PropTypes.string, - // 'line', 'time-pivot', 'dual-line' or 'line-multi' + // 'line', 'time-pivot', 'dual-line', 'line-multi', 'line-bar' lineInterpolation: PropTypes.string, // 'pie' only isDonut: PropTypes.bool, @@ -322,6 +324,11 @@ function nvd3Vis(element, props) { chart.interpolate(lineInterpolation); break; + case 'line_bar': + chart = nv.models.multiChart(); + chart.interpolate(lineInterpolation); + break; + case 'bar': chart = nv.models .multiBarChart() @@ -561,7 +568,7 @@ function nvd3Vis(element, props) { } } - if (isVizTypes(['dual_line', 'line_multi'])) { + if (isVizTypes(['dual_line', 'line_multi', 'line_bar'])) { const yAxisFormatter1 = getNumberFormatter(yAxisFormat); const yAxisFormatter2 = getNumberFormatter(yAxis2Format); chart.yAxis1.tickFormat(yAxisFormatter1); @@ -573,7 +580,7 @@ function nvd3Vis(element, props) { chart.interactiveLayer.tooltip.contentGenerator(d => generateMultiLineTooltipContent(d, xAxisFormatter, yAxisFormatters), ); - if (vizType === 'dual_line') { + if (vizType === 'dual_line' || vizType === 'line_bar') { chart.showLegend(width > BREAKPOINTS.small); } else { chart.showLegend(showLegend); @@ -622,7 +629,7 @@ function nvd3Vis(element, props) { } // align yAxis1 and yAxis2 ticks - if (isVizTypes(['dual_line', 'line_multi'])) { + if (isVizTypes(['dual_line', 'line_multi', 'line_bar'])) { const count = chart.yAxis1.ticks(); const ticks1 = chart.yAxis1 .scale() @@ -708,7 +715,7 @@ function nvd3Vis(element, props) { margins.bottom = 40; } - if (isVizTypes(['dual_line', 'line_multi'])) { + if (isVizTypes(['dual_line', 'line_multi', 'line_bar'])) { const maxYAxis2LabelWidth = getMaxLabelSize(svg, 'nv-y2'); margins.right = maxYAxis2LabelWidth + marginPad; } diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/index.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/index.js index f28da16f0..a3af4d60a 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/index.js +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/index.js @@ -8,6 +8,7 @@ export { default as CompareChartPlugin } from './Compare'; export { default as DistBarChartPlugin } from './DistBar'; export { default as DualLineChartPlugin } from './DualLine'; export { default as LineChartPlugin } from './Line'; +export { default as LineBarChartPlugin } from './LineBar'; export { default as LineMultiChartPlugin } from './LineMulti'; export { default as PieChartPlugin } from './Pie'; export { default as TimePivotChartPlugin } from './TimePivot'; diff --git a/packages/superset-ui-legacy-preset-chart-nvd3/src/preset.js b/packages/superset-ui-legacy-preset-chart-nvd3/src/preset.js index cccb877ec..3472fbcca 100644 --- a/packages/superset-ui-legacy-preset-chart-nvd3/src/preset.js +++ b/packages/superset-ui-legacy-preset-chart-nvd3/src/preset.js @@ -26,6 +26,7 @@ import CompareChartPlugin from './Compare'; import DistBarChartPlugin from './DistBar'; import DualLineChartPlugin from './DualLine'; import LineChartPlugin from './Line'; +import LineBarChartPlugin from './LineBar'; import LineMultiChartPlugin from './LineMulti'; import PieChartPlugin from './Pie'; import TimePivotChartPlugin from './TimePivot'; @@ -44,6 +45,7 @@ export default class NVD3ChartPreset extends Preset { new DistBarChartPlugin().configure({ key: 'dist_bar' }), new DualLineChartPlugin().configure({ key: 'dual_line' }), new LineChartPlugin().configure({ key: 'line' }), + new LineBarChartPlugin().configure({ key: 'line_bar' }), new LineMultiChartPlugin().configure({ key: 'line_multi' }), new PieChartPlugin().configure({ key: 'pie' }), new TimePivotChartPlugin().configure({ key: 'time_pivot' }), diff --git a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/Stories.jsx b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/Stories.jsx new file mode 100644 index 000000000..89efefa26 --- /dev/null +++ b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/Stories.jsx @@ -0,0 +1,77 @@ +/* eslint-disable no-magic-numbers */ +import React from 'react'; +import { SuperChart } from '@superset-ui/chart'; +import data from './data'; + +export default [ + { + renderStory: () => ( + + ), + storyName: 'Basic', + storyPath: 'legacy-|preset-chart-nvd3|LineBarChartPlugin', + }, + { + renderStory: () => ( + + ), + storyName: 'Markers', + storyPath: 'legacy-|preset-chart-nvd3|LineBarChartPlugin', + }, +]; diff --git a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/data.js b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/data.js new file mode 100644 index 000000000..608dd0436 --- /dev/null +++ b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/data.js @@ -0,0 +1,371 @@ +/* eslint-disable sort-keys, no-magic-numbers */ +export default [ + { + key: 'avg__num', + classed: '', + values: [ + { + x: -157766400000.0, + y: 1435.6116838487972, + }, + { + x: -126230400000.0, + y: 1359.0295103957076, + }, + { + x: -94694400000.0, + y: 1291.0963777490297, + }, + { + x: -63158400000.0, + y: 1254.5405915670233, + }, + { + x: -31536000000.0, + y: 1244.9671332927571, + }, + { + x: 0.0, + y: 1248.7126843657818, + }, + { + x: 31536000000.0, + y: 1147.4195205479452, + }, + { + x: 63072000000.0, + y: 1036.6540632054175, + }, + { + x: 94694400000.0, + y: 980.8740906547285, + }, + { + x: 126230400000.0, + y: 971.1190345584201, + }, + { + x: 157766400000.0, + y: 947.5531453362256, + }, + { + x: 189302400000.0, + y: 962.4153005464481, + }, + { + x: 220924800000.0, + y: 1004.2832876712329, + }, + { + x: 252460800000.0, + y: 1000.6107784431138, + }, + { + x: 283996800000.0, + y: 1045.711965349215, + }, + { + x: 315532800000.0, + y: 1089.5097402597403, + }, + { + x: 347155200000.0, + y: 1094.7375201288244, + }, + { + x: 378691200000.0, + y: 1113.3569511540527, + }, + { + x: 410227200000.0, + y: 1117.585260892953, + }, + { + x: 441763200000.0, + y: 1117.1530230069557, + }, + { + x: 473385600000.0, + y: 1143.6297297297297, + }, + { + x: 504921600000.0, + y: 1131.3461538461538, + }, + { + x: 536457600000.0, + y: 1137.0865800865802, + }, + { + x: 567993600000.0, + y: 1144.3100483610963, + }, + { + x: 599616000000.0, + y: 1153.075821845175, + }, + { + x: 631152000000.0, + y: 1170.1328, + }, + { + x: 662688000000.0, + y: 1134.3757412398922, + }, + { + x: 694224000000.0, + y: 1102.478189749182, + }, + { + x: 725846400000.0, + y: 1065.1231527093596, + }, + { + x: 757382400000.0, + y: 1035.223574986165, + }, + { + x: 788918400000.0, + y: 997.9584026622297, + }, + { + x: 820454400000.0, + y: 976.4625698324022, + }, + { + x: 852076800000.0, + y: 953.0983698707139, + }, + { + x: 883612800000.0, + y: 961.3199079401611, + }, + { + x: 915148800000.0, + y: 962.3351032448378, + }, + { + x: 946684800000.0, + y: 967.1753012048192, + }, + { + x: 978307200000.0, + y: 955.8330218068536, + }, + { + x: 1009843200000.0, + y: 947.7684413085311, + }, + { + x: 1041379200000.0, + y: 951.2866622428667, + }, + { + x: 1072915200000.0, + y: 913.469184890656, + }, + { + x: 1104537600000.0, + y: 910.3797643797644, + }, + { + x: 1136073600000.0, + y: 910.0478229835832, + }, + { + x: 1167609600000.0, + y: 886.5323636363636, + }, + { + x: 1199145600000.0, + y: 854.5530769230769, + }, + ], + yAxis: 1, + type: 'line', + }, + { + key: 'sum__num', + classed: '', + values: [ + { + x: -157766400000.0, + y: 2088815, + }, + { + x: -126230400000.0, + y: 2026313, + }, + { + x: -94694400000.0, + y: 1996035, + }, + { + x: -63158400000.0, + y: 1993465, + }, + { + x: -31536000000.0, + y: 2045481, + }, + { + x: 0.0, + y: 2116568, + }, + { + x: 31536000000.0, + y: 2010279, + }, + { + x: 63072000000.0, + y: 1836951, + }, + { + x: 94694400000.0, + y: 1752822, + }, + { + x: 126230400000.0, + y: 1770350, + }, + { + x: 157766400000.0, + y: 1747288, + }, + { + x: 189302400000.0, + y: 1761220, + }, + { + x: 220924800000.0, + y: 1832817, + }, + { + x: 252460800000.0, + y: 1838122, + }, + { + x: 283996800000.0, + y: 1931430, + }, + { + x: 315532800000.0, + y: 2013414, + }, + { + x: 347155200000.0, + y: 2039496, + }, + { + x: 378691200000.0, + y: 2074184, + }, + { + x: 410227200000.0, + y: 2077591, + }, + { + x: 441763200000.0, + y: 2087959, + }, + { + x: 473385600000.0, + y: 2115715, + }, + { + x: 504921600000.0, + y: 2088465, + }, + { + x: 536457600000.0, + y: 2101336, + }, + { + x: 567993600000.0, + y: 2129561, + }, + { + x: 599616000000.0, + y: 2174701, + }, + { + x: 631152000000.0, + y: 2193999, + }, + { + x: 662688000000.0, + y: 2104267, + }, + { + x: 694224000000.0, + y: 2021945, + }, + { + x: 725846400000.0, + y: 1945980, + }, + { + x: 757382400000.0, + y: 1870649, + }, + { + x: 788918400000.0, + y: 1799319, + }, + { + x: 820454400000.0, + y: 1747868, + }, + { + x: 852076800000.0, + y: 1695562, + }, + { + x: 883612800000.0, + y: 1670774, + }, + { + x: 915148800000.0, + y: 1631158, + }, + { + x: 946684800000.0, + y: 1605511, + }, + { + x: 978307200000.0, + y: 1534112, + }, + { + x: 1009843200000.0, + y: 1477571, + }, + { + x: 1041379200000.0, + y: 1433589, + }, + { + x: 1072915200000.0, + y: 1378425, + }, + { + x: 1104537600000.0, + y: 1313678, + }, + { + x: 1136073600000.0, + y: 1274977, + }, + { + x: 1167609600000.0, + y: 1218982, + }, + { + x: 1199145600000.0, + y: 1110919, + }, + ], + yAxis: 2, + type: 'bar', + }, +]; diff --git a/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/index.js b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/index.js new file mode 100644 index 000000000..06564fcc6 --- /dev/null +++ b/packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/LineBar/index.js @@ -0,0 +1,8 @@ +import { LineBarChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-nvd3'; +import Stories from './Stories'; + +new LineBarChartPlugin().configure({ key: 'line_bar' }).register(); + +export default { + examples: [...Stories], +};