From 887c542527a4c457cd280d8ce2e0b3e7d64b918f Mon Sep 17 00:00:00 2001 From: Mike Lister Date: Fri, 11 Oct 2024 08:53:09 +0100 Subject: [PATCH] Removed extra margin on grouped charts and moved to globalStyle --- area-stacked-sm/chart.css | 7 +- .../chart.css | 5 - bar-chart-horizontal-grouped/chart.css | 10 +- .../chart.css | 7 -- .../chart.css | 7 -- .../chart.css | 7 -- comet-clustered/chart.css | 5 - comet-plot/chart.css | 5 - lib/globalStyle.css | 6 ++ line-chart-sm-colours/chart.css | 80 +++++++-------- line-chart-sm/chart.css | 80 +++++++-------- line-chart-with-ci-sm/chart.css | 98 +++++++++---------- range-plot/chart.css | 5 - 13 files changed, 139 insertions(+), 183 deletions(-) diff --git a/area-stacked-sm/chart.css b/area-stacked-sm/chart.css index 12b0a29..d0d3f93 100644 --- a/area-stacked-sm/chart.css +++ b/area-stacked-sm/chart.css @@ -1,9 +1,4 @@ -.title { - font-weight: 600; - fill: #414042; - } - - #legend{ + #legend { display: grid; align-items: center; padding-bottom: 20px; diff --git a/bar-chart-horizontal-grouped-clustered/chart.css b/bar-chart-horizontal-grouped-clustered/chart.css index cd852e5..194a371 100644 --- a/bar-chart-horizontal-grouped-clustered/chart.css +++ b/bar-chart-horizontal-grouped-clustered/chart.css @@ -2,8 +2,3 @@ font-weight: 600; font-size: 14px; } - -p.groupLabels{ - padding-top:15px; - font-weight: 600; -} diff --git a/bar-chart-horizontal-grouped/chart.css b/bar-chart-horizontal-grouped/chart.css index 04e0ae9..3591225 100644 --- a/bar-chart-horizontal-grouped/chart.css +++ b/bar-chart-horizontal-grouped/chart.css @@ -1,12 +1,8 @@ -.dataLabels{ +.dataLabels { font-weight: 600; font-size: 14px; } -p.groupLabels{ - padding-top:15px; - font-weight: 600; -} - text{ +text { forced-color-adjust: auto; - } \ No newline at end of file +} \ No newline at end of file diff --git a/bar-chart-horizontal-stacked-clustered-grouped/chart.css b/bar-chart-horizontal-stacked-clustered-grouped/chart.css index d2c2b7d..7ec5ef4 100644 --- a/bar-chart-horizontal-stacked-clustered-grouped/chart.css +++ b/bar-chart-horizontal-stacked-clustered-grouped/chart.css @@ -2,10 +2,3 @@ font-weight: 600; font-size: 14px; } - - p.groupLabels{ - padding-top:5px; - margin-top: 5px; - margin-bottom:0em; - font-weight: 600; - } \ No newline at end of file diff --git a/bar-chart-horizontal-stacked-clustered/chart.css b/bar-chart-horizontal-stacked-clustered/chart.css index d2c2b7d..7ec5ef4 100644 --- a/bar-chart-horizontal-stacked-clustered/chart.css +++ b/bar-chart-horizontal-stacked-clustered/chart.css @@ -2,10 +2,3 @@ font-weight: 600; font-size: 14px; } - - p.groupLabels{ - padding-top:5px; - margin-top: 5px; - margin-bottom:0em; - font-weight: 600; - } \ No newline at end of file diff --git a/bar-chart-horizontal-stacked-grouped/chart.css b/bar-chart-horizontal-stacked-grouped/chart.css index d2c2b7d..7ec5ef4 100644 --- a/bar-chart-horizontal-stacked-grouped/chart.css +++ b/bar-chart-horizontal-stacked-grouped/chart.css @@ -2,10 +2,3 @@ font-weight: 600; font-size: 14px; } - - p.groupLabels{ - padding-top:5px; - margin-top: 5px; - margin-bottom:0em; - font-weight: 600; - } \ No newline at end of file diff --git a/comet-clustered/chart.css b/comet-clustered/chart.css index 5a6cde0..468c5dd 100644 --- a/comet-clustered/chart.css +++ b/comet-clustered/chart.css @@ -3,11 +3,6 @@ font-weight: 600; font-size: 14px; } - - p.groupLabels{ - padding-top:15px; - font-weight: 600; - } .legendLabel{ font-size: 14px; diff --git a/comet-plot/chart.css b/comet-plot/chart.css index 4e368c9..5d5bb58 100644 --- a/comet-plot/chart.css +++ b/comet-plot/chart.css @@ -4,11 +4,6 @@ font-size: 14px; } - p.groupLabels{ - padding-top:15px; - font-weight: 600; - } - .legendLabel{ font-size: 14px; } \ No newline at end of file diff --git a/lib/globalStyle.css b/lib/globalStyle.css index 9db278b..c87352a 100644 --- a/lib/globalStyle.css +++ b/lib/globalStyle.css @@ -263,6 +263,12 @@ h5#source { fill: #414042; } +/* Chart titles for grouped charts */ +p.groupLabels { + padding-top:15px; + font-weight: 600; + margin: 0; +} @media (max-width: 400px) { #legend { flex-flow: column; diff --git a/line-chart-sm-colours/chart.css b/line-chart-sm-colours/chart.css index 5c76724..1f2a963 100644 --- a/line-chart-sm-colours/chart.css +++ b/line-chart-sm-colours/chart.css @@ -1,43 +1,43 @@ .grid line { - stroke: #ccc; - stroke-opacity: 0.7; - } - - /* Need to discuss this with the team */ - .axis path, - .axis line { - stroke: none; /* Changes the color of the axis lines */ - } - - .grid .tick { - stroke: lightgrey; /* Changes the color of the gridlines */ - stroke-opacity: 0.7; - shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */ - } - .grid path { - stroke-width: 0; /* Removes the line along the y-axis */ - } - - .chart-container { - display: inline-block; - vertical-align: top; - } - - .chart-container:last-child { - margin-right: 0; - } - - .title { - font-weight: 600; - fill: #414042; - } + stroke: #ccc; + stroke-opacity: 0.7; +} - .dataLabel { - font-weight: 600; - font-size: 14px; - } +/* Need to discuss this with the team */ +.axis path, +.axis line { + stroke: none; + /* Changes the color of the axis lines */ +} - #legend { - margin-top: 10px; - margin-bottom: 10px; - } \ No newline at end of file +.grid .tick { + stroke: lightgrey; + /* Changes the color of the gridlines */ + stroke-opacity: 0.7; + shape-rendering: crispEdges; + /* Makes the gridlines appear more crisp */ +} + +.grid path { + stroke-width: 0; + /* Removes the line along the y-axis */ +} + +.chart-container { + display: inline-block; + vertical-align: top; +} + +.chart-container:last-child { + margin-right: 0; +} + +.dataLabel { + font-weight: 600; + font-size: 14px; +} + +#legend { + margin-top: 10px; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/line-chart-sm/chart.css b/line-chart-sm/chart.css index 88a2612..9cb156d 100644 --- a/line-chart-sm/chart.css +++ b/line-chart-sm/chart.css @@ -1,44 +1,44 @@ .grid line { - stroke: #ccc; - stroke-opacity: 0.7; - } - - /* Need to discuss this with the team */ - .axis path, - .axis line { - stroke: none; /* Changes the color of the axis lines */ - } - - .grid .tick { - stroke: lightgrey; /* Changes the color of the gridlines */ - stroke-opacity: 0.7; - shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */ - } - .grid path { - stroke-width: 0; /* Removes the line along the y-axis */ - } - - .chart-container { - display: inline-block; - vertical-align: top; - } - - .chart-container:last-child { - margin-right: 0; - } - - .title { - font-weight: 600; - fill: #414042; - } + stroke: #ccc; + stroke-opacity: 0.7; +} - .dataLabel { - font-weight: 600; - font-size: 14px; - } +/* Need to discuss this with the team */ +.axis path, +.axis line { + stroke: none; + /* Changes the color of the axis lines */ +} + +.grid .tick { + stroke: lightgrey; + /* Changes the color of the gridlines */ + stroke-opacity: 0.7; + shape-rendering: crispEdges; + /* Makes the gridlines appear more crisp */ +} + +.grid path { + stroke-width: 0; + /* Removes the line along the y-axis */ +} + +.chart-container { + display: inline-block; + vertical-align: top; +} + +.chart-container:last-child { + margin-right: 0; +} + +.dataLabel { + font-weight: 600; + font-size: 14px; +} - @media (forced-colors: active) { - .other { - stroke: grey - } +@media (forced-colors: active) { + .other { + stroke: grey } +} \ No newline at end of file diff --git a/line-chart-with-ci-sm/chart.css b/line-chart-with-ci-sm/chart.css index 74db00a..13c8134 100644 --- a/line-chart-with-ci-sm/chart.css +++ b/line-chart-with-ci-sm/chart.css @@ -1,57 +1,57 @@ .grid line { - stroke: #ccc; - stroke-opacity: 0.7; - } - - /* Need to discuss this with the team */ - .axis path, - .axis line { - stroke: none; /* Changes the color of the axis lines */ - } - - .grid .tick { - stroke: lightgrey; /* Changes the color of the gridlines */ - stroke-opacity: 0.7; - shape-rendering: crispEdges; /* Makes the gridlines appear more crisp */ - } - .grid path { - stroke-width: 0; /* Removes the line along the y-axis */ - } - - .chart-container { - display: inline-block; - vertical-align: top; - } - - .chart-container:last-child { - margin-right: 0; - } - - .title { - font-weight: 600; - fill: #414042; - } + stroke: #ccc; + stroke-opacity: 0.7; +} - .dataLabel { - font-weight: 600; - font-size: 14px; - } +/* Need to discuss this with the team */ +.axis path, +.axis line { + stroke: none; + /* Changes the color of the axis lines */ +} - #legend { - margin-top: 10px; - margin-bottom: 10px; - } +.grid .tick { + stroke: lightgrey; + /* Changes the color of the gridlines */ + stroke-opacity: 0.7; + shape-rendering: crispEdges; + /* Makes the gridlines appear more crisp */ +} - - .legend--icon--rect { - height: 12px; - width: 12px; - align-self: center; - flex-shrink: 0; - forced-color-adjust: none; - } +.grid path { + stroke-width: 0; + /* Removes the line along the y-axis */ +} + +.chart-container { + display: inline-block; + vertical-align: top; +} + +.chart-container:last-child { + margin-right: 0; +} + +.dataLabel { + font-weight: 600; + font-size: 14px; +} + +#legend { + margin-top: 10px; + margin-bottom: 10px; +} + + +.legend--icon--rect { + height: 12px; + width: 12px; + align-self: center; + flex-shrink: 0; + forced-color-adjust: none; +} - .legend--itemCI { +.legend--itemCI { display: flex; padding-right: 40px; padding-bottom: 12px; diff --git a/range-plot/chart.css b/range-plot/chart.css index 459ceb4..1beb47d 100644 --- a/range-plot/chart.css +++ b/range-plot/chart.css @@ -7,8 +7,3 @@ line.between{ font-weight: 600; font-size: 14px; } - -p.groupLabels{ - padding-top:15px; - font-weight: 600; -}