fix: yet more chart layout tweaks

Author: starpit

plugins/plugin-codeflare/src/components/Chart.tsx

@@ -74,7 +74,7 @@ export default class BaseChart extends React.PureComponent<Props> {
 
   public static readonly padding = {
     bottom: BaseChart.fontSize * 1.5,
-    top: BaseChart.fontSize * 4,
+    top: BaseChart.fontSize * 5,
     left: BaseChart.fontSize * 4.5,
     right: BaseChart.fontSize * 4.5,
   }
@@ -147,7 +147,7 @@ export default class BaseChart extends React.PureComponent<Props> {
       left: BaseChart.padding.left - BaseChart.tickLabelFontSize * 4,
       right: BaseChart.dimensions.width - BaseChart.tickLabelFontSize * 1.5,
     },
-    y: BaseChart.padding.top - BaseChart.fontSize * 2,
+    y: BaseChart.padding.top - BaseChart.fontSize * 1.5,
   }
 
   private static readonly formatters = {
@@ -236,23 +236,23 @@ export default class BaseChart extends React.PureComponent<Props> {
     }
   }
 
-  private areaStyle(stroke: string, fill: string, strokeWidth = 1.25, fillOpacity = 0.1): ChartAreaProps["style"] {
+  private areaStyle(stroke: string, fill: string, strokeWidth = 2.5, fillOpacity = 0.1): ChartAreaProps["style"] {
     return { data: { stroke, strokeWidth, fill, fillOpacity } }
   }
 
-  private lineStyle(stroke: string, strokeDasharray = "", strokeWidth = 1.25): ChartLineProps["style"] {
+  private lineStyle(stroke: string, strokeDasharray = "", strokeWidth = 2.5): ChartLineProps["style"] {
     return { data: { stroke, strokeWidth, strokeDasharray } }
   }
 
   private lineDashStyle(stroke: string): ChartLineProps["style"] {
-    return this.lineStyle(stroke, "3,0.5", 2)
+    return this.lineStyle(stroke, "3,0.5", 3)
   }
 
   private title(chart: BaseChartProps) {
     return (
       <ChartLabel
         x={BaseChart.titlePosition.x.left}
-        y={BaseChart.fontSize / 2}
+        y={BaseChart.fontSize}
         style={BaseChart.titleStyle()}
         text={chart.title}
       />

plugins/plugin-codeflare/web/scss/components/Dashboard/Charts.scss

@@ -19,7 +19,7 @@
 @include ChartGrid {
   display: grid;
   grid-gap: 0.6875em;
-  padding: 1em;
+  padding: 2em;
   grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: minmax(300px, max-content);
 

plugins/plugin-codeflare/web/scss/components/Dashboard/_index.scss

@@ -29,8 +29,9 @@
 
 @include TopLevelTab {
   @include Split(3) {
-    @include Rows(7);
+    /* @include Rows(7); */
     @include Columns(13);
+    grid-template-rows: repeat(3, minmax(9vmax, auto)) repeat(4, auto);
     grid-template-areas:
       "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"
       "T1 T1 T1 T3 T3 T3 T3 T3 T3 T3 T3 T3 T3"