bugfixes, charts, economy-data

data/charts.js

@@ -2,6 +2,8 @@ const urlParams = new URLSearchParams(window.location.search);
 const symbol = urlParams.get('symbol');
 const time = urlParams.get('time');
 
+const heightrsimacdchart = 100
+
 function timeToLocal(originalTime) {
   const d = new Date(originalTime * 1000);
   return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()) / 1000;
@@ -10,7 +12,7 @@ function timeToLocal(originalTime) {
 function parseCSV(data) {
   const rows = data.split("\n");
   const result = [];
-  let start = Math.max(rows.length - 298, 0);
+  let start = Math.max(rows.length - 1000, 0);
   let lastElements = rows.slice(start)
   for (let i = start; i < rows.length; i++) {
     const cols = rows[i].split(",");
@@ -101,15 +103,14 @@ chart.applyOptions({
 });
 
 // define chart
-const candleSeries = chart.addCandlestickSeries();
-const lineSeriesEMA12 = chart.addLineSeries({ color: 'red', lineWidth: 1, priceLineVisible: false});
-const lineSeriesEMA26 = chart.addLineSeries({ color: 'pink', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
-const lineSeriesEMA50 = chart.addLineSeries({ color: 'cyan', lineWidth: 1, priceLineVisible: false});
-const lineSeriesEMA100 = chart.addLineSeries({ color: 'yellow', lineWidth: 1, priceLineVisible: false});
-const lineSeriesEMA200 = chart.addLineSeries({ color: 'white', lineWidth: 1, priceLineVisible: false});
-const lineSeriesEMA400 = chart.addLineSeries({ color: 'orange', lineWidth: 1, priceLineVisible: false});
-const lineSeriesEMA800 = chart.addLineSeries({ color: 'purple', lineWidth: 1, priceLineVisible: false});
-
+const candleSeries = chart.addCandlestickSeries({upColor: 'green',  wickUpColor: 'green',  downColor: 'red', wickDownColor: 'red', borderVisible: false,});
+const lineSeriesEMA12 = chart.addLineSeries({ color: 'red', lineWidth: 1, priceLineVisible: false, title: 'EMA12'});
+const lineSeriesEMA26 = chart.addLineSeries({ color: 'pink', lineWidth: 1, lineStyle: 2, priceLineVisible: false, title: 'EMA26'});
+const lineSeriesEMA50 = chart.addLineSeries({ color: 'cyan', lineWidth: 1, priceLineVisible: false, title: 'EMA50'});
+const lineSeriesEMA100 = chart.addLineSeries({ color: 'yellow', lineWidth: 1, priceLineVisible: false, title: 'EMA100'});
+const lineSeriesEMA200 = chart.addLineSeries({ color: 'white', lineWidth: 1, priceLineVisible: false, title: 'EMA200'});
+const lineSeriesEMA400 = chart.addLineSeries({ color: 'orange', lineWidth: 1, priceLineVisible: false, title: 'EMA400'});
+const lineSeriesEMA800 = chart.addLineSeries({ color: 'purple', lineWidth: 1, priceLineVisible: false, title: 'EMA800'});
 
 // RSI Chart
 const chartrsi = LightweightCharts.createChart(document.getElementById("container"),
@@ -118,7 +119,7 @@ const chartrsi = LightweightCharts.createChart(document.getElementById("containe
     minimumWidth: 100,
     borderVisible: false
   },
-  height: 200,
+  height: heightrsimacdchart,
   
   timeScale: {
       visible: false,
@@ -149,9 +150,9 @@ chartrsi.applyOptions({
   }
 });
 
-const lineSeriesRSI5 = chartrsi.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
-const lineSeriesRSI14 = chartrsi.addLineSeries({ color: 'yellow', lineWidth: 2, priceLineVisible: false});
-const lineSeriesRSI21 = chartrsi.addLineSeries({ color: 'lightgreen', lineWidth: 1, lineStyle: 2, priceLineVisible: false});
+const lineSeriesRSI5 = chartrsi.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 2, priceLineVisible: false, title: 'RSI5'});
+const lineSeriesRSI14 = chartrsi.addLineSeries({ color: 'yellow', lineWidth: 2, priceLineVisible: false, title: 'RSI14'});
+const lineSeriesRSI21 = chartrsi.addLineSeries({ color: 'lightgreen', lineWidth: 1, lineStyle: 2, priceLineVisible: false, title: 'RSI21'});
 
 // MACD Chart
 const chartmacd = LightweightCharts.createChart(document.getElementById("container"),
@@ -161,7 +162,7 @@ const chartmacd = LightweightCharts.createChart(document.getElementById("contain
     borderVisible: false
   },
 
-  height: 200,
+  height: heightrsimacdchart,
 
   timeScale: {
     timeVisible: true,
@@ -193,17 +194,18 @@ chartmacd.applyOptions({
   }
 });
 
-const lineSeriesMACD = chartmacd.addLineSeries({ color: 'blue', lineWidth: 1, lineStyle: 0, priceLineVisible: false});
-const lineSeriesMACDSignal = chartmacd.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 0, priceLineVisible: false});
+const lineSeriesMACD = chartmacd.addLineSeries({ color: 'blue', lineWidth: 1, lineStyle: 0, priceLineVisible: false, title: 'MACD'});
+const lineSeriesMACDSignal = chartmacd.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 0, priceLineVisible: false, title: 'Signal'});
 const histogramSeriesMACD = chartmacd.addHistogramSeries({ 
   priceFormat: {
    type: 'volume',
    color: 'orange',
   },
+  priceLineVisible: false,
 });
 
 
-fetch("/botdata/asset-histories/" + symbol + ".history." + time + ".csv")
+fetch("/botdata/asset-histories/" + symbol + ".history." + time + ".csv", { cache: 'no-store' })
 .then(response => response.text())
 .then(data => {
   const parsedData = parseCSV(data);
@@ -304,21 +306,176 @@ fetch("/botdata/asset-histories/" + symbol + ".history." + time + ".csv")
 
 
 // Lines for price levels
-fetch("/botdata/asset-histories/" + symbol + ".history.csv.levels")
+fetch("/botdata/asset-histories/" + symbol + ".history.csv.levels", { cache: 'no-store' })
 .then(response => response.text())
 .then(text => {
   const levels = text.split('\n');
   levels.forEach(function(level) {
-    candleSeries.createPriceLine({price: level, color: "darkblue", lineWidth: 0.5, lineStyle: 0, axisLabelVisible: true, title: 'Level'});
+    candleSeries.createPriceLine({price: level, color: "blue", lineWidth: 0.5, lineStyle: 3, axisLabelVisible: true, title: 'Level'});
   });
 });
 
+// Lines for RSIs
+lineSeriesRSI14.createPriceLine({price: 45, color: "green", lineWidth: 0.5, lineStyle: 3, axisLabelVisible: false});
+lineSeriesRSI14.createPriceLine({price: 50, color: "lightyellow", lineWidth: 0.5, lineStyle: 3, axisLabelVisible: false});
+lineSeriesRSI14.createPriceLine({price: 55, color: "red", lineWidth: 0.5, lineStyle: 3, axisLabelVisible: false});
+
+
+// DXY //
+const DXYchart = LightweightCharts.createChart(document.getElementById('container'),
+{
+  rightPriceScale: {
+    minimumWidth: 100,
+    borderVisible: false
+  },
+
+  height: 500,
+
+  crosshair: {
+     mode: 0,
+  },
+
+  timeScale: {
+    timeVisible: true,
+    secondsVisible: false,
+  },
+
+  layout: {
+    background: {
+      type: 'solid',
+      color: '#222',
+    },
+  textColor: '#DDD',
+  },
+
+  grid: {
+    vertLines: { color: '#444' },
+    horzLines: { color: '#444' },
+  },
+
+});
+
+DXYchart.applyOptions({
+  watermark: {
+    visible: true,
+    fontSize: 18,
+    horzAlign: 'top',
+    vertAlign: 'left',
+    color: '#DDD',
+    text: "DXY" + time,
+  }
+});
+
+// define DXY chart
+const DXYcandleSeries = DXYchart.addCandlestickSeries({upColor: 'green',  wickUpColor: 'green',  downColor: 'red', wickDownColor: 'red', borderVisible: false,});
+const DXYlineSeriesEMA200 = DXYchart.addLineSeries({ color: 'white', lineWidth: 1, priceLineVisible: false, title: 'EMA200'});
+const DXYlineSeriesEMA800 = DXYchart.addLineSeries({ color: 'purple', lineWidth: 1, priceLineVisible: false, title: 'EMA800'});
+const DXYlineSeriesEMA50 = DXYchart.addLineSeries({ color: 'cyan', lineWidth: 1, priceLineVisible: false, title: 'EMA50'});
+
+
+// DXY RSI Chart
+const DXYchartrsi = LightweightCharts.createChart(document.getElementById("container"),
+{
+  rightPriceScale: {
+    minimumWidth: 100,
+    borderVisible: false
+  },
+  height: heightrsimacdchart,
+
+  timeScale: {
+      visible: false,
+  },
+
+  layout: {
+    background: {
+      type: 'solid',
+      color: '#222',
+    },
+    textColor: '#DDD',
+  },
+
+  grid: {
+    vertLines: { color: '#444' },
+    horzLines: { color: '#444' },
+  },
+});
+
+DXYchartrsi.applyOptions({
+  watermark: {
+    visible: true,
+    fontSize: 18,
+    horzAlign: 'top',
+    vertAlign: 'left',
+    color: '#DDD',
+    text: 'DXY RSI 5,14,21',
+  }
+});
+
+const DXYlineSeriesRSI5 = DXYchartrsi.addLineSeries({ color: 'orange', lineWidth: 1, lineStyle: 2, priceLineVisible: false, title: 'RSI5'});
+const DXYlineSeriesRSI14 = DXYchartrsi.addLineSeries({ color: 'yellow', lineWidth: 2, priceLineVisible: false, title: 'RSI14'});
+const DXYlineSeriesRSI21 = DXYchartrsi.addLineSeries({ color: 'lightgreen', lineWidth: 1, lineStyle: 2, priceLineVisible: false, title: 'RSI21'});
+
+fetch("/botdata/asset-histories/ECONOMY-DXY.history." + time + ".csv", { cache: 'no-store' })
+.then(response => response.text())
+.then(data => {
+  const DYXparsedData = parseCSV(data);
+
+  // OHLC Data
+  const DXYbars = DYXparsedData.map(item => ({
+    time: item[0],
+    open: item[1],
+    high: item[2],
+    low: item[3],
+    close: item[4]
+  }));
+  DXYcandleSeries.setData(DXYbars);
+
+  const DXYlineSeriesEMA50Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[10]
+  }));
+  DXYlineSeriesEMA50.setData(DXYlineSeriesEMA50Data);
+
+  const DXYlineSeriesEMA200Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[12]
+  }));
+  DXYlineSeriesEMA200.setData(DXYlineSeriesEMA200Data);
+
+  const DXYlineSeriesEMA800Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[14]
+  }));
+  DXYlineSeriesEMA800.setData(DXYlineSeriesEMA800Data);
+
+  // RSI Data
+  const DXYlineSeriesRSI5Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[15]
+  }));
+  DXYlineSeriesRSI5.setData(DXYlineSeriesRSI5Data);
+
+  const DXYlineSeriesRSI14Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[16]
+  }));
+  DXYlineSeriesRSI14.setData(DXYlineSeriesRSI14Data);
+
+  const DXYlineSeriesRSI21Data = DYXparsedData.map(item => ({
+    time: item[0],
+    value: item[17]
+  }));
+  DXYlineSeriesRSI21.setData(DXYlineSeriesRSI21Data);
+});
+
 
 // Sync charts timeScale
 chart.timeScale().fitContent();
 chart.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
   chartrsi.timeScale().setVisibleLogicalRange(timeRange);
   chartmacd.timeScale().setVisibleLogicalRange(timeRange);
