Skip to content

Commit

Permalink
update prototype
Browse files Browse the repository at this point in the history
  • Loading branch information
konstantin committed Dec 5, 2014
1 parent 89e02ac commit 8bbb521
Show file tree
Hide file tree
Showing 7 changed files with 182 additions and 103 deletions.
3 changes: 2 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,8 @@ module.exports = function(grunt) {
files: {
"css/tooltip.css": "less/tooltip.less",
"css/graphic-elements.css": "less/graphic-elements.less",
"css/layout.css": "less/layout.less"
"css/layout.css": "less/layout.less",
"css/legend.css": "less/legend.less"
}
}
},
Expand Down
30 changes: 30 additions & 0 deletions css/legend.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,33 @@
top: 0;
left: 0;
}
.graphical-report__legend__item .color10-1 {
background: #e41a1c;
}
.graphical-report__legend__item .color10-2 {
background: #377eb8;
}
.graphical-report__legend__item .color10-3 {
background: #4daf4a;
}
.graphical-report__legend__item .color10-4 {
background: #984ea3;
}
.graphical-report__legend__item .color10-5 {
background: #ff7f00;
}
.graphical-report__legend__item .color10-6 {
background: #e9e964;
}
.graphical-report__legend__item .color10-7 {
background: #a65628;
}
.graphical-report__legend__item .color10-8 {
background: #f781bf;
}
.graphical-report__legend__item .color10-9 {
background: #999999;
}
.graphical-report__legend__item .color10-10 {
background: #222222;
}
16 changes: 15 additions & 1 deletion less/legend.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,18 @@

}
}
}
}

@category-colors: #e41a1c, #377eb8, #4daf4a, #984ea3, #ff7f00, #E9E964, #a65628, #f781bf, #999999, #222222;

@list_category-colors: length(@category-colors);

.generate-colors(@n; @i: 1) when (@i =< @n) {

.graphical-report__legend__item .color@{n}-@{i} {
background: extract(@category-colors, @i);
}

.generate-colors(@n; (@i + 1));
}
.generate-colors(@list_category-colors);
35 changes: 12 additions & 23 deletions prototype/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,36 +11,25 @@
<body>

<div class="graphical-report__layout">
<div class="graphical-report__layout__header">top</div>
<div class="graphical-report__layout__header"></div>
<div class="graphical-report__layout__container">
<div class="graphical-report__layout__sidebar">left</div>
<div class="graphical-report__layout__content" id="placeChart">center</div>
<div class="graphical-report__layout__sidebar"></div>
<div class="graphical-report__layout__content" id="placeChart"></div>
<div class="graphical-report__layout__sidebar-right" id="placeLegend">
<div class="graphical-report__legend">
<div class="graphical-report__legend__title">Entity type</div>
<div class="graphical-report__legend__item">
<div class="graphical-report__legend__example" style="background: #f00"></div>Feature
</div>
<div class="graphical-report__legend__item">
<div class="graphical-report__legend__example" style="background: #ff0"></div>User Story
</div>
<div class="graphical-report__legend__item">
<div class="graphical-report__legend__example" style="background: #00f"></div>Bug
</div>
<div class="graphical-report__legend__item disabled" >
<div class="graphical-report__legend__example" style="border-color: #0ff"></div>Task
</div>
</div>
</div>
</div>
<div class="graphical-report__layout__footer">bottom</div>
<div class="graphical-report__layout__footer"></div>
</div>
<template id="list">
<h4><%=name%></h4>
<ul><%=items%></ul>
<div class="graphical-report__legend">
<div class="graphical-report__legend__title"><%=name%></div>
<%=items%>
</div>
</template>
<template id="itemList">
<li class="<%=color%>"><%=color%>-<%=value%></li>
<div class="graphical-report__legend__item">
<div class="graphical-report__legend__example <%=color%>" ></div><%=value%>
</div>
</template>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js"></script>
Expand All @@ -63,7 +52,7 @@ <h4><%=name%></h4>
type:'line',
plugins:[tauCharts.api.plugins.get('legend')()]
});
chart.renderTo(document.querySelectorAll('.graphical-report_container__center-center')[0]);
chart.renderTo(document.querySelectorAll('#placeChart')[0]);
</script>
</body>
</html>
7 changes: 7 additions & 0 deletions prototype/scatter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,13 @@
<title></title>
</head>
<body>
<template id="list">
<h4><%=name%></h4>
<ul><%=items%></ul>
</template>
<template id="itemList">
<li class="<%=color%>"><%=color%>-<%=value%></li>
</template>
<div style="float: left;padding: 20px">
<label for="data">data</label><br/>
<textarea style='width:600px;height: 350px' id="data"></textarea>
Expand Down
165 changes: 87 additions & 78 deletions src/charts/tau.plot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,70 @@ import {CSS_PREFIX} from '../const';
import {UnitDomainMixin} from '../unit-domain-mixin';
import {UnitsRegistry} from '../units-registry';
import {DataProcessor} from '../data-processor';
import {getLayout} from '../utils/layuot-template';

