gifted-charts-core 0.0.1

package/README.md

@@ -0,0 +1 @@
+This library contains the common code used by [react-native-gifted-charts](https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts) and react-gifted-charts.

package/index.ts

@@ -0,0 +1,132 @@
+/***********************************************************************************************************************/
+/*****************************************              Bar Chart              *****************************************/
+/***********************************************************************************************************************/
+
+export { useBarChart } from "./src/BarChart";
+export { getPropsForAnimated2DWithGradient } from "./src/BarChart/Animated2DWithGradient";
+export { useRenderStackBars } from "./src/BarChart/RenderStackBars";
+export {
+  stackDataItem,
+  StackedBarChartPropsType,
+  BarChartPropsType,
+  defaultLineConfigType,
+  barDataItem,
+  Animated2DWithGradientPropsType,
+  RenderBarsPropsType,
+  trianglePropTypes,
+  animatedBarPropTypes,
+} from "./src/BarChart/types";
+
+/************************************************************************************************************************/
+/*****************************************              Line Chart              *****************************************/
+/************************************************************************************************************************/
+
+export { useLineChart } from "./src/LineChart";
+export { useLineChartBiColor } from "./src/LineChart/LineChartBiColor";
+export {
+  LineChartPropsType,
+  lineDataItem,
+  bicolorLineDataItem,
+  LineChartBicolorPropsType,
+} from "./src/LineChart/types";
+
+/***********************************************************************************************************************/
+/*****************************************              Pie Chart              *****************************************/
+/***********************************************************************************************************************/
+
+export { usePieChart } from "./src/PieChart";
+export { getPieChartMainProps } from "./src/PieChart/main";
+export { PieChartPropsType, pieDataItem } from "./src/PieChart/types";
+
+/***********************************************************************************************************************/
+/************************************          Population Pyramid Chart             ************************************/
+/***********************************************************************************************************************/
+
+export { usePopulationPyramid } from "./src/PopulationPyramid";
+export {
+  popnPyramidDataItem,
+  RulesProps,
+  PopulationPyramidPropsType,
+} from "./src/PopulationPyramid/types";
+
+/***********************************************************************************************************************/
+/************************************             Common Components                 ************************************/
+/***********************************************************************************************************************/
+
+export { useAnimatedThreeDBar } from "./src/components/AnimatedThreeDBar";
+export { getHorizSectionVals } from "./src/components/BarAndLineChartsWrapper/getHorizSectionsVals";
+export { useBarAndLineChartsWrapper } from "./src/components/BarAndLineChartsWrapper";
+export { getTopAndLeftForStripAndLabel } from "./src/components/common/StripAndLabel";
+
+/***********************************************************************************************************************/
+/*********************************          common utils, constants and types           ********************************/
+/***********************************************************************************************************************/
+
+export {
+  rnVersion,
+  getCumulativeWidth,
+  getLighterColor,
+  svgQuadraticCurvePath,
+  svgPath,
+  bezierCommand,
+  getSegmentString,
+  getCurvePathWithSegments,
+  getPreviousSegmentsLastPoint,
+  getPathWithHighlight,
+  getRegionPathObjects,
+  getSegmentedPathObjects,
+  getArrowPoints,
+  getAxesAndRulesProps,
+  getExtendedContainerHeightWithPadding,
+  getSecondaryDataWithOffsetIncluded,
+  getArrowProperty,
+  getAllArrowProperties,
+  maxAndMinUtil,
+  computeMaxAndMinItems,
+  getLabelTextUtil,
+  getXForLineInBar,
+  getYForLineInBar,
+  clone,
+  getLineConfigForBarChart,
+} from "./src/utils";
+
+export {
+  chartTypes,
+  screenWidth,
+  yAxisSides,
+  loc,
+  SEGMENT_START,
+  SEGMENT_END,
+  RANGE_ENTER,
+  RANGE_EXIT,
+  STOP,
+  ruleTypes,
+  AxesAndRulesDefaults,
+  defaultArrowConfig,
+  BarDefaults,
+  defaultLineConfig,
+  LineDefaults,
+  defaultPointerConfig,
+  pieColors,
+  populationDefaults,
+} from "./src/utils/constants";
+
+export {
+  RuleType,
+  RuleTypes,
+  RulesConfig,
+  PointerEvents,
+  secondaryYAxisType,
+  secondaryLineConfigType,
+  referenceConfigType,
+  arrowConfigType,
+  horizSectionPropTypes,
+  HorizSectionsType,
+  BarAndLineChartsWrapperTypes,
+  Pointer,
+  HighlightedRange,
+  LineSegment,
+  LineSvgProps,
+  LineProperties,
+  DataSet,
+} from "./src/utils/types";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "gifted-charts-core",
+  "version": "0.0.1",
+  "description": "Mathematical and logical utilities used by react-gifted-charts and react-native-gifted-charts",
+  "main": "index.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "repository": "https://github.com/Abhinandan-Kushwaha/gifted-charts-core",
+  "author": "Abhinandan Kushwaha <kushabhi5@gmail.com> (https://github.com/Abhinandan-Kushwaha)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Abhinandan-Kushwaha/gifted-charts-core/issues"
+  },
+  "homepage": "https://github.com/Abhinandan-Kushwaha/gifted-charts-core#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "gifted-charts",
+    "react-gifted-charts",
+    "react-native-gifted-charts"
+  ]
+}

