update chartjs usage
This commit is contained in:
parent
7d94501858
commit
cea00c7e8c
SSH key fingerprint:
SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
5 changed files with 272 additions and 276 deletions
|
|
@ -4,266 +4,13 @@
|
|||
{% block title %}CSP ROI Calculator{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.calculator-section {
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
|
||||
{% endblock %}
|
||||
|
||||
.input-group-custom {
|
||||
margin-bottom: 1rem;
|
||||
position: relative; /* Ensure proper stacking context */
|
||||
}
|
||||
|
||||
.input-group-custom label {
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ensure input groups don't interfere with tooltips */
|
||||
.input-group {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slider-container {
|
||||
position: relative;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 5px;
|
||||
background: #ddd;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #007bff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #007bff;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.scenario-card {
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.scenario-card.active {
|
||||
border-color: #007bff;
|
||||
background-color: #f8f9ff;
|
||||
}
|
||||
|
||||
.scenario-card.disabled {
|
||||
opacity: 0.6;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
line-height: 1.2;
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
color: #6c757d;
|
||||
font-size: 0.9rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.export-buttons {
|
||||
position: sticky;
|
||||
top: 20px;
|
||||
background: white;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.collapsible-section {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.collapsible-header {
|
||||
background: #f8f9fa;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 8px 8px 0 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.collapsible-header:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.collapsible-content.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.phase-settings {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.currency-symbol {
|
||||
font-weight: bold;
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.help-content h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.help-content p {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.help-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Bootstrap tooltip styling improvements */
|
||||
.tooltip {
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
z-index: 9999 !important; /* Ensure tooltips appear above all other elements */
|
||||
pointer-events: none; /* Prevent tooltip from interfering with mouse events */
|
||||
}
|
||||
|
||||
.tooltip .tooltip-inner {
|
||||
max-width: 250px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #fff;
|
||||
background-color: #212529;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.tooltip .tooltip-arrow {
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-top .tooltip-arrow::before {
|
||||
border-top-color: #212529;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
|
||||
border-bottom-color: #212529;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-start .tooltip-arrow::before {
|
||||
border-left-color: #212529;
|
||||
}
|
||||
|
||||
.tooltip.bs-tooltip-end .tooltip-arrow::before {
|
||||
border-right-color: #212529;
|
||||
}
|
||||
|
||||
/* Enhanced cursor for tooltip elements */
|
||||
[data-bs-toggle="tooltip"] {
|
||||
cursor: help;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-bs-toggle="tooltip"]:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.metric-value {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% block extra_js %}
|
||||
<script src="{% static "js/chart.umd.min.js" %}"></script>
|
||||
<script src="{% static "js/jspdf.umd.min.js" %}"></script>
|
||||
<script src="{% static "js/roi-calculator.js" %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -841,8 +588,3 @@
|
|||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{% static "js/chart.js" %}"></script>
|
||||
<script src="{% static "js/jspdf.umd.min.js" %}"></script>
|
||||
<script src="{% static "js/roi-calculator.js" %}"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue