From 5655289b9de1f05972a850503623082b0f2df3b8 Mon Sep 17 00:00:00 2001 From: johnkiernander Date: Tue, 16 Dec 2014 01:56:57 +0000 Subject: [PATCH] Complete Custom Class Handling --- src/methods/_helpers.js | 6 ++ src/objects/chart/begin.js | 21 ++---- src/objects/chart/methods/assignClass.js | 9 +++ src/objects/chart/methods/customClassList.js | 32 +++++++++ src/objects/chart/methods/draw.js | 72 ++++++++++---------- src/objects/chart/methods/getClass.js | 14 ++++ src/objects/legend/methods/_draw.js | 2 +- src/objects/legend/methods/_getEntries.js | 1 + src/objects/plot/area.js | 4 +- src/objects/plot/bar.js | 2 +- src/objects/plot/bubble.js | 2 +- src/objects/plot/line.js | 3 +- src/objects/plot/pie.js | 2 +- 13 files changed, 111 insertions(+), 59 deletions(-) create mode 100644 src/objects/chart/methods/assignClass.js create mode 100644 src/objects/chart/methods/customClassList.js create mode 100644 src/objects/chart/methods/getClass.js diff --git a/src/methods/_helpers.js b/src/methods/_helpers.js index f350e91..7ac8918 100644 --- a/src/methods/_helpers.js +++ b/src/methods/_helpers.js @@ -167,7 +167,13 @@ stroke = chart.getColor(d.aggField.slice(-1)[0]).stroke; } return stroke; + }, + + // Calculate the class for the series + css: function (d, chart) { + return chart.getClass(d.aggField.slice(-1)[0]); } + }; diff --git a/src/objects/chart/begin.js b/src/objects/chart/begin.js index 3e203ab..398fdf1 100644 --- a/src/objects/chart/begin.js +++ b/src/objects/chart/begin.js @@ -34,23 +34,6 @@ 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"); @@ -60,5 +43,9 @@ this._tooltipGroup = null; // Colors assigned to chart contents. E.g. a series value. this._assignedColors = {}; + // Classes assigned to series values + this._assignedClasses = {}; // The next colour index to use, this value is cycled around for all default colours this._nextColor = 0; + // The next series class index to use, this value is cycled around for all default classes + this._nextClass = 0; diff --git a/src/objects/chart/methods/assignClass.js b/src/objects/chart/methods/assignClass.js new file mode 100644 index 0000000..de96865 --- /dev/null +++ b/src/objects/chart/methods/assignClass.js @@ -0,0 +1,9 @@ + // Copyright: 2014 PMSI-AlignAlytics + // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt" + // Source: /src/objects/chart/methods/assignClass.js + // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-assignClass + this.assignClass = function (tag, css) { + this._assignedClasses[tag] = css; + return this._assignedClasses[tag]; + }; + diff --git a/src/objects/chart/methods/customClassList.js b/src/objects/chart/methods/customClassList.js new file mode 100644 index 0000000..ce772d6 --- /dev/null +++ b/src/objects/chart/methods/customClassList.js @@ -0,0 +1,32 @@ + // Copyright: 2014 PMSI-AlignAlytics + // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt" + // Source: /src/objects/chart/methods/customClassList.js + // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-customClassList + 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', + colorClasses: [ + 'dimple-custom-format-1', + 'dimple-custom-format-2', + 'dimple-custom-format-3', + 'dimple-custom-format-4', + 'dimple-custom-format-5', + 'dimple-custom-format-6', + 'dimple-custom-format-7', + 'dimple-custom-format-8', + 'dimple-custom-format-9', + 'dimple-custom-format-10' + ] + }; \ No newline at end of file diff --git a/src/objects/chart/methods/draw.js b/src/objects/chart/methods/draw.js index eeecf37..5a413a3 100644 --- a/src/objects/chart/methods/draw.js +++ b/src/objects/chart/methods/draw.js @@ -152,15 +152,6 @@ } 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) { @@ -180,8 +171,16 @@ t.attr("x", -1 * (firstX._scale(0) - chartX) - 9); } } - addClass(t, chart.customClassList.axisLabel); - addClass(d3.select(this).selectAll("path,line"), chart.customClassList.axisLine); + return this; + }, + appendClass = function (css) { + return function () { + var currentCss = d3.select(this).attr("class") || ""; + if (currentCss.indexOf(css) === -1) { + currentCss += " " + css; + } + return currentCss.trim(); + }; }; if (axis.gridlineShapes === null) { @@ -231,7 +230,6 @@ gridSize = -chartWidth; } if (transform !== null && axis._draw !== null) { - // Add a tick format if (axis._hasTimeField()) { handleTrans(axis.shapes) @@ -252,34 +250,37 @@ if (axis.gridlineShapes !== null) { handleTrans(axis.gridlineShapes) .call(axis._draw.tickSize(gridSize, 0, 0).tickFormat("")) - .attr("transform", gridTransform) - .each(function () { - addClass(d3.select(this).selectAll("line"), chart.customClassList.gridline); - }); + .attr("transform", gridTransform); } } // Set some initial css values - handleTrans(axis.shapes.selectAll("text")).call(function() { - if (!chart.noFormats) { - this.style("font-family", axis.fontFamily) - .style("font-size", axis._getFontSize()); - } - }); - handleTrans(axis.shapes.selectAll("path, line")).call(function() { - if (!chart.noFormats) { - this.style("fill", "none") - .style("stroke", "black") - .style("shape-rendering", "crispEdges"); - } - }); - if (axis.gridlineShapes !== null) { - handleTrans(axis.gridlineShapes.selectAll("line")).call(function() { + handleTrans(axis.shapes.selectAll("text")) + .attr("class", appendClass(chart.customClassList.axisLabel)) + .call(function() { if (!chart.noFormats) { - this.style("fill", "none") - .style("stroke", "lightgray") - .style("opacity", 0.8); + this.style("font-family", axis.fontFamily) + .style("font-size", axis._getFontSize()); } }); + handleTrans(axis.shapes.selectAll("path, line")) + .attr("class", appendClass(chart.customClassList.axisLine)) + .call(function() { + if (!chart.noFormats) { + this.style("fill", "none") + .style("stroke", "black") + .style("shape-rendering", "crispEdges"); + } + }); + if (axis.gridlineShapes !== null) { + handleTrans(axis.gridlineShapes.selectAll("line")) + .attr("class", appendClass(chart.customClassList.gridline)) + .call(function() { + if (!chart.noFormats) { + this.style("fill", "none") + .style("stroke", "lightgray") + .style("opacity", 0.8); + } + }); } // Rotate labels, this can only be done once the formats are set if (axis.measure === null || axis.measure === undefined) { @@ -382,7 +383,8 @@ // Add a title for the axis - NB check for null here, by default the title is undefined, in which case // use the dimension name if (!axis.hidden && (axis.position === "x" || axis.position === "y") && axis.title !== null) { - axis.titleShape = this._group.append("text").attr("class", "dimple-axis dimple-title"); + axis.titleShape = this._group.append("text") + .attr("class", "dimple-axis dimple-title " + chart.customClassList.axisTitle + "dimple-axis-" + axis.position); axis.titleShape .attr("x", titleX) .attr("y", titleY) diff --git a/src/objects/chart/methods/getClass.js b/src/objects/chart/methods/getClass.js new file mode 100644 index 0000000..06ce067 --- /dev/null +++ b/src/objects/chart/methods/getClass.js @@ -0,0 +1,14 @@ + // Copyright: 2014 PMSI-AlignAlytics + // License: "https://github.com/PMSI-AlignAlytics/dimple/blob/master/MIT-LICENSE.txt" + // Source: /src/objects/chart/methods/getClass.js + // Help: http://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-getClass + this.getClass = function (tag) { + // If no class is assigned, do so here + if (!this._assignedClasses[tag]) { + this._assignedClasses[tag] = this.customClassList.colorClasses[this._nextClass]; + this._nextClass = (this._nextClass + 1) % this.customClassList.colorClasses.length; + } + // Return the class + return this._assignedClasses[tag]; + }; + diff --git a/src/objects/legend/methods/_draw.js b/src/objects/legend/methods/_draw.js index 5bf9b24..526fd16 100644 --- a/src/objects/legend/methods/_draw.js +++ b/src/objects/legend/methods/_draw.js @@ -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) + " " + self.chart.customClassList.legendKey; + return "dimple-legend dimple-legend-key " + dimple._createClass(d.aggField) + " " + self.chart.customClassList.legendKey + " " + d.css; }) .attr("x", (self.horizontalAlign === "left" ? self._xPixels() + runningX : self._xPixels() + (self._widthPixels() - runningX - maxWidth))) .attr("y", self._yPixels() + runningY) diff --git a/src/objects/legend/methods/_getEntries.js b/src/objects/legend/methods/_getEntries.js index 362130f..9b6b4b1 100644 --- a/src/objects/legend/methods/_getEntries.js +++ b/src/objects/legend/methods/_getEntries.js @@ -31,6 +31,7 @@ fill: series.chart._assignedColors[field].fill, stroke: series.chart._assignedColors[field].stroke, opacity: series.chart._assignedColors[field].opacity, + css: series.chart._assignedClasses[field], series: series, aggField: row.aggField }); diff --git a/src/objects/plot/area.js b/src/objects/plot/area.js index db3cb87..b74ece9 100644 --- a/src/objects/plot/area.js +++ b/src/objects/plot/area.js @@ -324,7 +324,7 @@ // Add the color in this loop, it can't be done during initialisation of the row because // the areas should be ordered first (to ensure standard distribution of colors areaData[i].color = chart.getColor(areaData[i].key.length > 0 ? areaData[i].key[areaData[i].key.length - 1] : "All"); - + areaData[i].css = chart.getClass(areaData[i].key.length > 0 ? areaData[i].key[areaData[i].key.length - 1] : "All"); } if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) { @@ -342,7 +342,7 @@ .enter() .append("path") .attr("id", function (d) { return d.key; }) - .attr("class", function (d) { return className + " dimple-line " + d.keyString + " " + chart.customClassList.areaSeries; }) + .attr("class", function (d) { return className + " dimple-line " + d.keyString + " " + chart.customClassList.areaSeries + " " + d.css; }) .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 5035ebd..386acc2 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) + " " + chart.customClassList.barSeries; + return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.barSeries + " " + dimple._helpers.css(d, chart); }) .attr("x", function (d) { var returnValue = series.x._previousOrigin; diff --git a/src/objects/plot/bubble.js b/src/objects/plot/bubble.js index 3c63cd2..93b22bd 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) + " " + chart.customClassList.bubbleSeries; + return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.bubbleSeries + " " + dimple._helpers.css(d, chart); }) .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 71a94c0..35dfc7b 100755 --- a/src/objects/plot/line.js +++ b/src/objects/plot/line.js @@ -162,6 +162,7 @@ // Add the color in this loop, it can't be done during initialisation of the row because // the lines should be ordered first (to ensure standard distribution of colors lineData[i].color = chart.getColor(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All"); + lineData[i].css = chart.getClass(lineData[i].key.length > 0 ? lineData[i].key[lineData[i].key.length - 1] : "All"); } if (chart._tooltipGroup !== null && chart._tooltipGroup !== undefined) { @@ -180,7 +181,7 @@ .append("path") .attr("id", function (d) { return d.key; }) .attr("class", function (d) { - return className + " dimple-line " + d.keyString + " " + chart.customClassList.lineSeries; + return className + " dimple-line " + d.keyString + " " + chart.customClassList.lineSeries + " " + d.css; }) .attr("d", function (d) { return d.entry; diff --git a/src/objects/plot/pie.js b/src/objects/plot/pie.js index 3e8e393..8609430 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) + " " + chart.customClassList.pieSeries; + return classes.join(" ") + " " + dimple._createClass(c) + " " + chart.customClassList.pieSeries + " " + dimple._helpers.css(d, chart); }) .attr("d", getArc) .attr("opacity", function (d) { return dimple._helpers.opacity(d, chart, series); })