Skip to content

Commit 7700f0a

Browse files
celestialphineascelestialphineas
committed
Firefox compatibility
1 parent 683a43d commit 7700f0a

File tree

2 files changed

+88
-12
lines changed

2 files changed

+88
-12
lines changed

‎index.html

+37
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,50 @@
1111
max-height: 400px;
1212
margin-left: auto;
1313
margin-right: auto;
14+
font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
15+
}
16+
.stacked-label {
17+
background: #ffffffcc;
18+
border: solid #eeeeee 1px;
19+
border-radius: 10px;
20+
box-shadow: 0 5px 20px #00000022;
21+
}
22+
.stacked-indicator {
23+
width: 10px;
24+
height: 10px;
25+
left: 0;
26+
margin: 5px;
27+
border-radius: 5px;
28+
position: relative;
29+
}
30+
.stacked-title, .stacked-value {
31+
margin: 10px;
32+
display: block;
33+
white-space: nowrap;
34+
position: relative;
35+
}
36+
.stacked-title {
37+
margin-top: 5px;
38+
font-weight: bold;
39+
}
40+
.toggling {
41+
margin: 0;
42+
outline: none;
43+
background: white;
44+
border: 1px solid #555;
1445
}
1546
</style>
1647
</head>
1748
<body>
1849
<!-- plz insert your doms under the main div element -->
1950
<div id="main">
2051
<svg height="100%" width="100%" id="stacked"></svg>
52+
<div class="toggling-buttons">
53+
<button class="toggling left" type="button">Zero</button>
54+
<button class="toggling " type="button">Theme River</button>
55+
<button class="toggling " type="button">Wiggle</button>
56+
<button class="toggling right" type="button">Weighted Wiggle</button>
57+
</div>
2158
</div>
2259
<script type="text/javascript" src="main.js"></script>
2360
</body>

‎main.js