export class Plot extends Emitter{
var traverseFromDeep = (root) => {
var r;

if (!root.unit) {
r = {w: 0, h: 0};
}
else {
var s = traverseFromDeep(root.unit[0]);
var g = root.guide;
var xmd = g.x.$minimalDomain || 1;
var ymd = g.y.$minimalDomain || 1;
var maxW = Math.max((xmd * g.x.density), (xmd * s.w));
var maxH = Math.max((ymd * g.y.density), (ymd * s.h));

r = {
w: maxW + g.padding.l + g.padding.r,
h: maxH + g.padding.t + g.padding.b
};
}

return r;
};

var traverseToDeep = (root, size, localSettings) => {

var mdx = root.guide.x.$minimalDomain || 1;
var mdy = root.guide.y.$minimalDomain || 1;

var perTickX = size.width / mdx;
var perTickY = size.height / mdy;

var densityKoeff = localSettings.xMinimumDensityKoeff;
if (root.guide.x.hide !== true && root.guide.x.rotate !== 0 && (perTickX > (densityKoeff * root.guide.x.$maxTickTextW))) {
root.guide.x.rotate = 0;
root.guide.x.textAnchor = 'middle';
root.guide.x.tickFormatWordWrapLimit = perTickX;
var s = Math.min(localSettings.xAxisTickLabelLimit, root.guide.x.$maxTickTextW);

var xDelta = 0 - s + root.guide.x.$maxTickTextH;

root.guide.x.label.padding = (root.guide.x.label.padding > 0) ? root.guide.x.label.padding + xDelta : root.guide.x.label.padding;
root.guide.padding.b = (root.guide.padding.b > 0) ? root.guide.padding.b + xDelta : root.guide.padding.b;
}

var newSize = {
width: perTickX,
height: perTickY
};

if (root.unit) {
traverseToDeep(root.unit[0], newSize, localSettings);
}
};

export class Plot extends Emitter {
constructor(config) {
super();
this._layout = getLayout();
this.setupConfig(config);
//plugins
this._plugins = new Plugins(this.config.plugins, this);
}
}

setupConfig(config) {
this.config = _.defaults(config, {
Expand All @@ -26,12 +82,12 @@ export class Plot extends Emitter{
plugins: [],
settings: {}
});
this._emptyContainer = config.emptyContainer || '';
this._emptyContainer = config.emptyContainer || '';
// TODO: remove this particular config cases
this.config.settings.specEngine = this.config.specEngine || this.config.settings.specEngine;
this.config.settings.specEngine = this.config.specEngine || this.config.settings.specEngine;
this.config.settings.layoutEngine = this.config.layoutEngine || this.config.settings.layoutEngine;

this.config.settings = this.setupSettings(this.config.settings);
this.config.settings = this.setupSettings(this.config.settings);
this.config.spec.dimensions = this.setupMetaInfo(this.config.spec.dimensions, this.config.data);

var prevLength = this.config.data.length;
Expand All @@ -46,9 +102,11 @@ export class Plot extends Emitter{
'WARN');
}
}

getConfig() {
return this.config;
}

setupMetaInfo(dims, data) {
var meta = (dims) ? dims : DataProcessor.autoDetectDimTypes(data);
return DataProcessor.autoAssignScales(meta);
Expand All @@ -65,39 +123,41 @@ export class Plot extends Emitter{

return _.defaults(configSettings || {}, localSettings);
}
/* addLine (conf) {
var unitContainer = this._spec.unit.unit;
while(true) {
if(unitContainer[0].unit) {
unitContainer = unitContainer[0].unit;
} else {
break;
}
}
unitContainer.push(conf);
}*/

/* addLine (conf) {
var unitContainer = this._spec.unit.unit;
while(true) {
if(unitContainer[0].unit) {
unitContainer = unitContainer[0].unit;
} else {
break;
}
}
unitContainer.push(conf);
}*/
addBalloon(conf) {
return new Tooltip('', conf || {});
}

renderTo(target, xSize) {
// this.addLine({type:'ELEMENT.LINE', isGuide:true});
var container = d3.select(target);
var containerNode = container[0][0];
var containerNode = container.node();
this.target = target;
this.targetSizes = xSize;
if (containerNode === null) {
throw new Error('Target element not found');
}

containerNode.appendChild(this._layout.container);
container = d3.select(this._layout.center);
//todo don't compute width if width or height were passed
var size = _.defaults(xSize || {}, utilsDom.getContainerSize(containerNode));
var size = _.defaults(xSize || {}, utilsDom.getContainerSize(this._layout.center));

if (this.config.data.length === 0) {
containerNode.innerHTML = this._emptyContainer;
this._layout.center.innerHTML = this._emptyContainer;
return;
}
containerNode.innerHTML = '';
this._layout.center.innerHTML = '';


var domainMixin = new UnitDomainMixin(this.config.spec.dimensions, this.config.data);
Expand All @@ -106,29 +166,6 @@ export class Plot extends Emitter{

var fullSpec = specEngine(this.config.spec, domainMixin.mix({}));

var traverseFromDeep = (root) => {
var r;

if (!root.unit) {
r = { w: 0, h: 0 };
}
else {
var s = traverseFromDeep(root.unit[0]);
var g = root.guide;
var xmd = g.x.$minimalDomain || 1;
var ymd = g.y.$minimalDomain || 1;
var maxW = Math.max((xmd * g.x.density), (xmd * s.w));
var maxH = Math.max((ymd * g.y.density), (ymd * s.h));

r = {
w: maxW + g.padding.l + g.padding.r,
h: maxH + g.padding.t + g.padding.b
};
}

return r;
};

var optimalSize = traverseFromDeep(fullSpec.unit);
var recommendedWidth = optimalSize.w;
var recommendedHeight = optimalSize.h;
Expand All @@ -145,43 +182,13 @@ export class Plot extends Emitter{
var scrollH = (deltaW >= 0) ? 0 : scrollSize;

size.height = screenH - scrollH;
size.width = screenW - scrollW;
size.width = screenW - scrollW;


// optimize full spec depending on size
var localSettings = this.config.settings;
var traverseToDeep = (root, size) => {

var mdx = root.guide.x.$minimalDomain || 1;
var mdy = root.guide.y.$minimalDomain || 1;

var perTickX = size.width / mdx;
var perTickY = size.height / mdy;

var densityKoeff = localSettings.xMinimumDensityKoeff;
if (root.guide.x.hide !== true && root.guide.x.rotate !== 0 && (perTickX > (densityKoeff * root.guide.x.$maxTickTextW))) {
root.guide.x.rotate = 0;
root.guide.x.textAnchor = 'middle';
root.guide.x.tickFormatWordWrapLimit = perTickX;
var s = Math.min(localSettings.xAxisTickLabelLimit, root.guide.x.$maxTickTextW);

var xDelta = 0 - s + root.guide.x.$maxTickTextH;

root.guide.x.label.padding = (root.guide.x.label.padding > 0) ? root.guide.x.label.padding + xDelta : root.guide.x.label.padding;
root.guide.padding.b = (root.guide.padding.b > 0) ? root.guide.padding.b + xDelta : root.guide.padding.b;
}

var newSize = {
width: perTickX,
height: perTickY
};

if (root.unit) {
traverseToDeep(root.unit[0], newSize);
}
};

traverseToDeep(fullSpec.unit, size);
traverseToDeep(fullSpec.unit, size, localSettings);


var reader = new DSLReader(domainMixin, UnitsRegistry);
Expand All @@ -201,9 +208,11 @@ export class Plot extends Emitter{
svgXElement.selectAll('.i-role-datum').call(propagateDatumEvents(this));
this.fire('render', svgXElement.node());
}

getData() {
return this.config.data;
}

setData(data) {
this.config.data = data;
this.renderTo(this.target, this.targetSizes);
Expand Down
Loading

0 comments on commit 8bbb521

Please sign in to comment.