gifted-charts-core 0.1.43 → 0.1.44

package/dist/LineChart/types.d.ts

@@ -20,6 +20,11 @@ export interface LineChartPropsType {
     data3?: lineDataItem[];
     data4?: lineDataItem[];
     data5?: lineDataItem[];
+    spacing1?: number;
+    spacing2?: number;
+    spacing3?: number;
+    spacing4?: number;
+    spacing5?: number;
     dataSet?: DataSet[];
     zIndex1?: number;
     zIndex2?: number;
@@ -320,6 +325,7 @@ export interface lineDataItem {
     textShiftY?: number;
     textColor?: string;
     textFontSize?: number;
+    spacing?: number;
     hideDataPoint?: boolean;
     dataPointHeight?: number;
     dataPointWidth?: number;

package/dist/PieChart/main.d.ts

@@ -20,6 +20,20 @@ export declare const getPieChartMainProps: (props: PieChartMainProps) => {
     strokeWidth: number;
     strokeColor: string;
     innerRadius: number;
+    showTooltip: boolean | undefined;
+    tooltipWidth: number | undefined;
+    persistTooltip: boolean | undefined;
+    tooltipDuration: number;
+    tooltipComponent: Function | undefined;
+    tooltipVerticalShift: number;
+    tooltipHorizontalShift: number;
+    showValuesAsTooltipText: boolean;
+    tooltipTextNoOfLines: number;
+    tooltipBackgroundColor: import("react-native").ColorValue;
+    tooltipBorderRadius: number;
+    tooltipSelectedIndex: number;
+    setTooltipSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    getTooltipText: (index: number) => string;
     showText: boolean;
     textColor: string;
     textSize: number;
@@ -87,4 +101,7 @@ export declare const getPieChartMainProps: (props: PieChartMainProps) => {
     };
     coordinates: any[];
     onPressed: (item: pieDataItem, index: number) => void;
+    font: string | undefined;
+    fontWeight: string | undefined;
+    fontStyle: import("react-native-svg").FontStyle | undefined;
 };

package/dist/PieChart/main.js

@@ -34,12 +34,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import { useRef, useState } from 'react';
 import { defaultLabelLineConfig, emptyExternaLabelProperties, getTextSizeForPieLabels } from '../utils';
+import { PieTooltipDefaults } from '../utils/constants';
 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, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12;
-    var isThreeD = props.isThreeD, isBiggerPie = props.isBiggerPie, paddingHorizontal = props.paddingHorizontal, paddingVertical = props.paddingVertical, extraRadius = props.extraRadius, showExternalLabels = props.showExternalLabels, externalLabelComponent = props.externalLabelComponent;
+    var isThreeD = props.isThreeD, isBiggerPie = props.isBiggerPie, paddingHorizontal = props.paddingHorizontal, paddingVertical = props.paddingVertical, extraRadius = props.extraRadius, showExternalLabels = props.showExternalLabels, externalLabelComponent = props.externalLabelComponent, showTooltip = props.showTooltip, tooltipWidth = props.tooltipWidth, persistTooltip = props.persistTooltip, tooltipComponent = props.tooltipComponent, _13 = props.tooltipDuration, tooltipDuration = _13 === void 0 ? PieTooltipDefaults.tooltipDuration : _13, _14 = props.tooltipVerticalShift, tooltipVerticalShift = _14 === void 0 ? PieTooltipDefaults.tooltipVerticalShift : _14, _15 = props.tooltipHorizontalShift, tooltipHorizontalShift = _15 === void 0 ? PieTooltipDefaults.tooltipHorizontalShift : _15, _16 = props.showValuesAsTooltipText, showValuesAsTooltipText = _16 === void 0 ? PieTooltipDefaults.showValuesAsTooltipText : _16, _17 = props.tooltipTextNoOfLines, tooltipTextNoOfLines = _17 === void 0 ? PieTooltipDefaults.tooltipTextNoOfLines : _17, _18 = props.tooltipBackgroundColor, tooltipBackgroundColor = _18 === void 0 ? PieTooltipDefaults.tooltipBackgroundColor : _18, _19 = props.tooltipBorderRadius, tooltipBorderRadius = _19 === void 0 ? PieTooltipDefaults.tooltipBorderRadius : _19, font = props.font, fontWeight = props.fontWeight, fontStyle = props.fontStyle;
     var propData = props.data;
     var data = [];
+    var _20 = __read(useState(-1), 2), tooltipSelectedIndex = _20[0], setTooltipSelectedIndex = _20[1];
     var itemHasInnerComponent = false;
     if (propData) {
         for (var i = 0; i < propData.length; i++) {
@@ -220,12 +223,11 @@ export var getPieChartMainProps = function (props) {
             (item.shiftX || 0);
         var sy = cy * (1 - Math.cos(2 * pi * pData[index] + initialAngle)) +
             (item.shiftY || 0);
-        var ax = cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) +
-            (item.shiftX || 0);
-        var ay = cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) +
-            (item.shiftY || 0);
+        var ax = cx * (1 + Math.sin(2 * pi * nextItem + initialAngle)) + (item.shiftX || 0);
+        var ay = cy * (1 - Math.cos(2 * pi * nextItem + initialAngle)) + (item.shiftY || 0);
         coordinates[index] = { sx: sx, sy: sy, ax: ax, ay: ay };
     });
+    var timer = useRef(setTimeout(function () { })); // timer for tooltip
     var onPressed = function (item, index) {
         if (item.onPress) {
             item.onPress();
@@ -243,6 +245,26 @@ export var getPieChartMainProps = function (props) {
                 props.setSelectedIndex(index);
             }
         }
+        if (showTooltip) {
+            if (tooltipSelectedIndex === index) {
+                setTooltipSelectedIndex(-1);
+            }
+            else {
+                setTooltipSelectedIndex(index);
+                if (!persistTooltip) {
+                    clearTimeout(timer.current);
+                    timer.current = setTimeout(function () {
+                        setTooltipSelectedIndex(-1);
+                    }, tooltipDuration);
+                }
+            }
+        }
+    };
+    var getTooltipText = function (index) {
+        var _a, _b;
+        var item = data[index];
+        var tooltipText = (_b = (_a = item.tooltipText) !== null && _a !== void 0 ? _a : item.text) !== null && _b !== void 0 ? _b : (showValuesAsTooltipText ? item.value.toString() : '');
+        return tooltipText;
     };
     return {
         isThreeD: isThreeD,
@@ -265,6 +287,20 @@ export var getPieChartMainProps = function (props) {
         strokeWidth: strokeWidth,
         strokeColor: strokeColor,
         innerRadius: innerRadius,
+        showTooltip: showTooltip,
+        tooltipWidth: tooltipWidth,
+        persistTooltip: persistTooltip,
+        tooltipDuration: tooltipDuration,
+        tooltipComponent: tooltipComponent,
+        tooltipVerticalShift: tooltipVerticalShift,
+        tooltipHorizontalShift: tooltipHorizontalShift,
+        showValuesAsTooltipText: showValuesAsTooltipText,
+        tooltipTextNoOfLines: tooltipTextNoOfLines,
+        tooltipBackgroundColor: tooltipBackgroundColor,
+        tooltipBorderRadius: tooltipBorderRadius,
+        tooltipSelectedIndex: tooltipSelectedIndex,
+        setTooltipSelectedIndex: setTooltipSelectedIndex,
+        getTooltipText: getTooltipText,
         showText: showText,
         textColor: textColor,
         textSize: textSize,
@@ -296,6 +332,9 @@ export var getPieChartMainProps = function (props) {
         externalLabelComponent: externalLabelComponent,
         getExternaLabelProperties: getExternaLabelProperties,
         coordinates: coordinates,
-        onPressed: onPressed
+        onPressed: onPressed,
+        font: font,
+        fontWeight: fontWeight,
+        fontStyle: fontStyle
     };
 };

package/dist/PieChart/types.d.ts

@@ -31,6 +31,17 @@ export interface PieChartPropsType {
     textBackgroundColor?: string;
     textBackgroundRadius?: number;
     showValuesAsLabels?: boolean;
+    showTooltip?: boolean;
+    tooltipWidth?: number;
+    tooltipComponent?: Function;
+    persistTooltip?: boolean;
+    tooltipDuration?: number;
+    tooltipVerticalShift?: number;
+    tooltipHorizontalShift?: number;
+    showValuesAsTooltipText?: boolean;
+    tooltipTextNoOfLines?: number;
+    tooltipBackgroundColor?: ColorValue;
+    tooltipBorderRadius?: number;
     centerLabelComponent?: Function;
     tiltAngle?: string;
     initialAngle?: number;
@@ -69,6 +80,8 @@ export interface pieDataItem {
     shiftY?: number;
     color?: string;
     gradientCenterColor?: string;
+    tooltipText?: string;
+    tooltipComponent?: Function;
     text?: string;
     textColor?: string;
     textSize?: number;

package/dist/utils/constants.d.ts

@@ -253,3 +253,12 @@ export declare const populationDefaults: {
     prefix: string;
     suffix: string;
 };
+export declare const PieTooltipDefaults: {
+    tooltipDuration: number;
+    tooltipVerticalShift: number;
+    tooltipHorizontalShift: number;
+    showValuesAsTooltipText: boolean;
+    tooltipTextNoOfLines: number;
+    tooltipBackgroundColor: string;
+    tooltipBorderRadius: number;
+};

package/dist/utils/constants.js

@@ -207,7 +207,7 @@ export var defaultLineConfig = {
     isSecondary: false,
     focusEnabled: false,
     focusedDataPointColor: LineDefaults.focusedDataPointColor,
-    focusedDataPointRadius: LineDefaults.dataPointsRadius,
+    focusedDataPointRadius: LineDefaults.dataPointsRadius
 };
 export var defaultPointerConfig = {
     height: 0,
@@ -306,3 +306,12 @@ export var populationDefaults = {
     prefix: '',
     suffix: ''
 };
+export var PieTooltipDefaults = {
+    tooltipDuration: 1000,
+    tooltipVerticalShift: 30,
+    tooltipHorizontalShift: 20,
+    showValuesAsTooltipText: true,
+    tooltipTextNoOfLines: 3,
+    tooltipBackgroundColor: 'rgba(20,20,20,0.8)',
+    tooltipBorderRadius: 4
+};

package/dist/utils/index.d.ts

@@ -12,7 +12,7 @@ export declare const bezierCommand: (point: number[], i: number, a: number[][],
 export declare const getSegmentString: (lineSegment: LineSegment[] | undefined, index: number, startDelimeter: string, endDelimeter: string) => string;
 export declare const getCurvePathWithSegments: (path: string, lineSegment: LineSegment[] | undefined, startDelimeter: string, endDelimeter: string, curveType: CurveType) => string;
 export declare const getPreviousSegmentsLastPoint: (isCurved: boolean, previousSegment: string) => string;
-export declare const getPathWithHighlight: (data: lineDataItem[], i: number, highlightedRange: HighlightedRange, startIndex: number, endIndex: number, getX: (i: number) => number, getY: (value: number) => number) => string;
+export declare const getPathWithHighlight: (data: lineDataItem[], i: number, highlightedRange: HighlightedRange, startIndex: number, endIndex: number, spacingArray: number[], getX: (spacingArray: number[], i: number) => number, getY: (value: number) => number) => string;
 export declare const getRegionPathObjects: (points: string, color: ColorValue, currentLineThickness: number, thickness: number, strokeDashArray: number[], isCurved: boolean, startDelimeter: string, stop: string, endDelimeter: string, curveType: CurveType) => LineProperties[];
 export declare const getSegmentedPathObjects: (points: string, color: ColorValue, currentLineThickness: number, thickness: number, strokeDashArray: number[], isCurved: boolean, startDelimeter: string, endDelimeter: string, curveType: CurveType) => LineProperties[];
 export declare const getArrowPoints: (arrowTipX: number, arrowTipY: number, x1: number, y1: number, arrowLength?: number, arrowWidth?: number, showArrowBase?: boolean) => string;

package/dist/utils/index.js

@@ -183,7 +183,7 @@ export var getPreviousSegmentsLastPoint = function (isCurved, previousSegment) {
             .replace('L', 'M');
     return ((prevSegmentLastPoint.trim()[0] === 'M' ? '' : 'M') + prevSegmentLastPoint);
 };
-export var getPathWithHighlight = function (data, i, highlightedRange, startIndex, endIndex, getX, getY) {
+export var getPathWithHighlight = function (data, i, highlightedRange, startIndex, endIndex, spacingArray, getX, getY) {
     var path = '';
     var from = highlightedRange.from, to = highlightedRange.to;
     var currentPointRegion = data[i].value < from ? loc.DOWN : data[i].value > to ? loc.UP : loc.IN;
@@ -195,9 +195,9 @@ export var getPathWithHighlight = function (data, i, highlightedRange, startInde
                 : loc.IN;
         if (currentPointRegion !== nextPointRegion ||
             (i === startIndex && currentPointRegion === loc.IN)) {
-            var x1 = getX(i);
+            var x1 = getX(spacingArray, i);
             var y1 = getY(data[i].value);
-            var x2 = getX(i + 1);
+            var x2 = getX(spacingArray, i + 1);
             var y2 = getY(data[i + 1].value);
             var m = (y2 - y1) / (x2 - x1);
             var x = 0;

package/dist/utils/types.d.ts

@@ -98,6 +98,7 @@ export interface secondaryLineConfigType {
     showArrow?: boolean;
     arrowConfig?: arrowConfigType;
     isSecondary?: boolean;
+    spacing?: number;
 }
 export interface ExtendedLineConfigType extends lineConfigType {
     startIndex: number;
@@ -410,6 +411,7 @@ export interface DataSet {
     lineSegments?: LineSegment[];
     isSecondary?: boolean;
     hidePointers?: boolean;
+    spacing?: number;
 }
 export interface IntersectionAreaConfig {
     fillColor?: ColorValue;

package/package.json

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