Merge pull request openshift-pipelines#25 from vikram-raj/odc-7455

ODC-7455: consmetic changes in Charts and number cards
saumeya · Dec 11, 2023 · be177aa · be177aa
2 parents db15433 + 0f7a2fb
commit be177aa
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 39 deletions.
diff --git a/src/components/pipelines-metrics/PipelinesAverageDuration.tsx b/src/components/pipelines-metrics/PipelinesAverageDuration.tsx
@@ -62,7 +62,10 @@ const PipelinesAverageDuration: React.FC<PipelinesAverageDurationProps> = ({
 
   const xTickFormat = (d) => formatDate(d);
   let xAxisStyle: ChartAxisProps['style'] = {
-    tickLabels: { fill: 'var(--pf-global--Color--100)' },
+    tickLabels: { fill: 'var(--pf-global--Color--100)', fontSize: 12 },
+  };
+  const yAxisStyle: ChartAxisProps['style'] = {
+    tickLabels: { fill: 'var(--pf-global--Color--100)', fontSize: 12 },
   };
   if (tickValues.length > 7) {
     xAxisStyle = {
@@ -112,9 +115,9 @@ const PipelinesAverageDuration: React.FC<PipelinesAverageDurationProps> = ({
                 style={xAxisStyle}
                 tickFormat={xTickFormat}
               />
-              <ChartAxis dependentAxis />
+              <ChartAxis dependentAxis style={yAxisStyle} />
               <ChartGroup>
-                <ChartBar data={chartData} />
+                <ChartBar data={chartData} barWidth={18} />
               </ChartGroup>
             </Chart>
           </div>

diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.scss b/src/components/pipelines-overview/PipelineRunsDurationCard.scss
@@ -0,0 +1,7 @@
+.pipeline-overview {
+  &__duration-card {
+    &__value {
+      text-align: right;
+    }
+  }  
+}
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
@@ -19,6 +19,7 @@ import { getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 import { formatTime, getDropDownDate } from './dateTime';
+import './PipelineRunsDurationCard.scss';
 
 interface PipelinesRunsDurationProps {
   namespace: string;
@@ -81,12 +82,13 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Average Duration')}
               </span>
             </GridItem>
-            <GridItem span={6}>
-              <span className="pipeline-overview__duration-card__value">
-                {summaryData['avg_duration']
-                  ? formatTime(summaryData['avg_duration'])
-                  : '-'}
-              </span>
+            <GridItem
+              span={6}
+              className="pipeline-overview__duration-card__value"
+            >
+              {summaryData['avg_duration']
+                ? formatTime(summaryData['avg_duration'])
+                : '-'}
             </GridItem>
           </Grid>
           <Grid hasGutter className="pipeline-overview__duration-card__grid">
@@ -96,12 +98,13 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Maximun')}
               </span>
             </GridItem>
-            <GridItem span={6}>
-              <span className="pipeline-overview__duration-card__value">
-                {summaryData['max_duration']
-                  ? formatTime(summaryData['max_duration'])
-                  : '-'}
-              </span>
+            <GridItem
+              span={6}
+              className="pipeline-overview__duration-card__value"
+            >
+              {summaryData['max_duration']
+                ? formatTime(summaryData['max_duration'])
+                : '-'}
             </GridItem>
           </Grid>
           <Grid hasGutter>
@@ -111,12 +114,13 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Total Duration')}
               </span>
             </GridItem>
-            <GridItem span={6}>
-              <span className="pipeline-overview__duration-card__value">
-                {summaryData['total_duration']
-                  ? formatTime(summaryData['total_duration'])
-                  : '-'}
-              </span>
+            <GridItem
+              span={6}
+              className="pipeline-overview__duration-card__value"
+            >
+              {summaryData['total_duration']
+                ? formatTime(summaryData['total_duration'])
+                : '-'}
             </GridItem>
           </Grid>
         </CardBody>

diff --git a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
@@ -113,7 +113,10 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
 
   const xTickFormat = (d) => formatDate(d);
   let xAxisStyle: ChartAxisProps['style'] = {
-    tickLabels: { fill: 'var(--pf-global--Color--100)' },
+    tickLabels: { fill: 'var(--pf-global--Color--100)', fontSize: 12 },
+  };
+  const yAxisStyle: ChartAxisProps['style'] = {
+    tickLabels: { fill: 'var(--pf-global--Color--100)', fontSize: 12 },
   };
   if (tickValues.length > 7) {
     xAxisStyle = {
@@ -162,9 +165,9 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
                 style={xAxisStyle}
                 tickFormat={xTickFormat}
               />
-              <ChartAxis dependentAxis />
+              <ChartAxis dependentAxis style={yAxisStyle} />
               <ChartGroup>
-                <ChartBar data={chartData} />
+                <ChartBar data={chartData} barWidth={18} />
               </ChartGroup>
             </Chart>
           </div>

diff --git a/src/components/pipelines-overview/PipelineRunsStatusCard.tsx b/src/components/pipelines-overview/PipelineRunsStatusCard.tsx
@@ -40,7 +40,6 @@ import { SummaryResponse, getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
 import { LoadingInline } from '../Loading';
 import { ALL_NAMESPACES_KEY } from '../../consts';
-
 import './PipelinesOverview.scss';
 
 interface PipelinesRunsStatusCardProps {
@@ -135,6 +134,9 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
   let xAxisStyle: ChartAxisProps['style'] = {
     tickLabels: { fill: 'var(--pf-global--Color--100)' },
   };
+  const yAxisStyle: ChartAxisProps['style'] = {
+    tickLabels: { fill: 'var(--pf-global--Color--100)' },
+  };
   if (tickValues?.length > 7) {
     xAxisStyle = {
       tickLabels: {
@@ -299,10 +301,10 @@ const PipelinesRunsStatusCard: React.FC<PipelinesRunsStatusCardProps> = ({
                   <ChartAxis
                     dependentAxis
                     tickFormat={(v) => `${v}%`}
-                    style={xAxisStyle}
+                    style={yAxisStyle}
                   />
                   <ChartGroup>
-                    <ChartBar data={chartData} />
+                    <ChartBar data={chartData} barWidth={20} />
                   </ChartGroup>
                 </Chart>
               </div>

diff --git a/src/components/pipelines-overview/PipelineRunsTotalCard.scss b/src/components/pipelines-overview/PipelineRunsTotalCard.scss
@@ -0,0 +1,7 @@
+.pipeline-overview {
+  &__totals-card {
+    &__value {
+      text-align: right;
+    }
+  }  
+}
diff --git a/src/components/pipelines-overview/PipelineRunsTotalCard.tsx b/src/components/pipelines-overview/PipelineRunsTotalCard.tsx
@@ -17,6 +17,7 @@ import { getResultsSummary } from '../utils/summary-api';
 import { DataType } from '../utils/tekton-results';
 import { ALL_NAMESPACES_KEY } from '../../consts';
 import { getDropDownDate } from './dateTime';
+import './PipelineRunsTotalCard.scss';
 
 interface PipelinesRunsDurationProps {
   namespace: string;
@@ -113,10 +114,11 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Runs in pipelines')}
               </span>
             </GridItem>
-            <GridItem span={3}>
-              <span className="pipeline-overview__totals-card__value">
-                {plrRun}
-              </span>
+            <GridItem
+              span={3}
+              className="pipeline-overview__totals-card__value"
+            >
+              {plrRun}
             </GridItem>
           </Grid>
           <Grid hasGutter className="pipeline-overview__totals-card__grid">
@@ -131,10 +133,11 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Runs in repositories')}
               </span>
             </GridItem>
-            <GridItem span={3}>
-              <span className="pipeline-overview__totals-card__value">
-                {repoRun}
-              </span>
+            <GridItem
+              span={3}
+              className="pipeline-overview__totals-card__value"
+            >
+              {repoRun}
             </GridItem>
           </Grid>
           <Grid hasGutter>
@@ -144,10 +147,11 @@ const PipelinesRunsTotalCard: React.FC<PipelinesRunsDurationProps> = ({
                 {t('Total runs')}
               </span>
             </GridItem>
-            <GridItem span={3}>
-              <span className="pipeline-overview__totals-card__value">
-                {totalRun}
-              </span>
+            <GridItem
+              span={3}
+              className="pipeline-overview__totals-card__value"
+            >
+              {totalRun}
             </GridItem>
           </Grid>
         </CardBody>