From de75f386e6ce962bb52448110abb096e8c4c0ac7 Mon Sep 17 00:00:00 2001 From: johnkiernander Date: Mon, 15 Dec 2014 20:40:49 +0000 Subject: [PATCH] Added Custom Classing --- src/methods/_drawMarkers.js | 2 +- src/methods/_showBarTooltip.js | 4 ++-- src/objects/chart/begin.js | 17 +++++++++++++++++ src/objects/chart/methods/draw.js | 27 +++++++++++++++++++++------ src/objects/legend/methods/_draw.js | 4 ++-- src/objects/plot/area.js | 2 +- src/objects/plot/bar.js | 2 +- src/objects/plot/bubble.js | 2 +- src/objects/plot/line.js | 2 +- src/objects/plot/pie.js | 2 +- 10 files changed, 48 insertions(+), 16 deletions(-) diff --git a/src/methods/_drawMarkers.js b/src/methods/_drawMarkers.js index 697e6b9..3d59887 100644 --- a/src/methods/_drawMarkers.js +++ b/src/methods/_drawMarkers.js @@ -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); diff --git a/src/methods/_showBarTooltip.js b/src/methods/_showBarTooltip.js index a8cd420..afb620e 100644 --- a/src/methods/_showBarTooltip.js +++ b/src/methods/_showBarTooltip.js @@ -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()); diff --git a/src/objects/chart/begin.js b/src/objects/chart/begin.js index 24100c6..3e203ab 100644 --- a/src/objects/chart/begin.js +++ b/src/objects/chart/begin.js @@ -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"); diff --git a/src/objects/chart/methods/draw.js b/src/objects/chart/methods/draw.js index b179420..c86ab8e 100644 --- a/src/objects/chart/methods/draw.js +++ b/src/objects/chart/methods/draw.js @@ -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 diff --git a/src/objects/legend/methods/_draw.js b/src/objects/legend/methods/_draw.js index 083b220..9d2bd6a 100644 --- a/src/objects/legend/methods/_draw.js +++ b/src/objects/legend/methods/_draw.js @@ -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) diff --git a/src/objects/plot/area.js b/src/objects/plot/area.js index 92b1dce..db3cb87 100644 --- a/src/objects/plot/area.js +++ b/src/objects/plot/area.js @@ -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 diff --git a/src/objects/plot/bar.js b/src/objects/plot/bar.js index 3e2d31c..5035ebd 100644 --- a/src/objects/plot/bar.js +++ b/src/objects/plot/bar.js @@ -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; diff --git a/src/objects/plot/bubble.js b/src/objects/plot/bubble.js index 045daed..3c63cd2 100644 --- a/src/objects/plot/bubble.js +++ b/src/objects/plot/bubble.js @@ -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); diff --git a/src/objects/plot/line.js b/src/objects/plot/line.js index 85e3e38..71a94c0 100755 --- a/src/objects/plot/line.js +++ b/src/objects/plot/line.js @@ -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; diff --git a/src/objects/plot/pie.js b/src/objects/plot/pie.js index e8b5187..3e8e393 100644 --- a/src/objects/plot/pie.js +++ b/src/objects/plot/pie.js @@ -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); })