[Feature] Session Breaks

[jinusean]

Feature Description

Draw a formatted line in between sessions, e.g. A line at start of a new day

To Do

An options in the styles

[liihuu]

Custom indicator can do it.

[char101]

Custom indicator can draw the lines but the xaxis labels will not be aligned. This is something that I have implemented before by changing the optimalTicks in xAxis.

diff --git a/src/component/XAxis.ts b/src/component/XAxis.ts
index d6f63c77..bac760ae 100644
--- a/src/component/XAxis.ts
+++ b/src/component/XAxis.ts
@@ -33,7 +33,48 @@ export default class XAxisImp extends AxisImp {
     }
   }
 
-  protected optimalTicks (ticks: AxisTick[]): AxisTick[] {
+  protected optimalTicks (_ticks: AxisTick[]): AxisTick[] {
+    const data = this.getParent().getChart().getDataList()
+    const { realMin, realMax } = this.getExtremum()
+    const ticks: AxisTick[] = []
+    const interval = (window as any).interval || '1d' // <--- need to read the interval value from somewhere
+    let prevPeriod = -1
+    for (let i = realMin; i <= realMax; ++i) {
+      const row = data[i]
+      const dt = new Date(row.timestamp)
+      switch (interval) {
+        case '1d':
+          const month = dt.getMonth()
+          if (month !== prevPeriod) {
+            ticks.push({text: `${dt.getFullYear().toString().substr(-2)}/${month + 1}`, coord: this.convertToPixel(i), value: i})
+          }
+          prevPeriod = month
+          break
+        case '1w':
+        case '1mo':
+          const year = dt.getFullYear()
+          if (year !== prevPeriod) {
+            ticks.push({text: `${year}`, coord: this.convertToPixel(i), value: i})
+            prevPeriod = year
+          }
+          break
+        case '5m':
+        case '10m':
+        case '15m':
+        case '30m':
+        case '1h':
+          const day = dt.getDate()
+          if (day !== prevPeriod) {
+            ticks.push({text: `${dt.getMonth() + 1}/${day}`, coord: this.convertToPixel(i), value: i})
+            prevPeriod = day
+          }
+          break
+      }
+    }
+    return ticks
+  }
+
+  protected xoptimalTicks (ticks: AxisTick[]): AxisTick[] {
     const chart = this.getParent().getChart()
     const chartStore = chart.getChartStore()
     const formatDate = chartStore.getCustomApi().formatDate

[liihuu]

I don't quite understand

[jinusean]

@liihuu

There's a line that appears at the start of day.
Would like an option to enable a line drawn at start of day, start of month, or a custom interval.