FreePhoenix888
commented
9 months ago Draft:
async ({ deep, require }) => {
const React = require('react');
const { YMaps, Map, Placemark } = require('@pbe/react-yandex-maps');
const {default: Timeline} = require('react-calendar-timeline')
const moment = require('moment')
console.log({Timeline})
const { Text, VStack, Box } = require('@chakra-ui/react');
return ({ fillSize, style, link }) => {
const defaultState = {
center: [55.751574, 37.573856],
zoom: 5,
};
const groups = [{ id: 1, title: 'group 1' }, { id: 2, title: 'group 2' }]
const items = [
{
id: 1,
group: 1,
title: 'item 1',
start_time: moment(),
end_time: moment().add(1, 'hour')
},
{
id: 2,
group: 2,
title: 'item 2',
start_time: moment().add(-0.5, 'hour'),
end_time: moment().add(0.5, 'hour')
},
{
id: 3,
group: 1,
title: 'item 3',
start_time: moment().add(2, 'hour'),
end_time: moment().add(3, 'hour')
}
]
return <Box
style={{ ...style,width: 800, height: 600 }}
bg={'bgColor'}
color={'text'}
borderColor={'borderColor'}
borderWidth='thin' borderRadius='lg'
p={1}
><Timeline
groups={groups}
items={items}
defaultTimeStart={moment().add(-12, 'hour')}
defaultTimeEnd={moment().add(12, 'hour')}
/></Box>
// return (
// <VStack>
// <Timeline
// groups={groups}
// items={items}
// defaultTimeStart={moment().add(-12, 'hour')}
// defaultTimeEnd={moment().add(12, 'hour')}
// />
// <YMaps>
// <Map defaultState={defaultState}>
// <Placemark geometry={[55.684758, 37.738521]} />
// </Map>
// </YMaps>
// </VStack>
// );
// return <Text>UI for {link.id} goes herse.</Text>;
// }
}
https://www.npmjs.com/package/react-calendar-timeline https://www.npmjs.com/package/ymaps