Skip to content

Commit

Permalink
mobile streamgraph inverted color fix, add streamgraph test url param
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexsmith540
alexsmith540 committed Sep 25, 2021
1 parent 49a442d commit e027747
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 39 deletions.
20 changes: 15 additions & 5 deletions client/css/themeDark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ html.darkTheme #qrModal
fill: #50E2DD !important;
}
.darkTheme .donutChart.dvpnDonut g.pie path.on{
fill: #1d9eec !important;
filter:invert(1);
fill: #E26113 !important;
/*filter:invert(1);*/

}
.darkTheme .donutChart g.pie path:not(.on) {
Expand Down Expand Up @@ -224,9 +224,19 @@ html.darkTheme #qrModal
filter:invert(1);
}

.darkTheme #streamgraph path.stream{
filter:invert(1);
}
/*.darkTheme #streamgraph path.stream{
fill: attr(data-inverse);
}*/
.darkTheme #streamgraph path.stream.color8{fill: #f7cf94 !important;}
.darkTheme #streamgraph path.stream.color7{fill: #f7ae63 !important;}
.darkTheme #streamgraph path.stream.color6{fill: #de8e4a !important;}
.darkTheme #streamgraph path.stream.color5{fill: #bd6d39 !important;}
.darkTheme #streamgraph path.stream.color4{fill: #945129 !important;}
.darkTheme #streamgraph path.stream.color3{fill: #61351e !important;}
.darkTheme #streamgraph path.stream.color2{fill: #392410 !important;}
.darkTheme #streamgraph path.stream.color1{fill: #211408 !important;}
.darkTheme #streamgraph path.stream.color0{fill: #080400 !important;}

