$("#chart-market-1").addClass("text-success");$("#chart-logo-1").addClass("bg-success");
$("#chart-logo-1").attr('src','panel/assets/images/icons/crypto/png/1000sats.png');
$("#chart-market-1").html("LONG 20x");

$("#chart-strategy-1").html("Intraday");
$("#chart-end-pnl-1").html("+12.38%");

//Chart 1
var options = {
  series: [{
      data: [0.0002748, 0.0002728, 0.0002719, 0.0002748, 0.0002747, 0.000276400000000000, 0.0002764]  }],
  chart: {
      type: 'area',
      height: 100,
      width: '100%',
      sparkline: {
        enabled: true
      }
  },
  stroke: {
    curve: 'smooth',
    width: 3,
  },
  grid: {
    padding: {
      top: 20,
      bottom: 30
    }
  },
  colors: ['#52CC99'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100]
    },
  },
  tooltip: {
    fixed: {
      enabled: false
    },
    x: {
      show: false
    },
    y: {
      title: {
        formatter: function (seriesName) {
          return '$'
        }
      }
    },
    marker: {
      show: false
    }
  },
  annotations: {
    yaxis: [{
      x: 5,
      y: 0.0002747,
      borderColor: "#52CC99",
      offsetY: 0,
    },
    {
      x: 6,
      y: 0.000276400000000000,
      borderColor: "#FF4560",
      offsetY: 0,
    }],
    points: [{
      x: 5,
      y: 0.0002747,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#52CC99",
        radius: 2
      },
      label: {
        borderColor: "#52CC99",
        offsetY: 10,
        style: {
          color: "#FFF",
          background: "#52CC99"
        },
        text: "B"
      }
    },
    {
      x: 6,
      y: 0.000276400000000000,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#FF4560",
        radius: 2
      },
      label: {
        borderColor: "#FF4560",
        offsetY: 29,
        style: {
          color: "#FFF",
          background: "#FF4560"
        },
        text: "S"
      }
    }]
  }
};

var chart = new ApexCharts(document.querySelector("#chart-1"), options);
chart.render();



$("#chart-market-2").addClass("text-success");$("#chart-logo-2").addClass("bg-success");
$("#chart-logo-2").attr('src','panel/assets/images/icons/crypto/png/dodox.png');
$("#chart-market-2").html("LONG 20x");

$("#chart-strategy-2").html("Intraday");
$("#chart-end-pnl-2").html("+13.84%");

//Chart 2
var options = {
  series: [{
      data: [0.1803640, 0.1797820, 0.1795610, 0.1808730, 0.1802882, 0.181535700000000000, 0.1815220]  }],
  chart: {
      type: 'area',
      height: 100,
      width: '100%',
      sparkline: {
        enabled: true
      }
  },
  stroke: {
    curve: 'smooth',
    width: 3,
  },
  grid: {
    padding: {
      top: 20,
      bottom: 30
    }
  },
  colors: ['#52CC99'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100]
    },
  },
  tooltip: {
    fixed: {
      enabled: false
    },
    x: {
      show: false
    },
    y: {
      title: {
        formatter: function (seriesName) {
          return '$'
        }
      }
    },
    marker: {
      show: false
    }
  },
  annotations: {
    yaxis: [{
      x: 5,
      y: 0.1802882,
      borderColor: "#52CC99",
      offsetY: 0,
    },
    {
      x: 6,
      y: 0.181535700000000000,
      borderColor: "#FF4560",
      offsetY: 0,
    }],
    points: [{
      x: 5,
      y: 0.1802882,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#52CC99",
        radius: 2
      },
      label: {
        borderColor: "#52CC99",
        offsetY: 10,
        style: {
          color: "#FFF",
          background: "#52CC99"
        },
        text: "B"
      }
    },
    {
      x: 6,
      y: 0.181535700000000000,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#FF4560",
        radius: 2
      },
      label: {
        borderColor: "#FF4560",
        offsetY: 29,
        style: {
          color: "#FFF",
          background: "#FF4560"
        },
        text: "S"
      }
    }]
  }
};

var chart = new ApexCharts(document.querySelector("#chart-2"), options);
chart.render();



$("#chart-market-3").addClass("text-success");$("#chart-logo-3").addClass("bg-success");
$("#chart-logo-3").attr('src','panel/assets/images/icons/crypto/png/neo.png');
$("#chart-market-3").html("LONG 20x");

