Skip to content

Commit

Permalink
add missing axis/legend config (#2359)
Browse files Browse the repository at this point in the history 
* add new axis/legend config to interface

* update doc and schema

* fix comments
  • Loading branch information
@YuhanLu @kanitw
YuhanLu authored and kanitw committed May 11, 2017
1 parent c4566ec commit eba0af0
Show file tree
Hide file tree
Showing 4 changed files with 206 additions and 15 deletions.
101 changes: 100 additions & 1 deletion build/vega-lite-schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -763,6 +763,10 @@
"minimum": 0,
"type": "integer"
},
"tickExtra": {
"description": "Boolean flag indicating if an extra axis tick should be added for the initial position of the axis. This flag is useful for styling axes for `band` scales such that ticks are placed on band boundaries rather in the middle of a band. Use in conjunction with `\"bandPostion\": 1` and an axis `\"padding\"` value of `0`.",
"type": "boolean"
},
"tickSize": {
"description": "The size, in pixels, of major, minor and end ticks.\n\n__Default value:__ derived from [axis config](config.html#axis-config)'s `tickSize` (`6` by default).",
"minimum": 0,
Expand All @@ -776,6 +780,14 @@
"description": "A title for the field.\n\n__Default value:__ derived from the field's name and transformation function applied e.g, \"field_name\", \"SUM(field_name)\", \"BIN(field_name)\", \"YEAR(field_name)\".",
"type": "string"
},
"titleAlign": {
"description": "Horizontal text alignment of axis titles.",
"type": "string"
},
"titleAngle": {
"description": "Angle in degrees of axis titles.",
"type": "number"
},
"titleMaxLength": {
"description": "Max length for axis title if the title is automatically generated from the field's description. By default, this is automatically based on cell size and characterWidth property.\n\n__Default value:__ automatically determined based on the cell size (`config.cell.width`, `config.cell.height`)",
"minimum": 0,
Expand Down Expand Up @@ -813,6 +825,10 @@
"AxisConfig": {
"additionalProperties": false,
"properties": {
"bandPosition": {
"description": "An interpolation fraction indicating where, for `band` scales, axis ticks should be positioned. A value of `0` places ticks at the left edge of their bands. A value of `0.5` places ticks in the middle of their bands.",
"type": "number"
},
"domain": {
"description": "A boolean flag indicating if the domain (the axis baseline) should be included as part of the axis (default true).",
"type": "boolean"
Expand Down Expand Up @@ -875,6 +891,10 @@
"description": "Maximum allowed pixel width of axis tick labels.",
"type": "number"
},
"labelPadding": {
"description": "Padding in pixels between axis ticks and tick labels.",
"type": "number"
},
"labels": {
"description": "A boolean flag indicating if labels should be included as part of the axis (default true).\n\n__Default value:__ derived from [axis config](config.html#axis-config)'s `labels` (`true` by default).",
"type": "boolean"
Expand All @@ -895,6 +915,14 @@
"description": "The color of the axis's tick.",
"type": "string"
},
"tickExtra": {
"description": "Boolean flag indicating if an extra axis tick should be added for the initial position of the axis. This flag is useful for styling axes for `band` scales such that ticks are placed on band boundaries rather in the middle of a band. Use in conjunction with `\"bandPostion\": 1` and an axis `\"padding\"` value of `0`.",
"type": "boolean"
},
"tickRound": {
"description": "Boolean flag indicating if pixel position values should be rounded to the nearest integer.",
"type": "boolean"
},
"tickSize": {
"description": "The size, in pixels, of major, minor and end ticks.\n\n__Default value:__ derived from [axis config](config.html#axis-config)'s `tickSize` (`6` by default).",
"minimum": 0,
Expand All @@ -909,6 +937,18 @@
"description": "Boolean value that determines whether the axis should include ticks.",
"type": "boolean"
},
"titleAlign": {
"description": "Horizontal text alignment of axis titles.",
"type": "string"
},
"titleAngle": {
"description": "Angle in degrees of axis titles.",
"type": "number"
},
"titleBaseline": {
"description": "Vertical text baseline for axis titles.",
"type": "string"
},
"titleColor": {
"description": "Color of the title, can be in hex color code or regular color name.",
"type": "string"
Expand Down Expand Up @@ -941,6 +981,14 @@
"titlePadding": {
"description": "The padding, in pixels, between title and axis.",
"type": "number"
},
"titleX": {
"description": "X-coordinate of the axis title relative to the axis group.",
"type": "number"
},
"titleY": {
"description": "Y-coordinate of the axis title relative to the axis group.",
"type": "number"
}
},
"type": "object"
Expand Down Expand Up @@ -2988,6 +3036,10 @@
"description": "Padding (in pixels) between legend entries in a symbol legend.",
"type": "number"
},
"fillColor": {
"description": "Background fill color for the full legend.",
"type": "string"
},
"format": {
"description": "The formatting pattern for labels. This is D3's [number format pattern](https://github.com/mbostock/d3/wiki/Formatting) for quantitative fields and D3's [time format pattern](https://github.com/mbostock/d3/wiki/Time-Formatting) for time field.\n\n__Default value:__ derived from [numberFormat](config.html#format) config for quantitative fields and from [timeFormat](config.html#format) config for temporal fields.",
"type": "string"
Expand All @@ -3012,6 +3064,10 @@
"description": "A title for the field.\n\n__Default value:__ derived from the field's name and transformation function applied e.g, \"field_name\", \"SUM(field_name)\", \"BIN(field_name)\", \"YEAR(field_name)\".",
"type": "string"
},
"titleAlign": {
"description": "Horizontal text alignment for legend titles.",
"type": "string"
},
"type": {
"description": "The type of the legend. Use `symbol` to create a discrete legend and `gradient` for a continuous color gradient.",
"enum": [
Expand Down Expand Up @@ -3054,15 +3110,35 @@
"LegendConfig": {
"additionalProperties": false,
"properties": {
"cornerRadius": {
"description": "Corner radius for the full legend.",
"type": "number"
},
"entryPadding": {
"description": "Padding (in pixels) between legend entries in a symbol legend.",
"type": "number"
},
"fillColor": {
"description": "Background fill color for the full legend.",
"type": "string"
},
"gradientHeight": {
"description": "The height of the gradient, in pixels.",
"minimum": 0,
"type": "number"
},
"gradientLabelBaseline": {
"description": "Text baseline for color ramp gradient labels.",
"type": "string"
},
"gradientLabelLimit": {
"description": "The maximum allowed length in pixels of color ramp gradient labels.",
"type": "number"
},
"gradientLabelOffset": {
"description": "Vertical offset in pixels for color ramp gradient labels.",
"type": "number"
},
"gradientStrokeColor": {
"description": "The color of the gradient stroke, can be in hex color code or regular color name.",
"type": "string"
Expand Down Expand Up @@ -3123,6 +3199,21 @@
"description": "Whether month names and weekday names should be abbreviated.\n\n__Default value:__ `false`",
"type": "boolean"
},
"strokeColor": {
"description": "Border stroke color for the full legend.",
"type": "string"
},
"strokeDash": {
"description": "Border stroke dash pattern for the full legend.",
"items": {
"type": "number"
},
"type": "array"
},
"strokeWidth": {
"description": "Border stroke width for the full legend.",
"type": "number"
},
"symbolColor": {
"description": "The color of the legend symbol,",
"type": "string"
Expand All @@ -3141,8 +3232,16 @@
"description": "Default shape type (such as \"circle\") for legend symbols.",
"type": "string"
},
"titleAlign": {
"description": "Horizontal text alignment for legend titles.",
"type": "string"
},
"titleBaseline": {
"description": "Optional mark property definitions for custom legend styling.\nVertical text baseline for legend titles.",
"type": "string"
},
"titleColor": {
"description": "Optional mark property definitions for custom legend styling.\nThe color of the legend title, can be in hex color code or regular color name.",
"description": "The color of the legend title, can be in hex color code or regular color name.",
"type": "string"
},
"titleFont": {
Expand Down
12 changes: 6 additions & 6 deletions site/docs/axis.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ To customize axis, an `axis` object can contain the following groups of properti

### Labels

{% include table.html props="labels,format,labelAngle" source= "Axis" %}
{% include table.html props="labels,format,labelAngle,labelPadding" source= "Axis" %}

### Ticks

{% include table.html props="ticks,labelPadding,tickCount,tickSize,values" source="Axis" %}
{% include table.html props="ticks,tickExtra,labelPadding,tickCount,tickSize,values" source="Axis" %}

### Title

{% include table.html props="title,maxExtent,minExtent" source="Axis" %}
{% include table.html props="title,titleAlign,titleAngle,maxExtent,minExtent" source="Axis" %}

{:#axis-config}
## Axis Config
Expand All @@ -72,7 +72,7 @@ To provide themes for all axes, the axis config `config: {axis: {...}}` can cont

### General

{% include table.html props="domain,domainColor,domainWidth" source="AxisConfig" %}
{% include table.html props="bandPosition,domain,domainColor,domainWidth,titleX,titleY" source="AxisConfig" %}

### Grid

Expand All @@ -84,8 +84,8 @@ To provide themes for all axes, the axis config `config: {axis: {...}}` can cont

### Ticks

{% include table.html props="tickColor,labelColor,labelFont,labelFontSize,labelLimit,tickWidth" source="AxisConfig" %}
{% include table.html props="tickColor,tickRound,labelColor,labelFont,labelFontSize,labelLimit,tickWidth" source="AxisConfig" %}

### Title

{% include table.html props="titleColor,titleFont,titleLimit,titleFontWeight,titleFontSize,titlePadding,titleMaxLength" source="AxisConfig" %}
{% include table.html props="titleBaseline,titleColor,titleFont,titleLimit,titleFontWeight,titleFontSize,titlePadding,titleMaxLength" source="AxisConfig" %}
10 changes: 5 additions & 5 deletions site/docs/legend.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ Legend properties will apply to the current encoding channel only. Axis properti

#### General

{% include table.html props="offset,padding,values,format,entryPadding,zindex" source="Legend" %}
{% include table.html props="fillColor,offset,padding,values,format,entryPadding,zindex" source="Legend" %}

#### Title

{% include table.html props="title" source="Legend" %}
{% include table.html props="title,titleAlign" source="Legend" %}


{:#legend-config}
Expand All @@ -65,7 +65,7 @@ Legend Config will apply to the all encoding channel has `legend`. Legend Config

#### General

{% include table.html props="orient,offset" source="LegendConfig" %}
{% include table.html props="cornerRadius,orient,offset,strokeColor,strokeDash,strokeWidth" source="LegendConfig" %}

#### Labels

Expand All @@ -77,9 +77,9 @@ Legend Config will apply to the all encoding channel has `legend`. Legend Config

#### Title

{% include table.html props="titleColor,titleFont,titleFontSize,titleFontWeight,titleLimit,titlePadding" source="LegendConfig" %}
{% include table.html props="titleBaseline,titleColor,titleFont,titleFontSize,titleFontWeight,titleLimit,titlePadding" source="LegendConfig" %}

#### Gradient

{% include table.html props="gradientHeight,gradientStrokeColor,gradientStrokeWidth,gradientWidth" source="LegendConfig" %}
{% include table.html props="gradientLabelBaseline,gradientLabelLimit,gradientLabelOffset,gradientHeight,gradientStrokeColor,gradientStrokeWidth,gradientWidth" source="LegendConfig" %}

Loading

0 comments on commit eba0af0

Please sign in to comment.