+  DXYchartrsi.timeScale().setVisibleLogicalRange(timeRange);
+  DXYchart.timeScale().setVisibleLogicalRange(timeRange);
 });
 
 chartrsi.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
@@ -329,21 +486,60 @@ chartmacd.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
   chart.timeScale().setVisibleLogicalRange(timeRange);
 });
 
+DXYchart.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
+  chart.timeScale().setVisibleLogicalRange(timeRange);
+});
+
+DXYchartrsi.timeScale().subscribeVisibleLogicalRangeChange(timeRange => {
+  chart.timeScale().setVisibleLogicalRange(timeRange);
+});
+
+
+
+
 chart.subscribeCrosshairMove(param => {
   const dataPoint = getCrosshairDataPoint(lineSeriesEMA50, param);
   syncCrosshair(chartrsi, lineSeriesRSI14, dataPoint);
+
   const dataPointmacd = getCrosshairDataPoint(lineSeriesEMA50, param);
   syncCrosshair(chartmacd, lineSeriesMACD, dataPointmacd);
+
+  const DXYdataPoint = getCrosshairDataPoint(lineSeriesEMA50, param);
+  syncCrosshair(DXYchart, DXYlineSeriesEMA50, DXYdataPoint);
 });
+
 chartrsi.subscribeCrosshairMove(param => {
   const dataPoint = getCrosshairDataPoint(lineSeriesRSI14, param);
   syncCrosshair(chart, lineSeriesEMA50, dataPoint);
+
   const dataPointmacd = getCrosshairDataPoint(lineSeriesRSI14, param);
   syncCrosshair(chartmacd, lineSeriesMACD, dataPointmacd);
+
+  const DXYdataPoint = getCrosshairDataPoint(lineSeriesRSI14, param);
+  syncCrosshair(DXYchart, DXYlineSeriesEMA50, DXYdataPoint);
 });
+
 chartmacd.subscribeCrosshairMove(param => {
   const dataPoint = getCrosshairDataPoint(lineSeriesMACD, param);
   syncCrosshair(chart, lineSeriesEMA50, dataPoint);
+
   const dataPointrsi = getCrosshairDataPoint(lineSeriesMACD, param);
   syncCrosshair(chartrsi, lineSeriesRSI14, dataPointrsi);
+
+  const DXYdataPoint = getCrosshairDataPoint(lineSeriesMACD, param);
+  syncCrosshair(DXYchart, DXYlineSeriesEMA50, DXYdataPoint);
 });
+
+DXYchart.subscribeCrosshairMove(param => {
+  const dataPoint = getCrosshairDataPoint(DXYlineSeriesEMA50, param);
+  syncCrosshair(chart, lineSeriesEMA50, dataPoint);
+
+  const dataPointrsi = getCrosshairDataPoint(DXYlineSeriesEMA50, param);
+  syncCrosshair(chartrsi, lineSeriesRSI14, dataPointrsi);
+
+  const dataPointmacd = getCrosshairDataPoint(DXYlineSeriesEMA50, param);
+  syncCrosshair(chartmacd, lineSeriesMACD, dataPointrsi);
+});
+
+
+