Add ViewMode Year

Author: Graeme43

example/src/App.tsx

@@ -10,7 +10,9 @@ const App = () => {
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
   let columnWidth = 65;
-  if (view === ViewMode.Month) {
+  if (view === ViewMode.Year) {
+    columnWidth = 350;
+  } else if (view === ViewMode.Month) {
     columnWidth = 300;
   } else if (view === ViewMode.Week) {
     columnWidth = 250;

example/src/components/view-switcher.tsx

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

src/components/calendar/calendar.tsx

@@ -32,6 +32,50 @@ export const Calendar: React.FC<CalendarProps> = ({
   fontFamily,
   fontSize,
 }) => {
+  const getCalendarValuesForYear = () => {
+    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 = date.getFullYear();
+      bottomValues.push(
+        <text
+          key={date.getFullYear()}
+          y={headerHeight * 0.8}
+          x={columnWidth * i + columnWidth * 0.5}
+          className={styles.calendarBottomText}
+        >
+          {bottomValue}
+        </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.getFullYear() + 1) * columnWidth;
+        } else {
+          xText = (6 + i - date.getFullYear()) * columnWidth;
+        }
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={headerHeight}
+            xText={xText}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+    return [topValues, bottomValues];
+  };
+
   const getCalendarValuesForMonth = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
@@ -268,10 +312,13 @@ export const Calendar: React.FC<CalendarProps> = ({
   let topValues: ReactChild[] = [];
   let bottomValues: ReactChild[] = [];
   switch (dateSetup.viewMode) {
-    case ViewMode.Month:
-      [topValues, bottomValues] = getCalendarValuesForMonth();
+    case ViewMode.Year:
+      [topValues, bottomValues] = getCalendarValuesForYear();
       break;
-    case ViewMode.Week:
+    case ViewMode.Month:
+        [topValues, bottomValues] = getCalendarValuesForMonth();
+        break;
+      case ViewMode.Week:
       [topValues, bottomValues] = getCalendarValuesForWeek();
       break;
     case ViewMode.Day:

src/helpers/date-helper.ts

@@ -81,6 +81,12 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
     }
   }
   switch (viewMode) {
+    case ViewMode.Year:
+      newStartDate = addToDate(newStartDate, -1, "year");
+      newStartDate = startOfDate(newStartDate, "year");
+      newEndDate = addToDate(newEndDate, 1, "year");
+      newEndDate = startOfDate(newEndDate, "year");
+      break;
     case ViewMode.Month:
       newStartDate = addToDate(newStartDate, -1, "month");
       newStartDate = startOfDate(newStartDate, "month");
@@ -130,6 +136,9 @@ export const seedDates = (
   const dates: Date[] = [currentDate];
   while (currentDate < endDate) {
     switch (viewMode) {
+      case ViewMode.Year:
+        currentDate = addToDate(currentDate, 1, "year");
+        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",
+  Year = "Year"
 }
 export type TaskType = "task" | "milestone" | "project";
 export interface Task {