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
260
hub/services/static/css/roi-calculator.css
Normal file
260
hub/services/static/css/roi-calculator.css
Normal file
|
|
@ -0,0 +1,260 @@
|
||||||
|
.calculator-section {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -15,7 +15,7 @@
|
||||||
{% social_meta_tags %}
|
{% social_meta_tags %}
|
||||||
{% json_ld_structured_data %}
|
{% json_ld_structured_data %}
|
||||||
|
|
||||||
<link rel="stylesheet" href='{% static "css/bootstrap-icons.min.css" %}'>
|
<link rel="stylesheet" type="text/css" href='{% static "css/bootstrap-icons.min.css" %}'>
|
||||||
<link rel="stylesheet" type="text/css" href='{% static "css/servala-main.css" %}'>
|
<link rel="stylesheet" type="text/css" href='{% static "css/servala-main.css" %}'>
|
||||||
{% block extra_css %}{% endblock %}
|
{% block extra_css %}{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,266 +4,13 @@
|
||||||
{% block title %}CSP ROI Calculator{% endblock %}
|
{% block title %}CSP ROI Calculator{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
<link href="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.css" rel="stylesheet">
|
<link rel="stylesheet" type="text/css" href='{% static "css/roi-calculator.css" %}'>
|
||||||
<style>
|
{% endblock %}
|
||||||
.calculator-section {
|
|
||||||
background: #f8f9fa;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group-custom {
|
{% block extra_js %}
|
||||||
margin-bottom: 1rem;
|
<script src="{% static "js/chart.umd.min.js" %}"></script>
|
||||||
position: relative; /* Ensure proper stacking context */
|
<script src="{% static "js/jspdf.umd.min.js" %}"></script>
|
||||||
}
|
<script src="{% static "js/roi-calculator.js" %}"></script>
|
||||||
|
|
||||||
.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>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
@ -841,8 +588,3 @@
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% 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 %}
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
{% block title %}Complete Price List{% endblock %}
|
{% block title %}Complete Price List{% endblock %}
|
||||||
|
|
||||||
{% block extra_js %}
|
{% block extra_js %}
|
||||||
<script src="{% static "js/chart.js" %}"></script>
|
<script src="{% static "js/chart.umd.min.js" %}"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block extra_css %}
|
{% block extra_css %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue