Détail du package

@data-ui/radial-chart

williaster32.7kMIT0.0.84

A package for radial-axis visualizations https://williaster.github.io/data-ui

visualization, chart, d3, react

readme

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

changelog

Changelog

v0.0.81

🐛 Bug Fix

  • [xy-chart] allow rangePadding override in XAxis or YAxis components #190 closes #189

v0.0.80

🐛 Bug Fix

  • [histogram] @mfe5003 Fixes a bug where tickLabelProps is not used when passed in either <XAxis /> or <YAxis /> #184 closes #183

v0.0.79

🐛 Bug Fix

  • [xy-chart] @bluekvirus bump @vx/axis version to fix document sizing issue from @vx/text #181 closes #180

v0.0.78

🐛 Bug Fix

  • [xy-chart] @schillerk Bump @vx/text version to fix document sizing issue #175

v0.0.77

🐛 Bug Fix

  • [shared] @gnijuohz Fix #167 tab tooltip TypeError: Value being assigned to SVGPoint.x is not a finite floating-point value seen in Firefox #171
  • [histogram] @williaster squash end-inclusive histogram bins #172

v0.0.76

🏆 Enhancements [xy-chart]

  • @kristw add labelOffset to XAxis props #169

🏠 Internal

v0.0.75

🏆 Enhancements

[histogram]

  • @maxburke allow user to pass in desired bin values #159

🐛 Bug Fix [shared, xy-chart]

  • fix lint errors from build #161

v0.0.74

🐛 Bug Fix

  • [babel] for all packages (except @data-ui/event-flow) let consumers polyfill #155 (fixes 0.0.73 which requires consumers to install core-js)

v0.0.73

🏠 Internal

  • [build] remove @babel/runtime dep #154

v0.0.72

🐛 Bug Fix

  • [build] .gitignore lock files per-package #153 closes #151
  • [theme] babel-runtime@6 => @babel/runtime@7#152

v0.0.71

🐛 Bug Fix

  • [xy-chart][areadifference] pass margin to AreaSeries #150

v0.0.70

🏆 Enhancements

  • [xy-chart] add renderLabel support to <BarSeries /> #147
  • [xy-chart] export @vx/text Text component #147
  • [xy-chart][grid] add x/yGridValues #146

🐛 Bug Fix

  • [xy-chart] fix top/left tooltip offset #140
  • [xy-chart][grid] bump @vx/grid to fix band-scale bug #146

📜Documentation

  • [xy-chart] fix typo in readme.md #142
  • [xy-chart] document new features #147 and #146

🏠 Internal

v0.0.69

🏆 Enhancements

[xy-chart]

  • @conglei Several brush improvements #131
    • exposed reset function on Brush and added an example to show how to use it
    • enabled onCick event for Brush
    • exposed starting point of brush to onBrushStart

🏠 Internal

[all packages]

  • @williaster build changes across packages
    • bump to @data-ui/build-config@^0.0.12 which fixes a coverage collection issue #132
    • use codecov not coveralls #132
    • add demo package to travis matrix #133
    • add linting to travis matrix #133
Changes:
 - @data-ui/data-table: 0.0.61 => 0.0.69
 - @data-ui/theme: 0.0.62 => 0.0.69
 - @data-ui/demo: 0.0.67 => 0.0.69 (private)
 - @data-ui/event-flow: 0.0.63 => 0.0.69
 - @data-ui/forms: 0.0.61 => 0.0.69
 - @data-ui/histogram: 0.0.64 => 0.0.69
 - @data-ui/network: 0.0.66 => 0.0.69
 - @data-ui/radial-chart: 0.0.63 => 0.0.69
 - @data-ui/shared: 0.0.63 => 0.0.69
 - @data-ui/sparkline: 0.0.63 => 0.0.69
 - @data-ui/xy-chart: 0.0.67 => 0.0.69

v0.0.67

[xy-chart]

🏆 Enhancements

  • adds support for rendering multiple circles on the XYChart Crosshair component when XYChart's eventTrigger='container' #129 @williaster
  • Adds deep export for WithTooltip from @data-ui/shared #130 @williaster
  • moves some "enhancer" components to new composer/ directory #130 @williaster

🏠 Internal

  • removes some tests that test deep vx exports, which are already covered with linting #130 @williaster
Changes:
 - @data-ui/demo: 0.0.66 => 0.0.67 (private)
 - @data-ui/xy-chart: 0.0.66 => 0.0.67

v0.0.66

🏆 Enhancements

