Name: victory-sunburst
Owner: Formidable
Description: Victory component for partition / sunburst layout
Created: 2015-10-23 16:53:47.0
Updated: 2017-11-30 19:41:00.0
Pushed: 2017-08-25 17:34:16.0
Homepage: null
Size: 3011
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
VictorySunburst
draws an SVG sunburst chart with React and D3. Styles and data can be customized by passing in your own values as properties to the component.
Projects using Victory should also depend on React and prop-types.
The plain component has baked-in sample data and defaults, so rendering the sunburst with no custom properties, like so:
torySunburst />
Will look like this:
All props are optional. They can be omitted and the component will still render with sample data.
The following props are supported:
The animate
prop specifies props for VictoryAnimation and VictoryTransition to use. The animate prop may be used to specify the duration, delay and easing of an animation as well as the behavior of onEnter
and onExit
and onLoad
transitions. Each Victory component defines its own default transitions, but these may be modified, or overwritten with the animate
prop.
example:
imate={{
duration: 2000,
onLoad: { duration: 1000 },
onEnter: {
duration: 500,
before: () => ({ y: 0 })
}
The colorScale prop defines a color scale to be applied to each slice of VictorySunburst. 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”. VictorySunburst will assign to each slice by index, unless they are explicitly specified in the data object. Colors will repeat when there are more slices than colors in the provided colorScale.
default: colorScale="grayscale"
The containerComponent
prop takes a component instance which will be used to create a container element for standalone legends. The new element created from the passed containerComponent
will be provided with the following props: height
, width
, children
(the legend itself) and style
. If a containerComponent
is not provided, the default VictoryContainer
component will be used. VictoryContainer
supports title
and desc
props, which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. These props may be set by passing them directly to the supplied component. By default, VictoryContainer
renders a responsive svg
using the viewBox
attribute. To render a static container, set responsive={false}
directly on the instance of VictoryContainer
supplied via the containerComponent
prop. VictoryContainer
also renders a Portal
element that may be used in conjunction with [VictoryPortal] to force components to render above other children.
example: containerComponent={<VictoryContainer responsive={false} title="Sunburst Chart"/>}
default: containerComponent={<VictoryContainer/>}
An object with nested name
, children
, and size
, properties as shown in the default data structure below. Note that only leaf nodes have size
.
default:
ta={{
name: "A",
children: [
{ name: "A1", size: 5 },
{
name: "A2",
children: [
{ name: "A2a", size: 4 },
{
name: "A2b",
children: [
{ name: "A2b1", size: 4 },
{ name: "A2b2", size: 4 }
]
}
]
},
{
name: "A3",
children: [
{ name: "A3a", size: 3 },
{ name: "A3b", size: 5 }
]
}
]
The dataComponent
prop takes a component instance which will be responsible for rendering a data element used to associate a symbol or color with each data series. If a dataComponent
is not provided, VictorySunburst
will use its default Slice component.
examples: dataComponent={<Slice events={{ onClick: () => console.log("wow") }}/> }
, dataComponent={<MyCustomSlice/>}
default: <Slice/>
A boolean for toggling the display of the sunburst root node.
default: false
The events
prop takes an array of event objects. Event objects are composed of a target
, an eventKey
, and eventHandlers
. Targets may be any valid style namespace for a given component, so “data” and “labels” are valid targets for this component. eventKey
may be given as a single value, or as an array of values to specify individual targets. If eventKey
is not specified, the given eventHandlers
will be attached to all elements of the specified target
type. The eventHandlers
object should be given as an object whose keys are standard event names (i.e. onClick
) and whose values are event callbacks. The return value of an event handler is used to modify elements. The return value should be given as an object or an array of objects with optional target
and eventKey
keys for specifying the element(s) to be modified, and a mutation
key whose value is a function. The target
and eventKey
keys will default to those corresponding to the element the event handler was attached to. The mutation
function will be called with the calculated props for each element that should be modified (i.e. a slice label), and the object returned from the mutation function will override the props of that element via object assignment.
example:
ents={[{
target: "data",
eventKey: [0, 2, 4],
eventHandlers: {
onClick: () => {
return [
{
target: "labels",
mutation: () => {
return { active: true };
},
callback: () => {
console.log("I happen after setState");
}
}
];
}
}
}
The eventKey
prop is used to assign eventKeys to data. By default, the eventKey of each datum will be equal to its index in the data array. eventKey
may also be defined directly on each data object.
The groupComponent
prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a <g>
tag.
default: groupComponent={<g/>}
The labelComponent
prop takes a component instance which will be used to render labels for each slice. 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 VictoryTooltip will be created with the props described above.
examples: labelComponent={<VictoryTooltip dy={20}/>}
, labelComponent={<MyCustomTooltip/>}
default: <VictoryTooltip/>
The labels
prop defines the labels that will appear for each slice. This prop should be given as an array or as a function of data. Label may also be specified on each data object.
examples: labels="Series 1"
, labels={(datum) => datum.y}
default: labels={(datum) => datum.size}
The name
prop is used to reference a component instance when defining shared events.
A number in radians used to filter out nodes too small to see. Nodes smaller than minRadians
aren't displayed.
default: 0.01
The padding
prop specifies the amount of padding in pixels between the edge of the legend and any rendered child components. This prop can be given as a number or as an object with padding specified for top
, bottom
, left
and right
. As with width
and height
, the absolute padding will depend on whether the component is rendered in a responsive container. When a component is nested within VictorySunburst
, setting padding
on the child component will have no effect.
examples: padding={{ top: 20, bottom: 60 }}
, padding={40}
The sharedEvents
prop is used to coordinate events between Victory components using VictorySharedEvents
. This prop should not be set manually.
A boolean or function to indicate how data should be sorted. For basic sorting, sortData={true}
defaults to use a compare function of (a, b) => { return b.value - a.value; }
. A custom compare function can be supplied as well.
examples: sortData={true}
, sortData={(a, b) => { return a.value - b.value; }}
default: sortData={false}
The standalone
props specifies whether the component should be rendered in an independent <svg>
element or in a <g>
tag. This prop defaults to true, and renders an <svg>
.
default: standalone={true}
The style
prop defines the style of the component. The style prop should be given as an object with styles defined for data
, labels
and parent
. Any valid <svg>
styles are supported, but width
, height
, and padding
should be specified via props as they determine relative layout for components in VictorySunburst
.
example:
yle={{
data: { fill: "tomato", opacity: 0.7 },
labels: { fontSize: 12 },
parent: { border: "1px solid #ccc" }
note: When a component is rendered as a child of another Victory component, or within a custom <svg>
element with standalone={false}
parent styles will be applied to the enclosing <g>
tag. Many styles that can be applied to a parent <svg>
will not be expressed when applied to a <g>
.
note: custom angle
and verticalAnchor
properties maybe included in labels styles.
default:
yle={{
data: { cursor: "pointer", stroke: "white" },
labels: { fill: "white", textAnchor: "middle", verticalAnchor: "middle" }
The sumBy
prop takes a string that defines whether sunburst slices are drawn based on node size or count. When sumBy
is “size”, sunburst slices will be drawn based on subtree nodes' size
. When sumBy
is “count”, sunburst slices will be drawn based on subtree node count.
default: sumBy="size"
The theme
prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in theme
may be overridden by props specified on the component instance. By default, components use a grayscale theme. Read more about themes here.
default: theme={VictoryTheme.grayscale}
The width
and height
props define the width and height of the sunburst in pixels. These props may be given as positive numbers or functions of data.
default: width={400}
, height={400}
The x
and y
props define the coordinates to use as a basis for positioning the sunburst element.
default: x={0}
, y={0}
To make it easier to manage issues across all of Victory, we have disabled issues for this repo. Please open issues in the main victory repo instead. You can track our progress on issues here
n the demo app server
m start
en the demo app
en http://localhost:3000
n tests
m test
For more on the development environment, see DEVELOPMENT in the project builder archetype.
Please review our Code of Conduct before contributing.
For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.
This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!
Caveats git installs using npm 2 may fail in postinstall. If you are consuming Victory via git installs please use npm >=3.0.0