mirror of https://github.com/vitalif/dimple
Complete Custom Class Handling
parent
5a6388ec6b
commit
5655289b9d
|
@ -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]);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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];
|
||||
};
|
||||
|
|
@ -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'
|
||||
]
|
||||
};
|
|
@ -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)
|
||||
|
|
|
@ -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];
|
||||
};
|
||||
|
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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); })
|
||||
|
|
Loading…
Reference in New Issue