Center PieCharts horizontally

galaxyproject · Dec 9, 2024 · f07d673 · f07d673
1 parent 631da64
commit f07d673
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/client/src/components/WorkflowInvocationState/VegaWrapper.vue b/client/src/components/WorkflowInvocationState/VegaWrapper.vue
@@ -9,15 +9,18 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 export interface VisSpec {
     spec: VisualizationSpec;
-    width: string;
+    fillWidth?: boolean;
 }
 
 const props = withDefaults(defineProps<VisSpec>(), {
-    width: "100%",
+    fillWidth: true,
 });
 
 const style = computed(() => {
-    return { width: props.width };
+    if (props.fillWidth) {
+        return { width: "100%" };
+    }
+    return {};
 });
 
 const chartContainer = ref<HTMLDivElement | null>(null);

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -395,15 +395,15 @@ const groupByInTitles = computed(() => {
                 </BButtonGroup>
             </BRow>
             <BRow>
-                <BCol v-if="wallclockAggregate && wallclockAggregate.values">
+                <BCol v-if="wallclockAggregate && wallclockAggregate.values" class="text-center">
                     <h2 class="h-l truncate text-center">
                         Aggregate
                         <HelpText :for-title="true" uri="galaxy.jobs.metrics.walltime" text="Runtime Time" /> (in
                         {{ timingInTitles }})
                     </h2>
-                    <VegaWrapper :spec="itemToPieChartSpec(wallclockAggregate)" />
+                    <VegaWrapper :spec="itemToPieChartSpec(wallclockAggregate)" :fill-width="false" />
                 </BCol>
-                <BCol v-if="allocatedCoreTimeAggregate && allocatedCoreTimeAggregate.values">
+                <BCol v-if="allocatedCoreTimeAggregate && allocatedCoreTimeAggregate.values" class="text-center">
                     <h2 class="h-l truncate text-center">
                         Aggregate
                         <HelpText
@@ -412,14 +412,14 @@ const groupByInTitles = computed(() => {
                             text="Allocated Core Time" />
                         (in {{ timingInTitles }})
                     </h2>
-                    <VegaWrapper :spec="itemToPieChartSpec(allocatedCoreTimeAggregate)" />
+                    <VegaWrapper :spec="itemToPieChartSpec(allocatedCoreTimeAggregate)" :fill-width="false" />
                 </BCol>
             </BRow>
             <BRow v-for="({ spec, item }, key) in metrics" :key="key">
                 <BCol>
                     <h2 class="h-l truncate text-center">
                         <span v-if="item.helpTerm">
-                            <HelpText :for-title="true" :uri="item.helpTerm" :text="key" />
+                            <HelpText :for-title="true" :uri="item.helpTerm" :text="`${key}`" />
                         </span>
                         <span v-else>
                             {{ key }}