victory-chart 30.6.1 → 31.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +29 -31
- package/dist/victory-chart.js +1899 -1643
- package/dist/victory-chart.min.js +1 -1
- package/es/helper-methods.js +17 -29
- package/es/victory-chart.js +14 -15
- package/lib/helper-methods.js +17 -30
- package/lib/victory-chart.js +17 -15
- package/package.json +5 -5
- package/src/helper-methods.js +81 -73
- package/src/victory-chart.js +48 -34
package/README.md
CHANGED
|
@@ -6,7 +6,6 @@ View these docs at https://formidable.com/open-source/victory/docs/victory-chart
|
|
|
6
6
|
|
|
7
7
|
`VictoryChart` is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes.
|
|
8
8
|
|
|
9
|
-
|
|
10
9
|
```playground
|
|
11
10
|
<div>
|
|
12
11
|
<VictoryChart
|
|
@@ -51,7 +50,6 @@ animate={{
|
|
|
51
50
|
|
|
52
51
|
**Note: polar charts must use `VictoryPolarAxis` rather than `VictoryAxis`**
|
|
53
52
|
|
|
54
|
-
|
|
55
53
|
### containerComponent
|
|
56
54
|
|
|
57
55
|
`type: element`
|
|
@@ -92,7 +90,7 @@ domainPadding={{x: [10, -10], y: 5}}
|
|
|
92
90
|
|
|
93
91
|
The `endAngle` props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with `startAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
|
|
94
92
|
|
|
95
|
-
|
|
93
|
+
_default:_ `endAngle={360}`
|
|
96
94
|
|
|
97
95
|
```playground
|
|
98
96
|
<div>
|
|
@@ -183,6 +181,7 @@ See the [Events Guide][] for more information on defining events.
|
|
|
183
181
|
</VictoryStack>
|
|
184
182
|
</VictoryChart>
|
|
185
183
|
```
|
|
184
|
+
|
|
186
185
|
### externalEventMutations
|
|
187
186
|
|
|
188
187
|
`type: array[object]`
|
|
@@ -195,7 +194,7 @@ See the [Events Guide][] for more information on defining events.
|
|
|
195
194
|
|
|
196
195
|
`VictoryChart` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#groupcomponent)
|
|
197
196
|
|
|
198
|
-
|
|
197
|
+
_default:_ `<g/>`
|
|
199
198
|
|
|
200
199
|
```jsx
|
|
201
200
|
groupComponent={<g transform="translate(10, 10)" />}
|
|
@@ -209,7 +208,7 @@ groupComponent={<g transform="translate(10, 10)" />}
|
|
|
209
208
|
|
|
210
209
|
**note: `VictoryChart` controls the `height` prop of its children.**
|
|
211
210
|
|
|
212
|
-
|
|
211
|
+
_default (provided by default theme):_ `height={300}`
|
|
213
212
|
|
|
214
213
|
```jsx
|
|
215
214
|
height={400}
|
|
@@ -235,7 +234,6 @@ When the `innerRadius` prop is set, polar charts will be hollow rather than circ
|
|
|
235
234
|
|
|
236
235
|
`VictoryChart` uses the standard `maxDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#maxDomain)
|
|
237
236
|
|
|
238
|
-
|
|
239
237
|
```playground
|
|
240
238
|
<VictoryChart maxDomain={{ y: 4.5 }}>
|
|
241
239
|
<VictoryLine data={sampleData}/>
|
|
@@ -248,7 +246,6 @@ When the `innerRadius` prop is set, polar charts will be hollow rather than circ
|
|
|
248
246
|
|
|
249
247
|
`VictoryChart` uses the standard `minDomain` prop. [Read about it in detail](https://formidable.com/open-source/victory/docs/common-props#minDomain)
|
|
250
248
|
|
|
251
|
-
|
|
252
249
|
```playground
|
|
253
250
|
<VictoryChart minDomain={{ y: 0 }}>
|
|
254
251
|
<VictoryLine data={sampleData}/>
|
|
@@ -263,7 +260,7 @@ When the `innerRadius` prop is set, polar charts will be hollow rather than circ
|
|
|
263
260
|
|
|
264
261
|
**note: `VictoryChart` controls the `padding` prop of its children.**
|
|
265
262
|
|
|
266
|
-
|
|
263
|
+
_default (provided by default theme):_ `padding={50}`
|
|
267
264
|
|
|
268
265
|
```jsx
|
|
269
266
|
padding={{ top: 20, bottom: 60 }}
|
|
@@ -276,8 +273,9 @@ padding={{ top: 20, bottom: 60 }}
|
|
|
276
273
|
`VictoryChart` uses the standard `polar` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#polar)
|
|
277
274
|
|
|
278
275
|
**Notes:**
|
|
279
|
-
|
|
280
|
-
|
|
276
|
+
|
|
277
|
+
- `VictoryChart` controls the `polar` prop of its children
|
|
278
|
+
- Polar charts should use `VictoryPolarAxis` rather than `VictoryAxis`
|
|
281
279
|
|
|
282
280
|
```playground
|
|
283
281
|
<div>
|
|
@@ -313,7 +311,6 @@ padding={{ top: 20, bottom: 60 }}
|
|
|
313
311
|
|
|
314
312
|
[Read about the `range` prop in detail](https://formidable.com/open-source/victory/docs/common-props/#range)
|
|
315
313
|
|
|
316
|
-
|
|
317
314
|
### scale
|
|
318
315
|
|
|
319
316
|
`type: scale || { x: scale, y: scale }`
|
|
@@ -323,7 +320,7 @@ Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` fun
|
|
|
323
320
|
|
|
324
321
|
**note: `VictoryChart` controls the `scale` prop of its children.**
|
|
325
322
|
|
|
326
|
-
|
|
323
|
+
_default:_ `scale="linear"`
|
|
327
324
|
|
|
328
325
|
```jsx
|
|
329
326
|
scale={{x: "linear", y: "log"}}
|
|
@@ -347,7 +344,7 @@ scale={{x: "linear", y: "log"}}
|
|
|
347
344
|
|
|
348
345
|
**note:** `VictoryChart` sets `standalone={false} for all of its children.
|
|
349
346
|
|
|
350
|
-
|
|
347
|
+
_default:_ `standalone={true}`
|
|
351
348
|
|
|
352
349
|
```playground
|
|
353
350
|
<svg width={300} height={300}>
|
|
@@ -358,13 +355,14 @@ scale={{x: "linear", y: "log"}}
|
|
|
358
355
|
/>
|
|
359
356
|
</svg>
|
|
360
357
|
```
|
|
358
|
+
|
|
361
359
|
### startAngle
|
|
362
360
|
|
|
363
361
|
`type: number`
|
|
364
362
|
|
|
365
363
|
The `startAngle` props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with `endAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.
|
|
366
364
|
|
|
367
|
-
|
|
365
|
+
_default:_ `startAngle={0}`
|
|
368
366
|
|
|
369
367
|
```playground
|
|
370
368
|
<div>
|
|
@@ -417,7 +415,7 @@ The `startAngle` props defines the overall start angle of a polar chart in degre
|
|
|
417
415
|
|
|
418
416
|
`VictoryChart` uses the standard `style` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props/#style)
|
|
419
417
|
|
|
420
|
-
|
|
418
|
+
_default (provided by default theme):_ See [grayscale theme][] for more detail
|
|
421
419
|
|
|
422
420
|
```playground
|
|
423
421
|
<VictoryChart
|
|
@@ -437,7 +435,7 @@ The `startAngle` props defines the overall start angle of a polar chart in degre
|
|
|
437
435
|
|
|
438
436
|
See the [Themes Guide][] for information about creating custom themes.
|
|
439
437
|
|
|
440
|
-
|
|
438
|
+
_default:_ `theme={VictoryTheme.grayscale}`
|
|
441
439
|
|
|
442
440
|
```jsx
|
|
443
441
|
theme={VictoryTheme.material}
|
|
@@ -451,24 +449,24 @@ theme={VictoryTheme.material}
|
|
|
451
449
|
|
|
452
450
|
**note: `VictoryChart` controls the `width` prop of its children.**
|
|
453
451
|
|
|
454
|
-
|
|
452
|
+
_default (provided by default theme):_ `width={450}`
|
|
455
453
|
|
|
456
454
|
```jsx
|
|
457
455
|
width={400}
|
|
458
456
|
```
|
|
459
457
|
|
|
460
|
-
[
|
|
461
|
-
[
|
|
462
|
-
[
|
|
463
|
-
[
|
|
464
|
-
[
|
|
465
|
-
[
|
|
466
|
-
[
|
|
467
|
-
[
|
|
468
|
-
[
|
|
469
|
-
[
|
|
470
|
-
[
|
|
458
|
+
[victoryarea]: https://formidable.com/open-source/victory/docs/victory-area
|
|
459
|
+
[victoryaxis]: https://formidable.com/open-source/victory/docs/victory-axis
|
|
460
|
+
[victorypolaraxis]: https://formidable.com/open-source/victory/docs/victory-polar-axis
|
|
461
|
+
[victorybar]: https://formidable.com/open-source/victory/docs/victory-bar
|
|
462
|
+
[victorycandlestick]: https://formidable.com/open-source/victory/docs/victory-candlestick
|
|
463
|
+
[victoryerrorbar]: https://formidable.com/open-source/victory/docs/victory-errorbar
|
|
464
|
+
[victorygroup]: https://formidable.com/open-source/victory/docs/victory-group
|
|
465
|
+
[victoryline]: https://formidable.com/open-source/victory/docs/victory-line
|
|
466
|
+
[victoryscatter]: https://formidable.com/open-source/victory/docs/victory-scatter
|
|
467
|
+
[victorystack]: https://formidable.com/open-source/victory/docs/victory-stack
|
|
468
|
+
[victoryvoronoi]: https://formidable.com/open-source/victory/docs/victory-voronoi
|
|
471
469
|
[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js
|
|
472
|
-
[
|
|
473
|
-
[
|
|
474
|
-
[
|
|
470
|
+
[animations guide]: https://formidable.com/open-source/victory/guides/animations
|
|
471
|
+
[events guide]: https://formidable.com/open-source/victory/guides/events
|
|
472
|
+
[themes guide]: https://formidable.com/open-source/victory/guides/themes
|