fix: bar label for many bars and long labels (#21)

* fix: labels for many bars in bar chart

* fix: nvd3 bar labels

* docs: update example

packages/superset-ui-legacy-preset-chart-nvd3/src/NVD3Vis.js

@@ -66,6 +66,7 @@ const { getColor, getScale } = CategoricalColorNamespace;
 // Limit on how large axes margins can grow as the chart window is resized
 const MAX_MARGIN_PAD = 30;
 const MIN_HEIGHT_FOR_BRUSH = 480;
+const MAX_NO_CHARACTERS_IN_LABEL = 40;
 
 const BREAKPOINTS = {
   small: 340,
@@ -254,6 +255,9 @@ function nvd3Vis(element, props) {
   let width = maxWidth;
   let colorKey = 'key';
 
+  container.style.width = `${maxWidth}px`;
+  container.style.height = `${maxHeight}px`;
+
   function isVizTypes(types) {
     return types.indexOf(vizType) >= 0;
   }
@@ -492,6 +496,12 @@ function nvd3Vis(element, props) {
     const isXAxisString = isVizTypes(['dist_bar', 'box_plot']);
     if (!isXAxisString && chart.xAxis && chart.xAxis.tickFormat) {
       chart.xAxis.tickFormat(xAxisFormatter);
+    } else {
+      chart.xAxis.tickFormat(d =>
+        d.length > MAX_NO_CHARACTERS_IN_LABEL
+          ? `${d.substring(0, MAX_NO_CHARACTERS_IN_LABEL)}…`
+          : d,
+      );
     }
 
     let yAxisFormatter = getTimeOrNumberFormatter(yAxisFormat);
@@ -563,7 +573,6 @@ function nvd3Vis(element, props) {
     // This is needed for correct chart dimensions if a chart is rendered in a hidden container
     chart.width(width);
     chart.height(height);
-    container.style.height = `${height}px`;
 
     svg
       .datum(data)
@@ -675,7 +684,7 @@ function nvd3Vis(element, props) {
       }
       if (xLabelRotation === 45) {
         margins.bottom =
-          maxXAxisLabelHeight * Math.sin((Math.PI * xLabelRotation) / 180) + marginPad;
+          maxXAxisLabelHeight * Math.sin((Math.PI * xLabelRotation) / 180) + marginPad + 30;
         margins.right =
           maxXAxisLabelHeight * Math.cos((Math.PI * xLabelRotation) / 180) + marginPad;
       } else if (staggerLabels) {

packages/superset-ui-legacy-preset-chart-nvd3/src/utils.js

@@ -268,7 +268,7 @@ export function formatLabel(input, verboseMap = {}) {
     : verboseLookup(input);
 }
 
-const MIN_BAR_WIDTH = 15;
+const MIN_BAR_WIDTH = 18;
 
 export function computeBarChartWidth(data, stacked, maxWidth) {
   const barCount = stacked

packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/ManyBarStories.jsx

@@ -0,0 +1,39 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+// import data from './data';
+
+const data = [{ key: 'sth', values: [] }];
+const LONG_LABEL =
+  'some extremely ridiculously extremely extremely extremely ridiculously extremely extremely ridiculously extremely extremely ridiculously extremely long category';
+
+for (let i = 0; i < 50; i += 1) {
+  data[0].values.push({
+    x: `${LONG_LABEL.substring(0, Math.round(Math.random() * LONG_LABEL.length))} ${i + 1}`,
+    y: Math.round(Math.random() * 10000),
+  });
+}
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="dist-bar"
+        chartProps={{
+          datasource: { verboseMap: {} },
+          formData: {
+            showBarValue: false,
+            showLegend: true,
+            vizType: 'dist_bar',
+            xTicksLayout: 'auto',
+          },
+          height: 800,
+          payload: { data },
+          width: 400,
+        }}
+      />
+    ),
+    storyName: 'Many bars',
+    storyPath: 'legacy-|preset-chart-nvd3|DistBarChartPlugin',
+  },
+];

packages/superset-ui-plugins-demo/storybook/stories/legacy-preset-chart-nvd3/DistBar/index.js

@@ -1,8 +1,9 @@
 import { DistBarChartPlugin } from '../../../../../superset-ui-legacy-preset-chart-nvd3';
 import Stories from './Stories';
+import ManyBarStories from './ManyBarStories';
 
 new DistBarChartPlugin().configure({ key: 'dist-bar' }).register();
 
 export default {
-  examples: [...Stories],
+  examples: [...Stories, ...ManyBarStories],
 };