jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

[heatmap] render domains

Browse Source
This commit is contained in:
Prateeksha Singh 2018-04-10 18:28:20 +05:30
parent 8acc304fad
commit 598b7192bc
12 changed files with 65 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
dist/frappe-charts.esm.js vendored
View File

@ -1854,13 +1854,15 @@ let componentConfigs = {
data.cols.map(week => { data.cols.map(week => {
week.map((day, i) => { week.map((day, i) => {
let data = { if(day.fill) {
'data-date': day.YyyyMmDd, let data = {
'data-value': day.dataValue, 'data-date': day.yyyyMmDd,
'data-day': i 'data-value': day.dataValue,
}; 'data-day': i
let square = heatSquare('day', x, y, squareSize, day.fill, data); };
this.serializedSubDomains.push(square); let square = heatSquare('day', x, y, squareSize, day.fill, data);
this.serializedSubDomains.push(square);
}
y += rowHeight; y += rowHeight;
}); });
y = 0; y = 0;
@ -2514,7 +2516,6 @@ class Heatmap extends BaseChart {
data.start = new Date(); data.start = new Date();
data.start.setFullYear( data.start.getFullYear() - 1 ); data.start.setFullYear( data.start.getFullYear() - 1 );
} }
console.log(data.start);
if(!data.end) { data.end = new Date(); } if(!data.end) { data.end = new Date(); }
data.dataPoints = data.dataPoints || {}; data.dataPoints = data.dataPoints || {};
@ -2547,8 +2548,6 @@ class Heatmap extends BaseChart {
setupComponents() { setupComponents() {
let s = this.state; let s = this.state;
console.log(s.domainConfigs);
let componentConfigs = s.domainConfigs.map((config, i) => [ let componentConfigs = s.domainConfigs.map((config, i) => [
'heatDomain', 'heatDomain',
{ {
@ -2558,19 +2557,22 @@ class Heatmap extends BaseChart {
squareSize: HEATMAP_SQUARE_SIZE, squareSize: HEATMAP_SQUARE_SIZE,
xTranslate: s.domainConfigs xTranslate: s.domainConfigs
.filter((config, j) => j < i) .filter((config, j) => j < i)
.map(config => config.cols.length) .map(config => config.cols.length - 1)
.reduce((a, b) => a + b, 0) .reduce((a, b) => a + b, 0)
* COL_WIDTH * COL_WIDTH
}, },
function() { function() {
return s.domainConfigs[i]; return s.domainConfigs[i];
}.bind(this) }.bind(this)
]); ]);
// console.log(s.domainConfigs)
this.components = new Map(componentConfigs this.components = new Map(componentConfigs
.map(args => { .map((args, i) => {
let component = getComponent(...args); let component = getComponent(...args);
return [args[0], component]; return [args[0] + '-' + i, component];
})); }));
} }
@ -2649,12 +2651,13 @@ class Heatmap extends BaseChart {
const col = this.getCol(startOfWeek, month); const col = this.getCol(startOfWeek, month);
cols.push(col); cols.push(col);
startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].dateStr); startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
addDays(startOfWeek, 1); addDays(startOfWeek, 1);
} }
if(startOfWeek.getDay() === this.startSubDomainIndex) { if(startOfWeek.getDay() === this.startSubDomainIndex) {
cols.push(new Array(NO_OF_DAYS_IN_WEEK).fill(0)); addDays(startOfWeek, 1);
cols.push(this.getCol(startOfWeek, month, true));
} }
domainConfig.cols = cols; domainConfig.cols = cols;
@ -2662,14 +2665,16 @@ class Heatmap extends BaseChart {
return domainConfig; return domainConfig;
} }
getCol(startDate, month) { getCol(startDate, month, empty = false) {
// startDate is the start of week // startDate is the start of week
let currentDate = clone(startDate); let currentDate = clone(startDate);
let col = []; let col = [];
for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) { for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
let config = 0; let config = {};
if(currentDate.getMonth() === month) { if(empty || currentDate.getMonth() !== month) {
config.yyyyMmDd = getYyyyMmDd(currentDate);
} else {
config = this.getSubDomainConfig(currentDate); config = this.getSubDomainConfig(currentDate);
} }
col.push(config); col.push(config);
@ -2679,10 +2684,10 @@ class Heatmap extends BaseChart {
} }
getSubDomainConfig(date) { getSubDomainConfig(date) {
let YyyyMmDd = getYyyyMmDd(date); let yyyyMmDd = getYyyyMmDd(date);
let dataValue = this.data.dataPoints[YyyyMmDd]; let dataValue = this.data.dataPoints[yyyyMmDd];
let config = { let config = {
YyyyMmDd: YyyyMmDd, yyyyMmDd: yyyyMmDd,
dataValue: dataValue || 0, dataValue: dataValue || 0,
fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)] fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
}; };

2
dist/frappe-charts.min.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-charts.min.iife.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/frappe-charts.min.js.map
View File

File diff suppressed because one or more lines are too long

2
docs/assets/js/index.js
View File

@ -270,7 +270,7 @@ let heatmap = new Chart("#chart-heatmap", {
colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'] colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
}); });
console.log('heatmapData', Object.assign({}, heatmapData), heatmap); console.log('heatmapData', Object.assign({}, heatmapData));
Array.prototype.slice.call( Array.prototype.slice.call(
document.querySelectorAll('.heatmap-mode-buttons button') document.querySelectorAll('.heatmap-mode-buttons button')

5
docs/assets/js/index.min.js vendored
View File

@ -88,6 +88,7 @@ var SEC_IN_DAY = 86400;
var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
// https://stackoverflow.com/a/11252167/6495043
function clone(date) { function clone(date) {
@ -263,6 +264,8 @@ var heatmapData = {
end: end end: end
}; };
// ================================================================================
var c1 = document.querySelector("#chart-composite-1"); var c1 = document.querySelector("#chart-composite-1");
var c2 = document.querySelector("#chart-composite-2"); var c2 = document.querySelector("#chart-composite-2");
@ -519,7 +522,7 @@ var heatmap = new Chart("#chart-heatmap", {
colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c'] colors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
}); });
console.log('heatmapData', Object.assign({}, heatmapData), heatmap); console.log('heatmapData', Object.assign({}, heatmapData));
Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) { Array.prototype.slice.call(document.querySelectorAll('.heatmap-mode-buttons button')).map(function (el) {
el.addEventListener('click', function (e) { el.addEventListener('click', function (e) {

2
docs/assets/js/index.min.js.map
View File

File diff suppressed because one or more lines are too long

31
src/js/charts/Heatmap.js
View File

@ -44,7 +44,6 @@ export default class Heatmap extends BaseChart {
data.start = new Date(); data.start = new Date();
data.start.setFullYear( data.start.getFullYear() - 1 ); data.start.setFullYear( data.start.getFullYear() - 1 );
} }
console.log(data.start);
if(!data.end) { data.end = new Date(); } if(!data.end) { data.end = new Date(); }
data.dataPoints = data.dataPoints || {}; data.dataPoints = data.dataPoints || {};
@ -77,8 +76,6 @@ export default class Heatmap extends BaseChart {
setupComponents() { setupComponents() {
let s = this.state; let s = this.state;
console.log(s.domainConfigs);
let componentConfigs = s.domainConfigs.map((config, i) => [ let componentConfigs = s.domainConfigs.map((config, i) => [
'heatDomain', 'heatDomain',
{ {
@ -88,19 +85,22 @@ export default class Heatmap extends BaseChart {
squareSize: HEATMAP_SQUARE_SIZE, squareSize: HEATMAP_SQUARE_SIZE,
xTranslate: s.domainConfigs xTranslate: s.domainConfigs
.filter((config, j) => j < i) .filter((config, j) => j < i)
.map(config => config.cols.length) .map(config => config.cols.length - 1)
.reduce((a, b) => a + b, 0) .reduce((a, b) => a + b, 0)
* COL_WIDTH * COL_WIDTH
}, },
function() { function() {
return s.domainConfigs[i]; return s.domainConfigs[i];
}.bind(this) }.bind(this)
]) ])
// console.log(s.domainConfigs)
this.components = new Map(componentConfigs this.components = new Map(componentConfigs
.map(args => { .map((args, i) => {
let component = getComponent(...args); let component = getComponent(...args);
return [args[0], component]; return [args[0] + '-' + i, component];
})); }));
} }
@ -180,12 +180,13 @@ export default class Heatmap extends BaseChart {
const col = this.getCol(startOfWeek, month); const col = this.getCol(startOfWeek, month);
cols.push(col); cols.push(col);
startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].dateStr); startOfWeek = new Date(col[NO_OF_DAYS_IN_WEEK - 1].yyyyMmDd);
addDays(startOfWeek, 1); addDays(startOfWeek, 1);
} }
if(startOfWeek.getDay() === this.startSubDomainIndex) { if(startOfWeek.getDay() === this.startSubDomainIndex) {
cols.push(new Array(NO_OF_DAYS_IN_WEEK).fill(0)); addDays(startOfWeek, 1);
cols.push(this.getCol(startOfWeek, month, true));
} }
domainConfig.cols = cols; domainConfig.cols = cols;
@ -193,14 +194,16 @@ export default class Heatmap extends BaseChart {
return domainConfig; return domainConfig;
} }
getCol(startDate, month) { getCol(startDate, month, empty = false) {
// startDate is the start of week // startDate is the start of week
let currentDate = clone(startDate); let currentDate = clone(startDate);
let col = []; let col = [];
for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) { for(var i = 0; i < NO_OF_DAYS_IN_WEEK; i++, addDays(currentDate, 1)) {
let config = 0; let config = {};
if(currentDate.getMonth() === month) { if(empty || currentDate.getMonth() !== month) {
config.yyyyMmDd = getYyyyMmDd(currentDate);
} else {
config = this.getSubDomainConfig(currentDate); config = this.getSubDomainConfig(currentDate);
} }
col.push(config); col.push(config);
@ -210,10 +213,10 @@ export default class Heatmap extends BaseChart {
} }
getSubDomainConfig(date) { getSubDomainConfig(date) {
let YyyyMmDd = getYyyyMmDd(date); let yyyyMmDd = getYyyyMmDd(date);
let dataValue = this.data.dataPoints[YyyyMmDd]; let dataValue = this.data.dataPoints[yyyyMmDd];
let config = { let config = {
YyyyMmDd: YyyyMmDd, yyyyMmDd: yyyyMmDd,
dataValue: dataValue || 0, dataValue: dataValue || 0,
fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)] fill: this.colors[getMaxCheckpoint(dataValue, this.state.distribution)]
} }

18
src/js/objects/ChartComponents.js
View File

@ -237,18 +237,20 @@ let componentConfigs = {
data.cols.map(week => { data.cols.map(week => {
week.map((day, i) => { week.map((day, i) => {
let data = { if(day.fill) {
'data-date': day.YyyyMmDd, let data = {
'data-value': day.dataValue, 'data-date': day.yyyyMmDd,
'data-day': i 'data-value': day.dataValue,
}; 'data-day': i
let square = heatSquare('day', x, y, squareSize, day.fill, data); };
this.serializedSubDomains.push(square); let square = heatSquare('day', x, y, squareSize, day.fill, data);
this.serializedSubDomains.push(square);
}
y += rowHeight; y += rowHeight;
}) })
y = 0; y = 0;
x += colWidth; x += colWidth;
}) });
return this.serializedSubDomains; return this.serializedSubDomains;
}, },