feat: UNT-T20403: Work on Audit changes

Author: vishva-simform

README.md

@@ -201,11 +201,11 @@ export default App;
 
 ---
 
-### ToolTip Props
+### Tooltip Props
 
 | Prop                     | Default | Type    | Description                             | BarChart | LineChart |
 | :----------------------- | :------ | :------ | :-------------------------------------- | -------- | --------- |
-| displayToolTip           | false   | boolean | Flag to handle tooltip visibility       | ✔️       | ✔️        |
+| displayTooltip           | false   | boolean | Flag to handle tooltip visibility       | ✔️       | ✔️        |
 | toolTipLabelFontSize     | 12      | number  | Font size                               | ✔️       | ✔️        |
 | toolTipColor             | #FF0000 | string  | Tooltip color                           | ✔️       | ✔️        |
 | toolTipDataColor         | #FFFFFF | string  | Tooltip data color                      | ✔️       | ✔️        |

example/src/assets/fonts/PixelifySans-Bold.ttf

@@ -24,7 +24,7 @@
   "scripts": {
     "prepare": "husky install && yarn build",
     "clean": "rm -rf node_modules",
-    "build": "rm -rf lib && tsc -p . && cp -R ./src/assets ./lib/ ",
+    "build": "rm -rf lib && tsc -p . ",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' -c .eslintrc --fix ",
     "build:local": "yarn build && yarn pack",

example/src/assets/fonts/Roboto-Regular.ttf

@@ -2,12 +2,17 @@ import { Canvas, Path } from '@shopify/react-native-skia';
 import React from 'react';
 import { ScrollView, Text as RNText, View } from 'react-native';
 import { Colors } from '../../theme';
+import { Tooltip } from '../tooltip';
 import { styles } from './BarChartStyles';
 import type { BarChartProps } from './BarChartTypes';
 import { RenderHorizontalGridLines, XAxisLabels, YAxisLabels } from './components';
 import useBarChart from './useBarChart';
-import { ToolTip } from '../tooltip';
 
+/**
+ * The custom text input component
+ * @param {BarChartProps} props - the props for the BarChart component
+ * @returns {React.ReactElement} A React Element.
+ */
 const BarChart = ({
   chartData,
   barGap = 50,
@@ -34,7 +39,7 @@ const BarChart = ({
   toolTipDataColor,
   toolTipHorizontalPadding,
   toolTipFadeOutDuration,
-  displayToolTip = false,
+  displayTooltip = false,
   showAnimation = true,
   xLegendStyles = {},
   yLegendStyles = {}
@@ -46,9 +51,9 @@ const BarChart = ({
     canvasHeightWithHorizontalLabel,
     xAxisData,
     canvasHeight,
-    chartBottomMargin,
+    CHART_BOTTOM_MARGIN,
     yScale,
-    axisPositionValue,
+    AXIS_POSITION_VALUE,
     yLabelMaxLength,
     barChartHeight,
     barLegendHeight,
@@ -122,9 +127,9 @@ const BarChart = ({
                   yScale,
                   font,
                   canvasHeight,
-                  axisPositionValue,
+                  AXIS_POSITION_VALUE,
                   labelColor,
-                  chartBottomMargin
+                  CHART_BOTTOM_MARGIN
                 }}
               />
             </Canvas>
@@ -139,7 +144,7 @@ const BarChart = ({
           >
             <Canvas
               style={style.chartCanvasContainer}
-              onTouch={displayToolTip ? touchHandler : undefined}
+              onTouch={displayTooltip ? touchHandler : undefined}
             >
               {showLines && (
                 <RenderHorizontalGridLines
@@ -148,10 +153,10 @@ const BarChart = ({
                     xAxisData,
                     barWidth,
                     yScale,
-                    axisPositionValue,
+                    AXIS_POSITION_VALUE,
                     lineHeight,
                     canvasHeight,
-                    chartBottomMargin,
+                    CHART_BOTTOM_MARGIN,
                     horizontalGridLineColor,
                     initialDistance,
                     yLabelMaxLength
@@ -174,8 +179,8 @@ const BarChart = ({
                   canvasHeightWithHorizontalLabel
                 }}
               />
-              {displayToolTip && (
-                <ToolTip
+              {displayTooltip && (
+                <Tooltip
                   xForWindow={xForWindow.current}
                   {...{
                     xCoordinateForDataPoint,

example/src/utils/CommonUtils.ts

@@ -43,7 +43,7 @@ type BarChartProps = {
   toolTipDataColor?: string;
   toolTipHorizontalPadding?: number;
   toolTipFadeOutDuration?: number;
-  displayToolTip?: boolean;
+  displayTooltip?: boolean;
   showAnimation?: boolean;
   xLegendStyles?: TextStyle;
   yLegendStyles?: TextStyle;

example/src/utils/index.ts

@@ -16,7 +16,7 @@ const XAxisLabels = ({
 }: XAxisLabelsPropType) => {
   return (
     <>
-      {xAxisData.map((dataPoint, index) => {
+      {xAxisData?.map((dataPoint, index) => {
         const { height, width } = font?.measureText(dataPoint);
         const xScaleWidth = (xScale(dataPoint) as number) + barWidth / 2 + initialDistance;
         const xPoint = verticalLabel

package.json

@@ -6,14 +6,14 @@ const YAxisLabels = ({
   yScale,
   font,
   canvasHeight,
-  axisPositionValue,
+  AXIS_POSITION_VALUE,
   labelColor,
-  chartBottomMargin
+  CHART_BOTTOM_MARGIN
 }: YAxisLabelsPropsType) => {
   return (
     <>
       {yScale.ticks().map((tick: number, index: number) => {
-        const yPoint = canvasHeight - 2 * chartBottomMargin - yScale(tick) + axisPositionValue;
+        const yPoint = canvasHeight - 2 * CHART_BOTTOM_MARGIN - yScale(tick) + AXIS_POSITION_VALUE;
         return (
           <Text
             key={`y-label-${index}`}

src/assets/index.ts

@@ -4,8 +4,8 @@ import type { ScaleLinear } from 'd3';
 export interface YAxisLabelsPropsType {
   font: SkFont;
   canvasHeight: number;
-  axisPositionValue: number;
+  AXIS_POSITION_VALUE: number;
   labelColor: string;
-  chartBottomMargin: number;
+  CHART_BOTTOM_MARGIN: number;
   yScale: ScaleLinear<number, number>;
 }

src/components/bar-chart/BarChart.tsx

@@ -7,10 +7,10 @@ const YRefLines = ({
   xAxisData,
   barWidth,
   yScale,
-  axisPositionValue,
+  AXIS_POSITION_VALUE,
   lineHeight,
   canvasHeight,
-  chartBottomMargin,
+  CHART_BOTTOM_MARGIN,
   horizontalGridLineColor,
   initialDistance,
   yLabelMaxLength
@@ -23,7 +23,7 @@ const YRefLines = ({
   return (
     <>
       {yScale.ticks().map((tick: number, index: number) => {
-        const yPoint = canvasHeight - 2 * chartBottomMargin - yScale(tick) + axisPositionValue;
+        const yPoint = canvasHeight - 2 * CHART_BOTTOM_MARGIN - yScale(tick) + AXIS_POSITION_VALUE;
         return (
           <Rect
             key={`y-grid-${index}`}

src/components/bar-chart/BarChartTypes.ts

@@ -3,10 +3,10 @@ import type { ScaleLinear, ScalePoint } from 'd3';
 export interface YRefLinesProps {
   xAxisData: string[];
   barWidth: number;
-  axisPositionValue: number;
+  AXIS_POSITION_VALUE: number;
   lineHeight: number;
   canvasHeight: number;
-  chartBottomMargin: number;
+  CHART_BOTTOM_MARGIN: number;
   horizontalGridLineColor: string;
   initialDistance: number;
   yLabelMaxLength: number;

src/components/bar-chart/components/xaxis-label/XAxisLabels.tsx

@@ -1,3 +1,3 @@
 export { default as BarChart } from './BarChart';
-export { default as useBarChart } from './useBarChart';
 export * from './BarChartTypes';
+export { default as useBarChart } from './useBarChart';

src/components/bar-chart/components/yaxis-label/YAxisLabels.tsx

@@ -1,8 +1,8 @@
 import {
-  SkFont,
-  Skia,
   matchFont,
   runTiming,
+  SkFont,
+  Skia,
   useComputedValue,
   useFont,
   useTouchHandler,
@@ -11,10 +11,15 @@ import {
 import { max, scaleLinear, scalePoint, type NumberValue } from 'd3';
 import { useEffect } from 'react';
 import { Easing } from 'react-native';
-import { BARGRAPH_TOOLTIP_HITSLOP } from '../../constants';
+import {
+  AXIS_POSITION_VALUE,
+  BARGRAPH_TOOLTIP_HITSLOP,
+  CHART_BOTTOM_MARGIN,
+  INITIAL_SPACE
+} from '../../constants';
 import { useDefaultFont } from '../../hooks';
-import { Colors, chartWidth, horizontalScale, screenHeight } from '../../theme';
-import { useToolTipUtils } from '../tooltip';
+import { chartWidth, Colors, horizontalScale, screenHeight } from '../../theme';
+import { useTooltipUtils } from '../tooltip';
 import type { BarChartHookPropType } from './BarChartTypes';
 
 export default function useBarChart({
@@ -35,15 +40,12 @@ export default function useBarChart({
   xLegendStyles,
   yLegendStyles
 }: BarChartHookPropType) {
-  const chartBottomMargin = 14;
   const { fontStyle } = useDefaultFont({ labelSize });
   const userAddedFont = useFont(labelFontFamily, labelSize);
   const font: SkFont | null = labelFontFamily ? userAddedFont : matchFont(fontStyle);
   const animationState = useValue(0);
   const canvasHeight = Math.min(screenHeight, chartHeight);
-  const graphHeight = canvasHeight - 2 * chartBottomMargin;
-  const axisPositionValue = 25;
-  const initialSpace = 10;
+  const graphHeight = canvasHeight - 2 * CHART_BOTTOM_MARGIN;
   const xAxisData: string[] = chartData?.xAxis?.labels;
   const yAxisData: number[] = chartData?.yAxis?.datasets;
   const {
@@ -55,39 +57,39 @@ export default function useBarChart({
     yCoordinateForDataPoint,
     setXForWindow,
     setWindowSize
-  } = useToolTipUtils();
+  } = useTooltipUtils();
 
   const yMaxRange = Math.max(...yAxisData?.map((number) => number));
-  const getMaxWidthLabel: number = xAxisData.reduce((max: number, item) => {
+  const getMaxWidthLabel: number = xAxisData?.reduce((max: number, item) => {
     return Math.max(max, font ? font?.measureText(item).width : 0);
   }, 0);
 
-  const getMaxHeightLabel = xAxisData.reduce((max: number, item) => {
+  const getMaxHeightLabel = xAxisData?.reduce((max: number, item) => {
     return Math.max(max, font ? font.measureText(item).height : 0);
   }, 0);
 
   const canvasHeightWithHorizontalLabel = Math.floor(
-    canvasHeight + chartBottomMargin + getMaxHeightLabel
+    canvasHeight + CHART_BOTTOM_MARGIN + getMaxHeightLabel
   );
   const canvasHeightWithVerticalLabel = Math.floor(
-    canvasHeight + chartBottomMargin + getMaxWidthLabel
+    canvasHeight + CHART_BOTTOM_MARGIN + getMaxWidthLabel
   );
 
   let yScale = scaleLinear()
     .domain([
       yAxisMin ?? 0,
-      (yAxisMax && yAxisMax) ?? Math.max(...yAxisData?.map((yDataPoint: number) => yDataPoint))
+      yAxisMax ?? Math.max(...yAxisData?.map((yDataPoint: number) => yDataPoint))
     ])
     .range([0, graphHeight]);
 
   const yTicks = yScale.ticks();
-  const yTrimedArray = yTicks.map((element: number) => {
-    return element.toString().replace('.', '');
+  const yTrimmedArray = yTicks?.map((element: number) => {
+    return element?.toString().replace('.', '');
   });
 
-  const yLabelMaxLength = Math.max(...yTrimedArray.map((number) => String(number).length));
+  const yLabelMaxLength = Math.max(...yTrimmedArray?.map((number) => String(number)?.length));
 
-  const getMaxWidthForYAxis = yTrimedArray.reduce((max: number, item) => {
+  const getMaxWidthForYAxis = yTrimmedArray?.reduce((max: number, item) => {
     return Math.max(max, (font as SkFont)?.measureText(item.toString()).width);
   }, 0);
 
@@ -139,7 +141,7 @@ export default function useBarChart({
     xAxisData?.forEach((dataPoint: string, index) => {
       const rect = Skia.XYWHRect(
         (xScale(dataPoint) as number) + yLabelMaxLength + initialDistance,
-        graphHeight + axisPositionValue,
+        graphHeight + AXIS_POSITION_VALUE,
         barWidth,
         yScale(yAxisData[index] * animationState.current) * -1
       );
@@ -155,7 +157,7 @@ export default function useBarChart({
     xAxisData?.forEach((dataPoint: string, index) => {
       const rect = Skia.XYWHRect(
         (xScale(dataPoint) as number) + yLabelMaxLength + initialDistance,
-        graphHeight + axisPositionValue,
+        graphHeight + AXIS_POSITION_VALUE,
         barWidth,
         (yScale(yAxisData[index] * animationState.current) * -1) / 2
       );
@@ -167,9 +169,9 @@ export default function useBarChart({
 
   const barChartHeight: number = verticalLabel
     ? canvasHeightWithVerticalLabel
-    : canvasHeightWithHorizontalLabel + initialSpace;
+    : canvasHeightWithHorizontalLabel + INITIAL_SPACE;
   const barLegendHeight: number =
-    canvasHeight - 2 * chartBottomMargin - yScale.ticks()[0] + axisPositionValue;
+    canvasHeight - 2 * CHART_BOTTOM_MARGIN - yScale.ticks()[0] + AXIS_POSITION_VALUE;
   const yLabelWidth: number = yAxisLegend?.length * legendSize;
   const canvasWidth: number = getMaxWidthForYAxis + horizontalScale(20);
   const barChartWidth: number = barGap ? checkXWidth() : chartWidth + initialDistance;
@@ -180,7 +182,7 @@ export default function useBarChart({
   const touchHandler = useTouchHandler(
     {
       onStart: ({ x }) => {
-        xAxisData.forEach((dataPoint, index) => {
+        xAxisData?.forEach((dataPoint, index) => {
           const xForPlottedXLabel =
             (xScale(dataPoint) as number) + yLabelMaxLength + initialDistance;
 
@@ -197,7 +199,7 @@ export default function useBarChart({
               (xScale(dataPoint) as number) + (yLabelMaxLength + initialDistance) + barWidth / 2;
             yCoordinateForDataPoint.current =
               windowSize.current.y -
-              (windowSize.current.y - (graphHeight + axisPositionValue)) -
+              (windowSize.current.y - (graphHeight + AXIS_POSITION_VALUE)) -
               yScale(yAxisData[index] * animationState.current);
           }
         });
@@ -270,14 +272,14 @@ export default function useBarChart({
     path,
     createPath,
     canvasHeightWithHorizontalLabel,
-    initialSpace,
+    INITIAL_SPACE,
     canvasHeightWithVerticalLabel,
     getMaxWidthForYAxis,
     xAxisData,
     canvasHeight,
-    chartBottomMargin,
+    CHART_BOTTOM_MARGIN,
     yScale,
-    axisPositionValue,
+    AXIS_POSITION_VALUE,
     yLabelMaxLength,
     chartWidth,
     barChartHeight,