[bugfix] Fix bignumber overflow in dashboard (apache#5839)

* Move BigNumber to directory. * fix chart margin in dashboard * Fix margin and be more conservative about width.
wenchma · Sep 7, 2018 · 9e91070 · 9e91070
1 parent 9f35715
commit 9e91070
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/superset/assets/src/dashboard/components/gridComponents/ChartHolder.jsx b/superset/assets/src/dashboard/components/gridComponents/ChartHolder.jsx
@@ -131,7 +131,7 @@ class ChartHolder extends React.Component {
             >
               <Chart
                 id={component.meta.chartId}
-                width={widthMultiple * columnWidth}
+                width={widthMultiple * columnWidth - CHART_MARGIN / 2}
                 height={component.meta.height * GRID_BASE_UNIT - CHART_MARGIN}
                 sliceName={component.meta.sliceName || ''}
                 updateSliceName={this.handleUpdateSliceName}

diff --git a/.../assets/src/visualizations/big_number.css → ...rc/visualizations/BigNumber/BigNumber.css b/.../assets/src/visualizations/big_number.css → ...rc/visualizations/BigNumber/BigNumber.css
diff --git a/...t/assets/src/visualizations/BigNumber.jsx → ...rc/visualizations/BigNumber/BigNumber.jsx b/...t/assets/src/visualizations/BigNumber.jsx → ...rc/visualizations/BigNumber/BigNumber.jsx
@@ -4,12 +4,12 @@ import ReactDOM from 'react-dom';
 import * as color from 'd3-color';
 import { XYChart, AreaSeries, CrossHair, LinearGradient } from '@data-ui/xy-chart';
 
-import { brandColor } from '../modules/colors';
-import { d3FormatPreset } from '../modules/utils';
-import { formatDateVerbose } from '../modules/dates';
-import { computeMaxFontSize } from '../modules/visUtils';
+import { brandColor } from '../../modules/colors';
+import { d3FormatPreset } from '../../modules/utils';
+import { formatDateVerbose } from '../../modules/dates';
+import { computeMaxFontSize } from '../../modules/visUtils';
 
-import './big_number.css';
+import './BigNumber.css';
 
 const CHART_MARGIN = {
   top: 4,
@@ -98,7 +98,7 @@ class BigNumberVis extends React.Component {
     document.body.appendChild(container);
     const fontSize = computeMaxFontSize({
       text,
-      maxWidth: width,
+      maxWidth: Math.floor(width),
       maxHeight,
       className: 'header_line',
       container,
@@ -126,7 +126,7 @@ class BigNumberVis extends React.Component {
       document.body.appendChild(container);
       fontSize = computeMaxFontSize({
         text: subheader,
-        maxWidth: width,
+        maxWidth: Math.floor(width),
         maxHeight,
         className: 'subheader_line',
         container,
@@ -165,7 +165,7 @@ class BigNumberVis extends React.Component {
           type: 'linear',
           includeZero: startYAxisAtZero,
         }}
-        width={width}
+        width={Math.floor(width)}
         height={maxHeight}
         margin={CHART_MARGIN}
         renderTooltip={renderTooltip}

diff --git a/superset/assets/src/visualizations/index.js b/superset/assets/src/visualizations/index.js
@@ -65,9 +65,9 @@ const vizMap = {
   [VIZ_TYPES.area]: loadNvd3,
   [VIZ_TYPES.bar]: loadNvd3,
   [VIZ_TYPES.big_number]: () =>
-    loadVis(import(/* webpackChunkName: 'big_number' */ './BigNumber.jsx')),
+    loadVis(import(/* webpackChunkName: 'big_number' */ './BigNumber/BigNumber.jsx')),
   [VIZ_TYPES.big_number_total]: () =>
-    loadVis(import(/* webpackChunkName: "big_number" */ './BigNumber.jsx')),
+    loadVis(import(/* webpackChunkName: "big_number" */ './BigNumber/BigNumber.jsx')),
   [VIZ_TYPES.box_plot]: loadNvd3,
   [VIZ_TYPES.bubble]: loadNvd3,
   [VIZ_TYPES.bullet]: loadNvd3,