Несколько вертикальных временных линий

Question

У меня есть динамическое количество объектов, для которых требуется вертикальная шкала времени.

Таким образом, на горизонтальной оси будут представлены компании, а по вертикальной оси каждая компания имеет свою собственную временную шкалу.

Однако элементы не могут быть упорядочены только на временной шкале, поскольку каждая временная шкала должна учитывать другие временные рамки.

Пример того, как это должно выглядеть:

Пример того, как это не должно выглядеть: В приведенном выше примере, каждый график не учитывает другие временные рамки

Любой идеи о том, как я мог бы достичь этого горизонтального выравнивания с помощью javascript? Я думаю, что необходимо создать единую временную шкалу, масштабированную для объекта с наибольшей плотностью событий и затем клонированную для каждой компании/организации. Впоследствии все события могут быть добавлены. Я не уверен, как разместить события на правильных координатах.

EDIT: Просто, чтобы быть ясным, Я не ищу код. Просто просто совет (или псевдо-код) о том, как сохранить даты, выровненные по горизонтали относительно каждой временной шкалы.

EDIT2: Серверная сторона не проблема, я получил это покрытие.

Answer 1

Вы можете увидеть эту проблему более абстрактно: у вас есть карта компаний и временные рамки, каждая временная шкала - это карта дат и данных событий. Вы хотите превратить эту структуру в карту дат и данных даты, причем каждая дата-данные являются картой компаний и событийными данными.

Другими словами, вы хотите, чтобы превратить это:

{ 
    company: { 
     date: event, 
     date: event, 
     date: event 
    }, 
    company: { 
     date: event, 
     date: event, 
     date: event 
    } 
} 

В это:

{ 
    date: { 
     company: event, 
     company: event 
    }, 
    date: { 
     company: event, 
     company: event 
    }, 
    date: { 
     company: event, 
     company: event 
    } 
} 

Один из способов сделать это было бы со сложным контуром:

timeline = {}; 
for(var company in allCompanies) { 
    for(var day in company) { 
     if(!timeline.hasOwnProperty(day)) timeline[day] = {}; 
     timeline[day][company.name] = company[day]; 
    } 
} 

Если ваш вход на самом деле представляет собой массив, а не объект, он будет немного отличаться, но, я думаю, вы можете это исправить.

Затем все, что вам нужно сделать, - это цикл через каждый день вашего объекта временной шкалы, чтобы создать строку, а для каждой строки цикла через каждую компанию создать ячейку. Компании, у которых нет записи, нуждаются в пустой ячейке.