react-chart-brainstorm

react-chart-brainstorm.js

Solutions
  Modules
    Components
      Primitives
        <Path />
        <Arc />
        <Arc />

Responsive (Take up 100% of parent all the time)
State => Visualization
Dynamic Viewports !!
Detecting Changes (imperative)
Incremental Updates & Diffing (React & Immutability)
Every property that can be animated should be (React Motion)


//
const myChart = (
  <Line
    data={[...]}
  />
)

const myCustomChart = (
  <Chart>
    <Stack> // Series Group (<g/>)
      <Series /> // Line or bar or pie-layer
      <Series /> // Line or bar or pie-layer
      <Series /> // Line or bar or pie-layer
    </Stack>
    <Scale independent cursor />
    <Scale dependent cursor />
    <Tooltip />
  </Chart>
)

import styled from 'styled-components';

const Wrapper = styled`
  g {
    stroke-color: ${props => props.theme.strokeColor};
  }
`

<Circle><Tick /></Circle>

<Tick>
  <Wrapper>
    <g></g>
  </Wrapper>
</Tick>

<Touchable></Touchable>
<Pannable></Pannable>

Scale
  Data Points
  Min
  Max
  Ranges
  Zoom
  Precision
  Ticks
  TickComponent
  AxisComponent

  !! Automatically hiding and rotating values on time scale
  
  

class Scale extends PureComponent {

  constructor()
  
}