victory-cursor-container 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 +11 -11
- package/dist/victory-cursor-container.js +1046 -805
- package/dist/victory-cursor-container.min.js +1 -1
- package/package.json +2 -2
- package/src/cursor-helpers.js +20 -13
- package/src/victory-cursor-container.js +153 -137
package/README.md
CHANGED
|
@@ -50,7 +50,7 @@ In order to customize, add styling to a LineSegment supplied to the cursorCompon
|
|
|
50
50
|
/>
|
|
51
51
|
```
|
|
52
52
|
|
|
53
|
-
|
|
53
|
+
_default:_ `cursorComponent={<Line/>}`
|
|
54
54
|
|
|
55
55
|
### cursorDimension
|
|
56
56
|
|
|
@@ -61,7 +61,7 @@ When the `cursorDimension` prop is set, the cursor will be a line to inspect the
|
|
|
61
61
|
For example, if you would like to inspect the time of time-series data, set `dimension={"x"}`;
|
|
62
62
|
the cursor will then be a vertical line that will inspect the time value of the current mouse position.
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
_example:_ `cursorDimension="x"`
|
|
65
65
|
|
|
66
66
|
```playground
|
|
67
67
|
<VictoryScatter
|
|
@@ -81,7 +81,7 @@ the cursor will then be a vertical line that will inspect the time value of the
|
|
|
81
81
|
The `cursorLabel` prop defines the label that will appear next to the cursor.
|
|
82
82
|
A label will only appear if `cursorLabel` is set. This prop should be given as a function of a point (an Object with `x` and `y` properties).
|
|
83
83
|
|
|
84
|
-
|
|
84
|
+
_example:_ `cursorLabel={(point) => point.x}`
|
|
85
85
|
|
|
86
86
|
### cursorLabelComponent
|
|
87
87
|
|
|
@@ -89,7 +89,7 @@ A label will only appear if `cursorLabel` is set. This prop should be given as a
|
|
|
89
89
|
|
|
90
90
|
The `cursorLabelComponent` prop takes a component instance which will be used to render a label for the cursor. The new element created from the passed `cursorLabelComponent` will be supplied with the following props: `x`, `y`, `active`, `text`. If `cursorLabelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
_default:_ `cursorLabelComponent={<VictoryLabel/>}`
|
|
93
93
|
|
|
94
94
|
### cursorLabelOffset
|
|
95
95
|
|
|
@@ -98,7 +98,7 @@ The `cursorLabelComponent` prop takes a component instance which will be used to
|
|
|
98
98
|
The `cursorLabelOffset` prop determines the pixel offset of the cursor label from the cursor point.
|
|
99
99
|
This prop should be an Object with `x` and `y` properties, or a number to be used for both dimensions.
|
|
100
100
|
|
|
101
|
-
|
|
101
|
+
_default:_ `cursorLabelOffset={{ x: 5, y: -10 }}`
|
|
102
102
|
|
|
103
103
|
### defaultCursorValue
|
|
104
104
|
|
|
@@ -107,7 +107,7 @@ This prop should be an Object with `x` and `y` properties, or a number to be use
|
|
|
107
107
|
Whenever the mouse is not over the chart, the cursor will not be displayed.
|
|
108
108
|
If instead you would like to keep it displayed, use the `defaultCursorValue` prop to set the default value. The prop should be a point (an Object with `x` and `y` properties) for 2-dimensional cursors, or a number for 1-dimensional cursors.
|
|
109
109
|
|
|
110
|
-
|
|
110
|
+
_examples:_ `defaultCursorValue={{x: 1, y: 1}}`, `defaultCursorValue={0}`
|
|
111
111
|
|
|
112
112
|
### disable
|
|
113
113
|
|
|
@@ -121,9 +121,9 @@ When the `disable` prop is set to `true`, `VictoryCursorContainer` events will n
|
|
|
121
121
|
|
|
122
122
|
If provided, the `onChange` function will be called every time the cursor value changes. `onCursorChange` is called with `value` (the updated cursor value) and `props` (the props used by `VictoryCursorContainer`). A common use for `onChange` is to save the cursor value to state and use it in another part of the view.
|
|
123
123
|
|
|
124
|
-
|
|
124
|
+
_example:_ `onChange={(value, props) => this.setState({cursorValue: value})}`
|
|
125
125
|
|
|
126
|
-
[
|
|
127
|
-
[
|
|
128
|
-
[
|
|
129
|
-
[
|
|
126
|
+
[victoryvoronoicontainer]: https://formidable.com/open-source/victory/docs/victory-voronoi-container
|
|
127
|
+
[victorycontainer]: https://formidable.com/open-source/victory/docs/victory-container
|
|
128
|
+
[victorylabel]: https://formidable.com/open-source/victory/docs/victory-label
|
|
129
|
+
[line]: https://formidable.com/open-source/victory/docs/victory-primitives#line
|