$("#chart-strategy-3").html("Webhook");
$("#chart-end-pnl-3").html("+8.03%");

//Chart 3
var options = {
  series: [{
      data: [16.700, 16.652, 16.576, 16.696, 16.681, 16.748000000000000000, 16.741]  }],
  chart: {
      type: 'area',
      height: 100,
      width: '100%',
      sparkline: {
        enabled: true
      }
  },
  stroke: {
    curve: 'smooth',
    width: 3,
  },
  grid: {
    padding: {
      top: 20,
      bottom: 30
    }
  },
  colors: ['#52CC99'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100]
    },
  },
  tooltip: {
    fixed: {
      enabled: false
    },
    x: {
      show: false
    },
    y: {
      title: {
        formatter: function (seriesName) {
          return '$'
        }
      }
    },
    marker: {
      show: false
    }
  },
  annotations: {
    yaxis: [{
      x: 5,
      y: 16.681,
      borderColor: "#52CC99",
      offsetY: 0,
    },
    {
      x: 6,
      y: 16.748000000000000000,
      borderColor: "#FF4560",
      offsetY: 0,
    }],
    points: [{
      x: 5,
      y: 16.681,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#52CC99",
        radius: 2
      },
      label: {
        borderColor: "#52CC99",
        offsetY: 10,
        style: {
          color: "#FFF",
          background: "#52CC99"
        },
        text: "B"
      }
    },
    {
      x: 6,
      y: 16.748000000000000000,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#FF4560",
        radius: 2
      },
      label: {
        borderColor: "#FF4560",
        offsetY: 29,
        style: {
          color: "#FFF",
          background: "#FF4560"
        },
        text: "S"
      }
    }]
  }
};

var chart = new ApexCharts(document.querySelector("#chart-3"), options);
chart.render();



$("#chart-market-4").addClass("text-success");$("#chart-logo-4").addClass("bg-success");
$("#chart-logo-4").attr('src','panel/assets/images/icons/crypto/png/bel.png');
$("#chart-market-4").html("LONG 20x");

$("#chart-strategy-4").html("Webhook");
$("#chart-end-pnl-4").html("+12.15%");

//Chart 4
var options = {
  series: [{
      data: [0.79200, 0.78830, 0.78910, 0.79380, 0.80024, 0.805100000000000000, 0.80880]  }],
  chart: {
      type: 'area',
      height: 100,
      width: '100%',
      sparkline: {
        enabled: true
      }
  },
  stroke: {
    curve: 'smooth',
    width: 3,
  },
  grid: {
    padding: {
      top: 20,
      bottom: 30
    }
  },
  colors: ['#52CC99'],
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      inverseColors: false,
      opacityFrom: 0.45,
      opacityTo: 0.05,
      stops: [20, 100, 100, 100]
    },
  },
  tooltip: {
    fixed: {
      enabled: false
    },
    x: {
      show: false
    },
    y: {
      title: {
        formatter: function (seriesName) {
          return '$'
        }
      }
    },
    marker: {
      show: false
    }
  },
  annotations: {
    yaxis: [{
      x: 5,
      y: 0.80024,
      borderColor: "#52CC99",
      offsetY: 0,
    },
    {
      x: 6,
      y: 0.805100000000000000,
      borderColor: "#FF4560",
      offsetY: 0,
    }],
    points: [{
      x: 5,
      y: 0.80024,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#52CC99",
        radius: 2
      },
      label: {
        borderColor: "#52CC99",
        offsetY: 10,
        style: {
          color: "#FFF",
          background: "#52CC99"
        },
        text: "B"
      }
    },
    {
      x: 6,
      y: 0.805100000000000000,
      marker: {
        offsetY: 0,
        size: 4,
        fillColor: "#FFF",
        strokeColor: "#FF4560",
        radius: 2
      },
      label: {
        borderColor: "#FF4560",
        offsetY: 29,
        style: {
          color: "#FFF",
          background: "#FF4560"
        },
        text: "S"
      }
    }]
  }
};

var chart = new ApexCharts(document.querySelector("#chart-4"), options);
chart.render();



$("#chart-market-5").addClass("text-success");$("#chart-logo-5").addClass("bg-success");


$("#chart-market-6").addClass("text-success");$("#chart-logo-6").addClass("bg-success");


