diff --git a/examples/compiled/bar_grouped.vg.json b/examples/compiled/bar_grouped.vg.json index ed45dbff73..c0e551d5cc 100644 --- a/examples/compiled/bar_grouped.vg.json +++ b/examples/compiled/bar_grouped.vg.json @@ -143,20 +143,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/bar_grouped_horizontal.vg.json b/examples/compiled/bar_grouped_horizontal.vg.json index ab9e84da69..95fa37043a 100644 --- a/examples/compiled/bar_grouped_horizontal.vg.json +++ b/examples/compiled/bar_grouped_horizontal.vg.json @@ -123,15 +123,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/facet_column_facet_column_point_future.vg.json b/examples/compiled/facet_column_facet_column_point_future.vg.json index 71e0e958e5..98c5187ff6 100644 --- a/examples/compiled/facet_column_facet_column_point_future.vg.json +++ b/examples/compiled/facet_column_facet_column_point_future.vg.json @@ -102,20 +102,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" } }, { @@ -218,20 +205,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/facet_column_facet_row_point_future.vg.json b/examples/compiled/facet_column_facet_row_point_future.vg.json index 5ff77a88b4..3ca1b710d2 100644 --- a/examples/compiled/facet_column_facet_row_point_future.vg.json +++ b/examples/compiled/facet_column_facet_row_point_future.vg.json @@ -102,20 +102,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" } }, { @@ -208,15 +195,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/facet_cross_independent_scale.vg.json b/examples/compiled/facet_cross_independent_scale.vg.json index 983aa77e59..e6c1230c77 100644 --- a/examples/compiled/facet_cross_independent_scale.vg.json +++ b/examples/compiled/facet_cross_independent_scale.vg.json @@ -186,15 +186,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, @@ -229,20 +220,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/facet_independent_scale.vg.json b/examples/compiled/facet_independent_scale.vg.json index aa4afca489..aaed119bb4 100644 --- a/examples/compiled/facet_independent_scale.vg.json +++ b/examples/compiled/facet_independent_scale.vg.json @@ -167,20 +167,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/facet_independent_scale_layer.vg.json b/examples/compiled/facet_independent_scale_layer.vg.json index 3bd17a2769..7bc296bbfe 100644 --- a/examples/compiled/facet_independent_scale_layer.vg.json +++ b/examples/compiled/facet_independent_scale_layer.vg.json @@ -181,20 +181,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/facet_row_facet_row_point_future.vg.json b/examples/compiled/facet_row_facet_row_point_future.vg.json index 7b7bf75702..4eead9f949 100644 --- a/examples/compiled/facet_row_facet_row_point_future.vg.json +++ b/examples/compiled/facet_row_facet_row_point_future.vg.json @@ -106,15 +106,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, @@ -190,15 +181,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_anscombe.vg.json b/examples/compiled/trellis_anscombe.vg.json index 4689bc2be1..f3b86e84a2 100644 --- a/examples/compiled/trellis_anscombe.vg.json +++ b/examples/compiled/trellis_anscombe.vg.json @@ -120,20 +120,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_area.vg.json b/examples/compiled/trellis_area.vg.json index 67f13ec7a5..3346a66c64 100644 --- a/examples/compiled/trellis_area.vg.json +++ b/examples/compiled/trellis_area.vg.json @@ -135,15 +135,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_bar.vg.json b/examples/compiled/trellis_bar.vg.json index bc173ecd07..8ec6c3bec5 100644 --- a/examples/compiled/trellis_bar.vg.json +++ b/examples/compiled/trellis_bar.vg.json @@ -145,15 +145,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_bar_histogram.vg.json b/examples/compiled/trellis_bar_histogram.vg.json index c46c22c4df..4bae26424e 100644 --- a/examples/compiled/trellis_bar_histogram.vg.json +++ b/examples/compiled/trellis_bar_histogram.vg.json @@ -133,15 +133,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_barley.vg.json b/examples/compiled/trellis_barley.vg.json index 48e47acf24..2363aa90e0 100644 --- a/examples/compiled/trellis_barley.vg.json +++ b/examples/compiled/trellis_barley.vg.json @@ -120,15 +120,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_column_year.vg.json b/examples/compiled/trellis_column_year.vg.json index 225a9b9882..48e17c95f0 100644 --- a/examples/compiled/trellis_column_year.vg.json +++ b/examples/compiled/trellis_column_year.vg.json @@ -147,20 +147,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_line_quarter.vg.json b/examples/compiled/trellis_line_quarter.vg.json index c932262d5f..0a3fe3f52b 100644 --- a/examples/compiled/trellis_line_quarter.vg.json +++ b/examples/compiled/trellis_line_quarter.vg.json @@ -147,20 +147,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_row_column.vg.json b/examples/compiled/trellis_row_column.vg.json index 49c8e9d570..b40c8ec0e2 100644 --- a/examples/compiled/trellis_row_column.vg.json +++ b/examples/compiled/trellis_row_column.vg.json @@ -135,15 +135,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, @@ -190,20 +181,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_scatter.vg.json b/examples/compiled/trellis_scatter.vg.json index 052e79df1a..e60f608987 100644 --- a/examples/compiled/trellis_scatter.vg.json +++ b/examples/compiled/trellis_scatter.vg.json @@ -119,20 +119,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_scatter_binned_row.vg.json b/examples/compiled/trellis_scatter_binned_row.vg.json index adeba0c406..a5013b0345 100644 --- a/examples/compiled/trellis_scatter_binned_row.vg.json +++ b/examples/compiled/trellis_scatter_binned_row.vg.json @@ -120,15 +120,6 @@ "style": "guide-label", "encode": { "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - }, "align": { "value": "right" }, diff --git a/examples/compiled/trellis_scatter_small.vg.json b/examples/compiled/trellis_scatter_small.vg.json index 535cd2f281..8056c52faa 100644 --- a/examples/compiled/trellis_scatter_small.vg.json +++ b/examples/compiled/trellis_scatter_small.vg.json @@ -119,20 +119,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_selections.vg.json b/examples/compiled/trellis_selections.vg.json index a79ac5f1bb..7b8d2908d9 100644 --- a/examples/compiled/trellis_selections.vg.json +++ b/examples/compiled/trellis_selections.vg.json @@ -167,20 +167,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/examples/compiled/trellis_stacked_bar.vg.json b/examples/compiled/trellis_stacked_bar.vg.json index fb18cc6ceb..0baf5d2581 100644 --- a/examples/compiled/trellis_stacked_bar.vg.json +++ b/examples/compiled/trellis_stacked_bar.vg.json @@ -152,20 +152,7 @@ }, "offset": 10, "orient": "top", - "style": "guide-label", - "encode": { - "update": { - "fontWeight": { - "value": "normal" - }, - "angle": { - "value": 0 - }, - "fontSize": { - "value": 10 - } - } - } + "style": "guide-label" }, "encode": { "update": { diff --git a/src/compile/layout/header.ts b/src/compile/layout/header.ts index aec54baaa2..e5cc45b142 100644 --- a/src/compile/layout/header.ts +++ b/src/compile/layout/header.ts @@ -3,6 +3,7 @@ */ import {FacetFieldDef} from '../../facet'; import {field} from '../../fielddef'; +import {keys} from '../../util'; import {AxisOrient, VgAxis} from '../../vega.schema'; import {formatSignalRef} from '../common'; import {Model} from '../model'; @@ -62,6 +63,14 @@ export function getTitleGroup(model: Model, channel: HeaderChannel) { const title = model.component.layoutHeaders[channel].title; const textOrient = channel === 'row' ? 'vertical' : undefined; + const update = { + align: {value: 'center'}, + text: {value: title}, + ...(textOrient === 'vertical' ? {angle: {value: 270}}: {}), + // TODO*https://github.com/vega/vega-lite/issues/2446): add title* properties (e.g., titleAlign) + // also make sure that guide-title config override these Vega-lite default + }; + return { name: model.getName(`${channel}_title`), role: `${channel}-title`, @@ -70,14 +79,7 @@ export function getTitleGroup(model: Model, channel: HeaderChannel) { type: 'text', role: `${channel}-title-text`, style: 'guide-title', - encode: { - update: { - // TODO: add title align - align: {value: 'center'}, - text: {value: title}, - ...(textOrient === 'vertical' ? {angle: {value: 270}} : {}), - } - } + ...(keys(update).length > 0 ? {encode: {update}} : {}) }] }; } @@ -89,22 +91,20 @@ export function getHeaderGroup(model: Model, channel: HeaderChannel, headerType: const {facetFieldDef} = layoutHeader; const format = facetFieldDef.header ? facetFieldDef.header.format : undefined; + const update = { + ... (channel === 'row' ? { + align: {value: 'right'}, + baseline: {value: 'middle'} + } : {}) + // TODO(https://github.com/vega/vega-lite/issues/2446): apply label* (e.g, labelAlign, labelBaseline) here + }; + title = { text: formatSignalRef(facetFieldDef, format, 'parent', model.config), offset: 10, orient: channel === 'row' ? 'left' : 'top', style: 'guide-label', - encode: { - update: { - fontWeight: {value: 'normal'}, - angle: {value: 0}, - fontSize: {value: 10}, // default label font size - ... (channel === 'row' ? { - align: {value: 'right'}, - baseline: {value: 'middle'} - } : {}) - } - } + ...(keys(update).length > 0 ? {encode: {update}} : {}) }; }