AIL-framework/var/www/templates/correlation/metadata_card_cryptocurrency.html

<div class="card my-3">
	<div class="card-header" style="background-color:#d9edf7;font-size: 15px">
		<h4 class="text-secondary">{{ dict_object["correlation_id"] }} :</h4>
		<ul class="list-group mb-2">
			<li class="list-group-item py-0">
				<div class="row">
					<div class="col-md-10">
						<table class="table">
							<thead>
								<tr>
									<th>Object type</th>
									<th>type</th>
									<th>First seen</th>
									<th>Last seen</th>
									<th>Nb seen</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>{{ dict_object["object_type"] }}</td>
									<td>
										<svg height="26" width="26">
											<g class="nodes">
												<circle cx="13" cy="13" r="13" fill="orange"></circle>
												<text x="13" y="13" text-anchor="middle" dominant-baseline="central" class="graph_node_icon {{ dict_object["metadata_card"]["icon"]["style"] }}" font-size="16px">{{ dict_object["metadata_card"]["icon"]["icon"] }}</text>
											</g>
										</svg>
										{{ dict_object["metadata"]["type_id"] }}
									</td>
									<td>{{ dict_object["metadata"]['first_seen'] }}</td>
									<td>{{ dict_object["metadata"]['last_seen'] }}</td>
									<td>{{ dict_object["metadata"]['nb_seen'] }}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="col-md-1">
						<div id="sparkline"></div>
					</div>
				</div>
			</li>
		</ul>
		{% if dict_object["metadata"]["type_id"] == "bitcoin" %}
			{% if "related_btc" in dict_object["metadata_card"] %}
				<div>
					<table class="table">
						<thead>
							<tr>
								<th>Numbers of transactions</th>
								<th>Total received</th>
								<th>Total sent</th>
								<th>Balance</th>
								<th>Inputs address seen in AIL</th>
								<th>Outputs address seen in AIL</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>{{ dict_object["metadata_card"]["related_btc"]["n_tx"] }}</td>
								<td>{{ dict_object["metadata_card"]["related_btc"]["total_received"] }}</td>
								<td>{{ dict_object["metadata_card"]["related_btc"]["total_sent"] }}</td>
								<td>{{ dict_object["metadata_card"]["related_btc"]["final_balance"] }}</td>
								<td>
									{% for btc_addr in dict_object["metadata_card"]["related_btc"]["btc_in"] %}
										<a target="_blank" href="{{ url_for('correlation.show_correlation') }}?type=cryptocurrency&subtype=bitcoin&id={{ btc_addr }}">{{ btc_addr }}</a>
									{% endfor %}
								</td>
								<td>
									{% for btc_addr in dict_object["metadata_card"]["related_btc"]["btc_out"] %}
										<a target="_blank" href="{{ url_for('correlation.show_correlation') }}?type=cryptocurrency&subtype=bitcoin&id={{ btc_addr }}">{{ btc_addr }}</a>
									{% endfor %}
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			{% else %}
				<a class="btn btn-secondary" href="{{ url_for('correlation.show_correlation') }}?type=cryptocurrency&subtype=bitcoin&id={{ dict_object['correlation_id'] }}&related_btc=True">Expand Bitcoin address</a>
			{% endif %}
		{% endif %}

		{% with obj_type='cryptocurrency', obj_id=dict_object['correlation_id'], obj_subtype=dict_object["metadata"]["type_id"] %}
			{% include 'modals/investigations_register_obj.html' %}
		{% endwith %}
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#investigations_register_obj_modal">
			<i class="fas fa-microscope"></i> Investigations
		</button>

	</div>
</div>

<script src="{{ url_for('static', filename='js/d3/sparklines.js')}}"></script>
<script>
	sparkline("sparkline", {{ dict_object["metadata_card"]["sparkline"] }}, {});
</script>

<script>
function create_line_chart(id, url){

	var width = 900;
	var height = Math.round(width / 4);

	var margin = {top: 20, right: 55, bottom: 50, left: 40};

	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().rangeRound([height, 0]);

	var xAxis = d3.axisBottom(x);
	var yAxis = d3.axisLeft(y);

	var parseTime = d3.timeParse("%Y-%m-%d");

	var line = d3.line()
							.x(function(d) {
          			return x(d.date);
        			}).y(function(d) {
          			return y(d.value);
        			});

	var svg_line = d3.select('#'+id).append('svg')
				.attr("id", "graph_div")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.append('g')
						.attr('transform', "translate("+ margin.left +","+ margin.top +")");

	var div = d3.select('body').append('div')
				.attr('class', 'tooltip')
				.style('opacity', 0);

	//add div tooltip

d3.json(url)
	.then(function(data){

		data.forEach(function(d) {
			d.date_label = d.date;
			d.date = parseTime(d.date);
			d.value = +d.value;
		});

		// fit the data
		x.domain(d3.extent(data, function(d) { return d.date; }));
		//x.domain(data.map(function (d) { return d.date; })); //E
		y.domain([0, d3.max(data, function(d){ return d.value ; })]);

		//line
		svg_line.append("path")
				.data([data])
				.attr("class", "line_graph")
				.attr("d", line);

		// add X axis
		svg_line.append("g")
		    .attr("transform", "translate(0," + height + ")")
		    .call(d3.axisBottom(x))
				.selectAll("text")
					.style("text-anchor", "end")
					.attr("transform", "rotate(-45)" );

		// Add the Y Axis
		svg_line.append("g")
		    .call(d3.axisLeft(y));

		//add a dot circle
    svg_line.selectAll('dot')
				.data(data).enter()
				.append('circle')
						.attr('r', 2)
							.attr('cx', function(d) { return x(d.date); })
							.attr('cy', function(d) { return y(d.value); })

            	.on('mouseover', function(d) {
	            	div.transition().style('opacity', .9);
	            	div.html('' + d.date_label+ '<br/>' + d.value).style('left', (d3.event.pageX) + 'px')
								.style("left", (d3.event.pageX) + "px")
								.style("top", (d3.event.pageY - 28) + "px");
          		})
            	.on('mouseout', function(d)
          			{
            			div.transition().style('opacity', 0);
          			});

	});
}
</script>