fix(legacy-plugin-chart-horizon): horizon chart should scroll when ov…

…erflowing (#180) * fix: horizon chart should scroll when overflowing * fix: rebase and adapt * fix: lint
apache-superset · Nov 20, 2019 · 38506b9 · 38506b9
1 parent fd1c7af
commit 38506b9
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/HorizonChart.css b/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/HorizonChart.css
@@ -19,6 +19,7 @@
 
 .superset-legacy-chart-horizon {
   overflow: auto;
+  position: relative;
 }
 
 .superset-legacy-chart-horizon .horizon-row  {

diff --git a/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/HorizonChart.jsx b/...superset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/HorizonChart.jsx
@@ -26,6 +26,7 @@ import './HorizonChart.css';
 const propTypes = {
   className: PropTypes.string,
   width: PropTypes.number,
+  height: PropTypes.number,
   seriesHeight: PropTypes.number,
   data: PropTypes.arrayOf(
     PropTypes.shape({
@@ -47,6 +48,7 @@ const propTypes = {
 const defaultProps = {
   className: '',
   width: 800,
+  height: 600,
   seriesHeight: 20,
   bands: Math.floor(DEFAULT_COLORS.length / 2),
   colors: DEFAULT_COLORS,
@@ -60,6 +62,7 @@ class HorizonChart extends React.PureComponent {
     const {
       className,
       width,
+      height,
       data,
       seriesHeight,
       bands,
@@ -76,7 +79,7 @@ class HorizonChart extends React.PureComponent {
     }
 
     return (
-      <div className={`superset-legacy-chart-horizon ${className}`}>
+      <div className={`superset-legacy-chart-horizon ${className}`} style={{ height }}>
         {data.map(row => (
           <HorizonRow
             key={row.key}

diff --git a/...uperset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/transformProps.js b/...uperset-ui-plugins/packages/superset-ui-legacy-plugin-chart-horizon/src/transformProps.js
@@ -17,12 +17,13 @@
  * under the License.
  */
 export default function transformProps(chartProps) {
-  const { width, formData, queryData } = chartProps;
+  const { height, width, formData, queryData } = chartProps;
   const { horizonColorScale, seriesHeight } = formData;
 
   return {
     colorScale: horizonColorScale,
     data: queryData.data,
+    height,
     seriesHeight: parseInt(seriesHeight, 10),
     width,
   };