expense_tracker-1.2.1/templates/income-expense-reports.html.twig

{#
/**
 * @file
 * Default theme implementation for a meter.
 *
 * Available variables:
 * - display_value: The textual representation of the meter bar.
 * - form: One or more forms to which the <meter> element belongs; multiple
 *   forms separated by spaces.
 * - high: A number specifying the range that is considered to be a high value.
 * - low: A number specifying the range that is considered to be a low value.
 * - max: A number specifying the maximum value of the range.
 * - min: A number specifying the minimum value of the range.
 * - optimum: A number specifying what value is the optimal value for the gauge.
 * - value: A number specifying the current value of the gauge.
 * - percentage: A number specifying the current percentage of the gauge.
 * - attributes: HTML attributes for the containing element.
 * - choice: The choice of a et_transaction.
 *
 * @see template_preprocess()
 * @see template_preprocess_region()
 *
 * @ingroup themeable
 */
 #}
{#  {% set is_current_selection_class = is_current_selection ? 'is-current-selection' : 'not-current-selection' %}
 	<dt class="choice-title {{ is_current_selection_class }}">{{ choice }}</dt>
 	<dd class="choice-result {{ is_current_selection_class }}">
 		<div{{ attributes }}>
 		<div style="width: {{ percentage }}%" class="foreground"></div>
 	</div>

 	{% if display_value %}
 		<div class="percent">{{ display_value }}</div>
 	{% endif %}
 </dd>
 #}
 {# {{ reports_data }} #}

 <div class="reports-container">
{#  	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3> Last 7 days</h3>
 			<div id="container11" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 		<div class="reports-col reports-col-complementary" role="complementary">
 			<h3>This week</h3>
 			<div id="container112" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>Last 30 days</h3>
 			<div id="container12" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3> Last week</h3>
 			<div id="container13" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>This month</h3>
 			<div id="container14" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>Last month</h3>
 			<div id="container15" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>This Quarter</h3>
 			<div id="container16" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>Last Quarter</h3>
 			<div id="container17" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>This year</h3>
 			<div id="container18" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div>
 	<div class="reports-layout">
 		<div class="reports-col reports-col-main">
 			<h3>Last year</h3>
 			<div id="container19" class="et-reports" data-report-data="{{ reports_data }}"></div>
 		</div>
 	</div> #}


 	<section class="flex-container">
 		<div class="tab-container">
 			<!--  Tab Buttons  -->
 			<div class="report-tabs">
 				{# <button class="tab active">Intro</button>
 				<button class="tab non-active">Benefits</button>
 				<button class="tab non-active">Disadvantages</button>
 				<button class="tab non-active">Conclusion</button> #}

 				{# {% if tabs is not empty %}
 					{% for key,tab in tabs %}
 						<a href="?filter={{ key }}&type=income" class="tab {{ tab.class }}">{{ tab.title }}</a>
 					{% endfor %}
 				{% endif %} #}


 			</div>
 			<!-- Tab Content  -->
 			<div class="tab-content">
 				{# <h2>Introduction</h2> #}
 				<div class="reports-layout">
 					<div class="reports-col reports-col-main">
 						<h3>Reports for {{ reports_data.title }} ({{ other_data.dates.start }} - {{ other_data.dates.end }})</h3>
 						<div id="{{ reports_data.id }}" class="et-reports" data-report-categories="{{ reports_data.categories|json_encode }}" data-report-income="{{ reports_data.series.income|json_encode }}" data-report-expense="{{ reports_data.series.expense|json_encode }}" data-report-type="{{ other_data.report_type }}"></div>
 					</div>
 				</div>


 				<div class="reports-layout">
 					<div class="reports-col reports-col-main">
 						<h3>All Income</h3>
 						<div id="" class="highchart_container et-reports" data-report-categories="{{ other_data.categories.income|json_encode }}" data-report-series="{{ other_data.series.income|json_encode }}" data-report-type="income"></div>
 					</div>
 					<div class="reports-col reports-col-complementary" role="complementary">
 						<h3>All Expense</h3>
 						<div id="" class="highchart_container et-reports" data-report-categories="{{ other_data.categories.expense|json_encode }}" data-report-series="{{ other_data.series.expense|json_encode }}" data-report-type="expense"></div>
 					</div>
 				</div>

 				<div class="reports-layout">
 					<div class="reports-col reports-col-main">
 						<h3>Income and expense</h3>
 						<div id="piechart" data-total-income-amount="{{ other_data.total_amounts.total_income_amount }}" data-total-expense-amount="{{ other_data.total_amounts.total_expense_amount }}"></div>
 					</div>
 					{# <div class="reports-col reports-col-complementary" role="complementary">
 						<h3>This week</h3>
 						<div id="piechart-all-cat"></div>
 					</div> #}
 				</div>


 			</div>
 		</div>
 	</section>


 </div>