कैलेंडर घटनाओं का विजुअलाइजेशन। अधिकतम चौड़ाई

Question

के साथ लेआउट ईवेंट में एल्गोरिदम मुझे एल्गोरिदम के साथ आपकी मदद की ज़रूरत है (यह जावास्क्रिप्ट के साथ क्लाइंट साइड पर विकसित किया जाएगा, लेकिन वास्तव में कोई फर्क नहीं पड़ता, मैं ज्यादातर एल्गोरिदम में दिलचस्पी लेता हूं) कैलेंडर घटनाओं को बिछाता है ताकि प्रत्येक घटना बॉक्स में अधिकतम चौड़ाई होती है। कृपया निम्न चित्र देखें:

Y अक्ष समय है। तो यदि "टेस्ट इवेंट" दोपहर (उदाहरण के लिए) से शुरू होता है और इसके साथ कुछ और अंतर नहीं होता है, तो यह पूरी 100% चौड़ाई लेता है। "साप्ताहिक समीक्षा" "टम्बलिंग वाईएमसीए" और "अन्ना/अमेलिया" के साथ छेड़छाड़ करती है, लेकिन बाद वाले दो अंतर नहीं कर रहे हैं, इसलिए वे सभी 50% भरते हैं। टेस्ट 3, टेस्ट 4 और टेस्ट 5 सभी अंतरंग हैं, इसलिए अधिकतम चौड़ाई प्रत्येक के लिए 33.3% है। लेकिन टेस्ट 7 66% है क्योंकि टेस्ट 3 33% तय है (ऊपर देखें), इसलिए यह सभी उपलब्ध स्थान लेता है, जो कि 66% है।

मुझे इसे एल्गोरिदम की आवश्यकता है कि इसे कैसे रखा जाए।

अग्रिम धन्यवाद सिर्फ एक बाएँ किनारे के साथ एक असीमित ग्रिड के

Answer 1

1. Think।
2. प्रत्येक घटना एक सेल चौड़ी है, और ऊंचाई और लंबवत स्थिति प्रारंभ और समाप्ति समय के आधार पर तय की जाती है।
3. प्रत्येक घटना को कॉलम में किसी भी पूर्व घटना को छेड़छाड़ किए बिना, जितना संभव हो सके कॉलम में रखने की कोशिश करें।
4. फिर, जब घटनाओं के प्रत्येक जुड़े समूह को रखा जाता है, तो उनकी वास्तविक चौड़ाई समूह द्वारा उपयोग किए जाने वाले कॉलम की अधिकतम संख्या 1/n होगी।
5. आप किसी भी शेष स्थान का उपयोग करने के लिए दूर बाईं ओर स्थित घटनाओं का विस्तार भी कर सकते हैं।

/// Pick the left and right positions of each event, such that there are no overlap. 
/// Step 3 in the algorithm. 
void LayoutEvents(IEnumerable<Event> events) 
{ 
    var columns = new List<List<Event>>(); 
    DateTime? lastEventEnding = null; 
    foreach (var ev in events.OrderBy(ev => ev.Start).ThenBy(ev => ev.End)) 
    { 
     if (ev.Start >= lastEventEnding) 
     { 
      PackEvents(columns); 
      columns.Clear(); 
      lastEventEnding = null; 
     } 
     bool placed = false; 
     foreach (var col in columns) 
     { 
      if (!col.Last().CollidesWith(ev)) 
      { 
       col.Add(ev); 
       placed = true; 
       break; 
      } 
     } 
     if (!placed) 
     { 
      columns.Add(new List<Event> { ev }); 
     } 
     if (lastEventEnding == null || ev.End > lastEventEnding.Value) 
     { 
      lastEventEnding = ev.End; 
     } 
    } 
    if (columns.Count > 0) 
    { 
     PackEvents(columns); 
    } 
} 

/// Set the left and right positions for each event in the connected group. 
/// Step 4 in the algorithm. 
void PackEvents(List<List<Event>> columns) 
{ 
    float numColumns = columns.Count; 
    int iColumn = 0; 
    foreach (var col in columns) 
    { 
     foreach (var ev in col) 
     { 
      int colSpan = ExpandEvent(ev, iColumn, columns); 
      ev.Left = iColumn/numColumns; 
      ev.Right = (iColumn + colSpan)/numColumns; 
     } 
     iColumn++; 
    } 
} 

/// Checks how many columns the event can expand into, without colliding with 
/// other events. 
/// Step 5 in the algorithm. 
int ExpandEvent(Event ev, int iColumn, List<List<Event>> columns) 
{ 
    int colSpan = 1; 
    foreach (var col in columns.Skip(iColumn + 1)) 
    { 
     foreach (var ev1 in col) 
     { 
      if (ev1.CollidesWith(ev)) 
      { 
       return colSpan; 
      } 
     } 
     colSpan++; 
    } 
    return colSpan; 
} 

