Next Phenomenal Microbrewery

    @data-ui/radial-chart

    0.0.84 • Public • Published

    @data-ui/radial-chart

    demo at williaster.github.io/data-ui

    Overview

    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.

    Usage

    See the demo at williaster.github.io/data-ui for more example outputs.

    Donut chart

    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>
    );

    Tooltips

    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:

    1. 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.

    2. 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.

    Roadmap

    • more types of radial series
    • animations / transitions

    NOTE ‼️

    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.

    Install

    npm i @data-ui/radial-chart

    DownloadsWeekly Downloads

    7,673

    Version

    0.0.84

    License

    MIT

    Unpacked Size

    27.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • data-ui