Add legend and axis names to chart png export in PA (#2921)

* add legend and y axis name to chart png

* add x axis title in png export

* fix margin

* display full text in legend

* update legend border in export

* chore:cleanup

* refactor helper functions and update unit tests

Author: maggie-li-yd

plugins/ui/apps/vue-mri-ui-lib/src/components/ImageExport.vue

@@ -8,7 +8,7 @@
 import { mapActions, mapGetters } from 'vuex'
 import MessageBox from './MessageBox.vue'
 import Constants from '../utils/Constants'
-import { createChartCanvas } from '../utils/ExportUtils'
+import { createChartCanvas, buildXAxisTitle } from '../utils/ExportUtils'
 import { generateDownloadFileName } from '../utils/generateDownloadFileName'
 
 export default {
@@ -136,7 +136,17 @@ export default {
                 }
               : null
 
-          const chartCanvas = createChartCanvas(chartId, chartType, targetHeight, targetWidth, pdfConst, kmLegendInput)
+          const xAxisTitle = buildXAxisTitle(response?.categories)
+
+          const chartCanvas = createChartCanvas(
+            chartId,
+            chartType,
+            targetHeight,
+            targetWidth,
+            pdfConst,
+            kmLegendInput,
+            xAxisTitle
+          )
 
           this.imageURL = chartCanvas.toDataURL('image/png')
           this.$refs.imgDownloadBtn.href = this.imageURL

plugins/ui/apps/vue-mri-ui-lib/src/components/StackBarChartLegend.vue

@@ -7,6 +7,7 @@
         class="stackbar-legend-entry"
         tabindex="0"
         :aria-label="item.ariaLabel"
+        :data-full-name="item.fullName"
         @mouseenter="item.isTruncated && showTooltip($event, item.fullName)"
         @mouseleave="hideTooltip"
         @focus="item.isTruncated && showTooltip($event, item.fullName)"