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

Add viewmode quarter year
MaTeMaTuK · Aug 21, 2022 · 3cbe524 · 3cbe524
2 parents fabcdfb 7d7634f
commit 3cbe524
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 5 deletions.
diff --git a/README.md b/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. |

diff --git a/example/src/components/view-switcher.tsx b/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

diff --git a/src/components/calendar/calendar.tsx b/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:

diff --git a/src/helpers/date-helper.ts b/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;

diff --git a/src/types/public-types.ts b/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";