├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE.md
├── README.md
├── docs
    ├── App.js
    ├── AreaDemo.js
    ├── BarDemo.js
    ├── BarsLine.js
    ├── Controls.js
    ├── Debug.js
    ├── Dev.js
    ├── DoubleBars.js
    ├── Footer.js
    ├── Header.js
    ├── bundle.js
    ├── data.js
    ├── entry.js
    ├── index.html
    ├── styles.js
    └── util.js
├── package.json
├── src
    ├── Area.js
    ├── Axis.js
    ├── Bar.js
    ├── Chart.js
    ├── DataLabels.js
    ├── Div.js
    ├── Dot.js
    ├── Dots.js
    ├── Label.js
    ├── Line.js
    ├── Rule.js
    ├── Rules.js
    ├── Svg.js
    ├── get-scale.js
    ├── index.js
    └── withScale.js
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015",
4 |     "stage-0",
5 |     "react"
6 |   ]
7 | }
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | dist
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | 
2 | docs
3 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # The MIT License (MIT)
 3 | 
 4 | Copyright (c) 2016 Brent Jackson
 5 | 
 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 9 | 
10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11 | 
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # f0
  3 | 
  4 | **WIP**
  5 | 
  6 | Minimal, composable, fully-fluid SVG charts for React
  7 | 
  8 | ## Getting Started
  9 | 
 10 | ```sh
 11 | npm i -S f0
 12 | ```
 13 | 
 14 | ```js
 15 | import React from 'react'
 16 | import { Line, Bars } from 'f0'
 17 | 
 18 | const App = () => {
 19 |   const a = [
 20 |     4, 8, 16, 32, 64
 21 |   ]
 22 | 
 23 |   const b = [
 24 |     8, 2, 32, 16, 4
 25 |   ]
 26 | 
 27 |   return (
 28 |     <div>
 29 |       <Bars data={a} />
 30 |       <Line data={b} />
 31 |     </div>
 32 |   )
 33 | }
 34 | 
 35 | export default App
 36 | ```
 37 | 
 38 | ## Features
 39 | 
 40 | - Fully fluid charts with fixed heights
 41 | - Uses HTML for labels to prevent scaling issues
 42 | - Bare bones API - only accepts flat arrays as data
 43 | - Low-level access to components for composition
 44 | 
 45 | ## Components
 46 | 
 47 | ### Line
 48 | 
 49 | ```js
 50 | <Line
 51 |   data={data}
 52 | />
 53 | ```
 54 | 
 55 | ```js
 56 | <Line
 57 |   data={data}
 58 |   color='tomato'
 59 |   strokeWidth={2}
 60 |   dots
 61 | />
 62 | ```
 63 | 
 64 | ### Area
 65 | 
 66 | ```js
 67 | <Area
 68 |   data={data}
 69 | />
 70 | ```
 71 | 
 72 | ```js
 73 | <Area
 74 |   data={data}
 75 |   color='tomato'
 76 |   opacity={1/2}
 77 | />
 78 | ```
 79 | 
 80 | ### Bar
 81 | 
 82 | ```js
 83 | <Bar
 84 |   data={data}
 85 |   />
 86 | ```
 87 | 
 88 | ```js
 89 | <Bar
 90 |   data={data}
 91 |   color='tomato'
 92 |   />
 93 | ```
 94 | 
 95 | ### Svg
 96 | 
 97 | ```js
 98 | <Svg>
 99 |   <Bar data={a} />
100 |   <Line data={b} />
101 | </Svg>
102 | ```
103 | 
104 | ### Chart
105 | 
106 | ```js
107 | <Chart>
108 |   <Line data={data} />
109 |   <Axis
110 |     labels={[
111 |       'Mon',
112 |       'Tue',
113 |       'Wed',
114 |       'Thu',
115 |       'Fri'
116 |     ]}
117 |   />
118 | </Chart>
119 | ```
120 | 
121 | ### Rules
122 | 
123 | ```js
124 | <Svg>
125 |   <Rules y={5} />
126 |   <Line data={data} />
127 | </Svg>
128 | ```
129 | 
130 | ### Axis
131 | 
132 | ```js
133 | <Chart>
134 |   <Line data={data} />
135 |   <Axis
136 |     labels={[
137 |       'Mon',
138 |       'Tue',
139 |       'Wed',
140 |       'Thu',
141 |       'Fri'
142 |     ]}
143 |   />
144 |   <Axis
145 |     y
146 |     labels={[
147 |       32,
148 |       16,
149 |       0
150 |     ]}
151 |   />
152 | </Chart>
153 | ```
154 | 
155 | ### DataLabels
156 | 
157 | ```js
158 | <Chart>
159 |   <Bar data={data} />
160 |   <DataLabels data={data} />
161 | </Chart>
162 | ```
163 | 
164 | ## Browser Support
165 | 
166 | **Currently does not work in IE**
167 | 
168 | The fluid style for these charts relies on SVG 1.2 vector-effect non-scaling-stroke.
169 | Modern evergreen browsers should support this feature, but charts may appear distorted in older browsers, including IE and Edge.
170 | 
171 | [MIT License](/LICENSE.md)
172 | 
173 | 


--------------------------------------------------------------------------------
/docs/App.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // Dematerialization margin
  3 | 
  4 | import React from 'react'
  5 | import chroma from 'chroma-js'
  6 | import Header from './Header'
  7 | import BarDemo from './BarDemo'
  8 | import DoubleBars from './DoubleBars'
  9 | import BarsLine from './BarsLine'
 10 | import AreaDemo from './AreaDemo'
 11 | import Footer from './Footer'
 12 | 
 13 | import Dev from './Dev'
 14 | import Controls from './Controls'
 15 | 
 16 | const blue = '#0077cc'
 17 | const orange = '#ff5500'
 18 | const colors = {
 19 |   blue,
 20 |   orange
 21 | }
 22 | 
 23 | const rand = () => Math.round(16 * Math.random())
 24 | 
 25 | const getData = (length) => (
 26 |   Array.from({ length }).map(rand)
 27 | )
 28 | 
 29 | const getColors = () => {
 30 |   const [ h, s ] = chroma.random().hsl()
 31 |   const b0 = chroma.hsl([ h, s, 1 / 8 ]).hex()
 32 |   const b1 = chroma.hsl([ h, s, 1 / 4 ]).hex()
 33 |   const b2 = chroma.hsl([ h, s, 1 / 2 ]).hex()
 34 |   const b3 = chroma.hsl([ h, s, 3 / 4 ]).hex()
 35 |   const b4 = chroma.hsl([ h, s, 7 / 8 ]).hex()
 36 | 
 37 |   return [
 38 |     b0, b1, b2, b3, b4
 39 |   ]
 40 | }
 41 | 
 42 | class App extends React.Component {
 43 |   state = {
 44 |     count: 0,
 45 |     colors: getColors(),
 46 |     logo: getData(8),
 47 |     data: getData(8),
 48 |     neg: getData(8).map(n => -1 * n),
 49 |     xdata: [
 50 |       3, 8, 4, 16,
 51 |       48, 32, 24, 24
 52 |     ],
 53 |     xneg: [
 54 |       -48, -32, -24, -24,
 55 |       -3, -8, -4, -16
 56 |     ]
 57 |   }
 58 | 
 59 |   randomize = () => {
 60 |     const logo = this.state.logo.map(rand)
 61 |     const data = this.state.data.map(rand)
 62 |     const neg = this.state.data.map(rand).map(n => -1 * n)
 63 |     const colors = getColors()
 64 |     this.setState({
 65 |       logo,
 66 |       data,
 67 |       neg,
 68 |       colors
 69 |     })
 70 |   }
 71 | 
 72 |   onChange = obj => {
 73 |     this.setState(obj)
 74 |   }
 75 | 
 76 |   componentDidMount () {
 77 |     setInterval(this.randomize, 2000)
 78 |   }
 79 | 
 80 |   render () {
 81 |     const { data } = this.state
 82 |     const sx = {
 83 |       root: {
 84 |         fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
 85 |       }
 86 |     }
 87 | 
 88 |     return (
 89 |       <div style={sx.root}>
 90 |         <Header {...this.state} />
 91 |         <BarDemo {...this.state} />
 92 |         <DoubleBars {...this.state} />
 93 |         <BarsLine {...this.state} />
 94 |         <AreaDemo {...this.state} />
 95 |         <Footer {...this.state} />
 96 |         {/*
 97 |           <Dev {...this.state} />
 98 |           <Controls {...this.state} onChange={this.onChange} />
 99 |         */}
100 |       </div>
101 |     )
102 |   }
103 | }
104 | 
105 | export default App
106 | 
107 | 


