@wix/design-system

## Feature Examples ### Fill - description: Control the chart color by specifying color for each data point. It accepts the following color variables: `A1` (default), `A2`, `A3`, `A4`, `A5`, `A6`.<br /><br /> If data points have different colors, chart will be filled with a linear gradient that is defined from the first color to the last color in the dots list. - example: ```jsx () => { const data = [ { value: 70, label: 'Data point 1', color: 'A1', }, { value: 25, label: 'Data point 2', color: 'A1', }, { value: 50, label: 'Data point 3', color: 'A1', }, { value: 25, label: 'Data point 4', color: 'A6', }, { value: 75, label: 'Data point 5', color: 'A6', }, { value: 70, label: 'Data point 6', color: 'A6', }, ]; const scale = [ { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }, ]; return <RadarChart data={data} scale={scale} />; }; ``` ### Width - description: Control the dimensions of a chart with `width` prop. Changing the width will affect component height as well - it grows in 1:1 ratio.<br /><br /> Minimum width of a chart is 150px. - example: ```jsx () => { const data = [ { value: 50, label: 'Data point 1', color: 'A1', }, { value: 55, label: 'Data point 2', color: 'A1', }, { value: 65, label: 'Data point 3', color: 'A6', }, ]; const scale = [ { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }, ]; return ( <Box> <Box> <RadarChart data={data} scale={scale} /> </Box> <Box> <RadarChart data={data} scale={scale} width={200} /> </Box> </Box> ); }; ``` ### Data points - description: Define from 3 to 10 data points to display in a chart. Available properties for each point:<br/> &emsp;- `value` - use to define a number that represents value in a chart<br/> &emsp;- `label` - use to specify a label that represents value around the chart<br/> &emsp;- `color` - use to specify data point color<br/> &emsp;- `tooltipContent` - use to define a message visible in a tooltip on a data point hover over. - example: ```jsx () => { const threeDataPoints = [ { value: 50, label: 'Data point 1', color: 'A1', }, { value: 55, label: 'Data point 2', color: 'A1', }, { value: 65, label: 'Data point 3', color: 'A6', }, ]; const tenDataPoints = [ { value: 70, label: 'Data point 1', color: 'A1', }, { value: 70, label: 'Data point 2', color: 'A1', }, { value: 40, label: 'Data point 3', color: 'A1', }, { value: 70, label: 'Data point 4', color: 'A1', }, { value: 50, label: 'Data point 5', color: 'A1', }, { value: 30, label: 'Data point 6', color: 'A1', }, { value: 50, label: 'Data point 7', color: 'A6', }, { value: 65, label: 'Data point 8', color: 'A6', }, { value: 80, label: 'Data point 9', color: 'A6', }, { value: 55, label: 'Data point 10', color: 'A6', }, ]; const scale = [ { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }, ]; return ( <Box direction="vertical" align="center"> <Box> <RadarChart data={threeDataPoints} scale={scale} /> </Box> <Box> <RadarChart data={tenDataPoints} scale={scale} /> </Box> </Box> ); }; ``` ### Label distance - description: Control value label distance from a chart with `labelDistance` prop. It support two values:<br/> &emsp;- `medium` - use it to increase the distance for better visual balance in larger charts<br/> &emsp;- `small` (default) - use in all common cases - example: ```jsx () => { const dataForSmallLabelDistance = [ { value: 70, label: 'Small', color: 'A1', }, { value: 25, label: 'Small', color: 'A1', }, { value: 50, label: 'Small', color: 'A1', }, { value: 25, label: 'Small', color: 'A6', }, { value: 75, label: 'Small', color: 'A6', }, { value: 70, label: 'Small', color: 'A6', }, ]; const dataForMediumLabelDistance = [ { value: 70, label: 'Medium', color: 'A1', }, { value: 25, label: 'Medium', color: 'A1', }, { value: 50, label: 'Medium', color: 'A1', }, { value: 25, label: 'Medium', color: 'A6', }, { value: 75, label: 'Medium', color: 'A6', }, { value: 70, label: 'Medium', color: 'A6', }, ]; const scale = [ { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }, ]; return ( <Box> <Box width="50%" align="center" verticalAlign="middle"> <RadarChart data={dataForSmallLabelDistance} scale={scale} labelDistance={24} /> </Box> <Box width="50%" align="center" verticalAlign="middle"> <RadarChart data={dataForMediumLabelDistance} scale={scale} labelDistance={48} /> </Box> </Box> ); }; ``` ### Scale - description: Define any number of scale circles in the chart with a `scale` array. - example: ```jsx () => { const data = [ { value: 70, label: 'Label', color: 'A1', }, { value: 25, label: 'Label', color: 'A1', }, { value: 50, label: 'Label', color: 'A1', }, { value: 25, label: 'Label', color: 'A6', }, { value: 75, label: 'Label', color: 'A6', }, { value: 70, label: 'Label', color: 'A6', }, ]; const scale = [ { value: 20, label: '20%' }, { value: 40, label: '40%' }, { value: 60, label: '60%' }, { value: 80, label: '80%' }, { value: 100, label: '100%' }, ]; return ( <Box> <Box width="50%" align="center" verticalAlign="middle"> <RadarChart data={data} /> </Box> <Box width="50%" align="center" verticalAlign="middle"> <RadarChart data={data} scale={scale} /> </Box> </Box> ); }; ``` ### Disabled - description: Disable all chart interactions with `disabled` prop. Use this as an empty state / content placeholder when there’s no data yet. - example: ```jsx () => { const data = [ { value: 70, label: 'Label', }, { value: 25, label: 'Label', }, { value: 50, label: 'Label', }, { value: 25, label: 'Label', }, { value: 75, label: 'Label', }, { value: 70, label: 'Label', }, ]; const scale = [ { value: 25, label: '25%' }, { value: 50, label: '50%' }, { value: 75, label: '75%' }, { value: 100, label: '100%' }, ]; return <RadarChart data={data} scale={scale} disabled />; }; ``` ## Common Use Case Examples ### Empty state - description: Use radar char in a disabled state as an empty state when there’s not enough data to create a chart yet. It will help to let users know upfront a possible benefit of analytics you’re offering. - example: ```jsx () => { const data = [ { value: 80, label: 'Unique Visitors' }, { value: 80, label: 'Avg. Session Duration' }, { value: 80, label: 'Bounce Rate' }, { value: 80, label: '% Returning Visitors' }, { value: 80, label: '% Organic Search' }, { value: 80, label: '% Social' }, ]; const scale = [ { value: 20, label: '20%' }, { value: 40, label: '40%' }, { value: 60, label: '60%' }, { value: 80, label: '80%' }, { value: 100, label: '100%' }, ]; const [isTooltipVisible, setIsTooltipVisible] = React.useState(false); return ( <Card> <Card.Header title={ <Box> <Text weight="bold">Competition Radar</Text> </Box> } subtitle={ <Text size="tiny"> This is visual representation of your benchmarks. The more coverage you have, the better you're doing compared to others. </Text> } /> <Card.Divider /> <div style={{ position: 'relative', cursor: 'pointer' }} onMouseEnter={() => setIsTooltipVisible(true)} onMouseLeave={() => setIsTooltipVisible(false)} > <Box align="center" verticalAlign="middle"> <RadarChart data={data} scale={scale} width={200} disabled /> </Box> {isTooltipVisible && ( <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.8)', textAlign: 'center', }} > <Box width={400} direction="vertical" align="center"> <Text size="small"> Your site doesn't have enough data to show benchmarks </Text> </Box> </div> )} </div> <Box direction="vertical" padding="0 SP5 SP5 SP5"> <Divider /> <Box direction="vertical" height={94} align="center" padding="SP5"> <Box margin="0 SP3" width={228} textAlign="center"> <Text size="small"> Need help driving more traffic to your site </Text> </Box> <Box marginTop="SP3"> <Button size="tiny" priority="secondary"> Hire a Professional </Button> </Box> </Box> </Box> </Card> ); }; ```