mirror of https://github.com/vitalif/dimple
Added Custom Classing
parent
2718be6f83
commit
de75f386e6
|
@ -32,7 +32,7 @@
|
|||
if (series.y._hasCategories()) {
|
||||
fields = fields.concat(d.yField);
|
||||
}
|
||||
return dimple._createClass(fields) + " " + markerClasses.join(" ");
|
||||
return dimple._createClass(fields) + " " + markerClasses.join(" ") + " " + chart.customClassList.lineMarker;
|
||||
})
|
||||
.on("mouseover", function (e) {
|
||||
enterEventHandler(e, this, chart, series);
|
||||
|
|
|
@ -113,12 +113,12 @@
|
|||
t = chart._tooltipGroup.append("g");
|
||||
// Create a box for the popup in the text group
|
||||
box = t.append("rect")
|
||||
.attr("class", "dimple-tooltip");
|
||||
.attr("class", "dimple-tooltip " + chart.customClassList.tooltipBox);
|
||||
|
||||
// Create a text object for every row in the popup
|
||||
t.selectAll(".dimple-dont-select-any").data(tipText).enter()
|
||||
.append("text")
|
||||
.attr("class", "dimple-tooltip")
|
||||
.attr("class", "dimple-tooltip " + chart.customClassList.tooltipLabel)
|
||||
.text(function (d) { return d; })
|
||||
.style("font-family", series.tooltipFontFamily)
|
||||
.style("font-size", series._getTooltipFontSize());
|
||||
|
|
|
@ -34,6 +34,23 @@
|
|||
this.ease = "cubic-in-out";
|
||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-staggerDraw
|
||||
this.staggerDraw = false;
|
||||
// Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-classList
|
||||
this.customClassList = {
|
||||
axisLine: 'dimple-custom-axis-line',
|
||||
axisLabel: 'dimple-custom-axis-label',
|
||||
axisTitle: 'dimple-custom-axis-title',
|
||||
tooltipBox: 'dimple-custom-tooltip-box',
|
||||
tooltipLabel: 'dimple-custom-tooltip-label',
|
||||
lineMarker: 'dimple-custom-line-marker',
|
||||
legendLabel: 'dimple-custom-legend-label',
|
||||
legendKey: 'dimple-custom-legend-key',
|
||||
areaSeries: 'dimple-custom-series-area',
|
||||
barSeries: 'dimple-custom-series-bar',
|
||||
bubbleSeries: 'dimple-custom-series-bubble',
|
||||
lineSeries: 'dimple-custom-series-line',
|
||||
pieSeries: 'dimple-custom-series-pie',
|
||||
gridline: 'dimple-custom-gridline'
|
||||
};
|
||||
|
||||
// The group within which to put all of this chart's objects
|
||||
this._group = svg.append("g");
|
||||
|
|
|
@ -152,24 +152,36 @@
|
|||
}
|
||||
return returnObj;
|
||||
},
|
||||
addClass = function (obj, css) {
|
||||
var c;
|
||||
if (obj) {
|
||||
c = obj.attr("class") || "";
|
||||
if (c.indexOf(chart.customClassList.axisLabel) === -1) {
|
||||
obj.attr("class", (c + " " + css).trim());
|
||||
}
|
||||
}
|
||||
},
|
||||
transformLabels = function () {
|
||||
var t = d3.select(this).selectAll("text");
|
||||
if (!axis.measure && axis._max > 0) {
|
||||
if (axis.position === "x") {
|
||||
d3.select(this).selectAll("text").attr("x", (chartWidth / axis._max) / 2);
|
||||
t.attr("x", (chartWidth / axis._max) / 2);
|
||||
} else if (axis.position === "y") {
|
||||
d3.select(this).selectAll("text").attr("y", -1 * (chartHeight / axis._max) / 2);
|
||||
t.attr("y", -1 * (chartHeight / axis._max) / 2);
|
||||
}
|
||||
}
|
||||
if (axis.categoryFields && axis.categoryFields.length > 0) {
|
||||
// Off set the labels to counter the transform. This will put the labels along the outside of the chart so they
|
||||
// don't interfere with the chart contents
|
||||
if (axis === firstX && (firstY.categoryFields === null || firstY.categoryFields.length === 0)) {
|
||||
d3.select(this).selectAll("text").attr("y", chartY + chartHeight - firstY._scale(0) + 9);
|
||||
t.attr("y", chartY + chartHeight - firstY._scale(0) + 9);
|
||||
}
|
||||
if (axis === firstY && (firstX.categoryFields === null || firstX.categoryFields.length === 0)) {
|
||||
d3.select(this).selectAll("text").attr("x", -1 * (firstX._scale(0) - chartX) - 9);
|
||||
t.attr("x", -1 * (firstX._scale(0) - chartX) - 9);
|
||||
}
|
||||
}
|
||||
addClass(t, chart.customClassList.axisLabel);
|
||||
addClass(d3.select(this).selectAll("path,line"), chart.customClassList.axisLine);
|
||||
};
|
||||
|
||||
if (axis.gridlineShapes === null) {
|
||||
|
@ -192,7 +204,7 @@
|
|||
if (axis.shapes === null) {
|
||||
// Add a group for the axes to allow css formatting
|
||||
axis.shapes = this._group.append("g")
|
||||
.attr("class", "dimple-axis")
|
||||
.attr("class", "dimple-axis " + "dimple-axis-" + axis.position)
|
||||
.each(function () {
|
||||
if (!chart.noFormats) {
|
||||
d3.select(this)
|
||||
|
@ -240,7 +252,10 @@
|
|||
if (axis.gridlineShapes !== null) {
|
||||
handleTrans(axis.gridlineShapes)
|
||||
.call(axis._draw.tickSize(gridSize, 0, 0).tickFormat(""))
|
||||
.attr("transform", gridTransform);
|
||||
.attr("transform", gridTransform)
|
||||
.each(function () {
|
||||
addClass(d3.select(this).selectAll("line"), chart.customClassList.gridline);
|
||||
});
|
||||
}
|
||||
}
|
||||
// Set some initial css values
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
// Add text into the group
|
||||
theseShapes.append("text")
|
||||
.attr("class", function (d) {
|
||||
return "dimple-legend dimple-legend-text " + dimple._createClass(d.aggField);
|
||||
return "dimple-legend dimple-legend-text " + dimple._createClass(d.aggField) + " " + self.chart.customClassList.legendLabel;
|
||||
})
|
||||
.text(function(d) {
|
||||
return d.key;
|
||||
|
@ -92,7 +92,7 @@
|
|||
.attr("height", self._heightPixels());
|
||||
d3.select(this).select("rect")
|
||||
.attr("class", function (d) {
|
||||
return "dimple-legend dimple-legend-key " + dimple._createClass(d.aggField);
|
||||
return "dimple-legend dimple-legend-key " + dimple._createClass(d.aggField) + " " + self.chart.customClassList.legendKey;
|
||||
})
|
||||
.attr("x", (self.horizontalAlign === "left" ? self._xPixels() + runningX : self._xPixels() + (self._widthPixels() - runningX - maxWidth)))
|
||||
.attr("y", self._yPixels() + runningY)
|
||||
|
|
|
@ -342,7 +342,7 @@
|
|||
.enter()
|
||||
.append("path")
|
||||
.attr("id", function (d) { return d.key; })
|
||||
.attr("class", function (d) { return className + " dimple-line " + d.keyString; })
|
||||
.attr("class", function (d) { return className + " dimple-line " + d.keyString + " " + chart.customClassList.areaSeries; })
|
||||
.attr("d", function (d) { return d.entry; })
|
||||
.call(function () {
|
||||
// Apply formats optionally
|
||||
|
|
|
@ -52,7 +52,7 @@
|
|||
c = c.concat(d.aggField);
|
||||
c = c.concat(d.xField);
|
||||
c = c.concat(d.yField);
|
||||
return classes.join(" ") + " " + dimple._createClass(c);
|
||||
return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.barSeries;
|
||||
})
|
||||
.attr("x", function (d) {
|
||||
var returnValue = series.x._previousOrigin;
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
c = c.concat(d.xField);
|
||||
c = c.concat(d.yField);
|
||||
c = c.concat(d.zField);
|
||||
return classes.join(" ") + " " + dimple._createClass(c);
|
||||
return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.bubbleSeries;
|
||||
})
|
||||
.attr("cx", function (d) {
|
||||
return (series.x._hasCategories() ? dimple._helpers.cx(d, chart, series) : series.x._previousOrigin);
|
||||
|
|
|
@ -180,7 +180,7 @@
|
|||
.append("path")
|
||||
.attr("id", function (d) { return d.key; })
|
||||
.attr("class", function (d) {
|
||||
return className + " dimple-line " + d.keyString;
|
||||
return className + " dimple-line " + d.keyString + " " + chart.customClassList.lineSeries;
|
||||
})
|
||||
.attr("d", function (d) {
|
||||
return d.entry;
|
||||
|
|
|
@ -104,7 +104,7 @@
|
|||
var c = [];
|
||||
c = c.concat(d.aggField);
|
||||
c = c.concat(d.pField);
|
||||
return classes.join(" ") + " " + dimple._createClass(c);
|
||||
return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.pieSeries;
|
||||
})
|
||||
.attr("d", getArc)
|
||||
.attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })
|
||||
|
|
Loading…
Reference in New Issue