--------------------------------------------------------------------------------
/docs/AreaDemo.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import { VictoryAnimation } from 'victory'
 4 | import {
 5 |   Chart,
 6 |   Svg,
 7 |   Area
 8 | } from '../src'
 9 | import { fl } from './util'
10 | 
11 | const AreaDemo = ({
12 |   data,
13 |   logo,
14 |   colors
15 | }) => {
16 |   const sx = {
17 |     root: {
18 |       color: colors[4],
19 |       backgroundColor: colors[1],
20 |       transitionProperty: 'color, background-color, fill',
21 |       transitionDuration: '.2s, .8s',
22 |       transitionTimingFunction: 'ease-out'
23 |     },
24 |     title: {
25 |       display: 'flex',
26 |       flexWrap: 'wrap',
27 |       alignItems: 'flex-end'
28 |     },
29 |     space: {
30 |       flex: '1 1 auto'
31 |     }
32 |   }
33 | 
34 |   return (
35 |     <section
36 |       className='pl3 pr3 pt6 pb6'
37 |       style={sx.root}>
38 |       <VictoryAnimation
39 |         duration={750}
40 |         data={{ data, logo }}>
41 |         {({ data, logo }) => (
42 |           <div>
43 |             <h2 className='h1 xh0 mt0 mb3 mono' style={sx.title}>
44 |               <div>Area</div>
45 |               <div style={sx.space} />
46 |               <div>
47 |                 <div className='h5 right-align'>Pattern buffer</div>
48 |                 <div>{fl(data[data.length - 1])}</div>
49 |               </div>
50 |             </h2>
51 |             <Chart>
52 |               <Svg>
53 |                 <Area
54 |                   data={logo}
55 |                   min={0}
56 |                   max={16}
57 |                   color={colors[0]}
58 |                   opacity={1}
59 |                 />
60 |                 <Area
61 |                   data={data}
62 |                   min={0}
63 |                   max={16}
64 |                   color={colors[3]}
65 |                   opacity={1/2}
66 |                 />
67 |               </Svg>
68 |             </Chart>
69 |           </div>
70 |         )}
71 |       </VictoryAnimation>
72 |     </section>
73 |   )
74 | }
75 | 
76 | export default AreaDemo
77 | 
78 | 


--------------------------------------------------------------------------------
/docs/BarDemo.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { VictoryAnimation } from 'victory'
 3 | import {
 4 |   Chart,
 5 |   Svg,
 6 |   Bar,
 7 |   Rules,
 8 |   Axis
 9 | } from '../src'
10 | import { fl } from './util'
11 | 
12 | const BarDemo = ({
13 |   data,
14 |   colors
15 | }) => {
16 |   const sx = {
17 |     root: {
18 |       color: colors[4],
19 |       backgroundColor: colors[1],
20 |       transitionProperty: 'color, background-color, fill',
21 |       transitionDuration: '.2s, .8s',
22 |       transitionTimingFunction: 'ease-out'
23 |     },
24 |     title: {
25 |       display: 'flex',
26 |       flexWrap: 'wrap',
27 |       alignItems: 'flex-end'
28 |     },
29 |     space: {
30 |       flex: '1 1 auto'
31 |     }
32 |   }
33 | 
34 |   return (
35 |     <section
36 |       className='pl3 pr3 pt6 pb6'
37 |       style={sx.root}>
38 |       <VictoryAnimation
39 |         duration={750}
40 |         data={{ data }}>
41 |         {({ data }) => (
42 |           <div>
43 |             <h2 className='h1 xh0 mt0 mb3 mono' style={sx.title}>
44 |               <div>Bar</div>
45 |               <div style={sx.space} />
46 |               <div>
47 |                 <div className='h5 right-align'>Telemetry</div>
48 |                 <div>{fl(data[data.length - 1])}</div>
49 |               </div>
50 |             </h2>
51 |             <Chart>
52 |               <Svg>
53 |                 <Rules color={colors[0]} y={4} />
54 |                 <Bar
55 |                   data={data}
56 |                   min={0}
57 |                   max={16}
58 |                 />
59 |               </Svg>
60 |               <Axis
61 |                 labels={[
62 |                   'a',
63 |                   'b',
64 |                   'c',
65 |                   'd',
66 |                   'e',
67 |                   'f',
68 |                   'g',
69 |                   'h',
70 |                 ]} />
71 |             </Chart>
72 |           </div>
73 |         )}
74 |       </VictoryAnimation>
75 |     </section>
76 |   )
77 | }
78 | 
79 | export default BarDemo
80 | 
81 | 


--------------------------------------------------------------------------------
/docs/BarsLine.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import { VictoryAnimation } from 'victory'
 4 | import {
 5 |   Svg,
 6 |   Bar,
 7 |   Line,
 8 |   Rules
 9 | } from '../src'
