🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-minimal-pie-chart
Advanced tools
react-minimal-pie-chart - npm Package Compare versions
Comparing version 7.2.0 to 7.3.0
@@ -0,1 +1,11 @@ | ||
| # 7.3.0 | ||
| ### New Features | ||
| - Allow `segmentsShift` as function to return `undefined` | ||
| ### Minor Changes | ||
| - Improve `sumValues` performance | ||
| # 7.2.0 | ||
@@ -2,0 +12,0 @@ |
@@ -128,5 +128,9 @@ (function (global, factory) { | ||
| function sumValues(data) { | ||
| return data.reduce(function (acc, dataEntry) { | ||
| return acc + dataEntry.value; | ||
| }, 0); | ||
| var sum = 0; | ||
| for (var i = 0; i < data.length; i++) { | ||
| sum += data[i].value; | ||
| } | ||
| return sum; | ||
| } // Append "percentage", "degrees" and "startOffset" into each data entry | ||
@@ -175,11 +179,11 @@ | ||
| function renderLabelItem(option, labelProps, value) { | ||
| if (React__default.isValidElement(option)) { | ||
| return React__default.cloneElement(option, labelProps); | ||
| function renderLabelItem(providedLabel, labelProps, defaultValue) { | ||
| if (React__default.isValidElement(providedLabel)) { | ||
| return React__default.cloneElement(providedLabel, labelProps); | ||
| } | ||
| var label = value; | ||
| var labelValue = defaultValue; | ||
| if (typeof option === 'function') { | ||
| label = option(labelProps); | ||
| if (typeof providedLabel === 'function') { | ||
| var label = providedLabel(labelProps); | ||
@@ -189,5 +193,7 @@ if (React__default.isValidElement(label)) { | ||
| } | ||
| labelValue = label; | ||
| } | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartLabel, labelProps, label); | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartLabel, labelProps, labelValue); | ||
| } | ||
@@ -202,5 +208,5 @@ | ||
| return data.map(function (dataEntry, index) { | ||
| var _props$segmentsShift; | ||
| var _functionProp; | ||
| var distanceFromCenter = extractPercentage(radius, props.labelPosition + functionProp((_props$segmentsShift = props.segmentsShift) != null ? _props$segmentsShift : 0, data, index)); | ||
| var distanceFromCenter = extractPercentage(radius, (_functionProp = functionProp(props.segmentsShift, data, index)) != null ? _functionProp : 0 + props.labelPosition); | ||
| var startAngle = props.startAngle + dataEntry.startOffset; | ||
@@ -328,2 +334,3 @@ var segmentBisector = bisectorAngle(startAngle, dataEntry.degrees); | ||
| var paths = data.map(function (dataEntry, index) { | ||
| var segmentsShift = functionProp(props.segmentsShift, props.data, index); | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartPath, { | ||
@@ -338,3 +345,3 @@ key: dataEntry.key || index, | ||
| reveal: reveal, | ||
| shift: props.segmentsShift && extractPercentage(radius, functionProp(props.segmentsShift, props.data, index)), | ||
| shift: segmentsShift && extractPercentage(radius, segmentsShift), | ||
| title: dataEntry.title, | ||
@@ -399,4 +406,4 @@ style: Object.assign({}, props.segmentsStyle, segmentTransitionsCombined, dataEntry.style), | ||
| _this.revealOverride = void 0; | ||
| _this.initialAnimationTimerId = void 0; | ||
| _this.initialAnimationRAFId = void 0; | ||
| _this.animationTimerId = void 0; | ||
| _this.animationRAFId = void 0; | ||
@@ -416,6 +423,6 @@ if (props.animate === true) { | ||
| if (this.props.animate === true && requestAnimationFrame) { | ||
| this.initialAnimationTimerId = setTimeout(function () { | ||
| _this2.initialAnimationTimerId = null; | ||
| _this2.initialAnimationRAFId = requestAnimationFrame(function () { | ||
| _this2.initialAnimationRAFId = null; | ||
| this.animationTimerId = setTimeout(function () { | ||
| _this2.animationTimerId = null; | ||
| _this2.animationRAFId = requestAnimationFrame(function () { | ||
| _this2.animationRAFId = null; | ||
@@ -429,8 +436,8 @@ _this2.startAnimation(); | ||
| _proto.componentWillUnmount = function componentWillUnmount() { | ||
| if (this.initialAnimationTimerId) { | ||
| clearTimeout(this.initialAnimationTimerId); | ||
| if (this.animationTimerId) { | ||
| clearTimeout(this.animationTimerId); | ||
| } | ||
| if (this.initialAnimationRAFId) { | ||
| cancelAnimationFrame(this.initialAnimationRAFId); | ||
| if (this.animationRAFId) { | ||
| cancelAnimationFrame(this.animationRAFId); | ||
| } | ||
@@ -437,0 +444,0 @@ }; |
@@ -122,5 +122,9 @@ import React, { Component } from 'react'; | ||
| function sumValues(data) { | ||
| return data.reduce(function (acc, dataEntry) { | ||
| return acc + dataEntry.value; | ||
| }, 0); | ||
| var sum = 0; | ||
| for (var i = 0; i < data.length; i++) { | ||
| sum += data[i].value; | ||
| } | ||
| return sum; | ||
| } // Append "percentage", "degrees" and "startOffset" into each data entry | ||
@@ -169,11 +173,11 @@ | ||
| function renderLabelItem(option, labelProps, value) { | ||
| if (React.isValidElement(option)) { | ||
| return React.cloneElement(option, labelProps); | ||
| function renderLabelItem(providedLabel, labelProps, defaultValue) { | ||
| if (React.isValidElement(providedLabel)) { | ||
| return React.cloneElement(providedLabel, labelProps); | ||
| } | ||
| var label = value; | ||
| var labelValue = defaultValue; | ||
| if (typeof option === 'function') { | ||
| label = option(labelProps); | ||
| if (typeof providedLabel === 'function') { | ||
| var label = providedLabel(labelProps); | ||
@@ -183,5 +187,7 @@ if (React.isValidElement(label)) { | ||
| } | ||
| labelValue = label; | ||
| } | ||
| return /*#__PURE__*/React.createElement(ReactMinimalPieChartLabel, labelProps, label); | ||
| return /*#__PURE__*/React.createElement(ReactMinimalPieChartLabel, labelProps, labelValue); | ||
| } | ||
@@ -196,5 +202,5 @@ | ||
| return data.map(function (dataEntry, index) { | ||
| var _props$segmentsShift; | ||
| var _functionProp; | ||
| var distanceFromCenter = extractPercentage(radius, props.labelPosition + functionProp((_props$segmentsShift = props.segmentsShift) != null ? _props$segmentsShift : 0, data, index)); | ||
| var distanceFromCenter = extractPercentage(radius, (_functionProp = functionProp(props.segmentsShift, data, index)) != null ? _functionProp : 0 + props.labelPosition); | ||
| var startAngle = props.startAngle + dataEntry.startOffset; | ||
@@ -322,2 +328,3 @@ var segmentBisector = bisectorAngle(startAngle, dataEntry.degrees); | ||
| var paths = data.map(function (dataEntry, index) { | ||
| var segmentsShift = functionProp(props.segmentsShift, props.data, index); | ||
| return /*#__PURE__*/React.createElement(ReactMinimalPieChartPath, { | ||
@@ -332,3 +339,3 @@ key: dataEntry.key || index, | ||
| reveal: reveal, | ||
| shift: props.segmentsShift && extractPercentage(radius, functionProp(props.segmentsShift, props.data, index)), | ||
| shift: segmentsShift && extractPercentage(radius, segmentsShift), | ||
| title: dataEntry.title, | ||
@@ -393,4 +400,4 @@ style: Object.assign({}, props.segmentsStyle, segmentTransitionsCombined, dataEntry.style), | ||
| _this.revealOverride = void 0; | ||
| _this.initialAnimationTimerId = void 0; | ||
| _this.initialAnimationRAFId = void 0; | ||
| _this.animationTimerId = void 0; | ||
| _this.animationRAFId = void 0; | ||
@@ -410,6 +417,6 @@ if (props.animate === true) { | ||
| if (this.props.animate === true && requestAnimationFrame) { | ||
| this.initialAnimationTimerId = setTimeout(function () { | ||
| _this2.initialAnimationTimerId = null; | ||
| _this2.initialAnimationRAFId = requestAnimationFrame(function () { | ||
| _this2.initialAnimationRAFId = null; | ||
| this.animationTimerId = setTimeout(function () { | ||
| _this2.animationTimerId = null; | ||
| _this2.animationRAFId = requestAnimationFrame(function () { | ||
| _this2.animationRAFId = null; | ||
@@ -423,8 +430,8 @@ _this2.startAnimation(); | ||
| _proto.componentWillUnmount = function componentWillUnmount() { | ||
| if (this.initialAnimationTimerId) { | ||
| clearTimeout(this.initialAnimationTimerId); | ||
| if (this.animationTimerId) { | ||
| clearTimeout(this.animationTimerId); | ||
| } | ||
| if (this.initialAnimationRAFId) { | ||
| cancelAnimationFrame(this.initialAnimationRAFId); | ||
| if (this.animationRAFId) { | ||
| cancelAnimationFrame(this.animationRAFId); | ||
| } | ||
@@ -431,0 +438,0 @@ }; |
@@ -127,5 +127,9 @@ 'use strict'; | ||
| function sumValues(data) { | ||
| return data.reduce(function (acc, dataEntry) { | ||
| return acc + dataEntry.value; | ||
| }, 0); | ||
| var sum = 0; | ||
| for (var i = 0; i < data.length; i++) { | ||
| sum += data[i].value; | ||
| } | ||
| return sum; | ||
| } // Append "percentage", "degrees" and "startOffset" into each data entry | ||
@@ -174,11 +178,11 @@ | ||
| function renderLabelItem(option, labelProps, value) { | ||
| if (React__default.isValidElement(option)) { | ||
| return React__default.cloneElement(option, labelProps); | ||
| function renderLabelItem(providedLabel, labelProps, defaultValue) { | ||
| if (React__default.isValidElement(providedLabel)) { | ||
| return React__default.cloneElement(providedLabel, labelProps); | ||
| } | ||
| var label = value; | ||
| var labelValue = defaultValue; | ||
| if (typeof option === 'function') { | ||
| label = option(labelProps); | ||
| if (typeof providedLabel === 'function') { | ||
| var label = providedLabel(labelProps); | ||
@@ -188,5 +192,7 @@ if (React__default.isValidElement(label)) { | ||
| } | ||
| labelValue = label; | ||
| } | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartLabel, labelProps, label); | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartLabel, labelProps, labelValue); | ||
| } | ||
@@ -201,5 +207,5 @@ | ||
| return data.map(function (dataEntry, index) { | ||
| var _props$segmentsShift; | ||
| var _functionProp; | ||
| var distanceFromCenter = extractPercentage(radius, props.labelPosition + functionProp((_props$segmentsShift = props.segmentsShift) != null ? _props$segmentsShift : 0, data, index)); | ||
| var distanceFromCenter = extractPercentage(radius, (_functionProp = functionProp(props.segmentsShift, data, index)) != null ? _functionProp : 0 + props.labelPosition); | ||
| var startAngle = props.startAngle + dataEntry.startOffset; | ||
@@ -327,2 +333,3 @@ var segmentBisector = bisectorAngle(startAngle, dataEntry.degrees); | ||
| var paths = data.map(function (dataEntry, index) { | ||
| var segmentsShift = functionProp(props.segmentsShift, props.data, index); | ||
| return /*#__PURE__*/React__default.createElement(ReactMinimalPieChartPath, { | ||
@@ -337,3 +344,3 @@ key: dataEntry.key || index, | ||
| reveal: reveal, | ||
| shift: props.segmentsShift && extractPercentage(radius, functionProp(props.segmentsShift, props.data, index)), | ||
| shift: segmentsShift && extractPercentage(radius, segmentsShift), | ||
| title: dataEntry.title, | ||
@@ -398,4 +405,4 @@ style: Object.assign({}, props.segmentsStyle, segmentTransitionsCombined, dataEntry.style), | ||
| _this.revealOverride = void 0; | ||
| _this.initialAnimationTimerId = void 0; | ||
| _this.initialAnimationRAFId = void 0; | ||
| _this.animationTimerId = void 0; | ||
| _this.animationRAFId = void 0; | ||
@@ -415,6 +422,6 @@ if (props.animate === true) { | ||
| if (this.props.animate === true && requestAnimationFrame) { | ||
| this.initialAnimationTimerId = setTimeout(function () { | ||
| _this2.initialAnimationTimerId = null; | ||
| _this2.initialAnimationRAFId = requestAnimationFrame(function () { | ||
| _this2.initialAnimationRAFId = null; | ||
| this.animationTimerId = setTimeout(function () { | ||
| _this2.animationTimerId = null; | ||
| _this2.animationRAFId = requestAnimationFrame(function () { | ||
| _this2.animationRAFId = null; | ||
@@ -428,8 +435,8 @@ _this2.startAnimation(); | ||
| _proto.componentWillUnmount = function componentWillUnmount() { | ||
| if (this.initialAnimationTimerId) { | ||
| clearTimeout(this.initialAnimationTimerId); | ||
| if (this.animationTimerId) { | ||
| clearTimeout(this.animationTimerId); | ||
| } | ||
| if (this.initialAnimationRAFId) { | ||
| cancelAnimationFrame(this.initialAnimationRAFId); | ||
| if (this.animationRAFId) { | ||
| cancelAnimationFrame(this.animationRAFId); | ||
| } | ||
@@ -436,0 +443,0 @@ }; |
| { | ||
| "name": "react-minimal-pie-chart", | ||
| "version": "7.2.0", | ||
| "version": "7.3.0", | ||
| "description": "Lightweight but versatile SVG pie/donut charts for React", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
@@ -8,3 +8,3 @@ # React minimal pie chart | ||
| Lightweight React **SVG pie charts**, with **versatile options** and **CSS animation** included. **< 3kB** gzipped. 👏[Demo][storybook] 👏. | ||
| Lightweight React **SVG pie charts**, with **versatile options** and **CSS animation** included. **< 3kB** gzipped. [👏 Demo 👏][storybook]. | ||
@@ -23,7 +23,9 @@ <p align="center"> | ||
| | | Size<br>by Bundlefobia | Benchmark Size \* | Loading time<br>on a slow 3g \* | | ||
| | :----------------------------------------: | :-------------------------------------------------------------------------------------: | :---------------: | :-----------------------------: | | ||
| | react-minimal-pie-chart<br>_v7.0.0_ | [![Bundle size: React minimal pie chart][bundlephobia-badge]][bundlephobia] | 2.3 KB | 46 ms | | ||
| | [rechart][recharts-github]<br>_v1.8.5_ | [![Bundle size: Recharts][recharts-bundlephobia-badge]][recharts-bundlephobia] | 92.6 KB | 1900 ms | | ||
| | [victory-pie][victory-pie-github]<br>_v34_ | [![Bundle size: Victory pie][victory-pie-bundlephobia-badge]][victory-pie-bundlephobia] | 50.5 KB | 1100 ms | | ||
| | | Size<br>by Bundlefobia | Benchmark Size \* | Loading time<br>on a slow 3g \* | | ||
| | :----------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------: | :-----------------------------: | | ||
| | react-minimal-pie-chart (_v7.2.0_) | [![Bundle size: React minimal pie chart][bundlephobia-badge]][bundlephobia] | 2.59 KB | ~52 ms | | ||
| | [rechart][recharts-github] (_v1.8.5_) | [![Bundle size: Recharts][recharts-bundlephobia-badge]][recharts-bundlephobia] | 97 KB | ~1900 ms | | ||
| | [victory-pie][victory-pie-github] (_v34.1.3_) | [![Bundle size: Victory pie][victory-pie-bundlephobia-badge]][victory-pie-bundlephobia] | 50.5 KB | ~1100 ms | | ||
| | [react-apexcharts][react-apexcharts-github] (_v1.3.7_) | [![Bundle size: React apec charts][react-apexcharts-bundlephobia-badge]][react-apexcharts-bundlephobia] | 114.7 KB | ~2300 ms | | ||
| | [react-vis][react-vis-github] (_v1.11.7_) | [![Bundle size: React vis][react-vis-bundlephobia-badge]][react-vis-bundlephobia] | 78.4 KB | ~1600 ms | | ||
@@ -68,33 +70,33 @@ \* Benchmark carried out with [size-limit](https://github.com/ai/size-limit) with a "real-world" setup: see [benchmark repo](https://github.com/toomuchdesign/react-pie-charts-size). (What matter here are not absolute values but the relation between magnitudes) | ||
| | Property | Type | Description | Default | | ||
| | --------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | ||
| | **data** _(required)_ | _Array_ | Source data which each element is a segment | - | | ||
| | **lineWidth** | _Number_ (%) | Line width of each segment. Percentage of chart's radio _(100 === full pie)_ | 100 | | ||
| | **startAngle** | _Number_ | Start angle of first segment | 0 | | ||
| | **lengthAngle** | _Number_ | Total angle taken by the chart _(can be negative to make the chart clockwise!)_ | 360 | | ||
| | **totalValue** | _Number_ | Total value represented by the full chart | - | | ||
| | **paddingAngle** | _Number_ | Angle between two segments | - | | ||
| | **rounded** | _Bool_ | Round line caps of each segment | false | | ||
| | **segmentsShift** | _Number_ (%), _Function_ | Translates segments radially. If `number`set provide percentage of chart's radio. If `function` return a value for each segment: `(data, dataIndex) => number` </br>(`props.radius` value might need to be adjusted to prevent segments from overflowing chart's boundaries) | - | | ||
| | **segmentsStyle** | _Object_ | Style object assigned to each segment | - | | ||
| | **segmentsTabIndex** | _Number_ | [`tabindex` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/tabindex) assigned to segments | - | | ||
| | **label** | _Boolean_, _ReactElement_, _Function_ | If `true` set, labels will be drawn automatically. If `ReactElement` set, the option can be the custom label element. If set a `function`, the function will be called to render customized label | false | | ||
| | **labelPosition** | _Number_ (%) | Label position from origin. Percentage of chart's radio _(50 === middle point)_ | 50 | | ||
| | **labelStyle** | _Object_ | Style object assigned to each label | - | | ||
| | **animate** | _Bool_ | Animate segments on component mount | false | | ||
| | **animationDuration** | _Number_ | Animation duration in ms | 500 | | ||
| | **animationEasing** | _String_ | A [CSS easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) | "ease-out" | | ||
| | **reveal** | _Number_ (%) | Turn on CSS animation and reveal just a percentage of each segment | - | | ||
| | **background** | _String_ | Segments' background color | - | | ||
| | **injectSvg** | _Function_ | Inject `<svg>` element with the output of the provided function (eg. gradients) | - | | ||
| | **radius** | _Number_ (%) | Radius of the pie. Percentage of component's width | 50 | | ||
| | **cx** | _Number_ (%) | x-coordinate of center. Percentage of component's width | 50 | | ||
| | **cy** | _Number_ (%) | y-coordinate of center. Percentage of component's height | 50 | | ||
| | **viewBoxSize** | _Array of Numbers_ | Width and Height of SVG `viewBox` attribute | [100, 100] | | ||
| | **onBlur** | _Function_ | `onBlur` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onClick** | _Function_ | `onClick` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onFocus** | _Function_ | `onFocus` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onKeyDown** | _Function_ | `onKeyDown` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onMouseOut** | _Function_ | `onMouseOut` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onMouseOver** | _Function_ | `onMouseOver` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | Property | Type | Description | Default | | ||
| | --------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | | ||
| | **data** _(required)_ | _Array_ | Source data which each element is a segment | - | | ||
| | **lineWidth** | _Number_ (%) | Line width of each segment. Percentage of chart's radio _(100 === full pie)_ | 100 | | ||
| | **startAngle** | _Number_ | Start angle of first segment | 0 | | ||
| | **lengthAngle** | _Number_ | Total angle taken by the chart _(can be negative to make the chart clockwise!)_ | 360 | | ||
| | **totalValue** | _Number_ | Total value represented by the full chart | - | | ||
| | **paddingAngle** | _Number_ | Angle between two segments | - | | ||
| | **rounded** | _Bool_ | Round line caps of each segment | false | | ||
| | **segmentsShift** | _Number_ (%), _Function_ | Translates segments radially. If `number`set provide percentage of chart's radio. If `function` return a value for each segment: `(data, dataIndex) => number \| undefined` </br>(`props.radius` value might need to be adjusted to prevent segments from overflowing chart's boundaries) | - | | ||
| | **segmentsStyle** | _Object_ | Style object assigned to each segment | - | | ||
| | **segmentsTabIndex** | _Number_ | [`tabindex` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/tabindex) assigned to segments | - | | ||
| | **label** | _Boolean_, _ReactElement_, _Function_ | If `true` set, labels will be drawn automatically. If `ReactElement` set, the option can be the custom label element. If set a `function`, the function will be called to render customized label | false | | ||
| | **labelPosition** | _Number_ (%) | Label position from origin. Percentage of chart's radio _(50 === middle point)_ | 50 | | ||
| | **labelStyle** | _Object_ | Style object assigned to each label | - | | ||
| | **animate** | _Bool_ | Animate segments on component mount | false | | ||
| | **animationDuration** | _Number_ | Animation duration in ms | 500 | | ||
| | **animationEasing** | _String_ | A [CSS easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) | "ease-out" | | ||
| | **reveal** | _Number_ (%) | Turn on CSS animation and reveal just a percentage of each segment | - | | ||
| | **background** | _String_ | Segments' background color | - | | ||
| | **injectSvg** | _Function_ | Inject `<svg>` element with the output of the provided function (eg. gradients) | - | | ||
| | **radius** | _Number_ (%) | Radius of the pie. Percentage of component's width | 50 | | ||
| | **cx** | _Number_ (%) | x-coordinate of center. Percentage of component's width | 50 | | ||
| | **cy** | _Number_ (%) | y-coordinate of center. Percentage of component's height | 50 | | ||
| | **viewBoxSize** | _Array of Numbers_ | Width and Height of SVG `viewBox` attribute | [100, 100] | | ||
| | **onBlur** | _Function_ | `onBlur` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onClick** | _Function_ | `onClick` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onFocus** | _Function_ | `onFocus` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onKeyDown** | _Function_ | `onKeyDown` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onMouseOut** | _Function_ | `onMouseOut` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
| | **onMouseOver** | _Function_ | `onMouseOver` event handler for each segment: `(event, data, dataIndex) => void` | - | | ||
@@ -248,2 +250,8 @@ ### About `props.data` | ||
| [victory-pie-github]: https://github.com/FormidableLabs/victory | ||
| [react-apexcharts-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/apexcharts | ||
| [react-apexcharts-bundlephobia]: https://bundlephobia.com/result?p=apexcharts | ||
| [react-apexcharts-github]: https://github.com/apexcharts/apexcharts.js | ||
| [react-vis-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/react-vis | ||
| [react-vis-bundlephobia]: https://bundlephobia.com/result?p=react-vis | ||
| [react-vis-github]: https://github.com/uber/react-vis | ||
| [storybook]: https://toomuchdesign.github.io/react-minimal-pie-chart/index.html | ||
@@ -250,0 +258,0 @@ [demo-interaction]: https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/story/interaction--click-mouseover-mouseout-callbacks |
@@ -29,3 +29,3 @@ import React, { Component } from 'react'; | ||
| rounded?: boolean; | ||
| segmentsShift?: number | ((data: Data, dataIndex: number) => number); | ||
| segmentsShift?: number | ((data: Data, dataIndex: number) => number | undefined); | ||
| segmentsStyle?: StyleObject; | ||
@@ -105,4 +105,4 @@ segmentsTabIndex?: number; | ||
| revealOverride?: null | number; | ||
| initialAnimationTimerId?: null | number; | ||
| initialAnimationRAFId?: null | number; | ||
| animationTimerId?: null | number; | ||
| animationRAFId?: null | number; | ||
| constructor(props: Props); | ||
@@ -109,0 +109,0 @@ componentDidMount(): void; |
@@ -0,11 +1,3 @@ | ||
| import type { ExtendedData } from '../commonTypes'; | ||
| import type { Props as ChartProps } from './Chart'; | ||
| export default function extendData({ data, lengthAngle: totalAngle, totalValue, paddingAngle, }: ChartProps): { | ||
| title?: string | number | undefined; | ||
| color: string; | ||
| value: number; | ||
| key?: string | number | undefined; | ||
| style?: import("../commonTypes").StyleObject | undefined; | ||
| percentage: number; | ||
| degrees: number; | ||
| startOffset: number; | ||
| }[]; | ||
| export default function extendData({ data, lengthAngle: totalAngle, totalValue, paddingAngle, }: ChartProps): ExtendedData; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
199806
1.05%- Lines of code
1556
0.26%- Number of lines in readme file
258
3.2%No dependency changes