donut

Donut

Reusable Donut Chart API class that renders a simple and configurable donut chart.

Requires: module:d3-dispatch,
Example

const donutChart = donut();

donutChart
    .externalRadius(500)
    .internalRadius(200);

d3Selection.select('.css-selector')
    .datum(dataset)
    .call(donutChart);

Donut
- exports(_selection, _data) ⏏
  - static
    - .animationDuration(_x) ⇒ duration | module
    - .centeredTextFunction(_x) ⇒ function | module
    - .colorMap([_x]) ⇒ number | module
    - .colorSchema(_x) ⇒ String | module
    - .emptyDataConfig(_x) ⇒ Object | module
    - .exportChart(filename, title) ⇒ Promise
    - .externalRadius(_x) ⇒ Number | Module
    - .hasCenterLegend(_x) ⇒ boolean | Module
    - .hasHoverAnimation(_x) ⇒ boolean | module
    - .hasFixedHighlightedSlice(_x) ⇒ boolean | module
    - .hasLastHoverSliceHighlighted(_x) ⇒ boolean | module
    - .height(_x) ⇒ Number | Module
    - .highlightSliceById(_x) ⇒ Number | Module
    - .internalRadius(_x) ⇒ Number | Module
    - .isAnimated(_x) ⇒ Boolean | module
    - .isLoading(flag) ⇒ boolean | module
    - .margin(_x) ⇒ Object | Module
    - .numberFormat(_x) ⇒ string | module
    - .on() ⇒ module
    - .orderingFunction(_x) ⇒ function | Module
    - .percentageFormat(_x) ⇒ Number | Module
    - .radiusHoverOffset(_x) ⇒ Number | Module
    - .width(_x) ⇒ Number | Module
  - inner
    - ~DonutChartData : Array.<Object>

exports(_selection, _data) ⏏

This function creates the graph using the selection as container

Kind: Exported function

Param	Type	Description
_selection	`D3Selection`	A d3 selection that represents the container(s) where the chart(s) will be rendered
_data	`DonutChartData`	The data to attach and generate the chart

exports.animationDuration(_x) ⇒ `duration` | `module`

Gets or Sets the duration of the animation

Kind: static method of exports
Returns: duration | module - Current animation duration or Chart module to chain calls
Access: public

Param	Type	Default	Description
_x	`Number`	`1200`	Desired animation duration for the graph

exports.centeredTextFunction(_x) ⇒ `function` | `module`

Gets or Sets the centeredTextFunction of the chart. If function is provided the format will be changed by the custom function's value format. The default format function value is "${d.percentage}% ${d.name}". The callback will provide the data object with id, name, percentage, and quantity. Also provides the component added by the user in each data entry.

Kind: static method of exports
Returns: function | module - Current centeredTextFunction or Chart module to chain calls
Access: public

Param	Type	Description
_x	`function`	Custom function that returns a formatted string

Example

donutChart.centeredTextFunction(d => `${d.id} ${d.quantity}`)

exports.colorMap([_x]) ⇒ `number` | `module`

Gets or Sets the colorMap of the chart

Kind: static method of exports
Returns: number | module - Current colorMap or Chart module to chain calls
Access: public

Param	Type	Default	Description
[_x]	`object`		Color map

Example

stackedBar.colorMap({groupName: 'colorHex', groupName2: 'colorString'})

exports.colorSchema(_x) ⇒ `String` | `module`

Gets or Sets the colorSchema of the chart

Kind: static method of exports
Returns: String | module - Current colorSchema or Chart module to chain calls
Access: public

Param	Type	Description
_x	`Array.<String>`	Desired colorSchema for the graph

exports.emptyDataConfig(_x) ⇒ `Object` | `module`

Gets or Sets the emptyDataConfig of the chart. If set and data is empty (quantity adds up to zero or there are no entries), the chart will render an empty slice with a given color (light gray by default)

Kind: static method of exports
Returns: Object | module - Current config for when chart data is an empty array
Access: public

Param	Type	Description
_x	`Object`	EmptyDataConfig object to get/set

Example

donutChart.emptyDataConfig({showEmptySlice: true, emptySliceColor: '#000000'})

exports.exportChart(filename, title) ⇒ `Promise`

Chart exported to png and a download action is fired

Kind: static method of exports
Returns: Promise - Promise that resolves if the chart image was loaded and downloaded successfully
Access: public

