victory-stack 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 +27 -30
- package/dist/victory-stack.js +1764 -1516
- package/dist/victory-stack.min.js +1 -1
- package/es/helper-methods.js +1 -4
- package/es/victory-stack.js +13 -14
- package/lib/helper-methods.js +3 -4
- package/lib/victory-stack.js +16 -14
- package/package.json +3 -2
- package/src/helper-methods.js +49 -40
- package/src/victory-stack.js +51 -32
package/README.md
CHANGED
|
@@ -62,14 +62,13 @@ categories={["dogs", "cats", "mice"]}
|
|
|
62
62
|
|
|
63
63
|
`VictoryStack` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.
|
|
64
64
|
|
|
65
|
-
|
|
66
65
|
### colorScale
|
|
67
66
|
|
|
68
67
|
`type: array[string]`
|
|
69
68
|
|
|
70
69
|
The `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryStack`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: "grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.
|
|
71
70
|
|
|
72
|
-
|
|
71
|
+
_default (provided by default theme):_ See [grayscale theme][] for more detail
|
|
73
72
|
|
|
74
73
|
```playground
|
|
75
74
|
<VictoryStack
|
|
@@ -87,7 +86,6 @@ The `colorScale` prop is an optional prop that defines a color scale to be appli
|
|
|
87
86
|
</VictoryStack>
|
|
88
87
|
```
|
|
89
88
|
|
|
90
|
-
|
|
91
89
|
### containerComponent
|
|
92
90
|
|
|
93
91
|
`type: element`
|
|
@@ -97,6 +95,7 @@ The `colorScale` prop is an optional prop that defines a color scale to be appli
|
|
|
97
95
|
```jsx
|
|
98
96
|
containerComponent={<VictoryVoronoiContainer/>}
|
|
99
97
|
```
|
|
98
|
+
|
|
100
99
|
### domain
|
|
101
100
|
|
|
102
101
|
`type: array[low, high] || { x: [low, high], y: [low, high] }`
|
|
@@ -128,7 +127,7 @@ domainPadding={{x: [10, -10], y: 5}}
|
|
|
128
127
|
`VictoryStack` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](https://formidable.com/open-source/victory/docs/common-props#eventkey)
|
|
129
128
|
|
|
130
129
|
```jsx
|
|
131
|
-
eventKey="x"
|
|
130
|
+
eventKey = "x";
|
|
132
131
|
```
|
|
133
132
|
|
|
134
133
|
### events
|
|
@@ -186,18 +185,19 @@ See the [Events Guide][] for more information on defining events.
|
|
|
186
185
|
|
|
187
186
|
`VictoryStack` uses the standard `groupComponent` prop. [Read about it in detail here](https://formidable.com/open-source/victory/docs/common-props#groupcomponent)
|
|
188
187
|
|
|
189
|
-
|
|
188
|
+
_default:_ `<g/>`
|
|
190
189
|
|
|
191
190
|
```jsx
|
|
192
191
|
groupComponent={<g transform="translate(10, 10)" />}
|
|
193
192
|
```
|
|
193
|
+
|
|
194
194
|
### height
|
|
195
195
|
|
|
196
196
|
`type: number`
|
|
197
197
|
|
|
198
198
|
`VictoryStack` uses the standard `height` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#height)
|
|
199
199
|
|
|
200
|
-
|
|
200
|
+
_default (provided by default theme):_ `height={300}`
|
|
201
201
|
|
|
202
202
|
```jsx
|
|
203
203
|
height={400}
|
|
@@ -215,7 +215,7 @@ The `horizontal` prop determines whether the bars of any `VictoryBar` children s
|
|
|
215
215
|
|
|
216
216
|
The `labelComponent` prop takes a component instance which will be used to render labels for each stack. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.
|
|
217
217
|
|
|
218
|
-
|
|
218
|
+
_default:_ `<VictoryLabel/>`
|
|
219
219
|
|
|
220
220
|
```jsx
|
|
221
221
|
labelComponent={<VictoryLabel dy={20}/>}
|
|
@@ -250,7 +250,7 @@ labels={["spring", "summer", "fall", "winter"]}`, `labels={(datum) => datum.titl
|
|
|
250
250
|
The `name` prop is used to reference a component instance when defining shared events.
|
|
251
251
|
|
|
252
252
|
```jsx
|
|
253
|
-
name="series-1"
|
|
253
|
+
name = "series-1";
|
|
254
254
|
```
|
|
255
255
|
|
|
256
256
|
### origin
|
|
@@ -261,14 +261,13 @@ name="series-1"
|
|
|
261
261
|
|
|
262
262
|
[Read about the `origin` prop in detailhttps://formidable.com/open-source/victory](/docs/common-props#origin)
|
|
263
263
|
|
|
264
|
-
|
|
265
264
|
### padding
|
|
266
265
|
|
|
267
266
|
`type: number || { top: number, bottom: number, left: number, right: number }`
|
|
268
267
|
|
|
269
268
|
`VictoryStack` uses the standard `padding` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#padding)
|
|
270
269
|
|
|
271
|
-
|
|
270
|
+
_default (provided by default theme):_ `padding={50}`
|
|
272
271
|
|
|
273
272
|
```jsx
|
|
274
273
|
padding={{ top: 20, bottom: 60 }}
|
|
@@ -297,7 +296,7 @@ Options for scale include "linear", "time", "log", "sqrt" and the `d3-scale` fun
|
|
|
297
296
|
|
|
298
297
|
**note: `VictoryStack` controls the `scale` prop of its children.**
|
|
299
298
|
|
|
300
|
-
|
|
299
|
+
_default:_ `scale="linear"`
|
|
301
300
|
|
|
302
301
|
```jsx
|
|
303
302
|
scale={{x: "linear", y: "log"}}
|
|
@@ -321,7 +320,7 @@ scale={{x: "linear", y: "log"}}
|
|
|
321
320
|
|
|
322
321
|
**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`
|
|
323
322
|
|
|
324
|
-
|
|
323
|
+
_default:_ `standalone={true}`
|
|
325
324
|
|
|
326
325
|
### style
|
|
327
326
|
|
|
@@ -331,7 +330,7 @@ scale={{x: "linear", y: "log"}}
|
|
|
331
330
|
|
|
332
331
|
Styles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.
|
|
333
332
|
|
|
334
|
-
|
|
333
|
+
_default (provided by default theme):_ See [grayscale theme][] for more detail
|
|
335
334
|
|
|
336
335
|
```playground
|
|
337
336
|
<VictoryStack
|
|
@@ -360,7 +359,7 @@ Styles on children of `VictoryGroup` will override styles set on the `VictoryGro
|
|
|
360
359
|
|
|
361
360
|
See the [Themes Guide][] for information about creating custom themes.
|
|
362
361
|
|
|
363
|
-
|
|
362
|
+
_default:_ `theme={VictoryTheme.grayscale}`
|
|
364
363
|
|
|
365
364
|
```jsx
|
|
366
365
|
theme={VictoryTheme.material}
|
|
@@ -372,7 +371,7 @@ theme={VictoryTheme.material}
|
|
|
372
371
|
|
|
373
372
|
`VictoryStack` uses the standard `width` prop. [Read about it here](https://formidable.com/open-source/victory/docs/common-props#width)
|
|
374
373
|
|
|
375
|
-
|
|
374
|
+
_default (provided by default theme):_ `width={450}`
|
|
376
375
|
|
|
377
376
|
```jsx
|
|
378
377
|
width={400}
|
|
@@ -384,19 +383,17 @@ width={400}
|
|
|
384
383
|
|
|
385
384
|
The `xOffset` prop is used for grouping stacks of bars. This prop will be set by the `VictoryGroup` component wrapper, or can be set manually.
|
|
386
385
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
[
|
|
390
|
-
[Events Guide]: https://formidable.com/open-source/victory/guides/events
|
|
391
|
-
[Themes Guide]: https://formidable.com/open-source/victory/guides/themes
|
|
386
|
+
[animations guide]: https://formidable.com/open-source/victory/guides/animations
|
|
387
|
+
[events guide]: https://formidable.com/open-source/victory/guides/events
|
|
388
|
+
[themes guide]: https://formidable.com/open-source/victory/guides/themes
|
|
392
389
|
[grayscale theme]: https://github.com/FormidableLabs/victory-core/blob/master/src/victory-theme/grayscale.js
|
|
393
|
-
[
|
|
394
|
-
[
|
|
395
|
-
[
|
|
396
|
-
[
|
|
397
|
-
[
|
|
398
|
-
[
|
|
399
|
-
[
|
|
400
|
-
[
|
|
401
|
-
[
|
|
402
|
-
[
|
|
390
|
+
[victoryarea]: https://formidable.com/open-source/victory/docs/victory-area
|
|
391
|
+
[victorybar]: https://formidable.com/open-source/victory/docs/victory-bar
|
|
392
|
+
[victorycandlestick]: https://formidable.com/open-source/victory/docs/victory-candlestick
|
|
393
|
+
[victoryerrorbar]: https://formidable.com/open-source/victory/docs/victory-errorbar
|
|
394
|
+
[victorygroup]: https://formidable.com/open-source/victory/docs/victory-group
|
|
395
|
+
[victoryline]: https://formidable.com/open-source/victory/docs/victory-line
|
|
396
|
+
[victoryscatter]: https://formidable.com/open-source/victory/docs/victory-scatter
|
|
397
|
+
[victorystack]: https://formidable.com/open-source/victory/docs/victory-stack
|
|
398
|
+
[victoryvoronoi]: https://formidable.com/open-source/victory/docs/victory-voronoi
|
|
399
|
+
[victorylabel]: https://formidable.com/open-source/victory/docs/victory-label
|