@lafarmer28/densitycalendarnative 0.1.0

package/src/components/density-calendar/month-view/ks-density-calendar-month-view.tsx

@@ -0,0 +1,289 @@
+import { useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  useWindowDimensions,
+  DimensionValue,
+} from 'react-native';
+import {
+  format,
+  subDays,
+  addDays,
+  startOfMonth,
+  endOfMonth,
+  getDaysInMonth,
+  eachDayOfInterval,
+  isToday,
+  isSameMonth,
+} from 'date-fns';
+
+import KSSlider from '../ks-slider/ks-slider';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+import {
+  type KSDensityCalendarEventType,
+  type ThemeKeyProps,
+} from '../ks-density-calendar';
+import { getColorForPercentage, type UsedNames } from '../utility-functions';
+import DaysOfWeek from './days-of-week';
+import TopNavigation from './top-navigation';
+import { type SVGProps } from '../ks-density-calendar-root';
+
+type KSDensityCalendarMonthProps = {
+  displayDate: Date;
+  toDayHandler: (dt: Date) => void;
+  multScheduleData: KSDensityCalendarEventType[];
+  handlePrevious: () => void;
+  handleNext: () => void;
+  handleToday: () => void;
+  calendarDisplay: string;
+  themeKeys: ThemeKeyProps['themeKeys'];
+} & SVGProps;
+
+export const GetDaysOfMonthWithinIntersection = (
+  displayDateStart: Date,
+  displayDateEnd: Date,
+  start: Date,
+  end: Date
+) => {
+  const s = start < displayDateStart ? displayDateStart : start;
+  const e = end > displayDateEnd ? displayDateEnd : end;
+  try {
+    const daysWithinInterval = eachDayOfInterval({ start: s, end: e });
+    return daysWithinInterval.map((dt: Date) => dt.getDate());
+  } catch {
+    return [];
+  }
+};
+
+export const CalcDayPercents = (
+  dt: Date,
+  data: KSDensityCalendarEventType[]
+) => {
+  const daysInMonth = getDaysInMonth(dt);
+  const ret = new Array(daysInMonth).fill(0);
+  const usedNames: UsedNames = {};
+  const displayDateStart = startOfMonth(dt);
+  const displayDateEnd = endOfMonth(dt);
+
+  data.forEach((item) => {
+    if (item.start > displayDateEnd || item.end < displayDateStart) return;
+
+    const intersection = GetDaysOfMonthWithinIntersection(
+      displayDateStart,
+      displayDateEnd,
+      item.start,
+      item.end
+    );
+
+    intersection.forEach((day) => {
+      if (!usedNames[item.name]) {
+        usedNames[item.name] = new Array(daysInMonth).fill(0);
+      }
+
+      const nameSchedule = usedNames[item.name];
+
+      if (nameSchedule && nameSchedule[day - 1] === 0) {
+        nameSchedule[day - 1] = 1;
+        ret[day - 1] += 1;
+      }
+    });
+  });
+
+  const totalNames = Object.keys(usedNames).length;
+  if (totalNames > 0) {
+    for (let j = 0; j < ret.length; j++) {
+      ret[j] = Math.round((ret[j] / totalNames) * 100);
+    }
+  }
+  return ret;
+};
+
+const KSDensityCalendarMonthView = ({
+  displayDate,
+  toDayHandler,
+  multScheduleData,
+  handlePrevious,
+  handleNext,
+  handleToday,
+  calendarDisplay,
+  themeKeys,
+  svgIconColor,
+  svgIconSize,
+  svgIconUnactiveColor,
+}: KSDensityCalendarMonthProps) => {
+  const { state } = useKSDensityCalendar();
+  const { toggleKSSlider, minVal, maxVal } = state;
+  const { height, width: windowWidth } = useWindowDimensions();
+  const isLandscape = windowWidth > height;
+
+  const firstDayOfMonth = startOfMonth(displayDate);
+  const firstDayOfWeek = firstDayOfMonth.getDay();
+
+  const percentsForDayOfMonth = useMemo(
+    () => CalcDayPercents(displayDate, multScheduleData),
+    [displayDate, multScheduleData]
+  );
+
+  const cells = Array.from({ length: 42 }, (_, index) => {
+    let date: Date;
+    if (index < firstDayOfWeek) {
+      date = subDays(firstDayOfMonth, firstDayOfWeek - index);
+    } else {
+      date = addDays(firstDayOfMonth, index - firstDayOfWeek);
+    }
+
+    const isCurrentMonth = isSameMonth(date, displayDate);
+    const rawPercent = isCurrentMonth
+      ? percentsForDayOfMonth[date.getDate() - 1]
+      : 0;
+
+    const percentValue =
+      (minVal === 0 && maxVal === 100) ||
+      (rawPercent >= minVal && rawPercent <= maxVal)
+        ? rawPercent
+        : 0;
+
+    const color = getColorForPercentage(percentValue);
+    const barWidth =
+      percentValue <= 33 ? '30%' : percentValue <= 66 ? '50%' : '80%';
+    const barHeight = percentValue > 0 ? `${percentValue}%` : '0%';
+
+    const cellStyle = [
+      styles.dateCell,
+      {
+        borderColor: isCurrentMonth
+          ? themeKeys.secondaryColor
+          : themeKeys.secondaryColorPnt3,
+        height: isLandscape ? height * 0.12 : height * 0.08,
+      },
+    ];
+
+    const textStyle = isToday(date)
+      ? isCurrentMonth
+        ? styles.todayCurrentMonth
+        : styles.todayNonCurrentMonth
+      : isCurrentMonth
+        ? { color: themeKeys.secondaryColor }
+        : { color: themeKeys.secondaryColorPnt3 };
+
+    return (
+      <Pressable
+        key={index}
+        style={cellStyle}
+        onPress={() => isCurrentMonth && percentValue > 0 && toDayHandler(date)}
+      >
+        <View style={styles.cellHeader}>
+          <Text style={[styles.dateText, textStyle]}>{format(date, 'd')}</Text>
+        </View>
+
+        {isCurrentMonth && (
+          <View style={styles.percentageContainer}>
+            {percentValue > 0 && (
+              <Text
+                style={[
+                  styles.percentLabel,
+                  { color: themeKeys.secondaryColor },
+                ]}
+              >
+                {percentValue}%
+              </Text>
+            )}
+            <View style={styles.barTrack}>
+              <View
+                style={[
+                  styles.percentageBar,
+                  {
+                    backgroundColor: color,
+                    // Cast both as DimensionValue to satisfy TypeScript
+                    width: barWidth as DimensionValue,
+                    height: barHeight as DimensionValue,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        )}
+      </Pressable>
+    );
+  });
+
+  return (
+    <View style={styles.container}>
+      <TopNavigation
+        handlePrevious={handlePrevious}
+        handleNext={handleNext}
+        handleToday={handleToday}
+        displayDate={displayDate}
+        themeKeys={themeKeys}
+        svgIconColor={svgIconColor}
+        svgIconSize={svgIconSize}
+        svgIconUnactiveColor={svgIconUnactiveColor}
+      />
+      <DaysOfWeek />
+      <ScrollView contentContainerStyle={styles.monthGrid}>{cells}</ScrollView>
+      {toggleKSSlider && (
+        <View style={styles.sliderWrapper}>
+          <KSSlider calendarDisplay={calendarDisplay} themeKeys={themeKeys} />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  monthGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    paddingHorizontal: 8,
+  },
+  dateCell: {
+    width: '14.28%',
+    borderWidth: 0.5,
+    padding: 2,
+    justifyContent: 'space-between',
+  },
+  cellHeader: {
+    alignSelf: 'flex-start',
+  },
+  dateText: {
+    fontSize: 12,
+  },
+  todayCurrentMonth: {
+    color: 'rgba(137, 28, 28, 1)',
+    fontWeight: 'bold',
+  },
+  todayNonCurrentMonth: {
+    color: 'rgba(137, 28, 28, 0.4)',
+  },
+  percentageContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  percentLabel: {
+    fontSize: 8,
+    marginBottom: 2,
+  },
+  barTrack: {
+    width: '100%',
+    height: '60%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  percentageBar: {
+    borderRadius: 4,
+  },
+  sliderWrapper: {
+    paddingBottom: 20,
+    paddingHorizontal: 10,
+  },
+});
+
+export default KSDensityCalendarMonthView;

package/src/components/density-calendar/month-view/top-navigation.tsx

@@ -0,0 +1,137 @@
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { format } from 'date-fns';
+import KSToggler from '../ks-toggler/ks-toggler';
+import { type ThemeKeyProps } from '../ks-density-calendar';
+import { type SVGProps } from '../ks-density-calendar-root';
+
+type TopNavigationProps = {
+  handlePrevious: () => void;
+  displayDate: Date;
+  handleNext: () => void;
+  handleToday: () => void;
+} & ThemeKeyProps &
+  SVGProps;
+
+const TopNavigation = ({
+  handlePrevious,
+  displayDate,
+  handleNext,
+  handleToday,
+  svgIconColor,
+  svgIconSize,
+  svgIconUnactiveColor,
+}: TopNavigationProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerRow}>
+        <Pressable
+          onPress={handlePrevious}
+          style={({ pressed }) => [
+            styles.iconButton,
+            pressed && styles.pressed,
+          ]}
+        >
+          <MaterialIcons
+            name="chevron-left"
+            size={svgIconSize + 10}
+            color={svgIconColor}
+          />
+        </Pressable>
+
+        <Text style={styles.titleText}>{format(displayDate, 'MMMM yyyy')}</Text>
+
+        <Pressable
+          onPress={handleNext}
+          style={({ pressed }) => [
+            styles.iconButton,
+            pressed && styles.pressed,
+          ]}
+        >
+          <MaterialIcons
+            name="chevron-right"
+            size={svgIconSize + 10}
+            color={svgIconColor}
+          />
+        </Pressable>
+      </View>
+
+      <View style={styles.controlsRow}>
+        <View style={styles.togglerContainer}>
+          <MaterialCommunityIcons
+            name="minus"
+            size={svgIconSize}
+            color={svgIconUnactiveColor || svgIconColor}
+          />
+          <View style={styles.togglerWrapper}>
+            <KSToggler />
+          </View>
+          <MaterialCommunityIcons
+            name="plus"
+            size={svgIconSize}
+            color={svgIconUnactiveColor || svgIconColor}
+          />
+        </View>
+
+        <Pressable
+          onPress={handleToday}
+          style={({ pressed }) => [
+            styles.iconButton,
+            pressed && styles.pressed,
+          ]}
+        >
+          <MaterialCommunityIcons
+            name="calendar-today"
+            size={svgIconSize}
+            color={svgIconColor}
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    paddingHorizontal: 8,
+    paddingVertical: 12,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginBottom: 10,
+  },
+  titleText: {
+    fontSize: 24,
+    fontWeight: '600',
+    textAlign: 'center',
+    minWidth: '50%',
+  },
+  controlsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  togglerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 15,
+  },
+  togglerWrapper: {
+    marginHorizontal: 8,
+  },
+  iconButton: {
+    padding: 6,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  pressed: {
+    opacity: 0.6,
+  },
+});
+
+export default TopNavigation;

package/src/components/density-calendar/utility-functions.ts

@@ -0,0 +1,67 @@
+import { eachDayOfInterval } from 'date-fns';
+import type { KSDensityCalendarEventType } from './ks-density-calendar';
+
+export interface UsedNames {
+  [name: string]: number[];
+}
+
+export const firstDateOfWeek: Date = new Date(2023, 0, 1);
+
+const colorList: string[] = Array.from({ length: 100 }, (_, i) => {
+  const step = i + 1;
+  const r = 51 + Math.floor(step * 2.04);
+  const a = ((step - 1) / 99) * 0.5 + 0.5;
+  return `rgba(${r}, 0, 0, ${a.toFixed(1)})`;
+});
+
+export const getColorForPercentage = (percentage: number): string => {
+  if (percentage <= 0) return 'transparent';
+  const index = Math.min(Math.max(percentage - 1, 0), 99);
+  return colorList[index] || 'transparent';
+};
+
+export const getDaysOfWeekWithinIntersection = (
+  start: Date,
+  end: Date
+): number[] => {
+  const daysWithinInterval = eachDayOfInterval({ start, end });
+  return daysWithinInterval.map((dt) => dt.getDay());
+};
+
+export const calcWeekPercents = (
+  data: KSDensityCalendarEventType[]
+): number[] => {
+  const ret = new Array(7).fill(0);
+  const usedNames: UsedNames = {};
+
+  for (const item of data) {
+    if (!item) continue;
+
+    const daysOfWeekWithinIntersection = getDaysOfWeekWithinIntersection(
+      item.start,
+      item.end
+    );
+
+    daysOfWeekWithinIntersection.forEach((itemDayOfWeek) => {
+      if (!usedNames[item.name]) {
+        usedNames[item.name] = new Array(7).fill(0);
+      }
+
+      const currentNameData = usedNames[item.name]!;
+
+      if (currentNameData[itemDayOfWeek] === 0) {
+        currentNameData[itemDayOfWeek] = 1;
+        ret[itemDayOfWeek] += 1;
+      }
+    });
+  }
+
+  const totalNames = Object.keys(usedNames).length;
+  if (totalNames > 0) {
+    for (let j = 0; j < ret.length; j++) {
+      ret[j] = Math.round((ret[j] / totalNames) * 100);
+    }
+  }
+
+  return ret;
+};

package/src/components/density-calendar/week-view/ks-density-calendar-week-view.tsx

@@ -0,0 +1,189 @@
+import {
+  StyleSheet,
+  View,
+  Text,
+  Pressable,
+  ViewStyle,
+  DimensionValue,
+} from 'react-native';
+import {
+  type KSDensityCalendarEventType,
+  type ThemeKeyProps,
+} from '../ks-density-calendar';
+import { type KSOptionalProps } from '../ks-density-calendar';
+import { type SVGProps } from '../ks-density-calendar-root';
+import { useKSDensityCalendar } from '../context/use-ks-density-calendar-context';
+import {
+  getColorForPercentage,
+  firstDateOfWeek,
+  calcWeekPercents,
+} from '../utility-functions';
+import Top from './top';
+import KSSlider from '../ks-slider/ks-slider';
+
+type KSDensityCalendarWeekProps = {
+  displayDate: Date;
+  toDayHandler: (dt: Date) => void;
+  multScheduleData: KSDensityCalendarEventType[];
+  calendarDisplay: string;
+} & KSOptionalProps &
+  ThemeKeyProps &
+  SVGProps;
+
+const KSDensityCalendarWeekView = ({
+  toDayHandler,
+  multScheduleData,
+  calendarDisplay,
+  themeKeys,
+  svgIconColor,
+  svgIconSize,
+  svgIconUnactiveColor,
+}: KSDensityCalendarWeekProps) => {
+  const { daysOfWeek, state } = useKSDensityCalendar();
+
+  const percentsForDaysOfWeek: number[] = calcWeekPercents(multScheduleData);
+
+  return (
+    <View
+      style={[styles.container, !state.toggleKSSlider && styles.paddingBottom]}
+    >
+      <Top
+        themeKeys={themeKeys}
+        svgIconColor={svgIconColor}
+        svgIconSize={svgIconSize}
+        svgIconUnactiveColor={svgIconUnactiveColor}
+      />
+
+      <View style={styles.daysHeader}>
+        {Array.from({ length: 7 }, (_, index) => (
+          <View key={daysOfWeek[index] || index} style={styles.headerCell}>
+            <Text style={styles.headerText}>{daysOfWeek[index]}</Text>
+          </View>
+        ))}
+      </View>
+
+      <View style={styles.graphContainer}>
+        {percentsForDaysOfWeek.map((percentValue, index) => {
+          const showValue =
+            state.minVal === 0 && state.maxVal === 100
+              ? percentValue
+              : state.minVal <= percentValue && percentValue <= state.maxVal
+                ? percentValue
+                : 0;
+
+          const color = getColorForPercentage(percentValue);
+          const barWidth =
+            percentValue <= 33 ? '25%' : percentValue <= 66 ? '45%' : '65%';
+
+          const barStyle: ViewStyle = {
+            // Assign the type here
+            height: `${showValue}%` as DimensionValue, // Assert as DimensionValue
+            width: barWidth as DimensionValue, // Assert as DimensionValue
+            backgroundColor: showValue > 0 ? color : 'transparent',
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10,
+            opacity: 0.6,
+            shadowColor: '#000',
+            shadowOffset: { width: 1, height: 0 },
+            shadowOpacity: showValue > 0 ? 0.3 : 0,
+            shadowRadius: 1,
+          };
+
+          const handlePress = () => {
+            if (showValue > 0) {
+              const dateValue = new Date(firstDateOfWeek);
+              dateValue.setDate(1 + index - firstDateOfWeek.getDay());
+              toDayHandler(dateValue);
+            }
+          };
+
+          return (
+            <Pressable
+              key={index}
+              onPress={handlePress}
+              style={[
+                styles.weekSegment,
+                index === 0 && styles.roundedLeft,
+                index === 6 && styles.roundedRight,
+                index === 6 && styles.borderRight,
+              ]}
+            >
+              <Text style={styles.percentText}>
+                {showValue > 0 ? `${showValue}%` : ''}
+              </Text>
+              <View style={barStyle} />
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {state.toggleKSSlider && (
+        <View style={styles.sliderWrapper}>
+          <KSSlider calendarDisplay={calendarDisplay} themeKeys={themeKeys} />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: 8,
+  },
+  paddingBottom: {
+    paddingBottom: 8,
+  },
+  daysHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    paddingVertical: 10,
+  },
+  headerCell: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  graphContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+  weekSegment: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+    borderLeftWidth: 1,
+    borderColor: 'rgba(254, 243, 200, 0.5)',
+  },
+  percentText: {
+    fontSize: 10,
+    marginBottom: 4,
+  },
+  roundedLeft: {
+    borderTopLeftRadius: 10,
+    borderBottomLeftRadius: 10,
+  },
+  roundedRight: {
+    borderTopRightRadius: 10,
+    borderBottomRightRadius: 10,
+  },
+  borderRight: {
+    borderRightWidth: 1,
+  },
+  sliderWrapper: {
+    width: '100%',
+    paddingVertical: 10,
+  },
+});
+
+export default KSDensityCalendarWeekView;