gifted-charts-core 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gifted-charts-core",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
   "main": "./src/index.js",
   "files": [

package/src/PieChart/pro.d.ts

@@ -1,10 +1,16 @@
 import { PieChartPropsType, pieDataItem } from './types';
 import { LabelsPosition } from '../utils/types';
+interface IsvgProps {
+    height: number;
+    width: number;
+    viewBox: string;
+}
 interface IusePiePro {
     radius: number;
     total: number;
     donut?: boolean;
     strokeWidth: number;
+    maxStrokeWidth: number;
     isAnimated?: boolean;
     animationDuration: number;
     initial: string;
@@ -17,6 +23,9 @@ interface IusePiePro {
         y: number;
     };
     labelsPosition: LabelsPosition;
+    heightFactor: number;
+    height: number;
+    svgProps: IsvgProps;
 }
 export declare const usePiePro: (props: PieChartPropsType) => IusePiePro;
 export {};

package/src/PieChart/pro.js

@@ -26,10 +26,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { defaultAnimationDuration } from '../utils/constants';
 export var usePiePro = function (props) {
     var _a, _b;
-    var data = props.data, isAnimated = props.isAnimated, donut = props.donut, semiCircle = props.semiCircle, _c = props.radius, radius = _c === void 0 ? 120 : _c, _d = props.innerRadius, innerRadius = _d === void 0 ? donut ? radius / 2.5 : 0 : _d, _e = props.strokeWidth, strokeWidth = _e === void 0 ? 0 : _e, _f = props.edgesRadius, edgesRadius = _f === void 0 ? 0 : _f, _g = props.startAngle, startAngle = _g === void 0 ? 0 : _g;
+    var data = props.data, isAnimated = props.isAnimated, donut = props.donut, semiCircle = props.semiCircle, _c = props.radius, radius = _c === void 0 ? 120 : _c, _d = props.innerRadius, innerRadius = _d === void 0 ? donut ? radius / 2.5 : 0 : _d, _e = props.strokeWidth, strokeWidth = _e === void 0 ? 0 : _e, _f = props.edgesRadius, edgesRadius = _f === void 0 ? 0 : _f, _g = props.startAngle, startAngle = _g === void 0 ? 0 : _g, ring = props.ring;
     var endAngle = (_a = props.endAngle) !== null && _a !== void 0 ? _a : startAngle + Math.PI * (semiCircle ? 1 : 2);
     var total = data.reduce(function (acc, item) { return acc + (item === null || item === void 0 ? void 0 : item.value); }, 0);
     var animationDuration = (_b = props.animationDuration) !== null && _b !== void 0 ? _b : defaultAnimationDuration;
+    var maxStrokeWidth = Math.max.apply(Math, __spreadArray(__spreadArray([], __read(data.map(function (item) { var _a; return (_a = item.strokeWidth) !== null && _a !== void 0 ? _a : 0; })), false), [strokeWidth], false));
+    var heightFactor = semiCircle ? 1 : 2;
+    var height = radius + maxStrokeWidth;
+    var svgProps = {
+        height: (radius + maxStrokeWidth) * 2,
+        width: (radius + maxStrokeWidth) * 2,
+        viewBox: "".concat(-maxStrokeWidth, " ").concat(-maxStrokeWidth - (semiCircle ? height / 2 : 0), " ").concat((radius + maxStrokeWidth) * 2, " ").concat((radius + maxStrokeWidth) * 2)
+    };
     //   let endAngleLocal = 0
     var addValues = function (index) {
         var _a;
@@ -105,7 +113,9 @@ export var usePiePro = function (props) {
             var _a = getCoordinates(0, (radius - innerRadius) / (radius / 20)), startInnerX = _a.startInnerX, startInnerY = _a.startInnerY, startOuterX = _a.startOuterX, startOuterY = _a.startOuterY;
             return "M".concat(startInnerX, ",").concat(startInnerY, " L").concat(startOuterX, ",").concat(startOuterY, " ");
         }
-        return "M".concat(radius + innerRadius, ",").concat(radius, " h").concat(radius - innerRadius, " ");
+        return ring
+            ? "M".concat(radius * 2, ",").concat(radius)
+            : "M".concat(radius + innerRadius, ",").concat(radius, " h").concat(radius - innerRadius, " ");
     };
     var getPath = function (index, totalParam) {
         var _a, _b;
@@ -116,8 +126,13 @@ export var usePiePro = function (props) {
                 ? 1
                 : 0;
         var arc = "A".concat(radius + ((_b = props.strokeWidth) !== null && _b !== void 0 ? _b : 0) / 2, ",").concat(radius, " 0 ").concat(isLargeArc, " 0 ");
-        var path = "".concat(arc, " ").concat(endOuterX, ", ").concat(endOuterY, "\n      L").concat(radius, ",").concat(radius, " ");
-        initial = "M".concat(radius, ",").concat(radius, " L").concat(endOuterX, ",").concat(endOuterY);
+        var path = "".concat(arc, " ").concat(endOuterX, ", ").concat(endOuterY, " ");
+        if (!ring) {
+            path += "L".concat(radius, ",").concat(radius, " ");
+        }
+        initial = ring
+            ? "M".concat(endOuterX, ",").concat(endOuterY, " ")
+            : "M".concat(radius, ",").concat(radius, " L").concat(endOuterX, ",").concat(endOuterY);
         return path;
     };
     var getDonutPath = function (index, item, totalParam) {
@@ -131,7 +146,11 @@ export var usePiePro = function (props) {
         var cropAtEnd = !!(index === data.length - 1 &&
             (item.isEndEdgeCurved || item.endEdgeRadius));
         var _c = getCoordinates(index, cropAtEnd ? additionalForEnd : additionalForStart, !cropAtEnd, cropAtEnd, totalParam), startInnerX = _c.startInnerX, startInnerY = _c.startInnerY, endOuterX = _c.endOuterX, endOuterY = _c.endOuterY, endInnerX = _c.endInnerX, endInnerY = _c.endInnerY;
-        var isLargeArc = ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) / (totalParam !== null && totalParam !== void 0 ? totalParam : total) > 0.5 ? 1 : 0;
+        var isLargeArc = semiCircle
+            ? 0
+            : ((_a = data[index]) === null || _a === void 0 ? void 0 : _a.value) / (totalParam !== null && totalParam !== void 0 ? totalParam : total) > 0.5
+                ? 1
+                : 0;
         var innerArc = "A".concat(innerRadius, ",").concat(innerRadius, " 0 ").concat(isLargeArc, " 1 ");
         var outerArc = "A".concat(radius + ((_b = props.strokeWidth) !== null && _b !== void 0 ? _b : 0) / 2, ",").concat(radius, " 0 ").concat(isLargeArc, " 0 ");
         var path = "".concat(outerArc, " ").concat(endOuterX, ", ").concat(endOuterY, "\n      L").concat(endInnerX, ",").concat(endInnerY, " M").concat(endInnerX, ",").concat(endInnerY, " ").concat(innerArc, " ").concat(startInnerX, ",").concat(startInnerY);
@@ -160,17 +179,13 @@ export var usePiePro = function (props) {
         var path = "M".concat(endInnerX, ",").concat(endInnerY, " A").concat(edgeRadius, ",").concat(edgeRadius, " 0 0 1 ").concat(endOuterX, ",").concat(endOuterY);
         return path;
     };
-    var dataForInitialPath = isAnimated
-        ? data
-        : __spreadArray(__spreadArray([], __read(data), false), [{ value: total * 100 }], false);
-    var dataForFinalPath = isAnimated ? data : __spreadArray(__spreadArray([], __read(data), false), [{ value: 0 }], false);
-    var dInitial = dataForInitialPath.map(function (item, index) {
+    var dInitial = data.map(function (item, index) {
         return "".concat(initial || getInitial(item), " ").concat(donut
             ? getDonutPath(index, item, total * 101)
             : getPath(index, total * 101));
     });
     initial = '';
-    var dFinal = dataForFinalPath.map(function (item, index) {
+    var dFinal = data.map(function (item, index) {
         return "".concat(initial || getInitial(item), " ").concat(donut ? getDonutPath(index, item) : getPath(index));
     });
     return {
@@ -178,6 +193,7 @@ export var usePiePro = function (props) {
         total: total,
         donut: donut,
         strokeWidth: strokeWidth,
+        maxStrokeWidth: maxStrokeWidth,
         isAnimated: isAnimated,
         animationDuration: animationDuration,
         initial: initial,
@@ -186,6 +202,9 @@ export var usePiePro = function (props) {
         getStartCaps: getStartCaps,
         getEndCaps: getEndCaps,
         getTextCoordinates: getTextCoordinates,
-        labelsPosition: labelsPosition
+        labelsPosition: labelsPosition,
+        heightFactor: heightFactor,
+        height: height,
+        svgProps: svgProps
     };
 };

package/src/PieChart/pro.ts

@@ -2,11 +2,18 @@ import { defaultAnimationDuration } from '../utils/constants'
 import { PieChartPropsType, pieDataItem } from './types'
 import { LabelsPosition } from '../utils/types'
 
+interface IsvgProps {
+  height: number
+  width: number
+  viewBox: string
+}
+
 interface IusePiePro {
   radius: number
   total: number
   donut?: boolean
   strokeWidth: number
+  maxStrokeWidth: number
   isAnimated?: boolean
   animationDuration: number
   initial: string
@@ -19,6 +26,9 @@ interface IusePiePro {
     labelPos?: LabelsPosition
   ) => { x: number; y: number }
   labelsPosition: LabelsPosition
+  heightFactor: number
+  height: number
+  svgProps: IsvgProps
 }
 
 export const usePiePro = (props: PieChartPropsType): IusePiePro => {
@@ -31,12 +41,29 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
     innerRadius = donut ? radius / 2.5 : 0,
     strokeWidth = 0,
     edgesRadius = 0,
-    startAngle = 0
+    startAngle = 0,
+    ring
   } = props
   let endAngle = props.endAngle ?? startAngle + Math.PI * (semiCircle ? 1 : 2)
   const total = data.reduce((acc, item) => acc + item?.value, 0)
   const animationDuration = props.animationDuration ?? defaultAnimationDuration
 
+  const maxStrokeWidth = Math.max(
+    ...data.map((item) => item.strokeWidth ?? 0),
+    strokeWidth
+  )
+
+  const heightFactor = semiCircle ? 1 : 2
+  const height = radius + maxStrokeWidth
+
+  const svgProps = {
+    height: (radius + maxStrokeWidth) * 2,
+    width: (radius + maxStrokeWidth) * 2,
+    viewBox: `${-maxStrokeWidth} ${
+      -maxStrokeWidth - (semiCircle ? height / 2 : 0)
+    } ${(radius + maxStrokeWidth) * 2} ${(radius + maxStrokeWidth) * 2}`
+  }
+
   //   let endAngleLocal = 0
 
   const addValues = (index: number) => {
@@ -130,7 +157,9 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
 
       return `M${startInnerX},${startInnerY} L${startOuterX},${startOuterY} `
     }
-    return `M${radius + innerRadius},${radius} h${radius - innerRadius} `
+    return ring
+      ? `M${radius * 2},${radius}`
+      : `M${radius + innerRadius},${radius} h${radius - innerRadius} `
   }
   const getPath = (index: number, totalParam?: number) => {
     const { endOuterX, endOuterY } = getCoordinates(
@@ -150,10 +179,15 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
     const arc = `A${
       radius + (props.strokeWidth ?? 0) / 2
     },${radius} 0 ${isLargeArc} 0 `
-    const path = `${arc} ${endOuterX}, ${endOuterY}
-      L${radius},${radius} `
+    let path = `${arc} ${endOuterX}, ${endOuterY} `
+
+    if (!ring) {
+      path += `L${radius},${radius} `
+    }
 
-    initial = `M${radius},${radius} L${endOuterX},${endOuterY}`
+    initial = ring
+      ? `M${endOuterX},${endOuterY} `
+      : `M${radius},${radius} L${endOuterX},${endOuterY}`
 
     return path
   }
@@ -190,8 +224,11 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
       cropAtEnd,
       totalParam
     )
-
-    const isLargeArc = data[index]?.value / (totalParam ?? total) > 0.5 ? 1 : 0
+    const isLargeArc = semiCircle
+      ? 0
+      : data[index]?.value / (totalParam ?? total) > 0.5
+      ? 1
+      : 0
 
     const innerArc = `A${innerRadius},${innerRadius} 0 ${isLargeArc} 1 `
     const outerArc = `A${
@@ -233,12 +270,7 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
     return path
   }
 
-  const dataForInitialPath = isAnimated
-    ? data
-    : [...data, { value: total * 100 }]
-  const dataForFinalPath = isAnimated ? data : [...data, { value: 0 }]
-
-  const dInitial = dataForInitialPath.map(
+  const dInitial = data.map(
     (item, index) =>
       `${initial || getInitial(item)} ${
         donut
@@ -248,7 +280,7 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
   )
 
   initial = ''
-  const dFinal = dataForFinalPath.map(
+  const dFinal = data.map(
     (item, index) =>
       `${initial || getInitial(item)} ${
         donut ? getDonutPath(index, item) : getPath(index)
@@ -260,6 +292,7 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
     total,
     donut,
     strokeWidth,
+    maxStrokeWidth,
     isAnimated,
     animationDuration,
     initial,
@@ -268,6 +301,9 @@ export const usePiePro = (props: PieChartPropsType): IusePiePro => {
     getStartCaps,
     getEndCaps,
     getTextCoordinates,
-    labelsPosition
+    labelsPosition,
+    heightFactor,
+    height,
+    svgProps
   }
 }

package/src/PieChart/types.d.ts

@@ -5,6 +5,7 @@ export interface PieChartPropsType {
     radius?: number;
     isThreeD?: boolean;
     donut?: boolean;
+    ring?: boolean;
     innerRadius?: number;
     shadow?: boolean;
     innerCircleColor?: ColorValue;
@@ -16,6 +17,7 @@ export interface PieChartPropsType {
     shadowWidth?: number;
     strokeWidth?: number;
     strokeColor?: string;
+    strokeDashArray?: number[];
     backgroundColor?: string;
     data: pieDataItem[];
     semiCircle?: boolean;
@@ -79,6 +81,7 @@ export interface pieDataItem {
     onPress?: Function;
     onLabelPress?: Function;
     strokeWidth?: number;
+    strokeDashArray?: number[];
     strokeColor?: string;
     focused?: boolean;
     peripheral?: boolean;

package/src/PieChart/types.ts

@@ -6,6 +6,7 @@ export interface PieChartPropsType {
   radius?: number
   isThreeD?: boolean
   donut?: boolean
+  ring?: boolean
   innerRadius?: number
   shadow?: boolean
   innerCircleColor?: ColorValue
@@ -17,6 +18,7 @@ export interface PieChartPropsType {
   shadowWidth?: number
   strokeWidth?: number
   strokeColor?: string
+  strokeDashArray?: number[]
   backgroundColor?: string
   data: pieDataItem[]
   semiCircle?: boolean
@@ -82,6 +84,7 @@ export interface pieDataItem {
   onPress?: Function
   onLabelPress?: Function
   strokeWidth?: number
+  strokeDashArray?: number[]
   strokeColor?: string
   focused?: boolean
   peripheral?: boolean