Merge pull request #18 from penny-vault/bug/drawdowns

fix display of draw downs and update readme

README.md

@@ -31,6 +31,16 @@ yarn run lint
 quasar build
 ```
 
+### Update Colfer serialization
+
+Step 0: Copy the file `types.colf` from pv-api/portfolio into a working directory
+Step 1: Modify the `package` statement from "portfolio" to "colfer" in pvapi source
+Step 3: Run colfer (in the src/assets directory):
+
+```bash
+colf -l "4 * 1024 * 1024" JavaScript types.colf
+```
+
 [1]: https://designsystem.quickbooks.com/
 [2]: https://design.fusionfabric.cloud
 [3]: https://www.figma.com/file/oKLlf4OiW3tjRs7siZCH0F/Penny-Vault?node-id=2%3A4

src/assets/colfer.js

@@ -1280,6 +1280,8 @@ var colfer = new function() {
 
 		this.LossPercent = 0;
 
+		this.Active = false;
+
 		for (var p in init) this[p] = init[p];
 	}
 
@@ -1422,6 +1424,9 @@ var colfer = new function() {
 			i += 9;
 		}
 
+		if (this.Active)
+			buf[i++] = 4;
+
 
 		buf[i++] = 127;
 		if (i >= colferSizeMax)
@@ -1542,6 +1547,11 @@ var colfer = new function() {
 			readHeader();
 		}
 
+		if (header == 4) {
+			this.Active = true;
+			readHeader();
+		}
+
 		if (header != 127) throw new Error('colfer: unknown header at byte ' + (i - 1));
 		if (i > colferSizeMax)
 			throw new Error('colfer: colfer.DrawDown serial size ' + size + ' exceeds ' + colferSizeMax + ' bytes');

src/components/ValueChart.vue

@@ -211,13 +211,14 @@ export default defineComponent({
       if (props.showDrawDowns) {
         drawDowns.value.forEach(elem => {
           // NOTE: Adding 2.5 days to make things line up. Note sure why this is necessary
-          let begin = parse(format(fromUnixTime(elem.begin + (86400*2.5)), 'yyyy-MM-dd'), 'yyyy-MM-dd', new Date())
-          let end = parse(format(fromUnixTime(elem.end + (86400*2.5)), 'yyyy-MM-dd'), 'yyyy-MM-dd', new Date())
+          // let begin = parse(format(fromUnixTime(elem.Begin + (86400*2.5)), 'yyyy-MM-dd'), 'yyyy-MM-dd', new Date())
+          // let end = parse(format(fromUnixTime(elem.End + (86400*2.5)), 'yyyy-MM-dd'), 'yyyy-MM-dd', new Date())
 
+          // for the drawDown period (peak to trough)
           let range = dateAxis.createSeriesRange(strategyValueSeries)
 
-          range.date = begin
-          range.endDate = end
+          range.date = elem.Begin
+          range.endDate = elem.End
           range.contents.stroke = am4core.color("#A60017")
           range.contents.fill = am4core.color("#D5001D")
           range.contents.fillOpacity = 0.5

src/pages/PortfolioReturns.vue

@@ -72,7 +72,10 @@ export default defineComponent({
           let end = params.data.End
           let recover = params.data.Recovery
           let rangeStr = `${format(begin, 'MMM yyyy')} to ${format(end, 'MMM yyyy')}`
-          let daysToRecover = `<br/><span class="cell-sub-text">${differenceInCalendarDays(recover, begin)} days to recover</span>`
+          var daysToRecover = `<br/><span class="cell-sub-text">${differenceInCalendarDays(recover, begin)} days to recover</span>`
+          if (params.data.Active) {
+            daysToRecover = `<br/><span class="cell-sub-text">not yet recovered</span>`
+          }
           return rangeStr + daysToRecover
         }
       },
@@ -95,6 +98,9 @@ export default defineComponent({
         resizable: true,
         editable: false,
         valueFormatter: (params) => {
+          if (params.data.Active) {
+            return ''
+          }
           return format(params.value, 'MMM yyyy')
         }
       },

src/pages/PortfolioSummary.vue

@@ -40,7 +40,7 @@
 
                 <q-item tag="label" v-ripple>
                     <q-item-section>
-                    <q-item-label>Show top 10 draw downs</q-item-label>
+                    <q-item-label>Show top 10 draw downs (peak to trough)</q-item-label>
                     </q-item-section>
                     <q-item-section side >
                     <q-toggle color="blue" v-model="showDrawDowns" />