// import type { MachineConfig } from 'xstate'; // import { createMachine, assign, sendParent, spawn } from 'xstate'; // import { treeMachine } from '../../@iioioo_viz/State/tree.machine'; // import { TreeMachineConfig } from '../../@iioioo_viz/State/types/tree.types'; // import type { // CalendarModel, // CalendarContext, // CalendarEvent, // CalendarState, // Month, // Calendar_Event_SelectDate, // Day, // DateRange // } from '../models'; // const initialiseCalendar = (languageAlpha, year, startDate, endDate, ranges): Month[] => { // const today = new Date(); // const daysOfYear = getDateArray(startDate, endDate); // const monthMap: any = {}; // const { // monthLongFormat, // monthShortFormat, // weekdayLongFormat, // weekdayShortFormat } = getFormats(languageAlpha); // daysOfYear.forEach((date: Date) => { // const monthLong = monthLongFormat.format(date); // const monthShort = monthShortFormat.format(date); // const weekdayLong = weekdayLongFormat.format(date); // const weekdayShort = weekdayShortFormat.format(date); // const dayOfWeek = date.getDay(); // const dayOfMonth = date.getDate(); // const dayOfYear = getDayOfYear(date); // const weekOfYear = getWeekOfYear(date); // const type = getType(ranges, date); // const day: Day = { // id: date.getTime().toString(), // time: date.getTime(), // TODO: this needs to account for a more accurate time if day is today // date, // monthLong, // monthShort, // weekdayLong, // weekdayShort, // name: weekdayShort, // year, // dayOfWeek, // dayOfMonth, // dayOfYear, // weekOfYear, // selected: false, // types: [ type ], // tags: [], // data: null // } // monthMap[monthLong] = !!monthMap[monthLong] ? // { ...monthMap[monthLong], days: [ ...monthMap[monthLong].days, day ], year } : // { name: monthLong, description: '', days: [ day ], year }; // }); // // return Object.values(monthMap); // const wrangled = Object.values(monthMap).reduce((acc: any[], month: Month) => { // // experimental // const fakeMonth = { ...month }; // while(fakeMonth.days.length < 35) { // fakeMonth.days.push({ // name: 'dum', // parentId: month.name, // invisible: true, // // dayOfMonth: fakeMonth.days.length + 1 // } as any) // } // // fakeMonth.days = fakeMonth.days.slice(0,30); // <-- this works in terms of creating a grid // const monthAndDays = [ // { ...fakeMonth, id: fakeMonth.name, parentId: fakeMonth.year }, // ...fakeMonth.days.map(day => ({ // ...day, // value: day.name === 'dum' ? 0 : Math.random()*10, // anotherValue: day.name === 'dum' ? 0 : Math.random()*10, // parentId: fakeMonth.name // })) // ]; // return [ ...acc, ...monthAndDays ] // }, [ { name: 'parent', id: '2021', parentId: null } ]); // return wrangled as any; // } // const getFormats = (languageAlpha) => { // return { // monthLongFormat: new Intl.DateTimeFormat(languageAlpha, { month: 'long' }), // monthShortFormat: new Intl.DateTimeFormat(languageAlpha, { month: 'short' }), // weekdayLongFormat: new Intl.DateTimeFormat(languageAlpha, { weekday: 'long' }), // weekdayShortFormat: new Intl.DateTimeFormat(languageAlpha, { weekday: 'short' }) // } // } // const getType = (ranges: DateRange[], date) => { // const today = new Date(); // const range = ranges.find(range => { // const isEqualToOrGreaterThanStartDate = date >= range.startDate; // const isSmallerThanEndDate = !range.endDate || date < range.endDate; // return !!isEqualToOrGreaterThanStartDate && !!isSmallerThanEndDate // }); // let type; // if( date.getDate() === today.getDate() && date.getMonth() === today.getMonth()){ // type = 'today'; // } else if(!!range) { // type = date > today ? 'future' : range.type; // } else { // type = date > today ? 'future' : 'past'; // } // return type; // } // const getDayOfYear = (date: Date) => { // const start = new Date(date.getFullYear(), 0, 0); // const diff = (date.getTime() - start.getTime()) + ((start.getTimezoneOffset() - date.getTimezoneOffset()) * 60 * 1000); // const oneDay = 1000 * 60 * 60 * 24; // const day = Math.floor(diff / oneDay); // return day; // } // const getWeekOfYear = (date: Date) => { // const dayNum = date.getUTCDay() || 7; // date.setUTCDate(date.getUTCDate() + 4 - dayNum); // const yearStart = new Date(Date.UTC(date.getUTCFullYear(),0,1)); // return Math.ceil((((+date - +yearStart) / 86400000) + 1)/7) // }; // const getDateArray = (start, end) => { // const arr = new Array(); // const dt = new Date(start); // while (dt <= end) { // arr.push(new Date(dt)); // dt.setDate(dt.getDate() + 1); // } // return arr; // } // export const calendarStates = ( field: CalendarModel, calendar: Month[] ): MachineConfig => ({ // id: field.id, // context: { // field, // calendar, // graph: null, // activeDate: null, // startDate: null, // endDate: null // }, // type: 'parallel', // states: { // orienation: { // entry: assign({ // graph: (context: CalendarContext, event: any) => { // const config = new TreeMachineConfig({ // id: 'calendar', // data: context.calendar, // shape: 'grid', // primaryLabel: 'name', // secondaryLabel: 'dayOfMonth', // sortMetric: 'dayOfMonth', // metrics: [ 'value', 'anotherValue' ], // columnFormat: [ 4, 7 ], // action: { name: 'SELECT_DATE', payload: 'value' } // }); // // TODO: I think I need to specify CalendarTree types here // return spawn( // treeMachine(config), { name: 'treeMachine', sync: true } // ) // } // }), // initial: 'time', // states: { // time: { // entry: () => console.info("in time"), // on: { // ORIENTATE: { // target: 'data', // // actions: assign({ // // graph: (context: CalendarContext, event: any) => { // // const config = new TreeMachineConfig({ // // id: 'calendar', // // data: context.calendar, // // shape: 'treemap', // // primaryLabel: 'name', // // secondaryLabel: 'dayOfMonth', // // sortMetric: 'dayOfMonth', // // metrics: [ 'value', 'anotherValue' ], // // columnFormat: [ 4, 7 ], // // action: { name: 'SELECT_DATE', payload: 'value' } // // }); // // // TODO: I think I need to specify CalendarTree types here // // return spawn( // // treeMachine(config), { name: 'treeMachine', sync: true } // // ) // // return spawn( // // treeMachine( // // 'calendar', // // context.calendar, // // context.activeDate, // // 'treemap', // // // 'pack', // // 'name', // // 'description', // // null, // // (a, b) => a.data.dayOfMonth - b.data.dayOfMonth, // // 0, // // Infinity, // // [ 4, 7 ], // // [], // // { name: 'SELECT_DATE', payload: 'value' } // // ), // // { name: 'treeMachine', sync: true } // // ) // // } // // }) // } // } // }, // data: { // on: { // ORIENTATE: 'time' // } // } // } // }, // information: { // initial: 'simple', // states: { // simple: { // entry: () => console.info("in simple") // }, // detailed: { // entry: () => console.info("in detailed") // }, // heat: { // entry: () => console.info("in heat") // }, // tree: { // entry: () => console.info("in tree") // } // }, // on: { // VIEW_SIMPLE: 'information.simple', // VIEW_DETAILED: 'information.detailed', // VIEW_TREE: 'information.tree', // VIEW_HEAT: 'information.heat', // } // }, // engagement: { // initial: 'selectingStart', // states: { // selectingStart: { // on: { // SELECT_DATE: { // actions: [ // assign({ // field: (context: CalendarContext, event: Calendar_Event_SelectDate) => { // return { ...context.field, value: event.value }; // } // }), // 'notifyParent' // ] // } // } // }, // selectingEnd: { // } // }, // on: { // SELECT_DATE: 'engagement.selectingStart' // } // } // }, // }); // export const calendarMachine = ( field: CalendarModel, action: { name: string, payload: string } = { name: 'CHANGE', payload: 'value'} ) => { // const year = new Date().getFullYear(); // const startDate = new Date(`${year}-01-01`); // const endDate = new Date(`${year}-12-31`); // const data = initialiseCalendar('en', year, startDate, endDate, []); // return createMachine( // calendarStates(field, data), // { // actions: { // // ...actions, // notifyParent: sendParent((context: CalendarContext, _: CalendarEvent) => { // return { type: action.name, [action.payload]: context.field }; // }) // } // } // ) // }