examples/tt.html

<html>
<!-- <head>
  <link rel="import" href="../fin-hypergrid.min.html"> -->
  <link rel="import" href="../fin-hypergrid.dev.html">
<style>

 body {
    position: absolute;
    top: 0%;
    right: 0%;
    bottom: 0%;
    left: 0%;
    padding: 0%;
    margin: 15px 0 0 0;
    background-color: #202020;
 }

</style>
</head>
<body>
<script>

    var randomRow = function() {
         var row = {
            work: '',
            asks: (Math.random() * 100).toFixed(0),
            bids: (Math.random() * 100).toFixed(0),
            price: (Math.random() * 1000).toFixed(3),
            ltq: (Math.random() * 1000).toFixed(0)
        };
        return row;
    };

    var generateRandomData = function() {
        var rowCount = 1000;
        var data = new Array(rowCount);
        for (var i = 0; i < rowCount; i ++) {
            data[i] = randomRow();
        }
        return data;
    };

    var lnfOverrides = {
        font: '13px Tahoma, Geneva, sans-serif',
        color: '#ffffff',
        backgroundColor: '#505050',
        foregroundSelColor: 'rgb(25, 25, 25)',
        backgroundSelColor: 'rgb(183, 219, 255)',

        topLeftFont: '14px Tahoma, Geneva, sans-serif',
        topLeftColor: 'rgb(25, 25, 25)',
        topLeftBackgroundColor: 'rgb(223, 227, 232)',
        topLeftFGSelColor: 'rgb(25, 25, 25)',
        topLeftBGSelColor: 'rgb(255, 220, 97)',

        fixedColumnFont: '14px Tahoma, Geneva, sans-serif',
        fixedColumnColor: 'rgb(25, 25, 25)',
        fixedColumnBackgroundColor: 'rgb(223, 227, 232)',
        fixedColumnFGSelColor: 'rgb(25, 25, 25)',
        fixedColumnBGSelColor: 'rgb(255, 220, 97)',

        fixedRowFont: '11px Tahoma, Geneva, sans-serif',
        fixedRowColor: '#ffffff',
        fixedRowBackgroundColor: '#303030',
        fixedRowFGSelColor: 'rgb(25, 25, 25)',
        fixedRowBGSelColor: 'rgb(255, 220, 97)',

        backgroundColor2: '#303030',
        lineColor: '#707070',
        voffset: 0,
        scrollingEnabled: false,

        defaultRowHeight: 20,
        defaultFixedRowHeight: 20,
        defaultColumnWidth: 100,
        defaultFixedColumnWidth: 100
    }

    var initialize = function() {

        var h = document.createElement('fin-hypergrid');
        h.setAttribute('id', 'tt');
        h.style.height = '100%';
        h.style.width = '100%';
        document.body.appendChild(h);

        var data = generateRandomData();
        var table = document.querySelector('#tt');

        var behavior = document.createElement('fin-hypergrid-behavior-json');
        behavior.installOn(table);
        behavior.setData(data);
        behavior.getFixedColumnCount = function() {
            return 0;
        }
        table.addGlobalProperties(lnfOverrides);

        var props;
        props = behavior.getColumnProperties(1);
        props.bgColor = '#2565a2';
        props.fgColor = 'white';

        props = behavior.getColumnProperties(2);
        props.bgColor = '#c1c1c1';
        props.fgColor = 'black';

        props = behavior.getColumnProperties(3);
        props.bgColor = '#941e20';
        props.fgColor = 'white';


        behavior.getColumnAlignment = function(columnIndex) {
            if (columnIndex === 3) {
                return 'right';
            }
            return 'center';
        };

        setTimeout(function(){
            h.stopPaintThread();
            h.stopResizeThread();
        }, 1000);

        setInterval(function(){
            for (var i = 0; i < data.length; i++) {
                data[i].price = (Math.random() * 1000).toFixed(3);
            }
            behavior.changed(); // comment this out to see the data repaint ONLY when you move the cursor over the grid
        }, 20);
    };


    window.addEventListener('polymer-ready', function() {
        initialize();
    });
</script>
</body>
</html>