mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
feat: Add Crypto Dashboard with dynamic data and menu updates (#2527)
This commit is contained in:
Paweł Kuna
GitHub
6
.changeset/crypto-dashboard.md
Normal file
6
.changeset/crypto-dashboard.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new Crypto Dashboard page with cryptocurrency portfolio overview, market data, and order history.
|
||||
|
||||
6
.changeset/crypto-data-files.md
Normal file
6
.changeset/crypto-data-files.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Added crypto markets and orders data files (`crypto-markets.json`, `crypto-orders.json`) for cryptocurrency dashboard functionality.
|
||||
|
||||
6
.changeset/flags-avatars-updates.md
Normal file
6
.changeset/flags-avatars-updates.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated flags and avatars styling for better visual consistency.
|
||||
|
||||
6
.changeset/menu-structure-refactor.md
Normal file
6
.changeset/menu-structure-refactor.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Refactored page-menu structure for dashboards and updated navigation menu organization.
|
||||
|
||||
7
.changeset/navbar-side-refactor.md
Normal file
7
.changeset/navbar-side-refactor.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
|
||||
|
||||
@@ -426,6 +426,18 @@ Card table
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
&:last-child {
|
||||
tr:last-child {
|
||||
> *:last-child {
|
||||
border-bottom-right-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
border-bottom-left-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
@@ -447,6 +459,7 @@ Card table
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
tr {
|
||||
&:last-child {
|
||||
|
||||
@@ -6,7 +6,8 @@ layout: default
|
||||
permalink: badges.html
|
||||
---
|
||||
|
||||
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {% assign colors = colors | push: color[0]
|
||||
{% assign colors = "" | split: "," %} {% assign colors = colors | push: "default" %} {% for color in site.colors %} {%
|
||||
assign colors = colors | push: color[0]
|
||||
%} {% endfor %} {% assign colors = colors | push: "dark" | push: "light" %}
|
||||
|
||||
<div class="row row-cards">
|
||||
@@ -33,11 +34,15 @@ permalink: badges.html
|
||||
{% assign sizes = "sm,md,lg" | split: "," %} {% for size in sizes %}
|
||||
<div class="badges-list">
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Default</span>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include "ui/icon.html" icon="check" %} Left icon</span>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Right icon{% include "ui/icon.html" icon="arrow-right" %}</span>
|
||||
<span class="badge badge-icononly{% if size != 'md' %} badge-{{ size }}{% endif %}"
|
||||
>{% include "ui/icon.html" icon="star" type="filled" %}</span
|
||||
>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include "ui/icon.html"
|
||||
icon="check" %} Left icon
|
||||
</span>
|
||||
<span class="badge{% if size != 'md' %} badge-{{ size }}{% endif %}">Right icon{% include "ui/icon.html"
|
||||
icon="arrow-right" %}
|
||||
</span>
|
||||
<span class="badge badge-icononly{% if size != 'md' %} badge-{{ size }}{% endif %}">{% include
|
||||
"ui/icon.html" icon="star" type="filled" %}
|
||||
</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -50,7 +55,8 @@ permalink: badges.html
|
||||
<h3 class="card-title">Positioned badges</h3>
|
||||
|
||||
<div class="btn-list">
|
||||
<button type="button" class="btn">Notifications <span class="badge text-bg-secondary ms-2">4</span></button>
|
||||
<button type="button" class="btn">Notifications <span
|
||||
class="badge text-bg-secondary ms-2">4</span></button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
Inbox
|
||||
@@ -65,17 +71,17 @@ permalink: badges.html
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn">
|
||||
<button type="button" class="btn">
|
||||
Settings
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon">
|
||||
<button type="button" class="btn btn-icon">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
<span class="badge badge-dot bg-red badge-notification badge-blink"></span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-icon btn-action">
|
||||
<button type="button" class="btn btn-icon btn-action">
|
||||
{% include "ui/icon.html" icon="bell" %}
|
||||
<span class="badge badge-dot bg-red badge-notification"></span>
|
||||
</button>
|
||||
@@ -129,7 +135,8 @@ permalink: badges.html
|
||||
<h3 class="card-title">Badges with icons</h3>
|
||||
<div class="badges-list">
|
||||
{% for color in colors %}
|
||||
<span class="badge bg-{{ color }} text-{{ color }}-fg"> {% include "ui/icon.html" icon="star" type="filled" %} {{ color | uc_first }} </span>
|
||||
<span class="badge bg-{{ color }} text-{{ color }}-fg"> {% include "ui/icon.html" icon="star"
|
||||
type="filled" %} {{ color | uc_first }} </span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -145,7 +152,8 @@ permalink: badges.html
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in colors %}
|
||||
<button class="btn">{{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
|
||||
<button class="btn">{{ color | uc_first }} badge <span
|
||||
class="badge bg-{{ color }} text-{{ color }}-fg ms-2">{{ forloop.index }}</span></button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,7 +165,8 @@ permalink: badges.html
|
||||
<div class="btn-list">
|
||||
{% for color in colors %}
|
||||
<button class="btn position-relative">
|
||||
{{ color | uc_first }} badge <span class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span>
|
||||
{{ color | uc_first }} badge <span
|
||||
class="badge bg-{{ color }} text-{{ color }}-fg badge-notification badge-pill">{{ forloop.index }}</span>
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -179,4 +188,4 @@ permalink: badges.html
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
301
preview/pages/dashboard-crypto.html
Normal file
301
preview/pages/dashboard-crypto.html
Normal file
@@ -0,0 +1,301 @@
|
||||
---
|
||||
title: Crypto Dashboard
|
||||
page-header: Crypto Dashboard
|
||||
page-menu: dashboards.crypto
|
||||
page-libs: [apexcharts]
|
||||
layout: default
|
||||
permalink: dashboard-crypto.html
|
||||
---
|
||||
|
||||
{% assign btc = crypto-currencies | where: "symbol", "BTC" | first %}
|
||||
{% assign ltc = crypto-currencies | where: "symbol", "LTC" | first %}
|
||||
{% assign eth = crypto-currencies | where: "symbol", "ETH" | first %}
|
||||
{% assign xmr = crypto-currencies | where: "symbol", "XMR" | first %}
|
||||
{% assign btc_balance = 2.30 %}
|
||||
{% assign btc_price_num = btc.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign total_usd_raw = btc_price_num | times: btc_balance %}
|
||||
{% assign ltc_price_num = ltc.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign eth_price_num = eth.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign xmr_price_num = xmr.price | remove: "$" | remove: "," | plus: 0 %}
|
||||
{% assign ltc_btc = ltc_price_num | divided_by: btc_price_num %}
|
||||
{% assign eth_btc = eth_price_num | divided_by: btc_price_num %}
|
||||
{% assign xmr_btc = xmr_price_num | divided_by: btc_price_num %}
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">Total balance</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-dollar" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">${{ total_usd_raw | round | format_number }}</span>
|
||||
<span class="text-muted">{{ btc_balance }} {{ btc.symbol }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
{% include "ui/trending.html" value=btc.p24h %}
|
||||
<span class="text-muted">Since last week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">USD/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-bitcoin" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ btc.price }}</span>
|
||||
<span class="text-muted">{{ btc.price}}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ btc.volume-24h }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">LTC/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-litecoin" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ ltc_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ ltc.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ ltc.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">ETH/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-ethereum" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ eth_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ eth.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ eth.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col mt-0">
|
||||
<h5 class="card-title">XMR/BTC</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/avatar.html" icon="currency-monero" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<span class="h3">{{ xmr_btc | round: 8 }}</span>
|
||||
<span class="text-muted">{{ xmr.price }}</span>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<span class="text-muted">Volume: {{ xmr.volume-24h | remove: "$" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-5">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Markets</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/card-dropdown.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
{% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
|
||||
</th>
|
||||
<th>Coin</th>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">Volume</th>
|
||||
<th class="d-none d-xl-table-cell text-end">Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for market in crypto-markets limit: 10 %}
|
||||
<tr>
|
||||
<td>
|
||||
{% include "ui/switch-icon.html" icon="star" icon-b-color="yellow" variant="slide-up" %}
|
||||
</td>
|
||||
<td>{{ market.coin }}</td>
|
||||
<td class="">{{ market.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ market.volume }}</td>
|
||||
<td class="d-none d-xl-table-cell text-end">
|
||||
{% include "ui/trending.html" value=market.change %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-7">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">LTC/BTC</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/nav-segmented.html" items="1m,5m,30m,1h,1d" name="timeframe" size="sm" default=2 %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "ui/chart.html" chart-id="dashboard-crypto-candlestick" height=28 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12 col-lg-12 col-xxl-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Operations</h5>
|
||||
<div class="card-actions">
|
||||
{% include "ui/nav-segmented.html" items="Buy,Sell,Send" name="operations" size="sm" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Place new order:</p>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Amount</label>
|
||||
<select class="form-select">
|
||||
{% for currency in crypto-currencies limit: 20 %}
|
||||
<option value="{{ currency.symbol }}"{% if forloop.first %} selected{% endif %}>{{ currency.symbol }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="text" class="form-control" value="0.25">
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Price</label>
|
||||
<input type="text" class="form-control" readonly="" value="23,077.05">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<label class="input-group-text">Total</label>
|
||||
<input type="text" class="form-control" readonly="" value="5,769.27">
|
||||
<label class="input-group-text">$</label>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="button" class="btn btn-primary mb-3">Process to wallet</button>
|
||||
</div>
|
||||
|
||||
<p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Sell Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in crypto-orders.sell_orders %}
|
||||
<tr>
|
||||
<td>{{ order.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ order.btc }}</td>
|
||||
<td>{{ order.sum }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 col-xxl">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Buy Orders</h5>
|
||||
<div class="card-actions">
|
||||
<button class="btn btn-sm">View all</button>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table card-table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th class="d-none d-xl-table-cell">BTC</th>
|
||||
<th>Sum(BTC)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in crypto-orders.buy_orders %}
|
||||
<tr>
|
||||
<td>{{ order.price }}</td>
|
||||
<td class="d-none d-xl-table-cell">{{ order.btc }}</td>
|
||||
<td>{{ order.sum }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
page-menu: home
|
||||
page-menu: dashboards.default
|
||||
layout: homepage
|
||||
permalink: index.html
|
||||
---
|
||||
|
||||
@@ -2057,5 +2057,226 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"dashboard-crypto-candlestick": {
|
||||
"type": "candlestick",
|
||||
"height": 29,
|
||||
"toolbar": true,
|
||||
"datetime": true,
|
||||
"y-tooltip": true,
|
||||
"series": [
|
||||
{
|
||||
"name": "LTC/BTC",
|
||||
"candlestick-data": [
|
||||
{
|
||||
"x": 1735686000000,
|
||||
"y": [
|
||||
98803.1,
|
||||
102306.14,
|
||||
88978.24,
|
||||
94328.03
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1738278000000,
|
||||
"y": [
|
||||
95236.1,
|
||||
97032.03,
|
||||
87375.16,
|
||||
96251.77
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1740870000000,
|
||||
"y": [
|
||||
96487.56,
|
||||
103797.77,
|
||||
90697.28,
|
||||
90697.28
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1743458400000,
|
||||
"y": [
|
||||
91806.76,
|
||||
94895.54,
|
||||
87431.18,
|
||||
87431.18
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1746050400000,
|
||||
"y": [
|
||||
87011.25,
|
||||
93211.62,
|
||||
84356.3,
|
||||
87282.02
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1748642400000,
|
||||
"y": [
|
||||
88933.8,
|
||||
94105.65,
|
||||
87086.95,
|
||||
89538.17
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1751234400000,
|
||||
"y": [
|
||||
90270.85,
|
||||
95138.57,
|
||||
88785.87,
|
||||
92076.59
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1753826400000,
|
||||
"y": [
|
||||
91635.08,
|
||||
95329.73,
|
||||
88139.43,
|
||||
93398.3
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1756418400000,
|
||||
"y": [
|
||||
94084.03,
|
||||
96110.64,
|
||||
90758.23,
|
||||
92847.27
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1759010400000,
|
||||
"y": [
|
||||
94427.13,
|
||||
104031.87,
|
||||
91181.21,
|
||||
91387.19
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1761606000000,
|
||||
"y": [
|
||||
89676.79,
|
||||
96432.19,
|
||||
86003.07,
|
||||
91270.33
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1764198000000,
|
||||
"y": [
|
||||
90221.19,
|
||||
92256.21,
|
||||
87250.08,
|
||||
90572.57
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1766790000000,
|
||||
"y": [
|
||||
91467.48,
|
||||
99939.37,
|
||||
84023.53,
|
||||
91412.42
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1769382000000,
|
||||
"y": [
|
||||
92347.68,
|
||||
102495.71,
|
||||
84694.68,
|
||||
86861.46
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1771974000000,
|
||||
"y": [
|
||||
86450.15,
|
||||
97703.82,
|
||||
73654.73,
|
||||
89304.96
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1774566000000,
|
||||
"y": [
|
||||
89954.07,
|
||||
93720.75,
|
||||
83099.84,
|
||||
86765.37
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1777154400000,
|
||||
"y": [
|
||||
85041.33,
|
||||
93162.71,
|
||||
79493.01,
|
||||
80950.82
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1779746400000,
|
||||
"y": [
|
||||
81356.55,
|
||||
89872.84,
|
||||
75889.88,
|
||||
84397.86
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1782338400000,
|
||||
"y": [
|
||||
84500.33,
|
||||
86553.16,
|
||||
81499.11,
|
||||
86553.16
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1784930400000,
|
||||
"y": [
|
||||
87615.26,
|
||||
93796.77,
|
||||
81616.41,
|
||||
87524.49
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1787522400000,
|
||||
"y": [
|
||||
86016.31,
|
||||
91621.26,
|
||||
80661.81,
|
||||
83468.77
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1790114400000,
|
||||
"y": [
|
||||
84712.23,
|
||||
90825.8,
|
||||
81702.56,
|
||||
86377.51
|
||||
]
|
||||
},
|
||||
{
|
||||
"x": 1792706400000,
|
||||
"y": [
|
||||
86028.52,
|
||||
91660.63,
|
||||
77064.28,
|
||||
83253.51
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
122
shared/data/crypto-markets.json
Normal file
122
shared/data/crypto-markets.json
Normal file
@@ -0,0 +1,122 @@
|
||||
[
|
||||
{
|
||||
"coin": "ETH",
|
||||
"price": "0.03530991",
|
||||
"volume": "168,726.341",
|
||||
"change": "+1.11",
|
||||
"changeType": "success",
|
||||
"favorite": true
|
||||
},
|
||||
{
|
||||
"coin": "XRP",
|
||||
"price": "0.00002269",
|
||||
"volume": "22,843.185",
|
||||
"change": "-0.98",
|
||||
"changeType": "danger",
|
||||
"favorite": true
|
||||
},
|
||||
{
|
||||
"coin": "ETC",
|
||||
"price": "0.00014852",
|
||||
"volume": "529.209",
|
||||
"change": "+2.35",
|
||||
"changeType": "success",
|
||||
"favorite": true
|
||||
},
|
||||
{
|
||||
"coin": "LTC",
|
||||
"price": "0.00089821",
|
||||
"volume": "5,928.536",
|
||||
"change": "+3.89",
|
||||
"changeType": "success",
|
||||
"favorite": true
|
||||
},
|
||||
{
|
||||
"coin": "XMR",
|
||||
"price": "0.00310306",
|
||||
"volume": "1,382.046",
|
||||
"change": "+4.42",
|
||||
"changeType": "success",
|
||||
"favorite": true
|
||||
},
|
||||
{
|
||||
"coin": "BSC",
|
||||
"price": "0.00989344",
|
||||
"volume": "12,531.037",
|
||||
"change": "+0.79",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "ABC",
|
||||
"price": "0.02613303",
|
||||
"volume": "21.597",
|
||||
"change": "-3.20",
|
||||
"changeType": "danger",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "TRX",
|
||||
"price": "0.0000027",
|
||||
"volume": "4,250.916",
|
||||
"change": "+0.44",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "SC",
|
||||
"price": "0.00000002",
|
||||
"volume": "48.092",
|
||||
"change": "+2.23",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "OMG",
|
||||
"price": "0.00000102",
|
||||
"volume": "9.695",
|
||||
"change": "+0.30",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "CHR",
|
||||
"price": "0.00000223",
|
||||
"volume": "7.428",
|
||||
"change": "-4.21",
|
||||
"changeType": "danger",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "AVA",
|
||||
"price": "0.00016909",
|
||||
"volume": "3,088.149",
|
||||
"change": "+2.27",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "DASH",
|
||||
"price": "0.00063201",
|
||||
"volume": "6,344.102",
|
||||
"change": "+46.90",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "LINK",
|
||||
"price": "0.00015636",
|
||||
"volume": "4,510.014",
|
||||
"change": "+0.23",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
},
|
||||
{
|
||||
"coin": "EOS",
|
||||
"price": "0.00000246",
|
||||
"volume": "1.072",
|
||||
"change": "+0.97",
|
||||
"changeType": "success",
|
||||
"favorite": false
|
||||
}
|
||||
]
|
||||
106
shared/data/crypto-orders.json
Normal file
106
shared/data/crypto-orders.json
Normal file
@@ -0,0 +1,106 @@
|
||||
{
|
||||
"sell_orders": [
|
||||
{
|
||||
"price": "0.00091279",
|
||||
"btc": "0.55002151",
|
||||
"sum": "0.55002151"
|
||||
},
|
||||
{
|
||||
"price": "0.00092146",
|
||||
"btc": "1.97294243",
|
||||
"sum": "2.52296394"
|
||||
},
|
||||
{
|
||||
"price": "0.00094672",
|
||||
"btc": "0.67387767",
|
||||
"sum": "3.19684161"
|
||||
},
|
||||
{
|
||||
"price": "0.00095269",
|
||||
"btc": "0.93727595",
|
||||
"sum": "4.13411756"
|
||||
},
|
||||
{
|
||||
"price": "0.00095926",
|
||||
"btc": "0.8976753",
|
||||
"sum": "5.03179286"
|
||||
},
|
||||
{
|
||||
"price": "0.00097736",
|
||||
"btc": "0.94088124",
|
||||
"sum": "5.9726741"
|
||||
},
|
||||
{
|
||||
"price": "0.00100026",
|
||||
"btc": "0.51299752",
|
||||
"sum": "6.48567162"
|
||||
},
|
||||
{
|
||||
"price": "0.00102267",
|
||||
"btc": "1.18050103",
|
||||
"sum": "7.66617265"
|
||||
},
|
||||
{
|
||||
"price": "0.00104506",
|
||||
"btc": "1.17318909",
|
||||
"sum": "8.83936174"
|
||||
},
|
||||
{
|
||||
"price": "0.00104974",
|
||||
"btc": "2.19498873",
|
||||
"sum": "11.03435047"
|
||||
}
|
||||
],
|
||||
"buy_orders": [
|
||||
{
|
||||
"price": "0.00088217",
|
||||
"btc": "2.59949934",
|
||||
"sum": "2.59949934"
|
||||
},
|
||||
{
|
||||
"price": "0.00085874",
|
||||
"btc": "0.9852387",
|
||||
"sum": "3.58473804"
|
||||
},
|
||||
{
|
||||
"price": "0.00084954",
|
||||
"btc": "2.39434245",
|
||||
"sum": "5.97908049"
|
||||
},
|
||||
{
|
||||
"price": "0.0008322",
|
||||
"btc": "2.31112332",
|
||||
"sum": "8.29020381"
|
||||
},
|
||||
{
|
||||
"price": "0.00081524",
|
||||
"btc": "2.66443099",
|
||||
"sum": "10.9546348"
|
||||
},
|
||||
{
|
||||
"price": "0.00080303",
|
||||
"btc": "1.79223619",
|
||||
"sum": "12.74687099"
|
||||
},
|
||||
{
|
||||
"price": "0.00077858",
|
||||
"btc": "1.61051825",
|
||||
"sum": "14.35738924"
|
||||
},
|
||||
{
|
||||
"price": "0.00075508",
|
||||
"btc": "0.71279599",
|
||||
"sum": "15.07018523"
|
||||
},
|
||||
{
|
||||
"price": "0.00073013",
|
||||
"btc": "0.89425132",
|
||||
"sum": "15.96443655"
|
||||
},
|
||||
{
|
||||
"price": "0.00071941",
|
||||
"btc": "1.85521536",
|
||||
"sum": "17.81965191"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,8 +1,17 @@
|
||||
{
|
||||
"home": {
|
||||
"url": "",
|
||||
"title": "Home",
|
||||
"icon": "home"
|
||||
"dashboards": {
|
||||
"title": "Dashboards",
|
||||
"icon": "home",
|
||||
"children": {
|
||||
"default": {
|
||||
"url": "index.html",
|
||||
"title": "Default"
|
||||
},
|
||||
"crypto": {
|
||||
"url": "dashboard-crypto.html",
|
||||
"title": "Crypto"
|
||||
}
|
||||
}
|
||||
},
|
||||
"base": {
|
||||
"title": "Interface",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign icon = include.icon | default: 'dots-vertical' %}
|
||||
<div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<a href="#" class="btn btn-action" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
{% else %}
|
||||
parentHeightOffset: 0,
|
||||
toolbar: {
|
||||
show: false,
|
||||
show: {% if data.toolbar %}true{% else %}false{% endif %},
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
@@ -130,6 +130,11 @@
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
|
||||
{% elsif chart-type == 'candlestick' %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{% if serie.candlestick-data %}{% for candle in serie.candlestick-data %}{x: {{ candle.x }}, y: [{{ candle.y | join: ', ' }}]}{% unless forloop.last %}, {% endunless %}{% endfor %}{% else %}{{ serie.data | join: ', ' }}{% endif %}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% else %}series: [{% for serie in data.series %}{
|
||||
name: "{{ serie.name }}",
|
||||
data: [{{ serie.data | join: ', ' }}]
|
||||
@@ -211,6 +216,11 @@
|
||||
text: '{{ data.y-title | escape }}'
|
||||
}
|
||||
{% endif %}
|
||||
{% if data.y-tooltip %}
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
{% endif %}
|
||||
},
|
||||
{% endunless %}
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
||||
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
||||
{% assign segmented-hover = include.hover | default: "" %}
|
||||
{% assign segmented-default = include.default | default: 1 | plus: 0 %}
|
||||
|
||||
{% assign segmented-items-count = segmented-items | size %}
|
||||
{% assign segmented-icons-count = segmented-icons | size %}
|
||||
@@ -13,10 +14,11 @@
|
||||
{% for i in (1..segmented-all-count) %}
|
||||
{% assign index = forloop.index | append: "" %}
|
||||
{% assign disabled = segmented-disabled | contains: index %}
|
||||
{% assign is-default = forloop.index == segmented-default %}
|
||||
|
||||
{% if include.name %}<input type="radio" class="nav-link-input" name="segmented" id="segmented-{{include.name }}-{{ index }}" {% if forloop.index == 1 %}checked{% endif %} />{% endif %}
|
||||
{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}
|
||||
|
||||
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if forloop.index == 1 %}{% unless include.name %} active{% endunless %}{% endif %}{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if forloop.index == 1 %} aria-current="page"{% endif %}>
|
||||
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
|
||||
{% if segmented-icons[forloop.index0] %}
|
||||
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user