{"version":3,"file":"diversification-grid-5CkD18Qs.js","sources":["../../../node_modules/d3-array/src/descending.js","../../../app/javascript/components/viz/diversification/diversification-grid.vue"],"sourcesContent":["export default function(a, b) {\n  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","<template>\n  <div :class=\"['diverse-grid', draggingClass]\"></div>\n</template>\n\n\n<script>\nimport * as d3 from '~/app/custom-d3'\nimport numeral from 'numeral'\n\n// Take a years data and:\n//   Add the custom asset allocation in\n//   Sort it by returns\n//   Add the year to each func object\n//   Convert to an array of funds\nfunction sortedData(yearData) {\n  var data = d3.entries(yearData.results)\n  data.forEach(function(fundData) {\n    fundData.year = yearData.year\n  });\n\n  return data.sort(function(x, y){\n    return d3.descending(x.value, y.value);\n  });\n}\n\nexport default {\n  props: ['funds', 'data', 'activeFund', 'dragging', 'yearRange'],\n  mounted() {\n    this.drawGraph();\n  },\n  watch: {\n    activeFund: function(newActiveFund) {\n      if(newActiveFund) {\n        d3.select(this.$el).classed('focused', true)\n        this.years.selectAll(`.card-${newActiveFund}`)\n                  .classed('active', true)\n      } else {\n        d3.select(this.$el).classed('focused', false)\n        this.years.selectAll('.active')\n                  .classed('active', false)\n      }\n    },\n    funds: {\n      handler: function (someData) {\n        this.updateDiversificationGraph();\n      },\n      deep: true\n    },\n    data: {\n      handler: function (someData) {\n        this.updateDiversificationGraph();\n      },\n      deep: true\n    },\n    yearRange: function(yearRange) {\n      this.years.attr('class', (d) => {\n        if((d.year >= this.yearRange[0]) && (this.yearRange[1] > d.year)) {\n          return 'year year-active';\n        } else {\n          return 'year year-inactive';\n        }\n      })\n    }\n  },\n  computed: {\n    draggingClass: function() {\n      return this.dragging ? 'is-dragging' : 'is-not-dragging'\n    }\n  },\n  methods: {\n    highlight(key) {\n      this.$emit('activateFund', key)\n    },\n    fundCard(d) {\n      return `<span class='font-bold text-base block fund--sector'>${this.funds[d.key].label}</span><span class='block font-semibold text-sm'>${numeral(d.value/100).format('0.00%')}</span>`\n    },\n    fundCardClass(d) {\n      return `fund p-1 text-center card-${d.key} bg-${this.funds[d.key].style.darkClass} text-${this.funds[d.key].style.lightClass}`\n    },\n    drawGraph() {\n      var grid = d3.select(this.$el)\n\n      // append the header row\n      this.years = grid.selectAll('div')\n        .data(this.data)\n        .enter()\n          .append('div')\n            .attr('class', 'year')\n            .style('grid-row', '1 / 9')\n            .style('grid-column', function(d, index) {\n              return index+1;\n            })\n            .html(function(column, i) {\n              return \"<header class='bg-gray-200 text-gray-700 text-lg text-center p-1 font-semibold' style='grid-row:1;grid-column:1'>\"+column.year+\"</header>\";\n            })\n\n      // Create a cell in each row for each column\n      this.yearsSelection = this.years.selectAll('div')\n         .data((d) => sortedData(d), (d) => `${d.key}-${d.year}`)\n         .enter()\n         .append('div')\n           .attr('class', (d) => this.fundCardClass(d))\n           .style('grid-column', 1)\n           .style('grid-row', (d, index) => index+2)\n           .property('sector', (d) => d.key)\n           .on('mouseenter', (d) => {\n             d3.select(d3.event.target).classed('selected', true)\n             this.highlight(d.key)\n           })\n           .on('mouseleave', (d) => {\n             d3.select(d3.event.target)\n             .classed('selected', false)\n             this.highlight()\n           })\n           .html((d) => this.fundCard(d))\n    },\n    updateDiversificationGraph() {\n      var years = this.yearsSelection\n                      .data((d) => sortedData(d), (d) => `${d.key}-${d.year}`)\n\n      // Add a transition for this grouping\n      years.transition()\n        .duration(1000)\n\n      years.style('grid-row', (d, index) => index+2)\n           .attr('class', (d) => this.fundCardClass(d))\n           .html((d) => this.fundCard(d))\n    }\n  }\n}\n</script>\n\n<style>\n.diverse-grid {\n\t display: grid;\n\t grid-gap: 2px;\n\t transition: 2s;\n}\n .diverse-grid .year-inactive {\n\t opacity: 0.5;\n}\n .diverse-grid.focused .fund:not(.active) {\n\t opacity: 0.5;\n}\n .diverse-grid.is-not-dragging .fund.active {\n\t opacity: 1;\n\t border-color: #fff;\n}\n .diverse-grid .year {\n\t display: grid;\n\t grid-gap: 2px;\n\t grid-template-rows: 40px repeat(8, 1fr);\n\t transition: 0.25s opacity;\n}\n .diverse-grid .year .fund {\n\t transition: opacity 0.1s;\n\t cursor: pointer;\n}\n .diverse-grid .fund {\n\t border: 4px solid transparent;\n}\n .diverse-grid .fund .fund--sector {\n\t white-space: nowrap;\n\t overflow: hidden;\n}\n .is-not-dragging .fund.selected {\n\t transition: 0.3s transform;\n\t transform: scale(1.35) !important;\n\t border-color: #fff;\n\t z-index: 10;\n}\n</style>"],"names":["descending","a","b","sortedData","yearData","data","d3.entries","fundData","x","y","d3.descending","_sfc_main","newActiveFund","d3.select","someData","yearRange","d","key","numeral","grid","index","column","i","d3.event","years","_createElementBlock","_normalizeClass","$options"],"mappings":"wHAAe,SAAAA,EAASC,EAAGC,EAAG,CAC5B,OAAOA,EAAID,EAAI,GAAKC,EAAID,EAAI,EAAIC,GAAKD,EAAI,EAAI,GAC/C,CCYA,SAASE,EAAWC,EAAU,CAC5B,IAAIC,EAAOC,EAAWF,EAAS,OAAO,EACtC,OAAAC,EAAK,QAAQ,SAASE,EAAU,CAC9BA,EAAS,KAAOH,EAAS,IAC3B,CAAC,EAEMC,EAAK,KAAK,SAASG,EAAGC,EAAE,CAC7B,OAAOC,EAAcF,EAAE,MAAOC,EAAE,KAAK,CACvC,CAAC,CACH,CAEA,MAAKE,EAAU,CACb,MAAO,CAAC,QAAS,OAAQ,aAAc,WAAY,WAAW,EAC9D,SAAU,CACR,KAAK,UAAW,CACjB,EACD,MAAO,CACL,WAAY,SAASC,EAAe,CAC/BA,GACDC,EAAU,KAAK,GAAG,EAAE,QAAQ,UAAW,EAAI,EAC3C,KAAK,MAAM,UAAU,SAASD,CAAa,EAAE,EAClC,QAAQ,SAAU,EAAI,IAEjCC,EAAU,KAAK,GAAG,EAAE,QAAQ,UAAW,EAAK,EAC5C,KAAK,MAAM,UAAU,SAAS,EACnB,QAAQ,SAAU,EAAK,EAErC,EACD,MAAO,CACL,QAAS,SAAUC,EAAU,CAC3B,KAAK,2BAA4B,CAClC,EACD,KAAM,EACP,EACD,KAAM,CACJ,QAAS,SAAUA,EAAU,CAC3B,KAAK,2BAA4B,CAClC,EACD,KAAM,EACP,EACD,UAAW,SAASC,EAAW,CAC7B,KAAK,MAAM,KAAK,QAAUC,GACpBA,EAAE,MAAQ,KAAK,UAAU,CAAC,GAAO,KAAK,UAAU,CAAC,EAAIA,EAAE,KAClD,mBAEA,oBAEV,CACH,CACD,EACD,SAAU,CACR,cAAe,UAAW,CACxB,OAAO,KAAK,SAAW,cAAgB,iBACzC,CACD,EACD,QAAS,CACP,UAAUC,EAAK,CACb,KAAK,MAAM,eAAgBA,CAAG,CAC/B,EACD,SAASD,EAAG,CACV,MAAO,wDAAwD,KAAK,MAAMA,EAAE,GAAG,EAAE,KAAK,oDAAoDE,EAAQF,EAAE,MAAM,GAAG,EAAE,OAAO,OAAO,CAAC,SAC/K,EACD,cAAcA,EAAG,CACf,MAAO,6BAA6BA,EAAE,GAAG,OAAO,KAAK,MAAMA,EAAE,GAAG,EAAE,MAAM,SAAS,SAAS,KAAK,MAAMA,EAAE,GAAG,EAAE,MAAM,UAAU,EAC7H,EACD,WAAY,CACV,IAAIG,EAAON,EAAU,KAAK,GAAG,EAG7B,KAAK,MAAQM,EAAK,UAAU,KAAK,EAC9B,KAAK,KAAK,IAAI,EACd,MAAK,EACH,OAAO,KAAK,EACV,KAAK,QAAS,MAAM,EACpB,MAAM,WAAY,OAAO,EACzB,MAAM,cAAe,SAASH,EAAGI,EAAO,CACvC,OAAOA,EAAM,CACd,CAAA,EACA,KAAK,SAASC,EAAQC,EAAG,CACxB,MAAO,oHAAoHD,EAAO,KAAK,WACxI,CAAA,EAGP,KAAK,eAAiB,KAAK,MAAM,UAAU,KAAK,EAC5C,KAAML,GAAMb,EAAWa,CAAC,EAAIA,GAAM,GAAGA,EAAE,GAAG,IAAIA,EAAE,IAAI,EAAE,EACtD,MAAK,EACL,OAAO,KAAK,EACV,KAAK,QAAUA,GAAM,KAAK,cAAcA,CAAC,CAAC,EAC1C,MAAM,cAAe,CAAC,EACtB,MAAM,WAAY,CAACA,EAAGI,IAAUA,EAAM,CAAC,EACvC,SAAS,SAAWJ,GAAMA,EAAE,GAAG,EAC/B,GAAG,aAAeA,GAAM,CACvBH,EAAUU,EAAS,MAAM,EAAE,QAAQ,WAAY,EAAI,EACnD,KAAK,UAAUP,EAAE,GAAG,CACrB,CAAA,EACA,GAAG,aAAeA,GAAM,CACvBH,EAAUU,EAAS,MAAM,EACxB,QAAQ,WAAY,EAAK,EAC1B,KAAK,UAAS,CACf,CAAA,EACA,KAAMP,GAAM,KAAK,SAASA,CAAC,CAAC,CACnC,EACD,4BAA6B,CAC3B,IAAIQ,EAAQ,KAAK,eACA,KAAMR,GAAMb,EAAWa,CAAC,EAAIA,GAAM,GAAGA,EAAE,GAAG,IAAIA,EAAE,IAAI,EAAE,EAGvEQ,EAAM,WAAU,EACb,SAAS,GAAI,EAEhBA,EAAM,MAAM,WAAY,CAACR,EAAGI,IAAUA,EAAM,CAAC,EACvC,KAAK,QAAUJ,GAAM,KAAK,cAAcA,CAAC,CAAC,EAC1C,KAAMA,GAAM,KAAK,SAASA,CAAC,CAAC,CACpC,CACF,CACF,qCAhIES,EAAoD,MAAA,CAA9C,MADRC,kBACgCC,EAAa,aAAA,CAAA","x_google_ignoreList":[0]}