[WEB-4246] Analytics minor improvements (#7194)

* chore: updated label for epics

* chore: improved export logic

* refactor: move csvConfig to export.ts and clean up export logic

* refactor: remove unused CSV export logic from WorkItemsInsightTable component

* refactor: streamline data handling in InsightTable component for improved rendering

* feat: add translation for "No. of {entity}" and update priority chart y-axis label to use new translation

* refactor: cleaned up some component and added utilitites

* feat: add "at_risk" translation to multiple languages in translations.json files

* refactor: update TrendPiece component to use new status variants for analytics

* fix: adjust TrendPiece component logic for on-track and off-track status

* refactor: use nullish coalescing operator for yAxis.dx in line and scatter charts

* feat: add "at_risk" translation to various languages in translations.json files

* feat: add "no_of" translation to various languages in translations.json files

* feat: update "at_risk" translation in Ukrainian, Vietnamese, and Chinese locales in translations.json files

packages/propel/src/charts/line-chart/root.tsx

@@ -122,7 +122,7 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
                 angle: -90,
                 position: "bottom",
                 offset: -24,
-                dx: -16,
+                dx: yAxis.dx ?? -16,
                 className: AXIS_LABEL_CLASSNAME,
               }
             }

packages/propel/src/charts/scatter-chart/root.tsx

@@ -27,7 +27,6 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
     margin,
     xAxis,
     yAxis,
-
     className,
     tickCount = {
       x: undefined,
@@ -35,6 +34,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
     },
     legend,
     showTooltip = true,
+    customTooltipContent,
   } = props;
   // states
   const [activePoint, setActivePoint] = useState<string | null>(null);
@@ -107,7 +107,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
                 angle: -90,
                 position: "bottom",
                 offset: -24,
-                dx: -16,
+                dx: yAxis.dx ?? -16,
                 className: AXIS_LABEL_CLASSNAME,
               }
             }
@@ -133,17 +133,21 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
               wrapperStyle={{
                 pointerEvents: "auto",
               }}
-              content={({ active, label, payload }) => (
-                <CustomTooltip
-                  active={active}
-                  activeKey={activePoint}
-                  label={label}
-                  payload={payload}
-                  itemKeys={itemKeys}
-                  itemLabels={itemLabels}
-                  itemDotColors={itemDotColors}
-                />
-              )}
+              content={({ active, label, payload }) =>
+                customTooltipContent ? (
+                  customTooltipContent({ active, label, payload })
+                ) : (
+                  <CustomTooltip
+                    active={active}
+                    activeKey={activePoint}
+                    label={label}
+                    payload={payload}
+                    itemKeys={itemKeys}
+                    itemLabels={itemLabels}
+                    itemDotColors={itemDotColors}
+                  />
+                )
+              }
             />
           )}
           {renderPoints}
@@ -152,4 +156,4 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
     </div>
   );
 });
-ScatterChart.displayName = "ScatterChart";
+ScatterChart.displayName = "ScatterChart";