Merge pull request #1214 from gitbrent/pr-1126

Pr-1126

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,

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

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

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 += '<a:ln><a:noFill/></a:ln>'
 					} else {
-						strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="flat"><a:solidFill>${createColorElement(seriesColor)}</a:solidFill>`
+						strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="${createLineCap(opts.lineCap)}"><a:solidFill>${createColorElement(seriesColor)}</a:solidFill>`
 						strXml += '<a:prstDash val="' + (opts.lineDash || 'solid') + '"/><a:round/></a:ln>'
 					}
 				} else if (opts.dataBorder) {
-					strXml += `<a:ln w="${valToPts(opts.dataBorder.pt)}" cap="flat"><a:solidFill>${createColorElement(opts.dataBorder.color)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`
+					strXml += `<a:ln w="${valToPts(opts.dataBorder.pt)}" cap="${createLineCap(opts.lineCap)}"><a:solidFill>${createColorElement(opts.dataBorder.color)}</a:solidFill><a:prstDash val="solid"/><a:round/></a:ln>`
 				}
 
 				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 += '<a:ln><a:noFill/></a:ln>'
 					} else {
-						strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="flat"><a:solidFill>${createColorElement(tmpSerColor)}</a:solidFill>`
+						strXml += `<a:ln w="${valToPts(opts.lineSize)}" cap="${createLineCap(opts.lineCap)}"><a:solidFill>${createColorElement(tmpSerColor)}</a:solidFill>`
 						strXml += `<a:prstDash val="${opts.lineDash || 'solid'}"/><a:round/></a:ln>`
 					}
 
@@ -2018,7 +2018,7 @@ function createShadowElement (options: ShadowProps, defaults: object): string {
 function createGridLineElement (glOpts: OptsChartGridLine): string {
 	let strXml = '<c:majorGridlines>'
 	strXml += ' <c:spPr>'
-	strXml += `  <a:ln w="${valToPts(glOpts.size || DEF_CHART_GRIDLINE.size)}" cap="flat">`
+	strXml += `  <a:ln w="${valToPts(glOpts.size || DEF_CHART_GRIDLINE.size)}" cap="${createLineCap(glOpts.cap || DEF_CHART_GRIDLINE.cap)}">`
 	strXml += '  <a:solidFill><a:srgbClr val="' + (glOpts.color || DEF_CHART_GRIDLINE.color) + '"/></a:solidFill>' // should accept scheme colors as implemented in [Pull #135]
 	strXml += '   <a:prstDash val="' + (glOpts.style || DEF_CHART_GRIDLINE.style) + '"/><a:round/>'
 	strXml += '  </a:ln>'
@@ -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}`);
+	}
+}

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

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