react-native-gifted-charts 1.4.12 → 1.4.14

package/src/PopulationPyramid/index.tsx

@@ -0,0 +1,603 @@
+import React, {Fragment} from 'react';
+import {View} from 'react-native';
+import {
+  PopulationPyramidPropsType,
+  RulesProps,
+  ruleTypes,
+  usePopulationPyramid,
+} from 'gifted-charts-core';
+import {
+  ClipPath,
+  Line,
+  Rect,
+  Svg,
+  Text as SvgText,
+  Use,
+} from 'react-native-svg';
+import {screenWidth} from '../utils';
+
+export const PopulationPyramid = (props: PopulationPyramidPropsType) => {
+  const {
+    width,
+    verticalMarginBetweenBars,
+    barsMapToYAxisSections,
+    data,
+    hideRules,
+    yAxisColor,
+    xAxisColor,
+    xAxisThickness,
+    xAxisType,
+    xAxisNoOfSections,
+    showXAxisIndices,
+    showXAxisLabelTexts,
+    xAxisLabelShiftX,
+    xAxisLabelPrefix,
+    xAxisLabelSuffix,
+    formatXAxisLabels,
+    showVerticalLines,
+    showYAxisIndices,
+    yAxisIndicesWidth,
+    yAxisIndicesHeight,
+    yAxisIndicesColor,
+    yAxisLabelFontSize,
+    yAxisLabelFontStyle,
+    yAxisLabelFontWeight,
+    yAxisLabelFontFamily,
+    yAxisLabelColor,
+    yAxisLabelTextMarginRight,
+    yAxisLabelTexts,
+    showValuesAsBarLabels,
+    rulesThickness,
+    rulesColor,
+    rulesType,
+    dashWidth,
+    dashGap,
+    leftBarLabelWidth,
+    leftBarLabelFontSize,
+    leftBarLabelColor,
+    leftBarLabelFontStyle,
+    leftBarLabelFontWeight,
+    leftBarLabelFontFamily,
+    leftBarLabelPrefix,
+    leftBarLabelSuffix,
+    rightBarLabelFontSize,
+    rightBarLabelColor,
+    rightBarLabelFontStyle,
+    rightBarLabelFontWeight,
+    rightBarLabelFontFamily,
+    rightBarLabelPrefix,
+    rightBarLabelSuffix,
+    formatBarLabels,
+    showMidAxis,
+    midAxisLabelFontSize,
+    midAxisLabelColor,
+    midAxisLabelFontStyle,
+    midAxisLabelFontWeight,
+    midAxisLabelFontFamily,
+    leftBarColor,
+    rightBarColor,
+    leftBarBorderColor,
+    rightBarBorderColor,
+    leftBarBorderWidth,
+    rightBarBorderWidth,
+    leftBarBorderRadius,
+    rightBarBorderRadius,
+    allCornersRounded,
+    showSurplus,
+    showSurplusLeft,
+    showSurplusRight,
+    leftSurplusColor,
+    leftSurplusBorderColor,
+    rightSurplusColor,
+    rightSurplusBorderColor,
+    leftSurplusBorderWidth,
+    rightSurplusBorderWidth,
+    yAxisLabelWidth,
+    noOfSections,
+    stepHeight,
+    containerHeightWithXaxisLabels,
+    mid,
+    barWidthFactor,
+    leftXAfterMid,
+    rightXAfterMid,
+    yAxisLineProps,
+    midAxisLineCommonProps,
+    xAxisIndicesCommonProps,
+    verticalLinesCommonProps,
+    xAxisLabelsCommonProps,
+    getXLabel,
+  } = usePopulationPyramid({...props, screenWidth});
+
+  return (
+    <View style={{height: containerHeightWithXaxisLabels, width}}>
+      <Svg fill={'none'}>
+        {/**************        Y-Axis         ************/}
+        <Line {...yAxisLineProps} />
+
+        {/************        Rules, X-axis and Y-Axis labels         ***********/}
+        {Array.from(Array(noOfSections)).map((item, index) => {
+          const isLast = index === noOfSections - 1;
+          const y = stepHeight * (index + 1);
+          const rulesProps: RulesProps = {
+            x1: yAxisLabelWidth,
+            y1: y,
+            x2: width,
+            y2: y,
+            stroke: isLast ? xAxisColor : rulesColor,
+            strokeWidth: isLast ? xAxisThickness : rulesThickness,
+          };
+          if (
+            (isLast && xAxisType !== ruleTypes.SOLID) ||
+            (!isLast && rulesType !== ruleTypes.SOLID)
+          ) {
+            rulesProps.strokeDasharray = [dashWidth, dashGap];
+          } else {
+            delete rulesProps.strokeDasharray;
+          }
+          return (
+            <Fragment key={'rule' + index}>
+              {!hideRules || isLast ? <Line {...rulesProps} /> : null}
+              {showYAxisIndices ? (
+                <Line
+                  x1={yAxisLabelWidth - yAxisIndicesWidth / 2}
+                  y1={y}
+                  x2={yAxisLabelWidth + yAxisIndicesWidth / 2}
+                  y2={y}
+                  stroke={yAxisIndicesColor}
+                  strokeWidth={yAxisIndicesHeight}
+                />
+              ) : null}
+              {/**************     Y-Axis Labels      ************/}
+              {!barsMapToYAxisSections ? (
+                <SvgText
+                  x={yAxisLabelWidth - yAxisLabelTextMarginRight}
+                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
+                  stroke={yAxisLabelColor}
+                  fontSize={yAxisLabelFontSize}
+                  fontStyle={yAxisLabelFontStyle}
+                  fontWeight={yAxisLabelFontWeight}
+                  fontFamily={yAxisLabelFontFamily}
+                  textAnchor="end">
+                  {yAxisLabelTexts[index] ?? ''}
+                </SvgText>
+              ) : null}
+            </Fragment>
+          );
+        })}
+
+        {/**************     X-Axis Labels Left     ************/}
+        {Array.from(Array(xAxisNoOfSections)).map((item, index) => {
+          const x = leftXAfterMid - (leftXAfterMid * index) / xAxisNoOfSections;
+          const unformattedXLabel = getXLabel(index);
+          const xLabel = formatXAxisLabels
+            ? formatXAxisLabels(unformattedXLabel)
+            : unformattedXLabel;
+          return (
+            <Fragment key={'x-axis' + index}>
+              {showVerticalLines ? (
+                <Line {...verticalLinesCommonProps} x1={x} x2={x} />
+              ) : null}
+              {showXAxisIndices ? (
+                <Line {...xAxisIndicesCommonProps} x1={x} x2={x} />
+              ) : null}
+              {showXAxisLabelTexts ? (
+                <SvgText
+                  {...xAxisLabelsCommonProps}
+                  x={x + xAxisLabelShiftX}
+                  textAnchor="middle">
+                  {xAxisLabelPrefix + xLabel + xAxisLabelSuffix}
+                </SvgText>
+              ) : null}
+            </Fragment>
+          );
+        })}
+
+        {/**************     X-Axis Labels Right     ************/}
+        {Array.from(Array(xAxisNoOfSections)).map((item, index) => {
+          if (!index && !showMidAxis) return null;
+          const x = leftXAfterMid + (leftXAfterMid * index) / xAxisNoOfSections;
+          const unformattedXLabel = getXLabel(index);
+          const xLabel = formatXAxisLabels
+            ? formatXAxisLabels(unformattedXLabel)
+            : unformattedXLabel;
+          return (
+            <Fragment key={'x-axis' + index}>
+              {showVerticalLines ? (
+                <Line {...verticalLinesCommonProps} x1={x} x2={x} />
+              ) : null}
+              {showXAxisIndices ? (
+                <Line {...xAxisIndicesCommonProps} x1={x} x2={x} />
+              ) : null}
+              {showXAxisLabelTexts ? (
+                <SvgText
+                  {...xAxisLabelsCommonProps}
+                  x={x + xAxisLabelShiftX}
+                  textAnchor="middle">
+                  {xAxisLabelPrefix + xLabel + xAxisLabelSuffix}
+                </SvgText>
+              ) : null}
+            </Fragment>
+          );
+        })}
+
+        {/**************        Bars          ************/}
+        {data.map((item, index) => {
+          const leftWidth = item.left * barWidthFactor;
+          const rightWidth = item.right * barWidthFactor;
+          const y = stepHeight * index + verticalMarginBetweenBars;
+
+          const leftSurplusWidth = leftWidth - rightWidth;
+          const rightSurplusWidth = rightWidth - leftWidth;
+          const leftRadius =
+            item.leftBarBorderRadius ??
+            item.barBorderRadius ??
+            leftBarBorderRadius;
+          const rightRadius =
+            item.rightBarBorderRadius ??
+            item.barBorderRadius ??
+            rightBarBorderRadius;
+
+          const leftBorderWidth =
+            item.leftBarBorderWidth ??
+            item.barBorderWidth ??
+            leftBarBorderWidth;
+          const rightBorderWidth =
+            item.rightBarBorderWidth ??
+            item.barBorderWidth ??
+            rightBarBorderWidth;
+
+          const unFormattedLeftBarLabel =
+            item.leftBarLabel ??
+            (showValuesAsBarLabels ? item.left.toString() : '');
+          const leftBarLabel = formatBarLabels
+            ? formatBarLabels(unFormattedLeftBarLabel)
+            : unFormattedLeftBarLabel;
+
+          const unFormattedRightBarLabel =
+            item.rightBarLabel ??
+            (showValuesAsBarLabels ? item.right.toString() : '');
+          const rightBarLabel = formatBarLabels
+            ? formatBarLabels(unFormattedRightBarLabel)
+            : unFormattedRightBarLabel;
+
+          const leftLabelFontSize =
+            item.leftBarLabelFontSize ?? leftBarLabelFontSize;
+
+          const leftLabelX =
+            leftXAfterMid -
+            leftWidth -
+            leftBarBorderWidth / 2 -
+            yAxisLabelWidth / 2 -
+            leftBarLabelWidth / 2 +
+            28 -
+            (leftBarLabel.length * leftLabelFontSize) / 2 +
+            (item.leftBarLabelShift ?? props.leftBarLabelShift ?? 0);
+
+          const rightLabelX =
+            rightXAfterMid +
+            rightBarBorderWidth / 2 +
+            rightWidth +
+            3 +
+            (item.rightBarLabelShift ?? props.rightBarLabelShift ?? 0);
+
+          const leftBarCommonProps = {
+            x: leftXAfterMid - leftWidth - leftBarBorderWidth / 2,
+            y: y,
+            width: leftWidth,
+            height: stepHeight - verticalMarginBetweenBars * 2,
+            rx: leftRadius,
+            ry: leftRadius,
+          };
+          const rightBarCommonProps = {
+            x: rightXAfterMid + rightBarBorderWidth / 2,
+            y: y,
+            width: rightWidth,
+            height: stepHeight - verticalMarginBetweenBars * 2,
+            rx: rightRadius,
+            ry: rightRadius,
+          };
+          return (
+            <Fragment key={'bars' + index}>
+              {/**************     Y-Axis Labels      ************/}
+              {barsMapToYAxisSections ? (
+                <SvgText
+                  x={yAxisLabelWidth - yAxisLabelTextMarginRight}
+                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
+                  stroke={yAxisLabelColor}
+                  fontSize={yAxisLabelFontSize}
+                  fontStyle={yAxisLabelFontStyle}
+                  fontWeight={yAxisLabelFontWeight}
+                  fontFamily={yAxisLabelFontFamily}
+                  textAnchor="end">
+                  {item.yAxisLabel ?? yAxisLabelTexts[index] ?? ''}
+                </SvgText>
+              ) : null}
+
+              {/**************     Left Bars      ************/}
+              <Rect
+                {...leftBarCommonProps}
+                fill={item.leftBarColor ?? leftBarColor}
+                stroke={item.leftBarBorderColor ?? leftBarBorderColor}
+                strokeWidth={leftBorderWidth}
+              />
+              <ClipPath id={'cp-left' + index}>
+                <Rect {...leftBarCommonProps} />
+              </ClipPath>
+              {/*********   Hide inner border-radius ********/}
+              {!allCornersRounded && leftWidth >= leftRadius ? (
+                <>
+                  <Rect
+                    x={leftXAfterMid - leftRadius}
+                    y={y}
+                    width={leftRadius}
+                    height={stepHeight - verticalMarginBetweenBars * 2}
+                    fill={item.leftBarColor ?? leftBarColor}
+                  />
+                  {/*********   work-around for border ********/}
+                  {leftBorderWidth ? (
+                    <>
+                      <Line
+                        x1={leftXAfterMid - leftRadius}
+                        y1={y}
+                        x2={leftXAfterMid}
+                        y2={y}
+                        stroke={item.leftBarBorderColor ?? leftBarBorderColor}
+                        strokeWidth={leftBorderWidth}
+                      />
+                      <Line
+                        x1={leftXAfterMid - leftRadius}
+                        y1={y + stepHeight - verticalMarginBetweenBars * 2}
+                        x2={leftXAfterMid}
+                        y2={y + stepHeight - verticalMarginBetweenBars * 2}
+                        stroke={item.leftBarBorderColor ?? leftBarBorderColor}
+                        strokeWidth={leftBorderWidth}
+                      />
+                    </>
+                  ) : null}
+                </>
+              ) : null}
+
+              {/**************     Left Bar Labels      ************/}
+              {leftBarLabel !== '' ? (
+                <SvgText
+                  x={leftLabelX}
+                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
+                  stroke={item.leftBarLabelColor ?? leftBarLabelColor}
+                  fontSize={leftLabelFontSize}
+                  fontStyle={
+                    item.leftBarLabelFontStyle ?? leftBarLabelFontStyle
+                  }
+                  fontWeight={
+                    item.leftBarLabelFontWeight ?? leftBarLabelFontWeight
+                  }
+                  fontFamily={
+                    item.leftBarLabelFontFamily ?? leftBarLabelFontFamily
+                  }
+                  textAnchor="start">
+                  {leftBarLabelPrefix + leftBarLabel + leftBarLabelSuffix}
+                </SvgText>
+              ) : null}
+
+              {/**************     Right Bars      ************/}
+              <Rect
+                {...rightBarCommonProps}
+                fill={item.rightBarColor ?? rightBarColor}
+                stroke={item.rightBarBorderColor ?? rightBarBorderColor}
+                strokeWidth={rightBorderWidth}
+              />
+              <ClipPath id={'cp-right' + index}>
+                <Rect {...rightBarCommonProps} />
+              </ClipPath>
+              {/*********   Hide inner border-radius ********/}
+              {!allCornersRounded && rightWidth >= rightRadius ? (
+                <>
+                  <Rect
+                    x={rightXAfterMid}
+                    y={y}
+                    width={rightRadius}
+                    height={stepHeight - verticalMarginBetweenBars * 2}
+                    fill={item.rightBarColor ?? rightBarColor}
+                  />
+                  {/*********   work-around for border ********/}
+                  {rightBorderWidth ? (
+                    <>
+                      <Line
+                        x1={rightXAfterMid}
+                        y1={y}
+                        x2={rightXAfterMid + rightRadius}
+                        y2={y}
+                        stroke={item.rightBarBorderColor ?? rightBarBorderColor}
+                        strokeWidth={rightBorderWidth}
+                      />
+                      <Line
+                        x1={rightXAfterMid}
+                        y1={y + stepHeight - verticalMarginBetweenBars * 2}
+                        x2={rightXAfterMid + rightRadius}
+                        y2={y + stepHeight - verticalMarginBetweenBars * 2}
+                        stroke={item.rightBarBorderColor ?? rightBarBorderColor}
+                        strokeWidth={rightBorderWidth}
+                      />
+                    </>
+                  ) : null}
+                </>
+              ) : null}
+
+              {/**************     Right Bar Labels      ************/}
+              {rightBarLabel !== '' ? (
+                <SvgText
+                  x={rightLabelX}
+                  y={stepHeight * (index + 0.5) + yAxisLabelFontSize / 2 - 2}
+                  stroke={item.rightBarLabelColor ?? rightBarLabelColor}
+                  fontSize={item.rightBarLabelFontSize ?? rightBarLabelFontSize}
+                  fontStyle={
+                    item.rightBarLabelFontStyle ?? rightBarLabelFontStyle
+                  }
+                  fontWeight={
+                    item.rightBarLabelFontWeight ?? rightBarLabelFontWeight
+                  }
+                  fontFamily={
+                    item.rightBarLabelFontFamily ?? rightBarLabelFontFamily
+                  }
+                  textAnchor="start">
+                  {rightBarLabelPrefix + rightBarLabel + rightBarLabelSuffix}
+                </SvgText>
+              ) : null}
+
+              {/**************     Left Surplus      ************/}
+              {(showSurplus ||
+                showSurplusLeft ||
+                item.showSurplus ||
+                item.showSurplusLeft) &&
+              leftSurplusWidth > 0 ? (
+                <>
+                  <Rect
+                    id={'l-spls' + index}
+                    x={leftXAfterMid - leftWidth - leftBarBorderWidth / 2}
+                    y={y}
+                    width={leftSurplusWidth}
+                    height={stepHeight - verticalMarginBetweenBars * 2}
+                    stroke={
+                      item.leftSurplusBorderColor ?? leftSurplusBorderColor
+                    }
+                    strokeWidth={
+                      item.leftSurplusBorderWidth ?? leftSurplusBorderWidth
+                    }
+                  />
+                  <Use
+                    fill={item.leftSurplusColor ?? leftSurplusColor}
+                    clipPath={'#cp-left' + index}
+                    href={'#l-spls' + index}
+                  />
+                  {/*********      remove inner curve     ********/}
+                  {leftSurplusWidth >= leftRadius ? (
+                    <>
+                      <Rect
+                        id={'hide-in-left' + index}
+                        x={
+                          leftXAfterMid -
+                          leftWidth -
+                          leftBarBorderWidth +
+                          leftSurplusWidth -
+                          leftRadius
+                        }
+                        y={y}
+                        width={leftRadius}
+                        height={stepHeight - verticalMarginBetweenBars * 2}
+                      />
+                      <Use
+                        fill={item.leftSurplusColor ?? leftSurplusColor}
+                        clipPath={`url(#cp-left${index})`}
+                        href={'#hide-in-left' + index}
+                      />
+                    </>
+                  ) : null}
+                </>
+              ) : null}
+              {/**************     Right Surplus      ************/}
+              {(showSurplus ||
+                showSurplusRight ||
+                item.showSurplus ||
+                item.showSurplusRight) &&
+              rightSurplusWidth > 0 ? (
+                <>
+                  <Rect
+                    id={'r-spls' + index}
+                    x={
+                      rightXAfterMid +
+                      rightBarBorderWidth / 2 +
+                      rightWidth -
+                      rightSurplusWidth
+                    }
+                    y={y}
+                    width={rightSurplusWidth}
+                    height={stepHeight - verticalMarginBetweenBars * 2}
+                    stroke={
+                      item.rightSurplusBorderColor ?? rightSurplusBorderColor
+                    }
+                    strokeWidth={
+                      item.rightSurplusBorderWidth ?? rightSurplusBorderWidth
+                    }
+                  />
+                  <Use
+                    fill={item.rightSurplusColor ?? rightSurplusColor}
+                    clipPath={'#cp-right' + index}
+                    href={'#r-spls' + index}
+                  />
+                  {/*********       remove inner curve     ********/}
+                  {rightSurplusWidth >= rightRadius ? (
+                    <>
+                      <Rect
+                        id={'hide-in-right' + index}
+                        x={
+                          rightXAfterMid +
+                          rightBarBorderWidth / 2 +
+                          rightWidth -
+                          rightSurplusWidth
+                        }
+                        y={y}
+                        width={rightRadius}
+                        height={stepHeight - verticalMarginBetweenBars * 2}
+                      />
+                      <Use
+                        fill={item.rightSurplusColor ?? rightSurplusColor}
+                        clipPath={`url(#cp-right${index})`}
+                        href={'#hide-in-right' + index}
+                      />
+                    </>
+                  ) : null}
+                </>
+              ) : null}
+            </Fragment>
+          );
+        })}
+
+        {/**************     Mid Axis      ************/}
+        {showMidAxis ? (
+          <>
+            <Line
+              {...midAxisLineCommonProps}
+              stroke={
+                props.midAxisLeftColor ?? props.midAxisColor ?? yAxisColor
+              }
+              x1={leftXAfterMid}
+              x2={leftXAfterMid}
+            />
+
+            <Line
+              {...midAxisLineCommonProps}
+              stroke={
+                props.midAxisRightColor ?? props.midAxisColor ?? yAxisColor
+              }
+              x1={rightXAfterMid}
+              x2={rightXAfterMid}
+            />
+
+            {data.map((item, index) => {
+              const y = stepHeight * (index + 0.5);
+              return (
+                <SvgText
+                  key={'ml' + index}
+                  x={mid}
+                  y={y + midAxisLabelFontSize / 2}
+                  stroke={item.midAxisLabelColor ?? midAxisLabelColor}
+                  fontSize={item.midAxisLabelFontSize ?? midAxisLabelFontSize}
+                  fontStyle={
+                    item.midAxisLabelFontStyle ?? midAxisLabelFontStyle
+                  }
+                  fontWeight={
+                    item.midAxisLabelFontWeight ?? midAxisLabelFontWeight
+                  }
+                  fontFamily={
+                    item.midAxisLabelFontFamily ?? midAxisLabelFontFamily
+                  }
+                  textAnchor="middle">
+                  {item.midAxisLabel ?? ''}
+                </SvgText>
+              );
+            })}
+          </>
+        ) : null}
+      </Svg>
+    </View>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,25 @@
+export {BarChart} from './BarChart';
+export {PieChart} from './PieChart';
+export {PieChartPro} from './PieChartPro';
+export {LineChart} from './LineChart';
+export {LineChartBicolor} from './LineChart/LineChartBicolor';
+export {PopulationPyramid} from './PopulationPyramid';
+
+export {
+  barDataItem,
+  stackDataItem,
+  BarChartPropsType,
+  StackedBarChartPropsType,
+  pieDataItem,
+  PieChartPropsType,
+  lineDataItem,
+  bicolorLineDataItem,
+  LineChartPropsType,
+  LineChartBicolorPropsType,
+  popnPyramidDataItem,
+  PopulationPyramidPropsType,
+  chartTypes,
+  ruleTypes,
+  yAxisSides,
+  EdgePosition,
+} from 'gifted-charts-core';

package/src/todos.md

@@ -0,0 +1,23 @@
+## Features
+
+1. Issue with eslint - tsc https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/222
+
+## To-dos in documentation-
+
+1. Prepare a doc for Line chart with negative values
+2. Prepare a doc for gaps in data values https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/405 and https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/353
+3. Prepare a doc for Line chart with y axis on right side
+4. Prepare a doc for Line chart with gaps in the line https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/100
+5. Prepare a doc for Bar chart combined with Line chart having a separate data for the Line chart
+6. Prepare a doc for Line chart with smoothly scrolling data pointer and strip (along with pointerShiftX)
+7. Prepare a doc for labelsPosition in Pie and Donut charts
+8. Prepare a doc for adjustToWidth in Line and Area charts
+9. Prepare a doc for xAxisLabelTexts and xAxisLabelTextStyle in Bar, Line And Area Charts
+10. Prepare a doc for vertical lines to explain noOfVerticalLines and verticalLinesSpacing props. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/205
+11. Prepare a doc for negative marginBottom instead of marginTop for x axis labels. https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/190
+12. Add about endSpacing in docs
+
+## Architecture Enhancement
+
+1. Make it compliant with React js
+2. Write Snapshot tests for more example charts (snapshot tests for some charts are already written)

package/src/utils/index.ts

@@ -0,0 +1,16 @@
+import {Dimensions} from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const versionString = require('react-native/package.json').version;
+
+const versionAr = versionString?.split?.('.') ?? '';
+const msb = Number(versionAr[0]);
+const mid = Number(versionAr[1]);
+const lsb = Number(versionAr[2]);
+
+export const rnVersion =
+  (!isNaN(msb) ? msb : 0) * 1000000 +
+  (!isNaN(mid) ? mid : 0) * 10000 +
+  (!isNaN(lsb) ? lsb : 0);
+
+export const screenWidth = Dimensions.get('window').width;

package/dist/BarChart/Animated2DWithGradient.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeSvg=_interopRequireWildcard(require("react-native-svg"));var _cap=_interopRequireDefault(require("../Components/BarSpecificComponents/cap"));var _LinearGradient=_interopRequireDefault(require("../Components/common/LinearGradient"));var _jsxRuntime=require("react/jsx-runtime");var _this=this,_jsxFileName="/Users/abhinandankushwaha/sites/projects/react-native-gifted-charts/src/BarChart/Animated2DWithGradient.tsx";function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&{}.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}if(_reactNative.Platform.OS==='android'){_reactNative.UIManager.setLayoutAnimationEnabledExperimental&&_reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);}var Animated2DWithGradient=function Animated2DWithGradient(props){var barBackgroundPattern=props.barBackgroundPattern,patternId=props.patternId,barWidth=props.barWidth,barStyle=props.barStyle,item=props.item,index=props.index,opacity=props.opacity,animationDuration=props.animationDuration,noGradient=props.noGradient,noAnimation=props.noAnimation,containerHeight=props.containerHeight,maxValue=props.maxValue,barMarginBottom=props.barMarginBottom,barInnerComponent=props.barInnerComponent,intactTopLabel=props.intactTopLabel,showValuesAsTopLabel=props.showValuesAsTopLabel,topLabelContainerStyle=props.topLabelContainerStyle,topLabelTextStyle=props.topLabelTextStyle,commonStyleForBar=props.commonStyleForBar,barStyleWithBackground=props.barStyleWithBackground,yAxisOffset=props.yAxisOffset;var _useState=(0,_react.useState)(noAnimation?props.height:0.2),_useState2=(0,_slicedToArray2.default)(_useState,2),height=_useState2[0],setHeight=_useState2[1];var _useState3=(0,_react.useState)(noAnimation?false:true),_useState4=(0,_slicedToArray2.default)(_useState3,2),initialRender=_useState4[0],setInitialRender=_useState4[1];(0,_react.useEffect)(function(){if(!noAnimation){if(initialRender){setTimeout(function(){return layoutAppear();},20);}else{elevate();}}},[props.height]);var elevate=function elevate(){_reactNative.LayoutAnimation.configureNext({duration:animationDuration,update:{type:'linear',property:'scaleXY'}});setHeight(props.height);};var layoutAppear=function layoutAppear(){_reactNative.LayoutAnimation.configureNext({duration:_reactNative.Platform.OS=='ios'?animationDuration:20,create:{type:'linear',property:'opacity'},update:{type:'linear',property:'scaleXY'}});setInitialRender(false);setTimeout(function(){return elevate();},_reactNative.Platform.OS=='ios'?10:100);};return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!initialRender&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',bottom:-0.5,width:'100%',overflow:'hidden',height:(noAnimation?Math.max(props.minHeight,Math.abs(height)):height)-(barMarginBottom||0)},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[{width:'100%',height:(noAnimation?Math.max(props.minHeight,Math.abs(height)):height)-(barMarginBottom||0)},item.barStyle||barStyle],children:[noGradient?(0,_jsxRuntime.jsx)(_reactNative.View,{style:barStyleWithBackground,children:props.cappedBars&&item.value?(0,_jsxRuntime.jsx)(_cap.default,{capThicknessFromItem:item.capThickness,capThicknessFromProps:props.capThickness,capColorFromItem:item.capColor,capColorFromProps:props.capColor,capRadiusFromItem:item.capRadius,capRadiusFromProps:props.capRadius}):null}):(0,_jsxRuntime.jsx)(_LinearGradient.default,{style:commonStyleForBar,start:{x:0,y:0},end:{x:1,y:1},colors:[item.gradientColor||props.gradientColor||'white',item.frontColor||props.frontColor||'black'],children:props.cappedBars&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:'absolute',width:'100%',height:item.capThickness===0?0:item.capThickness||props.capThickness||6,backgroundColor:item.capColor||props.capColor||'black',borderTopLeftRadius:item.capRadius===0?0:item.capRadius||props.capRadius||0,borderTopRightRadius:item.capRadius===0?0:item.capRadius||props.capRadius||0}})}),(item.barBackgroundPattern||barBackgroundPattern)&&(0,_jsxRuntime.jsxs)(_reactNativeSvg.default,{children:[(0,_jsxRuntime.jsx)(_reactNativeSvg.Defs,{children:item.barBackgroundPattern?item.barBackgroundPattern():barBackgroundPattern==null?void 0:barBackgroundPattern()}),(0,_jsxRuntime.jsx)(_reactNativeSvg.Rect,{stroke:"transparent",x:"1",y:"1",width:item.barWidth||props.barWidth||30,height:noAnimation?Math.abs(height):height,fill:`url(#${item.patternId||patternId})`})]}),barInnerComponent?(0,_jsxRuntime.jsx)(_reactNative.View,{style:{height:'100%',width:'100%'},children:barInnerComponent(item,index)}):null]})}),item.topLabelComponent||showValuesAsTopLabel?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[{position:'absolute',top:(item.barWidth||barWidth||30)*-1,height:item.barWidth||barWidth||30,width:item.barWidth||barWidth||30,justifyContent:props.horizontal&&!intactTopLabel||item.value<0?'center':'flex-end',alignItems:'center',opacity:opacity},item.value<0&&{transform:[{rotate:'180deg'}]},props.horizontal&&!intactTopLabel&&{transform:[{rotate:'270deg'}]},topLabelContainerStyle!=null?topLabelContainerStyle:item.topLabelContainerStyle],children:showValuesAsTopLabel?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:topLabelTextStyle,children:item.value+yAxisOffset}):item.topLabelComponent==null?void 0:item.topLabelComponent()}):null]});};var _default=exports.default=Animated2DWithGradient;