+51-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use strict';
12
/**
23
* Simply draw a stacked graph
34
* @class
@@ -169,7 +170,9 @@ StackedGraph.prototype.updateDrawing = function (animated, timing) {
169170
* @param { number[] } xy Local coordinate
170171
*/
171172
StackedGraph.prototype.local2global = function (xy) {
172-
let [ w, h ] = [ this._htmlElement.clientWidth, this._htmlElement.clientHeight ];
173+
let [ w, h ] = [
174+
this._htmlElement.clientWidth || this._htmlElement.parentNode.clientWidth,
175+
this._htmlElement.clientHeight || this._htmlElement.parentNode.clientHeight ];
173176
let [ l, r, t, b ] = [ this.padding.left, this.padding.right, this.padding.top, this.padding.bottom ];
174177
let [ x, y ] = xy;
175178
return [ x*(w-r-l)+l, y*(-h+2*t+b)+h-t-b ];
@@ -180,7 +183,9 @@ StackedGraph.prototype.local2global = function (xy) {
180183
* @param { number[] } xy Global coordinate
181184
*/
182185
StackedGraph.prototype.global2local = function (xy) {
183-
let [ w, h ] = [ this._htmlElement.clientWidth, this._htmlElement.clientHeight ];
186+
let [ w, h ] = [
187+
this._htmlElement.clientWidth || this._htmlElement.parentNode.clientWidth,
188+
this._htmlElement.clientHeight || this._htmlElement.parentNode.clientHeight ];
184189
let [ l, r, t, b ] = [ this.padding.left, this.padding.right, this.padding.top, this.padding.bottom ];
185190
let [ x, y ] = xy;
186191
return [ (x-l)/(w-r-l) || 0, (y-h+t+b)/(-h+2*t+b) || 0 ];
@@ -214,14 +219,16 @@ StackedGraph.prototype.weightedWiggle = function(index) {
214219
}
215220
return dg0.slice(0, index + 1).reduce((a, b) => a + b);
216221
}
217-
222+
StackedGraph.prototype.getColor = function(index) {
223+
return this.colors[ index % this.colors.length ] || '#000000';
224+
}
218225
/** Update the drawing */
219226
StackedGraph.prototype.drawStacked = function() {
220227
// Remove the drawn elements
221228
this.stackedGraphDOMs.forEach(element => this._htmlElement.removeChild(element));
222229
this.stackedGraphDOMs.splice(0, this.stackedGraphDOMs.length);
223230

224-
let getColor = index => this.colors[ (index - 1) % this.colors.length ] || '#000000';
231+
let getColor = index => this.getColor(index-1);
225232
// Draw the data to draw
226233
for(let i = 1; i < this._dataToDraw.length; i++) {
227234
let polygon = document.createElementNS(this.svgns, 'polygon');
@@ -233,14 +240,14 @@ StackedGraph.prototype.drawStacked = function() {
233240
polygon.style.fill = getColor(i);
234241
polygon.classList.add('stacked-polygon', 'stacked-' + (i - 1));
235242
let wrapEvent = event => {
236-
let detail = event;
237243
event.stackedIndex = i - 1;
238-
let clientX = event.clientX || event.touches[0].clientX;
239-
let relativeX = (clientX - this.padding.left)/(this._htmlElement.clientWidth - this.padding.left - this.padding.right) || 0;
244+
let offsetX = event.offsetX || ((event.targetTouches[0] || {pageX:0}).pageX - event.target.getBoundingClientRect().left);
245+
let relativeX = (offsetX - this.padding.left)/(this._htmlElement.clientWidth - this.padding.left - this.padding.right) || 0;
240246
let dataIndex = Math.round(relativeX * (this.dataDimension - 1));
241247
event.dataIndex = dataIndex;
242248
event.stackedData = this._data[i-1][dataIndex];
243-
let newEvent = new CustomEvent('stacked-' + event.type, { detail });
249+
let newEvent = new CustomEvent('stacked-' + event.type);
250+
for(let prop in event) newEvent[prop] = event[prop];
244251
this._htmlElement.dispatchEvent(newEvent);
245252
};
246253
// Binding events
@@ -260,12 +267,14 @@ function makeHorizontalAxis(stackedGraph) {
260267
let _this = stackedGraph;
261268
// Horizontal axis line
262269
_this.horizontalAxis = document.createElementNS(_this.svgns, 'line');
270+
let width = _this._htmlElement.clientWidth || _this._htmlElement.parentNode.clientWidth;
271+
let height = _this._htmlElement.clientHeight || _this._htmlElement.parentNode.clientHeight;
263272
// Resize behavior
264273
_this.horizontalAxis.resize = () => {
265274
_this.horizontalAxis.setAttribute('x1', _this.padding.left);
266-
_this.horizontalAxis.setAttribute('x2', _this._htmlElement.clientWidth - _this.padding.right);
267-
_this.horizontalAxis.setAttribute('y1', _this._htmlElement.clientHeight - _this.padding.bottom);
268-
_this.horizontalAxis.setAttribute('y2', _this._htmlElement.clientHeight - _this.padding.bottom);
275+
_this.horizontalAxis.setAttribute('x2', width - _this.padding.right);
276+
_this.horizontalAxis.setAttribute('y1', height - _this.padding.bottom);
277+
_this.horizontalAxis.setAttribute('y2', height - _this.padding.bottom);
269278
}
270279
_this.horizontalAxis.style.stroke = '#aaaaaa';
271280
_this.horizontalAxis.style.strokeWidth = '1px';
@@ -282,7 +291,6 @@ function makeHorizontalAxis(stackedGraph) {
282291
_this.horizontalGrads.splice(0, _this.horizontalGrads.length);
283292
_this.horizontalGradTags.splice(0, _this.horizontalGradTags.length);
284293
let [ left, right, bottom ] = [ _this.padding.left, _this.padding.right, _this.padding.bottom ];
285-
let [ width, height ] = [ _this._htmlElement.clientWidth, _this._htmlElement.clientHeight ];
286294
let n = Math.ceil((width - left - right)/_this.gradSpacing || 0);
287295
let step = Math.ceil(_this.dataDimension/n || 0);
288296
if(_this.dataDimension > 500) {
@@ -327,6 +335,9 @@ function bindResizeBehaviors(stackedGraph) {
327335

328336
// This function defines the public getter/setter of the class
329337
function publicStackedGraph(stackedGraph) {
338+
Object.defineProperty(stackedGraph, 'dom', {
339+
get: () => stackedGraph._htmlElement
340+
});
330341
Object.defineProperty(stackedGraph, 'htmlElement', {
331342
get: () => stackedGraph._htmlElement
332343
});
@@ -370,5 +381,33 @@ function publicStackedGraph(stackedGraph) {
370381

371382
window.addEventListener('load', event => {
372383
let stackedGraph = window.stackedGraph = new StackedGraph('stacked');
384+
let dataTitles = ['项目A', '项目B', '项目C'];
373385
stackedGraph.updateDrawing(true, stackedGraph.animationTiming);
386+
387+
// let labelDOM = document.createElement('div');
388+
// labelDOM.classList.add('stacked-label');
389+
// labelDOM.style.position = 'fixed';
390+
// let indicator = document.createElement('div');
391+
// indicator.classList.add('stacked-indicator');
392+
// labelDOM.appendChild(indicator);
393+
// let titleDOM = document.createElement('div');
394+
// titleDOM.classList.add('stacked-title');
395+
// labelDOM.appendChild(titleDOM);
396+
// let valueDOM = document.createElement('div');
397+
// valueDOM.classList.add('stacked-value');
398+
// labelDOM.appendChild(valueDOM);
399+
// stackedGraph.dom.addEventListener('stacked-mouseenter', event => {
400+
// document.body.appendChild(labelDOM);
401+
// indicator.style.background = stackedGraph.getColor(event.stackedIndex);
402+
// });
403+
// stackedGraph.dom.addEventListener('stacked-mousemove', event => {
404+
// labelDOM.style.left = event.clientX + 10 + 'px';
405+
// labelDOM.style.top = event.clientY + 10 + 'px';
406+
407+
// titleDOM.innerHTML = dataTitles[event.stackedIndex];
408+
// valueDOM.innerHTML = event.stackedData.toFixed(2);
409+
// });
410+
// stackedGraph.dom.addEventListener('stacked-mouseleave', event => {
411+
// document.body.removeChild(labelDOM);
412+
// });
374413
});

0 commit comments

Comments
 (0)