10 | import { fl } from './util'
11 | 
12 | const DoubleBars = ({
13 |   data,
14 |   neg,
15 |   colors
16 | }) => {
17 |   const sx = {
18 |     root: {
19 |       color: colors[4],
20 |       backgroundColor: colors[0],
21 |       transitionProperty: 'color, background-color, fill, stroke',
22 |       transitionDuration: '.2s, .8s',
23 |       transitionTimingFunction: 'ease-out'
24 |     },
25 |     title: {
26 |       display: 'flex',
27 |       flexWrap: 'wrap',
28 |       alignItems: 'flex-end'
29 |     },
30 |     space: {
31 |       flex: '1 1 auto'
32 |     }
33 |   }
34 | 
35 |   return (
36 |     <section
37 |       className='pl3 pr3 pt6 pb6'
38 |       style={sx.root}>
39 |       <VictoryAnimation
40 |         duration={750}
41 |         data={{ data, neg }}>
42 |         {({ data, neg }) => {
43 |           const line = data.map((d, i) => d + neg[i])
44 | 
45 |           return (
46 |             <div>
47 |               <h2 className='h1 xh0 mt0 mb3 mono' style={sx.title}>
48 |                 <div>Bar + Line</div>
49 |                 <div style={sx.space} />
50 |                 <div>
51 |                   <div className='h5 right-align'>Tachyonic inversion</div>
52 |                   <div>{fl(line[line.length - 1])}</div>
53 |                 </div>
54 |               </h2>
55 |               <Svg>
56 |                 <Bar
57 |                   height={128}
58 |                   viewBox='0 0 100 200'
59 |                   data={data}
60 |                   min={0}
61 |                   max={16}
62 |                 />
63 |                 <Bar
64 |                   height={128}
65 |                   viewBox='0 0 100 200'
66 |                   y={50}
67 |                   color={colors[2]}
68 |                   data={neg}
69 |                   min={-16}
70 |                   max={0}
71 |                 />
72 |                 <Line
73 |                   data={line}
74 |                   pad
75 |                   dots
76 |                   dotFill={colors[3]}
77 |                   dotSize={16}
78 |                   color='#fff'
79 |                   min={-16}
80 |                   max={16}
81 |                 />
82 |               </Svg>
83 |             </div>
84 |           )
85 |         }}
86 |       </VictoryAnimation>
87 |     </section>
88 |   )
89 | }
90 | 
91 | export default DoubleBars
92 | 
93 | 


--------------------------------------------------------------------------------
/docs/Controls.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import {
 4 |   Slider
 5 | } from 'rebass'
 6 | 
 7 | const Controls = props => {
 8 |   const {
 9 |     data,
10 |     neg,
11 |     logo,
12 |     onChange
13 |   } = props
14 | 
15 |   const handleNumberChange = i => e => {
16 |     const { name, value } = e.target
17 |     const arr = props[name]
18 |     const num = parseFloat(value)
19 |     arr[i] = num
20 |     onChange({ [name]: arr })
21 |   }
22 | 
23 |   return (
24 |     <div>
25 |       {neg.map((d, i) => (
26 |         <Slider
27 |           key={i}
28 |           name='neg'
29 |           label={`neg[${i}]: ${d}`}
30 |           value={d}
31 |           max={0}
32 |           min={-16}
33 |           onChange={handleNumberChange(i)}
34 |         />
35 |       ))}
36 |       <hr />
37 |       {data.map((d, i) => (
38 |         <Slider
39 |           key={i}
40 |           name='data'
41 |           label={`data[${i}]: ${d}`}
42 |           value={d}
43 |           max={16}
44 |           onChange={handleNumberChange(i)}
45 |         />
46 |       ))}
47 |     </div>
48 |   )
49 | }
50 | 
51 | export default Controls
52 | 
53 | 


--------------------------------------------------------------------------------
/docs/Debug.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Debug = props => (
 5 |   <pre>{JSON.stringify(props, null, 2)}</pre>
 6 | )
 7 | 
 8 | export default Debug
 9 | 
10 | 


--------------------------------------------------------------------------------
/docs/Dev.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react'
  3 | import {
  4 |   VictoryAnimation,
  5 |   VictoryAxis
  6 | } from 'victory'
  7 | import {
  8 |   Chart,
  9 |   Svg,
 10 |   Line,
 11 |   Area,
 12 |   Bar,
 13 |   Rules,
 14 | 
 15 |   Axis,
 16 |   DataLabels,
 17 | 
 18 |   XAxis,
 19 |   Label,
 20 | 
 21 |   Labels
 22 | } from '../src'
 23 | import { fl } from './util'
 24 | 
 25 | const Dev = ({
 26 |   data,
 27 |   neg,
 28 |   logo,
 29 |   colors
 30 | }) => {
 31 |   const sx = {
 32 |     root: {
 33 |       padding: 48
 34 |     },
 35 |     bars: {
 36 |       marginBottom: 32,
 37 |       transitionProperty: 'fill, stroke',
 38 |       transitionDuration: '.4s',
 39 |       transitionTimingFunction: 'ease-out'
 40 |     }
 41 |   }
 42 | 
 43 |   return (
 44 |     <div style={sx.root}>
 45 |       <pre>Dev</pre>
 46 |       <VictoryAnimation
 47 |         duration={750}
 48 |         data={{
 49 |           data,
 50 |           neg,
 51 |           logo
 52 |         }}>
 53 |         {({ data, logo }) => (
 54 |           <div>
 55 |             <Chart style={{ marginBottom: 32 }}>
 56 |               <Svg>
 57 |                 <Area
 58 |                   data={logo}
 59 |                   min={0}
 60 |                   max={16}
 61 |                   color={colors[3]}
 62 |                   opacity={1/2}
 63 |                 />
 64 |                 <Line
 65 |                   dots
 66 |                   dotFill='#fff'
 67 |                   style={sx.bars}
 68 |                   color={colors[1]}
 69 |                   data={logo}
 70 |                   min={0}
 71 |                   max={16}
 72 |                 />
 73 |                 <Rules x={8} y={5} />
 74 |               </Svg>
 75 |             </Chart>
 76 |             <Chart style={{
 77 |               backgroundColor: '#f6f6f6'
 78 |             }}>
 79 |               <Axis y
 80 |                 labels={[
 81 |                   16,
 82 |                   12,
 83 |                   8,
 84 |                   4,
 85 |                   0
 86 |                 ]} />
 87 |               <Svg>
 88 |                 <Rules y={5} />
 89 |                 <Bar
 90 |                   style={sx.bars}
 91 |                   color={colors[2]}
 92 |                   data={data}
 93 |                   min={0}
 94 |                   max={16}
 95 |                 />
 96 |               </Svg>
 97 |               <DataLabels
 98 |                 data={data}
 99 |                 min={0}
100 |                 max={16}
101 |                 format={fl}
102 |               />
103 |             </Chart>
104 |             <Axis rule
105 |               labels={[
106 |                 'A',
107 |                 'B',
108 |                 'C',
109 |                 'D',
110 |                 'E',
111 |                 'F',
112 |                 'G',
113 |                 'H'
114 |               ]} />
115 |             <Area
116 |               style={sx.bars}
117 |               color={colors[1]}
118 |               data={logo}
119 |               min={0}
120 |               max={16}
121 |             />
122 |           </div>
123 |         )}
124 |       </VictoryAnimation>
125 |       <pre>{JSON.stringify(data, null, 2)}</pre>
126 |       <pre>{JSON.stringify(neg, null, 2)}</pre>
127 |       <pre>{JSON.stringify(logo, null, 2)}</pre>
128 |       <pre>{JSON.stringify(colors, null, 2)}</pre>
129 |     </div>
130 |   )
131 | }
132 | 
133 | export default Dev
134 | 