संपादित करें: अब बजाय यह सोचते हैं वे क्रमबद्ध है, घटनाओं क्रमबद्ध करता है।

संपादित 2: पर्याप्त जगह होने पर, घटनाओं को दाईं ओर विस्तारित करता है।

Answer 2

स्वीकृत उत्तर 5 चरणों के साथ एक एल्गोरिदम का वर्णन करता है। स्वीकृत उत्तर की टिप्पणियों में जुड़ा उदाहरण उदाहरण केवल 1 से 4 कदम लागू करता है। चरण 5 यह सुनिश्चित करने के बारे में है कि सही घटना उपलब्ध सभी जगहों का उपयोग करती है। ओपी द्वारा प्रदान की गई छवि में ईवेंट 7 देखें।

मैं वर्णित एल्गोरिथ्म के चरण 5 जोड़कर दिया कार्यान्वयन का विस्तार:

$(document).ready(function() { 
    var column_index = 0; 
    $('#timesheet-events .daysheet-container').each(function() { 

    var block_width = $(this).width(); 
    var columns = []; 
    var lastEventEnding = null; 

    // Create an array of all events 
    var events = $('.bubble_selector', this).map(function(index, o) { 
     o = $(o); 
     var top = o.offset().top; 
     return { 
     'obj': o, 
     'top': top, 
     'bottom': top + o.height() 
     }; 
    }).get(); 

    // Sort it by starting time, and then by ending time. 
    events = events.sort(function(e1,e2) { 
     if (e1.top < e2.top) return -1; 
     if (e1.top > e2.top) return 1; 
     if (e1.bottom < e2.bottom) return -1; 
     if (e1.bottom > e2.bottom) return 1; 
     return 0; 
    }); 

    // Iterate over the sorted array 
    $(events).each(function(index, e) { 

     // Check if a new event group needs to be started 
     if (lastEventEnding !== null && e.top >= lastEventEnding) { 
     // The latest event is later than any of the event in the 
     // current group. There is no overlap. Output the current 
     // event group and start a new event group. 
     PackEvents(columns, block_width); 
     columns = []; // This starts new event group. 
     lastEventEnding = null; 
     } 

     // Try to place the event inside the existing columns 
     var placed = false; 
     for (var i = 0; i < columns.length; i++) {     
     var col = columns[ i ]; 
     if (!collidesWith(col[col.length-1], e)) { 
      col.push(e); 
      placed = true; 
      break; 
     } 
     } 

     // It was not possible to place the event. Add a new column 
     // for the current event group. 
     if (!placed) { 
     columns.push([e]); 
     } 

     // Remember the latest event end time of the current group. 
     // This is later used to determine if a new groups starts. 
     if (lastEventEnding === null || e.bottom > lastEventEnding) { 
     lastEventEnding = e.bottom; 
     } 
    }); 

    if (columns.length > 0) { 
     PackEvents(columns, block_width); 
    } 
    }); 
}); 


// Function does the layout for a group of events. 
function PackEvents(columns, block_width) 
{ 
    var n = columns.length; 
    for (var i = 0; i < n; i++) { 
    var col = columns[ i ]; 
    for (var j = 0; j < col.length; j++) 
    { 
     var bubble = col[j]; 
     var colSpan = ExpandEvent(bubble, i, columns); 
     bubble.obj.css('left', (i/n)*100 + '%'); 
     bubble.obj.css('width', block_width * colSpan/n - 1); 
    } 
    } 
} 

// Check if two events collide. 
function collidesWith(a, b) 
{ 
    return a.bottom > b.top && a.top < b.bottom; 
} 

// Expand events at the far right to use up any remaining space. 
// Checks how many columns the event can expand into, without 
// colliding with other events. Step 5 in the algorithm. 
function ExpandEvent(ev, iColumn, columns) 
{ 
    var colSpan = 1; 

    // To see the output without event expansion, uncomment 
    // the line below. Watch column 3 in the output. 
    //return colSpan; 

    for (var i = iColumn + 1; i < columns.length; i++) 
    { 
     var col = columns[i]; 
     for (var j = 0; j < col.length; j++) 
     { 
     var ev1 = col[j]; 
     if (collidesWith(ev, ev1)) 
     { 
      return colSpan; 
     } 
     } 
     colSpan++; 
    } 
    return colSpan; 
} 

एक काम कर डेमो सबसे दायीं ओर की घटनाओं के विस्तार के उदाहरण के लिए उत्पादन का http://jsbin.com/detefuveta/edit?html,js,output कॉलम 3 देखें पर उपलब्ध है।

पीएस: यह वास्तव में स्वीकृत उत्तर पर टिप्पणी होना चाहिए। दुर्भाग्य से मेरे पास टिप्पणी करने के लिए विशेषाधिकार नहीं हैं।