Composite Category Axes

master
johnkiernander 2014-04-02 14:28:25 +01:00
parent c9087f9480
commit bd63f88d90
8 changed files with 4529 additions and 31 deletions

47
dist/dimple.v1.1.6.js vendored
View File

@ -279,7 +279,7 @@ var dimple = {
this._max = (this.overrideMax !== null ? this.overrideMax : this._max);
// If this is an x axis
if (this.position === "x") {
if (this.position === "x" && this._scale === null) {
if (this._hasTimeField()) {
this._scale = d3.time.scale()
.rangeRound([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
@ -296,6 +296,12 @@ var dimple = {
.nice();
} else if (this.measure === null || this.measure === undefined) {
distinctCats = getOrderedCategories(this, "x", "y");
// If there are any slaves process accordingly
if (this._slaves !== null && this._slaves !== undefined) {
this._slaves.forEach(function (slave) {
distinctCats = distinctCats.concat(getOrderedCategories(slave, "x", "y"));
}, this);
}
this._scale = d3.scale.ordinal()
.rangePoints([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
.domain(distinctCats.concat([""]));
@ -321,7 +327,7 @@ var dimple = {
break;
}
}
} else if (this.position === "y") {
} else if (this.position === "y" && this._scale === null) {
if (this._hasTimeField()) {
this._scale = d3.time.scale()
.rangeRound([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
@ -338,6 +344,12 @@ var dimple = {
.nice();
} else if (this.measure === null || this.measure === undefined) {
distinctCats = getOrderedCategories(this, "y", "x");
// If there are any slaves process accordingly
if (this._slaves !== null && this._slaves !== undefined) {
this._slaves.forEach(function (slave) {
distinctCats = distinctCats.concat(getOrderedCategories(slave, "y", "x"));
}, this);
}
this._scale = d3.scale.ordinal()
.rangePoints([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
.domain(distinctCats.concat([""]));
@ -364,7 +376,7 @@ var dimple = {
break;
}
}
} else if (this.position.length > 0 && this.position[0] === "z") {
} else if (this.position.length > 0 && this.position[0] === "z" && this._scale === null) {
if (this.useLog) {
this._scale = d3.scale.log()
.range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
@ -379,7 +391,7 @@ var dimple = {
.range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
.domain([this._min, this._max]);
}
} else if (this.position.length > 0 && this.position[0] === "c") {
} else if (this.position.length > 0 && this.position[0] === "c" && this._scale === null) {
this._scale = d3.scale.linear()
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
.domain([this._min, this._max]);
@ -629,17 +641,26 @@ var dimple = {
aggField = [],
key,
k,
i,
newRow,
updateData;
if (series.categoryFields === null || series.categoryFields === undefined || series.categoryFields.length === 0) {
aggField = ["All"];
} else if (series.categoryFields.length === 1 && d[series.categoryFields[0]] === undefined) {
aggField = [series.categoryFields[0]];
} else {
series.categoryFields.forEach(function (cat) {
aggField.push(d[cat]);
}, this);
// Iterate the category fields
for (i = 0; i < series.categoryFields.length; i += 1) {
// Either add the value of the field or the name itself. This allows users to add custom values, for example
// Setting a particular color for a set of values can be done by using a non-existent final value and then coloring
// by it
if (d[series.categoryFields[i]] === undefined) {
aggField.push(series.categoryFields[i]);
} else {
aggField.push(d[series.categoryFields[i]]);
}
}
}
// Add a key
key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
// See if this field has already been added.
@ -1258,7 +1279,13 @@ var dimple = {
}, this);
axis._max = distinctCats.length;
}
// Set the bounds on all slaves
if (axis._slaves !== null && axis._slaves !== undefined && axis._slaves.length > 0) {
axis._slaves.forEach(function (slave) {
slave._min = axis._min;
slave._max = axis._max;
}, this);
}
// Update the axis now we have all information set
axis._update();

File diff suppressed because one or more lines are too long

View File

@ -10,10 +10,13 @@
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.line);
var x1 = myChart.addCategoryAxis("x", "Month");
x1.addOrderRule("Date");
var x2 = myChart.addCategoryAxis(x1, "Price Tier");
var y1 = myChart.addMeasureAxis("y", "Unit Sales");
var y2 = myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.line, [x1, y1]);
myChart.addSeries("Channel", dimple.plot.bar, [x2, y2]);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});

View File

@ -7,10 +7,13 @@
data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Unit Sales");
myChart.addSeries("Channel", dimple.plot.line);
var x1 = myChart.addCategoryAxis("x", "Month");
x1.addOrderRule("Date");
var x2 = myChart.addCategoryAxis(x1, "Price Tier");
var y1 = myChart.addMeasureAxis("y", "Unit Sales");
var y2 = myChart.addMeasureAxis("y", "Operating Profit");
myChart.addSeries("Channel", dimple.plot.line, [x1, y1]);
myChart.addSeries("Channel", dimple.plot.bar, [x2, y2]);
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});

View File

@ -45,7 +45,7 @@
this._max = (this.overrideMax !== null ? this.overrideMax : this._max);
// If this is an x axis
if (this.position === "x") {
if (this.position === "x" && this._scale === null) {
if (this._hasTimeField()) {
this._scale = d3.time.scale()
.rangeRound([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
@ -62,6 +62,12 @@
.nice();
} else if (this.measure === null || this.measure === undefined) {
distinctCats = getOrderedCategories(this, "x", "y");
// If there are any slaves process accordingly
if (this._slaves !== null && this._slaves !== undefined) {
this._slaves.forEach(function (slave) {
distinctCats = distinctCats.concat(getOrderedCategories(slave, "x", "y"));
}, this);
}
this._scale = d3.scale.ordinal()
.rangePoints([this.chart._xPixels(), this.chart._xPixels() + this.chart._widthPixels()])
.domain(distinctCats.concat([""]));
@ -87,7 +93,7 @@
break;
}
}
} else if (this.position === "y") {
} else if (this.position === "y" && this._scale === null) {
if (this._hasTimeField()) {
this._scale = d3.time.scale()
.rangeRound([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
@ -104,6 +110,12 @@
.nice();
} else if (this.measure === null || this.measure === undefined) {
distinctCats = getOrderedCategories(this, "y", "x");
// If there are any slaves process accordingly
if (this._slaves !== null && this._slaves !== undefined) {
this._slaves.forEach(function (slave) {
distinctCats = distinctCats.concat(getOrderedCategories(slave, "y", "x"));
}, this);
}
this._scale = d3.scale.ordinal()
.rangePoints([this.chart._yPixels() + this.chart._heightPixels(), this.chart._yPixels()])
.domain(distinctCats.concat([""]));
@ -130,7 +142,7 @@
break;
}
}
} else if (this.position.length > 0 && this.position[0] === "z") {
} else if (this.position.length > 0 && this.position[0] === "z" && this._scale === null) {
if (this.useLog) {
this._scale = d3.scale.log()
.range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
@ -145,7 +157,7 @@
.range([this.chart._heightPixels() / 300, this.chart._heightPixels() / 10])
.domain([this._min, this._max]);
}
} else if (this.position.length > 0 && this.position[0] === "c") {
} else if (this.position.length > 0 && this.position[0] === "c" && this._scale === null) {
this._scale = d3.scale.linear()
.range([0, (this.colors === null || this.colors.length === 1 ? 1 : this.colors.length - 1)])
.domain([this._min, this._max]);

View File

@ -110,17 +110,26 @@
aggField = [],
key,
k,
i,
newRow,
updateData;
if (series.categoryFields === null || series.categoryFields === undefined || series.categoryFields.length === 0) {
aggField = ["All"];
} else if (series.categoryFields.length === 1 && d[series.categoryFields[0]] === undefined) {
aggField = [series.categoryFields[0]];
} else {
series.categoryFields.forEach(function (cat) {
aggField.push(d[cat]);
}, this);
// Iterate the category fields
for (i = 0; i < series.categoryFields.length; i += 1) {
// Either add the value of the field or the name itself. This allows users to add custom values, for example
// Setting a particular color for a set of values can be done by using a non-existent final value and then coloring
// by it
if (d[series.categoryFields[i]] === undefined) {
aggField.push(series.categoryFields[i]);
} else {
aggField.push(d[series.categoryFields[i]]);
}
}
}
// Add a key
key = aggField.join("/") + "_" + xField.join("/") + "_" + yField.join("/") + "_" + zField.join("/");
// See if this field has already been added.

View File

@ -103,7 +103,13 @@
}, this);
axis._max = distinctCats.length;
}
// Set the bounds on all slaves
if (axis._slaves !== null && axis._slaves !== undefined && axis._slaves.length > 0) {
axis._slaves.forEach(function (slave) {
slave._min = axis._min;
slave._max = axis._max;
}, this);
}
// Update the axis now we have all information set
axis._update();

4438
tmp/dimple.js Normal file

File diff suppressed because it is too large Load Diff