From b1b00fa4119bdec0e698aaa741e6a2851ecc2f52 Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Fri, 20 Oct 2023 09:15:36 -0500
Subject: [PATCH 1/3] ChartThumbnail tweaks:

- remove unused imports
- add day-level periodicity
---
 src/routes/strategies/ChartThumbnail.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/strategies/ChartThumbnail.svelte b/src/routes/strategies/ChartThumbnail.svelte
index 638c8b094..9908dc1b4 100644
--- a/src/routes/strategies/ChartThumbnail.svelte
+++ b/src/routes/strategies/ChartThumbnail.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { addUTCDays, floorUTCDate } from '$lib/helpers/date';
 	import { determinePriceChangeClass } from '$lib/helpers/price';
 	import { formatPercent } from '$lib/helpers/formatters';
 	import { ChartIQ, Marker } from '$lib/chart';
@@ -36,6 +35,7 @@
 		return {
 			update() {
 				chartEngine.loadChart('strategy-thumbnail', {
+					periodicity: { period: 1, timeUnit: 'day' },
 					masterData: data.map(([date, value]) => ({
 						// passing ISO date (w/out time) to prevent buggy ChartIQ tz conversions
 						DT: date.toISOString().slice(0, 10),

From fc0ab609204236c35f19d6143536b4cffc0b58c9 Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Fri, 20 Oct 2023 17:26:34 -0500
Subject: [PATCH 2/3] WIP update PortfolioPerformanceChart to support
 Profitability chart data

---
 .../[strategy]/(nav)/performance/+page.svelte |  3 +
 .../PortfolioPerformanceChart.svelte          | 55 +++++++------------
 2 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
index e7fef832a..d8bb3ac9c 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
@@ -5,6 +5,7 @@
 	import { getPortfolioLatestStats } from 'trade-executor/state/stats';
 	import SummaryStatistics from './SummaryStatistics.svelte';
 	import WebChart from '../../WebChart.svelte';
+	import PortfolioPerformanceChart from './PortfolioPerformanceChart.svelte';
 
 	export let data;
 	$: ({ state, summary, profitabilityChart } = data);
@@ -26,6 +27,8 @@
 			yAxisTitle="Realised profit"
 			fillMode="none"
 		/>
+
+		<PortfolioPerformanceChart data={profitabilityChart.data} />
 	{/if}
 
 	<SummaryStatistics {oldLatestStats} {summaryStatistics} />
diff --git a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
index 66e01c119..689e6ec11 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
@@ -5,30 +5,29 @@ Render the portfolio performance chart using ChartIQ.
 - Y-axis: portfolio value
 -->
 <script lang="ts">
-	import { lightFormat as formatDate } from 'date-fns';
-	import { formatDollar } from '$lib/helpers/formatters';
+	import { formatPercent } from '$lib/helpers/formatters';
 	import { determinePriceChangeClass } from '$lib/helpers/price';
-	import { SegmentedControl, UpDownCell } from '$lib/components';
+	import { SegmentedControl, Timestamp, UpDownCell } from '$lib/components';
 	import { ChartIQ, Marker } from '$lib/chart';
 
-	export let name: string;
-	export let portfolio: any;
+	export let data: [number, number][];
 
 	let chartWrapper: HTMLElement;
 
-	let timeSpan = '3M';
-
 	const timeSpanOptions = {
-		'1W': { hours: 1, spanDays: 7, dateFormat: 'M/d HH:mm' },
-		'1M': { hours: 4, spanDays: 30, dateFormat: 'M/d HH:mm' },
-		'3M': { hours: 24, spanDays: 90, dateFormat: 'M/d/yyyy' }
-	};
+		'1W': { hours: 1, spanDays: 7, withTime: true },
+		'1M': { hours: 4, spanDays: 30, withTime: true },
+		'3M': { hours: 24, spanDays: 90, withTime: false }
+	} as const;
+
+	let timeSpan: keyof typeof timeSpanOptions = '3M';
 
-	$: ({ hours, spanDays, dateFormat } = timeSpanOptions[timeSpan]);
+	$: ({ hours, spanDays, withTime } = timeSpanOptions[timeSpan]);
 
 	const options = {
 		layout: { chartType: 'mountain' },
 		controls: { chartControls: null },
+
 		chart: {
 			xAxis: { displayGridLines: false },
 			yAxis: {
@@ -39,16 +38,6 @@ Render the portfolio performance chart using ChartIQ.
 		}
 	};
 
-	function getChartData(portfolio) {
-		if (!portfolio) return [];
-		return portfolio.map((tick) => {
-			return {
-				DT: tick.calculated_at * 1000,
-				Value: tick.total_equity
-			};
-		});
-	}
-
 	function init(chartEngine: any) {
 		// update chart colors based on change in value (+/-) for visible data set
 		chartEngine.append('createDataSegment', () => {
@@ -66,10 +55,13 @@ Render the portfolio performance chart using ChartIQ.
 
 		return {
 			update() {
-				chartEngine.loadChart(name, {
+				chartEngine.loadChart('strategy-profitability', {
 					periodicity: { period: hours, interval: 60, timeUnit: 'minute' },
 					span: { base: 'day', multiplier: spanDays },
-					masterData: getChartData(portfolio)
+					masterData: data.map(([ts, Value]) => ({
+						DT: ts * 1000,
+						Value
+					}))
 				});
 			}
 		};
@@ -89,8 +81,8 @@ Render the portfolio performance chart using ChartIQ.
 				<Marker x={position.DateX} y={position.CloseY} size={4.5} />
 				<div class="chart-hover-info" style:--x="{position.cx}px" style:--y="{position.CloseY}px">
 					<UpDownCell value={data.Close - data.iqPrevClose}>
-						<div class="date">{formatDate(data.displayDate, dateFormat)}</div>
-						<div class="value">{formatDollar(data.Close)}</div>
+						<Timestamp date={data.originalDate} {withTime} />
+						<div class="value">{formatPercent(data.Close, 2)}</div>
 					</UpDownCell>
 				</div>
 			{/if}
@@ -151,19 +143,14 @@ Render the portfolio performance chart using ChartIQ.
 		position: absolute;
 		left: var(--x);
 		top: var(--y);
-		background: hsla(var(--hsl-body), 0.8);
-		border-radius: var(--radius-sm);
 		transform: translate(-50%, calc(-100% - var(--space-md)));
 
-		.date {
-			font: var(--f-ui-xs-bold);
-			letter-spacing: var(--f-ui-xs-spacing);
-			color: hsla(var(--hsl-text), 0.4);
-			white-space: nowrap;
+		:global(time) {
+			color: hsla(var(--hsl-text-extra-light));
 		}
 
 		.value {
-			font: var(--f-ui-md-roman);
+			font: var(--f-ui-md-medium);
 			letter-spacing: var(--f-ui-md-spacing);
 		}
 	}

From 64ce40209601145d14c7c6260910ba418f807676 Mon Sep 17 00:00:00 2001
From: Ken Kunz <kennethkunz@gmail.com>
Date: Fri, 20 Oct 2023 18:53:14 -0500
Subject: [PATCH 3/3] convert performance chart data to standard time intervals

---
 package-lock.json                             | 63 +++----------------
 package.json                                  |  4 +-
 src/lib/chart/ChartIQ.svelte                  |  8 ++-
 src/routes/strategies/ChartThumbnail.svelte   | 12 +---
 .../[strategy]/(nav)/performance/+page.svelte | 13 +---
 .../PortfolioPerformanceChart.svelte          | 58 +++++++++++------
 6 files changed, 61 insertions(+), 97 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 28b37e690..fbf4525c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,7 @@
         "bignumber.js": "^9.1.2",
         "cheerio": "^1.0.0-rc.12",
         "cookie": "^0.5.0",
-        "d3-array": "^3.2.3",
-        "d3-scale": "^4.0.2",
+        "d3-time": "^3.1.0",
         "date-fns": "^2.29.3",
         "dd-trace": "^4.15.0",
         "devalue": "^4.3.2",
@@ -43,6 +42,7 @@
         "@testing-library/jest-dom": "^6.1.2",
         "@testing-library/svelte": "^4.0.3",
         "@testing-library/user-event": "^14.4.3",
+        "@types/d3-time": "^3.0.2",
         "@types/plotly.js": "^2.12.21",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
         "@typescript-eslint/parser": "^5.62.0",
@@ -2851,6 +2851,12 @@
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
       "integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
     },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.2.tgz",
+      "integrity": "sha512-kbdRXTmUgNfw5OTE3KZnFQn6XdIc4QGroN5UixgdrXATmYsdlPQS6pEut9tVlIojtzuFD4txs/L+Rq41AHtLpg==",
+      "dev": true
+    },
     "node_modules/@types/debug": {
       "version": "4.1.8",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.8.tgz",
@@ -4987,48 +4993,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/d3-time": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
@@ -5040,17 +5004,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz",
diff --git a/package.json b/package.json
index 72ed5ecdf..f6ffe751f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/svelte": "^4.0.3",
     "@testing-library/user-event": "^14.4.3",
+    "@types/d3-time": "^3.0.2",
     "@types/plotly.js": "^2.12.21",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -61,8 +62,7 @@
     "bignumber.js": "^9.1.2",
     "cheerio": "^1.0.0-rc.12",
     "cookie": "^0.5.0",
-    "d3-array": "^3.2.3",
-    "d3-scale": "^4.0.2",
+    "d3-time": "^3.1.0",
     "date-fns": "^2.29.3",
     "dd-trace": "^4.15.0",
     "devalue": "^4.3.2",
diff --git a/src/lib/chart/ChartIQ.svelte b/src/lib/chart/ChartIQ.svelte
index 19ed8218d..8c241bb7f 100644
--- a/src/lib/chart/ChartIQ.svelte
+++ b/src/lib/chart/ChartIQ.svelte
@@ -59,6 +59,7 @@ Dynamically ChartIQ modules (if available) and render chart element.
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 	import { lightFormat as formatDate } from 'date-fns';
+	import { floorUTCDate, addUTCDays } from '$lib/helpers/date';
 	import { type ChartLinker, type QuoteFeed, ChartActivityTracker } from '$lib/chart';
 	import { Alert } from '$lib/components';
 	import Spinner from 'svelte-spinner';
@@ -125,7 +126,12 @@ Dynamically ChartIQ modules (if available) and render chart element.
 
 			// ChartIQ doesn't preserve original UTC date; restore it from tz-adjusted DT value
 			if (data) {
-				data.originalDate = new Date(data.DT.getTime() - data.DT.getTimezoneOffset() * 60000);
+				const { timeUnit } = chartEngine.getPeriodicity();
+				if (timeUnit === 'day') {
+					data.adjustedDate = addUTCDays(floorUTCDate(data.DT), 1);
+				} else {
+					data.adjustedDate = new Date(data.DT);
+				}
 			}
 
 			cursor = { position, data };
diff --git a/src/routes/strategies/ChartThumbnail.svelte b/src/routes/strategies/ChartThumbnail.svelte
index 9908dc1b4..58e771942 100644
--- a/src/routes/strategies/ChartThumbnail.svelte
+++ b/src/routes/strategies/ChartThumbnail.svelte
@@ -36,14 +36,8 @@
 			update() {
 				chartEngine.loadChart('strategy-thumbnail', {
 					periodicity: { period: 1, timeUnit: 'day' },
-					masterData: data.map(([date, value]) => ({
-						// passing ISO date (w/out time) to prevent buggy ChartIQ tz conversions
-						DT: date.toISOString().slice(0, 10),
-						Value: value,
-						// add baseline data for drawing a simple 0 basline series (see above)
-						Baseline: 0
-					})),
-					span: { base: 'day', multiplier: 90 }
+					span: { base: 'day', multiplier: 90 },
+					masterData: data.map(([DT, Value]) => ({ DT, Value, Baseline: 0 }))
 				});
 
 				const { yAxis } = chartEngine.chart;
@@ -62,7 +56,7 @@
 			<Marker x={position.DateX} y={position.CloseY} size={4} />
 			<div class="chart-hover-info" style:--x="{position.cx}px" style:--y="{position.CloseY}px">
 				<UpDownCell value={data.Close - data.iqPrevClose}>
-					<Timestamp date={data.originalDate} />
+					<Timestamp date={data.adjustedDate} />
 					<div class="value">{formatPercent(data.Close, 2)}</div>
 				</UpDownCell>
 			</div>
diff --git a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
index d8bb3ac9c..aca400959 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/+page.svelte
@@ -4,7 +4,6 @@
 <script lang="ts">
 	import { getPortfolioLatestStats } from 'trade-executor/state/stats';
 	import SummaryStatistics from './SummaryStatistics.svelte';
-	import WebChart from '../../WebChart.svelte';
 	import PortfolioPerformanceChart from './PortfolioPerformanceChart.svelte';
 
 	export let data;
@@ -18,17 +17,7 @@
 
 <section class="performance">
 	{#if profitabilityChart}
-		<!-- We cannot do fill here, because protability chart goes below zero -->
-		<WebChart
-			name="Profitability"
-			description="Compounded profitability of realised trading positions."
-			webChart={profitabilityChart}
-			yType="percent"
-			yAxisTitle="Realised profit"
-			fillMode="none"
-		/>
-
-		<PortfolioPerformanceChart data={profitabilityChart.data} />
+		<PortfolioPerformanceChart data={profitabilityChart.data} helpLink={profitabilityChart.help_link} />
 	{/if}
 
 	<SummaryStatistics {oldLatestStats} {summaryStatistics} />
diff --git a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
index 689e6ec11..12435f9d7 100644
--- a/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
+++ b/src/routes/strategies/[strategy]/(nav)/performance/PortfolioPerformanceChart.svelte
@@ -5,30 +5,58 @@ Render the portfolio performance chart using ChartIQ.
 - Y-axis: portfolio value
 -->
 <script lang="ts">
+	import { utcHour, utcDay } from 'd3-time';
 	import { formatPercent } from '$lib/helpers/formatters';
 	import { determinePriceChangeClass } from '$lib/helpers/price';
 	import { SegmentedControl, Timestamp, UpDownCell } from '$lib/components';
 	import { ChartIQ, Marker } from '$lib/chart';
 
 	export let data: [number, number][];
+	export let helpLink: string;
+
+	type ChartTick = [Date, number];
+	const rawData: ChartTick[] = data.map(([ts, val]) => [new Date(ts * 1000), val]);
 
 	let chartWrapper: HTMLElement;
 
 	const timeSpanOptions = {
-		'1W': { hours: 1, spanDays: 7, withTime: true },
-		'1M': { hours: 4, spanDays: 30, withTime: true },
-		'3M': { hours: 24, spanDays: 90, withTime: false }
+		'1W': {
+			spanDays: 7,
+			interval: utcHour.every(1),
+			periodicity: { period: 1, interval: 60, timeUnit: 'minute' }
+		},
+		'1M': {
+			spanDays: 30,
+			interval: utcHour.every(4),
+			periodicity: { period: 1, interval: 4 * 60, timeUnit: 'minute' }
+		},
+		'3M': {
+			spanDays: 90,
+			interval: utcDay.every(1),
+			periodicity: { period: 1, interval: 1, timeUnit: 'day' }
+		}
 	} as const;
 
 	let timeSpan: keyof typeof timeSpanOptions = '3M';
 
-	$: ({ hours, spanDays, withTime } = timeSpanOptions[timeSpan]);
+	$: ({ spanDays, interval, periodicity } = timeSpanOptions[timeSpan]);
+
+	function getNormalizedIntervalData() {
+		return rawData.reduce((acc: ChartTick[], [date, value]) => {
+			const normalizedDate = interval!.floor(date);
+			const replace = Number(normalizedDate.valueOf() === acc.at(-1)?.[0].valueOf());
+			acc.splice(acc.length - replace, replace, [normalizedDate, value]);
+			return acc;
+		}, []);
+	}
 
 	const options = {
 		layout: { chartType: 'mountain' },
 		controls: { chartControls: null },
+		dontRoll: true,
 
 		chart: {
+			tension: 1,
 			xAxis: { displayGridLines: false },
 			yAxis: {
 				displayGridLines: false,
@@ -56,12 +84,9 @@ Render the portfolio performance chart using ChartIQ.
 		return {
 			update() {
 				chartEngine.loadChart('strategy-profitability', {
-					periodicity: { period: hours, interval: 60, timeUnit: 'minute' },
+					periodicity,
 					span: { base: 'day', multiplier: spanDays },
-					masterData: data.map(([ts, Value]) => ({
-						DT: ts * 1000,
-						Value
-					}))
+					masterData: getNormalizedIntervalData().map(([DT, Value]) => ({ DT, Value }))
 				});
 			}
 		};
@@ -70,10 +95,12 @@ Render the portfolio performance chart using ChartIQ.
 
 <div class="portfolio-performance-chart">
 	<header>
-		<h2>Total Equity</h2>
+		<h2>Profitability</h2>
 		<SegmentedControl options={Object.keys(timeSpanOptions)} bind:selected={timeSpan} />
 	</header>
-	<p>Cash and market valued tokens in the strategy (USD)</p>
+	<p>
+		Compounded <a class="body-link" href={helpLink}>profitability</a> of realised trading positions.
+	</p>
 	<div bind:this={chartWrapper}>
 		<ChartIQ {init} {options} invalidate={[timeSpan]} let:cursor>
 			{@const { position, data } = cursor}
@@ -81,7 +108,7 @@ Render the portfolio performance chart using ChartIQ.
 				<Marker x={position.DateX} y={position.CloseY} size={4.5} />
 				<div class="chart-hover-info" style:--x="{position.cx}px" style:--y="{position.CloseY}px">
 					<UpDownCell value={data.Close - data.iqPrevClose}>
-						<Timestamp date={data.originalDate} {withTime} />
+						<Timestamp date={data.adjustedDate} withTime={periodicity.timeUnit === 'minute'} />
 						<div class="value">{formatPercent(data.Close, 2)}</div>
 					</UpDownCell>
 				</div>
@@ -120,15 +147,10 @@ Render the portfolio performance chart using ChartIQ.
 		h2 {
 			font: var(--f-heading-md-medium);
 			letter-spacing: var(--f-heading-md-spacing, normal);
-
-			@media (--viewport-sm-down) {
-				font: var(--f-heading-sm-medium);
-				letter-spacing: var(--f-heading-sm-spacing, normal);
-			}
 		}
 
 		p {
-			color: hsla(var(--hsl-text-extra-light));
+			color: hsla(var(--hsl-text-light));
 			font: var(--f-ui-md-medium);
 			letter-spacing: var(--f-ui-md-spacing, normal);