Barchart Layout

src/components/bar-chart/data-container.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+import { animationStyle } from './styles';
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`
+
+const DataContainer = styled.div`
+  height: 100%;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  ${animationStyle}
+`
+
+export default ({
+  barTotalWidth,
+  width,
+  offset,
+  oldOffset,
+  totalWidth,
+  startIndex,
+  children
+}) => {
+  const left = totalWidth < width ? (width - totalWidth) / 2 : width + oldOffset - totalWidth + startIndex * barTotalWidth
+  const containerWidth = totalWidth - startIndex * barTotalWidth
+  const animationOffset = offset - oldOffset
+  const style = { left, width: containerWidth }
+
+  return (
+    <Wrapper>
+      <DataContainer offset={animationOffset} style={style}>
+        {children}
+      </DataContainer>
+    </Wrapper>
+  )
+}

src/components/bar-chart/index.js

@@ -1,10 +1,112 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { ThemeProvider } from 'styled-components'
+import { DEFAULT_THEME } from '../../constants';
 
-const Header = styled.h1`
-  color: gold;
+import DataContainer from './data-container'
+import Scroller from './scroller'
+
+const RootContainer = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`
+
+const BarsView = styled.div`
+  height: 100%;
+  width: 100%;
+`
+
+const LabelsContainer = styled.div`
+  height: 40px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+  user-select: none;
 `
 
-export default () => (
-  <Header>Barchart</Header>
-)
+export default class BarChart extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      height: 0,
+      width: 0,
+      offset: 0,
+      oldOffset: 0
+    }
+  }
+  render() {
+    const { theme, showScroller, barWidth, barSpace, bars } = this.props
+    const { width, offset, oldOffset, height } = this.state
+
+    const barTotalWidth = barWidth + barSpace
+    const totalWidth = bars.length * barTotalWidth
+
+    const getStartIndex = () => {
+      const startIndex = Math.floor((totalWidth - width - oldOffset - (offset > oldOffset ? offset - oldOffset : 0)) / barTotalWidth)
+      if (startIndex < 0) return 0
+
+      return startIndex
+    }
+
+    const startIndex = getStartIndex()
+    console.log(width, height)
+    const Content = () => {
+      if (!width) return null
+      const dataConainerProps = { barTotalWidth, width, offset, oldOffset, totalWidth, startIndex }
+
+      const Labels = () => {
+        return (
+          <LabelsContainer>
+
+          </LabelsContainer>
+        )
+      }
+
+      return (
+        <React.Fragment>
+          <DataContainer {...dataConainerProps}>
+            <BarsView ref={el => this.barsContainer = el}>
+
+            </BarsView>
+            <Labels/>
+          </DataContainer>
+          {showScroller && <Scroller/>}
+        </React.Fragment>
+      )
+    }
+
+    return (
+      <ThemeProvider theme={{ ...DEFAULT_THEME, ...theme }}>
+        <RootContainer ref={el => this.rootContainer = el }>
+          <Content/>
+        </RootContainer>
+      </ThemeProvider>
+    )
+  }
+
+  componentDidUpdate() {
+    const { height } = this.barsContainer.getBoundingClientRect()
+    if (this.state.height !== height) {
+      this.setState({ height })
+    }
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.onResize)
+    const { width } = this.rootContainer.getBoundingClientRect()
+    this.setState({ width })
+  }
+
+  onResize = () => {
+    const { width } = this.rootContainer.getBoundingClientRect()
+    const { height } = this.barsContainer.getBoundingClientRect()
+    this.setState({ width, height })
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize)
+  }
+}

src/components/bar-chart/scroller.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+const Container = styled.div`
+  position: relative;
+  height: 20px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`
+
+export default Container

src/components/bar-chart/styles.js

@@ -0,0 +1,11 @@
+import { keyframes, css } from 'styled-components'
+
+const barAnimation = props => keyframes`
+  to {
+    transform: translateX(${props.offset}px);
+  }
+`
+
+export const animationStyle = css`
+  animation: ${barAnimation} 1s ease-in-out forwards;
+`

src/constants.js

@@ -0,0 +1,5 @@
+export const DEFAULT_THEME = {
+  mainColor: 'white',
+  scrollerBakgroundColor: 'rgba(255, 255, 255, 0.15)',
+  labelFontSize: 12
+}

src/utils.js

@@ -0,0 +1 @@
+export const sum = arr => arr.reduce((acc, { value }) => acc + value, 0)