gifted-charts-core 0.1.28 → 0.1.29

package/dist/LineChart/types.d.ts

@@ -81,6 +81,7 @@ export interface LineChartPropsType {
     showReferenceLine3?: boolean;
     referenceLine3Config?: referenceConfigType;
     referenceLine3Position?: number;
+    referenceLinesOverChartContent?: boolean;
     showVerticalLines?: boolean;
     verticalLinesUptoDataPoint?: boolean;
     verticalLinesThickness?: number;

package/dist/PieChart/index.d.ts

@@ -2,7 +2,7 @@ import { type pieDataItem, type PieChartPropsType } from './types';
 import { type ColorValue } from 'react-native';
 interface IusePieChart {
     radius: number;
-    extraRadiusForFocused: number;
+    extraRadius: number;
     pi: number;
     selectedIndex: number;
     setSelectedIndex: (index: number) => void;

package/dist/PieChart/index.js

@@ -19,7 +19,11 @@ import { getTextSizeForPieLabels } from '../utils';
 export var usePieChart = function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     var radius = (_a = props.radius) !== null && _a !== void 0 ? _a : 120;
-    var extraRadiusForFocused = (_b = props.extraRadiusForFocused) !== null && _b !== void 0 ? _b : (((_c = props.focusOnPress) !== null && _c !== void 0 ? _c : props.sectionAutoFocus) ? radius / 10 : 0);
+    var extraRadius = (_b = props.extraRadius) !== null && _b !== void 0 ? _b : (props.showExternalLabels
+        ? 40
+        : ((_c = props.focusOnPress) !== null && _c !== void 0 ? _c : props.sectionAutoFocus)
+            ? radius / 10
+            : 0);
     var pi = props.semiCircle ? Math.PI / 2 : Math.PI;
     var _w = __read(useState((_d = props.focusedPieIndex) !== null && _d !== void 0 ? _d : -1), 2), selectedIndex = _w[0], setSelectedIndex = _w[1]; // at the start, nothing is selected
     // because we're going to use a useEffect, we need startAngle and total to be state variables
@@ -94,7 +98,7 @@ export var usePieChart = function (props) {
         : 0;
     return {
         radius: radius,
-        extraRadiusForFocused: extraRadiusForFocused,
+        extraRadius: extraRadius,
         pi: pi,
         selectedIndex: selectedIndex,
         setSelectedIndex: setSelectedIndex,

package/dist/PieChart/main.d.ts

@@ -45,5 +45,39 @@ export declare const getPieChartMainProps: (props: PieChartMainProps) => {
     acc: number;
     paddingHorizontal: number;
     paddingVertical: number;
-    extraRadiusForFocused: number;
+    extraRadius: number;
+    showExternalLabels: boolean | undefined;
+    labelLineConfig: {
+        length: number;
+        tailLength: number;
+        color: import("react-native").ColorValue;
+        thickness: number;
+        labelComponentWidth: number;
+        labelComponentHeight: number;
+        labelComponentMargin: number;
+    };
+    externalLabelComponent: ((item?: pieDataItem, index?: number) => any) | undefined;
+    getExternaLabelProperties: (item: pieDataItem, mx: number, my: number, cx: number, cy: number) => {
+        labelLineColor: string;
+        labelLineThickness: number;
+        labelComponentHeight: number;
+        inX: number;
+        inY: number;
+        outX: number;
+        outY: number;
+        finalX: number;
+        labelComponentX: number;
+        localExternalLabelComponent: null;
+    } | {
+        labelLineColor: import("react-native").ColorValue;
+        labelLineThickness: number;
+        labelComponentHeight: number;
+        inX: number;
+        inY: number;
+        outX: number;
+        outY: number;
+        finalX: number;
+        labelComponentX: number;
+        localExternalLabelComponent: ((item?: pieDataItem, index?: number) => any) | undefined;
+    };
 };

package/dist/PieChart/main.js

@@ -34,10 +34,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { getTextSizeForPieLabels } from '../utils';
+import { emptyExternaLabelProperties, getTextSizeForPieLabels } from '../utils';
 export var getPieChartMainProps = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-    var isThreeD = props.isThreeD, isBiggerPie = props.isBiggerPie, paddingHorizontal = props.paddingHorizontal, paddingVertical = props.paddingVertical, extraRadiusForFocused = props.extraRadiusForFocused;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    var isThreeD = props.isThreeD, isBiggerPie = props.isBiggerPie, paddingHorizontal = props.paddingHorizontal, paddingVertical = props.paddingVertical, extraRadius = props.extraRadius, showExternalLabels = props.showExternalLabels, externalLabelComponent = props.externalLabelComponent;
     var propData = props.data;
     var data = [];
     var itemHasInnerComponent = false;
@@ -72,7 +72,16 @@ export var getPieChartMainProps = function (props) {
     var showText = (_m = props.showText) !== null && _m !== void 0 ? _m : false;
     var textColor = (_o = props.textColor) !== null && _o !== void 0 ? _o : '';
     var textSize = getTextSizeForPieLabels((_p = props.textSize) !== null && _p !== void 0 ? _p : 0, radius);
-    var tiltAngle = (_q = props.tiltAngle) !== null && _q !== void 0 ? _q : '55deg';
+    var labelLineConfig = {
+        length: (_r = (_q = props.labelLineConfig) === null || _q === void 0 ? void 0 : _q.length) !== null && _r !== void 0 ? _r : 10,
+        tailLength: (_t = (_s = props.labelLineConfig) === null || _s === void 0 ? void 0 : _s.tailLength) !== null && _t !== void 0 ? _t : 8,
+        color: (_v = (_u = props.labelLineConfig) === null || _u === void 0 ? void 0 : _u.color) !== null && _v !== void 0 ? _v : 'black',
+        thickness: (_x = (_w = props.labelLineConfig) === null || _w === void 0 ? void 0 : _w.thickness) !== null && _x !== void 0 ? _x : 1,
+        labelComponentWidth: (_z = (_y = props.labelLineConfig) === null || _y === void 0 ? void 0 : _y.labelComponentWidth) !== null && _z !== void 0 ? _z : 20,
+        labelComponentHeight: (_1 = (_0 = props.labelLineConfig) === null || _0 === void 0 ? void 0 : _0.labelComponentHeight) !== null && _1 !== void 0 ? _1 : 10,
+        labelComponentMargin: (_3 = (_2 = props.labelLineConfig) === null || _2 === void 0 ? void 0 : _2.labelComponentMargin) !== null && _3 !== void 0 ? _3 : 4
+    };
+    var tiltAngle = (_4 = props.tiltAngle) !== null && _4 !== void 0 ? _4 : '55deg';
     if (tiltAngle &&
         !isNaN(Number(tiltAngle)) &&
         !(tiltAngle + '').endsWith('deg')) {
@@ -84,12 +93,12 @@ export var getPieChartMainProps = function (props) {
         : donut || props.centerLabelComponent
             ? 'outward'
             : 'mid';
-    var showTextBackground = (_r = props.showTextBackground) !== null && _r !== void 0 ? _r : false;
-    var textBackgroundColor = (_s = props.textBackgroundColor) !== null && _s !== void 0 ? _s : 'white';
-    var showValuesAsLabels = (_t = props.showValuesAsLabels) !== null && _t !== void 0 ? _t : false;
-    var showGradient = (_u = props.showGradient) !== null && _u !== void 0 ? _u : false;
-    var gradientCenterColor = (_v = props.gradientCenterColor) !== null && _v !== void 0 ? _v : 'white';
-    var toggleFocusOnPress = (_w = props.toggleFocusOnPress) !== null && _w !== void 0 ? _w : true;
+    var showTextBackground = (_5 = props.showTextBackground) !== null && _5 !== void 0 ? _5 : false;
+    var textBackgroundColor = (_6 = props.textBackgroundColor) !== null && _6 !== void 0 ? _6 : 'white';
+    var showValuesAsLabels = (_7 = props.showValuesAsLabels) !== null && _7 !== void 0 ? _7 : false;
+    var showGradient = (_8 = props.showGradient) !== null && _8 !== void 0 ? _8 : false;
+    var gradientCenterColor = (_9 = props.gradientCenterColor) !== null && _9 !== void 0 ? _9 : 'white';
+    var toggleFocusOnPress = (_10 = props.toggleFocusOnPress) !== null && _10 !== void 0 ? _10 : true;
     var minShiftX = 0;
     var maxShiftX = 0;
     var minShiftY = 0;
@@ -134,6 +143,50 @@ export var getPieChartMainProps = function (props) {
         return pAcc + (acc - pAcc) / 2;
     });
     pData = __spreadArray([0], __read(pData), false);
+    var getExternaLabelProperties = function (item, mx, my, cx, cy) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        if (!showExternalLabels)
+            return emptyExternaLabelProperties;
+        var labelLineLength = (_b = (_a = item.labelLineConfig) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : labelLineConfig.length;
+        var labelTailLength = (_d = (_c = item.labelLineConfig) === null || _c === void 0 ? void 0 : _c.tailLength) !== null && _d !== void 0 ? _d : labelLineConfig.tailLength;
+        var labelLineColor = (_f = (_e = item.labelLineConfig) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : labelLineConfig.color;
+        var labelLineThickness = (_h = (_g = item.labelLineConfig) === null || _g === void 0 ? void 0 : _g.thickness) !== null && _h !== void 0 ? _h : labelLineConfig.thickness;
+        var labelComponentWidth = (_k = (_j = item.labelLineConfig) === null || _j === void 0 ? void 0 : _j.labelComponentWidth) !== null && _k !== void 0 ? _k : labelLineConfig.labelComponentWidth;
+        var labelComponentHeight = (_m = (_l = item.labelLineConfig) === null || _l === void 0 ? void 0 : _l.labelComponentHeight) !== null && _m !== void 0 ? _m : labelLineConfig.labelComponentHeight;
+        var labelComponentMargin = (_p = (_o = item.labelLineConfig) === null || _o === void 0 ? void 0 : _o.labelComponentMargin) !== null && _p !== void 0 ? _p : labelLineConfig.labelComponentMargin;
+        var isRightHalf = mx > cx;
+        var slope = (my - cy) / (mx - cx);
+        var xFactor = labelTailLength / Math.sqrt(1 + slope * slope);
+        var yFactor = (labelTailLength * slope) / Math.sqrt(1 + slope * slope);
+        var outX = mx + (isRightHalf ? xFactor : -xFactor);
+        var outY = my + (isRightHalf ? yFactor : -yFactor);
+        var inX = mx + (isRightHalf ? -xFactor : xFactor);
+        var inY = my + (isRightHalf ? -yFactor : yFactor);
+        var finalX = isRightHalf ? cx * 2 + labelLineLength : -labelLineLength;
+        finalX = isRightHalf
+            ? finalX > outX
+                ? finalX
+                : outX
+            : finalX < outX
+                ? finalX
+                : outX;
+        var labelComponentX = isRightHalf
+            ? finalX + labelComponentMargin
+            : finalX - labelComponentWidth - labelComponentMargin;
+        var localExternalLabelComponent = (_q = item.externalLabelComponent) !== null && _q !== void 0 ? _q : props.externalLabelComponent;
+        return {
+            labelLineColor: labelLineColor,
+            labelLineThickness: labelLineThickness,
+            labelComponentHeight: labelComponentHeight,
+            inX: inX,
+            inY: inY,
+            outX: outX,
+            outY: outY,
+            finalX: finalX,
+            labelComponentX: labelComponentX,
+            localExternalLabelComponent: localExternalLabelComponent
+        };
+    };
     return {
         isThreeD: isThreeD,
         isBiggerPie: isBiggerPie,
@@ -180,6 +233,10 @@ export var getPieChartMainProps = function (props) {
         acc: acc,
         paddingHorizontal: paddingHorizontal,
         paddingVertical: paddingVertical,
-        extraRadiusForFocused: extraRadiusForFocused
+        extraRadius: extraRadius,
+        showExternalLabels: showExternalLabels,
+        labelLineConfig: labelLineConfig,
+        externalLabelComponent: externalLabelComponent,
+        getExternaLabelProperties: getExternaLabelProperties
     };
 };

package/dist/PieChart/types.d.ts

@@ -1,6 +1,6 @@
 import { type ColorValue } from 'react-native';
 import { type FontStyle } from 'react-native-svg';
-import { LabelsPosition } from '../utils/types';
+import { LabelLineConfig, LabelsPosition } from '../utils/types';
 export interface PieChartPropsType {
     radius?: number;
     isThreeD?: boolean;
@@ -44,7 +44,7 @@ export interface PieChartPropsType {
     setSelectedIndex?: Function;
     sectionAutoFocus?: boolean;
     onLabelPress?: Function;
-    extraRadiusForFocused?: number;
+    extraRadius?: number;
     inwardExtraLengthForFocused?: number;
     pieInnerComponent?: (item?: pieDataItem, index?: number) => any;
     pieInnerComponentHeight?: number;
@@ -59,6 +59,9 @@ export interface PieChartPropsType {
     isAnimated?: boolean;
     animationDuration?: number;
     focusedPieIndex?: number;
+    showExternalLabels?: boolean;
+    labelLineConfig?: LabelLineConfig;
+    externalLabelComponent?: (item?: pieDataItem, index?: number) => any;
 }
 export interface pieDataItem {
     value: number;
@@ -91,11 +94,13 @@ export interface pieDataItem {
     isEndEdgeCurved?: boolean;
     startEdgeRadius?: number;
     endEdgeRadius?: number;
+    labelLineConfig?: LabelLineConfig;
+    externalLabelComponent?: (item?: pieDataItem, index?: number) => any;
 }
 export interface PieChartMainProps extends PieChartPropsType {
     setSelectedIndex: Function;
     isBiggerPie?: boolean;
     paddingHorizontal: number;
     paddingVertical: number;
-    extraRadiusForFocused: number;
+    extraRadius: number;
 }

package/dist/index.d.ts

@@ -36,4 +36,4 @@ export { type StripAndLabelProps } from './components/common/types';
 /***********************************************************************************************************************/
 export { getCumulativeWidth, getLighterColor, svgQuadraticCurvePath, svgPath, bezierCommand, getSegmentString, getCurvePathWithSegments, getPreviousSegmentsLastPoint, getPathWithHighlight, getRegionPathObjects, getSegmentedPathObjects, getArrowPoints, getAxesAndRulesProps, getExtendedContainerHeightWithPadding, getSecondaryDataWithOffsetIncluded, getArrowProperty, getAllArrowProperties, maxAndMinUtil, computeMaxAndMinItems, getLabelTextUtil, getXForLineInBar, getYForLineInBar, clone, getLineConfigForBarChart, adjustToOffset } from './utils';
 export { chartTypes, yAxisSides, loc, SEGMENT_START, SEGMENT_END, RANGE_ENTER, RANGE_EXIT, STOP, ruleTypes, AxesAndRulesDefaults, defaultArrowConfig, BarDefaults, defaultLineConfig, LineDefaults, defaultPointerConfig, pieColors, populationDefaults, defaultAnimationDuration } from './utils/constants';
-export { type RuleType, type RuleTypes, type RulesConfig, CurveType, EdgePosition, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type horizSectionPropTypes, type HorizSectionsType, type BarAndLineChartsWrapperTypes, type Pointer, type HighlightedRange, type LineSegment, type LineSvgProps, type LineProperties, type DataSet, Framework, type XAxisConfig, type LineInBarChartPropsType, type DataPointProps, type Linecap, type IntersectionAreaConfig } from './utils/types';
+export { type RuleType, type RuleTypes, type RulesConfig, CurveType, EdgePosition, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type horizSectionPropTypes, type HorizSectionsType, type BarAndLineChartsWrapperTypes, type Pointer, type HighlightedRange, type LineSegment, type LineSvgProps, type LineProperties, type DataSet, Framework, type XAxisConfig, type LineInBarChartPropsType, type DataPointProps, type Linecap, type IntersectionAreaConfig, type LabelLineConfig } from './utils/types';

package/dist/utils/index.d.ts

@@ -99,4 +99,25 @@ export declare const getTextSizeForPieLabels: (textSize: number, radius: number)
 export declare const adjustToOffset: (data: lineDataItem[], yAxisOffset?: number) => lineDataItem[];
 export declare const getSanitisedData: (data: lineDataItem[] | undefined, dataSanitisationProps: IDataSanitisationProps) => lineDataItem[];
 export declare const getStrokeDashArray: (strokeDash?: number[] | string, framework?: Framework) => number[] | string | undefined;
+export declare const emptyExternaLabelProperties: {
+    labelLineColor: string;
+    labelLineThickness: number;
+    labelComponentHeight: number;
+    inX: number;
+    inY: number;
+    outX: number;
+    outY: number;
+    finalX: number;
+    labelComponentX: number;
+    localExternalLabelComponent: null;
+};
+export declare const defaultLabelLineConfig: {
+    length: number;
+    tailLength: number;
+    color: string;
+    thickness: number;
+    labelComponentWidth: number;
+    labelComponentHeight: number;
+    labelComponentMargin: number;
+};
 export {};

package/dist/utils/index.js

@@ -910,7 +910,9 @@ export var getInterpolatedData = function (dataParam, showDataPointsForMissingVa
                 .slice()
                 .reverse()
                 .findIndex(function (item) { return typeof item.value === 'number'; });
-            var secondPreIndex = tempSecondPreIndex >= 0 ? secondPreCount - tempSecondPreIndex : tempSecondPreIndex;
+            var secondPreIndex = tempSecondPreIndex >= 0
+                ? secondPreCount - tempSecondPreIndex
+                : tempSecondPreIndex;
             count = preValidIndex - secondPreIndex;
             step = (data[secondPreIndex].value - data[preValidIndex].value) / count;
             data[index].value =
@@ -1024,3 +1026,24 @@ export var getStrokeDashArray = function (strokeDash, framework) {
     }
     return strokeDashArrayOrString;
 };
+export var emptyExternaLabelProperties = {
+    labelLineColor: '',
+    labelLineThickness: 0,
+    labelComponentHeight: 0,
+    inX: 0,
+    inY: 0,
+    outX: 0,
+    outY: 0,
+    finalX: 0,
+    labelComponentX: 0,
+    localExternalLabelComponent: null
+};
+export var defaultLabelLineConfig = {
+    length: 10,
+    tailLength: 8,
+    color: 'black',
+    thickness: 1,
+    labelComponentWidth: 20,
+    labelComponentHeight: 10,
+    labelComponentMargin: 4
+};

package/dist/utils/types.d.ts

@@ -400,4 +400,13 @@ export interface DataSet {
 export interface IntersectionAreaConfig {
     fillColor?: ColorValue;
 }
+export interface LabelLineConfig {
+    length?: number;
+    tailLength?: number;
+    color?: ColorValue;
+    thickness?: number;
+    labelComponentWidth?: number;
+    labelComponentHeight?: number;
+    labelComponentMargin?: number;
+}
 export {};

package/package.json

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