☰

Mint.com tags display

Show tags in the transactions listing on Mint.com.

נכון ליום 15-09-2016. ראה הגרסה האחרונה.

// ==UserScript==
// @name        Mint.com tags display
// @include     https://*.mint.com/*
// @include     https://mint.intuit.com/*
// @description Show tags in the transactions listing on Mint.com.
// @namespace   com.warkmilson.mint.js
// @author      Mark Wilson
// @version     1.2.0
// @homepage    https://github.com/mddub/mint-tags-display
// @grant       none
// @noframes
// ==/UserScript==
//

(function() {
  var TAG_STYLE = 'font-size: 10px; display: inline-block;';
  var SINGLE_TAG_STYLE = 'margin-left: 4px; padding: 0 2px;';
  var TAG_COLORS = [
    // source: http://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
    // background, foreground
    ['#a6cee3', 'black'],
    ['#b2df8a', 'black'],
    ['#fb9a99', 'black'],
    ['#fdbf6f', 'black'],
    ['#cab2d6', 'black'],
    ['#ffff99', 'black'],
    ['#1f78b4', 'white'],
    ['#33a02c', 'white'],
    ['#e31a1c', 'white'],
    ['#ff7f00', 'white'],
    ['#6a3d9a', 'white'],
    ['#b15928', 'white']
  ];

  var tagsByFrequency;

  var transIdToTags = {};
  var tagIdToName = {};

  function maybeIngestTransactionsList(response) {
    var json = window.JSON.parse(response);
    json['set'].forEach(function(item) {
      if(item['id'] === 'transactions') {
        item['data'].forEach(function(trans) {
          transIdToTags[trans['id']] = trans['labels'].map(function(label) { return label['name']; });
          trans['labels'].forEach(function(label) {
            tagIdToName[label['id']] = label['name'];
          });
        });
      }
    });
  }

  function maybeIngestTagsList(response) {
    var json = window.JSON.parse(response);
    if(json['bundleResponseSent']) {
      jQuery.each(json['response'], function(key, val) {
        if(val['responseType'] === 'MintTransactionService_getTagsByFrequency') {
          val['response'].forEach(function(tagData) {
            tagIdToName[tagData['id']] = tagData['name'];
          });

          tagsByFrequency = val['response'].sort(function(a, b) {
            return b['transactionCount'] - a['transactionCount'];
          }).map(function(tagData) {
            return tagData['name'];
          });
        }
      });
    }
  }

  function interceptTransactionEdit(data) {
    var transIds = [];
    var tagNames = [];
    data.split('&').forEach(function(pair) {
      var kv = pair.split('='), key = window.decodeURIComponent(kv[0]), val = window.decodeURIComponent(kv[1]);

      var tagId = key.match(/tag(\d+)/);
      if(tagId !== null && val === '2') {
        tagNames.push(tagIdToName[tagId[1]]);
      }

      // value is '1234:0' for a single transaction, '1234:0,2345:0' for multiple
      if(key === 'txnId') {
        transIds = val.split(',').map(function(tId) { return tId.split(':')[0]; });
      }
    });

    transIds.forEach(function(tId) {
      transIdToTags[tId] = tagNames;
      if(jQuery('#transaction-' + tId).length > 0) {
        updateRow('transaction-' + tId);
      }
    });
  }

  // update a transaction row using cached tag data
  function updateRow(rowId) {
    var $td = jQuery('#' + rowId).find('td.cat');
    var transId = rowId.split('-')[1];
    if(transIdToTags[transId] && transIdToTags[transId].length) {
      if($td.find('.gm-tags').length === 0) {
        $td.append('<span class="gm-tags" style="' + TAG_STYLE + '"></span>');
      }

      // Alphabetize
      transIdToTags[transId].sort(function(a, b) {
        if(a.toLowerCase() < b.toLowerCase()) { return -1; }
        else if(a.toLowerCase() > b.toLowerCase()) { return 1; }
        else { return 0; }
      });

      // HTML for each tag, unique color for each tag
      var tagsHTML = transIdToTags[transId].map(function(tag) {
        return '<span class="gm-tag" style="' + tagStyleLookup(tag) + '; ' + SINGLE_TAG_STYLE + '">' + tag + '</span>';
      }).join('');

      $td.find('.gm-tags').html(tagsHTML);

    } else {
      $td.find('.gm-tags').remove();
    }
  }

  (function(open) {
    XMLHttpRequest.prototype.open = function() {
      // Firefox and Chrome support this.responseURL, but Safari does not, so we need to store it
      var requestURL_ = arguments[1];

      // instrument all XHR responses to intercept the ones which may contain transaction listing or tag listing
      this.addEventListener("readystatechange", function() {
        if(this.readyState === 4 && requestURL_.match('getJsonData.xevent')) {
          maybeIngestTransactionsList(this.responseText);
        } else if(this.readyState === 4 && requestURL_.match('bundledServiceController.xevent')) {
          maybeIngestTagsList(this.responseText);
        }
      }, false);

      // instrument all XHR requests to intercept edits to transactions
      if(arguments[0].match(/post/i) && arguments[1].match('updateTransaction.xevent')) {
        var self = this, send = this.send;
        this.send = function() {
          interceptTransactionEdit(arguments[0]);
          send.apply(self, arguments);
        };
      }

      open.apply(this, arguments);
    };
  })(XMLHttpRequest.prototype.open);

  function observeDOM(target) {
    var observer;

    function handleMutations(mutations) {
      var rowIdsToUpdate = {};
      mutations.forEach(function(mutation) {
        var $target = jQuery(mutation.target);
        var $tr = jQuery(mutation.target).parents('tr').first();
        if(!$target.hasClass('gm-tags') && $tr.length && $tr.attr('id') && $tr.attr('id').indexOf('transaction-') === 0) {
          // when the transactions list changes, there will be multiple mutations per row (date column, amount column, etc.)
          rowIdsToUpdate[$tr.attr('id')] = true;
        }
      });

      observer.disconnect();
      for(var rowId in rowIdsToUpdate) {
        updateRow(rowId);
      }
      observe();
    }

    function observe() {
      observer = new MutationObserver(handleMutations);
      observer.observe(
        target,
        {subtree: true, childList: true, characterData: true}
      );
    }

    observe();
  }

  (function waitForTable() {
    var target = document.querySelector('#transaction-list-body');
    if(target === null) {
      setTimeout(waitForTable, 500);
      return;
    }

    // populate the table with tags after it first loads
    jQuery(target).find('tr').each(function(_, row) {
      updateRow(row.id);
    });

    observeDOM(target);
  })();

  function tagStyleLookup(tag) {
    var index = tagsByFrequency.indexOf(tag);
    var colors = TAG_COLORS[index % TAG_COLORS.length];
    return 'background-color: ' + colors[0] + '; color: ' + colors[1] + ';';
  }

})();