package/src/BarChart/Animated2DWithGradient.ts

@@ -0,0 +1,112 @@
+import { ViewStyle } from "react-native";
+
+export const getPropsForAnimated2DWithGradient = (props) => {
+  const {
+    barBorderWidth,
+    barBorderColor,
+    barBorderRadius,
+    item,
+    barBorderTopLeftRadius,
+    barBorderTopRightRadius,
+    barBorderBottomLeftRadius,
+    barBorderBottomRightRadius,
+    barWidth,
+    localBarInnerComponent,
+    barStyle,
+    index,
+    opacity,
+    barHeight,
+    intactTopLabel,
+    showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+    roundedBottom,
+    cappedBars,
+    capRadius,
+    roundedTop,
+    barBackgroundPattern,
+    patternId,
+    frontColor,
+    showGradient,
+    gradientColor,
+  } = props;
+
+  const commonStyleForBar: ViewStyle[] = [
+    {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      borderWidth: barBorderWidth ?? 0,
+      borderColor: barBorderColor,
+      borderRadius: item.barBorderRadius ?? barBorderRadius ?? 0,
+      borderTopLeftRadius:
+        item.barBorderTopLeftRadius ??
+        barBorderTopLeftRadius ??
+        item.barBorderRadius ??
+        barBorderRadius,
+      borderTopRightRadius:
+        item.barBorderTopRightRadius ??
+        barBorderTopRightRadius ??
+        item.barBorderRadius ??
+        barBorderRadius,
+      borderBottomLeftRadius:
+        item.barBorderBottomLeftRadius ??
+        barBorderBottomLeftRadius ??
+        item.barBorderRadius ??
+        barBorderRadius,
+      borderBottomRightRadius:
+        item.barBorderBottomRightRadius ??
+        barBorderBottomRightRadius ??
+        item.barBorderRadius ??
+        barBorderRadius,
+    },
+  ];
+
+  if (roundedBottom) {
+    commonStyleForBar.push({
+      borderBottomLeftRadius: (item.barWidth || barWidth || 30) / 2,
+      borderBottomRightRadius: (item.barWidth || barWidth || 30) / 2,
+    });
+  }
+
+  if (cappedBars) {
+    commonStyleForBar.push({
+      borderTopLeftRadius:
+        item.capRadius === 0 ? 0 : item.capRadius || capRadius || 0,
+      borderTopRightRadius:
+        item.capRadius === 0 ? 0 : item.capRadius || capRadius || 0,
+    });
+  }
+
+  if (roundedTop) {
+    commonStyleForBar.push({
+      borderTopLeftRadius: (item.barWidth || barWidth || 30) / 2,
+      borderTopRightRadius: (item.barWidth || barWidth || 30) / 2,
+    });
+  }
+
+  const commonPropsFor2Dand3Dbars = {
+    barBackgroundPattern: item.barBackgroundPattern || barBackgroundPattern,
+    barInnerComponent: localBarInnerComponent,
+    patternId: item.patternId || patternId,
+    width: item.barWidth || barWidth || 30,
+    barStyle: barStyle,
+    item: item,
+    index: index,
+
+    frontColor: item.frontColor || frontColor || "",
+    showGradient: item.showGradient || showGradient || false,
+    gradientColor: item.gradientColor || gradientColor,
+    opacity: opacity || 1,
+    height: barHeight,
+    intactTopLabel,
+    showValuesAsTopLabel: !!showValuesAsTopLabel,
+    topLabelContainerStyle,
+    topLabelTextStyle,
+  };
+
+  return {
+    commonStyleForBar,
+    commonPropsFor2Dand3Dbars,
+  };
+};