$("#chart-market-7").addClass("text-success");$("#chart-logo-7").addClass("bg-success");


$("#chart-market-8").addClass("text-success");$("#chart-logo-8").addClass("bg-success");


$("#chart-market-9").addClass("text-success");$("#chart-logo-9").addClass("bg-success");


$("#chart-market-10").addClass("text-success");$("#chart-logo-10").addClass("bg-success");


$("#trades-table").html('<tr class="tradedata" id="tradebox1"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/1000sats.png" class="me-3 rounded-circle" height="32" alt="1000Sats" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">1000Sats <span class="text-muted">1000SATS</span></p></div></th><td class="p-3 text-success">+12.38%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.İ.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Intraday</a></td></tr><tr class="tradedata" id="tradebox2"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/dodox.png" class="me-3 rounded-circle" height="32" alt="Dodo" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">Dodo <span class="text-muted">DODOX</span></p></div></th><td class="p-3 text-success">+13.84%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.İ.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Intraday</a></td></tr><tr class="tradedata" id="tradebox3"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/neo.png" class="me-3 rounded-circle" height="32" alt="Neo" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">Neo <span class="text-muted">NEO</span></p></div></th><td class="p-3 text-success">+8.03%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.K.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Webhook</a></td></tr><tr class="tradedata" id="tradebox4"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/bel.png" class="me-3 rounded-circle" height="32" alt="BellaProtocol" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">BellaProtocol <span class="text-muted">BEL</span></p></div></th><td class="p-3 text-success">+12.15%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">r.y.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Webhook</a></td></tr><tr class="tradedata" id="tradebox5"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/mav.png" class="me-3 rounded-circle" height="32" alt="MaverickProtocol" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">MaverickProtocol <span class="text-muted">MAV</span></p></div></th><td class="p-3 text-success">+19.12%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.İ.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Intraday</a></td></tr><tr class="tradedata" id="tradebox6"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/ai.png" class="me-3 rounded-circle" height="32" alt="SleeplessAI" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">SleeplessAI <span class="text-muted">AI</span></p></div></th><td class="p-3 text-success">+15.82%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">r.y.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Webhook</a></td></tr><tr class="tradedata" id="tradebox7"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/ogn.png" class="me-3 rounded-circle" height="32" alt="OriginProtocol" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">OriginProtocol <span class="text-muted">OGN</span></p></div></th><td class="p-3 text-success">+26.06%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.İ.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Intraday</a></td></tr><tr class="tradedata" id="tradebox8"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/eth.png" class="me-3 rounded-circle" height="32" alt="Ethereum" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">Ethereum <span class="text-muted">ETH</span></p></div></th><td class="p-3 text-success">+45.91%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 100x</span></td><td class="p-3 text-muted">U.A.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Webhook</a></td></tr><tr class="tradedata" id="tradebox9"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/icp.png" class="me-3 rounded-circle" height="32" alt="InternetComputer" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">InternetComputer <span class="text-muted">ICP</span></p></div></th><td class="p-3 text-success">+11.00%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.İ.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Scalping</a></td></tr><tr class="tradedata" id="tradebox10"><th class="p-3"><div class="align-items-center"><img src="panel/assets/images/icons/crypto/png/cyber.png" class="me-3 rounded-circle" height="32" alt="CyberConnect" style="background-color:#FFF"><p class="mb-0 d-inline fw-normal h6">CyberConnect <span class="text-muted">CYBER</span></p></div></th><td class="p-3 text-success">+7.25%</td><td class="p-3 text-muted">FUTURES</td><td class="p-3"><span class="badge bg-soft-success rounded">LONG 20x</span></td><td class="p-3 text-muted">A.K.</td><td class="p-3 text-end"><a href="panel/signup.php" class="btn btn-sm btn-soft-primary fw-bold">Webhook</a></td></tr>');

$("#cumulative-pnl").html("<span class='counter-value' data-target='5.8'>2570</span>%");

$("tr.tradedata").mouseover(function() {
  //$("."+this.id).css('background-color', '#77FF99');
	$("."+this.id).removeClass('shadow');
	$("."+this.id).css('box-shadow', '0 0 3px #646af6');
}).mouseout(function() {
  //$("."+this.id).css('background-color', 'transparent');
	$("."+this.id).addClass('shadow');
	$("."+this.id).css('box-shadow', '');
});