Merge remote-tracking branch 'gitbrent/master' into fork-sync

# Conflicts: # README.md # dist/pptxgen.bundle.js # dist/pptxgen.bundle.js.map # dist/pptxgen.js # examples/pptxgenjs-demo.js
gitbrent · Aug 16, 2017 · db53900 · db53900
2 parents 9eaf227 + 4d53ad0
commit db53900
Show file tree

Hide file tree

Showing 6 changed files with 504 additions and 266 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,8 +8,10 @@
 - Shadow corrections bugfix [\#136](https://github.com/gitbrent/PptxGenJS/pull/136) ([kajda90](https://github.com/kajda90))
 
 **Implemented Enhancements:**
-
-
+- New chart feature: layout option [\#141](https://github.com/gitbrent/PptxGenJS/pull/141) ([kajda90](https://github.com/kajda90))
+- Charts: Optional displaying gridlines and axes [\#143](https://github.com/gitbrent/PptxGenJS/pull/143) ([kajda90](https://github.com/kajda90))
+- New chart type: doughnut charts [\#142](https://github.com/gitbrent/PptxGenJS/pull/142) ([kyrrigle](https://github.com/kyrrigle))
+- New chart features: Axis Titles [\#144](https://github.com/gitbrent/PptxGenJS/pull/144) ([kyrrigle](https://github.com/kyrrigle))
 
 
 

diff --git a/README.md b/README.md
@@ -322,21 +322,22 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
 
 ### Chart Types
 * Chart type can be any one of `pptx.charts`
-* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.PIE`
+* Currently: `pptx.charts.AREA`, `pptx.charts.BAR`, `pptx.charts.LINE`, `pptx.charts.PIE`, `pptx.charts.DOUGHNUT`
 
 ### Chart Size/Formatting Options
 | Option          | Type    | Unit    | Default   | Description           | Possible Values  |
-| :-------------- | :------ | :------ | :-------- | :-------------------- | :--------------- |
+| :-------------- | :------ | :------ | :-------- | :--------------------------------- | :--------------- |
 | `x`             | number  | inches  | `1.0`     | horizontal location   | 0-n OR 'n%'. (Ex: `{x:'50%'}` will place object in the middle of the Slide) |
 | `y`             | number  | inches  | `1.0`     | vertical location     | 0-n OR 'n%'. |
 | `w`             | number  | inches  | `50%`     | width                 | 0-n OR 'n%'. (Ex: `{w:'50%'}` will make object 50% width of the Slide) |
 | `h`             | number  | inches  | `50%`     | height                | 0-n OR 'n%'. |
 | `border`        | object  |         |           | chart border          | object with `pt` and `color` values. Ex: `border:{pt:'1', color:'f1f1f1'}` |
-| `chartColors`        | array  |         |       | data color            | array of hex color codes. Ex: `['0088CC','FFCC00']` |
-| `invertedColors`| array   |         |           | colors when value is < 0 | array of hex color codes. Ex: `['0088CC','FFCC00']` |
+| `chartColors`   | array   |         |           | data colors                        | array of hex color codes. Ex: `['0088CC','FFCC00']` |
 | `chartColorsOpacity` | number | percent | `100` | data color opacity percent | 1-100. Ex: `{ chartColorsOpacity:50 }` |
 | `fill`          | string  |         |           | fill/background color | hex color code. Ex: `{ fill:'0088CC' }` |
+| `holeSize`      | number  | percent | `50`      | doughnut hole size    | 1-100. Ex: `{ holeSize:50 }` |
 | `legendPos`     | string  |         | `r`       | chart legend position | `b` (bottom), `tr` (top-right), `l` (left), `r` (right), `t` (top) |
+| `layout`        | object  |         |           | positioning plot within chart area | object with `x`, `y`, `w` and `h` props, all in range 0-1 (proportionally related to the chart size). Ex: `{x: 0, y: 0, w: 1, h: 1}` fully expands plot to the chart area |
 | `showLabel`     | boolean |         | `false`   | show data labels      | `true` or `false` |
 | `showLegend`    | boolean |         | `false`   | show chart legend     | `true` or `false` |
 | `showPercent`   | boolean |         | `false`   | show data percent     | `true` or `false` |
@@ -346,26 +347,39 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
 | `titleColor`    | string  |         | `000000`  | title color           | hex color code. Ex: `{ titleColor:'0088CC' }` |
 | `titleFontFace` | string  |         | `Arial`   | font face             | font name. Ex: `{ titleFontFace:'Arial' }` |
 | `titleFontSize` | number  | points  | `18`      | font size             | 1-256. Ex: `{ titleFontSize:12 }` |
+| `titleRotate`   | integer | degrees |           | title rotation degrees             | 0-360. Ex: `{ titleRotate:45 }` |
 
 ### Chart Axis Options
-| Option                 | Type    | Unit    | Default   | Description             | Possible Values                            |
-| :--------------------- | :------ | :------ | :-------- | :---------------------- | :----------------------------------------- |
-| `axisLabelFormatCode`  | string  |         |           | format to show axis value  | format string. Ex: `{ axisLabelFormatCode:'#,##0' }` [MicroSoft Number Format Codes](https://support.office.com/en-us/article/Number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68)  |
-| `axisLineColor`        | string  |         | `888888`  | axis line color         | format string. Ex: `{ axisLineColor:'00FFFF' }` |
-| `catAxisLabelColor`    | string  |         | `000000`  | category-axis color     | hex color code. Ex: `{ catAxisLabelColor:'0088CC' }`   |
-| `catAxisLabelFontFace` | string  |         | `Arial`   | category-axis font face | font name. Ex: `{ titleFontFace:'Arial' }` |
-| `catAxisLabelFontSize` | number  | points  | `18`      | category-axis font size | 1-256. Ex: `{ titleFontSize:12 }`          |
+| Option                 | Type    | Unit    | Default   | Description              | Possible Values                            |
+| :--------------------- | :------ | :------ | :-------- | :----------------------- | :----------------------------------------- |
+| `catAxisHidden`        | boolean |         | `false`   | hide category-axis       | `true` or `false`   |
+| `catAxisLabelColor`    | string  |         | `000000`  | category-axis color      | hex color code. Ex: `{ catAxisLabelColor:'0088CC' }`   |
+| `catAxisLabelFontFace` | string  |         | `Arial`   | category-axis font face  | font name. Ex: `{ titleFontFace:'Arial' }` |
+| `catAxisLabelFontSize` | number  | points  | `18`      | category-axis font size  | 1-256. Ex: `{ titleFontSize:12 }`          |
 | `catAxisOrientation`   | string  |         | `minMax`  | category-axis orientation | `maxMin` (high->low) or `minMax` (low->high) |
-| `gridLineColor`        | string  |         | `888888`  | grid-line color         | hex color code. Ex: `{ gridLineColor:'0088CC' }`       |
-| `catAxisLabelPos`      | string  | string  | `nextTo`  | axis label position     | `low`, `high`, or `nextTo` . Ex: `{ tickLblPos: 'low' }`      |
-| `valAxisLabelColor`    | string  |         | `000000`  | value-axis color        | hex color code. Ex: `{ valAxisLabelColor:'0088CC' }` |
-| `valAxisLabelFontFace` | string  |         | `Arial`   | value-axis font face    | font name. Ex: `{ titleFontFace:'Arial' }`   |
-| `valAxisLabelFontSize` | number  | points  | `18`      | value-axis font size    | 1-256. Ex: `{ titleFontSize:12 }`            |
+| `catAxisTitle`         | string  |         | `Axis Title` | axis title   | a string. Ex: `{ catAxisTitle:'Regions' }` |
+| `catAxisTitleColor`    | string  |         | `000000`     | title color           | hex color code. Ex: `{ catAxisTitleColor:'0088CC' }` |
+| `catAxisTitleFontFace` | string  |         | `Arial`      | font face             | font name. Ex: `{ catAxisTitleFontFace:'Arial' }` |
+| `catAxisTitleFontSize` | number  | points  |              | font size    | 1-256. Ex: `{ catAxisTitleFontSize:12 }` |
+| `catAxisTitleRotate`   | integer | degrees |              | title rotation degrees           | 0-360. Ex: `{ catAxisTitleRotate:45 }` |
+| `catGridLine`          | object  |         | `none`    | category grid line style  | object with properties `size` (pt), `color` and `style` (`'solid'`, `'dash'` or `'dot'`) or `'none'` to hide |
+| `showCatAxisTitle`     | boolean |         | `false`   | show category (vertical) title | `true` or `false`.  Ex:`{ showCatAxisTitle:true }` |
+| `showValAxisTitle`     | boolean |         | `false`   | show values (horizontal) title | `true` or `false`.  Ex:`{ showValAxisTitle:true }` |
+| `valAxisHidden`        | boolean |         | `false`   | hide value-axis          | `true` or `false`   |
+| `valAxisLabelColor`    | string  |         | `000000`  | value-axis color         | hex color code. Ex: `{ valAxisLabelColor:'0088CC' }` |
+| `valAxisLabelFontFace` | string  |         | `Arial`   | value-axis font face     | font name. Ex: `{ titleFontFace:'Arial' }`   |
+| `valAxisLabelFontSize` | number  | points  | `18`      | value-axis font size     | 1-256. Ex: `{ titleFontSize:12 }`            |
 | `valAxisLabelFormatCode` | string |        | `General` | value-axis number format | format string. Ex: `{ axisLabelFormatCode:'#,##0' }` [MicroSoft Number Format Codes](https://support.office.com/en-us/article/Number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68) |
-| `valAxisLineShow`      | boolean |         | true      | show/hide axis line     | `true` or `false` |
 | `valAxisMajorUnit`     | number  | float   | `1.0`     | value-axis tick steps    | Float or whole number. Ex: `{ majorUnit:0.2 }`      |
 | `valAxisMaxVal`        | number  |         |           | value-axis maximum value | 1-N. Ex: `{ valAxisMaxVal:125 }` |
-| `valAxisOrientation`   | string  |         | `minMax`  | value-axis orientation  | `maxMin` (high->low) or `minMax` (low->high) |
+| `valAxisMinVal`        | number  |         |           | value-axis minimum value | 1-N. Ex: `{ valAxisMinVal: -10 }` |
+| `valAxisOrientation`   | string  |         | `minMax`  | value-axis orientation   | `maxMin` (high->low) or `minMax` (low->high) |
+| `valAxisTitle`         | string  |         | `Axis Title` | axis title   | a string. Ex: `{ valAxisTitle:'Sales (USD)' }` |
+| `valAxisTitleColor`    | string  |         | `000000`     | title color           | hex color code. Ex: `{ valAxisTitleColor:'0088CC' }` |
+| `valAxisTitleFontFace` | string  |         | `Arial`      | font face             | font name. Ex: `{ valAxisTitleFontFace:'Arial' }` |
+| `valAxisTitleFontSize` | number  | points  |              | font size    | 1-256. Ex: `{ valAxisTitleFontSize:12 }` |
+| `valAxisTitleRotate`   | integer | degrees |              | title rotation degrees           | 0-360. Ex: `{ valAxisTitleRotate:45 }` |
+| `valGridLine`          | object  |         |           | value grid line style    | _the same as `catGridLine`_ |
 
 ### Chart Data Options
 | Option                 | Type    | Unit    | Default   | Description                | Possible Values                            |
@@ -381,7 +395,6 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
 | `dataLabelPosition`    | string  |         | `bestFit` | data label position        | `bestFit`,`b`,`ctr`,`inBase`,`inEnd`,`l`,`outEnd`,`r`,`t` |
 | `lineDataSymbol`       | string  |         | `circle`  | symbol used on line marker | `circle`,`dash`,`diamond`,`dot`,`none`,`square`,`triangle` |
 | `lineDataSymbolSize`   | number  | points  | `6`       | size of line data symbol   | 1-256. Ex: `{ lineDataSymbolSize:12 }` |
-| `valueBarColors`       | boolean |         | `false`   | forces chartColors on multi-data-series   | `true` or `false` |
 
 ### Chart Examples
 ```javascript