[xy-chart]

  • @conglei Add horizontal prop to <BarSeries /> to support horizontal Bar charts #127
  • @williaster [Demo] add linked brushable chart demo #126

[network]

  • @conglei Expose interaction handlers on links #128

🐛Bug Fix

[xy-chart]

  • @williaster Allow string type tickValues in *Axis components #126
Changes:
 - @data-ui/demo: 0.0.65 => 0.0.66 (private)
 - @data-ui/network 0.0.63 => 0.0.66
 - @data-ui/xy-chart: 0.0.65 => 0.0.66

v0.0.65

[xy-chart] 🏆 Enhancements

  • Improves y-axis label wrapping logic to use full chart height, not inner height #125
  • Enable setting labelOffset on XAxis and YAxis labels instead of setting a constant 0.7 * margin.left/right and 0 for YAxis and XAxis respectively #125
Changes:
 - @data-ui/demo: 0.0.64 => 0.0.65 (private)
 - @data-ui/xy-chart: 0.0.64 => 0.0.65

v0.0.64

🐛Bug Fix

[xy-chart]

  • the withTheme HOC would override the passed theme with the empty default theme from XYChart. To support overrides, combine the two objects. #123

[histogram]

  • in the case that there's one un-binned numeric value, enforce a bin length of 1 #123
Changes:
 - @data-ui/demo: 0.0.63 => 0.0.64 (private)
 - @data-ui/histogram: 0.0.63 => 0.0.64
 - @data-ui/xy-chart: 0.0.63 => 0.0.64

v0.0.63

[xy-chart]

🏆 Enhancements

  • [@conglei] Adds support for Brushing 🎉 #117, closes #106
  • [@williaster] Adds <VerticalReferenceLine />, uses @vx/text for <*ReferenceLine /> labels #120

🏠 Internal

  • [@williaster] re-exports vx deep imports to support deep importing all components from xy-chart #122

[histogram] 🐛Bug Fix

  • [@williaster] Fixes binning issue for numeric un-binned data #119 and #121, fixes #100 and #118
Changes:
 - @data-ui/demo: 0.0.62 => 0.0.63 (private)
 - @data-ui/event-flow: 0.0.62 => 0.0.63
 - @data-ui/histogram: 0.0.62 => 0.0.63
 - @data-ui/network: 0.0.62 => 0.0.63
 - @data-ui/radial-chart: 0.0.62 => 0.0.63
 - @data-ui/shared: 0.0.62 => 0.0.63
 - @data-ui/sparkline: 0.0.62 => 0.0.63
 - @data-ui/xy-chart: 0.0.62 => 0.0.63

v0.0.62

Makes the following changes to @data-ui/xy-chart #113

🏆 Enhancements

  • Adds a new <AreaDifferenceSeries /> to shade the area between two different <AreaSeries /> based on which one has the larger value. This uses @vx's "Threshold" visualization

  • Adds an example to the Storybook

📜 Documentation

  • Updates documentation to include <AreaDifferenceSeries />

🏠 Internal

  • uses @data-ui/build-config for linting + prettier in the demo package
Changes:
 - @data-ui/theme: 0.0.61 => 0.0.62
 - @data-ui/demo: 0.0.61 => 0.0.62 (private)
 - @data-ui/event-flow: 0.0.61 => 0.0.62
 - @data-ui/histogram: 0.0.61 => 0.0.62
 - @data-ui/network: 0.0.61 => 0.0.62
 - @data-ui/radial-chart: 0.0.61 => 0.0.62
 - @data-ui/shared: 0.0.61 => 0.0.62
 - @data-ui/sparkline: 0.0.61 => 0.0.62
 - @data-ui/xy-chart: 0.0.61 => 0.0.62

v0.0.61

🏠 Internal Remove node engine requirement from packages, and specify in root package.json only (for dev) #112

v0.0.60

🏠 Internal

  • Use @data-ui/build-config across all packages for linting, prettier, jest, and babel (forms + event-flow require webpack and still have jest deps) #111. This
    • fixes an issue where node_modules were included in builds, this improves bundle size.
    • adds esm builds in addition to commonjs
    • adds sideEffects: false to package.json's for tree-shaking support
    • introduces more aggressive linting + prettier ✨

v0.0.59

