[WIP] Stackchart eugen for quick deploy preview

packages/webapp/src/components/ChartSection/Markup.jsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { Component }  from 'react';
+import ReactDOM from "react-dom";
+
 
 import trimValues from '../../helpers/trimValues';
 import Icon from '@material-ui/icons/ArrowForward';
@@ -43,10 +45,13 @@ const callButtonExplore = (url, color,  verb, subject, isConsolidatedChart) => {
   );
 };
 
-const callDetails = (selected, verb, subject, isConsolidatedChart) => {
+const callDetails = (selected, verb, subject, isConsolidatedChart, hasChildren, stickToTop, stickToChartBottom) => {
   const { name, value, url, color } = selected;
   return (
-    <DetailsWrapper>
+    <DetailsWrapper 
+    hasChildren={hasChildren}
+    className={stickToTop? "StickToTop": stickToChartBottom? "StickToChartBottom": ""}
+    >
       <DetailsContainer>
         <div>
           <Department>{name}</Department>
@@ -58,34 +63,98 @@ const callDetails = (selected, verb, subject, isConsolidatedChart) => {
   );
 };
 
-const Markup = (props) => {
-  const {
-    chart,
-    selected,
-    onSelectedChange,
-    verb,
-    subject,
-    footer,
-    years,
-    phases,
-    anchor,
-    title,
-    isConsolidatedChart
-  } = props;
+class Markup extends Component {
 
-  return (
-    <React.Fragment>
-      <CssBaseline />
-      <SectionHeading title={title} share={anchor} years={years} phases={phases} />
-      {!!selected && callDetails(selected, verb, subject, isConsolidatedChart)} 
-      {callChart(chart, onSelectedChange)}
-      <FooterWrapper>
-        <FooterContainer>
-          {footer && <FooterDetails>{footer}</FooterDetails>}
-        </FooterContainer>
-      </FooterWrapper>
-    </React.Fragment>
-  );
+  constructor(props) {
+    super(props);
+    this.state = {
+      stickToTop: false,
+      stickToChartBottom: false,
+    }
+    this.handleScroll = this.handleScroll.bind(this);
+  }
+
+  componentDidMount() {
+    // console.log("add Event listener");
+    window.addEventListener('scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll(event) {
+    if (!this.props.isMobile)
+      return;
+
+    var headerBoundingRect = ReactDOM.findDOMNode(this.refs.header).getBoundingClientRect();
+    var footerBoundingRect = this.refs.footer.getBoundingClientRect();
+
+    // console.log("this.props", this.props);
+    var headerHeight = 143;
+    var bottomLimit = 17;
+    if (!this.props.hasChildren) {
+      headerHeight -= 28;
+    }
+    var stickToTop = false;
+    var stickToChartBottom = false;
+    // console.log("footerBoundingRect.top > headerHeight", footerBoundingRect.top, headerHeight);
+    // console.log("headerBoundingRect.bottom <= bottomLimit", headerBoundingRect.bottom, bottomLimit)
+    if (footerBoundingRect.top > headerHeight
+        && headerBoundingRect.bottom <= bottomLimit) { // when component is Active && header is not visible
+      stickToTop = true;
+    } 
+
+    if (footerBoundingRect.top <= headerHeight) {
+      stickToChartBottom = true;
+    }
+
+    this.setState({stickToTop, stickToChartBottom});
+  }
+
+  render() {
+    const {
+      chart,
+      isMobile,
+      hasChildren,
+      selected,
+      onSelectedChange,
+      verb,
+      subject,
+      footer,
+      years,
+      phases,
+      anchor,
+      title,
+      isConsolidatedChart
+    } = this.props;
+
+    const {
+      stickToTop,
+      stickToChartBottom
+    } = this.state;
+
+    return (
+      <React.Fragment>
+        <CssBaseline/>
+        <SectionHeading 
+          ref="header"
+          title={title} 
+          share={anchor} 
+          years={years} 
+          phases={phases} />
+        {!!selected && callDetails(selected, verb, subject, isConsolidatedChart, hasChildren, false, false)} 
+        {!!selected && stickToTop && callDetails(selected, verb, subject, isConsolidatedChart, hasChildren, stickToTop, stickToChartBottom)} 
+        {callChart(chart, onSelectedChange)}
+        <FooterWrapper ref="footer">
+          {!!selected && stickToChartBottom && callDetails(selected, verb, subject, isConsolidatedChart, hasChildren, stickToTop, stickToChartBottom)} 
+          <FooterContainer>
+            {footer && <FooterDetails>{footer}</FooterDetails>}
+          </FooterContainer>
+        </FooterWrapper>
+      </React.Fragment>
+    );
+  }
 };
 
 export default Markup;

packages/webapp/src/components/ChartSection/styled.js

@@ -56,6 +56,26 @@ const DetailsWrapper = styled.div`
   align-items: center;
   margin-right: 16px;
   margin-left: 16px;
+  &.StickToTop {
+    position: fixed;
+    z-index: 10;
+    top: 0;
+    padding-top: 17px;
+    height: 81px;
+    width: calc(100% - 32px);
+    background: #fafafa;
+  }
+  &.StickToChartBottom {
+    position: absolute;
+    z-index: 10;
+    padding-top: 17px;
+    height: 81px;
+    margin-left: 0px;
+    width: 100%;
+    background: #fafafa;
+    top: ${(props) => props.hasChildren? '-142px': '-118px'};
+    left: 0;
+  }
 `;
 
 const DetailsContainer = styled.div`
@@ -111,6 +131,7 @@ const ChartContainer = styled.div`
 `;
 
 const FooterWrapper = styled.div`
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;

packages/webapp/src/components/SectionHeading/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {Component} from 'react';
 
 import SpeedDial from '../SpeedDial';
 import { MenuItem } from '@material-ui/core';
@@ -52,16 +52,24 @@ import {
   </FormContainer>
  );
 
-const SectionHeading = ({ title, share, years, phases }) => (
-  <Wrapper>
-    <BudgetContainer>
-      <BudgetHeadingAndShareIcon>
-        <BudgetHeading component='div'>{title}</BudgetHeading>
-        {callShareIcon(share)}
-      </BudgetHeadingAndShareIcon>
-      {callSelectDownOptions(years, phases)}
-    </BudgetContainer>
-  </Wrapper>
-);
+class SectionHeading extends Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    const { title, share, years, phases } = this.props;
+    return (
+      <Wrapper>
+        <BudgetContainer>
+          <BudgetHeadingAndShareIcon>
+            <BudgetHeading component='div'>{title}</BudgetHeading>
+            {callShareIcon(share)}
+          </BudgetHeadingAndShareIcon>
+          {callSelectDownOptions(years, phases)}
+        </BudgetContainer>
+      </Wrapper>
+    );
+  }
+}
 
 export default SectionHeading;