--------------------------------------------------------------------------------
/docs/DoubleBars.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import { VictoryAnimation } from 'victory'
 4 | import {
 5 |   Svg,
 6 |   Bar,
 7 |   Rules
 8 | } from '../src'
 9 | import { fl } from './util'
10 | 
11 | const DoubleBars = ({
12 |   data,
13 |   neg,
14 |   colors
15 | }) => {
16 |   const sx = {
17 |     root: {
18 |       color: '#fff',
19 |       backgroundColor: colors[3],
20 |       transitionProperty: 'color, background-color, fill',
21 |       transitionDuration: '.2s, .8s',
22 |       transitionTimingFunction: 'ease-out'
23 |     },
24 |     title: {
25 |       display: 'flex',
26 |       flexWrap: 'wrap',
27 |       alignItems: 'flex-end'
28 |     },
29 |     space: {
30 |       flex: '1 1 auto'
31 |     }
32 |   }
33 |   return (
34 |     <section
35 |       className='pl3 pr3 pt6 pb6'
36 |       style={sx.root}>
37 |       <VictoryAnimation
38 |         duration={750}
39 |         data={{ data, neg }}>
40 |         {({ data, neg }) => (
41 |           <div>
42 |             <h2 className='h1 xh0 mt0 mb3 mono' style={sx.title}>
43 |               <div>Bar</div>
44 |               <div style={sx.space} />
45 |               <div>
46 |                 <div className='h5 right-align'>Time dilation</div>
47 |                 <div>{fl(data[data.length - 1])}</div>
48 |               </div>
49 |             </h2>
50 |             <Svg>
51 |               <Rules y={5} />
52 |               <Bar
53 |                 viewBox='0 0 100 200'
54 |                 height={128}
55 |                 data={data}
56 |                 min={0}
57 |                 max={16}
58 |               />
59 |               <Bar
60 |                 viewBox='0 0 100 200'
61 |                 y={50}
62 |                 height={128}
63 |                 color={colors[2]}
64 |                 data={neg}
65 |                 min={-16}
66 |                 max={0}
67 |               />
68 |             </Svg>
69 |           </div>
70 |         )}
71 |       </VictoryAnimation>
72 |     </section>
73 |   )
74 | }
75 | 
76 | export default DoubleBars
77 | 
78 | 


--------------------------------------------------------------------------------
/docs/Footer.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Footer = ({
 5 |   colors
 6 | }) => {
 7 |   const sx = {
 8 |     root: {
 9 |       color: colors[4],
10 |       backgroundColor: colors[0],
11 |     }
12 |   }
13 | 
14 |   return (
15 |     <footer
16 |       style={sx.root}
17 |       className='h5 pl3 pr3 pt4 pb4'>
18 |       <a href='https://github.com/jxnblk/f0' className='mr2'>GitHub</a>
19 |       <a href='http://jxnblk.com'>Made by Jxnblk</a>
20 |     </footer>
21 |   )
22 | }
23 | 
24 | export default Footer
25 | 
26 | 


--------------------------------------------------------------------------------
/docs/Header.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import { VictoryAnimation } from 'victory'
 4 | import {
 5 |   Line,
 6 |   Svg,
 7 |   Rules
 8 | } from '../src'
 9 | import { format } from 'd3-format'
10 | 
11 | const fl = format('.2f')
12 | 
13 | const Header = ({ logo, colors }) => {
14 |   const sx = {
15 |     root: {
16 |       color: colors[4],
17 |       backgroundColor: colors[2],
18 |       transitionProperty: 'color, background-color, fill, stroke',
19 |       transitionDuration: '.2s, .8s',
20 |       transitionTimingFunction: 'ease-out'
21 |     },
22 |     title: {
23 |       display: 'flex',
24 |       flexWrap: 'wrap',
25 |       alignItems: 'flex-end',
26 |       color: colors[1] // styles.b[1]
27 |     },
28 |     space: {
29 |       flex: '1 1 auto'
30 |     }
31 |   }
32 | 
33 |   return (
34 |     <header
35 |       className='pl3 pr3 pt6 pb6'
36 |       style={sx.root}>
37 |       <VictoryAnimation
38 |         duration={750}
39 |         data={{ data: logo }}>
40 |         {({ data }) => (
41 |           <div className=''>
42 |             <h1 className='h1 xh0 mt0 mb3 mono' style={sx.title}>
43 |               <div>f0</div>
44 |               <div style={sx.space} />
45 |               <div>
46 |                 <div className='h5 right-align'>Subspace frequency</div>
47 |                 <div>{fl(data[data.length - 1])}</div>
48 |               </div>
49 |             </h1>
50 |             <Svg height={192}>
51 |               <Rules y={5} color={colors[1]} />
52 |               <Line
53 |                 data={data}
54 |                 min={0}
55 |                 max={16}
56 |                 strokeWidth={6}
57 |                 dots
58 |                 color='#fff'
59 |                 dotSize={24}
60 |                 dotFill={colors[2]}
61 |               />
62 |             </Svg>
63 |           </div>
64 |         )}
65 |       </VictoryAnimation>
66 |       <p className='h3 bold mb0'>
67 |         Minimal, composable, fully-fluid SVG charts for React
68 |       </p>
69 |       <p className='h3 mt0 bold'>*WIP*</p>
70 |       {/*
71 |       <button>Tweet</button>
72 |       <button>Star</button>
73 |       */}
74 |     </header>
75 |   )
76 | }
77 | 
78 | export default Header
79 | 
80 | 


--------------------------------------------------------------------------------
/docs/data.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import pkg from '../package.json'
 3 | 
 4 | const data = {
 5 |   ...pkg
 6 | }
 7 | 
 8 | export default data
 9 | 
10 | 


--------------------------------------------------------------------------------
/docs/entry.js:
--------------------------------------------------------------------------------
1 | 
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | import App from './App'
5 | 
6 | ReactDOM.render(<App />, app)
7 | 
8 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset='utf-8'>
 3 | <title>f0</title>
 4 | <meta name='viewport' content='width=device-width, initial-scale=1'>
 5 | <meta name='description' content='Minimal, composable, fully-fluid SVG charts for React'>
 6 | <meta name='twitter:card' content='summary_large_image'>
 7 | <meta name='twitter:site' content='jxnblk'>
 8 | <meta name='twitter:title' content='f0'>
 9 | <meta name='twitter:description' content='Minimal, composable, fully-fluid SVG charts for React'>
