Widgets

Custom Widgets
Order Statistics
Order Statistics
35.70k Total Sales
7,223 Total Orders
29% Weekly
  • Daily needs Foot, grocery item, snack
    72.5k
  • Digital Internet, Netflix, Spotify
    12.5k
  • Fashion T-shirt, shoes, bags
    23.8k
  • Vacation Traveling, cinema, staycation
    82.0k
Total Balance $602.10
$56
Expenses This Week $39 less than last week
Customer Ratings
4.5
+5.0 Points from last month
Documentation
Starter Kit Codes
Starter Kit Code 
<div class="card card-widget-custom card-widget-order-statistics">
	<div class="card-header">
		<h5 class="card-title">Order Statistics</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					{% for action in actions %}
						<li><a class="dropdown-item" href="{{ action.link }}">{{ action.text }}</a></li>
					{% endfor %}
				</ul>
			</div>
		</div>
	</div>
	<div class="card-body">
		<span class="card-sub-title text-dark-3">35.70k Total Sales</span>

		<div class="d-flex align-items-center justify-content-between my-2">
			<div class="d-flex flex-column">
				<strong class="h4 mb-1">7,223</strong>
				<span class="text-dark-3">Total Orders</span>
			</div>
			<div class="chart-component chart-pie-component" data-chart-mode="pie" data-base-id="chart-custom-1">
				<div class="chart-container" id="chart-custom-1-chart-container"></div>
				<div class="chart-progress-value">
					<strong>29%</strong>
					<span class="text-dark-3">Weekly</span>
				</div>
			</div>
		</div>

		<ul class="list-group">
			<li class="list-group-item">
				<div class="d-flex align-items-center">
					<div class="icon bg-brand-primary-1">
						<i class="ic ic-pizza white"></i>
					</div>
					<div class="d-flex flex-column ms-2 ps-1">
						<strong>Daily needs</strong>
						<small class="text-dark-3">Foot, grocery item, snack</small>
					</div>
					<div class="ms-auto">
						<strong>72.5k</strong>
					</div>
				</div>
			</li>
			<li class="list-group-item">
				<div class="d-flex align-items-center">
					<div class="icon bg-brand-primary-2">
						<i class="ic ic-ticket white"></i>
					</div>
					<div class="d-flex flex-column ms-2 ps-1">
						<strong>Digital</strong>
						<small class="text-dark-3">Internet, Netflix, Spotify</small>
					</div>
					<div class="ms-auto">
						<strong>12.5k</strong>
					</div>
				</div>
			</li>
			<li class="list-group-item">
				<div class="d-flex align-items-center">
					<div class="icon bg-brand-secondary-2">
						<i class="ic ic-tshirt white"></i>
					</div>
					<div class="d-flex flex-column ms-2 ps-1">
						<strong>Fashion</strong>
						<small class="text-dark-3">T-shirt, shoes, bags</small>
					</div>
					<div class="ms-auto">
						<strong>23.8k</strong>
					</div>
				</div>
			</li>
			<li class="list-group-item">
				<div class="d-flex align-items-center">
					<div class="icon bg-brand-primary-3">
						<i class="ic ic-suitcase-rolling white"></i>
					</div>
					<div class="d-flex flex-column ms-2 ps-1">
						<strong>Vacation</strong>
						<small class="text-dark-3">Traveling, cinema, staycation</small>
					</div>
					<div class="ms-auto">
						<strong>82.0k</strong>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

