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

Added support for multi-level category axes #1012

Closed
wants to merge 12 commits into from
Closed

Added support for multi-level category axes #1012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
892710d
Support for multi-level category axis
MariusOpeepl Oct 11, 2021
77d2687
Merge branch 'gitbrent:master' into cat-axis-multi-level
MariusOpeepl Oct 11, 2021
ec46c33
Minor code changes
MariusOpeepl Oct 11, 2021
dbc37e2
Fixed some offsets
MariusOpeepl Oct 11, 2021
b98a0f8
Fixed some type hints
MariusOpeepl Oct 11, 2021
6dd08df
Updated dist and type hints
MariusOpeepl Oct 14, 2021
55357b5
Merge branch 'master' into cat-axis-multi-level
MariusOpeepl Oct 25, 2021
eb5abf4
Merge branch 'master' into cat-axis-multi-level
MariusOpeepl Dec 15, 2021
5bb1217
Merge branch 'master' into cat-axis-multi-level
MariusOpeepl May 2, 2022
e0a1d7c
cleaned up dist files
MariusOpeepl May 2, 2022
59f2396
added demo slides with multi-level cat axes
MariusOpeepl May 4, 2022
56a6ed4
Merge remote-tracking branch 'upstream/master' into cat-axis-multi-level
MariusOpeepl May 17, 2022
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
186 changes: 183 additions & 3 deletions demos/modules/demo_chart.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ export function genSlides_Chart(pptx) {
genSlide16(pptx);
genSlide17(pptx);
genSlide18(pptx);
genSlide19(pptx);
genSlide20(pptx);
}

function initTestData() {
Expand Down Expand Up @@ -1642,9 +1644,6 @@ function genSlide16(pptx) {

// SLIDE 17: Multi-Type Charts
function genSlide17(pptx) {
// powerpoint 2016 add secondary category axis labels
// https://peltiertech.com/chart-with-a-dual-category-axis/

let slide = pptx.addSlide({ sectionTitle: "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable([[{ text: "Chart Examples: Multi-Type Charts", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);
Expand Down Expand Up @@ -2200,3 +2199,184 @@ function genSlide18(pptx) {
slide.addChart(pptx.charts.BAR, arrDataRegions, optsChartBar3);
slide.addChart(pptx.charts.BAR, arrDataHighVals, optsChartBar4);
}

// SLIDE 19: Chart Examples: Multi Level Category Axes
function genSlide19(pptx) {
let slide = pptx.addSlide({ sectionTitle: "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable([[{ text: "Chart Examples: Multi Level Category Axes", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);

const arrDataRegions = [
{
name: 'Mechanical',
labels: [
[
'Gear', 'Bearing',
'Motor', 'Switch',
'Plug', 'Cord',
'Fuse', 'Bulb',
'Pump', 'Leak',
'Seals'
],
[
'Mechanical', '',
'', 'Electrical',
'', '',
'', '',
'Hydraulic', '',
''
]
],
values: [
11, 8, 3, 0, 0,
0, 0, 0, 0, 0,
0
]
},
{
name: 'Electrical',
labels: [
[
'Gear', 'Bearing',
'Motor', 'Switch',
'Plug', 'Cord',
'Fuse', 'Bulb',
'Pump', 'Leak',
'Seals'
],
[
'Mechanical', '',
'', 'Electrical',
'', '',
'', '',
'Hydraulic', '',
''
]
],
values: [
0, 0, 0, 19, 12,
11, 3, 2, 0, 0,
0
]
},
{
name: 'Hydraulic',
labels: [
[
'Gear', 'Bearing',
'Motor', 'Switch',
'Plug', 'Cord',
'Fuse', 'Bulb',
'Pump', 'Leak',
'Seals'
],
[
'Mechanical', '',
'', 'Electrical',
'', '',
'', '',
'Hydraulic', '',
''
]
],
values: [
0, 0, 0, 0, 0,
0, 0, 0, 4, 3,
1
]
}
];

const opts1 = {
catAxisMultiLevelLabels: true,
x: 0.6,
y: 0.6,
w: 6.0,
h: 3.0,
};

const opts2 = {
barDir: 'col',

catAxisMultiLevelLabels: true,
x: 7.0,
y: 0.6,
w: 6.0,
h: 3.0,
};

const opts3 = {
barDir: 'col',

catAxisMultiLevelLabels: true,
x: 0.6,
y: 4.0,
w: 6.0,
h: 3.0,
};

const opts4 = {
catAxisMultiLevelLabels: true,
x: 7,
y: 4.0,
w: 6.0,
h: 3.0,
};

slide.addChart(pptx.charts.AREA, arrDataRegions, opts1);
slide.addChart(pptx.charts.BAR, arrDataRegions, opts2);
slide.addChart(pptx.charts.BAR3D, arrDataRegions, opts3);
slide.addChart(pptx.charts.LINE, arrDataRegions, opts4);
}

// SLIDE 20: Chart Examples: Three Levels Category Axes
function genSlide20(pptx) {
let slide = pptx.addSlide({ sectionTitle: "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable([[{ text: "Chart Examples: Three Levels Category Axes", options: BASE_TEXT_OPTS_L }, BASE_TEXT_OPTS_R]], BASE_TABLE_OPTS);

const arrDataRegions = [
{
name: 'Fruits',
labels: [
[
'1/3', '1/25', '6/5',
'6/21', '7/27', '2/20',
'3/17', '4/24', '6/23',
'8/5', '4/16', '1/29',
'2/23', '4/4', '7/15'
],
[
'Apple', '', '',
'', '', 'Orange',
'', '', '',
'Orange', '', 'Peach',
'Pear', '', '',
''
],
[
'2014', '', '', '',
'', '', '', '',
'', '2015', '', '',
'', '', '', ''
]
],
values: [
734, 465, 656, 176,
434, 165, 613, 359,
279, 660, 307, 270,
539, 142, 554
]
}
];

const opts1 = {
catAxisMultiLevelLabels: true,
x: 0.2,
y: 0.2,
w: 12.9,
h: 7.1
};

slide.addChart(pptx.charts.BAR, arrDataRegions, opts1);
}
9 changes: 7 additions & 2 deletions src/core-interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1107,7 +1107,7 @@ export interface OptsDataLabelPosition {
export type ChartAxisTickMark = 'none' | 'inside' | 'outside' | 'cross'
export interface OptsChartData {
index?: number
labels?: string[]
labels?: string[] | string[][]
name?: string
sizes?: number[]
values?: number[]
Expand All @@ -1116,6 +1116,10 @@ export interface OptsChartData {
*/
//color?: string // TODO: WIP: (Pull #727)
}
// Used internally, probably shouldn't be used by end users
export interface IOptsChartData extends OptsChartData {
labels?: string[][]
}
export interface OptsChartGridLine {
/**
* Gridline color (hex)
Expand Down Expand Up @@ -1231,6 +1235,7 @@ export interface IChartPropsAxisCat {
catAxisMinorTimeUnit?: string
catAxisMinorUnit?: string
catAxisMinVal?: number
catAxisMultiLevelLabels?: boolean
catAxisOrientation?: 'minMax'
catAxisTitle?: string
catAxisTitleColor?: string
Expand Down Expand Up @@ -1490,7 +1495,7 @@ export interface IChartOptsLib extends IChartOpts {
export interface ISlideRelChart extends OptsChartData {
type: CHART_NAME | IChartMulti[]
opts: IChartOptsLib
data: OptsChartData[]
data: IOptsChartData[]
// internal below
rId: number
Target: string
Expand Down
Loading