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 {
|
||||
margin-bottom: 3.75rem;
|
||||
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 {
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
|
@ -81,26 +11,6 @@ $segmented-control-item-border-radius: 0.25rem;
|
|||
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 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
|
@ -110,10 +20,3 @@ $big-number-card-padding: 2 * $segmented-control-item-border-radius;
|
|||
color: var(--text-title-blue-france);
|
||||
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' }
|
||||
%h1.new-h1= title
|
||||
.stat-cards
|
||||
.fr-container.fr-my-4w
|
||||
%h1= title
|
||||
.fr-grid-row.fr-grid-row--gutters
|
||||
- if @usual_traitement_time.present?
|
||||
.stat-card.big-number-card
|
||||
%span.big-number-card-title= t('.usual_processing_time')
|
||||
= render Procedure::EstimatedDelayComponent.new(procedure: @procedure)
|
||||
.fr-col-xs-12
|
||||
.fr-callout
|
||||
%h2.fr-callout__title= t('.usual_processing_time')
|
||||
= render Procedure::EstimatedDelayComponent.new(procedure: @procedure)
|
||||
|
||||
.stat-cards
|
||||
.stat-card.stat-card-half.pull-left
|
||||
%span.stat-card-title= t('.processing_time')
|
||||
.stat-card-details= 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')
|
||||
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||
.fr-callout{ data: { controller: 'chartkick' } }
|
||||
%h2.fr-callout__title= t('.processing_time')
|
||||
%p.fr-callout__text.fr-text--md= t('.since_procedure_creation')
|
||||
|
||||
.stat-card.stat-card-half.pull-left
|
||||
%span.stat-card-title= t('.status_evolution')
|
||||
.stat-card-details= t('.status_evolution_details')
|
||||
.chart-container
|
||||
.chart
|
||||
= area_chart @dossiers_funnel, ytitle: t('.dossiers_count'), label: t('.dossiers_count')
|
||||
.chart-container
|
||||
.chart-procedures-chart{ data: { 'chartkick-target': 'chart' }}
|
||||
= column_chart @usual_traitement_time_by_month,
|
||||
library: Chartkick.options[:default_library_config],
|
||||
ytitle: t('.nb_days'), legend: "bottom", label: t('.processing_time_graph_description')
|
||||
|
||||
.stat-cards
|
||||
.stat-card.stat-card-half.pull-left
|
||||
%span.stat-card-title= t('.acceptance_rate')
|
||||
.stat-card-details= t('.acceptance_rate_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}%' } } } }
|
||||
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||
.fr-callout
|
||||
%h2.fr-callout__title= t('.status_evolution')
|
||||
%p.fr-callout__text.fr-text--md= t('.status_evolution_details')
|
||||
|
||||
.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
|
||||
%span.stat-card-title= t('.weekly_distribution')
|
||||
.stat-card-details= t('.weekly_distribution_details')
|
||||
.chart-container
|
||||
.chart
|
||||
= line_chart @termines_by_week, colors: ["#387EC3", "#AE2C2B", "#FAD859"], ytitle: t('.dossiers_count')
|
||||
.clearfix
|
||||
.fr-col-xs-12.fr-col-sm-12.fr-col-lg-6
|
||||
.fr-callout
|
||||
%h2.fr-callout__title= t('.acceptance_rate')
|
||||
%p.fr-callout__text.fr-text--md= t('.acceptance_rate_details')
|
||||
|
||||
.chart-container
|
||||
.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: ',',
|
||||
default_library_config: {
|
||||
chart: { backgroundColor: 'var(--background-contrast-grey)' },
|
||||
xAxis: {
|
||||
lineColor: 'var(--border-action-high-grey)',
|
||||
labels: { style: { color: "var(--text-default-grey)" } }
|
||||
},
|
||||
yAxis: {
|
||||
gridLineColor: 'var(--border-plain-grey)',
|
||||
lineColor: 'var(--border-action-high-grey)',
|
||||
labels: { style: { color: "var(--text-default-grey)" } }
|
||||
}
|
||||
xAxis: {
|
||||
lineColor: 'var(--border-action-high-grey)',
|
||||
labels: { style: { color: "var(--text-default-grey)" } }
|
||||
},
|
||||
yAxis: {
|
||||
gridLineColor: 'var(--border-plain-grey)',
|
||||
lineColor: 'var(--border-action-high-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