From 1987f8c55d3f89ae334100384f8f3ee6081e5371 Mon Sep 17 00:00:00 2001
From: c9s <yoanlin93@gmail.com>
Date: Mon, 27 Jun 2022 14:05:08 +0800
Subject: [PATCH] improve time range slider format

---
 apps/backtest-report/components/TradingViewChart.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/backtest-report/components/TradingViewChart.tsx b/apps/backtest-report/components/TradingViewChart.tsx
index 80ef68ea4..0bd5321f9 100644
--- a/apps/backtest-report/components/TradingViewChart.tsx
+++ b/apps/backtest-report/components/TradingViewChart.tsx
@@ -7,6 +7,9 @@ import {Checkbox, Group, SegmentedControl, Table} from '@mantine/core';
 import {createChart, CrosshairMode, MouseEventParams, TimeRange} from 'lightweight-charts';
 import {ReportSummary} from "../types";
 import moment from "moment";
+import {format} from 'date-fns';
+
+// See https://codesandbox.io/s/ve7w2?file=/src/App.js
 import TimeRangeSlider from './TimeRangeSlider';
 
 const parseKline = () => {
@@ -553,7 +556,9 @@ const TradingViewChart = (props: TradingViewChartProps) => {
     return () => {
       console.log("removeChart")
 
-      resizeObserver.current.disconnect();
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
 
       if (chart.current) {
         chart.current.remove();
@@ -588,6 +593,8 @@ const TradingViewChart = (props: TradingViewChartProps) => {
       <TimeRangeSlider
         selectedInterval={selectedTimeRange}
         timelineInterval={timeRange}
+        formatTick={(ms : Date) => format(new Date(ms), 'M d HH')}
+        step={1000 * parseInterval(currentInterval)}
         onChange={(tr: any) => {
           console.log("selectedTimeRange", tr)
           setSelectedTimeRange(tr)