feat: add line-bar chart from nvd3

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,
+    });
+  }
+}

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;
       }

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';

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' }),

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: () => (
+      <SuperChart
+        chartType="line_bar"
+        chartProps={{
+          datasource: { verboseMap: {} },
+          formData: {
+            bottomMargin: 'auto',
+            colorScheme: 'd3Category10',
+            leftMargin: 'auto',
+            lineInterpolation: 'linear',
+            richTooltip: true,
+            showBrush: 'auto',
+            showLegend: true,
+            showMarkers: false,
+            vizType: 'line_bar',
+            xAxisFormat: 'smart_date',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [null, null],
+            yAxisFormat: '.3s',
+            yAxisLabel: '',
+            yAxisShowminmax: false,
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Basic',
+    storyPath: 'legacy-|preset-chart-nvd3|LineBarChartPlugin',
+  },
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="line_bar"
+        chartProps={{
+          datasource: { verboseMap: {} },
+          formData: {
+            bottomMargin: 'auto',
+            colorScheme: 'd3Category10',
+            leftMargin: 'auto',
+            lineInterpolation: 'linear',
+            richTooltip: true,
+            showBrush: 'auto',
+            showLegend: true,
+            showMarkers: true,
+            vizType: 'line_bar',
+            xAxisFormat: 'smart_date',
+            xAxisLabel: '',
+            xAxisShowminmax: false,
+            xTicksLayout: 'auto',
+            yAxisBounds: [null, null],
+            yAxisFormat: '.3s',
+            yAxisLabel: '',
+            yAxisShowminmax: false,
+            yLogScale: false,
+          },
+          height: 400,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Markers',
+    storyPath: 'legacy-|preset-chart-nvd3|LineBarChartPlugin',
+  },
+];