Think-IT/index.html at master · brookk16/Think-IT · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="Think-IT, data visualisation, revenue statistics, leads, appointments">
    <meta name="description" content="Think-IT monthly data visualisation dashboard, concerning: sales revenue, losses, lead and appointments">
    <title>Think-IT</title>

    <!--- CSS ---------->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <link rel="stylesheet" href="assets/css/dc.min.css" type="text/css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous" />
    <link href="https://fonts.googleapis.com/css?family=Pacifico|Archivo+Black" rel="stylesheet" />
    <link rel="stylesheet" href="assets/css/main.css" type="text/css" />
</head>

<body>

    <nav class="navbar navbar-default container-fluid">
        <div class="row align-items-center relative">
            <div class="logo-header col-xs-10 col-sm-4 col-md-4 col-lg-4 col-xl-4 "><a href="index.html" alt="logo link to Think-IT homepage" class="logo-link" role="link">Think-IT<i class="far fa-lightbulb"></i></a></div>
            <div class="col-xs-10 col-sm-4 col-md-4 offset-md-1 col-lg-5 offset-lg-1 col-xl-5 offset-xl-1" id="month"></div>
            <button onclick="javascript:dc.filterAll(); dc.renderAll()" class="reset-button-style col-xs-9 col-sm-4 col-md-4 offset-md-1 col-lg-2 col-xl-2" role="button" value="reset" type="reset">
               Reset All<i class="fas reset fa-redo"></i>
            </button>
        </div>
    </nav>

    <main>

        <section class="section">
            <div class="container-fluid">
                <div class="row">

                    <div class="box-selector col-xs-12 col-sm-12 col-md-6 col-lg-5 col-xl-4">
                        <h5 class="store-selector">Store Selector
                            <i class="fas fa-question-circle" title="You can select a location below to only show the data relevant to that store. Beside the store is the number of employees currently working there."></i>
                        </h5>
                        <div aria-label="Store selector" id="store-location-selector"></div>
                    </div>

                    <div class="box col-sm-7 col-md-5 col-lg-3 col-xl-3">
                        <h5>Average leads to appointments per month
                            <i class="inline fas fa-question-circle" title="Here is the average amount of leads that are converted to appointments, for the selected store, for the current month. If no store is selected, the average for all employees is shown. This was calculated using the following formula: (total number of appointments &divide total number of leads) &times 100"></i>
                        </h5>
                        <div class="totals spacing-for-number-displays" id="leads-to-appts-by-month"></div>
                    </div>

                    <div class="box col-sm-5 col-md-4 col-lg-3 col-xl-2">
                        <h5>Average percent lost per month
                            <i class="fas fa-question-circle" title="Here is the average amount of profit that is lost, for the selected store, for the current month.'Lost profit' is considered to be any customer revenue that is lost. For example: customer returns, salesperson error, e.t.c. This was calculated using the following formula: (total amount lost &divide total amount earned) &times 100"></i>
                        </h5>
                        <div class="totals spacing-for-number-displays" id="percent-lost-by-month"></div>
                    </div>

                    <div class="box col-sm-6 col-md-5 col-lg-4 col-xl-3">
                        <h5>Total earned per month</h5>
                        <div class="totals" id="earn-by-month"></div>
                    </div>

                    <div class="box col-sm-5 col-md-6 col-lg-4 col-xl-3">
                        <h5>Total lost per month</h5>
                        <div class="totals" id="lost-by-month"></div>
                    </div>

                    <div class="box col-sm-5 col-md-4 col-lg-3 col-xl-3">
                        <h5>Total leads per month</h5>
                        <div class="totals" id="leads-by-month"></div>
                    </div>

                    <div class="box col-sm-5 col-md-4 col-lg-3 col-xl-3">
                        <h5>Total appointments per month</h5>
                        <div class="totals spacing-for-number-displays" id="appts-by-month"></div>
                    </div>

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

        <section class="section">
            <div class="container-fluid">
                <div class="row">

                    <div class="container-box-earnings large-chart-resizing col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                        <h5>Average amount gained per store
                            <i class="fas fa-question-circle" title="This chart compares the average amount earned within each store, for the current month. This was calculated by subtracting each employee's total amount earned by their total amount lost, then dividing by the amount of employees in the store"></i>
                        </h5>
                        <div id="amount-gained-lost-per-store"></div>
                    </div>

                    <div class="container-box-earnings pie-chart-sizing col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2">
                        <h5>Stores losing less than 25%
                            <i class="fas fa-question-circle" title="This chart compares stores and displays their average amount lost. If the stores segment is green they are losing less than the target maximum of 25%. If it's red, then they are losing more than 25% of their earnings. The percent lost was calculated using the formula: (total amount lost &divide total amount earned) &times 100"></i>
                        </h5>
                        <div class="legend"><i class="fas fa-check"></i>Pass<i class="fas fa-times"></i>Fail</div>
                        <div id="percent-lost"></div>
                    </div>

                    <div class="container-box-leads large-chart-resizing order-3 col-xs-12 col-sm-12 col-md-2 col-lg-9 col-xl-6">
                        <h5>Total leads and appts per store
                            <i class="fas fa-question-circle" title="This chart compares the total amount of leads and appointments gathered in each store."></i>
                        </h5>
                        <div id="leads-and-appts-per-store"></div>
                    </div>

                    <div class="container-box-leads pie-chart-sizing col-xs-12 col-sm-12 col-md-5 col-lg-2 col-xl-2">
                        <h5>Stores converting at least 40% of leads to appointments
                            <i class="fas fa-question-circle" title="This chart compares each store's conversion average of leads to appointments. A store's segement will be green if they are converting at least 40% of their leads to appointments. If the segment is red, they are converting less than 40% of their leads to appointments."></i>
                        </h5>
                        <div class="legend"><i class="fas fa-check"></i>Pass<i class="fas fa-times"></i>Fail</div>
                        <div id="leads-to-appts"></div>
                    </div>

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

    </main>
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="bottomnav col-xs-1 col-sm-1 col-md-5 col-lg-4 col-xl-4 align-self-start flex-container" id="myBottomNav">
                    <a href="about.html" class="nav-link" role="link">About</a>
                    <a href="privacy.html" class="nav-link" role="link">Privacy</a>
                    <a href="index.html" class="nav-link" role="link">Contact</a>
                    <a href="javascript:void(0);" class="icon" onclick="hamburgerIcon()">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
                <span class="logo-footer col-xs-3 col-sm-5 col-md-6 col-lg-6 col-xl-6"><a href="index.html" class="logo-link" role="link">Think-IT<i class="far fa-lightbulb"></i></a></span>
            </div>
        </div>

    </footer>

</body>

<!-- JS --------->

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/d3.min.js"></script>
<script type="text/javascript" src="assets/js/crossfilter.min.js"></script>
<script type="text/javascript" src="assets/js/dc.min.js"></script>
<script type="text/javascript" src="assets/js/queue.min.js"></script>
<script type="text/javascript" src="assets/js/graph.js"></script>
<script type="text/javascript" src="assets/js/month.js"></script>
<script type="text/javascript" src="assets/js/hamburger.js"></script>
<script type="text/javascript" src="assets/js/hover.js"></script>

</html>