Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demo page update #164

Closed
wants to merge 5 commits into from
Closed

Demo page update #164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9eaf227
Merge branch 'grid-formatting'
clubajax Aug 11, 2017
db53900
Merge remote-tracking branch 'gitbrent/master' into fork-sync
clubajax Aug 16, 2017
c508692
Merge remote-tracking branch 'gitbrent/master' into fork-sync
clubajax Aug 24, 2017
91f24a9
persist tab selection
clubajax Aug 25, 2017
e2c55b4
Merge branch 'master' into demo-page-update
gitbrent Sep 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ pptx.save( 'http', streamCallback );
pptx.save( 'jszip', saveCallback, 'base64' );
```

Saving multiple Presentations:
Saving multiple Presentations:
* In order to generate a new, unique Presentation just create a new instance of the library then add objects and save as normal.

```javascript
Expand Down Expand Up @@ -329,7 +329,7 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
* 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 |
| Option | Type | Unit | Default | Description | Possible Values |
| :-------------- | :------ | :------ | :-------- | :--------------------------------- | :--------------- |
| `x` | number | inches | `1.0` | horizontal location | 0-n OR 'n%'. (Ex: `{x:'50%'}` places object in middle of the Slide) |
| `y` | number | inches | `1.0` | vertical location | 0-n OR 'n%'. |
Expand All @@ -339,7 +339,7 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
| `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 }` |
| `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` |
Expand All @@ -354,44 +354,44 @@ slide.addChart({TYPE}, {DATA}, {OPTIONS});
| `titleRotate` | integer | degrees | | title rotation degrees | 0-360. Ex: `{ titleRotate:45 }` |

### Chart Axis Options
| Option | Type | Unit | Default | Description | Possible Values |
| Option | Type | Unit | Default | Description | Possible Values |
| :--------------------- | :------ | :------ | :----------- | :--------------------------- | :----------------------------------------- |
| `axisLineColor` | string | | `000000` | cat/val axis line color | hex color code. Ex: `{ axisLineColor:'0088CC' }` |
| `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 }` |
| `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 }` |
| `catAxisLineShow` | boolean | | true | show/hide category-axis line | `true` or `false` |
| `catAxisOrientation` | string | | `minMax` | category-axis orientation | `maxMin` (high->low) or `minMax` (low->high) |
| `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 |
| `catAxisOrientation` | string | | `minMax` | category-axis orientation | `maxMin` (high->low) or `minMax` (low->high) |
| `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 (vert) title | `true` or `false`. Ex:`{ showCatAxisTitle:true }` |
| `showValAxisTitle` | boolean | | `false` | show values (horiz) 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) |
| `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 value-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 }` |
| `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 }` |
| `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 }` |
| `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 | object with properties `size` (pt), `color` and `style` (`'solid'`, `'dash'` or `'dot'`) or `'none'` to hide |

### Chart Data Options
| Option | Type | Unit | Default | Description | Possible Values |
| :--------------------- | :------ | :------ | :-------- | :------------------------- | :----------------------------------------- |
| `barDir` | string | | `col` | bar direction | (*Bar Chart*) `bar` (horizontal) or `col` (vertical). Ex: `{barDir:'bar'}` |
| `barDir` | string | | `col` | bar direction | (*Bar Chart*) `bar` (horizontal) or `col` (vertical). Ex: `{barDir:'bar'}` |
| `barGapWidthPct` | number | percent | `150` | width % between bar groups | (*Bar Chart*) 0-999. Ex: `{ barGapWidthPct:50 }` |
| `barGrouping` | string | |`clustered`| bar grouping | (*Bar Chart*) `clustered` or `stacked` or `percentStacked`. |
| `dataBorder` | object | | | data border | object with `pt` and `color` values. Ex: `border:{pt:'1', color:'f1f1f1'}` |
Expand Down
2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pptxgen.bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 8 additions & 10 deletions dist/pptxgen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2204,9 +2204,9 @@ var PptxGenJS = function(){
strXml += '<a:ln w="'+ (rel.opts.dataBorder.pt * ONEPT) +'" cap="flat"><a:solidFill>'+ createColorElement(rel.opts.dataBorder.color) +'</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>';
}
if ( rel.opts.lineShadow !== 'none' ) {
strXml += '<a:effectLst>';
strXml += ' <a:effectLst>';
strXml += createShadowElement(rel.opts.lineShadow || {}, DEF_LINE_SHADOW);
strXml += '</a:effectLst>';
strXml += ' </a:effectLst>';
}
strXml += ' </c:spPr>';

Expand All @@ -2225,18 +2225,16 @@ var PptxGenJS = function(){

// Color bar chart bars various colors
// Allow users with a single data set to pass their own array of colors (check for this using != ours)
if (( rel.data.length === 1 || rel.opts.valueBarColors ) && rel.opts.chartColors != BARCHART_COLORS ) {
if ( rel.data.length === 1 && rel.opts.chartColors != BARCHART_COLORS ) {
// Series Data Point colors
obj.values.forEach(function (value, index) {
var invert = rel.opts.invertedColors ? 0 : 1;
var colors = value < 0 ? rel.opts.invertedColors : rel.opts.chartColors;
strXml += ' <c:dPt>';
strXml += ' <c:idx val="'+index+'"/>';
strXml += ' <c:invertIfNegative val="'+invert+'"/>';
strXml += ' <c:invertIfNegative val="1"/>';
strXml += ' <c:bubble3D val="0"/>';
strXml += ' <c:spPr>';
strXml += ' <a:solidFill>';
strXml += ' <a:srgbClr val="'+(colors[index % colors.length])+'"/>';
strXml += ' <a:srgbClr val="'+rel.opts.chartColors[index % rel.opts.chartColors.length]+'"/>';
strXml += ' </a:solidFill>';
strXml += ' <a:effectLst>';
strXml += ' <a:outerShdw blurRad="38100" dist="23000" dir="5400000" algn="tl">';
Expand Down Expand Up @@ -2335,8 +2333,8 @@ var PptxGenJS = function(){
strXml += ' <c:numFmt formatCode="General" sourceLinked="0"/>';
strXml += ' <c:majorTickMark val="out"/>';
strXml += ' <c:minorTickMark val="none"/>';
strXml += ' <c:tickLblPos val="'+ (rel.opts.catAxisLabelPos || rel.opts.barDir == 'col' ? 'low' : 'nextTo') +'"/>';
strXml += ' <c:spPr>';
strXml += ' <c:tickLblPos val="'+ (rel.opts.barDir == 'col' ? 'low' : 'nextTo') +'"/>';
strXml += ' <c:spPr>';
strXml += ' <a:ln w="12700" cap="flat">';
if ( !!rel.opts.catAxisLineShow || typeof rel.opts.catAxisLineShow === 'undefined' ) {
strXml += '<a:solidFill>';
Expand All @@ -2349,7 +2347,7 @@ var PptxGenJS = function(){
strXml += ' <a:prstDash val="solid"/>';
strXml += ' <a:round/>';
strXml += ' </a:ln>';
strXml += ' </c:spPr>';
strXml += ' </c:spPr>';
strXml += ' <c:txPr>';
strXml += ' <a:bodyPr rot="0"/>';
strXml += ' <a:lstStyle/>';
Expand Down
14 changes: 8 additions & 6 deletions examples/pptxgenjs-demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,18 @@ code {
padding: 0 !important;
border-bottom: 1px solid #d5d5d5;
border-radius: 5px 5px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.modernTabs > ul > li {
box-sizing: border-box;
list-style-type:none;
padding: 15px 10px;
}
.modernTabs > ul > li > a{
cursor: pointer;
text-shadow: 2px 2px #efefef;
width: 14.2%;
text-align: center;
white-space: nowrap;
display: inline-block; list-style-type:none;
padding: 15px 10px;
text-decoration: none;
font-size: 14px;
color: #a7a7a7;
text-transform: uppercase;
Expand Down
Loading