diff --git a/demos/modules/demo_chart.mjs b/demos/modules/demo_chart.mjs index 65133412b..5bb208d26 100644 --- a/demos/modules/demo_chart.mjs +++ b/demos/modules/demo_chart.mjs @@ -3,8 +3,8 @@ * AUTH: Brent Ely (https://github.com/gitbrent/) * DESC: Common test/demo slides for all library features * DEPS: Used by various demos (./demos/browser, ./demos/node, etc.) - * VER.: 3.11.0 - * BLD.: 20220806 + * VER.: 3.12.0 + * BLD.: 20230116 */ import { BASE_TABLE_OPTS, BASE_TEXT_OPTS_L, BASE_TEXT_OPTS_R, FOOTER_TEXT_OPTS, IMAGE_PATHS, TESTMODE } from "./enums.mjs"; @@ -901,8 +901,8 @@ function genSlide07(pptx) { valAxisMaxVal: 1, barDir: "bar", axisLabelFormatCode: "#%", - catGridLine: { color: "D8D8D8", style: "dash", size: 1 }, - valGridLine: { color: "D8D8D8", style: "dash", size: 1 }, + catGridLine: { color: "D8D8D8", style: "dash", size: 1, cap: "round" }, + valGridLine: { color: "D8D8D8", style: "dash", size: 1, cap: "square" }, catAxisLineShow: false, valAxisLineShow: false, barGrouping: "stacked", @@ -1029,6 +1029,7 @@ function genSlide10(pptx) { y: idx < 3 ? 0.5 : idx < 6 ? 2.85 : 5.1, w: 4.25, h: 2.25, + lineCap: 'round', lineDataSymbol: opt, lineDataSymbolSize: idx == 5 ? 9 : idx == 6 ? 12 : null, chartColors: COLORS_VIVID, diff --git a/src/core-enums.ts b/src/core-enums.ts index 83c76b864..81abd4bb5 100644 --- a/src/core-enums.ts +++ b/src/core-enums.ts @@ -18,7 +18,7 @@ export const DEF_CELL_BORDER: BorderProps = { type: 'solid', color: '666666', pt export const DEF_CELL_MARGIN_PT: [number, number, number, number] = [3, 3, 3, 3] // TRBL-style // DEPRECATED 3.8.0 export const DEF_CELL_MARGIN_IN: [number, number, number, number] = [0.05, 0.1, 0.05, 0.1] // "Normal" margins in PPT-2021 ("Narrow" is `0.05` for all 4) export const DEF_CHART_BORDER: BorderProps = { type: 'solid', color: '363636', pt: 1 } -export const DEF_CHART_GRIDLINE: OptsChartGridLine = { color: '888888', style: 'solid', size: 1 } +export const DEF_CHART_GRIDLINE: OptsChartGridLine = { color: '888888', style: 'solid', size: 1, cap: 'flat' } export const DEF_FONT_COLOR = '000000' export const DEF_FONT_SIZE = 12 export const DEF_FONT_TITLE_SIZE = 18 diff --git a/src/core-interfaces.ts b/src/core-interfaces.ts index 6c94425dd..bb05c2e10 100644 --- a/src/core-interfaces.ts +++ b/src/core-interfaces.ts @@ -1112,6 +1112,8 @@ export interface OptsDataLabelPosition { */ export type ChartAxisTickMark = 'none' | 'inside' | 'outside' | 'cross' +export type ChartLineCap = 'flat' | 'round' | 'square' + export interface OptsChartData { _dataIndex?: number @@ -1147,6 +1149,12 @@ export interface IOptsChartData extends OptsChartData { labels?: string[][] } export interface OptsChartGridLine { + /** + * MS-PPT > Chart format > Format Major Gridlines > Line > Cap type + * - line cap type + * @default flat + */ + cap?: ChartLineCap /** * Gridline color (hex) * @example 'FF3399' @@ -1432,6 +1440,17 @@ export interface IChartPropsChartDoughnut { holeSize?: number } export interface IChartPropsChartLine { + /** + * MS-PPT > Chart format > Format Data Series > Line > Cap type + * - line cap type + * @default flat + */ + lineCap?: ChartLineCap + /** + * MS-PPT > Chart format > Format Data Series > Marker Options > Built-in > Type + * - line dash type + * @default solid + */ lineDash?: 'dash' | 'dashDot' | 'lgDash' | 'lgDashDot' | 'lgDashDotDot' | 'solid' | 'sysDash' | 'sysDot' /** * MS-PPT > Chart format > Format Data Series > Marker Options > Built-in > Type diff --git a/src/gen-charts.ts b/src/gen-charts.ts index 6c81fe1a6..1785c89b7 100644 --- a/src/gen-charts.ts +++ b/src/gen-charts.ts @@ -19,8 +19,8 @@ import { LETTERS, ONEPT, } from './core-enums' -import { IChartOptsLib, ISlideRelChart, ShadowProps, IChartPropsTitle, OptsChartGridLine, IOptsChartData } from './core-interfaces' -import { createColorElement, genXmlColorSelection, convertRotationDegrees, encodeXmlEntities, getUuid, valToPts } from './gen-utils' +import { IChartOptsLib, ISlideRelChart, ShadowProps, IChartPropsTitle, OptsChartGridLine, IOptsChartData, ChartLineCap } from './core-interfaces' +import { createColorElement, genXmlColorSelection, convertRotationDegrees, encodeXmlEntities, getMix, getUuid, valToPts } from './gen-utils' import JSZip from 'jszip' /** @@ -860,11 +860,11 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh if (opts.lineSize === 0) { strXml += '' } else { - strXml += `${createColorElement(seriesColor)}` + strXml += `${createColorElement(seriesColor)}` strXml += '' } } else if (opts.dataBorder) { - strXml += `${createColorElement(opts.dataBorder.color)}` + strXml += `${createColorElement(opts.dataBorder.color)}` } strXml += createShadowElement(opts.shadow, DEF_SHAPE_SHADOW) @@ -1082,7 +1082,7 @@ function makeChartType (chartType: CHART_NAME, data: IOptsChartData[], opts: ICh if (opts.lineSize === 0) { strXml += '' } else { - strXml += `${createColorElement(tmpSerColor)}` + strXml += `${createColorElement(tmpSerColor)}` strXml += `` } @@ -2018,7 +2018,7 @@ function createShadowElement (options: ShadowProps, defaults: object): string { function createGridLineElement (glOpts: OptsChartGridLine): string { let strXml = '' strXml += ' ' - strXml += ` ` + strXml += ` ` strXml += ' ' // should accept scheme colors as implemented in [Pull #135] strXml += ' ' strXml += ' ' @@ -2027,3 +2027,16 @@ function createGridLineElement (glOpts: OptsChartGridLine): string { return strXml } + +function createLineCap(lineCap: ChartLineCap): string { + if (!lineCap || lineCap === 'flat') { + return 'flat'; + } else if (lineCap === 'square') { + return 'sq'; + } else if (lineCap === 'round') { + return 'rnd'; + } else { + const neverLineCap: never = lineCap; + throw new Error(`Invalid chart line cap: ${neverLineCap}`); + } +} diff --git a/src/gen-objects.ts b/src/gen-objects.ts index 4dca3b988..56e2e5047 100644 --- a/src/gen-objects.ts +++ b/src/gen-objects.ts @@ -139,6 +139,10 @@ export function addChartDefinition (target: PresSlide, type: CHART_NAME | IChart console.warn('Warning: chart.gridLine.style options: `solid`, `dash`, `dot`.') delete glOpts.style } + if (glOpts.cap && ['flat', 'square', 'round'].indexOf(glOpts.cap) < 0) { + console.warn('Warning: chart.gridLine.cap options: `flat`, `square`, `round`.') + delete glOpts.cap + } } const chartId = ++_chartCounter diff --git a/src/pptxgen.ts b/src/pptxgen.ts index ae92fc03d..7726eca3a 100644 --- a/src/pptxgen.ts +++ b/src/pptxgen.ts @@ -97,7 +97,7 @@ import * as genMedia from './gen-media' import * as genTable from './gen-tables' import * as genXml from './gen-xml' -const VERSION = '3.12.0-beta-20230116-1801' +const VERSION = '3.12.0-beta-20230122-1830' export default class PptxGenJS implements IPresentationProps { // Property getters/setters diff --git a/types/index.d.ts b/types/index.d.ts index 3ac0b6546..3a1290be8 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for pptxgenjs 3.11.0 +// Type definitions for pptxgenjs 3.12.0 // Project: https://gitbrent.github.io/PptxGenJS/ // Definitions by: Brent Ely // Michael Beaumont @@ -1081,80 +1081,80 @@ declare namespace PptxGenJS { * @default false */ bullet?: - | boolean - | { - /** - * Bullet type - * @default bullet - */ - type?: 'bullet' | 'number' - /** - * Bullet character code (unicode) - * @since v3.3.0 - * @example '25BA' // 'BLACK RIGHT-POINTING POINTER' (U+25BA) - */ - characterCode?: string - /** - * Indentation (space between bullet and text) (points) - * @since v3.3.0 - * @default 27 // DEF_BULLET_MARGIN - * @example 10 // Indents text 10 points from bullet - */ - indent?: number - /** - * Number type - * @since v3.3.0 - * @example 'romanLcParenR' // roman numerals lower-case with paranthesis right - */ - numberType?: - | 'alphaLcParenBoth' - | 'alphaLcParenR' - | 'alphaLcPeriod' - | 'alphaUcParenBoth' - | 'alphaUcParenR' - | 'alphaUcPeriod' - | 'arabicParenBoth' - | 'arabicParenR' - | 'arabicPeriod' - | 'arabicPlain' - | 'romanLcParenBoth' - | 'romanLcParenR' - | 'romanLcPeriod' - | 'romanUcParenBoth' - | 'romanUcParenR' - | 'romanUcPeriod' - /** - * Number bullets start at - * @since v3.3.0 - * @default 1 - * @example 10 // numbered bullets start with 10 - */ - numberStartAt?: number + | boolean + | { + /** + * Bullet type + * @default bullet + */ + type?: 'bullet' | 'number' + /** + * Bullet character code (unicode) + * @since v3.3.0 + * @example '25BA' // 'BLACK RIGHT-POINTING POINTER' (U+25BA) + */ + characterCode?: string + /** + * Indentation (space between bullet and text) (points) + * @since v3.3.0 + * @default 27 // DEF_BULLET_MARGIN + * @example 10 // Indents text 10 points from bullet + */ + indent?: number + /** + * Number type + * @since v3.3.0 + * @example 'romanLcParenR' // roman numerals lower-case with paranthesis right + */ + numberType?: + | 'alphaLcParenBoth' + | 'alphaLcParenR' + | 'alphaLcPeriod' + | 'alphaUcParenBoth' + | 'alphaUcParenR' + | 'alphaUcPeriod' + | 'arabicParenBoth' + | 'arabicParenR' + | 'arabicPeriod' + | 'arabicPlain' + | 'romanLcParenBoth' + | 'romanLcParenR' + | 'romanLcPeriod' + | 'romanUcParenBoth' + | 'romanUcParenR' + | 'romanUcPeriod' + /** + * Number bullets start at + * @since v3.3.0 + * @default 1 + * @example 10 // numbered bullets start with 10 + */ + numberStartAt?: number - // DEPRECATED + // DEPRECATED - /** - * Bullet code (unicode) - * @deprecated v3.3.0 - use `characterCode` - */ - code?: string - /** - * Margin between bullet and text - * @since v3.2.1 - * @deplrecated v3.3.0 - use `indent` - */ - marginPt?: number - /** - * Number to start with (only applies to type:number) - * @deprecated v3.3.0 - use `numberStartAt` - */ - startAt?: number - /** - * Number type - * @deprecated v3.3.0 - use `numberType` - */ - style?: string - } + /** + * Bullet code (unicode) + * @deprecated v3.3.0 - use `characterCode` + */ + code?: string + /** + * Margin between bullet and text + * @since v3.2.1 + * @deplrecated v3.3.0 - use `indent` + */ + marginPt?: number + /** + * Number to start with (only applies to type:number) + * @deprecated v3.3.0 - use `numberStartAt` + */ + startAt?: number + /** + * Number type + * @deprecated v3.3.0 - use `numberType` + */ + style?: string + } /** * Text color * - `HexColor` or `ThemeColor` @@ -1216,23 +1216,23 @@ declare namespace PptxGenJS { */ underline?: { style?: - | 'dash' - | 'dashHeavy' - | 'dashLong' - | 'dashLongHeavy' - | 'dbl' - | 'dotDash' - | 'dotDashHeave' - | 'dotDotDash' - | 'dotDotDashHeavy' - | 'dotted' - | 'dottedHeavy' - | 'heavy' - | 'none' - | 'sng' - | 'wavy' - | 'wavyDbl' - | 'wavyHeavy' + | 'dash' + | 'dashHeavy' + | 'dashLong' + | 'dashLongHeavy' + | 'dbl' + | 'dotDash' + | 'dotDashHeave' + | 'dotDotDash' + | 'dotDotDashHeavy' + | 'dotted' + | 'dottedHeavy' + | 'heavy' + | 'none' + | 'sng' + | 'wavy' + | 'wavyDbl' + | 'wavyHeavy' color?: Color } /** @@ -1901,6 +1901,8 @@ declare namespace PptxGenJS { */ export type ChartAxisTickMark = 'none' | 'inside' | 'outside' | 'cross' + export type ChartLineCap = 'flat' | 'round' | 'square' + export interface OptsChartData { /** * category labels @@ -1930,6 +1932,12 @@ declare namespace PptxGenJS { //color?: string // TODO: WIP: (Pull #727) } export interface OptsChartGridLine { + /** + * MS-PPT > Chart format > Format Major Gridlines > Line > Cap type + * - line cap type + * @default flat + */ + cap?: ChartLineCap /** * Gridline color (hex) * @example 'FF3399' @@ -2179,6 +2187,16 @@ declare namespace PptxGenJS { holeSize?: number } export interface IChartPropsChartLine { + /** + * MS-PPT > Chart format > Format Data Series > Line > Cap type + * - line cap type + * @default flat + */ + lineCap?: ChartLineCap + /** + * Line dash type + * @default solid + */ lineDash?: 'dash' | 'dashDot' | 'lgDash' | 'lgDashDot' | 'lgDashDotDot' | 'solid' | 'sysDash' | 'sysDot' /** * MS-PPT > Chart format > Format Data Series > Marker Options > Built-in > Type @@ -2289,21 +2307,21 @@ declare namespace PptxGenJS { } export interface IChartOpts extends IChartPropsAxisCat, - IChartPropsAxisSer, - IChartPropsAxisVal, - IChartPropsBase, - IChartPropsChartBar, - IChartPropsChartDoughnut, - IChartPropsChartLine, - IChartPropsChartPie, - IChartPropsChartRadar, - IChartPropsDataLabel, - IChartPropsDataTable, - IChartPropsLegend, - IChartPropsTitle, - ObjectNameProps, - OptsChartGridLine, - PositionProps { + IChartPropsAxisSer, + IChartPropsAxisVal, + IChartPropsBase, + IChartPropsChartBar, + IChartPropsChartDoughnut, + IChartPropsChartLine, + IChartPropsChartPie, + IChartPropsChartRadar, + IChartPropsDataLabel, + IChartPropsDataTable, + IChartPropsLegend, + IChartPropsTitle, + ObjectNameProps, + OptsChartGridLine, + PositionProps { /** * Alt Text value ("How would you describe this object and its contents to someone who is blind?") * - PowerPoint: [right-click on a chart] > "Edit Alt Text..." @@ -2393,15 +2411,15 @@ declare namespace PptxGenJS { | { rect: {} } | { text: TextProps } | { - placeholder: { - options: PlaceholderProps - /** - * Text to be shown in placeholder (shown until user focuses textbox or adds text) - * - Leave blank to have powerpoint show default phrase (ex: "Click to add title") - */ - text?: string - } - } + placeholder: { + options: PlaceholderProps + /** + * Text to be shown in placeholder (shown until user focuses textbox or adds text) + * - Leave blank to have powerpoint show default phrase (ex: "Click to add title") + */ + text?: string + } + } )[] /**