update charts to wrap label

yeatmanlab · May 23, 2024 · b30f739 · b30f739
1 parent baf6f14
commit b30f739
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/components/reports/DistributionChartFacet.vue b/src/components/reports/DistributionChartFacet.vue
@@ -132,19 +132,20 @@ const distributionChartFacet = (taskId) => {
           titleAnchor: 'middle',
           labelColor: 'navy',
           labelFontSize: 14,
-          labelFontStyle: 'bold',
-          labelAnchor: 'middle',
+          labelFontStyle: '',
+          labelAnchor: 'top',
           labelAngle: 0,
-          labelAlign: 'left',
+          labelAlign: 'line-top',
           labelOrient: 'left',
+          labelBaseline: 'line-bottom',
           labelExpr:
             props.facetMode.name === 'Grade'
-              ? "join(['Grade ',if(datum.value == '0', 'K', datum.value ), ], '')"
-              : 'slice(datum.value, 1, datum.value.length)',
-          labelLimit: 150,
-          labelSeparation: 5, // Set the spacing between lines in pixels
+              ? "join(['Grade ',if(datum.value == 'Kindergarten', 'K', datum.value ), ], '')"
+              : 'split(slice(datum.value, 1, datum.value.length), " ")',
+          labelLimit: 200,
+          labelSeparation: 2, // Set the spacing between lines in pixels
         },
-        spacing: 10,
+        spacing: 18,
         sort: 'ascending',
       },
 
@@ -175,10 +176,13 @@ const distributionChartFacet = (taskId) => {
         aggregate: 'count',
         title: 'Count',
         axis: {
-          orient: 'right',
+          labelBaseline: 'line-bottom',
           titleFontSize: 14,
+          labelLimit: 180,
+          labelPadding: 8,
           labelFontSize: 14,
-          format: '.0f',
+          labelColor: 'navy',
+          labelFontStyle: '',
         },
       },
       tooltip: [

diff --git a/src/components/reports/DistributionChartSupport.vue b/src/components/reports/DistributionChartSupport.vue
@@ -188,17 +188,18 @@ const distributionBySupport = computed(() => {
               ]
             : 'ascending',
         axis: {
-          labelAngle: 0,
-          labelAlign: 'right',
+          labelBaseline: 'line-bottom',
           titleFontSize: 14,
-          labelLimit: 150,
+          labelLimit: 180,
+          labelPadding: 8,
           labelFontSize: 14,
           labelColor: 'navy',
-          labelFontStyle: 'bold',
+          labelFontStyle: '',
+          transform: [{ calculate: "split(datum.address, ' ')", as: 'address' }],
           labelExpr:
             props.facetMode.name === 'Grade'
               ? "join(['Grade ',if(datum.value == 'Kindergarten', 'K', datum.value ), ], '')"
-              : 'slice(datum.value, 1, datum.value.length)',
+              : 'split(slice(datum.value, 1, datum.value.length), " ")',
         },
       },
       yOffset: {