style(stats): better responsive & dark theme for procedure stats
This commit is contained in:
Colin Darie
parent
266a7dbcdd
commit
c288d340d8
3 changed files with 75 additions and 145 deletions
|
|
@ -1,78 +1,8 @@
|
||||||
@import "colors";
|
|
||||||
@import "constants";
|
|
||||||
|
|
||||||
$dark-grey: #333333;
|
|
||||||
$light-grey: #999999;
|
|
||||||
|
|
||||||
$default-space: 15px;
|
|
||||||
|
|
||||||
$new-h1-margin-bottom: 4 * $default-space;
|
|
||||||
$new-h2-margin-bottom: 3 * $default-space;
|
|
||||||
|
|
||||||
.new-h1,
|
|
||||||
.new-h2 {
|
|
||||||
color: $dark-grey;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-h1 {
|
.new-h1 {
|
||||||
margin-bottom: 3.75rem;
|
margin-bottom: 3.75rem;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-h2 {
|
|
||||||
margin-bottom: $new-h2-margin-bottom;
|
|
||||||
font-size: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
$statistiques-padding-top: $default-space * 2;
|
|
||||||
|
|
||||||
.statistiques {
|
|
||||||
width: 1040px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-top: $statistiques-padding-top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-cards {
|
|
||||||
.stat-card:nth-of-type(even) {
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$stat-card-margin-bottom: 3 * $default-space;
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
padding: 15px;
|
|
||||||
margin-bottom: $stat-card-margin-bottom;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: none;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
$stat-card-half-horizontal-spacing: 4 * $default-space;
|
|
||||||
|
|
||||||
.stat-card-half {
|
|
||||||
width: calc((100% - #{$stat-card-half-horizontal-spacing}) / 2);
|
|
||||||
margin-right: $stat-card-half-horizontal-spacing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card-title {
|
|
||||||
color: $dark-grey;
|
|
||||||
font-size: 26px;
|
|
||||||
font-weight: bold;
|
|
||||||
width: 200px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card-details {
|
|
||||||
font-size: 13px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
$segmented-control-item-horizontal-padding: $default-space;
|
|
||||||
$segmented-control-item-border-radius: 0.25rem;
|
|
||||||
|
|
||||||
.chart-container {
|
.chart-container {
|
||||||
margin-top: 36px;
|
margin-top: 36px;
|
||||||
}
|
}
|
||||||
|
|
@ -81,26 +11,6 @@ $segmented-control-item-border-radius: 0.25rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
$big-number-card-padding: 2 * $segmented-control-item-border-radius;
|
|
||||||
|
|
||||||
.big-number-card {
|
|
||||||
padding: $big-number-card-padding $segmented-control-item-horizontal-padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-number-card-title {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: $light-grey;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
&.long-title {
|
|
||||||
margin-left: -30px;
|
|
||||||
margin-right: -30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.big-number-card-number {
|
.big-number-card-number {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -110,10 +20,3 @@ $big-number-card-padding: 2 * $segmented-control-item-border-radius;
|
||||||
color: var(--text-title-blue-france);
|
color: var(--text-title-blue-france);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.big-number-card-detail {
|
|
||||||
display: block;
|
|
||||||
margin-top: $default-padding;
|
|
||||||
text-align: center;
|
|
||||||
color: $blue-france-500;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,56 @@
|
||||||
.statistiques{ 'data-controller': 'chartkick' }
|
.fr-container.fr-my-4w
|
||||||
%h1.new-h1= title
|
%h1= title
|
||||||
.stat-cards
|
.fr-grid-row.fr-grid-row--gutters
|
||||||
- if @usual_traitement_time.present?
|
- if @usual_traitement_time.present?
|
||||||
.stat-card.big-number-card
|
.fr-col-xs-12
|
||||||
%span.big-number-card-title= t('.usual_processing_time')
|
.fr-callout
|
||||||
= render Procedure::EstimatedDelayComponent.new(procedure: @procedure)
|
%h2.fr-callout__title= t('.usual_processing_time')
|
||||||
|
= render Procedure::EstimatedDelayComponent.new(procedure: @procedure)
|
||||||
|
|
||||||
.stat-cards
|
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||||
.stat-card.stat-card-half.pull-left
|
.fr-callout{ data: { controller: 'chartkick' } }
|
||||||
%span.stat-card-title= t('.processing_time')
|
%h2.fr-callout__title= t('.processing_time')
|
||||||
.stat-card-details= t('.since_procedure_creation')
|
%p.fr-callout__text.fr-text--md= t('.since_procedure_creation')
|
||||||
.chart-container
|
|
||||||
.chart
|
|
||||||
- colors = %w(#C3D9FF #0069CC #1C7EC9) # from _colors.scss
|
|
||||||
= column_chart @usual_traitement_time_by_month, ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')
|
|
||||||
|
|
||||||
.stat-card.stat-card-half.pull-left
|
.chart-container
|
||||||
%span.stat-card-title= t('.status_evolution')
|
.chart-procedures-chart{ data: { 'chartkick-target': 'chart' }}
|
||||||
.stat-card-details= t('.status_evolution_details')
|
= column_chart @usual_traitement_time_by_month,
|
||||||
.chart-container
|
library: Chartkick.options[:default_library_config],
|
||||||
.chart
|
ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')
|
||||||
= area_chart @dossiers_funnel, ytitle: t('.dossiers_count'), label: t('.dossiers_count')
|
|
||||||
|
|
||||||
.stat-cards
|
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||||
.stat-card.stat-card-half.pull-left
|
.fr-callout
|
||||||
%span.stat-card-title= t('.acceptance_rate')
|
%h2.fr-callout__title= t('.status_evolution')
|
||||||
.stat-card-details= t('.acceptance_rate_details')
|
%p.fr-callout__text.fr-text--md= t('.status_evolution_details')
|
||||||
.chart-container
|
|
||||||
.chart
|
|
||||||
= pie_chart @termines_states,
|
|
||||||
code: true,
|
|
||||||
colors: %w(#387EC3 #AE2C2B #FAD859),
|
|
||||||
label: t('.rate'),
|
|
||||||
suffix: '%',
|
|
||||||
library: { plotOptions: { pie: { dataLabels: { enabled: true, format: '{point.name} : {point.percentage: .1f}%' } } } }
|
|
||||||
|
|
||||||
|
.chart-container
|
||||||
|
.chart
|
||||||
|
= area_chart @dossiers_funnel,
|
||||||
|
library: Chartkick.options[:default_library_config],
|
||||||
|
ytitle: t('.dossiers_count'), label: t('.dossiers_count')
|
||||||
|
|
||||||
.stat-card.stat-card-half.pull-left
|
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||||
%span.stat-card-title= t('.weekly_distribution')
|
.fr-callout
|
||||||
.stat-card-details= t('.weekly_distribution_details')
|
%h2.fr-callout__title= t('.acceptance_rate')
|
||||||
.chart-container
|
%p.fr-callout__text.fr-text--md= t('.acceptance_rate_details')
|
||||||
.chart
|
|
||||||
= line_chart @termines_by_week, colors: ["#387EC3", "#AE2C2B", "#FAD859"], ytitle: t('.dossiers_count')
|
.chart-container
|
||||||
.clearfix
|
.chart
|
||||||
|
= pie_chart @termines_states,
|
||||||
|
library: Chartkick.options[:default_library_config],
|
||||||
|
code: true,
|
||||||
|
colors: ["var(--background-flat-success)", "var(--background-flat-error)", "#FAD859" ],
|
||||||
|
label: t('.rate'),
|
||||||
|
suffix: '%'
|
||||||
|
|
||||||
|
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||||
|
.fr-callout
|
||||||
|
%h2.fr-callout__title= t('.weekly_distribution')
|
||||||
|
%p.fr-callout__text.fr-text--md= t('.weekly_distribution_details')
|
||||||
|
|
||||||
|
.chart-container
|
||||||
|
.chart
|
||||||
|
= line_chart @termines_by_week,
|
||||||
|
library: Chartkick.options[:default_library_config],
|
||||||
|
colors: ["var(--background-flat-success)", "var(--background-flat-error)", "#FAD859" ],
|
||||||
|
ytitle: t('.dossiers_count')
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,30 @@ Chartkick.options = {
|
||||||
decimal: ',',
|
decimal: ',',
|
||||||
default_library_config: {
|
default_library_config: {
|
||||||
chart: { backgroundColor: 'var(--background-contrast-grey)' },
|
chart: { backgroundColor: 'var(--background-contrast-grey)' },
|
||||||
xAxis: {
|
xAxis: {
|
||||||
lineColor: 'var(--border-action-high-grey)',
|
lineColor: 'var(--border-action-high-grey)',
|
||||||
labels: { style: { color: "var(--text-default-grey)" } }
|
labels: { style: { color: "var(--text-default-grey)" } }
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
gridLineColor: 'var(--border-plain-grey)',
|
gridLineColor: 'var(--border-plain-grey)',
|
||||||
lineColor: 'var(--border-action-high-grey)',
|
lineColor: 'var(--border-action-high-grey)',
|
||||||
labels: { style: { color: "var(--text-default-grey)" } }
|
labels: { style: { color: "var(--text-default-grey)" } }
|
||||||
}
|
},
|
||||||
|
legend: {
|
||||||
|
itemStyle: {
|
||||||
|
color: "var(--text-default-grey)"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
dataLabels: {
|
||||||
|
color: "var(--text-default-grey)",
|
||||||
|
enabled: true, format: '{point.name} : {point.percentage: .1f}%',
|
||||||
|
style: {
|
||||||
|
textOutline: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue