ItEr37S16RFMaquetacionDesenhoAplicacionItEr36S18: Chart legends and scrolling reviewed
* The scrolling keeps the year and horizontal legend fixed.
This commit is contained in:
parent
7f7133994f
commit
39e552bb79
7 changed files with 115 additions and 68 deletions
|
|
@ -66,7 +66,7 @@ planner = self;
|
|||
</center>
|
||||
</borderlayout>
|
||||
</center>
|
||||
<south height="200px" collapsible="true" title="Graphics"
|
||||
<south height="150px" collapsible="true" title="Graphics"
|
||||
sclass="scheduling-graphics">
|
||||
<div id="insertionPointChart" />
|
||||
</south>
|
||||
|
|
|
|||
|
|
@ -94,6 +94,15 @@ function leftpanelcontainer() {
|
|||
return YAHOO.util.Selector.query('.leftpanelcontainer')[0];
|
||||
}
|
||||
|
||||
function timeplotcontainer_load() {
|
||||
return YAHOO.util.Selector.query('.timeplot-canvas')[0];
|
||||
}
|
||||
|
||||
function timeplotcontainer_earnedvalue() {
|
||||
return YAHOO.util.Selector.query('.timeplot-canvas')[1];
|
||||
}
|
||||
|
||||
|
||||
zkTasklist.init = function(cmp) {
|
||||
zkTasklist.adjust_height();
|
||||
listenToScroll();
|
||||
|
|
@ -115,11 +124,16 @@ function listenToScroll() {
|
|||
leftpanel_ = leftpanel();
|
||||
rightpanellayout_ = rightpanellayout();
|
||||
plannergraph_ = plannergraph();
|
||||
timeplotcontainer_load_ = timeplotcontainer_load();
|
||||
timeplotcontainer_earnedvalue_ = timeplotcontainer_earnedvalue();
|
||||
|
||||
var onScroll = function() {
|
||||
timetrackergap_.style["left"] = "-" + scrolledpannel_.scrollLeft + "px";
|
||||
leftpanel_.style["top"] = "-" + scrolledpannel_.scrollTop + "px";
|
||||
plannergraph_.scrollLeft = scrolledpannel_.scrollLeft;
|
||||
timeplotcontainer_load_.style["left"] = "-" + scrolledpannel_.scrollLeft + "px";
|
||||
timeplotcontainer_earnedvalue_.style["left"] = "-" + scrolledpannel_.scrollLeft + "px";
|
||||
|
||||
};
|
||||
rightpanellayout_.onscroll = onScroll;
|
||||
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ import org.zkoss.zk.ui.event.Events;
|
|||
import org.zkoss.zul.Checkbox;
|
||||
import org.zkoss.zul.Div;
|
||||
import org.zkoss.zul.Hbox;
|
||||
import org.zkoss.zul.Label;
|
||||
import org.zkoss.zul.Tab;
|
||||
import org.zkoss.zul.Tabbox;
|
||||
import org.zkoss.zul.Tabpanel;
|
||||
|
|
@ -159,7 +158,6 @@ public abstract class CompanyPlanningModel implements ICompanyPlanningModel {
|
|||
|
||||
Tabbox chartComponent = new Tabbox();
|
||||
chartComponent.setOrient("vertical");
|
||||
chartComponent.setHeight("200px");
|
||||
appendTabs(chartComponent);
|
||||
|
||||
Timeplot chartLoadTimeplot = new Timeplot();
|
||||
|
|
@ -219,16 +217,19 @@ public abstract class CompanyPlanningModel implements ICompanyPlanningModel {
|
|||
}
|
||||
|
||||
private org.zkoss.zk.ui.Component getLoadChartLegend() {
|
||||
Div div = new Div();
|
||||
Hbox hbox = new Hbox();
|
||||
hbox.setClass("legend-container");
|
||||
hbox.setAlign("center");
|
||||
hbox.setPack("center");
|
||||
Executions.createComponents("/planner/_legendLoadChartCompany.zul",
|
||||
div, null);
|
||||
return div;
|
||||
hbox, null);
|
||||
return hbox;
|
||||
}
|
||||
|
||||
private void appendEarnedValueChartAndLegend(
|
||||
Tabpanel earnedValueChartPannel, Timeplot chartEarnedValueTimeplot) {
|
||||
Hbox hbox = new Hbox();
|
||||
|
||||
hbox.setSclass("earned-value-chart");
|
||||
hbox.appendChild(getEarnedValueChartConfigurableLegend());
|
||||
|
||||
Div div = new Div();
|
||||
|
|
@ -241,26 +242,23 @@ public abstract class CompanyPlanningModel implements ICompanyPlanningModel {
|
|||
}
|
||||
|
||||
private org.zkoss.zk.ui.Component getEarnedValueChartConfigurableLegend() {
|
||||
Hbox mainhbox = new Hbox();
|
||||
mainhbox.setClass("legend-container");
|
||||
mainhbox.setAlign("center");
|
||||
mainhbox.setPack("center");
|
||||
|
||||
Vbox vbox = new Vbox();
|
||||
vbox.setId("earnedValueChartConfiguration");
|
||||
vbox.setClass("legend");
|
||||
|
||||
Hbox hboxTitle = new Hbox();
|
||||
hboxTitle.setClass("legend-title");
|
||||
hboxTitle.setPack("center");
|
||||
|
||||
Label labelTitle = new Label(_("Chart legend"));
|
||||
labelTitle.setClass("title");
|
||||
hboxTitle.appendChild(labelTitle);
|
||||
|
||||
vbox.appendChild(hboxTitle);
|
||||
|
||||
Vbox column1 = new Vbox();
|
||||
Vbox column2 = new Vbox();
|
||||
column1.setWidth("75px");
|
||||
column2.setWidth("75px");
|
||||
Vbox column3 = new Vbox();
|
||||
column1.setSclass("earned-parameter-column");
|
||||
column2.setSclass("earned-parameter-column");
|
||||
column3.setSclass("earned-parameter-column");
|
||||
|
||||
boolean odd = true;
|
||||
int columnNumber = 0;
|
||||
|
||||
for (EarnedValueType type : EarnedValueType.values()) {
|
||||
Checkbox checkbox = new Checkbox(type.getAcronym());
|
||||
|
|
@ -268,21 +266,29 @@ public abstract class CompanyPlanningModel implements ICompanyPlanningModel {
|
|||
checkbox.setAttribute("indicator", type);
|
||||
checkbox.setStyle("color: " + type.getColor());
|
||||
|
||||
if (odd) {
|
||||
columnNumber = columnNumber + 1;
|
||||
switch (columnNumber) {
|
||||
case 1:
|
||||
column1.appendChild(checkbox);
|
||||
} else {
|
||||
break;
|
||||
case 2:
|
||||
column2.appendChild(checkbox);
|
||||
break;
|
||||
case 3:
|
||||
column3.appendChild(checkbox);
|
||||
columnNumber = 0;
|
||||
}
|
||||
|
||||
earnedValueChartConfigurationCheckboxes.add(checkbox);
|
||||
odd = !odd;
|
||||
|
||||
}
|
||||
|
||||
Hbox hbox = new Hbox();
|
||||
hbox.appendChild(column1);
|
||||
hbox.appendChild(column2);
|
||||
hbox.appendChild(column3);
|
||||
|
||||
vbox.appendChild(hbox);
|
||||
mainhbox.appendChild(vbox);
|
||||
|
||||
markAsSelectedDefaultIndicators();
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,6 @@ import org.zkoss.zk.ui.event.Events;
|
|||
import org.zkoss.zul.Checkbox;
|
||||
import org.zkoss.zul.Div;
|
||||
import org.zkoss.zul.Hbox;
|
||||
import org.zkoss.zul.Label;
|
||||
import org.zkoss.zul.Tab;
|
||||
import org.zkoss.zul.Tabbox;
|
||||
import org.zkoss.zul.Tabpanel;
|
||||
|
|
@ -176,7 +175,7 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
|
||||
Tabbox chartComponent = new Tabbox();
|
||||
chartComponent.setOrient("vertical");
|
||||
chartComponent.setHeight("200px");
|
||||
// chartComponent.setHeight("200px");
|
||||
appendTabs(chartComponent);
|
||||
|
||||
Timeplot chartLoadTimeplot = new Timeplot();
|
||||
|
|
@ -204,7 +203,7 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
chartTabs.appendChild(new Tab(_("Earned value")));
|
||||
|
||||
chartComponent.appendChild(chartTabs);
|
||||
chartTabs.setWidth("100px");
|
||||
chartTabs.setSclass("charts-tabbox");
|
||||
}
|
||||
|
||||
private void appendTabpanels(Tabbox chartComponent, Timeplot loadChart,
|
||||
|
|
@ -227,6 +226,7 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
Timeplot loadChart) {
|
||||
Hbox hbox = new Hbox();
|
||||
hbox.appendChild(getLoadChartLegend());
|
||||
hbox.setSclass("load-chart");
|
||||
|
||||
Div div = new Div();
|
||||
div.appendChild(loadChart);
|
||||
|
|
@ -237,10 +237,13 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
}
|
||||
|
||||
private org.zkoss.zk.ui.Component getLoadChartLegend() {
|
||||
Div div = new Div();
|
||||
Executions.createComponents("/planner/_legendLoadChartOrder.zul", div,
|
||||
Hbox hbox = new Hbox();
|
||||
hbox.setClass("legend-container");
|
||||
hbox.setAlign("center");
|
||||
hbox.setPack("center");
|
||||
Executions.createComponents("/planner/_legendLoadChartOrder.zul", hbox,
|
||||
null);
|
||||
return div;
|
||||
return hbox;
|
||||
}
|
||||
|
||||
private void appendEarnedValueChartAndLegend(
|
||||
|
|
@ -257,26 +260,23 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
}
|
||||
|
||||
private org.zkoss.zk.ui.Component getEarnedValueChartConfigurableLegend() {
|
||||
Hbox mainhbox = new Hbox();
|
||||
mainhbox.setClass("legend-container");
|
||||
mainhbox.setAlign("center");
|
||||
mainhbox.setPack("center");
|
||||
|
||||
Vbox vbox = new Vbox();
|
||||
vbox.setId("earnedValueChartConfiguration");
|
||||
vbox.setClass("legend");
|
||||
|
||||
Hbox hboxTitle = new Hbox();
|
||||
hboxTitle.setClass("legend-title");
|
||||
hboxTitle.setPack("center");
|
||||
|
||||
Label labelTitle = new Label(_("Chart legend"));
|
||||
labelTitle.setClass("title");
|
||||
hboxTitle.appendChild(labelTitle);
|
||||
|
||||
vbox.appendChild(hboxTitle);
|
||||
|
||||
Vbox column1 = new Vbox();
|
||||
Vbox column2 = new Vbox();
|
||||
column1.setWidth("75px");
|
||||
column2.setWidth("75px");
|
||||
Vbox column3 = new Vbox();
|
||||
column1.setSclass("earned-parameter-column");
|
||||
column2.setSclass("earned-parameter-column");
|
||||
column3.setSclass("earned-parameter-column");
|
||||
|
||||
boolean odd = true;
|
||||
int columnNumber = 0;
|
||||
|
||||
for (EarnedValueType type : EarnedValueType.values()) {
|
||||
Checkbox checkbox = new Checkbox(type.getAcronym());
|
||||
|
|
@ -284,21 +284,30 @@ public abstract class OrderPlanningModel implements IOrderPlanningModel {
|
|||
checkbox.setAttribute("indicator", type);
|
||||
checkbox.setStyle("color: " + type.getColor());
|
||||
|
||||
if (odd) {
|
||||
columnNumber = columnNumber + 1;
|
||||
switch (columnNumber) {
|
||||
case 1:
|
||||
column1.appendChild(checkbox);
|
||||
} else {
|
||||
break;
|
||||
case 2:
|
||||
column2.appendChild(checkbox);
|
||||
break;
|
||||
case 3:
|
||||
column3.appendChild(checkbox);
|
||||
columnNumber = 0;
|
||||
break;
|
||||
}
|
||||
|
||||
earnedValueChartConfigurationCheckboxes.add(checkbox);
|
||||
odd = !odd;
|
||||
}
|
||||
|
||||
Hbox hbox = new Hbox();
|
||||
hbox.appendChild(column1);
|
||||
hbox.appendChild(column2);
|
||||
hbox.appendChild(column3);
|
||||
|
||||
vbox.appendChild(hbox);
|
||||
mainhbox.setClass("legend-container");
|
||||
mainhbox.appendChild(vbox);
|
||||
|
||||
markAsSelectedDefaultIndicators();
|
||||
|
||||
|
|
|
|||
|
|
@ -662,10 +662,16 @@ div.z-grid {
|
|||
font-family: Tahoma, Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
border: solid 1px #000000;
|
||||
padding: 10px 30px 10px 30px;
|
||||
padding: 5px 10px;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.legend-container {
|
||||
width: 226px;
|
||||
height: 104px;
|
||||
background-color: #E8E8E8;
|
||||
}
|
||||
|
||||
.legend td {
|
||||
vertical-align:bottom;
|
||||
}
|
||||
|
|
@ -714,14 +720,14 @@ div.z-grid {
|
|||
}
|
||||
|
||||
.legend .overload-other {
|
||||
border-top:solid 1px #FFFF00;
|
||||
border-top:solid 1px #7f007f;
|
||||
height:7px;
|
||||
width:25px;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.legend .other {
|
||||
background-color:#00FF00;
|
||||
background-color:#7f007f;
|
||||
height:10px;
|
||||
width:25px;
|
||||
margin-bottom:2px;
|
||||
|
|
@ -913,3 +919,23 @@ tr.z-tree-row-seld, tr.z-list-item-seld {
|
|||
background-color: #2a83b4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.timeplot-canvas {
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.resourcesload .timetrackergap .z-grid-header{
|
||||
heigth: 15px;
|
||||
}
|
||||
|
||||
.scheduling-graphics .z-tabs-ver {
|
||||
width: 60px !important;
|
||||
}
|
||||
.scheduling-graphics .z-tab-ver .z-tab-ver-text {
|
||||
white-space: normal;
|
||||
}
|
||||
.earned-parameter-column {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,10 +23,6 @@
|
|||
|
||||
<vbox sclass="legend">
|
||||
|
||||
<hbox pack="center" sclass="legend-title">
|
||||
<n:label class="title">${i18n:_('Chart legend')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<n:div class="capability"/>
|
||||
<n:label>${i18n:_('Total capability')}</n:label>
|
||||
|
|
|
|||
|
|
@ -23,35 +23,31 @@
|
|||
|
||||
<vbox sclass="legend">
|
||||
|
||||
<hbox pack="center" sclass="legend-title">
|
||||
<n:label class="title">${i18n:_('Chart legend')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<hbox pack="center" sclass="legend-row" tooltiptext="${i18n:_('Resources capability')}">
|
||||
<n:div class="capability"/>
|
||||
<n:label>${i18n:_('Capability')}</n:label>
|
||||
<n:label>${i18n:_('Total capability')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<hbox pack="center" sclass="legend-row" tooltiptext="${i18n:_('Overload due to other projects')}">
|
||||
<n:div class="overload-other"/>
|
||||
<n:label>${i18n:_('Overload due to other')}</n:label>
|
||||
<n:label>${i18n:_('Overload (*)')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<hbox pack="center" sclass="legend-row" tooltiptext="${i18n:_('Overload due to order')}">
|
||||
<n:div class="overload-order"/>
|
||||
<n:label>${i18n:_('Overload due to order')}</n:label>
|
||||
<n:label>${i18n:_('Overload')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<hbox pack="center" sclass="legend-row" tooltiptext="${i18n:_('Other assignments')}">
|
||||
<n:div class="other"/>
|
||||
<n:label>${i18n:_('Other assignments')}</n:label>
|
||||
</hbox>
|
||||
|
||||
<hbox pack="center" sclass="legend-row">
|
||||
<hbox pack="center" sclass="legend-row" tooltiptext="${i18n:_('Load due to order')}">
|
||||
<n:div class="load" />
|
||||
<n:label>${i18n:_('Load due to order')}</n:label>
|
||||
<n:label>${i18n:_('Load')}</n:label>
|
||||
</hbox>
|
||||
|
||||
</vbox>
|
||||
|
||||
</zk>
|
||||
</zk>
|
||||
Loading…
Add table
Reference in a new issue