feature/COR-1938-update-format-intial-tick-date (#5003)

* refactor(COR-1938): Make comments JSDoc compliant

* refactor: reorder

* refactor: reorder

* feat(COR-1938): Set dateformat of first tick to include date

packages/app/src/components/time-series-chart/components/axes/logic/create-time-ticks.ts

@@ -15,39 +15,54 @@ export interface TickInstance {
   formatStyle: formatStyle;
 }
 
+function getDefault2ValuesForXAxis(startTick: number, endTick: number): TickInstance[] {
+  return [
+    { timestamp: startTick, formatStyle: 'axis-with-day-month-year-short' },
+    { timestamp: endTick, formatStyle: 'axis-with-day-month-year-short' },
+  ] as TickInstance[];
+}
+
+function populateTicksArray(stepCount: number, step: number, startTick: number, formatStyle: formatStyle): TickInstance[] {
+  const ticks: TickInstance[] = [];
+  for (let i = 0; i < stepCount; i++) {
+    const tick = startTick + i * step;
+    ticks.push({ timestamp: middleOfDayInSeconds(tick), formatStyle: i == 0 ? 'axis-with-day-month-year-short' : formatStyle });
+  }
+  return ticks;
+}
+
+/**
+ * For the All timeframe we are interested in the amount of January 1st dates inbetween
+ * startUnix and endUnix (e.g 07.09.2020 - 31.01.2024 will results in 4 ticks).
+ *
+ * The way it works is that we first check if the startDate is equal to January 1st.
+ * If so, the count will get +1 at the end since the start year is not included when
+ * making the difference between the endYear and startYear
+ *
+ * This function is used in the Axes component where the bottomAxesTickNumber value
+ * is being generated.
+ * @param startUnix fist date on the x-axis
+ * @param endUnix last date on the x-axis
+ */
 export function getPrefferedTimeTicksAllTimeFrame(startUnix: number, endUnix: number): number {
-  /**
-   * For the All timeframe we are interested in the amount of January 1st dates inbetween
-   * startUnix and endUnix (e.g 07.09.2020 - 31.01.2024 will results in 4 ticks).
-   *
-   * The way it works is that we first check if the startDate is equal to January 1st.
-   * If so, the count will get +1 at the end since the start year is not included when
-   * making the difference between the endYear and startYear
-   *
-   * This function is used in the Axes component where the bottomAxesTickNumber value
-   * is being generated.
-   */
   const firstYearFirstOfJanuary = extractMonthFromDate(startUnix) == 0 && extractDayFromDate(startUnix) == 1;
 
   const count = extractYearFromDate(endUnix) - extractYearFromDate(startUnix);
 
   return firstYearFirstOfJanuary ? count + 1 : count;
 }
 
-function getDefault2ValuesForXAxis(startTick: number, endTick: number): TickInstance[] {
-  return [
-    { timestamp: startTick, formatStyle: 'axis-with-day-month-year-short' },
-    { timestamp: endTick, formatStyle: 'axis-with-day-month-year-short' },
-  ] as TickInstance[];
-}
-
+/**
+ * This method is only used for the `all` timeframe option.
+ * The function is not and won't be adjusted to cover all the edge cases available:
+ * e.g. having a very short period between the start and end date which results
+ * in only 1 or 2 january dates in between them.
+ * @param startTick first tick date on the x-axis
+ * @param endTick last tick date on the x-axis
+ * @param ticksNumber total number of ticks
+ * @param breakpoints current screen size
+ */
 export function createTimeTicksAllTimeFrame(startTick: number, endTick: number, ticksNumber: number, breakpoints: Breakpoints): TickInstance[] {
-  /**
-   * This method is only used for the `all` timeframe option.
-   * The function is not and won't be adjusted to cover all the edge cases available:
-   * e.g. having a very short period between the start and end date which results
-   * in only 1 or 2 january dates in between them.
-   */
   const start = middleOfDayInSeconds(startTick);
   const end = middleOfDayInSeconds(endTick);
   const startYear = extractYearFromDate(start);
@@ -63,20 +78,24 @@ export function createTimeTicksAllTimeFrame(startTick: number, endTick: number,
 
   // This if statement ensures that first & second label of the all-values timeframe don't overlap
   if (breakpoints.lg && Math.floor((ticks[0].timestamp - startTick) / 86400) > 180) {
-    ticks.unshift({ timestamp: start, formatStyle: 'axis-with-month-year-short' } as TickInstance);
+    ticks.unshift({ timestamp: start, formatStyle: 'axis-with-day-month-year-short' } as TickInstance);
   }
 
   return ticks;
 }
 
+/**
+ * This method will calculate the timestamps for the 3 months interval. It must consist of exactly 4 values.
+ * First value:  01 (XX - 3) 'YY
+ * Second value: 01 (XX - 2) 'YY
+ * Third value:  01 (XX - 1) 'YY
+ * Fourth value: 01 XX 'YY     - Where XX is the current month
+ * @param startTick first tick date on the x-axis
+ * @param endTick last tick date on the x-axis
+ * @param count total number of ticks
+ * @param breakpoints current screen size
+ */
 export function createTimeTicksMonthlyTimeFrame(startTick: number, endTick: number, count: number, breakpoints: Breakpoints): TickInstance[] {
-  /**
-   * This method will calculate the timestamps for the 3 months interval. It must consist of exactly 4 values.
-   * First value:  01 (XX - 3) 'YY
-   * Second value: 01 (XX - 2) 'YY
-   * Third value:  01 (XX - 1) 'YY
-   * Fourth value: 01 XX 'YY     - Where XX is the current month
-   */
   const start = middleOfDayInSeconds(startTick);
   const end = middleOfDayInSeconds(endTick);
 
@@ -100,13 +119,18 @@ export function createTimeTicksMonthlyTimeFrame(startTick: number, endTick: numb
   return ticks;
 }
 
+/**
+ * This method will create the ticks for the entire interval except the last value
+ * The way it's setup is that the last value is pushed after `populateTicksArray()`
+ * is executed. The user is able to define what format style for labels he wants between
+ * value[1] and second to last value. The last value will always have the same format.
+ * @param startTick first tick date on the x-axis
+ * @param endTick last tick date on the x-axis
+ * @param count total number of ticks
+ * @param valuesCount total number of data points on x-axis
+ * @param formatStyle what date format is followed
+ */
 export function createTimeTicks(startTick: number, endTick: number, count: number, valuesCount: number | undefined, formatStyle: formatStyle): TickInstance[] {
-  /**
-   * This method will create the ticks for the entire interval except the last value
-   * The way it's setup is that the last value is pushed after `populateTicksArray()`
-   * is executed. The user is able to define what format style for labels he wants between
-   * value[1] and second to last value. The last value will always have the same format.
-   */
   const start = middleOfDayInSeconds(startTick);
   const end = middleOfDayInSeconds(endTick);
 
@@ -123,12 +147,3 @@ export function createTimeTicks(startTick: number, endTick: number, count: numbe
 
   return ticks;
 }
-
-function populateTicksArray(stepCount: number, step: number, startTick: number, formatStyle: formatStyle): TickInstance[] {
-  const ticks: TickInstance[] = [];
-  for (let i = 0; i < stepCount; i++) {
-    const tick = startTick + i * step;
-    ticks.push({ timestamp: middleOfDayInSeconds(tick), formatStyle: i == 0 ? 'axis-with-day-month-year-short' : formatStyle });
-  }
-  return ticks;
-}