10 | <meta name='twitter:image' content=''>
11 | <link rel='stylesheet' href='https://unpkg.com/type-system@1.0.0-beta.2/type-system.css'>
12 | <link href='https://fonts.googleapis.com/css?family=Roboto+Mono'
13 | rel='stylesheet'>
14 | <style>
15 | body {
16 |   margin: 0;
17 |   -webkit-text-size-adjust: none;
18 | }
19 | a { color: inherit }
20 | .mono {
21 |   font-family: 'Roboto Mono', Menlo, monospace;
22 |   font-weight: 400;
23 | }
24 | .m0{margin:0px}.m1{margin:8px}.m2{margin:16px}.m3{margin:32px}.m4{margin:48px}.m5{margin:64px}.m6{margin:96px}.mt0{margin-top:0px}.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:32px}.mt4{margin-top:48px}.mt5{margin-top:64px}.mt6{margin-top:96px}.mr0{margin-right:0px}.mr1{margin-right:8px}.mr2{margin-right:16px}.mr3{margin-right:32px}.mr4{margin-right:48px}.mr5{margin-right:64px}.mr6{margin-right:96px}.mb0{margin-bottom:0px}.mb1{margin-bottom:8px}.mb2{margin-bottom:16px}.mb3{margin-bottom:32px}.mb4{margin-bottom:48px}.mb5{margin-bottom:64px}.mb6{margin-bottom:96px}.ml0{margin-left:0px}.ml1{margin-left:8px}.ml2{margin-left:16px}.ml3{margin-left:32px}.ml4{margin-left:48px}.ml5{margin-left:64px}.ml6{margin-left:96px}.p0{padding:0px}.p1{padding:8px}.p2{padding:16px}.p3{padding:32px}.p4{padding:48px}.p5{padding:64px}.p6{padding:96px}.pt0{padding-top:0px}.pt1{padding-top:8px}.pt2{padding-top:16px}.pt3{padding-top:32px}.pt4{padding-top:48px}.pt5{padding-top:64px}.pt6{padding-top:96px}.pr0{padding-right:0px}.pr1{padding-right:8px}.pr2{padding-right:16px}.pr3{padding-right:32px}.pr4{padding-right:48px}.pr5{padding-right:64px}.pr6{padding-right:96px}.pb0{padding-bottom:0px}.pb1{padding-bottom:8px}.pb2{padding-bottom:16px}.pb3{padding-bottom:32px}.pb4{padding-bottom:48px}.pb5{padding-bottom:64px}.pb6{padding-bottom:96px}.pl0{padding-left:0px}.pl1{padding-left:8px}.pl2{padding-left:16px}.pl3{padding-left:32px}.pl4{padding-left:48px}.pl5{padding-left:64px}.pl6{padding-left:96px}@media screen and (min-width:40em){.md-m0{margin:0px}.md-m1{margin:8px}.md-m2{margin:16px}.md-m3{margin:32px}.md-m4{margin:48px}.md-m5{margin:64px}.md-m6{margin:96px}.md-mt0{margin-top:0px}.md-mt1{margin-top:8px}.md-mt2{margin-top:16px}.md-mt3{margin-top:32px}.md-mt4{margin-top:48px}.md-mt5{margin-top:64px}.md-mt6{margin-top:96px}.md-mr0{margin-right:0px}.md-mr1{margin-right:8px}.md-mr2{margin-right:16px}.md-mr3{margin-right:32px}.md-mr4{margin-right:48px}.md-mr5{margin-right:64px}.md-mr6{margin-right:96px}.md-mb0{margin-bottom:0px}.md-mb1{margin-bottom:8px}.md-mb2{margin-bottom:16px}.md-mb3{margin-bottom:32px}.md-mb4{margin-bottom:48px}.md-mb5{margin-bottom:64px}.md-mb6{margin-bottom:96px}.md-ml0{margin-left:0px}.md-ml1{margin-left:8px}.md-ml2{margin-left:16px}.md-ml3{margin-left:32px}.md-ml4{margin-left:48px}.md-ml5{margin-left:64px}.md-ml6{margin-left:96px}.md-p0{padding:0px}.md-p1{padding:8px}.md-p2{padding:16px}.md-p3{padding:32px}.md-p4{padding:48px}.md-p5{padding:64px}.md-p6{padding:96px}.md-pt0{padding-top:0px}.md-pt1{padding-top:8px}.md-pt2{padding-top:16px}.md-pt3{padding-top:32px}.md-pt4{padding-top:48px}.md-pt5{padding-top:64px}.md-pt6{padding-top:96px}.md-pr0{padding-right:0px}.md-pr1{padding-right:8px}.md-pr2{padding-right:16px}.md-pr3{padding-right:32px}.md-pr4{padding-right:48px}.md-pr5{padding-right:64px}.md-pr6{padding-right:96px}.md-pb0{padding-bottom:0px}.md-pb1{padding-bottom:8px}.md-pb2{padding-bottom:16px}.md-pb3{padding-bottom:32px}.md-pb4{padding-bottom:48px}.md-pb5{padding-bottom:64px}.md-pb6{padding-bottom:96px}.md-pl0{padding-left:0px}.md-pl1{padding-left:8px}.md-pl2{padding-left:16px}.md-pl3{padding-left:32px}.md-pl4{padding-left:48px}.md-pl5{padding-left:64px}.md-pl6{padding-left:96px}}
25 | 
26 | .right-align { text-align: right }
27 | :root {
28 |   --cyan: #02ffd5;
29 |   --darkcyan: #104a40;
30 |   --black: #041210;
31 | }
32 | 
33 | .white { color: #fff }
34 | .black { color: var(--black) }
35 | .darkcyan { color: var(--darkcyan) }
36 | .cyan { color: var(--cyan) }
37 | 
38 | .bg-white { background-color: #fff }
39 | .bg-black { background-color: var(--black) }
40 | .bg-darkcyan { background-color: var(--darkcyan) }
41 | .bg-cyan { background-color: var(--cyan) }
42 | 
43 | </style>
44 | <div id='app'></div>
45 | <script src='bundle.js'></script>
46 | 


--------------------------------------------------------------------------------
/docs/styles.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const colors = {
 3 |   cyan: '#02ffd5',
 4 |   darkcyan: '#104a40',
 5 |   black: '#041210',
 6 | }
 7 | 
 8 | const b = [
 9 |   '#001221',
10 |   '#003561',
11 |   '#0059a0',
12 |   '#007ce0',
13 |   '#219cff',
14 |   '#61b8ff',
15 |   '#a0d5ff',
16 | ]
17 | 
18 | const styles = {
19 |   colors,
20 |   b,
21 |   c: [
22 |     '#041210',
23 |     '#104a40',
24 |     '#01bf9f',
25 |     '#02ffd5',
26 |   ]
27 | }
28 | 
29 | export default styles
30 | 
31 | 


--------------------------------------------------------------------------------
/docs/util.js:
--------------------------------------------------------------------------------
1 | 
2 | import { format } from 'd3-format'
3 | 
4 | export const fl = format('.2f')
5 | 
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "f0",
 3 |   "version": "1.0.0-b4",
 4 |   "description": "Minimal, composable, fully-fluid SVG charts for React",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "prepublish": "mkdir -p dist && babel src --out-dir dist",
 8 |     "start": "webpack-dev-server",
 9 |     "build": "webpack -p"
10 |   },
11 |   "keywords": [
12 |     "charts",
13 |     "react",
14 |     "svg",
15 |     "responsive",
16 |     "fluid"
17 |   ],
18 |   "author": "Brent Jackson",
19 |   "license": "MIT",
20 |   "devDependencies": {
21 |     "babel-cli": "^6.16.0",
22 |     "babel-core": "^6.17.0",
23 |     "babel-loader": "^6.2.5",
24 |     "babel-preset-es2015": "^6.16.0",
25 |     "babel-preset-react": "^6.16.0",
26 |     "babel-preset-stage-0": "^6.16.0",
27 |     "chroma-js": "^1.2.1",
28 |     "d3-format": "^1.0.2",
29 |     "json-loader": "^0.5.4",
30 |     "open-color": "^1.4.0",
31 |     "react": "^15.3.2",
32 |     "react-dom": "^15.3.2",
33 |     "react-motion": "^0.4.5",
34 |     "react-tween-state": "^0.1.5",
35 |     "rebass": "^0.4.0-beta.8",
36 |     "victory": "^0.13.0",
37 |     "webpack": "^1.13.2",
38 |     "webpack-dev-server": "^1.16.2"
39 |   },
40 |   "dependencies": {
41 |     "d3-array": "^1.0.1",
42 |     "d3-scale": "^1.0.3"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/Area.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import withScale from './withScale'
 4 | import Svg from './Svg'
 5 | 
 6 | const Area = ({
 7 |   points = [],
 8 |   color = 'currentcolor',
 9 |   opacity = 1,
10 |   padWidth,
11 |   ...props
12 | }) => {
13 |   if (!points.length) return null
14 | 
15 |   const command = i => i === 0 ? 'M' : 'L'
16 | 
17 |   const d = [
18 |     ...points.map(({ x, y }, i) => (
19 |       `${command(i)} ${x} ${y}`
20 |     )),
21 |     `V100 H0 z`
22 |   ]
23 | 
24 |   return (
25 |     <Svg {...props}>
26 |       <path
27 |         d={d}
28 |         fill={color}
29 |         opacity={opacity}
30 |       />
31 |     </Svg>
32 |   )
33 | }
34 | 
35 | export default withScale(Area)
36 | 
37 | 


--------------------------------------------------------------------------------
/src/Axis.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import React from 'react'
  3 | import getScale from './get-scale'
  4 | import Div from './Div'
  5 | import Label from './Label'
  6 | 
  7 | // Split up or handle unpadded labels
  8 | 
  9 | const XAxis = ({
 10 |   labels = [],
 11 |   rule,
 12 |   scale,
 13 |   padWidth,
 14 |   style
 15 | }) => {
 16 |   const sx = {
 17 |     root: {
 18 |       display: 'flex',
 19 |       justifyContent: 'space-between',
 20 |       alignItems: 'flex-start',
 21 |       position: 'relative',
 22 |       minHeight: 32,
 23 |       marginTop: rule ? -1 : null,
 24 |       borderTop: rule ? '1px solid' : null,
 25 |       ...style
 26 |     },
 27 |     label: {
 28 |       textAlign: 'center',
 29 |       flexBasis: padWidth + '%',
 30 |       paddingTop: 8,
 31 |       paddingBottom: 8,
 32 |     }
 33 |   }
 34 | 
 35 |   return (
 36 |     <div style={sx.root}>
 37 |       {labels.map((label, i) => {
 38 |         const x = scale.padx(i)
 39 |         return (
 40 |           <Label
 41 |             key={i}
 42 |             style={sx.label}
 43 |             children={label}
 44 |           />
 45 |         )
 46 |       })}
 47 |     </div>
 48 |   )
 49 | }
 50 | 
 51 | const YAxis = ({
 52 |   labels = [],
 53 |   rule,
 54 |   ...style
 55 | }) => {
 56 |   const sx = {
 57 |     root: {
 58 |       position: 'absolute',
 59 |       top: 0,
 60 |       left: 0,
 61 |       bottom: 0,
 62 |       borderLeft: rule ? '1px solid' : null,
 63 |       ...style
 64 |     },
 65 |     label: {
 66 |       paddingLeft: rule ? 8 : null
 67 |     }
 68 |   }
 69 |   return (
 70 |     <div style={sx.root}>
 71 |       {labels.map((label, i) => (
 72 |         <Div
 73 |           key={i}
 74 |           y={i / (labels.length - 1) * 100}>
 75 |           <Label
 76 |             style={sx.label}
 77 |             children={label} />
 78 |         </Div>
 79 |       ))}
 80 |     </div>
 81 |   )
 82 | }
 83 | 
 84 | const Axis = ({
 85 |   labels = [],
 86 |   length,
 87 |   x,
 88 |   y,
 89 |   ...props
 90 | }) => {
 91 |   const { scale, padWidth } = getScale({ length: length || labels.length })
 92 | 
 93 |   if (y) {
 94 |     return (
 95 |       <YAxis
 96 |         {...props}
 97 |         labels={labels}
 98 |       />
 99 |     )
100 |   }
101 | 
102 |   return (
103 |     <XAxis
104 |       {...props}
105 |       scale={scale}
106 |       padWidth={padWidth}
107 |       labels={labels}
108 |     />
109 |   )
110 | }
111 | 
112 | export default Axis
113 | 
114 | 


--------------------------------------------------------------------------------
/src/Bar.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // Rename to Bar
 3 | 
 4 | import React from 'react'
 5 | import withScale from './withScale'
 6 | import Svg from './Svg'
 7 | 
 8 | const Bar = ({
 9 |   scale,
10 |   padWidth,
11 |   points = [],
12 |   color = 'currentcolor',
13 |   ...props
14 | }) => {
15 |   if (!points.length) return null
16 | 
17 |   const bars = points.map(({ padx, y, d }, i) => {
18 |     const bx = padx - padWidth / 2
19 |     const hi = d === 0
20 |       ? 0
21 |       : d > 0 ? 100 - y : y
22 |     const by = d >= 0 ? y : 0
23 | 
24 |     return (
25 |       <rect
26 |         key={i}
27 |         x={bx}
28 |         y={by}
29 |         width={padWidth}
30 |         height={hi}
31 |       />
32 |     )
33 |   })
34 | 
35 |   return (
36 |     <Svg
37 |       {...props}
38 |       fill={color}
39 |       children={bars}
40 |     />
41 |   )
42 | }
43 | 
44 | export default withScale(Bar)
45 | 
46 | 


--------------------------------------------------------------------------------
/src/Chart.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Chart = ({
 5 |   width = '100%',
 6 |   height = 256,
 7 |   style,
 8 |   ...props
 9 | }) => {
10 |   const sx = {
11 |     position: 'relative',
12 |     width,
13 |     height,
14 |     // minHeight: height,
15 |     ...style
16 |   }
17 | 
18 |   return (
19 |     <div
20 |       {...props}
21 |       style={sx} />
22 |   )
23 | }
24 | 
25 | export default Chart
26 | 
27 | 


--------------------------------------------------------------------------------
/src/DataLabels.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import withScale from './withScale'
 4 | import Div from './Div'
 5 | import Label from './Label'
 6 | 
 7 | const DataLabels = ({
 8 |   scale,
 9 |   padWidth,
10 |   pad,
11 |   points = [],
12 |   min,
13 |   max,
14 |   format = n => n,
15 |   ...props
16 | }) => {
17 |   const sx = {
18 |     root: {},
19 |     div: {
20 |       width: padWidth + '%'
21 |     },
22 |     label: {
23 |       width: '100%',
24 |       textAlign: 'center',
25 |     }
26 |   }
27 | 
28 |   const labels = points.map(({ x, padx, y, d }, i) => {
29 |     const lx = padx - padWidth / 2
30 |     const ly = y
31 |     return (
32 |       <Div key={i} x={lx} y={ly}
33 |         top
34 |         style={sx.div}>
35 |         <Label
36 |           style={sx.label}
37 |           children={format(d)}
38 |         />
39 |       </Div>
40 |     )
41 |   })
42 | 
43 |   return (
44 |     <div>
45 |       {labels}
46 |     </div>
47 |   )
48 | }
49 | 
50 | export default withScale(DataLabels)
51 | 
52 | 


--------------------------------------------------------------------------------
/src/Div.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Div = ({
 5 |   x = 0,
 6 |   y = 0,
 7 |   top,
 8 |   style,
 9 |   center,
10 |   ...props
11 | }) => {
12 |   const transform = center && top
13 |     ? 'translate(-50%, -100%)'
14 |     : center
15 |     ? 'translate(-50%, 0)'
16 |     : top
17 |     ? 'translate(0, -100%)'
18 |     : null
19 | 
20 |   const sx = {
21 |     position: 'absolute',
22 |     top: y + '%',
23 |     left: x + '%',
24 |     transform,
25 |     ...style
26 |   }
27 | 
28 |   return (
29 |     <div
30 |       {...props}
31 |       style={sx}
32 |     />
33 |   )
34 | }
35 | 
36 | export default Div
37 | 
38 | 


--------------------------------------------------------------------------------
/src/Dot.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Dot = ({
 5 |   x = 0,
 6 |   y = 0,
 7 |   size = 12,
 8 |   color = 'currentcolor',
 9 |   fill,
10 |   strokeWidth,
11 |   style
12 | }) => {
13 |   return (
14 |     <g style={style}>
15 |       <line
16 |         x1={x}
17 |         y1={y}
18 |         x2={x}
19 |         y2={y + 1/32}
20 |         fill='none'
21 |         stroke={color}
22 |         strokeWidth={size}
23 |         strokeLinecap='round'
24 |         vectorEffect='non-scaling-stroke'
25 |       />
26 |       {fill && (
27 |         <line
28 |           x1={x}
29 |           y1={y}
30 |           x2={x}
31 |           y2={y + 1/32}
32 |           fill='none'
33 |           stroke={fill}
34 |           strokeWidth={size - 2 * strokeWidth}
35 |           strokeLinecap='round'
36 |           vectorEffect='non-scaling-stroke'
37 |         />
38 |       )}
39 |     </g>
40 |   )
41 | }
42 | 
43 | export default Dot
44 | 
45 | 


--------------------------------------------------------------------------------
/src/Dots.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import Dot from './Dot'
 4 | 
 5 | const Dots = ({
 6 |   points = [],
 7 |   color,
 8 |   size,
 9 |   fill,
10 |   strokeWidth,
11 |   style
12 | }) => {
13 |   return (
14 |     <g>
15 |       {points.map(({ x, y }, i) => (
16 |         <Dot
17 |           key={i}
18 |           x={x}
19 |           y={y}
20 |           size={size}
21 |           color={color}
22 |           fill={fill}
23 |           strokeWidth={strokeWidth}
24 |           style={style}
25 |         />
26 |       ))}
27 |     </g>
28 |   )
29 | }
30 | 
31 | export default Dots
32 | 
33 | 


--------------------------------------------------------------------------------
/src/Label.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Label = ({
 5 |   style,
 6 |   ...props
 7 | }) => {
 8 |   const sx = {
 9 |     fontSize: 12,
10 |     minHeight: 16,
11 |     ...style
12 |   }
13 | 
14 |   return (
15 |     <div {...props} style={sx} />
16 |   )
17 | }
18 | 
19 | export default Label
20 | 
21 | 


--------------------------------------------------------------------------------
/src/Line.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import withScale from './withScale'
 4 | import Svg from './Svg'
 5 | import Dots from './Dots'
 6 | 
 7 | const isNum = n => !isNaN(n)
 8 | 
 9 | const Line = ({
10 |   scale,
11 |   points = [],
12 |   min,
13 |   max,
14 |   pad,
15 |   padWidth,
16 | 
17 |   color = 'currentcolor',
18 |   strokeWidth = 3,
19 |   strokeLinecap = 'round',
20 | 
21 |   // Should this be an object?
22 |   dots,
23 |   dotSize,
24 |   dotColor,
25 |   dotFill,
26 |   style = {},
27 |   children,
28 |   ...rest
29 | }) => {
30 |   if (!points.length) return null
31 | 
32 |   const command = i => i === 0 ? 'M' : 'L'
33 | 
34 |   // Remove after removing Dots
35 |   const p = points.map(p => pad ? ({ ...p, x: p.padx }) : p)
36 | 
37 |   const d = points.map(({ x, padx, y }, i) => {
38 |     const lx = pad ? padx : x
39 |     return `${command(i)} ${lx} ${y}`
40 |   })
41 | 
42 |   return (
43 |     <Svg {...rest}>
44 |       <path
45 |         d={d}
46 |         fill='none'
47 |         vectorEffect='non-scaling-stroke'
48 |         stroke={color}
49 |         strokeWidth={strokeWidth}
50 |         strokeLinecap={strokeLinecap}
51 |       />
52 |       {dots && (
53 |         <Dots
54 |           points={p}
55 |           size={dotSize}
56 |           color={dotColor || color}
57 |           fill={dotFill}
58 |           strokeWidth={strokeWidth}
59 |         />
60 |       )}
61 |     </Svg>
62 |   )
63 | }
64 | 
65 | export default withScale(Line)
66 | 
67 | 


--------------------------------------------------------------------------------
/src/Rule.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const isNum = n => n !== null && !isNaN(n)
 5 | 
 6 | const Rule = ({
 7 |   x,
 8 |   y,
 9 |   strokeWidth = 1,
10 |   color = 'currentcolor',
11 |   opacity = 1 / 4
12 | }) => {
13 |   if (!isNum(x) && !isNum(y)) return null
14 | 
15 |   const d = isNum(x)
16 |     ? `M${x} 0 V100`
17 |     : `M0 ${y} H100`
18 | 
19 |   return (
20 |     <path
21 |       d={d}
22 |       fill='none'
23 |       stroke={color}
24 |       strokeWidth={strokeWidth}
25 |       opacity={opacity}
26 |       vectorEffect='non-scaling-stroke'
27 |     />
28 |   )
29 | }
30 | 
31 | export default Rule
32 | 
33 | 


--------------------------------------------------------------------------------
/src/Rules.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import Svg from './Svg'
 4 | import Rule from './Rule'
 5 | import getScale from './get-scale'
 6 | 
 7 | const Rules = ({
 8 |   x = 0,
 9 |   y,
10 |   pad,
11 |   strokeWidth = 1,
12 |   color,
13 |   opacity,
14 |   ...props
15 | }) => {
16 |   if (x < 1 && y < 1) return null
17 | 
18 |   const viewBox = [ 0, 0, 100, 100 ].join(' ')
19 | 
20 |   const { scale } = getScale({ length: x })
21 |   const scalex = pad ? scale.padx : scale.x
22 | 
23 |   const xrules = Array.from({ length: x })
24 |     .map((n, i) => i)
25 |     .map(n => (
26 |       <Rule
27 |         key={n}
28 |         x={scalex(n)}
29 |         strokeWidth={strokeWidth}
30 |         color={color}
31 |         opacity={opacity}
32 |       />
33 |     ))
34 | 
35 |   const yrules = Array.from({ length: y })
36 |     .map((n, i) => i)
37 |     .map(n => {
38 |       const step = n / (y - 1) * 100
39 |       return (
40 |         <Rule
41 |           key={n}
42 |           y={step}
43 |           strokeWidth={strokeWidth}
44 |           color={color}
45 |           opacity={opacity}
46 |         />
47 |       )
48 |     })
49 | 
50 |   return (
51 |     <Svg {...props}>
52 |       {xrules}
53 |       {yrules}
54 |     </Svg>
55 |   )
56 | }
57 | 
58 | export default Rules
59 | 
60 | 


--------------------------------------------------------------------------------
/src/Svg.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | 
 4 | const Svg = ({
 5 |   viewBox = '0 0 100 100',
 6 |   width = '100%',
 7 |   height = 256,
 8 |   style,
 9 |   ...props
10 | }) => {
11 |   const sx = {
12 |     position: 'relative',
13 |     display: 'block',
14 |     margin: 0,
15 |     overflow: 'visible',
16 |     width,
17 |     height,
18 |     ...style
19 |   }
20 | 
21 |   return (
22 |     <svg
23 |       {...props}
24 |       preserveAspectRatio='none'
25 |       viewBox={viewBox}
26 |       style={sx}
27 |     />
28 |   )
29 | }
30 | 
31 | export default Svg
32 | 
33 | 


--------------------------------------------------------------------------------
/src/get-scale.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import { scaleLinear } from 'd3-scale'
 3 | import {
 4 |   min as d3min,
 5 |   max as d3max
 6 | } from 'd3-array'
 7 | 
 8 | const isNum = n => !isNaN(n)
 9 | 
10 | const getScale = ({
11 |   data = [],
12 |   length,         // Optional length
13 |   min,            // optional min value
14 |   max,            // optional max value
15 |   padRatio = 2,   // Ratio of bar width vs margin
16 | }) => {
17 |   const datamin = d3min(data)
18 |   const datamax = d3max(data)
19 | 
20 |   min = isNum(min) && min <= datamin ? min : datamin || 0
21 |   max = isNum(max) && max >= datamax ? max : datamax || 100
22 |   length = length || data.length
23 | 
24 |   const denominator = length * (padRatio + 1)
25 |   const pad = 1 / denominator * 100
26 |   const padWidth = padRatio / denominator * 100
27 | 
28 |   const xdomain = ([ 0, length - 1 ])
29 |   const ydomain = ([ min, max ])
30 |   const x = scaleLinear().domain(xdomain).range([ 0, 100 ])
31 |   const padx = scaleLinear().domain(xdomain).range([ padWidth / 2, 100 - padWidth / 2 ])
32 |   const y = scaleLinear().domain(ydomain).range([ 100, 0 ])
33 | 
34 |   const scale = { x, padx, y }
35 | 
36 |   return {
37 |     min,
38 |     max,
39 |     scale,
40 |     pad,
41 |     padWidth
42 |   }
43 | }
44 | 
45 | export default getScale
46 | 
47 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // SVG
 3 | import Svg from './Svg'
 4 | import Line from './Line'
 5 | import Area from './Area'
 6 | import Bar from './Bar'
 7 | import Rules from './Rules'
 8 | 
 9 | // HTML
10 | import Chart from './Chart'
11 | import Axis from './Axis'
12 | import DataLabels from './DataLabels'
13 | 
14 | // HOC
15 | import getScale from './get-scale'
16 | import withScale from './withScale'
17 | 
18 | export { default as Svg } from './Svg'
19 | export { default as Line } from './Line'
20 | export { default as Area } from './Area'
21 | export { default as Bar } from './Bar'
22 | export { default as Rules } from './Rules'
23 | 
24 | export { default as Chart } from './Chart'
25 | export { default as Axis } from './Axis'
26 | export { default as DataLabels } from './DataLabels'
27 | 
28 | export { default as getScale } from './get-scale'
29 | export { default as withScale } from './withScale'
30 | 
31 | export default {
32 |   Svg,
33 |   Line,
34 |   Area,
35 |   Bar,
36 |   Chart,
37 |   Axis,
38 |   Rules,
39 |   DataLabels,
40 |   getScale,
41 |   withScale
42 | }
43 | 
44 | 


--------------------------------------------------------------------------------
/src/withScale.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import React from 'react'
 3 | import getScale from './get-scale'
 4 | 
 5 | const withScale = Comp => {
 6 |   const ScaledComp = ({
 7 |     data = [],
 8 |     viewBox,
 9 |     ...props
10 |   }) => {
11 |     viewBox = viewBox || [ 0, 0, 100, 100 ].join(' ')
12 | 
13 |     const {
14 |       min,
15 |       max,
16 |       scale,
17 |       padWidth
18 |     } = getScale({ data, ...props })
19 | 
20 |     const points = data.map((d, i) => {
21 |       return {
22 |         d,
23 |         x: scale.x(i),
24 |         padx: scale.padx(i),
25 |         y: scale.y(d)
26 |       }
27 |     })
28 | 
29 |     return (
30 |       <Comp
31 |         {...props}
32 |         data={data}
33 |         viewBox={viewBox}
34 |         min={min}
35 |         max={max}
36 |         scale={scale}
37 |         points={points}
38 |         padWidth={padWidth}
39 |       />
40 |     )
41 |   }
42 | 
43 |   return ScaledComp
44 | }
45 | 
46 | export default withScale
47 | 
48 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const path = require('path')
 3 | 
 4 | module.exports = {
 5 |   entry: './docs/entry.js',
 6 | 
 7 |   output: {
 8 |     path: path.join(__dirname, 'docs'),
 9 |     filename: 'bundle.js'
10 |   },
11 | 
12 |   module: {
13 |     loaders: [
14 |       {
15 |         test: /\.js$/,
16 |         exclude: /node_modules/,
17 |         loader: 'babel'
18 |       },
19 |       {
20 |         test: /\.json$/,
21 |         loader: 'json'
22 |       }
23 |     ]
24 |   },
25 | 
26 |   devServer: {
27 |     contentBase: 'docs/'
28 |   }
29 | }
30 | 
31 | 


--------------------------------------------------------------------------------