package/src/BarChart/RenderStackBars.ts

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { StackedBarChartPropsType, stackDataItem } from "./types";
+
+export const useRenderStackBars = (props: StackedBarChartPropsType) => {
+  const {
+    item,
+    index,
+    containerHeight,
+    maxValue,
+    propSpacing,
+    initialSpacing,
+    stackData,
+    isAnimated,
+  } = props;
+  const cotainsNegative = item.stacks.some((item) => item.value < 0);
+  const noAnimation = cotainsNegative || !isAnimated;
+
+  const localBarInnerComponent =
+    item.barInnerComponent ?? props.barInnerComponent;
+
+  const {
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+  } = item;
+
+  let leftSpacing = initialSpacing;
+  for (let i = 0; i < index; i++) {
+    leftSpacing +=
+      (stackData[i].spacing ?? propSpacing ?? 0) +
+      (stackData[i].stacks[0].barWidth ?? props.barWidth ?? 30);
+  }
+  const disablePress = props.disablePress || false;
+
+  const totalHeight = props.item.stacks.reduce(
+    (acc, stack) =>
+      acc +
+      (Math.abs(stack.value) * (containerHeight || 200)) / (maxValue || 200),
+    0
+  );
+
+  const [height, setHeight] = useState(noAnimation ? totalHeight : 1);
+
+  const getBarHeight = (value: number, marginBottom?: number) => {
+    return (
+      (Math.abs(value) * (containerHeight || 200)) / (maxValue || 200) -
+      (marginBottom || 0)
+    );
+  };
+
+  const getPosition = (index: number) => {
+    /* Returns bottom position for stack item
+           negative values are below origin (-> negative position) */
+    const height = getBarHeight(
+      item.stacks[index].value,
+      item.stacks[index].marginBottom
+    );
+
+    const itemValue = item.stacks[index].value;
+    const isNegative = itemValue <= 0;
+    let position = isNegative ? -(height || 0) : 0;
+
+    for (let i = 0; i < index; i++) {
+      const valueOnIndex = item.stacks[i].value;
+      if (isNegative && valueOnIndex <= 0) {
+        position +=
+          (valueOnIndex * (containerHeight || 200)) / (maxValue || 200);
+      } else if (!isNegative && valueOnIndex >= 0) {
+        position +=
+          (valueOnIndex * (containerHeight || 200)) / (maxValue || 200);
+      }
+    }
+    return position;
+  };
+
+  const getLowestPosition = () => {
+    return (
+      item.stacks
+        .map((_, index) => getPosition(index))
+        .sort((a, b) => a - b)?.[0] || 0
+    );
+  };
+
+  const lowestBarPosition = getLowestPosition();
+
+  const getStackBorderRadii = (item: stackDataItem, index: number) => {
+    const stackItem = item.stacks[index];
+    const borderRadii = {
+      borderTopLeftRadius:
+        stackItem.borderTopLeftRadius ??
+        stackItem.borderRadius ??
+        props.barBorderTopLeftRadius ??
+        props.barBorderRadius ??
+        0,
+      borderTopRightRadius:
+        stackItem.borderTopRightRadius ??
+        stackItem.borderRadius ??
+        props.barBorderTopRightRadius ??
+        props.barBorderRadius ??
+        0,
+      borderBottomLeftRadius:
+        stackItem.borderBottomLeftRadius ??
+        stackItem.borderRadius ??
+        props.barBorderBottomLeftRadius ??
+        props.barBorderRadius ??
+        0,
+      borderBottomRightRadius:
+        stackItem.borderBottomRightRadius ??
+        stackItem.borderRadius ??
+        props.barBorderBottomRightRadius ??
+        props.barBorderRadius ??
+        0,
+    };
+    return borderRadii;
+  };
+
+  return {
+    cotainsNegative,
+    noAnimation,
+    localBarInnerComponent,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    leftSpacing,
+    disablePress,
+    totalHeight,
+    height,
+    setHeight,
+    getBarHeight,
+    getPosition,
+    getLowestPosition,
+    lowestBarPosition,
+    getStackBorderRadii,
+  };
+};