Param	Type	Description
filename	`String`	File title for the resulting picture
title	`String`	Title to add at the top of the exported picture

exports.externalRadius(_x) ⇒ `Number` | `Module`

Gets or Sets the externalRadius of the chart

Kind: static method of exports
Returns: Number | Module - Current externalRadius or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	ExternalRadius number to get/set

exports.hasCenterLegend(_x) ⇒ `boolean` | `Module`

Gets or Sets the hasCenterLegend property of the chart, making it display legend at the center of the donut.

Kind: static method of exports
Returns: boolean | Module - Current hasCenterLegend flag or Chart module
Access: public

Param	Type	Description
_x	`boolean`	If we want to show legent at the center of the donut

exports.hasHoverAnimation(_x) ⇒ `boolean` | `module`

Gets or Sets the hasHoverAnimation property of the chart. By default, donut chart highlights the hovered slice. This property explicitly disables this hover behavior.

Kind: static method of exports
Returns: boolean | module - Current hasHoverAnimation flag or Chart module
Access: public

Param	Type	Description
_x	`boolean`	Decide whether hover slice animation should be enabled

exports.hasFixedHighlightedSlice(_x) ⇒ `boolean` | `module`

Gets or Sets the hasFixedHighlightedSlice property of the chart, making it to highlight the selected slice id set with highlightSliceById all the time.

Kind: static method of exports
Returns: boolean | module - Current hasFixedHighlightedSlice flag or Chart module
Access: public

Param	Type	Description
_x	`boolean`	If we want to make the highlighted slice permanently highlighted

exports.hasLastHoverSliceHighlighted(_x) ⇒ `boolean` | `module`

Gets or sets the hasLastHoverSliceHighlighted property. If property is true, the last hovered slice will be highlighted after 'mouseout` event is triggered. The last hovered slice will remain in highlight state. Note: if both hasFixedHighlightedSlice and hasLastHoverSliceHighlighted are true, the latter property will override the former.

Kind: static method of exports
Returns: boolean | module - Current hasLastHoverSliceHighlighted value or Chart module
Access: public

Param	Type	Description
_x	`boolean`	Decide whether the last hovered slice should be highlighted

exports.height(_x) ⇒ `Number` | `Module`

Gets or Sets the height of the chart

Kind: static method of exports
Returns: Number | Module - Current height or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired width for the graph

exports.highlightSliceById(_x) ⇒ `Number` | `Module`

Gets or Sets the id of the slice to highlight

Kind: static method of exports
Returns: Number | Module - Current highlighted slice id or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Slice id

exports.internalRadius(_x) ⇒ `Number` | `Module`

Gets or Sets the internalRadius of the chart

Kind: static method of exports
Returns: Number | Module - Current internalRadius or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	InternalRadius number to get/set

exports.isAnimated(_x) ⇒ `Boolean` | `module`

Gets or Sets the isAnimated property of the chart, making it to animate when render. By default this is 'false'

Kind: static method of exports
Returns: Boolean | module - Current isAnimated flag or Chart module
Access: public

Param	Type	Description
_x	`Boolean`	Desired animation flag

exports.isLoading(flag) ⇒ `boolean` | `module`

Gets or Sets the loading state of the chart

Kind: static method of exports
Returns: boolean | module - Current loading state flag or Chart module to chain calls
Access: public

Param	Type	Description
flag	`boolean`	Desired value for the loading state

exports.margin(_x) ⇒ `Object` | `Module`

Gets or Sets the margin of the chart

