Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
@data-ui/radial-chart
Advanced tools
A package for radial-axis visualizations https://williaster.github.io/data-ui
demo at williaster.github.io/data-ui
This package exports declarative react <RadialChart />
s implemented with
@vx which can be used to render both donut and pie
charts depending on props. As demonstrated in the demo, in combination with
@vx/legend and
@vx/scale
these can be used to create re-usable radial charts.
See the demo at williaster.github.io/data-ui for more example outputs.
import { scaleOrdinal } from '@vx/scale';
import { LegendOrdinal } from '@vx/legend';
import { color as colors } from '@data-ui/theme';
import { RadialChart, ArcSeries, ArcLabel } from '@data-ui/radial-chart';
const colorScale = scaleOrdinal({ range: colors.categories });
const data = [{ label: 'a', value: 200 }, { label: 'c', value: 150 }, { label: 'c', value: 21 }];
export default () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<RadialChart
ariaLabel="This is a radial-chart chart of..."
width={width}
height={height}
margin={{ top, right, bottom, left }}
renderTooltip={({ event, datum, data, fraction }) => (
<div>
<strong>{datum.label}</strong>
{datum.value} ({(fraction * 100).toFixed(2)}%)
</div>
)}
>
<ArcSeries
data={data}
pieValue={d => d.value}
fill={arc => colorScale(arc.data.label)}
stroke="#fff"
strokeWidth={1}
label{arc => `${(arc.data.value).toFixed(1)}%`}
labelComponent={<ArcLabel />}
innerRadius={radius => 0.35 * radius}
outerRadius={radius => 0.6 * radius}
labelRadius={radius => 0.75 * radius}
/>
</RadialChart>
<LegendOrdinal
direction="column"
scale={colorScale}
shape="rect"
fill={({ datum }) => colorScale(datum)}
labelFormat={label => label}
/>
</div>
);
The easiest way to use tooltips out of the box is by passing a renderTooltip
function to
<RadialChart />
. This function takes an object with the shape { event, datum, data, fraction }
as input and should return the inner contents of the tooltip (not the tooltip container!) as shown
above. If this function returns a falsy
value, a tooltip will not be rendered.
Under the covers this will wrap the <RadialChart />
component in the exported <WithTooltip />
HOC, which wraps the svg
in a <div />
and handles the positioning and rendering of an HTML-based
tooltip with the contents returned by renderTooltip()
. This tooltip is aware of the bounds of its
container and should position itself "smartly".
If you'd like more customizability over tooltip rendering you can do either of the following:
Roll your own tooltip positioning logic and pass onMouseMove
and onMouseLeave
functions to
RadialChart
. These functions are passed to the <ArcSeries />
children and are called with the
signature onMouseMove({ datum, event })
and onMouseLeave()
upon appropriate trigger.
Wrap <RadialChart />
in <WithTooltip />
yourself, which accepts props for additional
customization:
Name | Type | Default | Description |
---|---|---|---|
children | PropTypes.func or PropTypes.object | - | Child function (to call) or element (to clone) with onMouseMove, onMouseLeave, and tooltipData props/keys |
className | PropTypes.string | - | Class name to add to the <div> container wrapper |
renderTooltip | PropTypes.func.isRequired | - | Renders the contents of the tooltip, signature of ({ event, data, datum, fraction }) => node . If this function returns a falsy value, a tooltip will not be rendered. |
styles | PropTypes.object | {} | Styles to add to the <div> container wrapper |
TooltipComponent | PropTypes.func or PropTypes.object | @vx 's TooltipWithBounds | Component (not instance) to use as the tooltip container component. It is passed top and left numbers for positioning |
tooltipProps | PropTypes.object | - | Props that are passed to TooltipComponent |
tooltipTimeout | PropTypes.number | 200 | Timeout in ms for the tooltip to hide upon calling onMouseLeave |
Note that currently this is implemented with @vx/tooltips
's withTooltip
HOC, which adds an
additional div wrapper.
Although pie 🍰 and donut 🍩 charts are frequently encountered, they are not the most effective visualization for conveying quantitative information. With that caveat, when used well they can effectively give an overview of population makeup which is an entirely reasonable use of these charts. We don't recommend using >7 slices for user readability.
FAQs
A package for radial-axis visualizations https://williaster.github.io/data-ui
The npm package @data-ui/radial-chart receives a total of 11,141 weekly downloads. As such, @data-ui/radial-chart popularity was classified as popular.
We found that @data-ui/radial-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.