|
|
{% extends "base.html" %} {% load static %} {% block header %} {% endblock %} {% block content %} <section class="container" id="root"> <div class="columns">
<div class="column is-8"> <div class="box content"> <article class="post"> <h4>Learning Curve</h4> <div class="media"> <div class="media-content"> <div class="content"> <canvas id="myChart"></canvas> </div> </div> </div> </article> </div> </div>
<div class="column is-4"> <div class="box content"> <article class="post"> <h4>Stats</h4> <div class="media"> <div class="media-content"> <div class="content"> <canvas id="myPie"></canvas> </div> </div> </div> </article> </div> </div> </div>
<div class="columns" style="margin-top:-1rem;"> <div class="column is-8"> <div class="box content"> <article class="post"> <h4>Label Management</h4> <div class="media"> <div class="media-content"> <div class="content">
<div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label">Label name</label> </div> <div class="field-body"> <div class="field"> <p class="control is-expanded has-icons-left"> <input class="input" type="text" placeholder="Label name" required> <span class="icon is-small is-left"> <i class="fas fa-tag"></i> </span> </p> </div> </div> </div> <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label">Shortcut</label> </div> <div class="field-body"> <div class="field is-narrow"> <div class="control"> <div class="select is-fullwidth"> <select> <option>Business development</option> <option>Marketing</option> <option>Sales</option> </select> </div> </div> </div> </div> </div>
<div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label">Background Color</label> </div> <div class="field-body"> <div class="field"> <div class="control"> <input type="color" value="#209cee"> </div> </div> </div> </div> <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label">Text Color</label> </div> <div class="field-body"> <div class="field"> <div class="control"> <input type="color" value="#ffffff"> </div> </div> </div> </div> <div class="field is-horizontal"> <div class="field-label"> <!-- Left empty for spacing --> </div> <div class="field-body"> <div class="field"> <div class="control"> <button class="button is-primary"> Add </button> </div> </div> </div> </div>
<div class="field is-grouped"> <p class="control is-expanded"> <input class="input" type="text" placeholder="Label name" v-model="newLabel" required> </p> <p class="control"> <input class="input" type="text" placeholder="Shortcut key" v-model="newShortcut" required> </p> <p class="control"> <a class="button is-primary" v-on:click="addLabel()"> Add </a> </p> </div> <table class="table"> <thead> <tr> <th> Id </th> <th>Label name</th> <th>Shortcut key</th> <th>Deletion</th> </tr> </thead> <tbody> <tr v-for="(label, index) in labels"> <th>[[ index + 1 ]]</th> <td>[[ label.text ]]</td> <td>[[ label.shortcut ]]</td> <td><a class="button is-danger is-small" v-on:click="removeLabel(index)">Delete</a></td> </tr> </tbody> </table> </div> </div> </div> </article> </div> </div>
<div class="column is-4"> <div class="box content"> <article class="post"> <h4>Data Management</h4> <div class="media"> <div class="media-content"> <div class="content"> <p>Data upload</p> <div class="file has-name is-right is-fullwidth"> <label class="file-label"> <input class="file-input" type="file" name="resume" ref="file" v-on:change="handleFileUpload()" /> <span class="file-cta"> <span class="file-icon"> <i class="fas fa-upload"></i> </span> <span class="file-label"> Upload </span> </span> <span class="file-name"> [[ file_name ]] </span> </label> </div> <br> <p>Data Download</p> <a class="button" href="{% url 'download' project.id %}"> <span class="icon"> <i class="fas fa-download"></i> </span> <span>Download</span> </a> </div> </div> </div> </article> </div> </div> </div>
</section> <script type="text/javascript" src="{% static 'js/project_admin.js' %}"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <script type="text/javascript"> var ctx = document.getElementById('myChart').getContext('2d'); var ctx1 = document.getElementById('myPie');
var pie = new Chart(ctx1, { type: 'doughnut', data: { datasets: [{ data: [10, 20], backgroundColor: ["#50dc64", "#3399ff"], }], labels: [ 'Labeled', 'Unlabeled' ] } });
var chart = new Chart(ctx, { // The type of chart we want to create type: 'line',
// The data for our dataset data: { labels: [50, 100, 150, 200, 250, 300], datasets: [{ label: "training", backgroundColor: 'rgb(80, 220, 100)', borderColor: 'rgb(80, 220, 100)', //data: [72, 83, 86, 87, 88, 88.5], data: [94, 93.5, 93, 93, 93, 92.5], fill: false, }, { label: "validation", backgroundColor: 'rgb(51, 153, 255)', borderColor: 'rgb(51, 153, 255)', data: [72, 80, 83, 85, 86, 86.5], fill: false, } ] },
// Configuration options go here options: { legend: { display: true, position: 'right' }, scales: { yAxes: [{ scaleLabel: { display: true, labelString: 'Accuracy' } }], xAxes: [{ scaleLabel: { display: true, labelString: 'Number of training samples' } }], } } }); </script> {% endblock %}
|