Kind: static method of exports
Returns: Object | Module - Current margin or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Object`	Margin object to get/set

exports.numberFormat(_x) ⇒ `string` | `module`

Gets or Sets the number format of the donut chart

Kind: static method of exports
Returns: string | module - Current numberFormat or Chart module to chain calls
Access: public

Param	Type	Description
_x	`string`	Desired numberFormat for the chart. See examples here

exports.on() ⇒ `module`

Exposes an 'on' method that acts as a bridge with the event dispatcher We are going to expose this events: customMouseOver, customMouseMove, customMouseOut and customClick

Kind: static method of exports
Returns: module - Bar Chart
Access: public

exports.orderingFunction(_x) ⇒ `function` | `Module`

Changes the order of items given custom function

Kind: static method of exports
Returns: function | Module - Void function with no return
Access: public

Param	Type	Description
_x	`function`	A custom function that sets logic for ordering

exports.percentageFormat(_x) ⇒ `Number` | `Module`

Gets or Sets the percentage format for the percentage label

Kind: static method of exports
Returns: Number | Module - Current format or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`String`	Format for the percentage label (e.g. '.1f')

exports.radiusHoverOffset(_x) ⇒ `Number` | `Module`

Gets or Sets the radiusHoverOffset of the chart

Kind: static method of exports
Returns: Number | Module - Current offset or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired offset for the hovered slice

exports.width(_x) ⇒ `Number` | `Module`

Gets or Sets the width of the chart

Kind: static method of exports
Returns: Number | Module - Current width or Donut Chart module to chain calls
Access: public

Param	Type	Description
_x	`Number`	Desired width for the graph

exports~DonutChartData : `Array.<Object>`

Kind: inner typedef of exports
Properties

Name	Type	Description
quantity	`Number`	Quantity of the group (required)
percentage	`Number`	Percentage of the total (optional)
name	`String`	Name of the group (required)
id	`Number`	Identifier for the group required for legend feature (optional)

Example

[
    {
        quantity: 1,
        percentage: 50,
        name: 'glittering',
        id: 1
    },
    {
        quantity: 1,
        percentage: 50,
        name: 'luminous',
        id: 2
    }
]

exports(_selection, _data) ⏏

Donut

exports(_selection, _data) ⏏​

exports.animationDuration(_x) ⇒ duration | module​

exports.centeredTextFunction(_x) ⇒ function | module​

exports.colorMap([_x]) ⇒ number | module​

exports.colorSchema(_x) ⇒ String | module​

exports.emptyDataConfig(_x) ⇒ Object | module​

exports.exportChart(filename, title) ⇒ Promise​

exports.externalRadius(_x) ⇒ Number | Module​

exports.hasCenterLegend(_x) ⇒ boolean | Module​

exports.hasHoverAnimation(_x) ⇒ boolean | module​

exports.hasFixedHighlightedSlice(_x) ⇒ boolean | module​

exports.hasLastHoverSliceHighlighted(_x) ⇒ boolean | module​

exports.height(_x) ⇒ Number | Module​

exports.highlightSliceById(_x) ⇒ Number | Module​

exports.internalRadius(_x) ⇒ Number | Module​

exports.isAnimated(_x) ⇒ Boolean | module​

exports.isLoading(flag) ⇒ boolean | module​

exports.margin(_x) ⇒ Object | Module​

exports.numberFormat(_x) ⇒ string | module​

exports.on() ⇒ module​

exports.orderingFunction(_x) ⇒ function | Module​

exports.percentageFormat(_x) ⇒ Number | Module​

exports.radiusHoverOffset(_x) ⇒ Number | Module​

exports.width(_x) ⇒ Number | Module​

exports~DonutChartData : Array.<Object>​

exports(_selection, _data) ⏏

exports.animationDuration(_x) ⇒ `duration` | `module`

exports.centeredTextFunction(_x) ⇒ `function` | `module`

exports.colorMap([_x]) ⇒ `number` | `module`

exports.colorSchema(_x) ⇒ `String` | `module`

exports.emptyDataConfig(_x) ⇒ `Object` | `module`

exports.exportChart(filename, title) ⇒ `Promise`

exports.externalRadius(_x) ⇒ `Number` | `Module`

exports.hasCenterLegend(_x) ⇒ `boolean` | `Module`

exports.hasHoverAnimation(_x) ⇒ `boolean` | `module`

exports.hasFixedHighlightedSlice(_x) ⇒ `boolean` | `module`

exports.hasLastHoverSliceHighlighted(_x) ⇒ `boolean` | `module`

exports.height(_x) ⇒ `Number` | `Module`

exports.highlightSliceById(_x) ⇒ `Number` | `Module`

exports.internalRadius(_x) ⇒ `Number` | `Module`

exports.isAnimated(_x) ⇒ `Boolean` | `module`

exports.isLoading(flag) ⇒ `boolean` | `module`

exports.margin(_x) ⇒ `Object` | `Module`

exports.numberFormat(_x) ⇒ `string` | `module`

exports.on() ⇒ `module`

exports.orderingFunction(_x) ⇒ `function` | `Module`

exports.percentageFormat(_x) ⇒ `Number` | `Module`

exports.radiusHoverOffset(_x) ⇒ `Number` | `Module`

exports.width(_x) ⇒ `Number` | `Module`

exports~DonutChartData : `Array.<Object>`