Skip to content

Commit

Permalink
fully deprecated options attr in favor of style
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericdrowell
ericdrowell committed Apr 16, 2014
1 parent e176bad commit fcd2a7a
Show file tree
Hide file tree
Showing 12 changed files with 112 additions and 96 deletions.
7 changes: 0 additions & 7 deletions examples/html/line-chart-with-slider.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,6 @@

// set components data and options
components: {
slider: {
options: {
orientation: 'horizontal',
handleWidth: 60,
handleHeight: 15
}
},
lineSeries: {
data: data
}
Expand Down
12 changes: 0 additions & 12 deletions src/Chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ var MeteorChart;
this.layout = config.layout(this);
this.theme = config.theme;
this.interaction = config.interaction;
this.options = config.options;
this._components = config.components;
this.components = [];

Expand Down Expand Up @@ -95,18 +94,7 @@ var MeteorChart;
component = this._components[id];

if (component) {

// decorate options
if (!conf.options) {
conf.options = {};
}

if (component.options) {
conf.options = MeteorChart.Util.merge(conf.options, component.options);
}

// decorate data

if (component.data) {
conf.data = function() {
return component.data;
Expand Down
1 change: 0 additions & 1 deletion src/Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
this.className = config.name;
this.id = config.id;
this.name = config.name;
this.options = config.options || {};
this.dependencies = config.dependencies || {};

// binding functions
Expand Down
8 changes: 4 additions & 4 deletions src/components/Axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
var that = this,
chart = this.chart,
data = this.data(),
options = this.options,
style = this.style(),
min = data.min,
max = data.max,
diff = max - min,
scale = (this.options.orientation === 'vertical' ? this.height() : this.width()) / diff,
scale = (style.orientation === 'vertical' ? this.height() : this.width()) / diff,
offset = 0,
formatter = new MeteorChart.Formatters[options.unit || 'Number'](data.min, data.max, this.options.maxNumLabels || 5),
formatter = new MeteorChart.Formatters[style.unit || 'Number'](data.min, data.max, style.maxNumLabels || 5),
increment = formatter.increment;

this.innerContent.innerHTML = '';
Expand Down Expand Up @@ -44,7 +44,7 @@
text.style.color = theme.primary;
this.innerContent.appendChild(text);

if (this.options.orientation === 'vertical') {
if (this.style().orientation === 'vertical') {
text.style.top = this.height() - offset - (MeteorChart.Dom.getTextHeight(val) /2);
text.style.left = 0;
}
Expand Down
9 changes: 5 additions & 4 deletions src/components/Circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
},
render: function() {
var data = this.data(),
style = this.style(),
strokeWidth, radius;

if (data) {
radius = data.radius;
strokeWidth = data.strokeWidth;
radius = style.radius;
strokeWidth = style.strokeWidth;

this.svg.setAttribute('width', (radius * 2) + strokeWidth);
this.svg.setAttribute('height', (radius * 2) + strokeWidth);
Expand All @@ -28,8 +29,8 @@
this.circle.setAttribute('cx', radius + strokeWidth / 2);
this.circle.setAttribute('cy', radius + strokeWidth / 2);
this.circle.setAttribute('r', radius);
this.circle.setAttribute('fill', data.fill);
this.circle.setAttribute('stroke', data.stroke);
this.circle.setAttribute('fill', style.fill);
this.circle.setAttribute('stroke', style.stroke);
this.circle.setAttribute('stroke-width', strokeWidth);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/GridLines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
render: function() {
var theme = this.chart.theme,
font = theme.font,
orientation = this.options.orientation || 'horizontal',
orientation = this.style().orientation || 'horizontal',
data = this.data(),
lineWidth = this.options.lineWidth,
lineWidth = this.style().lineWidth,
context = this.context,
width = this.width(),
height = this.height(),
Expand Down
21 changes: 10 additions & 11 deletions src/components/Slider.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
(function() {
MeteorChart.Component.extend('Slider', {
init: function() {
var showTrack = this.options.showTrack;
var showTrack = this.style().showTrack;

// default
if (showTrack === undefined) {
Expand All @@ -24,13 +24,12 @@
render: function() {
var handle = this.handle,
track = this.track,
options = this.options,
style = this.style(),
theme = this.chart.theme,
handleWidth = options.handleWidth,
handleHeight = options.handleHeight,
handleWidth = style.handleWidth,
handleHeight = style.handleHeight,
trackSize = 1,
showTrack = this.options.showTrack;
showTrack = style.showTrack;

// default
if (showTrack === undefined) {
Expand All @@ -48,7 +47,7 @@
track.style.backgroundColor = theme.secondary, 0.1;
}

if (options.orientation === 'vertical') {
if (style.orientation === 'vertical') {
handle.style.top = 0;
handle.style.left = 0;

Expand Down Expand Up @@ -77,7 +76,7 @@
var that = this,
handle = this.handle,
chartContent = this.chart.content,
orientation = this.options.orientation || 'horizontal',
orientation = this.style().orientation || 'horizontal',
startOffsetPos = null,
startPointerPos = null;

Expand All @@ -104,7 +103,7 @@
var diff, newOffset;

if (orientation === 'horizontal') {
diff = that.width() - that.options.handleWidth;
diff = that.width() - that.style().handleWidth;
pointerPos = evt.clientX;
newOffset = pointerPos - startPointerPos + startOffsetPos;
if (newOffset < 0) {
Expand All @@ -116,7 +115,7 @@
handle.style.left = newOffset;
}
else {
diff = that.height() - that.options.handleHeight;
diff = that.height() - that.style().handleHeight;
pointerPos = evt.clientY;
newOffset = pointerPos - startPointerPos + startOffsetPos;
if (newOffset < 0) {
Expand Down Expand Up @@ -156,11 +155,11 @@
});

MeteorChart.Util.addMethod(MeteorChart.Components.Slider, 'width', function() {
return this.options.handleWidth;
return this.style().handleWidth;
});

MeteorChart.Util.addMethod(MeteorChart.Components.Slider, 'height', function() {
return this.options.handleHeight;
return this.style().handleHeight;
});

})();
72 changes: 42 additions & 30 deletions src/layouts/InteractiveLineChartWithSliders.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,12 @@
width: function() {
return chart.components.lineSeries.width();
},
options: {
orientation: 'horizontal',
handleWidth: 30,
handleHeight: 12
style: function() {
return {
orientation: 'horizontal',
handleWidth: 30,
handleHeight: 12
}
}
},
{
Expand All @@ -37,10 +39,12 @@

return components.lineSeries.height() + chart.padding() + components.inspectSlider.height();
},
options: {
orientation: 'vertical',
handleWidth: 12,
handleHeight: 30
style: function() {
return {
orientation: 'vertical',
handleWidth: 12,
handleHeight: 30
}
}
},
{
Expand Down Expand Up @@ -89,8 +93,10 @@
max: viewport.maxY
}
},
options: {
orientation: 'vertical'
style: function() {
return {
orientation: 'vertical'
}
}
},
{
Expand Down Expand Up @@ -118,8 +124,10 @@
max: viewport.maxX
}
},
options: {
maxIncrements: 5
style: function() {
return {
maxIncrements: 5
}
}
},
{
Expand All @@ -128,7 +136,7 @@
x: MeteorChart.Event.map({type: 'dragmove', id: 'inspectSlider'}, function(evt) {
var offset = evt && evt.offset ? evt.offset : 0,
inspectSlider = chart.components.inspectSlider;
return offset + inspectSlider.x() + (inspectSlider.options.handleWidth - chart.components.inspectLine.width())/ 2;
return offset + inspectSlider.x() + (inspectSlider.style().handleWidth - chart.components.inspectLine.width())/ 2;
}, chart, 'inspectLine'),
y: function() {
return chart.padding();
Expand All @@ -150,38 +158,44 @@
name: 'Circle',
x: function() {
var data = this.data(),
style = this.style(),
lineSeries = chart.components.lineSeries;

if (data) {
return lineSeries.dataToChartX(data.x) + lineSeries.x() - data.radius - (data.strokeWidth/2);
return lineSeries.dataToChartX(data.x) + lineSeries.x() - style.radius - (style.strokeWidth/2);
}
else {
return 0;
}
},
y: function() {
var data = this.data(),
style = this.style(),
lineSeries = chart.components.lineSeries;

if (data) {
return lineSeries.dataToChartY(data.y) + lineSeries.y() - data.radius - (data.strokeWidth/2);
return lineSeries.dataToChartY(data.y) + lineSeries.y() - style.radius - (style.strokeWidth/2);
}
else {
return 0;
}
},
style: function() {
var dataColor = MeteorChart.Color.getDataColor(chart.theme.data, 0);
return {
fill: MeteorChart.Color.hexToRgba(dataColor, 0.3),
stroke: dataColor,
radius: 16,
strokeWidth: 2
}
},
data: MeteorChart.Event.map({type: 'dragmove', id: 'inspectSlider'}, function(evt) {
var nearestPoint = chart.components.lineSeries.getSeriesNearestPointX(0, evt.offset),
dataColor = MeteorChart.Color.getDataColor(chart.theme.data, 0);
var nearestPoint = chart.components.lineSeries.getSeriesNearestPointX(0, evt.offset);

if (nearestPoint) {
return {
x: nearestPoint.x,
y: nearestPoint.y,
fill: MeteorChart.Color.hexToRgba(dataColor, 0.3),
stroke: dataColor,
radius: 16,
strokeWidth: 2
};
}
else {
Expand All @@ -193,24 +207,22 @@
id: 'inspectSlider',
name: 'Slider',
x: function() {
return chart.components.lineSeries.x() - (this.options.handleWidth) / 2;
return chart.components.lineSeries.x() - (this.style().handleWidth) / 2;
},
y: function() {
return chart.padding();
},
width: function() {
return chart.components.lineSeries.width() + this.options.handleWidth;
return chart.components.lineSeries.width() + this.style().handleWidth;
},
style: function() {
return {
handleFill: '#3fa9f5' // blue
handleFill: '#3fa9f5', // blue
orientation: 'horizontal',
showTrack: false,
handleWidth: 12,
handleHeight: 30
}
},
options: {
orientation: 'horizontal',
showTrack: false,
handleWidth: 12,
handleHeight: 30
}
}
]
Expand Down
28 changes: 18 additions & 10 deletions src/layouts/LineChartWithGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,11 @@
data: MeteorChart.Event.map({type: 'labelOffsetsChange', id: 'xAxis'}, function(evt) {
return evt.labelOffsets;
}, chart, 'verticalGridLines'),
options: {
orientation: 'vertical',
lineWidth: 2
style: function() {
return {
orientation: 'vertical',
lineWidth: 2
};
}
},
{
Expand All @@ -43,9 +45,11 @@
data: MeteorChart.Event.map({type: 'labelOffsetsChange', id: 'yAxis'}, function(evt) {
return evt.labelOffsets;
}, chart, 'horizontalGridLines'),
options: {
orientation: 'horizontal',
lineWidth: 2
style: function() {
return {
orientation: 'horizontal',
lineWidth: 2
};
}
},
{
Expand Down Expand Up @@ -96,8 +100,10 @@
max: viewport.maxX,
}
},
options: {
maxIncrements: 5
style: function() {
return {
maxIncrements: 5
};
}
},
{
Expand All @@ -124,8 +130,10 @@
max: viewport.maxY
}
},
options: {
orientation: 'vertical'
style: function() {
return {
orientation: 'vertical'
};
}
}
]
Expand Down
Loading

0 comments on commit fcd2a7a

Please sign in to comment.