Skip to content

Commit f8db0ef

Browse files
tannerlinsleytannerlinsley
committed
fix: better state, better axis label rotation
1 parent 6121f46 commit f8db0ef

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+7304
-4356
lines changed

‎d3/entry.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ export {
2929
curveStepBefore,
3030
} from 'd3-shape'
3131

32+
export * from 'd3-time'
33+
3234
// export const schemeTableau10 = preval`
3335
// module.exports = require('d3-scale-chromatic').schemeTableau10
3436
// `

‎docs/src/pages/docs/api.md

Lines changed: 29 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,27 @@ While this may feel heavy at first, it gives you, the dev, full control over whe
8383

8484
## Data Model
8585

86-
React Charts uses a common and very flexible data model based on arrays of **series** and arrays of **datums**. You can either use the model defaults directly, or use **data accessors** to materialize this structure.
87-
88-
Typical visualization data can come in practically any shape and size. The following examples show data structures that are all reasonably equivalent **at some level** since they each contain an array of **series[]** and **datums[]**. They also show how to parse that data.
86+
React Charts uses a data shape based on **arrays of series and nested arrays of datums in those series**.
87+
88+
```js
89+
// series array
90+
const data = [
91+
{
92+
// individual series
93+
label: 'Purchases',
94+
// datum array
95+
data: [
96+
{
97+
// individual datum
98+
primary: 'Apples', // primary value
99+
secondary: 20, // secondary value
100+
},
101+
],
102+
},
103+
]
104+
```
89105

90-
In the following example, there is no need to use any accessors. The **default** accessors are able to easily understand this format:
106+
Visualization data can come in practically any shape and size, so **memoization of data into this shape is almost always necessary**.
91107

92108
```javascript
93109
function MyChart() {
@@ -96,25 +112,25 @@ function MyChart() {
96112
{
97113
label: 'Series 1',
98114
data: [
99-
{ x: 1, y: 10 },
100-
{ x: 2, y: 10 },
101-
{ x: 3, y: 10 },
115+
{ primary: 1, secondary: 10 },
116+
{ primary: 2, secondary: 10 },
117+
{ primary: 3, secondary: 10 },
102118
],
103119
},
104120
{
105121
label: 'Series 2',
106122
data: [
107-
{ x: 1, y: 10 },
108-
{ x: 2, y: 10 },
109-
{ x: 3, y: 10 },
123+
{ primary: 1, secondary: 10 },
124+
{ primary: 2, secondary: 10 },
125+
{ primary: 3, secondary: 10 },
110126
],
111127
},
112128
{
113129
label: 'Series 3',
114130
data: [
115-
{ x: 1, y: 10 },
116-
{ x: 2, y: 10 },
117-
{ x: 3, y: 10 },
131+
{ primary: 1, secondary: 10 },
132+
{ primary: 2, secondary: 10 },
133+
{ primary: 3, secondary: 10 },
118134
],
119135
},
120136
],
@@ -142,142 +158,6 @@ function MyChart() {
142158
}
143159
```
144160

145-
In the following example, there is no need to use any accessors. The **default** accessors are able to easily understand this format, but **please note** that this format limits you from passing any **meta data** about your series and datums.
146-
147-
```javascript
148-
function MyChart() {
149-
const data = React.useMemo(
150-
() => [
151-
[
152-
[1, 10],
153-
[2, 10],
154-
[3, 10],
155-
],
156-
[
157-
[1, 10],
158-
[2, 10],
159-
[3, 10],
160-
],
161-
[
162-
[1, 10],
163-
[2, 10],
164-
[3, 10],
165-
],
166-
],
167-
[]
168-
)
169-
170-
const axes = React.useMemo(
171-
() => [
172-
{ primary: true, type: 'linear', position: 'bottom' },
173-
{ type: 'linear', position: 'left' },
174-
],
175-
[]
176-
)
177-
178-
return (
179-
<div
180-
style={{
181-
width: '400px',
182-
height: '300px',
183-
}}
184-
>
185-
<Chart data={data} axes={axes} />
186-
</div>
187-
)
188-
}
189-
```
190-
191-
#### Data Accessors
192-
193-
When data isn't in a convenient format for React Charts, **your first instinct will be to transform your data into the above formats**. Don't do that! There is an easier way 🎉 We can use the `Chart` components' **accessor props** to point things in the right direction. **Accessor props** pass the original data and the series/datums you return down the line to form a new data model. See the [`<Chart>` component](#chart) for all available accessors.
194-
195-
In the following example, the data is in a very funky format, but at it's core is the same as the previous examples.
196-
197-
```javascript
198-
function MyChart() {
199-
// Use any data object you want
200-
const originalData = React.useMemo(
201-
() => ({
202-
axis: [1, 2, 3],
203-
lines: [
204-
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
205-
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
206-
{ data: [{ value: 10 }, { value: 10 }, { value: 10 }] },
207-
],
208-
}),
209-
[]
210-
)
211-
212-
// Make data.lines represent the different series
213-
const data = React.useMemo(data => originalData.lines, [originalData])
214-
215-
// Use data.lines[n].data to represent the different datums for each series
216-
const getDatums = React.useCallback(series => series.data, [])
217-
218-
// Use the original data object and the datum index to reference the datum's primary value.
219-
const getPrimary = React.useCallback(
220-
(datum, i, series, seriesIndex, data) => originalData.axis[i],
221-
[]
222-
)
223-
224-
// Use data.lines[n].data[n].value as each datums secondary value
225-
const getSecondary = React.useCallback(datum => datum.value, [])
226-
227-
return (
228-
<div
229-
style={{
230-
width: '400px',
231-
height: '300px',
232-
}}
233-
>
234-
<Chart
235-
data={data}
236-
getSeries={getSeries}
237-
getDatums={getDatums}
238-
getPrimary={getPrimary}
239-
getSecondary={getSecondary}
240-
/>
241-
</div>
242-
)
243-
}
244-
```
245-
246-
#### Series Labels
247-
248-
Multiple series are often useless without labels. By default, React Charts looks for the `label` value on the series object you pass it. If not found, it will simply label your series as `Series [n]`, where `[n]` is the zero-based `index` of the series, plus `1`.
249-
250-
If the default label accessor doesn't suit your needs, then you can use the `<Chart>` component's `getLabel` accessor prop:
251-
252-
```javascript
253-
function MyChart() {
254-
const data = React.useMemo(
255-
() => [
256-
{
257-
specialLabel: 'Hello World!',
258-
data: [
259-
//...
260-
],
261-
},
262-
],
263-
[]
264-
)
265-
266-
const getLabel = React.useCallback(series => series.specialLabel, [])
267-
268-
return (
269-
<div
270-
style={{
271-
width: '400px',
272-
height: '300px',
273-
}}
274-
>
275-
<Chart data={data} getLabel={getLabel} />
276-
</div>
277-
)
278-
}
279-
```
280-
281161
## Axes & Scales
282162

283163
React Charts supports an `axes` prop that handles both the underlying scale and visual rendering. These axes can be combined and configured to plot data in many ways. To date, we have the following scale types available:

0 commit comments

Comments
 (0)