cms/app-client/app/components/visu-chrono.js
author ymh <ymh.work@gmail.com>
Mon, 14 Nov 2016 15:34:33 +0100
changeset 416 6e6b7363f45f
parent 393 5ef3bfef0bff
child 424 feb0d3e0fef9
permissions -rw-r--r--
Simplify notice component and add permalink
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
48
9ef0952033e0 add example of visualisation for "chonologie"
nowmad@nowmads-macbook-pro.local
parents:
diff changeset
     1
import Ember from 'ember';
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
     2
import _ from 'lodash/lodash';
48
9ef0952033e0 add example of visualisation for "chonologie"
nowmad@nowmads-macbook-pro.local
parents:
diff changeset
     3
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
     4
export default Ember.Component.extend({
120
e5e15547ffb1 correct deprecation warning
ymh <ymh.work@gmail.com>
parents: 98
diff changeset
     5
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
     6
    range: [],
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
     7
    rawdatestats: null,
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
     8
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
     9
    decades: Ember.computed('range', function() {
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    10
        var range = this.get('range');
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    11
        return _.range(Math.floor(range[0]/10)*10, (Math.floor(range[1]/10)+1)*10, 10);
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    12
    }),
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    13
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    14
    datestats: Ember.computed('rawdatestats.[]', function() {
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    15
        var res = {};
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    16
        this.get('rawdatestats').forEach(function(s) {
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    17
            res[s.get('id')] = s.get('count');
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    18
        });
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    19
        return Ember.Object.create(res);
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    20
    }),
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    21
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    22
    counts: Ember.computed.mapBy('rawdatestats', 'count'),
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    23
    maxCount: Ember.computed.max('counts'),
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    24
    minCount: Ember.computed.min('counts'),
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    25
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    26
    filter: Ember.inject.service(),
189
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    27
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    28
    date: Ember.computed.alias('filter.dateList'),
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    29
195
9d083636bd99 Layout and style of the /chronologie endpoint
Chloe Laisne <chloe.laisne@gmail.com>
parents: 189
diff changeset
    30
    elementId: "chrono-table",
9d083636bd99 Layout and style of the /chronologie endpoint
Chloe Laisne <chloe.laisne@gmail.com>
parents: 189
diff changeset
    31
189
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    32
    didInsertElement: function(){
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    33
189
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    34
        var self = this;
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    35
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    36
        var isMouseDown = false,
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    37
            isHighlighted,
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    38
            didHighlight,
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    39
            previousElement;
77
0889740f79c2 on page load, hilight the objects corresponding to the query params
nowmad@23.1.168.192.in-addr.arpa
parents: 72
diff changeset
    40
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    41
        Ember.$("#chrono-table li").mousedown(function (event) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    42
            // Prevent right click selection.
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    43
            if(event.button === 0) {
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    44
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    45
                isMouseDown = true;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    46
                var element = parseInt(Ember.$(this).attr('id'));
393
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    47
                if(!_.inRange(element, self.get('range')[0], self.get('range')[1]+1)) {
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    48
                    return false;
5ef3bfef0bff add colors to visu chrono
ymh <ymh.work@gmail.com>
parents: 392
diff changeset
    49
                }
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    50
                var elements = [element];
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    51
                if(event.shiftKey) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    52
                    while(previousElement !== element) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    53
                        elements.push(previousElement);
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    54
                        if(previousElement < element) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    55
                            previousElement = previousElement + 1;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    56
                        } else if(previousElement > element) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    57
                            previousElement = previousElement - 1;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    58
                        } else {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    59
                            break;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    60
                        }
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    61
                    }
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    62
                }
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    63
                var dates = self.get('date');
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    64
                var index = dates.indexOf(element);
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    65
                if((!event.shiftKey && index === -1) || (event.shiftKey && didHighlight)) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    66
                    dates = dates.concat(elements);
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    67
                    isHighlighted = true;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    68
                } else {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    69
                    elements.forEach(function(el) {
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    70
                        var id = dates.indexOf(el);
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    71
                        if((!event.shiftKey && index !== -1) || (event.shiftKey && id !== -1)) {
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    72
                            dates.splice(id, 1);
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    73
                        }
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    74
                    });
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    75
                    isHighlighted = false;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    76
                }
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    77
                self.set('date', dates);
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    78
                didHighlight = isHighlighted;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    79
                previousElement = element;
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    80
                // Prevent text selection.
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    81
                return false;
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    82
            }
189
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    83
        }).mouseover(function () {
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    84
            if (isMouseDown) {
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    85
                var element = parseInt(Ember.$(this).attr('id'));
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    86
                if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    87
                    var dates = self.get('date');
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    88
                    var index = dates.indexOf(element);
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    89
                    if(index === -1) {
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    90
                        dates.push(element);
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    91
                    } else {
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    92
                        dates.splice(index, 1);
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    93
                    }
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
    94
                    self.set('date', dates);
197
7b266ccf6d3d Setup filter service
Chloe Laisne <chloe.laisne@gmail.com>
parents: 195
diff changeset
    95
                }
233
0ff47a9c5da2 Keyboard events on chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 202
diff changeset
    96
                previousElement = element;
189
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    97
            }
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    98
        }).bind("selectstart", function () {
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
    99
            return false;
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   100
        });
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   101
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   102
        Ember.$(document).mouseup(function () {
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   103
            isMouseDown = false;
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   104
        });
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   105
    },
21b30ee23191 /langue endpoint: 1. Date interval 2. Delete date
Chloe Laisne <chloe.laisne@gmail.com>
parents: 120
diff changeset
   106
234
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   107
    actions : {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   108
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   109
        selectDecade: function(decade) {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   110
            var array = [];
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   111
            var next = decade + 10;
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
   112
            var dates = this.get('date');
234
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   113
            while(decade < next) {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   114
                array.push(decade);
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   115
                decade ++;
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   116
            }
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   117
            if(array.find(function(date){ return dates.indexOf(date) === -1; })) {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   118
                array = array.filter(function(value) {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   119
                    return dates.indexOf(value) === -1;
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   120
                });
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   121
                array = dates.concat(array);
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   122
            } else {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   123
                array = dates.filter(function(value) {
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   124
                    return array.indexOf(value) === -1;
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   125
                });
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   126
            }
392
4fbe94af93e8 Improve filter service. Centralize filter management in a single point
ymh <ymh.work@gmail.com>
parents: 234
diff changeset
   127
            this.set('date', array);
234
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   128
        }
c928f6190771 Select row in chronology
Chloe Laisne <chloe.laisne@gmail.com>
parents: 233
diff changeset
   129
77
0889740f79c2 on page load, hilight the objects corresponding to the query params
nowmad@23.1.168.192.in-addr.arpa
parents: 72
diff changeset
   130
    }
0889740f79c2 on page load, hilight the objects corresponding to the query params
nowmad@23.1.168.192.in-addr.arpa
parents: 72
diff changeset
   131
48
9ef0952033e0 add example of visualisation for "chonologie"
nowmad@nowmads-macbook-pro.local
parents:
diff changeset
   132
});