Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit 1e01106

Browse files
peterpeterparkerpeterpeterparker
committed
feat: optional min value for the bar chart y axis
Signed-off-by: peterpeterparker <[email protected]>
1 parent f82f1f0 commit 1e01106

File tree

3 files changed

+210
-101
lines changed

3 files changed

+210
-101
lines changed

‎webcomponents/charts/src/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export namespace Components {
3434
'updateCurrentBar': (values: DeckdeckgoBarChartDataValue[]) => Promise<void>;
3535
'width': number;
3636
'yAxis': boolean;
37+
'yAxisMin': number;
3738
}
3839
interface DeckgoLineChart {
3940
'animation': boolean;
@@ -125,6 +126,7 @@ declare namespace LocalJSX {
125126
'src'?: string;
126127
'width'?: number;
127128
'yAxis'?: boolean;
129+
'yAxisMin'?: number;
128130
}
129131
interface DeckgoLineChart {
130132
'animation'?: boolean;

‎webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
4848

4949
@Prop() yAxis: boolean = true;
5050

51+
@Prop() yAxisMin: number = 0;
52+
5153
@Event()
5254
private chartCustomLoad: EventEmitter<string>;
5355

@@ -160,14 +162,13 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
160162

161163
private initAxisYDomain(): Promise<void> {
162164
return new Promise<void>((resolve) => {
163-
this.y.domain([
164-
0,
165-
max(this.chartData, (category) => {
166-
return max(category.values, (d) => {
167-
return d.value;
168-
});
169-
})
170-
]);
165+
const maxValue: number = max(this.chartData, (category) => {
166+
return max(category.values, (d) => {
167+
return d.value;
168+
});
169+
});
170+
171+
this.y.domain([0, Math.max(this.yAxisMin, maxValue)]);
171172

172173
resolve();
173174
});

‎webcomponents/charts/src/index.html‎

Lines changed: 199 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,212 @@
11
<!DOCTYPE html>
22
<html dir="ltr" lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
6-
<title>DeckDeckGo - Charts</title>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
6+
<title>DeckDeckGo - Charts</title>
77

8-
<script type="module" src="/build/deckdeckgo-charts.esm.js"></script>
9-
<script nomodule src="/build/deckdeckgo-charts.js"></script>
8+
<script type="module" src="/build/deckdeckgo-charts.esm.js"></script>
9+
<script nomodule src="/build/deckdeckgo-charts.js"></script>
1010

11-
<style>
12-
body {
13-
background: white;
14-
}
15-
</style>
16-
17-
</head>
18-
<body>
19-
20-
<deckgo-line-chart width="500" height="400" y-axis-domain="extent" date-pattern="dd.MM.yyyy" animation="true"
21-
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-multiple.csv"></deckgo-line-chart>
22-
23-
<div style="margin: 64px 8px">
24-
<button onclick="prev('deckgo-line-chart')">Prev</button>
25-
<button onclick="next('deckgo-line-chart')">Next</button>
26-
<button onclick="drawLine()">Redraw</button>
27-
</div>
28-
29-
<deckgo-bar-chart y-axis="false" animation="true" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-bar-chart>
30-
31-
<div style="margin: 64px 8px">
32-
<button onclick="prev('deckgo-bar-chart')">Prev</button>
33-
<button onclick="next('deckgo-bar-chart')">Next</button>
34-
</div>
35-
36-
<deckgo-bar-chart animation="true" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv" style="--deckgo-chart-fill-color-1: #ff0000; --deckgo-chart-fill-color-2: #00ff00; --deckgo-chart-fill-color-3: #0000ff;"></deckgo-bar-chart>
37-
38-
<deckgo-pie-chart animation="true" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-pie-chart>
39-
40-
<div style="margin: 64px 8px">
41-
<button onclick="prev('deckgo-pie-chart')">Prev</button>
42-
<button onclick="next('deckgo-pie-chart')">Next</button>
43-
</div>
44-
45-
<deckgo-pie-chart width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-pie-chart.csv" style="--deckgo-chart-text-display: none;"></deckgo-pie-chart>
46-
47-
<div style="margin: 64px 8px">
48-
<button onclick="draw()">Redraw</button>
49-
</div>
50-
51-
<deckgo-line-chart width="500" height="400" y-axis-domain="extent" date-pattern="dd.MM.yyyy" style="--deckgo-chart-text-display: none;"
52-
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-multiple.csv"></deckgo-line-chart>
53-
54-
<deckgo-line-chart width="500" height="400" y-axis-domain="extent" date-pattern="dd.MM.yyyy" style="--deckgo-chart-fill-color-0: #3880ff; --deckgo-chart-fill-color-1: #7044ff; --deckgo-chart-fill-opacity-1: 0.7;"
55-
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-to-compare.csv"></deckgo-line-chart>
56-
57-
<deckgo-line-chart width="500" height="400" smooth="false" ticks="5" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart.csv" date-pattern="dd.MM.yyyy"></deckgo-line-chart>
58-
59-
<deckgo-line-chart width="500" height="400" area="false" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-no-dates.csv" style="--deckgo-chart-fill-color-0: none; --deckgo-chart-stroke: red; --deckgo-chart-fill-color-1: none; --deckgo-chart-fill-opacity-1: 1; --deckgo-chart-stroke-width-1: 3px"></deckgo-line-chart>
60-
61-
<deckgo-line-chart width="500" height="400" smooth="false" area="false" grid="true" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-no-dates.csv" style="--deckgo-chart-fill-color-0: none; --deckgo-chart-stroke: red; --deckgo-chart-stroke-0: #3880ff; --deckgo-chart-fill-color-1: none; --deckgo-chart-fill-opacity-1: 1; --deckgo-chart-stroke-1: #7044ff; --deckgo-chart-stroke-width-1: 3px"></deckgo-line-chart>
62-
63-
<deckgo-bar-chart id="test" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-bar-chart>
64-
65-
<deckgo-bar-chart width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-bar-chart>
66-
67-
<deckgo-bar-chart width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-pie-chart.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-text-display: none;"></deckgo-bar-chart>
68-
69-
<script type="text/javascript">
70-
function draw() {
71-
const elem = document.getElementsByTagName('deckgo-pie-chart');
72-
if (elem && elem.length > 1) {
73-
elem[1].width = 200;
74-
elem[1].height = 200;
75-
elem[1].range = ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'];
76-
elem[1].stroke = "#ffffff";
77-
elem[1].draw();
11+
<style>
12+
body {
13+
background: white;
7814
}
79-
}
80-
81-
function drawLine() {
82-
const elem = document.getElementsByTagName('deckgo-line-chart');
83-
if (elem && elem.length > 0) {
84-
elem[0].width = 500;
85-
elem[0].height = 500;
86-
elem[0].draw();
15+
</style>
16+
</head>
17+
<body>
18+
<h1>Src</h1>
19+
20+
<deckgo-line-chart
21+
width="500"
22+
height="400"
23+
y-axis-domain="extent"
24+
date-pattern="dd.MM.yyyy"
25+
animation="true"
26+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-multiple.csv"
27+
></deckgo-line-chart>
28+
29+
<div style="margin: 64px 8px">
30+
<button onclick="prev('deckgo-line-chart')">Prev</button>
31+
<button onclick="next('deckgo-line-chart')">Next</button>
32+
<button onclick="drawLine()">Redraw</button>
33+
</div>
34+
35+
<deckgo-bar-chart
36+
y-axis="false"
37+
animation="true"
38+
width="500"
39+
height="400"
40+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv"
41+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"
42+
></deckgo-bar-chart>
43+
44+
<div style="margin: 64px 8px">
45+
<button onclick="prev('deckgo-bar-chart')">Prev</button>
46+
<button onclick="next('deckgo-bar-chart')">Next</button>
47+
</div>
48+
49+
<deckgo-bar-chart
50+
animation="true"
51+
width="500"
52+
height="400"
53+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv"
54+
style="--deckgo-chart-fill-color-1: #ff0000; --deckgo-chart-fill-color-2: #00ff00; --deckgo-chart-fill-color-3: #0000ff;"
55+
></deckgo-bar-chart>
56+
57+
<deckgo-pie-chart
58+
animation="true"
59+
width="500"
60+
height="400"
61+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv"
62+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"
63+
></deckgo-pie-chart>
64+
65+
<div style="margin: 64px 8px">
66+
<button onclick="prev('deckgo-pie-chart')">Prev</button>
67+
<button onclick="next('deckgo-pie-chart')">Next</button>
68+
</div>
69+
70+
<deckgo-pie-chart
71+
width="500"
72+
height="400"
73+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-pie-chart.csv"
74+
style="--deckgo-chart-text-display: none;"
75+
></deckgo-pie-chart>
76+
77+
<div style="margin: 64px 8px">
78+
<button onclick="draw()">Redraw</button>
79+
</div>
80+
81+
<deckgo-line-chart
82+
width="500"
83+
height="400"
84+
y-axis-domain="extent"
85+
date-pattern="dd.MM.yyyy"
86+
style="--deckgo-chart-text-display: none;"
87+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-multiple.csv"
88+
></deckgo-line-chart>
89+
90+
<deckgo-line-chart
91+
width="500"
92+
height="400"
93+
y-axis-domain="extent"
94+
date-pattern="dd.MM.yyyy"
95+
style="--deckgo-chart-fill-color-0: #3880ff; --deckgo-chart-fill-color-1: #7044ff; --deckgo-chart-fill-opacity-1: 0.7;"
96+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-to-compare.csv"
97+
></deckgo-line-chart>
98+
99+
<deckgo-line-chart
100+
width="500"
101+
height="400"
102+
smooth="false"
103+
ticks="5"
104+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart.csv"
105+
date-pattern="dd.MM.yyyy"
106+
></deckgo-line-chart>
107+
108+
<deckgo-line-chart
109+
width="500"
110+
height="400"
111+
area="false"
112+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-no-dates.csv"
113+
style="--deckgo-chart-fill-color-0: none; --deckgo-chart-stroke: red; --deckgo-chart-fill-color-1: none; --deckgo-chart-fill-opacity-1: 1; --deckgo-chart-stroke-width-1: 3px"
114+
></deckgo-line-chart>
115+
116+
<deckgo-line-chart
117+
width="500"
118+
height="400"
119+
smooth="false"
120+
area="false"
121+
grid="true"
122+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-line-chart-no-dates.csv"
123+
style="--deckgo-chart-fill-color-0: none; --deckgo-chart-stroke: red; --deckgo-chart-stroke-0: #3880ff; --deckgo-chart-fill-color-1: none; --deckgo-chart-fill-opacity-1: 1; --deckgo-chart-stroke-1: #7044ff; --deckgo-chart-stroke-width-1: 3px"
124+
></deckgo-line-chart>
125+
126+
<deckgo-bar-chart
127+
id="test"
128+
width="500"
129+
height="400"
130+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare.csv"
131+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"
132+
></deckgo-bar-chart>
133+
134+
<deckgo-bar-chart
135+
width="500"
136+
height="400"
137+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv"
138+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"
139+
></deckgo-bar-chart>
140+
141+
<deckgo-bar-chart
142+
width="500"
143+
height="400"
144+
src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-pie-chart.csv"
145+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-text-display: none;"
146+
></deckgo-bar-chart>
147+
148+
<h1>Data</h1>
149+
150+
<deckgo-bar-chart
151+
id="test2"
152+
width="500"
153+
height="400"
154+
y-axis-min="8.0"
155+
style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"
156+
></deckgo-bar-chart>
157+
158+
<script type="text/javascript">
159+
function draw() {
160+
const elem = document.getElementsByTagName('deckgo-pie-chart');
161+
if (elem && elem.length > 1) {
162+
elem[1].width = 200;
163+
elem[1].height = 200;
164+
elem[1].range = ['#98abc5', '#8a89a6', '#7b6888', '#6b486b', '#a05d56', '#d0743c', '#ff8c00'];
165+
elem[1].stroke = '#ffffff';
166+
elem[1].draw();
167+
}
168+
}
169+
170+
function drawLine() {
171+
const elem = document.getElementsByTagName('deckgo-line-chart');
172+
if (elem && elem.length > 0) {
173+
elem[0].width = 500;
174+
elem[0].height = 500;
175+
elem[0].draw();
176+
}
87177
}
88-
}
89178

90-
function prev(cmp) {
91-
const elem = document.getElementsByTagName(cmp);
92-
if (elem && elem.length > 0) {
93-
elem[0].prev().then(() => {});
179+
function prev(cmp) {
180+
const elem = document.getElementsByTagName(cmp);
181+
if (elem && elem.length > 0) {
182+
elem[0].prev().then(() => {});
183+
}
94184
}
95-
}
96185

97-
function next(cmp) {
98-
const elem = document.getElementsByTagName(cmp);
99-
if (elem && elem.length > 0) {
100-
elem[0].next().then(() => {});
186+
function next(cmp) {
187+
const elem = document.getElementsByTagName(cmp);
188+
if (elem && elem.length > 0) {
189+
elem[0].next().then(() => {});
190+
}
101191
}
102-
}
103192

193+
document.addEventListener('DOMContentLoaded', (event) => {
194+
const elem = document.querySelector('#test2');
195+
196+
elem.data = [
197+
{label: 'Wind', values: [{key: '1', label: '1', value: 0}]},
198+
{
199+
label: 'Geothermal',
200+
values: [{key: '1', label: '1', value: 0}]
201+
},
202+
{label: 'Landfill Gas', values: [{key: '1', label: '1', value: 0}]},
203+
{
204+
label: 'Biomass',
205+
values: [{key: '1', label: '1', value: 0}]
206+
},
207+
{label: 'Qualified Hydropower', values: [{key: '1', label: '1', value: 0}]}
208+
];
209+
});
104210
</script>
105-
</body>
211+
</body>
106212
</html>

0 commit comments

Comments
 (0)