{# block pluginScripts  #}
{% block pluginScripts %}
	<!-- Include the ECharts file -->
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
{% endblock %}
{# end block pluginScripts  #}

{# block appScripts  #}
{% block appScripts %}
	<!-- app-charts Js -->
	<script type="text/javascript">
		if( typeof chartData == 'undefined' )
			chartData = {};
		chartData['chart-custom-1'] = [
			{
				'name'	: 'Daily needs',
				'value'	: 72500,
				'itemStyle'	: {
					'color'	: '#1F58D4'
				},
			},
			{
				'name'	: 'Digital',
				'value'	: 12500,
				'itemStyle'	: {
					'color'	: '#93B1F4'
				},
			},
			{
				'name'	: 'Fashion',
				'value'	: 23800,
				'itemStyle'	: {
					'color'	: '#F9BD29'
				},
			},
			{
				'name'	: 'Vacation',
				'value'	: 82000,
				'itemStyle'	: {
					'color'	: '#001F63'
				},
			},
		];

		if( typeof chartOptions == 'undefined' )
			chartOptions = {};
		chartOptions['chart-custom-1'] = {
			'series'	: [
				{
					'radius'		: ['85%', '100%'],
					'startAngle'	: 90,

					'silent'		: true,
				}
			]
		};

		if( typeof chartTypes == 'undefined' )
			chartTypes = {};
		chartTypes['chart-custom-1'] = 'pie';
	</script>
	<script type="text/javascript" src="assets/js/app-e-charts-pie.min.js"></script>
{% endblock %}
{# end block appScripts  #}
Starter Kit Code 
<div class="card card-widget-custom card-widget-income-expenses-profit">
	<div class="card-header">
		<div class="card-header-actions">
			<ul class="nav nav-pills card-tabs">
				<li class="nav-item">
					<a class="nav-link active" href="javascript:void()">Income</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " href="javascript:void()">Expenses</a>
				</li>
				<li class="nav-item">
					<a class="nav-link " href="javascript:void()">Profit</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="card-body">
		<div class="d-flex align-items-center my-2">
			<div class="d-flex bg-dark-6 p-2 rounded-3">
				<i class="ic small ic-wallet primary-1"></i>
			</div>
			<div class="d-flex flex-column ms-2 ps-1">
				<small class="text-dark-3">Total Balance</small>
				<strong>$602.10</strong>
			</div>
		</div>

		<div class="chart-component chart-xy-component mb-3" data-chart-mode="xy" data-base-id="chart-custom-2">
			<div class="chart-container" id="chart-custom-2-chart-container" style="height: 191px;"></div>
		</div>

		<div class="d-flex align-items-center justify-content-center p-2">
			<div class="chart-component chart-pie-component" data-chart-mode="pie" data-base-id="chart-custom-3">
				<div class="chart-container" id="chart-custom-3-chart-container"></div>
				<div class="chart-progress-value">
					<strong>$56</strong>
				</div>
			</div>
			<div class="d-flex flex-column ms-2 ps-1">
				<strong>Expenses This Week</strong>
				<small class="text-dark-3">$39 less than last week</small>
			</div>
		</div>

	</div>
</div>

{# block pluginScripts  #}
{% block pluginScripts %}
	<!-- Include the ECharts file -->
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
{% endblock %}
{# end block pluginScripts  #}

{# block appScripts  #}
{% block appScripts %}
	<!-- app-charts Js -->
	<script type="text/javascript">
		if (typeof chartData == 'undefined') 
			chartData = {};
		chartData['chart-custom-2'] = [{
			"date"  : "Jan",
			"total" : 402
		}, {
			"date"  : "Feb",
			"total" : 264
		}, {
			"date"  : "Mar",
			"total" : 356
		}, {
			"date"  : "Apr",
			"total" : 238
		}, {
			"date"  : "May",
			"total" : 285
		}, {
			"date"  : "Jun",
			"total" : 197
		}, {
			"date"  : "Jul",
			"total" : 367
		}];
		if (typeof chartOptions == 'undefined') 
			chartOptions = {};
		chartOptions['chart-custom-2'] = {
			"grid": {
				"left"  : -10,
				"right" : -10
			},
			"xAxis": {
				"type"	  : "category",
				"dataKey"   : "date",
				"axisLine"  : {
					"show"  : false
				},
				"splitLine"			 : {
					"show"			  : true,
					"alignWithLabel"	: true,
					"lineStyle"		 : {
						"color" : "#E6E8EC"
					}
				}
			},
			"yAxis" : {
				"show"  : false,
				"min"   : 0,
				"max"   : 500,
				"axisLabel" : {
					"show"  : false
				}
			},
			"series"	: [{
				"dataKey"   : "total",
				"name"	  : "Total",
				'smooth'	: true,
				"itemStyle" : {
					"color"	 : "rgba(31, 88, 212, 1)"
				},
				"lineStyle" : {
					"color"	 : "rgba(31, 88, 212, 1)",
					"width"	 : 2
				},
				"areaStyle" : {
					"color"	 : "rgba(31, 88, 212, 1)",
					"opacity"   : 0.08
				}
			}]
		};
	</script>
	<script type="text/javascript" src="assets/js/app-e-charts-xy.min.js"></script>

	<script type="text/javascript">
		if (typeof chartTypes == 'undefined') 
			chartTypes = {};
		chartTypes['chart-custom-3'] = "progress";
		
		if (typeof chartProgressDetails == 'undefined') 
			chartProgressDetails = {};
		chartProgressDetails['chart-custom-3'] = {
			"name"  : "Expenses",
			"value" : 45,
			"color" : "#1F58D4",
			"thickness" : 3
		};
	</script>
	<script type="text/javascript" src="assets/js/app-e-charts-pie.min.js"></script>
{% endblock %}
{# end block appScripts  #}
Starter Kit Code 
<div class="card card-widget-custom card-widget-customer-ratings">
	<div class="card-header">
		<h5 class="card-title">Customer Ratings</h5>

		<div class="card-header-actions">
			<div class="btn-group card-action-dots">
				<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
					<i class="ic ic-three-dots"></i>
				</button>
				<ul class="dropdown-menu">
					<li><a class="dropdown-item" href="javascript:void()">Action 1</a></li>
					<li><a class="dropdown-item" href="javascript:void()">Action 2</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="card-body">
			
		<div class="d-flex flex-column">
			
			{# include components/rating-reviews  #}
			{% include "../../components/rating-reviews.twig", with {
				'variation'	: 'large',

				'score'		: 4.5
			} %}

			<div class="d-flex mt-1">
			 	<span class="badge rounded-pill text-bg-brand-primary-1">+5.0</span>
				<span class="text-md text-dark-3 ms-2">Points from last month</span>
			</div>
		</div>

		<div class="chart-component chart-xy-component mt-4" data-chart-mode="xy" data-base-id="chart-custom-4">
			<div class="chart-container" id="chart-custom-4-chart-container" style="height: 212px;"></div>
		</div>

	</div>
</div>

{# block pluginScripts  #}
{% block pluginScripts %}
	<!-- Include the ECharts file -->
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
{% endblock %}
{# end block pluginScripts  #}

{# block appScripts  #}
{% block appScripts %}
	<!-- app-charts Js -->
	<script type="text/javascript">
		if (typeof chartData == 'undefined') 
			chartData = {};
		chartData['chart-custom-4'] = [{
			"date"	: "Jan",
			"total"	: 402
		}, {
			"date"	: "Feb",
			"total"	: 264
		}, {
			"date"	: "Mar",
			"total"	: 356
		}, {
			"date"	: "Apr",
			"total"	: 238
		}, {
			"date"	: "May",
			"total"	: 285
		}, {
			"date"	: "Jun",
			"total"	: 197
		}, {
			"date"	: "Jul",
			"total"	: 367
		}];
		if (typeof chartOptions == 'undefined') 
			chartOptions = {};
		chartOptions['chart-custom-4'] = {
			"grid": {
				"left"	: -10,
				"right"	: -10
			},
			"xAxis": {
				"type"		: "category",
				"dataKey"	: "date"
			},
			"yAxis"	: {
				"min"	: 0,
				"max"	: 450,

				"interval" : 150,

				"axisLabel"	: {
					"show"	: false,
				}
			},
			"tooltip"	: {
				"axisPointer"	: {
					"lineStyle"	: {
						"opacity"	: 0,
					}
				}
			},
			"series"	: [{
				"symbol"		: "emptyCircle",
				"symbolSize"	: 16,
 
				"emphasis"		: {
					"itemStyle"	: {
						"color"		: "#1F58D4",
						"borderColor"	: "#fff",
						"borderWidth"	: 2,
						"shadowColor"	: "rgba(0, 0, 0, 0.12)",
						"shadowBlur"	: 16,
						"shadowOffsetX"	: 0,
						"shadowOffsetY"	: 4,
					}
				},

				"dataKey"	: "total",
				"name"		: "Total",
				"itemStyle"	: {
					"color"		: "rgba(31, 88, 212, 1)"
				},
				"lineStyle"	: {
					"color"		: "rgba(31, 88, 212, 1)",
					"width"		: 2
				},
				"areaStyle"	: {
					"color"		: "rgba(31, 88, 212, 1)",
					"opacity"	: 0.08
				}
			}]
		};
	</script>
	<script type="text/javascript" src="assets/js/app-e-charts-xy.min.js"></script>
{% endblock %}
{# end block appScripts  #}