boxplot styling #12

Caleydo · Apr 22, 2021 · 813514c · 813514c
1 parent 2aa005b
commit 813514c
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/dist/measure_visualization/BoxPlot.js b/dist/measure_visualization/BoxPlot.js
diff --git a/dist/measure_visualization/BoxPlot.js.map b/dist/measure_visualization/BoxPlot.js.map
diff --git a/src/measure_visualization/BoxPlot.ts b/src/measure_visualization/BoxPlot.ts
@@ -26,25 +26,44 @@ export class BoxPlot implements IMeasureVisualization {
       '$schema': 'https://vega.github.io/schema/vega-lite/v4.json',
       data: {values: this.formatData(setParameters)},
       title: setParameters.setBDesc.label,
-      width: {step: 30},
+      width: 'container',
       mark: {
         type: 'boxplot',
         median: {color: 'black'}
       },
       encoding: {
-        x: {field: 'group', type: 'nominal', axis: {labelAngle: 45}, title: null},
-        color: {field: 'color', type: 'nominal', legend: null, scale: null},
-        y: {
+        x: {
           field: 'value',
           type: 'quantitative',
           scale: {zero: false},
           axis: {grid: false},
           title: null
+        },
+        y: {field: 'group', type: 'nominal', title: null},
+        color: {field: 'color', type: 'nominal', legend: null, scale: null}
+      },
+      padding: {left: 5, top: 0, right: 5, bottom: 0},
+      config: {
+        axis: {
+          titleFontSize: 16, titleFontWeight: 500, titleFont: 'Yantramanav',
+          labelFontSize: 12, labelLimit: 200, labelFont: 'Yantramanav',
+          labelOverlap: 'parity', // hide if labels overlap
+          labelSeparation: 5,
+          labelBound: true // clip labels if they are not within chart area
+        },
+        legend: {
+          titleFontSize: 16, titleFontWeight: 500, titleFont: 'Yantramanav',
+          labelFontSize: 12, labelLimit: 200, labelFont: 'Yantramanav',
+          labelOverlap: 'parity'
+        },
+        header: {
+          titleFontSize: 16, titleFontWeight: 500, titleFont: 'Yantramanav',
+          labelFontSize: 12, labelLimit: 200, labelFont: 'Yantramanav'
         }
       }
     };
 
-    vegaEmbed(miniVisualisation.append('div').node() as HTMLElement, spec, {actions: false, renderer: 'canvas'});
+    vegaEmbed(miniVisualisation.append('div').style('width','100%').node() as HTMLElement, spec, {actions: false});
   }
 
 }