+ Add properties for hiding facet's rules/grid and docs for all `cell…

….facet/grid` properties (still need to determine how should we call these properties though) – fixes #896
vega · Dec 29, 2015 · 01652f9 · 01652f9
1 parent 0299ee0
commit 01652f9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -33,6 +33,15 @@ the size of one plot inside the trellis plots.
 | width         | Integer       | The width of the visualization for a single cell (200 pixels by default).  This property is used only when `x` uses non-ordinal scale.  When `x` uses ordinal scale, the width is determined by x-scale's `bandWidth`.  |
 | height        | Integer       | The height of the visualization for a single cell (200 pixels by default).  This property is used only when `y` uses non-ordinal scale.  When `y` uses ordinal scale, the height is determined by y-scale's `bandWidth`. |
 
+the following grid properties:
+
+| Property      | Type          | Description    |
+| :------------ |:-------------:| :------------- |
+| gridShow      | Boolean       | Whether to show facet rules.  (True by default)  |
+| gridColor     | Color         | Color of the rules between facets. |
+| gridOpacity   | Number        | Opacity of the rules between facets. |
+| gridOffset    | Number        | Offset for rules between facets.  |
+
 and the following fill and stroke properties:
 
 | Property      | Type          | Description    |

diff --git a/src/compiler/facet.ts b/src/compiler/facet.ts
@@ -60,8 +60,9 @@ export function facetMixins(model: Model, marks) {
       // If has X, prepend a group for shared x-axes in the root group's marks
       rootMarks.push(getXAxesGroup(model, cellWidth, hasCol));
     }
-
-    rootMarks.push(getRowRulesGroup(model, cellHeight));
+    if (model.cellConfig('gridShow')) {
+      rootMarks.push(getRowRulesGroup(model, cellHeight));
+    }
   } else { // doesn't have row
     if (model.has(X)) { // keep x axis in the cell
       cellAxes.push(compileAxis(X, model));
@@ -87,8 +88,9 @@ export function facetMixins(model: Model, marks) {
       // If has Y, prepend a group for shared y-axes in the root group's marks
       rootMarks.push(getYAxesGroup(model, cellHeight, hasRow));
     }
-    // TODO: add properties to make rule optional
-    rootMarks.push(getColumnRulesGroup(model, cellWidth));
+    if (model.cellConfig('gridShow')) {
+      rootMarks.push(getColumnRulesGroup(model, cellWidth));
+    }
   } else { // doesn't have column
     if (model.has(Y)) { // keep y axis in the cell
       cellAxes.push(compileAxis(Y, model));

diff --git a/src/schema/config.cell.schema.ts b/src/schema/config.cell.schema.ts
@@ -3,6 +3,7 @@ export interface CellConfig {
   height?: number;
   padding?: number;
 
+  gridShow?: boolean;
   gridColor?: string;
   gridOpacity?: number;
   gridOffset?: number;
@@ -32,6 +33,10 @@ export const cellConfig = {
       default: 16,
       description: 'default padding between facets.'
     },
+    gridShow: {
+      type: 'boolean',
+      default: true
+    },
     gridColor: {
       type: 'string',
       role: 'color',