.darkTheme .createNewData .error{
filter:invert(1);
}
Expand Down
26 changes: 26 additions & 0 deletions client/js/charts/InvertColor.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export function invertColor(hex) {
if (hex.indexOf('#') === 0) {
hex = hex.slice(1);
}
// convert 3-digit hex to 6-digits.
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
if (hex.length !== 6) {
throw new Error('Invalid HEX color.');
}
// invert color components
var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
// pad each with zeros and return


function padZero(str, len) {
len = len || 2;
var zeros = new Array(len).join('0');
return (zeros + str).slice(-len);
}

return '#' + padZero(r) + padZero(g) + padZero(b);
}
124 changes: 90 additions & 34 deletions client/js/charts/StreamGraph.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import {invertColor} from './InvertColor.js';
export class StreamGraph{
constructor($el){
this.$el = $el;
Expand All @@ -21,7 +22,7 @@ export class StreamGraph{
})
}
console.log('timestamps???',timestamps)
if(timestamps == 0){
if(timestamps == 0 && typeof this.getQueryString()['testStreamgraph'] == "undefined"){
//no data
$('.sectionErrorMessage',this.$el).show();
$('svg',this.$el).hide();
Expand Down Expand Up @@ -49,6 +50,11 @@ export class StreamGraph{
.domain([d3.min(series, d => d3.min(d, d => d[0])), d3.max(series, d => d3.max(d, d => d[1]))])
.range([height - 30, 10]);
const color = d3.schemeBlues[9];
/*let out= ''
for(let i=0;i<9;i++){
out += '.darkTheme #streamgraph path.stream.color'+i+'{fill: '+invertColor(color[8-i])+'};\n'
}
console.log('css',out);*/
const ticks = d3.axisBottom(x)
.ticks(8)
.tickSizeOuter(0)
Expand Down Expand Up @@ -83,7 +89,17 @@ export class StreamGraph{
})
.transition()
.duration(300)
.attr("fill", (d,i) => color[8-i])
.attr("fill", function(d,i) {
const colorI = 8-i;
let out = color[colorI];
for(let x = 0; x < 9; x ++){
d3.select(this).classed('color'+x,x == colorI);
}
return out;
})
.attr('data-inverse',(d,i)=>{
return invertColor(color[8-i]);
})
.attr("d", area)
/*.append("title")
.text(({key}) => key);*/
Expand Down Expand Up @@ -197,14 +213,22 @@ export class StreamGraph{

const maxTime = parseInt(this.startOf(moment(),1,'minute').format('X'));
let minTime = this.getMinTime(data);//maxTime.clone().subtract(2,'days');
if(this.getQueryString()['testStreamgraph'] == 'true'){
minTime = parseInt(moment(maxTime,'X').subtract(2,'days').format('X'));
}
console.log('time diff hours',moment().diff(moment(minTime,'X'),'hours'))
if(moment().diff(moment(minTime,'X'),'hours') <= 2){
minTime = moment(maxTime,'X').subtract('48','hours');
minTime = parseInt(moment(maxTime,'X').subtract('48','hours').format('X'));
}
let minsPerBin = 15;
if(moment(maxTime).diff(moment(minTime),'minutes')/2 <= 120){
if(moment(maxTime,'X').diff(moment(minTime,'X'),'minutes')/2 <= 120){
minsPerBin = 2;
}
for(let i=minTime;i<=maxTime;i+=(minsPerBin*60)){
console.log('minmax',minTime,maxTime);
console.log('new diff hours',moment(maxTime,'X').diff(moment(minTime,'X'),'hours'))

for(let v=minTime;v<=maxTime;v+=(minsPerBin*60)){
let i = this.startOf(moment(v,'X'),minsPerBin,'minute').format('X')
bins[i] = {
time:i
};
Expand All @@ -216,40 +240,45 @@ export class StreamGraph{
sum:0
}
});
/*const upR0 = Math.random() * 1000000;
const downR0 = Math.random() * 1000000;
const upR1 = Math.random() * 1000000;
const downR1 = Math.random() * 1000000;
const upR2 = Math.random() * 1000000;
const downR2 = Math.random() * 1000000;
bins[i][22] = upR0+downR0;
bins[i]['22_data'] = {
sum:upR0+downR0,
up:upR0,
down:downR0
}
bins[i][44] = upR1+downR1;
bins[i]['44_data'] = {
sum:upR1+downR1,
up:upR1,
down:downR1
if(this.getQueryString()['testStreamgraph'] == 'true'){

//for test data in a sparse graph:::
const upR0 = Math.floor(Math.random() * 1000000);
const downR0 = Math.floor(Math.random() * 1000000);
const upR1 = Math.floor(Math.random() * 1000000);
const downR1 = Math.floor(Math.random() * 1000000);
const upR2 = Math.floor(Math.random() * 1000000);
const downR2 = Math.floor(Math.random() * 1000000);
bins[i][22] = upR0+downR0;
bins[i]['22_data'] = {
sum:upR0+downR0,
up:upR0,
down:downR0
}
bins[i][44] = upR1+downR1;
bins[i]['44_data'] = {
sum:upR1+downR1,
up:upR1,
down:downR1
}
bins[i][66] = upR2+downR2;
bins[i]['66_data'] = {
sum:upR2+downR2,
up:upR2,
down:downR2
}
}
bins[i][66] = upR2+downR2;
bins[i]['66_data'] = {
sum:upR2+downR2,
up:upR2,
down:downR2
}*/
};
console.log('bins',data,bins,minTime,maxTime);
return bins;
return {rows:bins,roundMins:minsPerBin};
}
modelData(data){
const rows = this.prefillBins(data);
const {rows,roundMins} = this.prefillBins(data);

Object.keys(data).map(subscriberID=>{
Object.keys(data[subscriberID]).map(timestamp=>{
let roundMins = Object.keys(data[subscriberID]).length <= 120 ? 2 : 15;
//let roundMins = Object.keys(data[subscriberID]).length <= 120 ? 2 : 15;
console.log('roundMins in data',roundMins)
let rounded = this.startOf(moment(timestamp,'X'),roundMins,'minute').format('X');//moment(timestamp,'X').startOf('hour').format('X');
if(typeof rows[rounded] == "undefined"){
rows[rounded] = {
Expand Down Expand Up @@ -277,13 +306,18 @@ export class StreamGraph{

});
})
console.log('rows',rows);
//console.log('rows',rows);
const rowsArray = Object.keys(rows).map(ts=>{
return rows[ts];
});
//console.log('rowsarray',rowsArray);
let keys = Object.keys(data);
if(this.getQueryString()['testStreamgraph'] == 'true'){
keys = Object.keys(data).concat([22,44,66]);
}
return d3.stack()
.keys(Object.keys(data))
//.keys(Object.keys(data).concat([22,44,66]))
//.keys(Object.keys(data))
.keys(keys) //testing with sparse data in graph
//.keys([5,22,44,66])
//.offset(d3.stackOffsetNone)
.offset(d3.stackOffsetSilhouette)
Expand All @@ -292,4 +326,26 @@ export class StreamGraph{
.order(d3.stackOrderInsideOut)*/
(rowsArray);
}
getQueryString(){
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
let query_string = {};
const query = window.location.search.substring(1);
let vars = query.split("&");
for (let i=0;i<vars.length;i++) {
const pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
const arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}
}

0 comments on commit e027747

Please sign in to comment.