[xy-chart] 🏆 Enhancements

  • expose tickComponent prop in XAxis and YAxis components for fully-custom tick rendering #110
  • bump all vx packages, which adds much better default support for tick labels (Fixes #109) #110

[demo]

  • added tick label props playground example to demo new functionality #110

🏠 Internal [shared]

  • bump all vx packages
Changes:
 - @data-ui/theme: 0.0.48 => 0.0.59
 - @data-ui/demo: 0.0.58 => 0.0.59 (private)
 - @data-ui/event-flow: 0.0.54 => 0.0.59
 - @data-ui/histogram: 0.0.58 => 0.0.59
 - @data-ui/network: 0.0.56 => 0.0.59
 - @data-ui/radial-chart: 0.0.54 => 0.0.59
 - @data-ui/shared: 0.0.54 => 0.0.59
 - @data-ui/sparkline: 0.0.54 => 0.0.59
 - @data-ui/xy-chart: 0.0.54 => 0.0.59

v0.0.58

[histogram]

  • 🐛Bug Fix
  • Fixes #104 error seen on DensitySeries in production #105
Changes:
 - @data-ui/demo: 0.0.57 => 0.0.58 (private)
 - @data-ui/histogram: 0.0.57 => 0.0.58

v0.0.57

[histogram]

🏆 Enhancements #103

  • Adds onClick support to BarSeries and AnimatedBarSeries
  • onClick and onMouseMove functions are passed index in addition to data, datum, event, and color

v0.0.56

[network]

🐛 Bug Fix

  • Trigger layout algorithm when the width, height, or margin changes #100

v0.0.55

[network]

🏆 Enhancements

  • enable layout algorithms to handle scale to fit functionality #99

v0.0.54

[shared]

🐛 Bug Fix

  • prefer role="presentation" instead of role="button" on <FocusBlurHandler /> for a11y axe violation #97

v0.0.53

[xy-chart]

🏆 Enhancements

  • exposed circle packing layout as a prop so users can pass their own layout algorithm into circle packing charts. A force-driected layout (swarm plot) example is provided in demo #96

v0.0.52

[network]

🏆 Enhancements

  • Add preserveAspectRatio prop to control responsive scaling #93

🐛 Bug Fix

  • init layout after mount to avoid pre-mount layout finish race condition #93

📜 Documentation

  • add more complete readme, including new prop.

v0.0.51

💔 Breaking Changes

[network]

Mouse events renamed #89

  • onNodeClick => onClick
  • onNodeMouseEnter => onMouseEnter
  • onNodeMouseLeave => onMouseLeave

🏆 Enhancements

[shared]

[xy-chart]

  • adds onFocus and onBlur support to the following <*Series /> components (the remainder depend on @vx exposing hooks to series dom nodes (to wrap in <a />s)#88

    | Series | onFocus + onBlur support added | | ------------- | ------------- | | AreaSeries | x | | BarSeries | x | | BoxPlotSeries | x | | CirclePackSeries | x | | IntervalSeries | x | | LineSeries | x | | PointSeries | x | | ViolinPlotSeries | x | | GroupedBarSeries | | | StackedAreaSeries | | | StackedBarSeries | |

[network]

  • allow user to wrap <Network /> in WithTooltip to support programmatic triggering and custom tooltip logic 89
  • add eventTriggerRefs callback to support programmatic tooltip triggering #89
  • add snapToTooltipX and snapToTooltipY support #89

🐛 Bug Fix

[histogram]

  • Fix bug with innerHeight referencing 85 #87

[xy-chart]

  • add circle packing x-bounds constraint #91

📜 Documentation

  • update readmes with enhancements and breaking changes

🏡Internal

[network]

  • fix broken network example #89
  • remove unused/add new Network.propTypes #89

v0.0.50

🏆 Enhancements

[xy-chart]

  • Ability to "snap" the tooltip to the x or y value of a datum, by setting snapTooltipToDataX and/or snapTooltipToDataY. fixes #77 #81
  • Support for using the chart container for mouse events, instead of series or a voronoi. this is now set with the eventTrigger prop as 'series' [default], 'voronoi', or 'container'. #81
  • The addition of container events necessitates shared tooltips, i.e., tooltips that contain data for for all series for the hovered x value. fixes #78 #81
  • Ability to programmatically trigger events using the eventTriggerRefs callback (see updated <LineSeriesExample /> for an example) #81
  • adds innerRef prop which is set on the inner svg #81

[shared]

  • the signature of onMouseMove in <WithTooltip /> now accepts an optional coords object of the shape { x: Number, y: Number }. If either or both of x or y is specified they will be used to set the the tooltips left and top instead of the event's coordinates. #81

[forms]

  • adds active prop to <Button /> #81

💔 Breaking Changes

  • [xy-chart] the <XYChart /> useVoronoi prop is removed. instead use eventTrigger='voronoi #81

📜 Documentation

  • [xy-chart] documents the above enhancements #81

🏠 Internal [xy-chart]

  • moves <XYChart /> static method to their own utils files #81
  • breaks out several functions in chartUtils into their own files #81
  • adds and uses sharedSeriesProps #81

🐛 Bug Fix

  • Fixes a bug where tickLabelProps is not used when passed in either <XAxis /> or <YAxis />. This prop enables per-tick styles so is importanté! #82

v0.0.49

🏆 Enhancements

  • Allows additional customization Adds tooltipProps to the <WithTooltip />which will be passed to its TooltipComponent (and adds example in demo) #79
  • Exposes @vx/responsive's new observer-based <ParentSize /> HOC #79
  • Exposes the following props on <BoxplotSeries /> to enable more customization: containerProps, boxProps, outlierProps, minProps, maxProps, medianProps (https://github.com/hshoff/vx/pull/198) #80
  • Adds the ability to set mouse events on the boxplot container or on its component parts (whiskers, etc) #80
  • Consolidates some of examples for [demo][boxplot] #80

🐛 Bug fix

Changes
 - @data-ui/demo: 0.0.48 => 0.0.49 (private)
 - @data-ui/event-flow: 0.0.48 => 0.0.49
 - @data-ui/histogram: 0.0.48 => 0.0.49
 - @data-ui/network: 0.0.48 => 0.0.49
 - @data-ui/radial-chart: 0.0.48 => 0.0.49
 - @data-ui/shared: 0.0.48 => 0.0.49
 - @data-ui/sparkline: 0.0.48 => 0.0.49
 - @data-ui/xy-chart: 0.0.48 => 0.0.49

v0.0.48

💔 Breaking Changes

  • [xy-chart] use seriesKey instead of key in onMouseMove event signature (relevant to StackedAreaSeries, StackedBarSeries, and GroupedBarSeries only) #73

🏆 Enhancements

  • [xy-chart] add <StackedAreaSeries /> and example #74
  • [xy-chart] add onClick support to all series and voronoi #74
  • [xy-chart] remove previously-required label prop from series #74
  • [shared][tooltip] don't render a tooltip if the output of renderTooltip is falsy #73
  • [demo] add <LinkedXYCharts /> example with custom click handling and mouse overs #74
  • [demo] add disableMouseEvents prop to all series #74
  • removes enumeration of @data-ui packages in readmes #74

🐛 Bug Fix

  • fix an offset bug for BarSeries with band scales #74

🏠 Internal

 - @data-ui/data-table: 0.0.25 => 0.0.48
 - @data-ui/theme: 0.0.47 => 0.0.48
 - @data-ui/demo: 0.0.47 => 0.0.48 (private)
 - @data-ui/event-flow: 0.0.47 => 0.0.48
 - @data-ui/histogram: 0.0.47 => 0.0.48
 - @data-ui/network: 0.0.47 => 0.0.48
 - @data-ui/radial-chart: 0.0.47 => 0.0.48
 - @data-ui/shared: 0.0.47 => 0.0.48
 - @data-ui/sparkline: 0.0.47 => 0.0.48
 - @data-ui/xy-chart: 0.0.47 => 0.0.48

v0.0.47

🎉 Finally syncing versions across packages! Will be easier to maintain the changelog :)

📈 Enhancements

  • [sparkline] add support for tooltips #72
  • [xy-chart] add support for area bands in <AreaSeries /> #71
  • [shared] add package, move <WithTooltip /> all @data-ui packages to @data-ui/shared #72

📜 Documentation

  • [sparkline] update docs for tooltips

🏋️ Internal

  • [xy-chart] absolute imports for all @vx components

Changes:

 - @data-ui/theme: 0.0.9 => 0.0.47
 - @data-ui/demo: 0.0.46 => 0.0.47 (private)
 - @data-ui/event-flow: 0.0.11 => 0.0.47
 - @data-ui/histogram: 0.0.8 => 0.0.47
 - @data-ui/network: 0.0.6 => 0.0.47
 - @data-ui/radial-chart: 0.0.11 => 0.0.47
 - @data-ui/shared: 0.0.0 => 0.0.47
 - @data-ui/sparkline: 0.0.3 => 0.0.47
 - @data-ui/xy-chart: 0.0.25 => 0.0.47