From b070332ae2495845abbd4155665605a8af1ca8be Mon Sep 17 00:00:00 2001 From: Tamas Erdos Date: Wed, 8 Jan 2020 04:40:45 +0800 Subject: [PATCH] let users customize aspect ratio of charts --- docs/04-line.md | 3 ++- docs/05-XY.md | 1 + docs/06-bar.md | 3 ++- docs/07-stacked-bar.md | 3 ++- docs/08-pie.md | 3 ++- docs/09-radar.md | 3 ++- examples/index.js | 1 + src/Bar.js | 3 ++- src/Line.js | 3 ++- src/Pie.js | 3 ++- src/Radar.js | 3 ++- src/StackedBar.js | 3 ++- src/XY.js | 3 ++- 13 files changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/04-line.md b/docs/04-line.md index 80314fb..a9f6885 100644 --- a/docs/04-line.md +++ b/docs/04-line.md @@ -49,4 +49,5 @@ const lineChart = new chartXkcd.Line(svg, { - `fontFamily`: customize font family used in the chart - `unxkcdify`: disable xkcd effect (default `false`) - `strokeColor`: stroke colors (default `black`) -- `backgroundColor`: color for BG (default `white`) \ No newline at end of file +- `backgroundColor`: color for BG (default `white`) +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) \ No newline at end of file diff --git a/docs/05-XY.md b/docs/05-XY.md index d5760fa..53107c7 100644 --- a/docs/05-XY.md +++ b/docs/05-XY.md @@ -62,6 +62,7 @@ You can also plot XY line chart by connecting the points. - `unxkcdify`: disable xkcd effect (default `false`) - `strokeColor`: stroke colors (default `black`) - `backgroundColor`: color for BG (default `white`) +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) **Another example of XY chart: XY line chart with `timeFormat`** diff --git a/docs/06-bar.md b/docs/06-bar.md index 4207742..a66a4d5 100644 --- a/docs/06-bar.md +++ b/docs/06-bar.md @@ -37,4 +37,5 @@ const barChart = new chartXkcd.Bar(svg, { - `fontFamily`: customize font family used in the chart - `unxkcdify`: disable xkcd effect (default `false`) - `strokeColor`: stroke colors (default `black`) -- `backgroundColor`: color for BG (default `white`) \ No newline at end of file +- `backgroundColor`: color for BG (default `white`) +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) \ No newline at end of file diff --git a/docs/07-stacked-bar.md b/docs/07-stacked-bar.md index 5509319..e14e146 100644 --- a/docs/07-stacked-bar.md +++ b/docs/07-stacked-bar.md @@ -48,4 +48,5 @@ new chartXkcd.StackedBar(svg, { - up left: `chartXkcd.config.positionType.upLeft` - up right: `chartXkcd.config.positionType.upLeft` - bottom left: `chartXkcd.config.positionType.downLeft` - - bottom right: `chartXkcd.config.positionType.downRight` \ No newline at end of file + - bottom right: `chartXkcd.config.positionType.downRight` +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) \ No newline at end of file diff --git a/docs/08-pie.md b/docs/08-pie.md index 1e1c75d..4f2af12 100644 --- a/docs/08-pie.md +++ b/docs/08-pie.md @@ -42,4 +42,5 @@ const pieChart = new chartXkcd.Pie(svg, { - `fontFamily`: customize font family used in the chart - `unxkcdify`: disable xkcd effect (default `false`) - `strokeColor`: stroke colors (default `black`) -- `backgroundColor`: color for BG (default `white`) \ No newline at end of file +- `backgroundColor`: color for BG (default `white`) +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) \ No newline at end of file diff --git a/docs/09-radar.md b/docs/09-radar.md index 5554b48..904139a 100644 --- a/docs/09-radar.md +++ b/docs/09-radar.md @@ -49,4 +49,5 @@ const radar = new chartXkcd.Radar(svg, { - `fontFamily`: customize font family used in the chart - `unxkcdify`: disable xkcd effect (default `false`) - `strokeColor`: stroke colors (default `black`) -- `backgroundColor`: color for BG (default `white`) \ No newline at end of file +- `backgroundColor`: color for BG (default `white`) +- `heightRatio`: change the aspect ratio of the chart (default `3` results in 4/3 ratio) \ No newline at end of file diff --git a/examples/index.js b/examples/index.js index 13d4ffa..a890fb6 100644 --- a/examples/index.js +++ b/examples/index.js @@ -84,6 +84,7 @@ new chartXkcd.Line(svgLine, { }], }, options: { + // heightRatio: 3, // unxkcdify: true, // strokeColor: 'black', // backgroundColor: 'white', diff --git a/src/Bar.js b/src/Bar.js index ebe404f..0afa582 100644 --- a/src/Bar.js +++ b/src/Bar.js @@ -26,6 +26,7 @@ class Bar { fontFamily: 'xkcd', strokeColor: 'black', backgroundColor: 'white', + heightRatio: 3, ...options, }; if (title) { @@ -56,7 +57,7 @@ class Bar { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); diff --git a/src/Line.js b/src/Line.js index 247e11a..28dde17 100644 --- a/src/Line.js +++ b/src/Line.js @@ -31,6 +31,7 @@ class Line { strokeColor: 'black', backgroundColor: 'white', showLegend: true, + heightRatio: 3, ...options, }; if (title) { @@ -61,7 +62,7 @@ class Line { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); this.chart = this.svgEl.append('g') diff --git a/src/Pie.js b/src/Pie.js index 239052b..cd6d823 100644 --- a/src/Pie.js +++ b/src/Pie.js @@ -25,6 +25,7 @@ class Pie { strokeColor: 'black', backgroundColor: 'white', showLegend: true, + heightRatio: 3, ...options, }; this.title = title; @@ -44,7 +45,7 @@ class Pie { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); this.width = this.svgEl.attr('width'); diff --git a/src/Radar.js b/src/Radar.js index 136c330..cba5ca1 100644 --- a/src/Radar.js +++ b/src/Radar.js @@ -30,6 +30,7 @@ class Radar { dotSize: 1, strokeColor: 'black', backgroundColor: 'white', + heightRatio: 3, ...options, }; this.title = title; @@ -50,7 +51,7 @@ class Radar { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); this.width = this.svgEl.attr('width'); diff --git a/src/StackedBar.js b/src/StackedBar.js index 04235b1..9a9a30e 100644 --- a/src/StackedBar.js +++ b/src/StackedBar.js @@ -29,6 +29,7 @@ class StackedBar { backgroundColor: 'white', legendPosition: config.positionType.upLeft, showLegend: true, + heightRatio: 3, ...options, }; if (title) { @@ -59,7 +60,7 @@ class StackedBar { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); diff --git a/src/XY.js b/src/XY.js index c627a2e..7409fab 100644 --- a/src/XY.js +++ b/src/XY.js @@ -35,6 +35,7 @@ class XY { strokeColor: 'black', backgroundColor: 'white', showLegend: true, + heightRatio: 3, ...options, }; // TODO: extract a function? @@ -66,7 +67,7 @@ class XY { .style('font-family', this.fontFamily) .style('background', this.options.backgroundColor) .attr('width', svg.parentElement.clientWidth) - .attr('height', Math.min((svg.parentElement.clientWidth * 2) / 3, window.innerHeight)); + .attr('height', Math.min((svg.parentElement.clientWidth * 2) / this.options.heightRatio, window.innerHeight)); this.svgEl.selectAll('*').remove(); this.chart = this.svgEl.append('g')