Merge pull request #1 from krngd2/add-viewmode-QuarterYear

Add viewmode quarter year

Author: Graeme43

README.md

@@ -86,7 +86,7 @@ npm start
 
 | Parameter Name | Type    | Description                                                                                                 |
 | :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
-| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, Year. |
+| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
 | viewDate       | date    | Specifies display date and time for display.                                                                |
 | preStepsCount  | number  | Specifies empty space before the fist task                                                                  |
 | locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |

example/src/components/view-switcher.tsx

@@ -52,6 +52,12 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
       >
         Year
       </button>
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.QuarterYear)}
+      >
+        Year
+      </button>
       <div className="Switch">
         <label className="Switch_Toggle">
           <input

src/components/calendar/calendar.tsx

@@ -41,7 +41,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       const bottomValue = date.getFullYear();
       bottomValues.push(
         <text
-          key={date.getFullYear()}
+          key={date.getTime()}
           y={headerHeight * 0.8}
           x={columnWidth * i + columnWidth * 0.5}
           className={styles.calendarBottomText}
@@ -76,6 +76,51 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
+  const getCalendarValuesForQuarterYear = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      // const bottomValue = getLocaleMonth(date, locale);
+      const quarter = "Q" + Math.floor((date.getMonth() + 3) / 3);
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={styles.calendarBottomText}
+        >
+          {quarter}
+        </text>
+      );
+      if (
+        i === 0 ||
+        date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()
+      ) {
+        const topValue = date.getFullYear().toString();
+        let xText: number;
+        if (rtl) {
+          xText = (6 + i + date.getMonth() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getMonth()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={Math.abs(xText)}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
   const getCalendarValuesForMonth = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
@@ -316,10 +361,13 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.Year:
       [topValues, bottomValues] = getCalendarValuesForYear();
       break;
+    case ViewMode.QuarterYear:
+      [topValues, bottomValues] = getCalendarValuesForQuarterYear();
+      break;
     case ViewMode.Month:
-        [topValues, bottomValues] = getCalendarValuesForMonth();
-        break;
-      case ViewMode.Week:
+      [topValues, bottomValues] = getCalendarValuesForMonth();
+      break;
+    case ViewMode.Week:
       [topValues, bottomValues] = getCalendarValuesForWeek();
       break;
     case ViewMode.Day:

src/helpers/date-helper.ts

@@ -91,6 +91,12 @@ export const ganttDateRange = (
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
+    case ViewMode.QuarterYear:
+      newStartDate = addToDate(newStartDate, -3, "month");
+      newStartDate = startOfDate(newStartDate, "month");
+      newEndDate = addToDate(newEndDate, 3, "year");
+      newEndDate = startOfDate(newEndDate, "year");
+      break;
     case ViewMode.Month:
       newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
       newStartDate = startOfDate(newStartDate, "month");
@@ -147,6 +153,9 @@ export const seedDates = (
       case ViewMode.Year:
         currentDate = addToDate(currentDate, 1, "year");
         break;
+      case ViewMode.QuarterYear:
+        currentDate = addToDate(currentDate, 3, "month");
+        break;
       case ViewMode.Month:
         currentDate = addToDate(currentDate, 1, "month");
         break;

src/types/public-types.ts

@@ -6,6 +6,7 @@ export enum ViewMode {
   /** ISO-8601 week */
   Week = "Week",
   Month = "Month",
+  QuarterYear = "QuarterYear",
   Year = "Year",
 }
 export type TaskType = "task" | "milestone" | "project";