diff --git a/dist/d3-ez.js b/dist/d3-ez.js index ef64b77..e6d3ad8 100644 --- a/dist/d3-ez.js +++ b/dist/d3-ez.js @@ -32,7 +32,7 @@ var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3); var name = "d3-ez"; - var version$1 = "4.0.3"; + var version$1 = "4.0.4"; var description = "D3 Easy Reusable Chart Library"; var license$1 = "GPL-2.0"; var keywords = [ @@ -3205,7 +3205,7 @@ return d.r; }).attr("cx", function (d) { return d.x; - }).attr("fill", "#cad4e7").attr("stroke", "#cad4e7").attr("stroke-width", 1).attr("fill-opacity", opacity / 2); + }).attr("fill", "#cad4e7").attr("stroke", "#cad4e7").attr("stroke-width", 1).attr("fill-opacity", opacity); itemsEnter.append("text").attr("font-size", "0.9em").attr("fill", "currentColor").attr("dominant-baseline", "middle").attr("x", function (d) { return d.x * 2 + 5; }).text(function (d) { @@ -4928,6 +4928,94 @@ return my; } + /** + * Reusable Title Component + * + * @module + */ + function componentTitle () { + /* Default Properties */ + var mainText = "Title"; + var subText = "Sub Title"; + var height = 40; + var width = 200; + + /** + * Constructor + * + * @constructor + * @alias title + * @param {d3.selection} selection - The chart holder D3 selection. + */ + function my(selection) { + selection.selectAll("#titleGroup").data([0]).enter().append("g").attr("id", "titleGroup"); + var titleGroup = selection.select("#titleGroup"); + titleGroup.selectAll(".title").data([mainText]).enter().append("text").classed("title", true).text(function (d) { + return d; + }).attr("fill", "currentColor"); + var title = titleGroup.select(".title").text(mainText); + titleGroup.selectAll(".subTitle").data([subText]).enter().append("text").classed("subTitle", true).text(function (d) { + return d; + }).attr("fill", "currentColor"); + var subTitle = titleGroup.select(".subTitle").text(subText); + + // Centre Text + // const titleOffset = 0 - (title.node().getBBox().width / 2); + title.style("text-anchor", "middle").attr("transform", "translate(0, 15)"); + // const subTitleOffset = 0 - (subTitle.node().getBBox().width / 2); + subTitle.style("text-anchor", "middle").attr("transform", "translate(0, 30)"); + } + + /** + * Width Getter / Setter + * + * @param {number} _v - Width in px. + * @returns {*} + */ + my.width = function (_v) { + if (!arguments.length) return width; + width = _v; + return this; + }; + + /** + * Height Getter / Setter + * + * @param {number} _v - Height in px. + * @returns {*} + */ + my.height = function (_v) { + if (!arguments.length) return height; + height = _v; + return this; + }; + + /** + * Main Text Getter / Setter + * + * @param {string} _v - Main text title. + * @returns {*} + */ + my.mainText = function (_v) { + if (!arguments.length) return mainText; + mainText = _v; + return this; + }; + + /** + * Sub Text Getter / Setter + * + * @param {string} _v - Sub text description. + * @returns {*} + */ + my.subText = function (_v) { + if (!arguments.length) return subText; + subText = _v; + return this; + }; + return my; + } + var component = { barsCircular: componentBarsCircular, barsHorizontal: componentBarsHorizontal, @@ -4955,7 +5043,8 @@ proportionalAreaCircles: componentProportionalAreaCircles, radarArea: componentRadarArea, roseChartSector: componentRoseChartSector, - scatterPlot: componentScatterPlot + scatterPlot: componentScatterPlot, + title: componentTitle }; /** @@ -5065,10 +5154,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.categorical(3); var transition = { @@ -5078,7 +5167,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var startAngle = 0; var endAngle = 270; @@ -5104,12 +5197,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / data.length / 2; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / data.length / 2.3; var innerRadius = radius / 4; var _dataTransform$summar = dataTransform(data).summary(), columnKeys = _dataTransform$summar.columnKeys, @@ -5143,41 +5237,67 @@ return layout; } var layout = generateLayout(data.length, chartW, chartH); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Radial Bars - var barsCircular = component.barsCircular().colorScale(colorScale).xScale(xScale).opacity(opacity).yScale(yScale).dispatch(dispatch).transition(transition); + var componentBarsCircular = component.barsCircular().colorScale(colorScale).xScale(xScale).opacity(opacity).yScale(yScale).dispatch(dispatch).transition(transition); // Circular Axis - var circularAxis = component.circularAxis().radialScale(yScale).ringScale(xScale); + var componentCircularAxis = component.circularAxis().radialScale(yScale).ringScale(xScale); // Outer Labels - var circularSectorLabels = component.circularSectorLabels().ringScale(xScale).radialScale(yScale).textAnchor("middle"); + var componentCircularSectorLabels = component.circularSectorLabels().ringScale(xScale).radialScale(yScale).textAnchor("middle"); // Ring Labels - var circularRingLabels = component.circularRingLabels().radialScale(xScale).textAnchor("middle"); + var componentCircularRingLabels = component.circularRingLabels().radialScale(xScale).textAnchor("middle"); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", function (d, i) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", function (d, i) { return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); - }).call(circularAxis).call(barsCircular).call(circularSectorLabels).call(circularRingLabels); - seriesGroup.exit().remove(); + }).call(componentBarsCircular).call(componentCircularRingLabels); + series.exit().remove(); + + // Axis Labels + if (showAxis) { + var seriesAxis = chartSelect.select(".axis").selectAll(".seriesAxis").data(data); + seriesAxis.enter().append("g").classed("seriesAxis", true).merge(seriesAxis).attr("transform", function (d, i) { + return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); + }).call(componentCircularAxis).call(componentCircularSectorLabels); + seriesAxis.exit().remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -5229,6 +5349,54 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -5292,8 +5460,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = palette.categorical(1); var transition = { @@ -5303,7 +5471,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var yAxisLabel = null; var stacked = false; @@ -5330,11 +5501,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); // Create Scales and Axis var _dataTransform$summar = dataTransform(data).summary(), @@ -5359,47 +5531,66 @@ var xScale = d3__namespace.scaleBand().domain(columnKeys).range([0, xScale2.bandwidth()]).padding(0.05); var yScale = d3__namespace.scaleLinear().domain(yDomain).range([chartH, 0]); var colorScale = d3__namespace.scaleOrdinal().domain(columnKeys).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Bars Component - var bars = stacked ? component.barsVerticalStacked().xScale(xScale2) : component.barsVertical().xScale(xScale); - bars.colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentBars = stacked ? component.barsVerticalStacked().xScale(xScale2) : component.barsVertical().xScale(xScale); + componentBars.colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", function (d) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", function (d) { return "translate(".concat(xScale2(d.key), ",").concat(chartH - yScale(valueMin), ")"); - }).call(bars); - seriesGroup.exit().remove(); + }).call(componentBars); + series.exit().remove(); - // X-Axis + // Axis var xAxis = d3__namespace.axisBottom(xScale2); - containerEnter.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); - - // Y-Axis var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); - // Y Axis Label - containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").transition().text(function (d) { - return d; - }); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); + + // Y-Axis Label + chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").transition().text(function (d) { + return d; + }); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -5488,7 +5679,43 @@ }; /** - * Y Axix Label Getter / Setter + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} @@ -5550,8 +5777,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = palette.categorical(1); var transition = { @@ -5561,7 +5788,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var yAxisLabel = null; var stacked = false; @@ -5588,11 +5818,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); // Create Scales and Axis var _dataTransform$summar = dataTransform(data).summary(), @@ -5617,41 +5848,60 @@ var yScale2 = d3__namespace.scaleBand().domain(rowKeys).range([0, chartH]).padding(0.1); var yScale = d3__namespace.scaleBand().domain(columnKeys).range([0, yScale2.bandwidth()]).padding(0.15); var colorScale = d3__namespace.scaleOrdinal().domain(columnKeys).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Bars Component - var bars = component.barsHorizontal().xScale(xScale).colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentBars = component.barsHorizontal().xScale(xScale).colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", function (d) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", function (d) { return "translate(".concat(xScale(valueMin), ",").concat(yScale2(d.key), ")"); - }).call(bars); - seriesGroup.exit().remove(); + }).call(componentBars); + series.exit().remove(); - // X-Axis + // Axis var xAxis = d3__namespace.axisBottom(xScale); - containerEnter.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); - - // Y-Axis var yAxis = d3__namespace.axisLeft(yScale2); - containerEnter.select(".yAxis").call(yAxis); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); + + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -5703,6 +5953,42 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -5740,7 +6026,7 @@ }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} @@ -5802,8 +6088,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = palette.categorical(1); var transition = { @@ -5813,7 +6099,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; + var legendTitle = "Key"; var opacity = 1; + var showLegend = false; var showAxis = true; var yAxisLabel = null; var minRadius = 3; @@ -5841,11 +6131,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, _dataTransform$summar2 = _dataTransform$summar.coordinatesExtent, @@ -5856,42 +6147,45 @@ var yScale = d3__namespace.scaleLinear().domain(yExtent).range([chartH, 0]).nice(); var colorScale = d3__namespace.scaleOrdinal().domain(rowKeys).range(colors); var sizeScale = d3__namespace.scaleLinear().domain(valueExtent).range([minRadius, maxRadius]); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend", "zoomArea", "clipArea"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Bubble Component - var bubbles = component.bubbles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentBubbles = component.bubbles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").attr("class", "seriesGroup").attr('clip-path', "url(#plotAreaClip)").merge(seriesGroup).call(bubbles); - seriesGroup.exit().remove(); + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").attr("class", "series").attr('clip-path', "url(#plotAreaClip)").merge(series).call(componentBubbles); + series.exit().remove(); - // X-Axis + // Axis var xAxis = d3__namespace.axisBottom(xScale); - containerEnter.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); - - // Y-Axis var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); - // Legend - var legend = component.legend().sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } // Zoom Clip Path - var clipPath = containerEnter.select(".clipArea").selectAll("defs").data([0]); + var clipPath = chartSelect.select(".clipArea").selectAll("defs").data([0]); clipPath.enter().append("defs").append("clipPath").attr("id", "plotAreaClip").append("rect").attr("width", chartW).attr("height", chartH).merge(clipPath).select("clipPath").select("rect").attr("width", chartW).attr("height", chartH); // Zoom Event Area @@ -5899,18 +6193,36 @@ function zoomed(e) { var xScaleZoomed = e.transform.rescaleX(xScale); var yScaleZoomed = e.transform.rescaleY(yScale); - xAxis.scale(xScaleZoomed); - containerEnter.select(".xAxis").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); - yAxis.scale(yScaleZoomed); - containerEnter.select(".yAxis").call(yAxis); - bubbles.xScale(xScaleZoomed).yScale(yScaleZoomed).transition({ + if (showAxis) { + xAxis.scale(xScaleZoomed); + chartSelect.select(".xAxis").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); + yAxis.scale(yScaleZoomed); + chartSelect.select(".yAxis").call(yAxis); + } + componentBubbles.xScale(xScaleZoomed).yScale(yScaleZoomed).transition({ ease: d3__namespace.easeLinear, duration: 0 }); - containerEnter.select(".chart").selectAll(".seriesGroup").call(bubbles); + chartSelect.select(".seriesGroup").selectAll(".series").call(componentBubbles); } - var zoomArea = containerEnter.select(".zoomArea").selectAll("rect").data([0]); + var zoomArea = chartSelect.select(".zoomArea").selectAll("rect").data([0]); zoomArea.enter().append("rect").attr("fill", "none").attr("pointer-events", "all").merge(zoomArea).call(zoom).attr("width", chartW).attr("height", chartH); + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + + // Legend + if (showLegend) { + var componentLegend = component.legend().title(legendTitle).sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -5963,45 +6275,81 @@ }; /** - * Opacity Getter / Setter + * Show Legend Getter / Setter * - * @param {Number} _v - Opacity level. + * @param {Boolean} _v - Show legend true / false. * @returns {*} */ - my.opacity = function (_v) { - if (!arguments.length) return opacity; - opacity = _v; + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; return this; }; /** - * Y Axis Label Getter / Setter + * Title Getter / Setter * - * @param {string} _v - Label text. + * @param {string} _v - Title text. * @returns {*} */ - my.yAxisLabel = function (_v) { - if (!arguments.length) return yAxisLabel; - yAxisLabel = _v; + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; return this; }; /** - * Show Axis Getter / Setter + * SubTitle Getter / Setter * - * @param {Boolean} _v - Show axis true / false. + * @param {string} _v - SubTitle text. * @returns {*} */ - my.showAxis = function (_v) { - if (!arguments.length) return showAxis; - showAxis = _v; + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; return this; }; /** - * Transition Getter / Setter + * Opacity Getter / Setter * - * @param {d3.transition} _v - D3 transition style. + * @param {Number} _v - Opacity level. + * @returns {*} + */ + my.opacity = function (_v) { + if (!arguments.length) return opacity; + opacity = _v; + return this; + }; + + /** + * Y-Axis Label Getter / Setter + * + * @param {string} _v - Label text. + * @returns {*} + */ + my.yAxisLabel = function (_v) { + if (!arguments.length) return yAxisLabel; + yAxisLabel = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Transition Getter / Setter + * + * @param {d3.transition} _v - D3 transition style. * @returns {*} */ my.transition = function (_v) { @@ -6049,8 +6397,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = ["green", "red"]; var transition = { @@ -6060,7 +6408,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var yAxisLabel = null; @@ -6085,11 +6436,12 @@ } }(selection); selection.each(function (data) { - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); data = data[0]; // FIXME: Convert input data to support multi-series. // TODO: Use dataTransform() to calculate date domains? @@ -6115,55 +6467,74 @@ var xScale = d3__namespace.scaleTime().domain(dateDomain).range([0, chartW]); var yScale = d3__namespace.scaleLinear().domain(yDomain).range([chartH, 0]).nice(); var colorScale = d3__namespace.scaleOrdinal().domain([true, false]).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["zoomArea", "xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Candle Stick Component - var candleSticks = component.candleSticks().xScale(xScale).yScale(yScale).colorScale(colorScale).dispatch(dispatch).opacity(opacity).transition(transition); + var componentCandleSticks = component.candleSticks().xScale(xScale).yScale(yScale).colorScale(colorScale).dispatch(dispatch).opacity(opacity).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return [d]; - }); // FIXME: Convert input data to support multi-series. + var series = chartSelect.select(".seriesGroup").selectAll(".series").data([data]); // FIXME: Convert input data to support multi-series. - seriesGroup.enter().append("g").attr("class", "seriesGroup").merge(seriesGroup).call(candleSticks); - seriesGroup.exit().remove(); + series.enter().append("g").attr("class", "series").merge(series).call(componentCandleSticks); + series.exit().remove(); - // X Axis + // Axis var xAxis = d3__namespace.axisBottom(xScale).tickFormat(d3__namespace.timeFormat("%d-%b-%y")); - containerEnter.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); - - // Y-Axis var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); + if (showAxis) { + // X Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", "rotate(-65)"); - // Y-Axis Label - containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").transition().text(function (d) { - return d; - }); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); - // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + // Y-Axis Label + chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").transition().text(function (d) { + return d; + }); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } // Experimental Brush - var brush = d3__namespace.brushX().extent([[0, 0], [chartW, chartH]]).on("brush start", brushStart).on("brush end", brushEnd); - containerEnter.select(".zoomArea").call(brush); function brushStart(e) { console.log(e); } function brushEnd(e) { console.log(e); } + var brush = d3__namespace.brushX().extent([[0, 0], [chartW, chartH]]).on("brush start", brushStart).on("brush end", brushEnd); + chartSelect.select(".zoomArea").call(brush); + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll('*').remove(); + } + + // Legend + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -6215,6 +6586,42 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -6240,7 +6647,7 @@ }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} @@ -6300,10 +6707,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.categorical(3); var transition = { @@ -6313,7 +6720,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var startAngle = 0; var endAngle = 360; @@ -6339,12 +6750,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / data.length / 2; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / data.length / 2.3; var innerRadius = radius / 2; var _dataTransform$summar = dataTransform(data).summary(), columnKeys = _dataTransform$summar.columnKeys, @@ -6377,35 +6789,61 @@ return layout; } var layout = generateLayout(data.length, chartW, chartH); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["seriesGroup", "axis"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Donut Slice Component - var donut = component.donut().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentDonut = component.donut().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); // Donut Label Component - var donutLabels = component.donutLabels().xScale(xScale).yScale(yScale).transition(transition); + var componentDonutLabels = component.donutLabels().xScale(xScale).yScale(yScale).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", function (d, i) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", function (d, i) { return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); - }).call(donut).call(donutLabels); - seriesGroup.exit().remove(); + }).call(componentDonut); + series.exit().remove(); + + // Axis Labels + if (showAxis) { + var seriesAxis = chartSelect.select(".axis").selectAll(".seriesAxis").data(data); + seriesAxis.enter().append("g").classed("seriesAxis", true).merge(seriesAxis).attr("transform", function (d, i) { + return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); + }).call(componentDonutLabels); + seriesAxis.exit().remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -6457,6 +6895,54 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -6517,10 +7003,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.diverging(2).slice(0, 5); var transition = { @@ -6530,7 +7016,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var startAngle = 0; var endAngle = 270; var thresholds; @@ -6557,12 +7047,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / 2; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / 2.3; var innerRadius = radius / 4; var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, @@ -6574,39 +7065,58 @@ var xScale = d3__namespace.scaleBand().domain(columnKeys).rangeRound([startAngle, endAngle]).padding(0.1); var yScale = d3__namespace.scaleBand().domain(rowKeys).rangeRound([innerRadius, radius]).padding(0.1); var colorScale = d3__namespace.scaleThreshold().domain(thresholds).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["seriesGroup", "axis"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Heat Map Rings - var heatMapRing = component.heatMapRing().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentHeatMapRing = component.heatMapRing().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); // Circular Labels - var circularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("start"); + var componentCircularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("start"); // Ring Labels - var circularRingLabels = component.circularRingLabels().radialScale(yScale).textAnchor("middle"); + var componentCircularRingLabels = component.circularRingLabels().radialScale(yScale).textAnchor("middle"); // Create Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").attr("class", "seriesGroup").merge(seriesGroup).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(heatMapRing).call(circularRingLabels); - seriesGroup.exit().remove(); + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").attr("class", "series").merge(series).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(componentHeatMapRing); + series.exit().remove(); + + // Axis Labels + if (showAxis) { + chartSelect.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(componentCircularSectorLabels).call(componentCircularRingLabels); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - // Outer Ring Labels - containerEnter.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(circularSectorLabels); + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -6658,6 +7168,54 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -6733,8 +7291,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = palette.diverging(2).slice(0, 5); var transition = { @@ -6744,7 +7302,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var thresholds; @@ -6770,11 +7331,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, columnKeys = _dataTransform$summar.columnKeys, @@ -6785,39 +7347,60 @@ var xScale = d3__namespace.scaleBand().domain(columnKeys).range([0, chartW]).padding(0.15); var yScale = d3__namespace.scaleBand().domain(rowKeys).range([0, chartH]).padding(0.15); var colorScale = d3__namespace.scaleThreshold().domain(thresholds).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Heat Map Row Component - var heatMapRow = component.heatMapRow().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentHeatMapRow = component.heatMapRow().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(data); - seriesGroup.enter().append("g").attr("class", "seriesGroup").merge(seriesGroup).attr("transform", function (d) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").attr("class", "series").merge(series).attr("transform", function (d) { return "translate(0,".concat(yScale(d.key), ")"); - }).call(heatMapRow); - seriesGroup.exit().remove(); - - // X-Axis - var xAxis = d3__namespace.axisTop(xScale); - containerEnter.select(".xAxis").call(xAxis).selectAll("text").attr("y", 0).attr("x", -8).attr("transform", "rotate(60)").style("text-anchor", "end"); + }).call(componentHeatMapRow); + series.exit().remove(); - // Y-Axis + // Axis + var xAxis = d3__namespace.axisBottom(xScale); var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").attr("y", 0).attr("x", -8).attr("transform", "rotate(300)").style("text-anchor", "end"); + + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -6869,6 +7452,42 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -6956,8 +7575,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = palette.categorical(1); var transition = { @@ -6967,7 +7586,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var yAxisLabel = null; @@ -6993,11 +7615,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - margin.bottom - titleH, 100); // Create Scales and Axis var _dataTransform$summar = dataTransform(data).summary(), @@ -7023,70 +7646,91 @@ } var yScale = d3__namespace.scaleLinear().domain(valueExtent).range([chartH, 0]).nice(); var colorScale = d3__namespace.scaleOrdinal().domain(rowKeys).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend", "zoomArea", "clipArea"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Line Chart Component - var lineChart = component.lineChart().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentLineChart = component.lineChart().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition); // Line Dots Component - var scatterPlot = component.scatterPlot().colorScale(colorScale).yScale(yScale).xScale(xScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentScatterPlot = component.scatterPlot().colorScale(colorScale).yScale(yScale).xScale(xScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").attr("class", "seriesGroup").attr('clip-path', "url(#plotAreaClip)").merge(seriesGroup).call(lineChart).call(scatterPlot); - seriesGroup.exit().remove(); + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").attr("class", "series").attr('clip-path', "url(#plotAreaClip)").merge(series).call(componentLineChart).call(componentScatterPlot); + series.exit().remove(); - // X-Axis + // Axis var xAxis = d3__namespace.axisBottom(xScale); - containerEnter.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); - - // Y-Axis var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis); - // Y-Axis Label - containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").text(function (d) { - return d; - }); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); - // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + // Y-Axis Label + chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel", true).attr("transform", "rotate(-90)").attr("y", -40).attr("dy", ".71em").attr("fill", "currentColor").style("text-anchor", "end").text(function (d) { + return d; + }); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } // Zoom Clip Path - var clipPath = containerEnter.select(".clipArea").selectAll("defs").data([0]); + var clipPath = chartSelect.select(".clipArea").selectAll("defs").data([0]); clipPath.enter().append("defs").append("clipPath").attr("id", "plotAreaClip").append("rect").attr("width", chartW).attr("height", chartH).merge(clipPath).select("clipPath").select("rect").attr("width", chartW).attr("height", chartH); // Zoom Event Area var zoom = d3__namespace.zoom().extent([[0, 0], [chartW, chartH]]).scaleExtent([1, 8]).translateExtent([[0, 0], [chartW, chartH]]).on("zoom", zoomed); function zoomed(e) { var xScaleZoomed = e.transform.rescaleX(xScale); - xAxis.scale(xScaleZoomed); - containerEnter.select(".xAxis").call(xAxis); - lineChart.xScale(xScaleZoomed).transition({ + if (showAxis) { + xAxis.scale(xScaleZoomed); + chartSelect.select(".xAxis").call(xAxis); + } + componentLineChart.xScale(xScaleZoomed).transition({ ease: d3__namespace.easeLinear, duration: 0 }); - scatterPlot.xScale(xScaleZoomed).transition({ + componentScatterPlot.xScale(xScaleZoomed).transition({ ease: d3__namespace.easeLinear, duration: 0 }); - containerEnter.select(".chart").selectAll(".seriesGroup").call(lineChart).call(scatterPlot); + chartSelect.select(".seriesGroup").selectAll(".series").call(componentLineChart).call(componentScatterPlot); + } + var zoomArea = chartSelect.select(".zoomArea").selectAll("rect").data([0]); + zoomArea.enter().append("rect").attr("fill", "none").attr("pointer-events", "all").merge(zoomArea).call(zoom).attr("width", chartW).attr("height", chartH); + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + + // Legend + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); } - var zoomArea = containerEnter.select(".zoomArea").selectAll(".rect").data([0]); - zoomArea.enter().append("rect").classed("zoomArea", true).attr("fill", "none").attr("pointer-events", "all").merge(zoomArea).call(zoom).attr("width", chartW).attr("height", chartH); }); } @@ -7138,6 +7782,42 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -7163,7 +7843,7 @@ }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} @@ -7222,10 +7902,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.categorical(3); var transition = { @@ -7235,7 +7915,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var startAngle = 0; var endAngle = 360; @@ -7261,12 +7945,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / data.length / 2; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / data.length / 2.3; var _dataTransform$summar = dataTransform(data).summary(), columnKeys = _dataTransform$summar.columnKeys, valueMax = _dataTransform$summar.valueMax; @@ -7299,38 +7984,64 @@ return layout; } var layout = generateLayout(data.length, chartW, chartH); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Radial Bar Chart - var polarArea = component.polarArea().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentPolarArea = component.polarArea().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); // Circular Axis - var circularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale); + var componentCircularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale); // Circular Labels - var circularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle"); + var componentCircularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle"); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", function (d, i) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", function (d, i) { return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); - }).call(circularAxis).call(circularSectorLabels).call(polarArea); - seriesGroup.exit().remove(); + }).call(componentPolarArea); + series.exit().remove(); + + // Axis Labels + if (showAxis) { + var seriesAxis = chartSelect.select(".axis").selectAll(".seriesAxis").data(data); + seriesAxis.enter().append("g").classed("seriesAxis", true).merge(seriesAxis).attr("transform", function (d, i) { + return "translate(".concat(layout[i].x, ",").concat(layout[i].y, ")"); + }).call(componentCircularAxis).call(componentCircularSectorLabels); + seriesAxis.exit().remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -7382,6 +8093,54 @@ return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -7444,8 +8203,8 @@ var margin = { top: 40, right: 40, - bottom: 40, - left: 40 + bottom: 70, + left: 70 }; var colors = [d3__namespace.rgb("steelblue").brighter(), d3__namespace.rgb("steelblue").darker()]; var transition = { @@ -7455,7 +8214,10 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; var showAxis = true; var minRadius = 2; var maxRadius = 20; @@ -7483,11 +8245,12 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, columnKeys = _dataTransform$summar.columnKeys, @@ -7499,39 +8262,60 @@ return d.value; })]; var sizeScale = d3__namespace.scaleLinear().domain(sizeExtent).range([minRadius, maxRadius]); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); - var layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); + + // Update the chart dimensions and layer groups + var chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Proportional Area Circles - var proportionalAreaCircles = component.proportionalAreaCircles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentProportionalAreaCircles = component.proportionalAreaCircles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition); // Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(data); - seriesGroup.enter().append("g").attr("class", "seriesGroup").merge(seriesGroup).attr("transform", function (d) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").attr("class", "series").merge(series).attr("transform", function (d) { return "translate(0,".concat(yScale(d.key), ")"); - }).call(proportionalAreaCircles); - seriesGroup.exit().remove(); + }).call(componentProportionalAreaCircles); + series.exit().remove(); - // X-Axis - var xAxis = d3__namespace.axisTop(xScale); - containerEnter.select(".xAxis").call(xAxis).selectAll("text").attr("y", 0).attr("x", -8).attr("transform", "rotate(60)").style("text-anchor", "end"); - - // Y-Axis + // Axis + var xAxis = d3__namespace.axisBottom(xScale); var yAxis = d3__namespace.axisLeft(yScale); - containerEnter.select(".yAxis").call(yAxis); - containerEnter.selectAll(".axis").attr("opacity", showAxis ? 1 : 0); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis").attr("transform", "translate(0,".concat(chartH, ")")).call(xAxis).selectAll("text").attr("y", 0).attr("x", -8).attr("transform", "rotate(300)").style("text-anchor", "end"); + + // Y-Axis + chartSelect.select(".yAxis").call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -7583,6 +8367,30 @@ return this; }; + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -7643,6 +8451,18 @@ return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + /** * Transition Getter / Setter * @@ -7691,10 +8511,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.categorical(3); var transition = { @@ -7704,7 +8524,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var startAngle = 0; var endAngle = 360; @@ -7730,12 +8554,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / 2.5; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / 2.3; var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, columnKeys = _dataTransform$summar.columnKeys, @@ -7744,42 +8569,61 @@ var xScale = d3__namespace.scalePoint().domain(columnKeys).range([startAngle, endAngle]); var yScale = d3__namespace.scaleLinear().domain(valueExtent).range([0, radius]).nice(); var colorScale = d3__namespace.scaleOrdinal().domain(rowKeys).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); - // Update the chart dimensions and container and layer groups - var layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + // Update the chart dimensions and layer groups + var chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Radar Component - var radarArea = component.radarArea().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); + var componentRadarArea = component.radarArea().xScale(xScale).yScale(yScale).colorScale(colorScale).opacity(opacity).dispatch(dispatch).transition(transition); // Circular Axis - var circularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale).showAxis(false); + var componentCircularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale).showAxis(false); // Circular Labels - var circularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle"); + var componentCircularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle"); // Create Radars - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; - }); - seriesGroup.enter().append("g").classed("seriesGroup", true).attr("fill", function (d) { + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).attr("fill", function (d) { return colorScale(d.key); }).style("stroke", function (d) { return colorScale(d.key); - }).merge(seriesGroup).call(radarArea).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")); - containerEnter.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(circularSectorLabels).call(circularAxis); + }).merge(series).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(componentRadarArea); + + // Axis Labels + if (showAxis) { + chartSelect.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(componentCircularSectorLabels).call(componentCircularAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -7831,6 +8675,54 @@ return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -7891,10 +8783,10 @@ var width = 700; var height = 400; var margin = { - top: 20, - right: 20, - bottom: 20, - left: 20 + top: 40, + right: 40, + bottom: 40, + left: 40 }; var colors = palette.categorical(3); var transition = { @@ -7904,7 +8796,11 @@ var dispatch = d3__namespace.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + var title = null; + var subTitle = null; var opacity = 1; + var showLegend = false; + var showAxis = true; var stacked = true; /** @@ -7929,12 +8825,13 @@ }(selection); selection.each(function (data) { // Set up margins and dimensions for the chart - var legendW = 120; - var legendPad = 15; + var legendW = showLegend ? 120 : 0; + var legendH = Math.max(height / 2.5, 100); + var legendPad = showLegend ? 15 : 0; + var titleH = title ? 40 : 0; var chartW = Math.max(width - margin.left - legendPad - legendW - margin.right, 100); - var chartH = Math.max(height - margin.top - margin.bottom, 100); - var legendH = Math.max(chartH / 2, 100); - var radius = Math.min(chartW, chartH) / 2; + var chartH = Math.max(height - margin.top - titleH - margin.bottom, 100); + var radius = Math.min(chartW, chartH) / 2.3; var innerRadius = 0; var _dataTransform$summar = dataTransform(data).summary(), rowKeys = _dataTransform$summar.rowKeys, @@ -7948,43 +8845,60 @@ var xScale = d3__namespace.scaleBand().domain(rowKeys).rangeRound([0, 360]); var yScale = d3__namespace.scaleLinear().domain(yDomain).range([innerRadius, radius]); var colorScale = d3__namespace.scaleOrdinal().domain(columnKeys).range(colors); - svg.classed("d3ez", true).attr("width", width).attr("height", height); - // Update the chart dimensions and container and layer groups - var container = svg.selectAll(".container").data([data]); - container.exit().remove(); - var containerEnter = container.enter().append("g").classed("container", true).classed(classed, true).merge(container).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top, ")")).attr("width", chartW).attr("height", chartH); + // Add Title, Chart and Legend main layer groups + var mainLayers = ["title", "chart", "legend"]; + svg.classed("d3ez", true).attr("width", width).attr("height", height).selectAll("g").data(mainLayers).enter().append("g").attr("class", function (d) { + return d; + }); + var titleSelect = svg.select(".title"); + var chartSelect = svg.select(".chart"); + var legendSelect = svg.select(".legend"); - // Update the chart dimensions and container and layer groups - var layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g").data(layers).enter().append("g").attr("class", function (d) { + // Update the chart dimensions and layer groups + var chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true).attr("width", chartW).attr("height", chartH).attr("transform", "translate(".concat(margin.left, ",").concat(margin.top + titleH, ")")).selectAll("g").data(chartLayers).enter().append("g").attr("class", function (d) { return d; }); // Rose Sectors - var roseChartSector = component.roseChartSector().xScale(xScale).yScale(yScale).colorScale(colorScale).stacked(stacked).opacity(opacity).dispatch(dispatch).transition(transition); + var componentRoseChartSector = component.roseChartSector().xScale(xScale).yScale(yScale).colorScale(colorScale).stacked(stacked).opacity(opacity).dispatch(dispatch).transition(transition); // Circular Axis - var circularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale); + var componentCircularAxis = component.circularAxis().radialScale(xScale).ringScale(yScale); // Circular Labels - var circularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle").capitalizeLabels(true); + var componentCircularSectorLabels = component.circularSectorLabels().ringScale(yScale).radialScale(xScale).textAnchor("middle").capitalizeLabels(true); // Create Series Group - var seriesGroup = containerEnter.select(".chart").selectAll(".seriesGroup").data(function (d) { - return d; + var series = chartSelect.select(".seriesGroup").selectAll(".series").data(data); + series.enter().append("g").classed("series", true).merge(series).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).each(function () { + d3__namespace.select(this).call(componentRoseChartSector); }); - seriesGroup.enter().append("g").classed("seriesGroup", true).merge(seriesGroup).attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).each(function () { - d3__namespace.select(this).call(roseChartSector); - }); - seriesGroup.exit().remove(); + series.exit().remove(); + + // Axis Labels + if (showAxis) { + chartSelect.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(componentCircularSectorLabels).call(componentCircularAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - // Outer Ring Labels - containerEnter.select(".axis").attr("transform", "translate(".concat(chartW / 2, ",").concat(chartH / 2, ")")).call(circularSectorLabels).call(circularAxis); + // Title + if (title) { + var componentTitle = component.title().mainText(title).subText(subTitle); + titleSelect.attr("transform", "translate(".concat(width / 2, ",").concat(margin.top, ")")).call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - var legend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); - containerEnter.select(".legend").attr("transform", "translate(".concat(chartW + legendPad, ",0)")).call(legend); + if (showLegend) { + var componentLegend = component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity); + legendSelect.attr("transform", "translate(".concat(margin.left + chartW + legendPad, ",").concat(margin.top, ")")).call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -8036,6 +8950,54 @@ return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function (_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function (_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function (_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function (_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * diff --git a/dist/d3-ez.min.js b/dist/d3-ez.min.js index aba2eeb..c906928 100644 --- a/dist/d3-ez.min.js +++ b/dist/d3-ez.min.js @@ -1 +1 @@ -(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?module.exports=factory(require("d3")):typeof define==="function"&&define.amd?define(["d3"],factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,global.d3=global.d3||{},global.d3.ez=factory(global.d3))})(this,function(d3){"use strict";function _interopNamespaceDefault(e){var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=="default"){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}})}})}n.default=e;return Object.freeze(n)}var d3__namespace=_interopNamespaceDefault(d3);var name="d3-ez";var version$1="4.0.3";var description="D3 Easy Reusable Chart Library";var license$1="GPL-2.0";var keywords=["d3","d3-module","visualization","chart","graph","data","svg","dataviz"];var homepage="http://d3-ez.net";var author$1="James Saunders (james@saunders-family.net)";var repository={type:"git",url:"https://github.com/jamesleesaunders/d3-ez.git"};var bugs={url:"https://github.com/jamesleesaunders/d3-ez/issues"};var type="module";var files=["dist/**/*.js","src/**/*.js"];var module="src/index.js";var main="src/index.js";var jsdelivr="dist/d3-ez.min.js";var unpkg="dist/d3-ez.min.js";var exports$1={umd:"./dist/d3-ez.min.js",default:"./src/index.js"};var scripts={build:"make",pretest:"make",test:"tape 'test/**/*Test.js' | tap-arc","build:docs":"jsdoc -c config/jsdoc.conf.json","deploy:docs":"npm run build:docs && gh-pages -d docs"};var devDependencies={"@babel/core":"^7.24.5","@babel/plugin-external-helpers":"^7.24.1","@babel/plugin-transform-object-assign":"^7.24.1","@babel/plugin-syntax-import-attributes":"^7.24.1","@babel/preset-env":"^7.24.5","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3",eslint:"^9.3.0","gh-pages":"^6.1.1",jsdoc:"^4.0.3",jsdom:"^24.0.0",rollup:"^4.17.2","tap-arc":"^1.2.2",tape:"^5.7.5","toast-jsdoc":"^1.0.2","uglify-js":"^3.17.4",vows:"^0.8.3"};var dependencies={d3:"^7.9.0"};var peerDependencies={d3:"^7.9.0"};var packageJson={name:name,version:version$1,description:description,license:license$1,keywords:keywords,homepage:homepage,author:author$1,repository:repository,bugs:bugs,type:type,files:files,module:module,main:main,jsdelivr:jsdelivr,unpkg:unpkg,exports:exports$1,scripts:scripts,devDependencies:devDependencies,dependencies:dependencies,peerDependencies:peerDependencies};function componentBarsCircular(){var classed="barsCircular";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var startAngle=d3__namespace.min(yScale.range());var arc=d3__namespace.arc().startAngle(startAngle*Math.PI/180).endAngle(function(d){return yScale(d.value)*Math.PI/180}).outerRadius(function(d){return xScale(d.key)+xScale.bandwidth()}).innerRadius(function(d){return xScale(d.key)}).cornerRadius(cornerRadius);var arcTween=function arcTween(d,j){this._current||(this._current={key:d.key,value:0});var i=d3__namespace.interpolate(this._current,d);this._current=i(0);return function(t){return arc(i(t))}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var bars=componentGroup.selectAll(".bar").data(function(d){return d.values});bars.enter().append("path").classed("bar",true).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(bars).transition().ease(transition.ease).duration(transition.duration).attr("d",arc).attrTween("d",arcTween).attr("fill",function(d){return colorScale(d.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.key)}).attr("stroke-width","1px");bars.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentBarsHorizontal(){var classed="bars";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var bars=componentGroup.selectAll(".bar").data(function(d){return d.values});bars.enter().append("rect").classed("bar",true).attr("stroke-width","1px").attr("rx",cornerRadius).attr("ry",cornerRadius).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).attr("x",0).attr("y",function(d){return yScale(d.key)}).attr("height",yScale.bandwidth()).merge(bars).transition().ease(transition.ease).duration(transition.duration).attr("fill",function(d){return colorScale(d.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.key)}).attr("width",yScale.bandwidth()).attr("y",function(d){return yScale(d.key)}).attr("height",yScale.bandwidth()).attr("width",function(d){return xScale(d.value)});bars.exit().transition().ease(transition.ease).duration(transition.duration).style("opacity",0).remove()})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return my};my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l);else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t.return&&(u=t.return(),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);id.open};var line=d3__namespace.line().x(function(d){return d.x}).y(function(d){return d.y});var highLowLines=function highLowLines(bars){var paths=bars.selectAll(".high-low-line").data(function(d){return[d]});paths.enter().append("path").classed("high-low-line",true).merge(paths).transition().ease(transition.ease).duration(transition.duration).attr("d",function(d){return line([{x:xScale(d.date),y:yScale(d.high)},{x:xScale(d.date),y:yScale(d.low)}])});return bars};var openCloseBars=function openCloseBars(candle){var rect=candle.selectAll(".open-close-bar").data(function(d){return[d]});rect.enter().append("rect").classed("open-close-bar",true).attr("x",function(d){return xScale(d.date)-candleWidth/2}).attr("y",function(d){var isUp=isUpDay(d);var base=isUp?yScale(d.close):yScale(d.open);var difference=isUp?yScale(d.open)-yScale(d.close):0;return base+difference}).attr("width",candleWidth).attr("rx",cornerRadius).attr("ry",cornerRadius).merge(rect).transition().ease(transition.ease).duration(transition.duration).attr("x",function(d){return xScale(d.date)-candleWidth/2}).attr("y",function(d){return isUpDay(d)?yScale(d.close):yScale(d.open)}).attr("width",candleWidth).attr("height",function(d){return isUpDay(d)?yScale(d.open)-yScale(d.close):yScale(d.close)-yScale(d.open)});return candle};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var candles=componentGroup.selectAll(".candle").data(function(d){return d.values});candles.enter().append("g").classed("candle",true).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(candles).attr("fill",function(d){return colorScale(isUpDay(d))}).attr("stroke",function(d){return colorScale(isUpDay(d))}).attr("fill-opacity",opacity).call(highLowLines).call(openCloseBars);candles.exit().remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.candleWidth=function(_v){if(!arguments.length)return candleWidth;candleWidth=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentCircularAxis(){var classed="circularAxis";var radialScale;var ringScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var showAxis=false;function my(selection){selection.each(function(){var _ringScale$range=ringScale.range(),_ringScale$range2=_slicedToArray(_ringScale$range,2);_ringScale$range2[0];var radius=_ringScale$range2[1];var axisSelect=d3__namespace.select(this).selectAll("g.".concat(classed)).data([0]);var axis=axisSelect.enter().append("g").classed(classed,true).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(axisSelect);var outerCircle=axis.selectAll(".outerCircle").data([radius]);outerCircle.enter().append("circle").classed("outerCircle",true).merge(outerCircle).transition().ease(transition.ease).duration(transition.duration).attr("r",function(d){return d}).style("fill","none").attr("stroke-width",2).attr("stroke","currentColor");var tickData=function tickData(){var tickArray,tickPadding;if(typeof ringScale.ticks==="function"){tickArray=ringScale.ticks();tickPadding=0}else{tickArray=ringScale.domain();tickPadding=ringScale.bandwidth()/2}return tickArray.map(function(d){return{value:d,radius:ringScale(d),padding:tickPadding}})};var tickCirclesGroupSelect=axis.selectAll(".tickCircles").data(function(){return[tickData()]});var tickCirclesGroup=tickCirclesGroupSelect.enter().append("g").classed("tickCircles",true).merge(tickCirclesGroupSelect);var tickCircles=tickCirclesGroup.selectAll("circle").data(function(d){return d});tickCircles.enter().append("circle").style("fill","none").attr("stroke","currentColor").attr("stroke-width",1).attr("stroke-dasharray","1,1").attr("opacity",.5).merge(tickCircles).transition().ease(transition.ease).duration(transition.duration).attr("r",function(d){return d.radius+d.padding});tickCircles.exit().remove();var spokeData=function spokeData(){var spokeArray=[];var spokeCount=0;if(typeof radialScale.ticks==="function"){var min=d3__namespace.min(radialScale.domain());var max=d3__namespace.max(radialScale.domain());spokeCount=radialScale.ticks().length;var spokeIncrement=(max-min)/spokeCount;for(var i=0;i<=spokeCount;i++){spokeArray[i]=(spokeIncrement*i).toFixed(0)}}else{spokeArray=radialScale.domain();spokeCount=spokeArray.length;spokeArray.push("")}var spokeScale=d3__namespace.scaleLinear().domain([0,spokeCount]).range(radialScale.range());return spokeArray.map(function(d,i){return{value:d,rotate:spokeScale(i)}})};var spokeGroup=axis.selectAll(".spokes").data(function(){return[spokeData()]});var spokeGroupEnter=spokeGroup.enter().append("g").classed("spokes",true).merge(spokeGroup);var spokes=spokeGroupEnter.selectAll("line").data(function(d){return d});spokes.enter().append("line").attr("stroke","currentColor").attr("stroke-width",1).attr("stroke-dasharray","2,2").attr("opacity",.5).merge(spokes).attr("transform",function(d){return"rotate(".concat(d.rotate,")")}).attr("y2",-radius);spokes.exit().remove();if(showAxis){var verticalAxis=d3__namespace.axisLeft(ringScale);axis.call(verticalAxis)}})}my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.ringScale=function(_v){if(!arguments.length)return ringScale;ringScale=_v;return my};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return my};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentCircularRingLabels(){var classed="circularRingLabels";var radialScale;var transition={ease:d3__namespace.easeLinear,duration:0};var capitalizeLabels=false;var textAnchor="middle";function my(selection){selection.each(function(){var pathGen=function pathGen(d){var r=radialScale(d);var arc=d3__namespace.arc().outerRadius(r).innerRadius(r);var pathConf={startAngle:0*Math.PI/180,endAngle:360*Math.PI/180};var pathStr=arc(pathConf).split(/[A-Z]/);return"M"+pathStr[1]+"A"+pathStr[2]};var element=d3__namespace.select(this);var uId="uid-"+Math.floor(1e3+Math.random()*9e3);var labels=element.selectAll("g.".concat(classed)).data([0]);var labelsEnter=labels.enter().append("g").classed(classed,true).merge(labels);var radData=radialScale.domain();var def=labelsEnter.selectAll("def").data(radData);def.enter().append("def").append("path").attr("id",function(d,i){return"".concat(uId,"-path-").concat(i)}).attr("d",function(d){return pathGen(d)}).merge(def).transition().ease(transition.ease).duration(transition.duration).select("path").attr("d",function(d){return pathGen(d)}).attr("id",function(d,i){return"".concat(uId,"-path-").concat(i)});var text=labelsEnter.selectAll("text").data(radData);text.enter().append("text").style("text-anchor","start").attr("dy",-2).attr("dx",5).append("textPath").attr("xlink:href",function(d,i){return"#".concat(uId,"-path-").concat(i)}).attr("startOffset","0%").attr("font-size",function(d){var fontPx=radialScale.bandwidth()*.5;return"".concat(fontPx,"px")}).text(function(d){return d}).merge(text).transition().ease(transition.ease).duration(transition.duration).select("textPath").attr("font-size",function(d){var fontPx=radialScale.bandwidth()*.5;return"".concat(fontPx,"px")}).attr("xlink:href",function(d,i){return"#".concat(uId,"-path-").concat(i)});text.exit().remove()})}my.capitalizeLabels=function(_v){if(!arguments.length)return capitalizeLabels;capitalizeLabels=_v;return this};my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.textAnchor=function(_v){if(!arguments.length)return textAnchor;textAnchor=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentCircularSectorLabels(){var classed="circularSectorLabels";var radialScale;var ringScale;var transition={ease:d3__namespace.easeLinear,duration:0};var capitalizeLabels=false;var textAnchor="middle";function my(selection){selection.each(function(){textAnchor="start";var _ringScale$range=ringScale.range(),_ringScale$range2=_slicedToArray(_ringScale$range,2);_ringScale$range2[0];var radius=_ringScale$range2[1];var tickData=function tickData(){var tickCount=0;var tickArray=[];if(typeof radialScale.ticks==="function"){var min=d3__namespace.min(radialScale.domain());var max=d3__namespace.max(radialScale.domain());tickCount=radialScale.ticks().length;var tickIncrement=(max-min)/tickCount;for(var i=0;i<=tickCount;i++){tickArray[i]=(tickIncrement*i).toFixed(0)}}else{tickArray=radialScale.domain();tickCount=tickArray.length}var tickScale=d3__namespace.scaleLinear().domain([0,tickCount]).range(radialScale.range());return tickArray.map(function(d,i){return{value:d,offset:tickScale(i)/360*100}})};var element=d3__namespace.select(this);var uId="uid-"+Math.floor(1e3+Math.random()*9e3);var labels=element.selectAll("g.".concat(classed)).data(function(){return[tickData()]});var labelsEnter=labels.enter().append("g").classed(classed,true).attr("transform",function(){var offset=typeof radialScale.ticks!=="function"?radialScale.bandwidth()/2:0;return"rotate(".concat(offset,")")}).merge(labels);var def=labelsEnter.selectAll("def").data([radius]);def.enter().append("def").append("path").attr("id",function(){return"".concat(uId,"-path")}).attr("d",function(d){var r=d*1.04;return"m0 "+-r+" a"+r+" "+r+" 0 1,1 -0.01 0"}).merge(def).transition().ease(transition.ease).duration(transition.duration).select("path").attr("id",function(){return"".concat(uId,"-path")}).attr("d",function(d){var r=d*1.04;return"m0 "+-r+" a"+r+" "+r+" 0 1,1 -0.01 0"});def.exit().remove();var text=labelsEnter.selectAll(".label").data(function(d){return d});text.enter().append("text").classed("label",true).attr("font-size","0.9em").attr("color","currentColor").style("text-anchor",textAnchor).append("textPath").attr("xlink:href",function(){return"#".concat(uId,"-path")}).text(function(d){var text=d.value;return capitalizeLabels?text.toUpperCase():text}).attr("startOffset",function(d){return d.offset+"%"}).attr("fill","currentColor").merge(text).transition().ease(transition.ease).duration(transition.duration).select("textPath").text(function(d){var text=d.value;return capitalizeLabels?text.toUpperCase():text}).attr("xlink:href",function(){return"#".concat(uId,"-path")}).attr("startOffset",function(d){return d.offset+"%"}).attr("id",function(d){return d.value});text.exit().remove()})}my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.ringScale=function(_v){if(!arguments.length)return ringScale;ringScale=_v;return this};my.capitalizeLabels=function(_v){if(!arguments.length)return capitalizeLabels;capitalizeLabels=_v;return this};my.textAnchor=function(_v){if(!arguments.length)return textAnchor;textAnchor=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentDonut(){var classed="donut";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),innerRadius=_xScale$range2[0],radius=_xScale$range2[1];var _yScale$range=yScale.range(),_yScale$range2=_slicedToArray(_yScale$range,2),startAngle=_yScale$range2[0],endAngle=_yScale$range2[1];var pie=d3__namespace.pie().startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).value(function(d){return d.value}).sort(null).padAngle(.015);var arc=d3__namespace.arc().innerRadius(innerRadius).outerRadius(radius).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(d.startAngle,d.endAngle);return function(t){d.endAngle=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var slices=componentGroup.selectAll("path.slice").data(function(d){return pie(d.values)});slices.enter().append("path").attr("class","slice").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(slices).transition().duration(transition.duration).ease(transition.ease).attr("d",arc).attrTween("d",arcTween).attr("fill",function(d){return colorScale(d.data.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.data.key)}).attr("stroke-width","1px");slices.exit().remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentDonutLabels(){var classed="donutLabels";var xScale;var yScale;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),innerRadius=_xScale$range2[0],radius=_xScale$range2[1];var _yScale$range=yScale.range(),_yScale$range2=_slicedToArray(_yScale$range,2),startAngle=_yScale$range2[0],endAngle=_yScale$range2[1];var pie=d3__namespace.pie().startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).value(function(d){return d.value}).sort(null).padAngle(.015);var arc=d3__namespace.arc().innerRadius(innerRadius).outerRadius(radius);var outerArc=d3__namespace.arc().innerRadius(radius*.9).outerRadius(radius*.9);var midAngle=function midAngle(d){return d.startAngle+(d.endAngle-d.startAngle)/2};var seriesGroup=d3__namespace.select(this);var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var labelsGroup=componentGroup.selectAll("g.labels").data(function(d){return[d]});var labelsGroupEnter=labelsGroup.enter().append("g").attr("class","labels").merge(labelsGroup);var labels=labelsGroupEnter.selectAll("text.label").data(function(d){return pie(d.values)});labels.enter().append("text").attr("class","label").attr("font-size","0.9em").attr("dy",".35em").attr("fill","currentColor").merge(labels).transition().duration(transition.duration).text(function(d){return d.data.key}).attrTween("transform",function(d){this._current=this._current||d;var interpolate=d3__namespace.interpolate(this._current,d);this._current=interpolate(0);return function(t){var d2=interpolate(t);var pos=outerArc.centroid(d2);pos[0]=radius*(midAngle(d2)0){acc[1]+=value}return acc},[0,0]),_row$values$reduce2=_slicedToArray(_row$values$reduce,2),negativeSum=_row$values$reduce2[0],positiveSum=_row$values$reduce2[1];lowestNegativeSum=Math.min(lowestNegativeSum,negativeSum);highestPositiveSum=Math.max(highestPositiveSum,positiveSum)})}var finalLowestNegativeSum=lowestNegativeSum===Infinity?0:lowestNegativeSum;var finalHighestPositiveSum=highestPositiveSum===-Infinity?0:highestPositiveSum;return[finalLowestNegativeSum,finalHighestPositiveSum]}();var coordinatesMin=function(){var ret={};if(dataType===SINGLE_SERIES){coordinateKeys.forEach(function(key){ret[key]=Math.min.apply(Math,_toConsumableArray(data.values.map(function(d){return+d[key]})))});return ret}else{data.forEach(function(item){item.values.forEach(function(value){coordinateKeys.forEach(function(key){ret[key]=key in ret?Math.min(ret[key],+value[key]):+value[key]})})})}return ret}();var coordinatesMax=function(){var ret={};if(dataType===SINGLE_SERIES){coordinateKeys.forEach(function(key){ret[key]=Math.max.apply(Math,_toConsumableArray(data.values.map(function(d){return+d[key]})))});return ret}else{data.forEach(function(item){item.values.forEach(function(value){coordinateKeys.forEach(function(key){ret[key]=key in ret?Math.max(ret[key],+value[key]):+value[key]})})})}return ret}();var coordinatesExtent=function(){var ret={};coordinateKeys.forEach(function(key){ret[key]=[coordinatesMin[key],coordinatesMax[key]]});return ret}();var decimalPlaces=function decimalPlaces(num){var match=(""+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);if(!match){return 0}return Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0))};var maxDecimalPlace=function(){var ret=0;if(dataType===MULTI_SERIES){data.forEach(function(item){item.values.forEach(function(value){ret=Math.max(ret,decimalPlaces(value.value))})})}return ret>20?20:ret}();var thresholds=function(){var distance=valueMax-valueMin;var bands=[.25,.5,.75,1];return bands.map(function(v){return Number((valueMin+v*distance).toFixed(maxDecimalPlace))})}();var summary=function summary(){return{dataType:dataType,rowKey:rowKey,rowTotal:rowTotal,rowKeys:rowKeys,rowTotals:rowTotals,rowTotalsMin:rowTotalsMin,rowTotalsMax:rowTotalsMax,rowValuesKeys:rowValuesKeys,columnKeys:columnKeys,columnTotals:columnTotals,columnTotalsMin:columnTotalsMin,columnTotalsMax:columnTotalsMax,valueMin:valueMin,valueMax:valueMax,valueExtent:valueExtent,valueExtentStacked:valueExtentStacked,coordinatesMin:coordinatesMin,coordinatesMax:coordinatesMax,coordinatesExtent:coordinatesExtent,maxDecimalPlace:maxDecimalPlace,thresholds:thresholds}};var rotate=function rotate(){var columnKeys=data.map(function(d){return d.key});var rowKeys=data[0].values.map(function(d){return d.key});var rotated=rowKeys.map(function(rowKey,rowIndex){var values=columnKeys.map(function(columnKey,columnIndex){var values=Object.assign({},data[columnIndex].values[rowIndex]);values.key=columnKey;return values});return{key:rowKey,values:values}});return rotated};return{summary:summary,rotate:rotate}}function componentHtmlTable(){var classed="htmlTable";var width=800;var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(data){var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys;var table=d3__namespace.select(this).selectAll("table").data(function(d){return[d]});var tableEnter=table.enter().append("table").classed("d3ez",true).classed(classed,true).attr("width",width).merge(table);tableEnter.append("thead");tableEnter.append("tfoot");tableEnter.append("tbody");var head=tableEnter.select("thead").selectAll("tr").data([columnKeys]);head.exit().remove();var headEnter=head.enter().append("tr").merge(head);var th=headEnter.selectAll("th").data(function(d){d.unshift("");return d});th.exit().remove();th.enter().append("th").merge(th).html(function(d){return d});var body=tableEnter.select("tbody").selectAll("tr").data(data);body.exit().remove();var bodyEnter=body.enter().append("tr").attr("class",function(d){return d.key}).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)}).merge(body);var td=bodyEnter.selectAll("td").data(function(d){d.values.unshift({key:d.key,value:d.key});return d.values});td.exit().remove();td.enter().append("td").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(td).html(function(d){return d.value})})}my.classed=function(_v){if(!arguments.length)return classed;classed=_v;return this};my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentLegendSize(){var width=100;var height=150;var sizeScale;var itemCount=4;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var data=function(){var domainMin=parseFloat(d3__namespace.min(sizeScale.domain()));var domainMax=parseFloat(d3__namespace.max(sizeScale.domain()));var increment=(domainMax-domainMin)/itemCount;var ranges=Array(itemCount).fill().map(function(v,i){var rangeStart=domainMin+increment*i;var rangeEnd=domainMin+increment*(i+1);return[rangeStart,rangeEnd]});var yStep=height/(itemCount*2);var yDomain=[0,itemCount-1];var yRange=[yStep,height-yStep];var yScale=d3__namespace.scaleLinear().domain(yDomain).range(yRange);return ranges.map(function(v,i){return{x:sizeScale(domainMax),y:yScale(i),r:sizeScale(ranges[i][0]),text:v[0].toFixed(0)+" — "+v[1].toFixed(0)}})}();var legendContainer=selection.selectAll(".legendContainer").data([data]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var items=legendContainerEnter.selectAll(".legendItem").data(function(d){return d});var itemsEnter=items.enter().append("g").classed("legendItem",true).attr("transform",function(d){return"translate(0,".concat(d.y,")")});items.exit().remove();itemsEnter.append("circle").attr("r",function(d){return d.r}).attr("cx",function(d){return d.x}).attr("fill","#cad4e7").attr("stroke","#cad4e7").attr("stroke-width",1).attr("fill-opacity",opacity/2);itemsEnter.append("text").attr("font-size","0.9em").attr("fill","currentColor").attr("dominant-baseline","middle").attr("x",function(d){return d.x*2+5}).text(function(d){return d.text});var itemsTrans=items.transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){return"translate(0,".concat(d.y,")")});itemsTrans.select("text").text(function(d){return d.text});itemsTrans.select("circle").attr("fill-opacity",opacity)}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.itemCount=function(_v){if(!arguments.length)return itemCount;itemCount=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegendCategorical(){var width=100;var height=150;var colorScale;var itemCount;var itemType="rect";var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var cornerRadius=2;function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var data=function(){var domain=colorScale.domain();itemCount=domain.length;var itemHeight=height/itemCount/2;var itemWidth=20;return domain.map(function(v,i){return{y:10+itemHeight*2*i,width:itemWidth,height:itemHeight,color:colorScale(v),text:v}})}();var legendContainer=selection.selectAll(".legendContainer").data([data]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var items=legendContainerEnter.selectAll(".legendItem").data(function(d){return d});var itemsEnter=items.enter().append("g").classed("legendItem",true).attr("transform",function(d){return"translate(0,".concat(d.y,")")});items.exit().remove();switch(itemType){case"line":itemsEnter.append("line").attr("x1",0).attr("y1",function(d){return d.height/2}).attr("x2",function(d){return d.width}).attr("y2",function(d){return d.height/2}).attr("stroke",function(d){return d.color}).attr("stroke-width",2);items.transition().ease(transition.ease).duration(transition.duration).select("line").attr("x1",0).attr("y1",function(d){return d.height/2}).attr("x2",function(d){return d.width}).attr("y2",function(d){return d.height/2}).attr("stroke",function(d){return d.color}).attr("stroke-width",2);break;case"rect":default:itemsEnter.append("rect").attr("rx",cornerRadius).attr("ry",cornerRadius).attr("width",function(d){return d.width}).attr("height",function(d){return d.height}).style("fill",function(d){return d.color}).attr("fill-opacity",opacity).attr("stroke",function(d){return d.color}).attr("stroke-width",1);items.transition().ease(transition.ease).duration(transition.duration).select("rect").attr("width",function(d){return d.width}).attr("height",function(d){return d.height}).style("fill",function(d){return d.color}).attr("fill-opacity",opacity).attr("stroke",function(d){return d.color}).attr("stroke-width",1);break}itemsEnter.append("text").attr("font-size","0.9em").text(function(d){return d.text}).attr("dominant-baseline","middle").attr("x",40).attr("y",function(d){return d.height/2}).attr("fill","currentColor");items.transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){return"translate(0,".concat(d.y,")")}).select("text").text(function(d){return d.text}).attr("y",function(d){return d.height/2})}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.itemType=function(_v){if(!arguments.length)return itemType;itemType=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegendThreshold(){var width=100;var height=150;var thresholdScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var domainMin=d3__namespace.min(thresholdScale.domain());var domainMax=d3__namespace.max(thresholdScale.domain());var domainMargin=(domainMax-domainMin)*.1;var x=d3__namespace.scaleLinear().domain([domainMin-domainMargin,domainMax+domainMargin]).range([0,height]);var legendContainer=selection.selectAll(".legendContainer").data([0]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var axis=d3__namespace.axisRight(x).tickSize(30).tickValues(thresholdScale.domain());legendContainerEnter.transition().ease(transition.ease).duration(transition.duration).call(axis).selectAll(".domain").attr("opacity",0);var colors=legendContainerEnter.selectAll("rect").data(thresholdScale.range().map(function(color){var d=thresholdScale.invertExtent(color);if(typeof d[0]==="undefined")d[0]=x.domain()[0];if(typeof d[1]==="undefined")d[1]=x.domain()[1];return d}));colors.enter().append("rect").merge(colors).transition().ease(transition.ease).duration(transition.duration).attr("width",20).attr("y",function(d){return x(d[0])}).attr("height",function(d){return x(d[1])-x(d[0])}).style("fill",function(d){return thresholdScale(d[0])}).attr("fill-opacity",opacity).attr("stroke",function(d){return thresholdScale(d[0])}).attr("stroke-width",1)}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.thresholdScale=function(_v){if(!arguments.length)return thresholdScale;thresholdScale=_v;return my};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegend(){var width=100;var height=150;var margin={top:35,right:10,bottom:10,left:10};var sizeScale;var colorScale;var title="Key";var legend;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var itemType="rect";function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");if(typeof sizeScale!=="undefined"){legend=componentLegendSize().sizeScale(sizeScale).itemCount(4)}if(typeof colorScale!=="undefined"){if(scaleType(colorScale)==="threshold"){legend=componentLegendThreshold().thresholdScale(colorScale)}else{legend=componentLegendCategorical().colorScale(colorScale).itemType(itemType)}}legend.opacity(opacity).transition(transition);var legendBox=selection.selectAll(".legendBox").data([0]);var legendBoxEnter=legendBox.enter().append("g").attr("class","legendBox");legendBoxEnter.append("rect").classed("legendBorder",true).attr("width",width).attr("height",height).attr("fill-opacity",0).attr("stroke-width",1).attr("stroke","currentcolor");legendBox.transition().ease(transition.ease).duration(transition.duration).selectAll(".legendBorder").attr("width",width).attr("height",height);legendBoxEnter.append("g").classed("legendTitle",true).attr("transform","translate(10,10)").append("text").style("font-weight","bold").attr("dominant-baseline","hanging").attr("fill","currentColor").text(title);legend.width(width-(margin.left+margin.right)).height(height-(margin.top+margin.bottom));legendBoxEnter.append("g").classed("legendBox",true).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).call(legend);legendBox.selectAll(".legendBox").call(legend)}function scaleType(scale){var s=scale.copy();if(s.domain([1,2]).range([1,2])(1.5)===1){return"ordinal"}else if(typeof s.invert!=="function"){return"threshold"}else if(s.domain([1,2]).range([1,2]).invert(1.5)===1.5){return"linear"}else if(s.domain([1,2]).range([1,2]).invert(1.5)instanceof Date){return"time"}else{return"not supported"}}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.title=function(_v){if(!arguments.length)return title;title=_v;return my};my.itemType=function(_v){if(!arguments.length)return itemType;itemType=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLineChart(){var classed="lineChart";var xScale;var yScale;var colorScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(){var line=d3__namespace.line().curve(d3__namespace.curveCardinal).x(function(d){return xScale(d.key)}).y(function(d){return yScale(d.value)});var pathTween=function pathTween(d){var i=d3__namespace.interpolate(1,d.length+1);return function(t){return line(d.slice(0,i(t)))}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var path=componentGroup.selectAll(".line").data(function(d){return[d]});path.enter().append("path").attr("class","line").attr("stroke-width",1.5).attr("fill","none").attr("d",function(d){return line(d.values)}).merge(path).transition().duration(transition.duration).attrTween("d",function(d){return pathTween(d.values)}).attr("stroke",function(d){return colorScale(d.key)}).attr("opacity",opacity);path.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentNumberCard(){var classed="numberCard";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(){var cellHeight=yScale.bandwidth();var cellWidth=xScale.bandwidth();var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var numbers=componentGroup.selectAll(".number").data(function(d){return d.values});numbers.enter().append("text").attr("class","number").attr("text-anchor","middle").attr("dominant-baseline","central").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(numbers).transition().ease(transition.ease).duration(transition.duration).text(function(d){return d["value"]}).attr("fill",function(d){return colorScale(d.value)}).attr("x",function(d){return xScale(d.key)+cellWidth/2}).attr("y",cellHeight/2);numbers.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentPolarArea(){var classed="polarArea";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),startAngle=_xScale$range2[0],endAngle=_xScale$range2[1];var pie=d3__namespace.pie().value(1).sort(null).startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).padAngle(0);var arc=d3__namespace.arc().outerRadius(function(d){return yScale(d.data.value)}).innerRadius(0).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(0,d.data.value);return function(t){d.data.value=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var segments=componentGroup.selectAll(".segment").data(function(d){return pie(d.values)});segments.enter().append("path").classed("segment",true).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d.data)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d.data)}).merge(segments).transition().ease(transition.ease).duration(transition.duration).attr("d",arc).attrTween("d",arcTween).style("fill",function(d){return colorScale(d.data.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.data.key)}).attr("stroke-width","1px");segments.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentProportionalAreaCircles(){var classed="proportionalAreaCircles";var xScale;var yScale;var colorScale;var sizeScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(){var cellHeight=yScale.bandwidth();var cellWidth=xScale.bandwidth();var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var spot=componentLabeledNode().radius(function(d){return sizeScale(d.value)}).color(function(d){return colorScale(d.value)}).label(function(d){return d.value}).display("none").opacity(opacity).stroke(1,"currentColor").dispatch(dispatch).transition(transition);var spots=componentGroup.selectAll(".punchSpot").data(function(d){return d.values});spots.enter().append("g").classed("punchSpot",true).on("mouseover",function(e,d){d3__namespace.select(this).select("text").style("display","block");dispatch.call("customValueMouseOver",this,e,d)}).on("mouseout",function(){d3__namespace.select(this).select("text").style("display","none")}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).attr("transform",function(d){var x=cellWidth/2+xScale(d.key);var y=cellHeight/2;return"translate(".concat(x,",").concat(y,")")}).merge(spots).transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){var x=cellWidth/2+xScale(d.key);var y=cellHeight/2;return"translate(".concat(x,",").concat(y,")")}).call(spot);spots.exit().transition().ease(transition.ease).duration(transition.duration).style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentRadarArea(){var classed="radarArea";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(data){var angleSlice=Math.PI*2/data.values.length;var radarLine=d3__namespace.lineRadial().radius(function(d){return yScale(d.value)}).angle(function(d,i){return i*angleSlice}).curve(d3__namespace.curveBasis).curve(d3__namespace.curveCardinalClosed);var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var path=componentGroup.selectAll("path").data(function(d){return[d]});path.enter().append("path").on("mouseover",function(){d3__namespace.select(this).transition().duration(200).style("fill-opacity",opacity)}).on("mouseout",function(){d3__namespace.select(this).transition().duration(200).style("fill-opacity",opacity/2)}).merge(path).transition().ease(transition.ease).duration(transition.duration).style("fill-opacity",opacity/2).attr("d",function(d){return radarLine(d.values)});var dots=componentGroup.selectAll("circle").data(function(d){return d.values});dots.enter().append("circle").attr("class","radarCircle").attr("r",4).style("fill-opacity",.8).merge(dots).attr("cx",function(d,i){return yScale(d.value)*Math.cos(angleSlice*i-Math.PI/2)}).attr("cy",function(d,i){return yScale(d.value)*Math.sin(angleSlice*i-Math.PI/2)})})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentRoseChartSector(){var classed="roseChartSector";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var stacked=false;var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(data){var stacker=function stacker(data){var series=[];var innerRadius=0;var outerRadius=0;data.forEach(function(d,i){outerRadius=innerRadius+d.value;series[i]={key:d.key,value:d.value,innerRadius:yScale(innerRadius),outerRadius:yScale(outerRadius)};innerRadius+=stacked?d.value:0});return series};var startAngle=xScale(data.key);var endAngle=xScale(data.key)+xScale.bandwidth();var arc=d3__namespace.arc().innerRadius(function(d){return d.innerRadius}).outerRadius(function(d){return d.outerRadius}).startAngle(startAngle*(Math.PI/180)).endAngle(endAngle*(Math.PI/180)).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(d.innerRadius,d.outerRadius);return function(t){d.outerRadius=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var arcs=componentGroup.selectAll(".arc").data(function(d){return stacker(d.values)});arcs.enter().append("path").classed("arc",true).attr("stroke-width","1px").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(arcs).transition().ease(transition.ease).duration(transition.duration).attr("d",arc).attrTween("d",arcTween).attr("fill",function(d){return colorScale(d.key)}).attr("stroke",function(d){return colorScale(d.key)}).attr("fill-opacity",opacity);arcs.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentScatterPlot(){var classed="scatterPlot";var xScale;var yScale;var colorScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(){d3__namespace.max(yScale.range());var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var dots=componentGroup.attr("fill",function(d){return colorScale(d.key)}).selectAll(".dot").data(function(d){return d.values});dots.enter().append("circle").attr("class","dot").attr("r",3).attr("cx",0).attr("cy",function(d){return yScale(d.value)}).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(dots).transition().ease(transition.ease).duration(transition.duration).attr("cx",function(d){return xScale(d.key)}).attr("cy",function(d){return yScale(d.value)}).attr("opacity",opacity);dots.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}var component={barsCircular:componentBarsCircular,barsHorizontal:componentBarsHorizontal,barsVertical:componentBarsVertical,barsVerticalStacked:componentBarsVerticalStacked,bubbles:componentBubbles,candleSticks:componentCandleSticks,circularAxis:componentCircularAxis,circularRingLabels:componentCircularRingLabels,circularSectorLabels:componentCircularSectorLabels,donut:componentDonut,donutLabels:componentDonutLabels,heatMapRing:componentHeatMapRing,heatMapRow:componentHeatMapRow,htmlList:componentHtmlList,htmlTable:componentHtmlTable,labeledNode:componentLabeledNode,legend:componentLegend,legendSize:componentLegendSize,legendColor:componentLegendCategorical,legendThreshold:componentLegendThreshold,lineChart:componentLineChart,numberCard:componentNumberCard,polarArea:componentPolarArea,proportionalAreaCircles:componentProportionalAreaCircles,radarArea:componentRadarArea,roseChartSector:componentRoseChartSector,scatterPlot:componentScatterPlot};var palette={categorical:function categorical(index){switch(index){case 1:return["#5da5da","#faa43a","#60bd68","#f17cb0","#b2912f","#b276b2","#decf3f","#f15854","#4d4d4d"];case 2:return["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"];case 3:return["#3f51b5","#ff9800","#8bc34a","#9c27b0","#ffeb3b","#03a9f4","#f44336","#009688","#795548"]}},diverging:function diverging(index){switch(index){case 1:return["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"];case 2:return["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"];case 3:return["#0000ff","#8052fe","#b58bfb","#ddc5f7","#fffff0","#ffcfb4","#ff9e7a","#ff6842","#ff0000"]}},sequential:function sequential(origHex,count){var lumStep=.1;var lumMax=lumStep*count/2;var lumMin=0-lumMax;var lumScale=d3__namespace.scaleLinear().domain([1,count]).range([lumMin,lumMax]);var result=[];for(var i=1;i<=count;i++){var lum=lumScale(i);origHex=String(origHex).replace(/[^0-9a-f]/gi,"");if(origHex.length<6){origHex=origHex[0]+origHex[0]+origHex[1]+origHex[1]+origHex[2]+origHex[2]}var newHex="#";var c=void 0;for(var j=0;j<3;j++){c=parseInt(origHex.substr(j*2,2),16);c=Math.round(Math.min(Math.max(0,c+c*lum),255)).toString(16);newHex+=("00"+c).substr(c.length)}result.push(newHex)}return result},lumShift:function lumShift(colors,lum){var result=[];colors.forEach(function addNumber(origHex,index){origHex=String(origHex).replace(/[^0-9a-f]/gi,"");if(origHex.length<6){origHex=origHex[0]+origHex[0]+origHex[1]+origHex[1]+origHex[2]+origHex[2]}lum=lum||0;var newHex="#";for(var i=0;i<3;i++){var c=parseInt(origHex.substr(i*2,2),16);c=Math.round(Math.min(Math.max(0,c+c*lum),255)).toString(16);newHex+=("00"+c).substr(c.length)}result[index]=newHex});return result}};function chartBarChartCircular(){var classed="barChartCircular";var width=700;var height=400;var margin={top:20,right:20,bottom:20,left:20};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var startAngle=0;var endAngle=270;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);var radius=Math.min(chartW,chartH)/data.length/2;var innerRadius=radius/4;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueMax=_dataTransform$summar.valueMax;var valueExtent=[0,valueMax];var xScale=d3__namespace.scaleBand().domain(columnKeys).rangeRound([innerRadius,radius]).padding(.15);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([startAngle,endAngle]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;i0?0:valueMin}var yDomain=[valueMin,valueMax];var xScale2=d3__namespace.scaleBand().domain(rowKeys).range([0,chartW]).padding(.05);var xScale=d3__namespace.scaleBand().domain(columnKeys).range([0,xScale2.bandwidth()]).padding(.05);var yScale=d3__namespace.scaleLinear().domain(yDomain).range([chartH,0]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);svg.classed("d3ez",true).attr("width",width).attr("height",height);var container=svg.selectAll(".container").data([data]);container.exit().remove();var containerEnter=container.enter().append("g").classed("container",true).classed(classed,true).merge(container).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).attr("width",chartW).attr("height",chartH);var layers=["xAxis axis","yAxis axis","chart","legend"];containerEnter.selectAll("g").data(layers).enter().append("g").attr("class",function(d){return d});var bars=stacked?component.barsVerticalStacked().xScale(xScale2):component.barsVertical().xScale(xScale);bars.colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var seriesGroup=containerEnter.select(".chart").selectAll(".seriesGroup").data(function(d){return d});seriesGroup.enter().append("g").classed("seriesGroup",true).merge(seriesGroup).attr("transform",function(d){return"translate(".concat(xScale2(d.key),",").concat(chartH-yScale(valueMin),")")}).call(bars);seriesGroup.exit().remove();var xAxis=d3__namespace.axisBottom(xScale2);containerEnter.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);var yAxis=d3__namespace.axisLeft(yScale);containerEnter.select(".yAxis").call(yAxis);containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").transition().text(function(d){return d});containerEnter.selectAll(".axis").attr("opacity",showAxis?1:0);var legend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity);containerEnter.select(".legend").attr("transform","translate(".concat(chartW+legendPad,",0)")).call(legend)})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartBarChartHorizontal(){var classed="barChart";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=palette.categorical(1);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var showAxis=true;var yAxisLabel=null;var stacked=false;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);var _dataTransform$summar=dataTransform(data).summary(),rowKeys=_dataTransform$summar.rowKeys,columnKeys=_dataTransform$summar.columnKeys,valueExtent=_dataTransform$summar.valueExtent,valueExtentStacked=_dataTransform$summar.valueExtentStacked;var _valueExtent=_slicedToArray(valueExtent,2),valueMin=_valueExtent[0],valueMax=_valueExtent[1];if(stacked){var _valueExtentStacked=_slicedToArray(valueExtentStacked,2);valueMin=_valueExtentStacked[0];valueMax=_valueExtentStacked[1]}else{valueMin=valueMin>0?0:valueMin}var yDomain=[valueMin,valueMax];var xScale=d3__namespace.scaleLinear().domain(yDomain).range([0,chartW]);var yScale2=d3__namespace.scaleBand().domain(rowKeys).range([0,chartH]).padding(.1);var yScale=d3__namespace.scaleBand().domain(columnKeys).range([0,yScale2.bandwidth()]).padding(.15);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);svg.classed("d3ez",true).attr("width",width).attr("height",height);var container=svg.selectAll(".container").data([data]);container.exit().remove();var containerEnter=container.enter().append("g").classed("container",true).classed(classed,true).merge(container).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).attr("width",chartW).attr("height",chartH);var layers=["xAxis axis","yAxis axis","chart","legend"];containerEnter.selectAll("g").data(layers).enter().append("g").attr("class",function(d){return d});var bars=component.barsHorizontal().xScale(xScale).colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var seriesGroup=containerEnter.select(".chart").selectAll(".seriesGroup").data(function(d){return d});seriesGroup.enter().append("g").classed("seriesGroup",true).merge(seriesGroup).attr("transform",function(d){return"translate(".concat(xScale(valueMin),",").concat(yScale2(d.key),")")}).call(bars);seriesGroup.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);containerEnter.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);var yAxis=d3__namespace.axisLeft(yScale2);containerEnter.select(".yAxis").call(yAxis);containerEnter.selectAll(".axis").attr("opacity",showAxis?1:0);var legend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity);containerEnter.select(".legend").attr("transform","translate(".concat(chartW+legendPad,",0)")).call(legend)})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartBubbleChart(){var classed="bubbleChart";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=palette.categorical(1);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var showAxis=true;var yAxisLabel=null;var minRadius=3;var maxRadius=20;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);var _dataTransform$summar=dataTransform(data).summary(),rowKeys=_dataTransform$summar.rowKeys,_dataTransform$summar2=_dataTransform$summar.coordinatesExtent,xExtent=_dataTransform$summar2.x,yExtent=_dataTransform$summar2.y,valueExtent=_dataTransform$summar.valueExtent;var xScale=d3__namespace.scaleLinear().domain(xExtent).range([0,chartW]).nice();var yScale=d3__namespace.scaleLinear().domain(yExtent).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain(rowKeys).range(colors);var sizeScale=d3__namespace.scaleLinear().domain(valueExtent).range([minRadius,maxRadius]);svg.classed("d3ez",true).attr("width",width).attr("height",height);var container=svg.selectAll(".container").data([data]);container.exit().remove();var containerEnter=container.enter().append("g").classed("container",true).classed(classed,true).merge(container).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).attr("width",chartW).attr("height",chartH);var layers=["xAxis axis","yAxis axis","chart","legend","zoomArea","clipArea"];containerEnter.selectAll("g").data(layers).enter().append("g").attr("class",function(d){return d});var bubbles=component.bubbles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition);var seriesGroup=containerEnter.select(".chart").selectAll(".seriesGroup").data(function(d){return d});seriesGroup.enter().append("g").attr("class","seriesGroup").attr("clip-path","url(#plotAreaClip)").merge(seriesGroup).call(bubbles);seriesGroup.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);containerEnter.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");var yAxis=d3__namespace.axisLeft(yScale);containerEnter.select(".yAxis").call(yAxis);containerEnter.selectAll(".axis").attr("opacity",showAxis?1:0);var legend=component.legend().sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity);containerEnter.select(".legend").attr("transform","translate(".concat(chartW+legendPad,",0)")).call(legend);var clipPath=containerEnter.select(".clipArea").selectAll("defs").data([0]);clipPath.enter().append("defs").append("clipPath").attr("id","plotAreaClip").append("rect").attr("width",chartW).attr("height",chartH).merge(clipPath).select("clipPath").select("rect").attr("width",chartW).attr("height",chartH);var zoom=d3__namespace.zoom().extent([[0,0],[chartW,chartH]]).scaleExtent([1,8]).translateExtent([[0,0],[chartW,chartH]]).on("zoom",zoomed);function zoomed(e){var xScaleZoomed=e.transform.rescaleX(xScale);var yScaleZoomed=e.transform.rescaleY(yScale);xAxis.scale(xScaleZoomed);containerEnter.select(".xAxis").call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");yAxis.scale(yScaleZoomed);containerEnter.select(".yAxis").call(yAxis);bubbles.xScale(xScaleZoomed).yScale(yScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});containerEnter.select(".chart").selectAll(".seriesGroup").call(bubbles)}var zoomArea=containerEnter.select(".zoomArea").selectAll("rect").data([0]);zoomArea.enter().append("rect").attr("fill","none").attr("pointer-events","all").merge(zoomArea).call(zoom).attr("width",chartW).attr("height",chartH)})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartCandlestickChart(){var classed="candlestickChart";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=["green","red"];var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var showAxis=true;var yAxisLabel=null;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);data=data[0];data.values.forEach(function(d,i){data.values[i].date=Date.parse(d.date)});var maxDate=d3__namespace.max(data.values,function(d){return d.date});var minDate=d3__namespace.min(data.values,function(d){return d.date});var ONE_DAY_IN_MILLISECONDS=864e5;var dateDomain=[new Date(minDate-ONE_DAY_IN_MILLISECONDS),new Date(maxDate+ONE_DAY_IN_MILLISECONDS)];var yDomain=[d3__namespace.min(data.values,function(d){return d.low}),d3__namespace.max(data.values,function(d){return d.high})];var xScale=d3__namespace.scaleTime().domain(dateDomain).range([0,chartW]);var yScale=d3__namespace.scaleLinear().domain(yDomain).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain([true,false]).range(colors);svg.classed("d3ez",true).attr("width",width).attr("height",height);var container=svg.selectAll(".container").data([data]);container.exit().remove();var containerEnter=container.enter().append("g").classed("container",true).classed(classed,true).merge(container).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).attr("width",chartW).attr("height",chartH);var layers=["zoomArea","xAxis axis","yAxis axis","chart","legend"];containerEnter.selectAll("g").data(layers).enter().append("g").attr("class",function(d){return d});var candleSticks=component.candleSticks().xScale(xScale).yScale(yScale).colorScale(colorScale).dispatch(dispatch).opacity(opacity).transition(transition);var seriesGroup=containerEnter.select(".chart").selectAll(".seriesGroup").data(function(d){return[d]});seriesGroup.enter().append("g").attr("class","seriesGroup").merge(seriesGroup).call(candleSticks);seriesGroup.exit().remove();var xAxis=d3__namespace.axisBottom(xScale).tickFormat(d3__namespace.timeFormat("%d-%b-%y"));containerEnter.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");var yAxis=d3__namespace.axisLeft(yScale);containerEnter.select(".yAxis").call(yAxis);containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").transition().text(function(d){return d});containerEnter.selectAll(".axis").attr("opacity",showAxis?1:0);var legend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity);containerEnter.select(".legend").attr("transform","translate(".concat(chartW+legendPad,",0)")).call(legend);var brush=d3__namespace.brushX().extent([[0,0],[chartW,chartH]]).on("brush start",brushStart).on("brush end",brushEnd);containerEnter.select(".zoomArea").call(brush);function brushStart(e){console.log(e)}function brushEnd(e){console.log(e)}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartDonutChart(){var classed="donutChart";var width=700;var height=400;var margin={top:20,right:20,bottom:20,left:20};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var startAngle=0;var endAngle=360;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);var radius=Math.min(chartW,chartH)/data.length/2;var innerRadius=radius/2;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueExtent=_dataTransform$summar.valueExtent;var xScale=d3__namespace.scaleBand().domain(columnKeys).range([innerRadius,radius]);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([startAngle,endAngle]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;i0?0:valueMin;var valueExtent=[valueMin,valueMax];var xScale=d3__namespace.scalePoint().domain(columnKeys).range([0,chartW]);{data.forEach(function(d,i){d.values.forEach(function(b,j){data[i].values[j].key=new Date(b.key)})});var dateExtent=d3__namespace.extent(data[0].values,function(d){return d.key});xScale=d3__namespace.scaleTime().domain(dateExtent).range([0,chartW])}var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain(rowKeys).range(colors);svg.classed("d3ez",true).attr("width",width).attr("height",height);var container=svg.selectAll(".container").data([data]);container.exit().remove();var containerEnter=container.enter().append("g").classed("container",true).classed(classed,true).merge(container).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).attr("width",chartW).attr("height",chartH);var layers=["xAxis axis","yAxis axis","chart","legend","zoomArea","clipArea"];containerEnter.selectAll("g").data(layers).enter().append("g").attr("class",function(d){return d});var lineChart=component.lineChart().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var scatterPlot=component.scatterPlot().colorScale(colorScale).yScale(yScale).xScale(xScale).opacity(opacity).dispatch(dispatch).transition(transition);var seriesGroup=containerEnter.select(".chart").selectAll(".seriesGroup").data(function(d){return d});seriesGroup.enter().append("g").attr("class","seriesGroup").attr("clip-path","url(#plotAreaClip)").merge(seriesGroup).call(lineChart).call(scatterPlot);seriesGroup.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);containerEnter.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);var yAxis=d3__namespace.axisLeft(yScale);containerEnter.select(".yAxis").call(yAxis);containerEnter.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").text(function(d){return d});containerEnter.selectAll(".axis").attr("opacity",showAxis?1:0);var legend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity);containerEnter.select(".legend").attr("transform","translate(".concat(chartW+legendPad,",0)")).call(legend);var clipPath=containerEnter.select(".clipArea").selectAll("defs").data([0]);clipPath.enter().append("defs").append("clipPath").attr("id","plotAreaClip").append("rect").attr("width",chartW).attr("height",chartH).merge(clipPath).select("clipPath").select("rect").attr("width",chartW).attr("height",chartH);var zoom=d3__namespace.zoom().extent([[0,0],[chartW,chartH]]).scaleExtent([1,8]).translateExtent([[0,0],[chartW,chartH]]).on("zoom",zoomed);function zoomed(e){var xScaleZoomed=e.transform.rescaleX(xScale);xAxis.scale(xScaleZoomed);containerEnter.select(".xAxis").call(xAxis);lineChart.xScale(xScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});scatterPlot.xScale(xScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});containerEnter.select(".chart").selectAll(".seriesGroup").call(lineChart).call(scatterPlot)}var zoomArea=containerEnter.select(".zoomArea").selectAll(".rect").data([0]);zoomArea.enter().append("rect").classed("zoomArea",true).attr("fill","none").attr("pointer-events","all").merge(zoomArea).call(zoom).attr("width",chartW).attr("height",chartH)})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartPolarAreaChart(){var classed="polarAreaChart";var width=700;var height=400;var margin={top:20,right:20,bottom:20,left:20};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var startAngle=0;var endAngle=360;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=120;var legendPad=15;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-margin.bottom,100);var legendH=Math.max(chartH/2,100);var radius=Math.min(chartW,chartH)/data.length/2;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueMax=_dataTransform$summar.valueMax;var valueExtent=[0,valueMax];var xScale=d3__namespace.scaleBand().domain(columnKeys).rangeRound([startAngle,endAngle]);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([0,radius]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;iarr.length)len=arr.length;for(var i=0,arr2=new Array(len);id.open};var line=d3__namespace.line().x(function(d){return d.x}).y(function(d){return d.y});var highLowLines=function highLowLines(bars){var paths=bars.selectAll(".high-low-line").data(function(d){return[d]});paths.enter().append("path").classed("high-low-line",true).merge(paths).transition().ease(transition.ease).duration(transition.duration).attr("d",function(d){return line([{x:xScale(d.date),y:yScale(d.high)},{x:xScale(d.date),y:yScale(d.low)}])});return bars};var openCloseBars=function openCloseBars(candle){var rect=candle.selectAll(".open-close-bar").data(function(d){return[d]});rect.enter().append("rect").classed("open-close-bar",true).attr("x",function(d){return xScale(d.date)-candleWidth/2}).attr("y",function(d){var isUp=isUpDay(d);var base=isUp?yScale(d.close):yScale(d.open);var difference=isUp?yScale(d.open)-yScale(d.close):0;return base+difference}).attr("width",candleWidth).attr("rx",cornerRadius).attr("ry",cornerRadius).merge(rect).transition().ease(transition.ease).duration(transition.duration).attr("x",function(d){return xScale(d.date)-candleWidth/2}).attr("y",function(d){return isUpDay(d)?yScale(d.close):yScale(d.open)}).attr("width",candleWidth).attr("height",function(d){return isUpDay(d)?yScale(d.open)-yScale(d.close):yScale(d.close)-yScale(d.open)});return candle};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var candles=componentGroup.selectAll(".candle").data(function(d){return d.values});candles.enter().append("g").classed("candle",true).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(candles).attr("fill",function(d){return colorScale(isUpDay(d))}).attr("stroke",function(d){return colorScale(isUpDay(d))}).attr("fill-opacity",opacity).call(highLowLines).call(openCloseBars);candles.exit().remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.candleWidth=function(_v){if(!arguments.length)return candleWidth;candleWidth=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentCircularAxis(){var classed="circularAxis";var radialScale;var ringScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var showAxis=false;function my(selection){selection.each(function(){var _ringScale$range=ringScale.range(),_ringScale$range2=_slicedToArray(_ringScale$range,2);_ringScale$range2[0];var radius=_ringScale$range2[1];var axisSelect=d3__namespace.select(this).selectAll("g.".concat(classed)).data([0]);var axis=axisSelect.enter().append("g").classed(classed,true).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(axisSelect);var outerCircle=axis.selectAll(".outerCircle").data([radius]);outerCircle.enter().append("circle").classed("outerCircle",true).merge(outerCircle).transition().ease(transition.ease).duration(transition.duration).attr("r",function(d){return d}).style("fill","none").attr("stroke-width",2).attr("stroke","currentColor");var tickData=function tickData(){var tickArray,tickPadding;if(typeof ringScale.ticks==="function"){tickArray=ringScale.ticks();tickPadding=0}else{tickArray=ringScale.domain();tickPadding=ringScale.bandwidth()/2}return tickArray.map(function(d){return{value:d,radius:ringScale(d),padding:tickPadding}})};var tickCirclesGroupSelect=axis.selectAll(".tickCircles").data(function(){return[tickData()]});var tickCirclesGroup=tickCirclesGroupSelect.enter().append("g").classed("tickCircles",true).merge(tickCirclesGroupSelect);var tickCircles=tickCirclesGroup.selectAll("circle").data(function(d){return d});tickCircles.enter().append("circle").style("fill","none").attr("stroke","currentColor").attr("stroke-width",1).attr("stroke-dasharray","1,1").attr("opacity",.5).merge(tickCircles).transition().ease(transition.ease).duration(transition.duration).attr("r",function(d){return d.radius+d.padding});tickCircles.exit().remove();var spokeData=function spokeData(){var spokeArray=[];var spokeCount=0;if(typeof radialScale.ticks==="function"){var min=d3__namespace.min(radialScale.domain());var max=d3__namespace.max(radialScale.domain());spokeCount=radialScale.ticks().length;var spokeIncrement=(max-min)/spokeCount;for(var i=0;i<=spokeCount;i++){spokeArray[i]=(spokeIncrement*i).toFixed(0)}}else{spokeArray=radialScale.domain();spokeCount=spokeArray.length;spokeArray.push("")}var spokeScale=d3__namespace.scaleLinear().domain([0,spokeCount]).range(radialScale.range());return spokeArray.map(function(d,i){return{value:d,rotate:spokeScale(i)}})};var spokeGroup=axis.selectAll(".spokes").data(function(){return[spokeData()]});var spokeGroupEnter=spokeGroup.enter().append("g").classed("spokes",true).merge(spokeGroup);var spokes=spokeGroupEnter.selectAll("line").data(function(d){return d});spokes.enter().append("line").attr("stroke","currentColor").attr("stroke-width",1).attr("stroke-dasharray","2,2").attr("opacity",.5).merge(spokes).attr("transform",function(d){return"rotate(".concat(d.rotate,")")}).attr("y2",-radius);spokes.exit().remove();if(showAxis){var verticalAxis=d3__namespace.axisLeft(ringScale);axis.call(verticalAxis)}})}my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.ringScale=function(_v){if(!arguments.length)return ringScale;ringScale=_v;return my};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return my};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentCircularRingLabels(){var classed="circularRingLabels";var radialScale;var transition={ease:d3__namespace.easeLinear,duration:0};var capitalizeLabels=false;var textAnchor="middle";function my(selection){selection.each(function(){var pathGen=function pathGen(d){var r=radialScale(d);var arc=d3__namespace.arc().outerRadius(r).innerRadius(r);var pathConf={startAngle:0*Math.PI/180,endAngle:360*Math.PI/180};var pathStr=arc(pathConf).split(/[A-Z]/);return"M"+pathStr[1]+"A"+pathStr[2]};var element=d3__namespace.select(this);var uId="uid-"+Math.floor(1e3+Math.random()*9e3);var labels=element.selectAll("g.".concat(classed)).data([0]);var labelsEnter=labels.enter().append("g").classed(classed,true).merge(labels);var radData=radialScale.domain();var def=labelsEnter.selectAll("def").data(radData);def.enter().append("def").append("path").attr("id",function(d,i){return"".concat(uId,"-path-").concat(i)}).attr("d",function(d){return pathGen(d)}).merge(def).transition().ease(transition.ease).duration(transition.duration).select("path").attr("d",function(d){return pathGen(d)}).attr("id",function(d,i){return"".concat(uId,"-path-").concat(i)});var text=labelsEnter.selectAll("text").data(radData);text.enter().append("text").style("text-anchor","start").attr("dy",-2).attr("dx",5).append("textPath").attr("xlink:href",function(d,i){return"#".concat(uId,"-path-").concat(i)}).attr("startOffset","0%").attr("font-size",function(d){var fontPx=radialScale.bandwidth()*.5;return"".concat(fontPx,"px")}).text(function(d){return d}).merge(text).transition().ease(transition.ease).duration(transition.duration).select("textPath").attr("font-size",function(d){var fontPx=radialScale.bandwidth()*.5;return"".concat(fontPx,"px")}).attr("xlink:href",function(d,i){return"#".concat(uId,"-path-").concat(i)});text.exit().remove()})}my.capitalizeLabels=function(_v){if(!arguments.length)return capitalizeLabels;capitalizeLabels=_v;return this};my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.textAnchor=function(_v){if(!arguments.length)return textAnchor;textAnchor=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentCircularSectorLabels(){var classed="circularSectorLabels";var radialScale;var ringScale;var transition={ease:d3__namespace.easeLinear,duration:0};var capitalizeLabels=false;var textAnchor="middle";function my(selection){selection.each(function(){textAnchor="start";var _ringScale$range=ringScale.range(),_ringScale$range2=_slicedToArray(_ringScale$range,2);_ringScale$range2[0];var radius=_ringScale$range2[1];var tickData=function tickData(){var tickCount=0;var tickArray=[];if(typeof radialScale.ticks==="function"){var min=d3__namespace.min(radialScale.domain());var max=d3__namespace.max(radialScale.domain());tickCount=radialScale.ticks().length;var tickIncrement=(max-min)/tickCount;for(var i=0;i<=tickCount;i++){tickArray[i]=(tickIncrement*i).toFixed(0)}}else{tickArray=radialScale.domain();tickCount=tickArray.length}var tickScale=d3__namespace.scaleLinear().domain([0,tickCount]).range(radialScale.range());return tickArray.map(function(d,i){return{value:d,offset:tickScale(i)/360*100}})};var element=d3__namespace.select(this);var uId="uid-"+Math.floor(1e3+Math.random()*9e3);var labels=element.selectAll("g.".concat(classed)).data(function(){return[tickData()]});var labelsEnter=labels.enter().append("g").classed(classed,true).attr("transform",function(){var offset=typeof radialScale.ticks!=="function"?radialScale.bandwidth()/2:0;return"rotate(".concat(offset,")")}).merge(labels);var def=labelsEnter.selectAll("def").data([radius]);def.enter().append("def").append("path").attr("id",function(){return"".concat(uId,"-path")}).attr("d",function(d){var r=d*1.04;return"m0 "+-r+" a"+r+" "+r+" 0 1,1 -0.01 0"}).merge(def).transition().ease(transition.ease).duration(transition.duration).select("path").attr("id",function(){return"".concat(uId,"-path")}).attr("d",function(d){var r=d*1.04;return"m0 "+-r+" a"+r+" "+r+" 0 1,1 -0.01 0"});def.exit().remove();var text=labelsEnter.selectAll(".label").data(function(d){return d});text.enter().append("text").classed("label",true).attr("font-size","0.9em").attr("color","currentColor").style("text-anchor",textAnchor).append("textPath").attr("xlink:href",function(){return"#".concat(uId,"-path")}).text(function(d){var text=d.value;return capitalizeLabels?text.toUpperCase():text}).attr("startOffset",function(d){return d.offset+"%"}).attr("fill","currentColor").merge(text).transition().ease(transition.ease).duration(transition.duration).select("textPath").text(function(d){var text=d.value;return capitalizeLabels?text.toUpperCase():text}).attr("xlink:href",function(){return"#".concat(uId,"-path")}).attr("startOffset",function(d){return d.offset+"%"}).attr("id",function(d){return d.value});text.exit().remove()})}my.radialScale=function(_v){if(!arguments.length)return radialScale;radialScale=_v;return my};my.ringScale=function(_v){if(!arguments.length)return ringScale;ringScale=_v;return this};my.capitalizeLabels=function(_v){if(!arguments.length)return capitalizeLabels;capitalizeLabels=_v;return this};my.textAnchor=function(_v){if(!arguments.length)return textAnchor;textAnchor=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentDonut(){var classed="donut";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),innerRadius=_xScale$range2[0],radius=_xScale$range2[1];var _yScale$range=yScale.range(),_yScale$range2=_slicedToArray(_yScale$range,2),startAngle=_yScale$range2[0],endAngle=_yScale$range2[1];var pie=d3__namespace.pie().startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).value(function(d){return d.value}).sort(null).padAngle(.015);var arc=d3__namespace.arc().innerRadius(innerRadius).outerRadius(radius).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(d.startAngle,d.endAngle);return function(t){d.endAngle=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var slices=componentGroup.selectAll("path.slice").data(function(d){return pie(d.values)});slices.enter().append("path").attr("class","slice").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(slices).transition().duration(transition.duration).ease(transition.ease).attr("d",arc).attrTween("d",arcTween).attr("fill",function(d){return colorScale(d.data.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.data.key)}).attr("stroke-width","1px");slices.exit().remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentDonutLabels(){var classed="donutLabels";var xScale;var yScale;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),innerRadius=_xScale$range2[0],radius=_xScale$range2[1];var _yScale$range=yScale.range(),_yScale$range2=_slicedToArray(_yScale$range,2),startAngle=_yScale$range2[0],endAngle=_yScale$range2[1];var pie=d3__namespace.pie().startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).value(function(d){return d.value}).sort(null).padAngle(.015);var arc=d3__namespace.arc().innerRadius(innerRadius).outerRadius(radius);var outerArc=d3__namespace.arc().innerRadius(radius*.9).outerRadius(radius*.9);var midAngle=function midAngle(d){return d.startAngle+(d.endAngle-d.startAngle)/2};var seriesGroup=d3__namespace.select(this);var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var labelsGroup=componentGroup.selectAll("g.labels").data(function(d){return[d]});var labelsGroupEnter=labelsGroup.enter().append("g").attr("class","labels").merge(labelsGroup);var labels=labelsGroupEnter.selectAll("text.label").data(function(d){return pie(d.values)});labels.enter().append("text").attr("class","label").attr("font-size","0.9em").attr("dy",".35em").attr("fill","currentColor").merge(labels).transition().duration(transition.duration).text(function(d){return d.data.key}).attrTween("transform",function(d){this._current=this._current||d;var interpolate=d3__namespace.interpolate(this._current,d);this._current=interpolate(0);return function(t){var d2=interpolate(t);var pos=outerArc.centroid(d2);pos[0]=radius*(midAngle(d2)0){acc[1]+=value}return acc},[0,0]),_row$values$reduce2=_slicedToArray(_row$values$reduce,2),negativeSum=_row$values$reduce2[0],positiveSum=_row$values$reduce2[1];lowestNegativeSum=Math.min(lowestNegativeSum,negativeSum);highestPositiveSum=Math.max(highestPositiveSum,positiveSum)})}var finalLowestNegativeSum=lowestNegativeSum===Infinity?0:lowestNegativeSum;var finalHighestPositiveSum=highestPositiveSum===-Infinity?0:highestPositiveSum;return[finalLowestNegativeSum,finalHighestPositiveSum]}();var coordinatesMin=function(){var ret={};if(dataType===SINGLE_SERIES){coordinateKeys.forEach(function(key){ret[key]=Math.min.apply(Math,_toConsumableArray(data.values.map(function(d){return+d[key]})))});return ret}else{data.forEach(function(item){item.values.forEach(function(value){coordinateKeys.forEach(function(key){ret[key]=key in ret?Math.min(ret[key],+value[key]):+value[key]})})})}return ret}();var coordinatesMax=function(){var ret={};if(dataType===SINGLE_SERIES){coordinateKeys.forEach(function(key){ret[key]=Math.max.apply(Math,_toConsumableArray(data.values.map(function(d){return+d[key]})))});return ret}else{data.forEach(function(item){item.values.forEach(function(value){coordinateKeys.forEach(function(key){ret[key]=key in ret?Math.max(ret[key],+value[key]):+value[key]})})})}return ret}();var coordinatesExtent=function(){var ret={};coordinateKeys.forEach(function(key){ret[key]=[coordinatesMin[key],coordinatesMax[key]]});return ret}();var decimalPlaces=function decimalPlaces(num){var match=(""+num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);if(!match){return 0}return Math.max(0,(match[1]?match[1].length:0)-(match[2]?+match[2]:0))};var maxDecimalPlace=function(){var ret=0;if(dataType===MULTI_SERIES){data.forEach(function(item){item.values.forEach(function(value){ret=Math.max(ret,decimalPlaces(value.value))})})}return ret>20?20:ret}();var thresholds=function(){var distance=valueMax-valueMin;var bands=[.25,.5,.75,1];return bands.map(function(v){return Number((valueMin+v*distance).toFixed(maxDecimalPlace))})}();var summary=function summary(){return{dataType:dataType,rowKey:rowKey,rowTotal:rowTotal,rowKeys:rowKeys,rowTotals:rowTotals,rowTotalsMin:rowTotalsMin,rowTotalsMax:rowTotalsMax,rowValuesKeys:rowValuesKeys,columnKeys:columnKeys,columnTotals:columnTotals,columnTotalsMin:columnTotalsMin,columnTotalsMax:columnTotalsMax,valueMin:valueMin,valueMax:valueMax,valueExtent:valueExtent,valueExtentStacked:valueExtentStacked,coordinatesMin:coordinatesMin,coordinatesMax:coordinatesMax,coordinatesExtent:coordinatesExtent,maxDecimalPlace:maxDecimalPlace,thresholds:thresholds}};var rotate=function rotate(){var columnKeys=data.map(function(d){return d.key});var rowKeys=data[0].values.map(function(d){return d.key});var rotated=rowKeys.map(function(rowKey,rowIndex){var values=columnKeys.map(function(columnKey,columnIndex){var values=Object.assign({},data[columnIndex].values[rowIndex]);values.key=columnKey;return values});return{key:rowKey,values:values}});return rotated};return{summary:summary,rotate:rotate}}function componentHtmlTable(){var classed="htmlTable";var width=800;var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(data){var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys;var table=d3__namespace.select(this).selectAll("table").data(function(d){return[d]});var tableEnter=table.enter().append("table").classed("d3ez",true).classed(classed,true).attr("width",width).merge(table);tableEnter.append("thead");tableEnter.append("tfoot");tableEnter.append("tbody");var head=tableEnter.select("thead").selectAll("tr").data([columnKeys]);head.exit().remove();var headEnter=head.enter().append("tr").merge(head);var th=headEnter.selectAll("th").data(function(d){d.unshift("");return d});th.exit().remove();th.enter().append("th").merge(th).html(function(d){return d});var body=tableEnter.select("tbody").selectAll("tr").data(data);body.exit().remove();var bodyEnter=body.enter().append("tr").attr("class",function(d){return d.key}).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)}).merge(body);var td=bodyEnter.selectAll("td").data(function(d){d.values.unshift({key:d.key,value:d.key});return d.values});td.exit().remove();td.enter().append("td").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(td).html(function(d){return d.value})})}my.classed=function(_v){if(!arguments.length)return classed;classed=_v;return this};my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentLegendSize(){var width=100;var height=150;var sizeScale;var itemCount=4;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var data=function(){var domainMin=parseFloat(d3__namespace.min(sizeScale.domain()));var domainMax=parseFloat(d3__namespace.max(sizeScale.domain()));var increment=(domainMax-domainMin)/itemCount;var ranges=Array(itemCount).fill().map(function(v,i){var rangeStart=domainMin+increment*i;var rangeEnd=domainMin+increment*(i+1);return[rangeStart,rangeEnd]});var yStep=height/(itemCount*2);var yDomain=[0,itemCount-1];var yRange=[yStep,height-yStep];var yScale=d3__namespace.scaleLinear().domain(yDomain).range(yRange);return ranges.map(function(v,i){return{x:sizeScale(domainMax),y:yScale(i),r:sizeScale(ranges[i][0]),text:v[0].toFixed(0)+" — "+v[1].toFixed(0)}})}();var legendContainer=selection.selectAll(".legendContainer").data([data]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var items=legendContainerEnter.selectAll(".legendItem").data(function(d){return d});var itemsEnter=items.enter().append("g").classed("legendItem",true).attr("transform",function(d){return"translate(0,".concat(d.y,")")});items.exit().remove();itemsEnter.append("circle").attr("r",function(d){return d.r}).attr("cx",function(d){return d.x}).attr("fill","#cad4e7").attr("stroke","#cad4e7").attr("stroke-width",1).attr("fill-opacity",opacity);itemsEnter.append("text").attr("font-size","0.9em").attr("fill","currentColor").attr("dominant-baseline","middle").attr("x",function(d){return d.x*2+5}).text(function(d){return d.text});var itemsTrans=items.transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){return"translate(0,".concat(d.y,")")});itemsTrans.select("text").text(function(d){return d.text});itemsTrans.select("circle").attr("fill-opacity",opacity)}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.itemCount=function(_v){if(!arguments.length)return itemCount;itemCount=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegendCategorical(){var width=100;var height=150;var colorScale;var itemCount;var itemType="rect";var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var cornerRadius=2;function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var data=function(){var domain=colorScale.domain();itemCount=domain.length;var itemHeight=height/itemCount/2;var itemWidth=20;return domain.map(function(v,i){return{y:10+itemHeight*2*i,width:itemWidth,height:itemHeight,color:colorScale(v),text:v}})}();var legendContainer=selection.selectAll(".legendContainer").data([data]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var items=legendContainerEnter.selectAll(".legendItem").data(function(d){return d});var itemsEnter=items.enter().append("g").classed("legendItem",true).attr("transform",function(d){return"translate(0,".concat(d.y,")")});items.exit().remove();switch(itemType){case"line":itemsEnter.append("line").attr("x1",0).attr("y1",function(d){return d.height/2}).attr("x2",function(d){return d.width}).attr("y2",function(d){return d.height/2}).attr("stroke",function(d){return d.color}).attr("stroke-width",2);items.transition().ease(transition.ease).duration(transition.duration).select("line").attr("x1",0).attr("y1",function(d){return d.height/2}).attr("x2",function(d){return d.width}).attr("y2",function(d){return d.height/2}).attr("stroke",function(d){return d.color}).attr("stroke-width",2);break;case"rect":default:itemsEnter.append("rect").attr("rx",cornerRadius).attr("ry",cornerRadius).attr("width",function(d){return d.width}).attr("height",function(d){return d.height}).style("fill",function(d){return d.color}).attr("fill-opacity",opacity).attr("stroke",function(d){return d.color}).attr("stroke-width",1);items.transition().ease(transition.ease).duration(transition.duration).select("rect").attr("width",function(d){return d.width}).attr("height",function(d){return d.height}).style("fill",function(d){return d.color}).attr("fill-opacity",opacity).attr("stroke",function(d){return d.color}).attr("stroke-width",1);break}itemsEnter.append("text").attr("font-size","0.9em").text(function(d){return d.text}).attr("dominant-baseline","middle").attr("x",40).attr("y",function(d){return d.height/2}).attr("fill","currentColor");items.transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){return"translate(0,".concat(d.y,")")}).select("text").text(function(d){return d.text}).attr("y",function(d){return d.height/2})}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.itemType=function(_v){if(!arguments.length)return itemType;itemType=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegendThreshold(){var width=100;var height=150;var thresholdScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");var domainMin=d3__namespace.min(thresholdScale.domain());var domainMax=d3__namespace.max(thresholdScale.domain());var domainMargin=(domainMax-domainMin)*.1;var x=d3__namespace.scaleLinear().domain([domainMin-domainMargin,domainMax+domainMargin]).range([0,height]);var legendContainer=selection.selectAll(".legendContainer").data([0]);var legendContainerEnter=legendContainer.enter().append("g").classed("legendContainer",true).attr("width",width).attr("height",height).merge(legendContainer);var axis=d3__namespace.axisRight(x).tickSize(30).tickValues(thresholdScale.domain());legendContainerEnter.transition().ease(transition.ease).duration(transition.duration).call(axis).selectAll(".domain").attr("opacity",0);var colors=legendContainerEnter.selectAll("rect").data(thresholdScale.range().map(function(color){var d=thresholdScale.invertExtent(color);if(typeof d[0]==="undefined")d[0]=x.domain()[0];if(typeof d[1]==="undefined")d[1]=x.domain()[1];return d}));colors.enter().append("rect").merge(colors).transition().ease(transition.ease).duration(transition.duration).attr("width",20).attr("y",function(d){return x(d[0])}).attr("height",function(d){return x(d[1])-x(d[0])}).style("fill",function(d){return thresholdScale(d[0])}).attr("fill-opacity",opacity).attr("stroke",function(d){return thresholdScale(d[0])}).attr("stroke-width",1)}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.thresholdScale=function(_v){if(!arguments.length)return thresholdScale;thresholdScale=_v;return my};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLegend(){var width=100;var height=150;var margin={top:35,right:10,bottom:10,left:10};var sizeScale;var colorScale;var title="Key";var legend;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var itemType="rect";function my(selection){height=height?height:this.attr("height");width=width?width:this.attr("width");if(typeof sizeScale!=="undefined"){legend=componentLegendSize().sizeScale(sizeScale).itemCount(4)}if(typeof colorScale!=="undefined"){if(scaleType(colorScale)==="threshold"){legend=componentLegendThreshold().thresholdScale(colorScale)}else{legend=componentLegendCategorical().colorScale(colorScale).itemType(itemType)}}legend.opacity(opacity).transition(transition);var legendBox=selection.selectAll(".legendBox").data([0]);var legendBoxEnter=legendBox.enter().append("g").attr("class","legendBox");legendBoxEnter.append("rect").classed("legendBorder",true).attr("width",width).attr("height",height).attr("fill-opacity",0).attr("stroke-width",1).attr("stroke","currentcolor");legendBox.transition().ease(transition.ease).duration(transition.duration).selectAll(".legendBorder").attr("width",width).attr("height",height);legendBoxEnter.append("g").classed("legendTitle",true).attr("transform","translate(10,10)").append("text").style("font-weight","bold").attr("dominant-baseline","hanging").attr("fill","currentColor").text(title);legend.width(width-(margin.left+margin.right)).height(height-(margin.top+margin.bottom));legendBoxEnter.append("g").classed("legendBox",true).attr("transform","translate(".concat(margin.left,",").concat(margin.top,")")).call(legend);legendBox.selectAll(".legendBox").call(legend)}function scaleType(scale){var s=scale.copy();if(s.domain([1,2]).range([1,2])(1.5)===1){return"ordinal"}else if(typeof s.invert!=="function"){return"threshold"}else if(s.domain([1,2]).range([1,2]).invert(1.5)===1.5){return"linear"}else if(s.domain([1,2]).range([1,2]).invert(1.5)instanceof Date){return"time"}else{return"not supported"}}my.width=function(_v){if(!arguments.length)return width;width=_v;return my};my.height=function(_v){if(!arguments.length)return height;height=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.title=function(_v){if(!arguments.length)return title;title=_v;return my};my.itemType=function(_v){if(!arguments.length)return itemType;itemType=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};return my}function componentLineChart(){var classed="lineChart";var xScale;var yScale;var colorScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(){var line=d3__namespace.line().curve(d3__namespace.curveCardinal).x(function(d){return xScale(d.key)}).y(function(d){return yScale(d.value)});var pathTween=function pathTween(d){var i=d3__namespace.interpolate(1,d.length+1);return function(t){return line(d.slice(0,i(t)))}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var path=componentGroup.selectAll(".line").data(function(d){return[d]});path.enter().append("path").attr("class","line").attr("stroke-width",1.5).attr("fill","none").attr("d",function(d){return line(d.values)}).merge(path).transition().duration(transition.duration).attrTween("d",function(d){return pathTween(d.values)}).attr("stroke",function(d){return colorScale(d.key)}).attr("opacity",opacity);path.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentNumberCard(){var classed="numberCard";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(){var cellHeight=yScale.bandwidth();var cellWidth=xScale.bandwidth();var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var numbers=componentGroup.selectAll(".number").data(function(d){return d.values});numbers.enter().append("text").attr("class","number").attr("text-anchor","middle").attr("dominant-baseline","central").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(numbers).transition().ease(transition.ease).duration(transition.duration).text(function(d){return d["value"]}).attr("fill",function(d){return colorScale(d.value)}).attr("x",function(d){return xScale(d.key)+cellWidth/2}).attr("y",cellHeight/2);numbers.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentPolarArea(){var classed="polarArea";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(){var _xScale$range=xScale.range(),_xScale$range2=_slicedToArray(_xScale$range,2),startAngle=_xScale$range2[0],endAngle=_xScale$range2[1];var pie=d3__namespace.pie().value(1).sort(null).startAngle(startAngle*Math.PI/180).endAngle(endAngle*Math.PI/180).padAngle(0);var arc=d3__namespace.arc().outerRadius(function(d){return yScale(d.data.value)}).innerRadius(0).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(0,d.data.value);return function(t){d.data.value=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var segments=componentGroup.selectAll(".segment").data(function(d){return pie(d.values)});segments.enter().append("path").classed("segment",true).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d.data)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d.data)}).merge(segments).transition().ease(transition.ease).duration(transition.duration).attr("d",arc).attrTween("d",arcTween).style("fill",function(d){return colorScale(d.data.key)}).attr("fill-opacity",opacity).attr("stroke",function(d){return colorScale(d.data.key)}).attr("stroke-width","1px");segments.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentProportionalAreaCircles(){var classed="proportionalAreaCircles";var xScale;var yScale;var colorScale;var sizeScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(){var cellHeight=yScale.bandwidth();var cellWidth=xScale.bandwidth();var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var spot=componentLabeledNode().radius(function(d){return sizeScale(d.value)}).color(function(d){return colorScale(d.value)}).label(function(d){return d.value}).display("none").opacity(opacity).stroke(1,"currentColor").dispatch(dispatch).transition(transition);var spots=componentGroup.selectAll(".punchSpot").data(function(d){return d.values});spots.enter().append("g").classed("punchSpot",true).on("mouseover",function(e,d){d3__namespace.select(this).select("text").style("display","block");dispatch.call("customValueMouseOver",this,e,d)}).on("mouseout",function(){d3__namespace.select(this).select("text").style("display","none")}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).attr("transform",function(d){var x=cellWidth/2+xScale(d.key);var y=cellHeight/2;return"translate(".concat(x,",").concat(y,")")}).merge(spots).transition().ease(transition.ease).duration(transition.duration).attr("transform",function(d){var x=cellWidth/2+xScale(d.key);var y=cellHeight/2;return"translate(".concat(x,",").concat(y,")")}).call(spot);spots.exit().transition().ease(transition.ease).duration(transition.duration).style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.sizeScale=function(_v){if(!arguments.length)return sizeScale;sizeScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentRadarArea(){var classed="radarArea";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var opacity=1;function my(selection){selection.each(function(data){var angleSlice=Math.PI*2/data.values.length;var radarLine=d3__namespace.lineRadial().radius(function(d){return yScale(d.value)}).angle(function(d,i){return i*angleSlice}).curve(d3__namespace.curveBasis).curve(d3__namespace.curveCardinalClosed);var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var path=componentGroup.selectAll("path").data(function(d){return[d]});path.enter().append("path").on("mouseover",function(){d3__namespace.select(this).transition().duration(200).style("fill-opacity",opacity)}).on("mouseout",function(){d3__namespace.select(this).transition().duration(200).style("fill-opacity",opacity/2)}).merge(path).transition().ease(transition.ease).duration(transition.duration).style("fill-opacity",opacity/2).attr("d",function(d){return radarLine(d.values)});var dots=componentGroup.selectAll("circle").data(function(d){return d.values});dots.enter().append("circle").attr("class","radarCircle").attr("r",4).style("fill-opacity",.8).merge(dots).attr("cx",function(d,i){return yScale(d.value)*Math.cos(angleSlice*i-Math.PI/2)}).attr("cy",function(d,i){return yScale(d.value)*Math.sin(angleSlice*i-Math.PI/2)})})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentRoseChartSector(){var classed="roseChartSector";var xScale;var yScale;var colorScale;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var stacked=false;var opacity=1;var cornerRadius=2;function my(selection){selection.each(function(data){var stacker=function stacker(data){var series=[];var innerRadius=0;var outerRadius=0;data.forEach(function(d,i){outerRadius=innerRadius+d.value;series[i]={key:d.key,value:d.value,innerRadius:yScale(innerRadius),outerRadius:yScale(outerRadius)};innerRadius+=stacked?d.value:0});return series};var startAngle=xScale(data.key);var endAngle=xScale(data.key)+xScale.bandwidth();var arc=d3__namespace.arc().innerRadius(function(d){return d.innerRadius}).outerRadius(function(d){return d.outerRadius}).startAngle(startAngle*(Math.PI/180)).endAngle(endAngle*(Math.PI/180)).cornerRadius(cornerRadius);var arcTween=function arcTween(d){var i=d3__namespace.interpolate(d.innerRadius,d.outerRadius);return function(t){d.outerRadius=i(t);return arc(d)}};var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var arcs=componentGroup.selectAll(".arc").data(function(d){return stacker(d.values)});arcs.enter().append("path").classed("arc",true).attr("stroke-width","1px").on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(arcs).transition().ease(transition.ease).duration(transition.duration).attr("d",arc).attrTween("d",arcTween).attr("fill",function(d){return colorScale(d.key)}).attr("stroke",function(d){return colorScale(d.key)}).attr("fill-opacity",opacity);arcs.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentScatterPlot(){var classed="scatterPlot";var xScale;var yScale;var colorScale;var opacity=1;var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");function my(selection){selection.each(function(){d3__namespace.max(yScale.range());var seriesGroup=d3__namespace.select(this).on("mouseover",function(e,d){dispatch.call("customSeriesMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customSeriesClick",this,e,d)});var componentGroup=seriesGroup.selectAll("g.".concat(classed)).data(function(d){return[d]}).enter().append("g").classed(classed,true).merge(seriesGroup);var dots=componentGroup.attr("fill",function(d){return colorScale(d.key)}).selectAll(".dot").data(function(d){return d.values});dots.enter().append("circle").attr("class","dot").attr("r",3).attr("cx",0).attr("cy",function(d){return yScale(d.value)}).on("mouseover",function(e,d){dispatch.call("customValueMouseOver",this,e,d)}).on("click",function(e,d){dispatch.call("customValueClick",this,e,d)}).merge(dots).transition().ease(transition.ease).duration(transition.duration).attr("cx",function(d){return xScale(d.key)}).attr("cy",function(d){return yScale(d.value)}).attr("opacity",opacity);dots.exit().transition().style("opacity",0).remove()})}my.xScale=function(_v){if(!arguments.length)return xScale;xScale=_v;return my};my.yScale=function(_v){if(!arguments.length)return yScale;yScale=_v;return my};my.colorScale=function(_v){if(!arguments.length)return colorScale;colorScale=_v;return my};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function componentTitle(){var mainText="Title";var subText="Sub Title";var height=40;var width=200;function my(selection){selection.selectAll("#titleGroup").data([0]).enter().append("g").attr("id","titleGroup");var titleGroup=selection.select("#titleGroup");titleGroup.selectAll(".title").data([mainText]).enter().append("text").classed("title",true).text(function(d){return d}).attr("fill","currentColor");var title=titleGroup.select(".title").text(mainText);titleGroup.selectAll(".subTitle").data([subText]).enter().append("text").classed("subTitle",true).text(function(d){return d}).attr("fill","currentColor");var subTitle=titleGroup.select(".subTitle").text(subText);title.style("text-anchor","middle").attr("transform","translate(0, 15)");subTitle.style("text-anchor","middle").attr("transform","translate(0, 30)")}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.mainText=function(_v){if(!arguments.length)return mainText;mainText=_v;return this};my.subText=function(_v){if(!arguments.length)return subText;subText=_v;return this};return my}var component={barsCircular:componentBarsCircular,barsHorizontal:componentBarsHorizontal,barsVertical:componentBarsVertical,barsVerticalStacked:componentBarsVerticalStacked,bubbles:componentBubbles,candleSticks:componentCandleSticks,circularAxis:componentCircularAxis,circularRingLabels:componentCircularRingLabels,circularSectorLabels:componentCircularSectorLabels,donut:componentDonut,donutLabels:componentDonutLabels,heatMapRing:componentHeatMapRing,heatMapRow:componentHeatMapRow,htmlList:componentHtmlList,htmlTable:componentHtmlTable,labeledNode:componentLabeledNode,legend:componentLegend,legendSize:componentLegendSize,legendColor:componentLegendCategorical,legendThreshold:componentLegendThreshold,lineChart:componentLineChart,numberCard:componentNumberCard,polarArea:componentPolarArea,proportionalAreaCircles:componentProportionalAreaCircles,radarArea:componentRadarArea,roseChartSector:componentRoseChartSector,scatterPlot:componentScatterPlot,title:componentTitle};var palette={categorical:function categorical(index){switch(index){case 1:return["#5da5da","#faa43a","#60bd68","#f17cb0","#b2912f","#b276b2","#decf3f","#f15854","#4d4d4d"];case 2:return["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"];case 3:return["#3f51b5","#ff9800","#8bc34a","#9c27b0","#ffeb3b","#03a9f4","#f44336","#009688","#795548"]}},diverging:function diverging(index){switch(index){case 1:return["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"];case 2:return["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"];case 3:return["#0000ff","#8052fe","#b58bfb","#ddc5f7","#fffff0","#ffcfb4","#ff9e7a","#ff6842","#ff0000"]}},sequential:function sequential(origHex,count){var lumStep=.1;var lumMax=lumStep*count/2;var lumMin=0-lumMax;var lumScale=d3__namespace.scaleLinear().domain([1,count]).range([lumMin,lumMax]);var result=[];for(var i=1;i<=count;i++){var lum=lumScale(i);origHex=String(origHex).replace(/[^0-9a-f]/gi,"");if(origHex.length<6){origHex=origHex[0]+origHex[0]+origHex[1]+origHex[1]+origHex[2]+origHex[2]}var newHex="#";var c=void 0;for(var j=0;j<3;j++){c=parseInt(origHex.substr(j*2,2),16);c=Math.round(Math.min(Math.max(0,c+c*lum),255)).toString(16);newHex+=("00"+c).substr(c.length)}result.push(newHex)}return result},lumShift:function lumShift(colors,lum){var result=[];colors.forEach(function addNumber(origHex,index){origHex=String(origHex).replace(/[^0-9a-f]/gi,"");if(origHex.length<6){origHex=origHex[0]+origHex[0]+origHex[1]+origHex[1]+origHex[2]+origHex[2]}lum=lum||0;var newHex="#";for(var i=0;i<3;i++){var c=parseInt(origHex.substr(i*2,2),16);c=Math.round(Math.min(Math.max(0,c+c*lum),255)).toString(16);newHex+=("00"+c).substr(c.length)}result[index]=newHex});return result}};function chartBarChartCircular(){var classed="barChartCircular";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var opacity=1;var showLegend=false;var showAxis=true;var startAngle=0;var endAngle=270;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);var radius=Math.min(chartW,chartH)/data.length/2.3;var innerRadius=radius/4;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueMax=_dataTransform$summar.valueMax;var valueExtent=[0,valueMax];var xScale=d3__namespace.scaleBand().domain(columnKeys).rangeRound([innerRadius,radius]).padding(.15);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([startAngle,endAngle]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;i0?0:valueMin}var yDomain=[valueMin,valueMax];var xScale2=d3__namespace.scaleBand().domain(rowKeys).range([0,chartW]).padding(.05);var xScale=d3__namespace.scaleBand().domain(columnKeys).range([0,xScale2.bandwidth()]).padding(.05);var yScale=d3__namespace.scaleLinear().domain(yDomain).range([chartH,0]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);var mainLayers=["title","chart","legend"];svg.classed("d3ez",true).attr("width",width).attr("height",height).selectAll("g").data(mainLayers).enter().append("g").attr("class",function(d){return d});var titleSelect=svg.select(".title");var chartSelect=svg.select(".chart");var legendSelect=svg.select(".legend");var chartLayers=["xAxis axis","yAxis axis","seriesGroup"];chartSelect.classed(classed,true).attr("width",chartW).attr("height",chartH).attr("transform","translate(".concat(margin.left,",").concat(margin.top+titleH,")")).selectAll("g").data(chartLayers).enter().append("g").attr("class",function(d){return d});var componentBars=stacked?component.barsVerticalStacked().xScale(xScale2):component.barsVertical().xScale(xScale);componentBars.colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var series=chartSelect.select(".seriesGroup").selectAll(".series").data(data);series.enter().append("g").classed("series",true).merge(series).attr("transform",function(d){return"translate(".concat(xScale2(d.key),",").concat(chartH-yScale(valueMin),")")}).call(componentBars);series.exit().remove();var xAxis=d3__namespace.axisBottom(xScale2);var yAxis=d3__namespace.axisLeft(yScale);if(showAxis){chartSelect.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);chartSelect.select(".yAxis").call(yAxis);chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").transition().text(function(d){return d})}else{chartSelect.selectAll(".axis").selectAll("*").remove()}if(title){var componentTitle=component.title().mainText(title).subText(subTitle);titleSelect.attr("transform","translate(".concat(width/2,",").concat(margin.top,")")).call(componentTitle)}else{titleSelect.selectAll("*").remove()}if(showLegend){var componentLegend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity);legendSelect.attr("transform","translate(".concat(margin.left+chartW+legendPad,",").concat(margin.top,")")).call(componentLegend)}else{legendSelect.selectAll("*").remove()}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.showLegend=function(_v){if(!arguments.length)return showLegend;showLegend=_v;return this};my.title=function(_v){if(!arguments.length)return title;title=_v;return this};my.subTitle=function(_v){if(!arguments.length)return subTitle;subTitle=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartBarChartHorizontal(){var classed="barChart";var width=700;var height=400;var margin={top:40,right:40,bottom:70,left:70};var colors=palette.categorical(1);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var opacity=1;var showLegend=false;var showAxis=true;var yAxisLabel=null;var stacked=false;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);var _dataTransform$summar=dataTransform(data).summary(),rowKeys=_dataTransform$summar.rowKeys,columnKeys=_dataTransform$summar.columnKeys,valueExtent=_dataTransform$summar.valueExtent,valueExtentStacked=_dataTransform$summar.valueExtentStacked;var _valueExtent=_slicedToArray(valueExtent,2),valueMin=_valueExtent[0],valueMax=_valueExtent[1];if(stacked){var _valueExtentStacked=_slicedToArray(valueExtentStacked,2);valueMin=_valueExtentStacked[0];valueMax=_valueExtentStacked[1]}else{valueMin=valueMin>0?0:valueMin}var yDomain=[valueMin,valueMax];var xScale=d3__namespace.scaleLinear().domain(yDomain).range([0,chartW]);var yScale2=d3__namespace.scaleBand().domain(rowKeys).range([0,chartH]).padding(.1);var yScale=d3__namespace.scaleBand().domain(columnKeys).range([0,yScale2.bandwidth()]).padding(.15);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);var mainLayers=["title","chart","legend"];svg.classed("d3ez",true).attr("width",width).attr("height",height).selectAll("g").data(mainLayers).enter().append("g").attr("class",function(d){return d});var titleSelect=svg.select(".title");var chartSelect=svg.select(".chart");var legendSelect=svg.select(".legend");var chartLayers=["xAxis axis","yAxis axis","seriesGroup"];chartSelect.classed(classed,true).attr("width",chartW).attr("height",chartH).attr("transform","translate(".concat(margin.left,",").concat(margin.top+titleH,")")).selectAll("g").data(chartLayers).enter().append("g").attr("class",function(d){return d});var componentBars=component.barsHorizontal().xScale(xScale).colorScale(colorScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var series=chartSelect.select(".seriesGroup").selectAll(".series").data(data);series.enter().append("g").classed("series",true).merge(series).attr("transform",function(d){return"translate(".concat(xScale(valueMin),",").concat(yScale2(d.key),")")}).call(componentBars);series.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);var yAxis=d3__namespace.axisLeft(yScale2);if(showAxis){chartSelect.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);chartSelect.select(".yAxis").call(yAxis)}else{chartSelect.selectAll(".axis").selectAll("*").remove()}if(title){var componentTitle=component.title().mainText(title).subText(subTitle);titleSelect.attr("transform","translate(".concat(width/2,",").concat(margin.top,")")).call(componentTitle)}else{titleSelect.selectAll("*").remove()}if(showLegend){var componentLegend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("rect").opacity(opacity);legendSelect.attr("transform","translate(".concat(margin.left+chartW+legendPad,",").concat(margin.top,")")).call(componentLegend)}else{legendSelect.selectAll("*").remove()}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.showLegend=function(_v){if(!arguments.length)return showLegend;showLegend=_v;return this};my.title=function(_v){if(!arguments.length)return title;title=_v;return this};my.subTitle=function(_v){if(!arguments.length)return subTitle;subTitle=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.stacked=function(_v){if(!arguments.length)return stacked;stacked=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartBubbleChart(){var classed="bubbleChart";var width=700;var height=400;var margin={top:40,right:40,bottom:70,left:70};var colors=palette.categorical(1);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var legendTitle="Key";var opacity=1;var showLegend=false;var showAxis=true;var yAxisLabel=null;var minRadius=3;var maxRadius=20;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);var _dataTransform$summar=dataTransform(data).summary(),rowKeys=_dataTransform$summar.rowKeys,_dataTransform$summar2=_dataTransform$summar.coordinatesExtent,xExtent=_dataTransform$summar2.x,yExtent=_dataTransform$summar2.y,valueExtent=_dataTransform$summar.valueExtent;var xScale=d3__namespace.scaleLinear().domain(xExtent).range([0,chartW]).nice();var yScale=d3__namespace.scaleLinear().domain(yExtent).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain(rowKeys).range(colors);var sizeScale=d3__namespace.scaleLinear().domain(valueExtent).range([minRadius,maxRadius]);var mainLayers=["title","chart","legend"];svg.classed("d3ez",true).attr("width",width).attr("height",height).selectAll("g").data(mainLayers).enter().append("g").attr("class",function(d){return d});var titleSelect=svg.select(".title");var chartSelect=svg.select(".chart");var legendSelect=svg.select(".legend");var chartLayers=["xAxis axis","yAxis axis","seriesGroup","zoomArea","clipArea"];chartSelect.classed(classed,true).attr("width",chartW).attr("height",chartH).attr("transform","translate(".concat(margin.left,",").concat(margin.top+titleH,")")).selectAll("g").data(chartLayers).enter().append("g").attr("class",function(d){return d});var componentBubbles=component.bubbles().xScale(xScale).yScale(yScale).colorScale(colorScale).sizeScale(sizeScale).opacity(opacity).dispatch(dispatch).transition(transition);var series=chartSelect.select(".seriesGroup").selectAll(".series").data(data);series.enter().append("g").attr("class","series").attr("clip-path","url(#plotAreaClip)").merge(series).call(componentBubbles);series.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);var yAxis=d3__namespace.axisLeft(yScale);if(showAxis){chartSelect.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");chartSelect.select(".yAxis").call(yAxis)}else{chartSelect.selectAll(".axis").selectAll("*").remove()}var clipPath=chartSelect.select(".clipArea").selectAll("defs").data([0]);clipPath.enter().append("defs").append("clipPath").attr("id","plotAreaClip").append("rect").attr("width",chartW).attr("height",chartH).merge(clipPath).select("clipPath").select("rect").attr("width",chartW).attr("height",chartH);var zoom=d3__namespace.zoom().extent([[0,0],[chartW,chartH]]).scaleExtent([1,8]).translateExtent([[0,0],[chartW,chartH]]).on("zoom",zoomed);function zoomed(e){var xScaleZoomed=e.transform.rescaleX(xScale);var yScaleZoomed=e.transform.rescaleY(yScale);if(showAxis){xAxis.scale(xScaleZoomed);chartSelect.select(".xAxis").call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");yAxis.scale(yScaleZoomed);chartSelect.select(".yAxis").call(yAxis)}componentBubbles.xScale(xScaleZoomed).yScale(yScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});chartSelect.select(".seriesGroup").selectAll(".series").call(componentBubbles)}var zoomArea=chartSelect.select(".zoomArea").selectAll("rect").data([0]);zoomArea.enter().append("rect").attr("fill","none").attr("pointer-events","all").merge(zoomArea).call(zoom).attr("width",chartW).attr("height",chartH);if(title){var componentTitle=component.title().mainText(title).subText(subTitle);titleSelect.attr("transform","translate(".concat(width/2,",").concat(margin.top,")")).call(componentTitle)}else{titleSelect.selectAll("*").remove()}if(showLegend){var componentLegend=component.legend().title(legendTitle).sizeScale(sizeScale).height(legendH).width(legendW).opacity(opacity);legendSelect.attr("transform","translate(".concat(margin.left+chartW+legendPad,",").concat(margin.top,")")).call(componentLegend)}else{legendSelect.selectAll("*").remove()}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.showLegend=function(_v){if(!arguments.length)return showLegend;showLegend=_v;return this};my.title=function(_v){if(!arguments.length)return title;title=_v;return this};my.subTitle=function(_v){if(!arguments.length)return subTitle;subTitle=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartCandlestickChart(){var classed="candlestickChart";var width=700;var height=400;var margin={top:40,right:40,bottom:70,left:70};var colors=["green","red"];var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var opacity=1;var showLegend=false;var showAxis=true;var yAxisLabel=null;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);data=data[0];data.values.forEach(function(d,i){data.values[i].date=Date.parse(d.date)});var maxDate=d3__namespace.max(data.values,function(d){return d.date});var minDate=d3__namespace.min(data.values,function(d){return d.date});var ONE_DAY_IN_MILLISECONDS=864e5;var dateDomain=[new Date(minDate-ONE_DAY_IN_MILLISECONDS),new Date(maxDate+ONE_DAY_IN_MILLISECONDS)];var yDomain=[d3__namespace.min(data.values,function(d){return d.low}),d3__namespace.max(data.values,function(d){return d.high})];var xScale=d3__namespace.scaleTime().domain(dateDomain).range([0,chartW]);var yScale=d3__namespace.scaleLinear().domain(yDomain).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain([true,false]).range(colors);var mainLayers=["title","chart","legend"];svg.classed("d3ez",true).attr("width",width).attr("height",height).selectAll("g").data(mainLayers).enter().append("g").attr("class",function(d){return d});var titleSelect=svg.select(".title");var chartSelect=svg.select(".chart");var legendSelect=svg.select(".legend");var chartLayers=["xAxis axis","yAxis axis","seriesGroup","zoomArea","clipArea"];chartSelect.classed(classed,true).attr("width",chartW).attr("height",chartH).attr("transform","translate(".concat(margin.left,",").concat(margin.top+titleH,")")).selectAll("g").data(chartLayers).enter().append("g").attr("class",function(d){return d});var componentCandleSticks=component.candleSticks().xScale(xScale).yScale(yScale).colorScale(colorScale).dispatch(dispatch).opacity(opacity).transition(transition);var series=chartSelect.select(".seriesGroup").selectAll(".series").data([data]);series.enter().append("g").attr("class","series").merge(series).call(componentCandleSticks);series.exit().remove();var xAxis=d3__namespace.axisBottom(xScale).tickFormat(d3__namespace.timeFormat("%d-%b-%y"));var yAxis=d3__namespace.axisLeft(yScale);if(showAxis){chartSelect.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis).selectAll("text").style("text-anchor","end").attr("dx","-.8em").attr("dy",".15em").attr("transform","rotate(-65)");chartSelect.select(".yAxis").call(yAxis);chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").transition().text(function(d){return d})}else{chartSelect.selectAll(".axis").selectAll("*").remove()}function brushStart(e){console.log(e)}function brushEnd(e){console.log(e)}var brush=d3__namespace.brushX().extent([[0,0],[chartW,chartH]]).on("brush start",brushStart).on("brush end",brushEnd);chartSelect.select(".zoomArea").call(brush);if(title){var componentTitle=component.title().mainText(title).subText(subTitle);titleSelect.attr("transform","translate(".concat(width/2,",").concat(margin.top,")")).call(componentTitle)}else{titleSelect.selectAll("*").remove()}if(showLegend){var componentLegend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity);legendSelect.attr("transform","translate(".concat(margin.left+chartW+legendPad,",").concat(margin.top,")")).call(componentLegend)}else{legendSelect.selectAll("*").remove()}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.showLegend=function(_v){if(!arguments.length)return showLegend;showLegend=_v;return this};my.title=function(_v){if(!arguments.length)return title;title=_v;return this};my.subTitle=function(_v){if(!arguments.length)return subTitle;subTitle=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartDonutChart(){var classed="donutChart";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var opacity=1;var showLegend=false;var showAxis=true;var startAngle=0;var endAngle=360;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);var radius=Math.min(chartW,chartH)/data.length/2.3;var innerRadius=radius/2;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueExtent=_dataTransform$summar.valueExtent;var xScale=d3__namespace.scaleBand().domain(columnKeys).range([innerRadius,radius]);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([startAngle,endAngle]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;i0?0:valueMin;var valueExtent=[valueMin,valueMax];var xScale=d3__namespace.scalePoint().domain(columnKeys).range([0,chartW]);{data.forEach(function(d,i){d.values.forEach(function(b,j){data[i].values[j].key=new Date(b.key)})});var dateExtent=d3__namespace.extent(data[0].values,function(d){return d.key});xScale=d3__namespace.scaleTime().domain(dateExtent).range([0,chartW])}var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([chartH,0]).nice();var colorScale=d3__namespace.scaleOrdinal().domain(rowKeys).range(colors);var mainLayers=["title","chart","legend"];svg.classed("d3ez",true).attr("width",width).attr("height",height).selectAll("g").data(mainLayers).enter().append("g").attr("class",function(d){return d});var titleSelect=svg.select(".title");var chartSelect=svg.select(".chart");var legendSelect=svg.select(".legend");var chartLayers=["xAxis axis","yAxis axis","seriesGroup","zoomArea","clipArea"];chartSelect.classed(classed,true).attr("width",chartW).attr("height",chartH).attr("transform","translate(".concat(margin.left,",").concat(margin.top+titleH,")")).selectAll("g").data(chartLayers).enter().append("g").attr("class",function(d){return d});var componentLineChart=component.lineChart().colorScale(colorScale).xScale(xScale).yScale(yScale).opacity(opacity).dispatch(dispatch).transition(transition);var componentScatterPlot=component.scatterPlot().colorScale(colorScale).yScale(yScale).xScale(xScale).opacity(opacity).dispatch(dispatch).transition(transition);var series=chartSelect.select(".seriesGroup").selectAll(".series").data(data);series.enter().append("g").attr("class","series").attr("clip-path","url(#plotAreaClip)").merge(series).call(componentLineChart).call(componentScatterPlot);series.exit().remove();var xAxis=d3__namespace.axisBottom(xScale);var yAxis=d3__namespace.axisLeft(yScale);if(showAxis){chartSelect.select(".xAxis").attr("transform","translate(0,".concat(chartH,")")).call(xAxis);chartSelect.select(".yAxis").call(yAxis);chartSelect.select(".yAxis").selectAll(".yAxisLabel").data([yAxisLabel]).enter().append("text").classed("yAxisLabel",true).attr("transform","rotate(-90)").attr("y",-40).attr("dy",".71em").attr("fill","currentColor").style("text-anchor","end").text(function(d){return d})}else{chartSelect.selectAll(".axis").selectAll("*").remove()}var clipPath=chartSelect.select(".clipArea").selectAll("defs").data([0]);clipPath.enter().append("defs").append("clipPath").attr("id","plotAreaClip").append("rect").attr("width",chartW).attr("height",chartH).merge(clipPath).select("clipPath").select("rect").attr("width",chartW).attr("height",chartH);var zoom=d3__namespace.zoom().extent([[0,0],[chartW,chartH]]).scaleExtent([1,8]).translateExtent([[0,0],[chartW,chartH]]).on("zoom",zoomed);function zoomed(e){var xScaleZoomed=e.transform.rescaleX(xScale);if(showAxis){xAxis.scale(xScaleZoomed);chartSelect.select(".xAxis").call(xAxis)}componentLineChart.xScale(xScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});componentScatterPlot.xScale(xScaleZoomed).transition({ease:d3__namespace.easeLinear,duration:0});chartSelect.select(".seriesGroup").selectAll(".series").call(componentLineChart).call(componentScatterPlot)}var zoomArea=chartSelect.select(".zoomArea").selectAll("rect").data([0]);zoomArea.enter().append("rect").attr("fill","none").attr("pointer-events","all").merge(zoomArea).call(zoom).attr("width",chartW).attr("height",chartH);if(title){var componentTitle=component.title().mainText(title).subText(subTitle);titleSelect.attr("transform","translate(".concat(width/2,",").concat(margin.top,")")).call(componentTitle)}else{titleSelect.selectAll("*").remove()}if(showLegend){var componentLegend=component.legend().colorScale(colorScale).height(legendH).width(legendW).itemType("line").opacity(opacity);legendSelect.attr("transform","translate(".concat(margin.left+chartW+legendPad,",").concat(margin.top,")")).call(componentLegend)}else{legendSelect.selectAll("*").remove()}})}my.width=function(_v){if(!arguments.length)return width;width=_v;return this};my.height=function(_v){if(!arguments.length)return height;height=_v;return this};my.margin=function(_v){if(!arguments.length)return margin;margin=_v;return this};my.colors=function(_v){if(!arguments.length)return colors;colors=_v;return this};my.showLegend=function(_v){if(!arguments.length)return showLegend;showLegend=_v;return this};my.title=function(_v){if(!arguments.length)return title;title=_v;return this};my.subTitle=function(_v){if(!arguments.length)return subTitle;subTitle=_v;return this};my.opacity=function(_v){if(!arguments.length)return opacity;opacity=_v;return this};my.showAxis=function(_v){if(!arguments.length)return showAxis;showAxis=_v;return this};my.yAxisLabel=function(_v){if(!arguments.length)return yAxisLabel;yAxisLabel=_v;return this};my.transition=function(_v){if(!arguments.length)return transition;transition=_v;return this};my.dispatch=function(_v){if(!arguments.length)return dispatch();dispatch=_v;return this};my.on=function(){var value=dispatch.on.apply(dispatch,arguments);return value===dispatch?my:value};return my}function chartPolarAreaChart(){var classed="polarAreaChart";var width=700;var height=400;var margin={top:40,right:40,bottom:40,left:40};var colors=palette.categorical(3);var transition={ease:d3__namespace.easeLinear,duration:0};var dispatch=d3__namespace.dispatch("customValueMouseOver","customValueMouseOut","customValueClick","customSeriesMouseOver","customSeriesMouseOut","customSeriesClick");var title=null;var subTitle=null;var opacity=1;var showLegend=false;var showAxis=true;var startAngle=0;var endAngle=360;function my(selection){var svg=function(selection){var el=selection._groups[0][0];if(!!el.ownerSVGElement||el.tagName==="svg"){return selection}else{var svgSelection=selection.selectAll("svg").data(function(d){return[d]});return svgSelection.enter().append("svg").merge(svgSelection)}}(selection);selection.each(function(data){var legendW=showLegend?120:0;var legendH=Math.max(height/2.5,100);var legendPad=showLegend?15:0;var titleH=title?40:0;var chartW=Math.max(width-margin.left-legendPad-legendW-margin.right,100);var chartH=Math.max(height-margin.top-titleH-margin.bottom,100);var radius=Math.min(chartW,chartH)/data.length/2.3;var _dataTransform$summar=dataTransform(data).summary(),columnKeys=_dataTransform$summar.columnKeys,valueMax=_dataTransform$summar.valueMax;var valueExtent=[0,valueMax];var xScale=d3__namespace.scaleBand().domain(columnKeys).rangeRound([startAngle,endAngle]);var yScale=d3__namespace.scaleLinear().domain(valueExtent).range([0,radius]);var colorScale=d3__namespace.scaleOrdinal().domain(columnKeys).range(colors);function generateLayout(cellCount,width,height){var layout=[];var cols=Math.ceil(Math.sqrt(cellCount));var rows=Math.ceil(cellCount/cols);var cellWidth=width/cols;var cellHeight=height/rows;var index=0;for(var i=0;i d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Radial Bars - const barsCircular = component.barsCircular() + const componentBarsCircular = component.barsCircular() .colorScale(colorScale) .xScale(xScale) .opacity(opacity) @@ -131,50 +137,84 @@ export default function() { .transition(transition); // Circular Axis - const circularAxis = component.circularAxis() + const componentCircularAxis = component.circularAxis() .radialScale(yScale) .ringScale(xScale); // Outer Labels - const circularSectorLabels = component.circularSectorLabels() + const componentCircularSectorLabels = component.circularSectorLabels() .ringScale(xScale) .radialScale(yScale) .textAnchor("middle"); // Ring Labels - const circularRingLabels = component.circularRingLabels() + const componentCircularRingLabels = component.circularRingLabels() .radialScale(xScale) .textAnchor("middle"); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) + .classed("series", true) + .merge(series) .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) - .call(circularAxis) - .call(barsCircular) - .call(circularSectorLabels) - .call(circularRingLabels); + .call(componentBarsCircular) + .call(componentCircularRingLabels); - seriesGroup.exit() + series.exit() .remove(); + // Axis Labels + if (showAxis) { + const seriesAxis = chartSelect.select(".axis") + .selectAll(".seriesAxis") + .data(data); + + seriesAxis.enter() + .append("g") + .classed("seriesAxis", true) + .merge(seriesAxis) + .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) + .call(componentCircularAxis) + .call(componentCircularSectorLabels); + + seriesAxis.exit() + .remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -226,6 +266,55 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * diff --git a/src/chart/barChartHorizontal.js b/src/chart/barChartHorizontal.js index fd0bc2b..a248df4 100644 --- a/src/chart/barChartHorizontal.js +++ b/src/chart/barChartHorizontal.js @@ -16,13 +16,17 @@ export default function() { let classed = "barChart"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = palette.categorical(1); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let yAxisLabel = null; let stacked = false; @@ -48,11 +52,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); // Create Scales and Axis let { rowKeys, columnKeys, valueExtent, valueExtentStacked } = dataTransform(data).summary(); @@ -84,35 +89,35 @@ export default function() { .domain(columnKeys) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Bars Component - const bars = component.barsHorizontal() + const componentBars = component.barsHorizontal() .xScale(xScale) .colorScale(colorScale) .yScale(yScale) @@ -121,47 +126,62 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) + .classed("series", true) + .merge(series) .attr("transform", (d) => `translate(${xScale(valueMin)},${yScale2(d.key)})`) - .call(bars); + .call(componentBars); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis + // Axis const xAxis = d3.axisBottom(xScale); - - containerEnter.select(".xAxis") - .attr("transform", `translate(0,${chartH})`) - .call(xAxis); - - // Y-Axis const yAxis = d3.axisLeft(yScale2); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis); + + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".yAxis") - .call(yAxis); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -213,6 +233,43 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * @@ -250,7 +307,7 @@ export default function() { }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} diff --git a/src/chart/barChartVertical.js b/src/chart/barChartVertical.js index 03b1045..bdbd2b0 100644 --- a/src/chart/barChartVertical.js +++ b/src/chart/barChartVertical.js @@ -16,13 +16,17 @@ export default function() { let classed = "barChart"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = palette.categorical(1); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let yAxisLabel = null; let stacked = false; @@ -48,11 +52,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); // Create Scales and Axis let { rowKeys, columnKeys, valueExtent, valueExtentStacked } = dataTransform(data).summary(); @@ -84,98 +89,113 @@ export default function() { .domain(columnKeys) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Bars Component - const bars = stacked ? component.barsVerticalStacked().xScale(xScale2) : component.barsVertical().xScale(xScale) - bars.colorScale(colorScale) + const componentBars = stacked ? component.barsVerticalStacked().xScale(xScale2) : component.barsVertical().xScale(xScale) + componentBars.colorScale(colorScale) .yScale(yScale) .opacity(opacity) .dispatch(dispatch) .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) + .classed("series", true) + .merge(series) .attr("transform", (d) => `translate(${xScale2(d.key)},${chartH - yScale(valueMin)})`) - .call(bars); + .call(componentBars); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis + // Axis const xAxis = d3.axisBottom(xScale2); - - containerEnter.select(".xAxis") - .attr("transform", `translate(0,${chartH})`) - .call(xAxis); - - // Y-Axis const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis); + + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + + // Y-Axis Label + chartSelect.select(".yAxis") + .selectAll(".yAxisLabel") + .data([yAxisLabel]) + .enter() + .append("text") + .classed("yAxisLabel", true) + .attr("transform", "rotate(-90)") + .attr("y", -40) + .attr("dy", ".71em") + .attr("fill", "currentColor") + .style("text-anchor", "end") + .transition() + .text((d) => d); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".yAxis") - .call(yAxis); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); - // Y Axis Label - containerEnter.select(".yAxis") - .selectAll(".yAxisLabel") - .data([yAxisLabel]) - .enter() - .append("text") - .classed("yAxisLabel", true) - .attr("transform", "rotate(-90)") - .attr("y", -40) - .attr("dy", ".71em") - .attr("fill", "currentColor") - .style("text-anchor", "end") - .transition() - .text((d) => d); - - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -264,7 +284,43 @@ export default function() { }; /** - * Y Axix Label Getter / Setter + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} diff --git a/src/chart/bubbleChart.js b/src/chart/bubbleChart.js index d0f10f3..e986a25 100644 --- a/src/chart/bubbleChart.js +++ b/src/chart/bubbleChart.js @@ -16,13 +16,17 @@ export default function() { let classed = "bubbleChart"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = palette.categorical(1); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let yAxisLabel = null; let minRadius = 3; @@ -49,11 +53,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); const { rowKeys, coordinatesExtent: { x: xExtent, y: yExtent }, valueExtent } = dataTransform(data).summary(); @@ -75,35 +80,35 @@ export default function() { .domain(valueExtent) .range([minRadius, maxRadius]); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend", "zoomArea", "clipArea"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Bubble Component - const bubbles = component.bubbles() + const componentBubbles = component.bubbles() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -113,54 +118,44 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") + .attr("class", "series") .attr('clip-path', "url(#plotAreaClip)") - .merge(seriesGroup) - .call(bubbles); + .merge(series) + .call(componentBubbles); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis + // Axis const xAxis = d3.axisBottom(xScale); - - containerEnter.select(".xAxis") - .attr("transform", `translate(0,${chartH})`) - .call(xAxis) - .selectAll("text") - .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", ".15em") - .attr("transform", "rotate(-65)"); - - // Y-Axis const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-.8em") + .attr("dy", ".15em") + .attr("transform", "rotate(-65)"); - containerEnter.select(".yAxis") - .call(yAxis); - - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); - - // Legend - const legend = component.legend() - .sizeScale(sizeScale) - .height(legendH) - .width(legendW) - .opacity(opacity); + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); // Zoom Clip Path - const clipPath = containerEnter.select(".clipArea") + const clipPath = chartSelect.select(".clipArea") .selectAll("defs") .data([0]); @@ -188,30 +183,32 @@ export default function() { const xScaleZoomed = e.transform.rescaleX(xScale); const yScaleZoomed = e.transform.rescaleY(yScale); - xAxis.scale(xScaleZoomed); - containerEnter.select(".xAxis") - .call(xAxis) - .selectAll("text") - .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", ".15em") - .attr("transform", "rotate(-65)"); - - yAxis.scale(yScaleZoomed); - containerEnter.select(".yAxis") - .call(yAxis); - - bubbles + if (showAxis) { + xAxis.scale(xScaleZoomed); + chartSelect.select(".xAxis") + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-.8em") + .attr("dy", ".15em") + .attr("transform", "rotate(-65)"); + + yAxis.scale(yScaleZoomed); + chartSelect.select(".yAxis") + .call(yAxis); + } + + componentBubbles .xScale(xScaleZoomed) .yScale(yScaleZoomed) .transition({ ease: d3.easeLinear, duration: 0 }); - containerEnter.select(".chart") - .selectAll(".seriesGroup") - .call(bubbles); + chartSelect.select(".seriesGroup") + .selectAll(".series") + .call(componentBubbles); } - const zoomArea = containerEnter.select(".zoomArea") + const zoomArea = chartSelect.select(".zoomArea") .selectAll("rect") .data([0]); @@ -223,6 +220,34 @@ export default function() { .call(zoom) .attr("width", chartW) .attr("height", chartH); + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + + // Legend + if (showLegend) { + const componentLegend = component.legend() + .title(legendTitle) + .sizeScale(sizeScale) + .height(legendH) + .width(legendW) + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -274,6 +299,43 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * @@ -287,7 +349,7 @@ export default function() { }; /** - * Y Axis Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {string} _v - Label text. * @returns {*} diff --git a/src/chart/candlestickChart.js b/src/chart/candlestickChart.js index a1bd18f..6a2097e 100644 --- a/src/chart/candlestickChart.js +++ b/src/chart/candlestickChart.js @@ -16,13 +16,17 @@ export default function() { let classed = "candlestickChart"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = ["green", "red"]; let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let yAxisLabel = null; @@ -46,11 +50,12 @@ export default function() { })(selection); selection.each(function(data) { - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); data = data[0]; // FIXME: Convert input data to support multi-series. @@ -87,34 +92,35 @@ export default function() { .domain([true, false]) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit().remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["zoomArea", "xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Candle Stick Component - const candleSticks = component.candleSticks() + const componentCandleSticks = component.candleSticks() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -123,83 +129,97 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => [d]); // FIXME: Convert input data to support multi-series. + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data([data]); // FIXME: Convert input data to support multi-series. - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") - .merge(seriesGroup) - .call(candleSticks); + .attr("class", "series") + .merge(series) + .call(componentCandleSticks); - seriesGroup.exit() + series.exit() .remove(); - // X Axis - const xAxis = d3.axisBottom(xScale) - .tickFormat(d3.timeFormat("%d-%b-%y")); - - containerEnter.select(".xAxis") - .attr("transform", `translate(0,${chartH})`) - .call(xAxis) - .selectAll("text") - .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", ".15em") - .attr("transform", "rotate(-65)"); - - // Y-Axis + // Axis + const xAxis = d3.axisBottom(xScale).tickFormat(d3.timeFormat("%d-%b-%y")); const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-.8em") + .attr("dy", ".15em") + .attr("transform", "rotate(-65)"); + + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + + // Y-Axis Label + chartSelect.select(".yAxis") + .selectAll(".yAxisLabel") + .data([yAxisLabel]) + .enter() + .append("text") + .classed("yAxisLabel", true) + .attr("transform", "rotate(-90)") + .attr("y", -40) + .attr("dy", ".71em") + .attr("fill", "currentColor") + .style("text-anchor", "end") + .transition() + .text((d) => d); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".yAxis") - .call(yAxis); - - // Y-Axis Label - containerEnter.select(".yAxis") - .selectAll(".yAxisLabel") - .data([yAxisLabel]) - .enter() - .append("text") - .classed("yAxisLabel", true) - .attr("transform", "rotate(-90)") - .attr("y", -40) - .attr("dy", ".71em") - .attr("fill", "currentColor") - .style("text-anchor", "end") - .transition() - .text((d) => d); - - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); - - // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("line") - .opacity(opacity); + // Experimental Brush + function brushStart(e) { + console.log(e); + } - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + function brushEnd(e) { + console.log(e); + } - // Experimental Brush const brush = d3.brushX() .extent([[0, 0], [chartW, chartH]]) .on("brush start", brushStart) .on("brush end", brushEnd); - containerEnter.select(".zoomArea") + chartSelect.select(".zoomArea") .call(brush); - function brushStart(e) { - console.log(e); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll('*').remove(); } - function brushEnd(e) { - console.log(e); + // Legend + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("line") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); } }); } @@ -252,6 +272,43 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * @@ -277,7 +334,7 @@ export default function() { }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} diff --git a/src/chart/donutChart.js b/src/chart/donutChart.js index 5c95bc9..096b949 100644 --- a/src/chart/donutChart.js +++ b/src/chart/donutChart.js @@ -16,13 +16,18 @@ export default function() { let classed = "donutChart"; let width = 700; let height = 400; - let margin = { top: 20, right: 20, bottom: 20, left: 20 }; + let margin = { top: 40, right: 40, bottom: 40, left: 40 }; let colors = palette.categorical(3); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; + let showAxis = true; let startAngle = 0; let endAngle = 360; @@ -47,12 +52,13 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); - const radius = (Math.min(chartW, chartH) / data.length) / 2; + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); + const radius = (Math.min(chartW, chartH) / data.length) / 2.3; const innerRadius = radius / 2; const { columnKeys, valueExtent } = dataTransform(data).summary(); @@ -93,35 +99,35 @@ export default function() { const layout = generateLayout(data.length, chartW, chartH); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["seriesGroup", "axis"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Donut Slice Component - const donut = component.donut() + const componentDonut = component.donut() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -130,38 +136,71 @@ export default function() { .transition(transition); // Donut Label Component - const donutLabels = component.donutLabels() + const componentDonutLabels = component.donutLabels() .xScale(xScale) .yScale(yScale) .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) + .classed("series", true) + .merge(series) .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) - .call(donut) - .call(donutLabels); + .call(componentDonut); - seriesGroup.exit() + series.exit() .remove(); + // Axis Labels + if (showAxis) { + const seriesAxis = chartSelect.select(".axis") + .selectAll(".seriesAxis") + .data(data); + + seriesAxis.enter() + .append("g") + .classed("seriesAxis", true) + .merge(seriesAxis) + .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) + .call(componentDonutLabels); + + seriesAxis.exit() + .remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -213,6 +252,55 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * diff --git a/src/chart/heatMap.js b/src/chart/heatMap.js index d17f8ee..40687ba 100644 --- a/src/chart/heatMap.js +++ b/src/chart/heatMap.js @@ -16,13 +16,17 @@ export default function() { let classed = "heatMap"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = palette.diverging(2).slice(0, 5); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let thresholds; @@ -47,11 +51,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); const { rowKeys, columnKeys, thresholds: tmpThresholds } = dataTransform(data).summary(); @@ -73,35 +78,35 @@ export default function() { .domain(thresholds) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Heat Map Row Component - const heatMapRow = component.heatMapRow() + const componentHeatMapRow = component.heatMapRow() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -110,50 +115,66 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") .data(data); - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") - .merge(seriesGroup) + .attr("class", "series") + .merge(series) .attr("transform", (d) => `translate(0,${yScale(d.key)})`) - .call(heatMapRow); + .call(componentHeatMapRow); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis - const xAxis = d3.axisTop(xScale); - - containerEnter.select(".xAxis") - .call(xAxis) - .selectAll("text") - .attr("y", 0) - .attr("x", -8) - .attr("transform", "rotate(60)") - .style("text-anchor", "end"); - - // Y-Axis + // Axis + const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis) + .selectAll("text") + .attr("y", 0) + .attr("x", -8) + .attr("transform", "rotate(300)") + .style("text-anchor", "end"); + + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".yAxis") - .call(yAxis); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -205,6 +226,43 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * @@ -241,6 +299,8 @@ export default function() { return this; }; + + /** * Transition Getter / Setter * diff --git a/src/chart/heatMapRadial.js b/src/chart/heatMapRadial.js index 1f7076e..5f2d025 100644 --- a/src/chart/heatMapRadial.js +++ b/src/chart/heatMapRadial.js @@ -15,13 +15,18 @@ export default function() { let classed = "heatMapRadial"; let width = 700; let height = 400; - let margin = { top: 20, right: 20, bottom: 20, left: 20 }; + let margin = { top: 40, right: 40, bottom: 40, left: 40 }; let colors = palette.diverging(2).slice(0, 5); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; + let showAxis = true; let startAngle = 0; let endAngle = 270; let thresholds; @@ -47,12 +52,13 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); - const radius = Math.min(chartW, chartH) / 2; + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); + const radius = Math.min(chartW, chartH) / 2.3; const innerRadius = radius / 4; const { rowKeys, columnKeys, thresholds: tmpThresholds } = dataTransform(data).summary(); @@ -75,35 +81,35 @@ export default function() { .domain(thresholds) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["seriesGroup", "axis"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Heat Map Rings - const heatMapRing = component.heatMapRing() + const componentHeatMapRing = component.heatMapRing() .colorScale(colorScale) .xScale(xScale) .yScale(yScale) @@ -112,47 +118,66 @@ export default function() { .transition(transition); // Circular Labels - const circularSectorLabels = component.circularSectorLabels() + const componentCircularSectorLabels = component.circularSectorLabels() .ringScale(yScale) .radialScale(xScale) .textAnchor("start"); // Ring Labels - const circularRingLabels = component.circularRingLabels() + const componentCircularRingLabels = component.circularRingLabels() .radialScale(yScale) .textAnchor("middle"); // Create Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") - .merge(seriesGroup) - .attr("transform", `translate(${chartW / 2},${chartH / 2})`) - .call(heatMapRing) - .call(circularRingLabels); + .attr("class", "series") + .merge(series) + .attr("transform", `translate(${chartW / 2},${(chartH / 2)})`) + .call(componentHeatMapRing); - seriesGroup.exit() + series.exit() .remove(); - // Outer Ring Labels - containerEnter.select(".axis") - .attr("transform", `translate(${chartW / 2},${chartH / 2})`) - .call(circularSectorLabels); + // Axis Labels + if (showAxis) { + chartSelect.select(".axis") + .attr("transform", `translate(${chartW / 2},${chartH / 2})`) + .call(componentCircularSectorLabels) + .call(componentCircularRingLabels); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .opacity(opacity); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + + // Legend + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -204,6 +229,55 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + + /** * Opacity Getter / Setter * diff --git a/src/chart/lineChart.js b/src/chart/lineChart.js index b511846..3a9cd21 100644 --- a/src/chart/lineChart.js +++ b/src/chart/lineChart.js @@ -16,13 +16,17 @@ export default function() { let classed = "lineChart"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = palette.categorical(1); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let yAxisLabel = null; @@ -47,11 +51,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - margin.bottom - titleH), 100); // Create Scales and Axis let { rowKeys, columnKeys, valueMin, valueMax } = dataTransform(data).summary(); @@ -89,35 +94,35 @@ export default function() { .domain(rowKeys) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - container.exit() - .remove(); - - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup", "zoomArea", "clipArea"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend", "zoomArea", "clipArea"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Line Chart Component - const lineChart = component.lineChart() + const componentLineChart = component.lineChart() .colorScale(colorScale) .xScale(xScale) .yScale(yScale) @@ -126,7 +131,7 @@ export default function() { .transition(transition); // Line Dots Component - const scatterPlot = component.scatterPlot() + const componentScatterPlot = component.scatterPlot() .colorScale(colorScale) .yScale(yScale) .xScale(xScale) @@ -135,65 +140,53 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") + .attr("class", "series") .attr('clip-path', "url(#plotAreaClip)") - .merge(seriesGroup) - .call(lineChart) - .call(scatterPlot); + .merge(series) + .call(componentLineChart) + .call(componentScatterPlot); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis + // Axis const xAxis = d3.axisBottom(xScale); - - containerEnter.select(".xAxis") - .attr("transform", `translate(0,${chartH})`) - .call(xAxis); - - // Y-Axis const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis); - containerEnter.select(".yAxis") - .call(yAxis); - - // Y-Axis Label - containerEnter.select(".yAxis") - .selectAll(".yAxisLabel") - .data([yAxisLabel]) - .enter() - .append("text") - .classed("yAxisLabel", true) - .attr("transform", "rotate(-90)") - .attr("y", -40) - .attr("dy", ".71em") - .attr("fill", "currentColor") - .style("text-anchor", "end") - .text((d) => d); - - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); - - // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("line") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + + // Y-Axis Label + chartSelect.select(".yAxis") + .selectAll(".yAxisLabel") + .data([yAxisLabel]) + .enter() + .append("text") + .classed("yAxisLabel", true) + .attr("transform", "rotate(-90)") + .attr("y", -40) + .attr("dy", ".71em") + .attr("fill", "currentColor") + .style("text-anchor", "end") + .text((d) => d); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } // Zoom Clip Path - const clipPath = containerEnter.select(".clipArea") + const clipPath = chartSelect.select(".clipArea") .selectAll("defs") .data([0]); @@ -220,37 +213,65 @@ export default function() { function zoomed(e) { const xScaleZoomed = e.transform.rescaleX(xScale); - xAxis.scale(xScaleZoomed); - containerEnter.select(".xAxis") - .call(xAxis); + if (showAxis) { + xAxis.scale(xScaleZoomed); + chartSelect.select(".xAxis") + .call(xAxis); + } - lineChart + componentLineChart .xScale(xScaleZoomed) .transition({ ease: d3.easeLinear, duration: 0 }); - scatterPlot + componentScatterPlot .xScale(xScaleZoomed) .transition({ ease: d3.easeLinear, duration: 0 }); - containerEnter.select(".chart") - .selectAll(".seriesGroup") - .call(lineChart) - .call(scatterPlot); + chartSelect.select(".seriesGroup") + .selectAll(".series") + .call(componentLineChart) + .call(componentScatterPlot); } - const zoomArea = containerEnter.select(".zoomArea") - .selectAll(".rect") + const zoomArea = chartSelect.select(".zoomArea") + .selectAll("rect") .data([0]); zoomArea.enter() .append("rect") - .classed("zoomArea", true) .attr("fill", "none") .attr("pointer-events", "all") .merge(zoomArea) .call(zoom) .attr("width", chartW) .attr("height", chartH); + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + + // Legend + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("line") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -302,6 +323,42 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -327,7 +384,7 @@ export default function() { }; /** - * Y Axix Label Getter / Setter + * Y-Axis Label Getter / Setter * * @param {number} _v - Label text. * @returns {*} diff --git a/src/chart/polarAreaChart.js b/src/chart/polarAreaChart.js index c5a9322..1cd0ce0 100644 --- a/src/chart/polarAreaChart.js +++ b/src/chart/polarAreaChart.js @@ -15,13 +15,18 @@ export default function() { let classed = "polarAreaChart"; let width = 700; let height = 400; - let margin = { top: 20, right: 20, bottom: 20, left: 20 }; + let margin = { top: 40, right: 40, bottom: 40, left: 40 }; let colors = palette.categorical(3); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; + let showAxis = true; let startAngle = 0; let endAngle = 360; @@ -46,12 +51,13 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); - const radius = (Math.min(chartW, chartH) / data.length) / 2; + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); + const radius = (Math.min(chartW, chartH) / data.length) / 2.3; const { columnKeys, valueMax } = dataTransform(data).summary(); const valueExtent = [0, valueMax]; @@ -92,35 +98,35 @@ export default function() { const layout = generateLayout(data.length, chartW, chartH); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Radial Bar Chart - const polarArea = component.polarArea() + const componentPolarArea = component.polarArea() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -129,44 +135,77 @@ export default function() { .transition(transition); // Circular Axis - const circularAxis = component.circularAxis() + const componentCircularAxis = component.circularAxis() .radialScale(xScale) .ringScale(yScale); // Circular Labels - const circularSectorLabels = component.circularSectorLabels() + const componentCircularSectorLabels = component.circularSectorLabels() .ringScale(yScale) .radialScale(xScale) .textAnchor("middle"); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) + .classed("series", true) + .merge(series) .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) - .call(circularAxis) - .call(circularSectorLabels) - .call(polarArea); + .call(componentPolarArea); - seriesGroup.exit() + series.exit() .remove(); + // Axis Labels + if (showAxis) { + const seriesAxis = chartSelect.select(".axis") + .selectAll(".seriesAxis") + .data(data); + + seriesAxis.enter() + .append("g") + .classed("seriesAxis", true) + .merge(seriesAxis) + .attr("transform", (d, i) => `translate(${layout[i].x},${layout[i].y})`) + .call(componentCircularAxis) + .call(componentCircularSectorLabels); + + seriesAxis.exit() + .remove(); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } + // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -218,6 +257,54 @@ export default function() { return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * diff --git a/src/chart/punchCard.js b/src/chart/punchCard.js index 02936d2..5d37ddb 100644 --- a/src/chart/punchCard.js +++ b/src/chart/punchCard.js @@ -15,13 +15,17 @@ export default function() { let classed = "punchCard"; let width = 700; let height = 400; - let margin = { top: 40, right: 40, bottom: 40, left: 40 }; + let margin = { top: 40, right: 40, bottom: 70, left: 70 }; let colors = [d3.rgb("steelblue").brighter(), d3.rgb("steelblue").darker()]; let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; let showAxis = true; let minRadius = 2; let maxRadius = 20; @@ -48,11 +52,12 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); const { rowKeys, columnKeys, valueExtent } = dataTransform(data).summary(); @@ -76,35 +81,35 @@ export default function() { .domain(sizeExtent) .range([minRadius, maxRadius]); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["xAxis axis", "yAxis axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - const layers = ["xAxis axis", "yAxis axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Proportional Area Circles - const proportionalAreaCircles = component.proportionalAreaCircles() + const componentProportionalAreaCircles = component.proportionalAreaCircles() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -114,50 +119,66 @@ export default function() { .transition(transition); // Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") .data(data); - seriesGroup.enter() + series.enter() .append("g") - .attr("class", "seriesGroup") - .merge(seriesGroup) + .attr("class", "series") + .merge(series) .attr("transform", (d) => `translate(0,${yScale(d.key)})`) - .call(proportionalAreaCircles); + .call(componentProportionalAreaCircles); - seriesGroup.exit() + series.exit() .remove(); - // X-Axis - const xAxis = d3.axisTop(xScale); - - containerEnter.select(".xAxis") - .call(xAxis) - .selectAll("text") - .attr("y", 0) - .attr("x", -8) - .attr("transform", "rotate(60)") - .style("text-anchor", "end"); - - // Y-Axis + // Axis + const xAxis = d3.axisBottom(xScale); const yAxis = d3.axisLeft(yScale); + if (showAxis) { + // X-Axis + chartSelect.select(".xAxis") + .attr("transform", `translate(0,${chartH})`) + .call(xAxis) + .selectAll("text") + .attr("y", 0) + .attr("x", -8) + .attr("transform", "rotate(300)") + .style("text-anchor", "end"); + + // Y-Axis + chartSelect.select(".yAxis") + .call(yAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } - containerEnter.select(".yAxis") - .call(yAxis); + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); - containerEnter.selectAll(".axis") - .attr("opacity", showAxis ? 1 : 0); + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .sizeScale(sizeScale) - .height(legendH) - .width(legendW) - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .sizeScale(sizeScale) + .height(legendH) + .width(legendW) + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -209,6 +230,30 @@ export default function() { return this; }; + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * @@ -269,6 +314,18 @@ export default function() { return this; }; + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + /** * Transition Getter / Setter * diff --git a/src/chart/radarChart.js b/src/chart/radarChart.js index 70a0679..fabdf4b 100644 --- a/src/chart/radarChart.js +++ b/src/chart/radarChart.js @@ -15,13 +15,18 @@ export default function() { let classed = "radarChart"; let width = 700; let height = 400; - let margin = { top: 20, right: 20, bottom: 20, left: 20 }; + let margin = { top: 40, right: 40, bottom: 40, left: 40 }; let colors = palette.categorical(3); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; + let showAxis = true; let startAngle = 0; let endAngle = 360; @@ -46,12 +51,13 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); - const radius = Math.min(chartW, chartH) / 2.5; + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); + const radius = Math.min(chartW, chartH) / 2.3; const { rowKeys, columnKeys, valueMax } = dataTransform(data).summary(); const valueExtent = [0, valueMax]; @@ -69,36 +75,35 @@ export default function() { .domain(rowKeys) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - // Update the chart dimensions and container and layer groups - const layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Radar Component - const radarArea = component.radarArea() + const componentRadarArea = component.radarArea() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -107,47 +112,67 @@ export default function() { .transition(transition); // Circular Axis - const circularAxis = component.circularAxis() + const componentCircularAxis = component.circularAxis() .radialScale(xScale) .ringScale(yScale) .showAxis(false); // Circular Labels - const circularSectorLabels = component.circularSectorLabels() + const componentCircularSectorLabels = component.circularSectorLabels() .ringScale(yScale) .radialScale(xScale) .textAnchor("middle"); // Create Radars - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) + .classed("series", true) .attr("fill", (d) => colorScale(d.key)) .style("stroke", (d) => colorScale(d.key)) - .merge(seriesGroup) - .call(radarArea) - .attr("transform", `translate(${chartW / 2},${chartH / 2})`); + .merge(series) + .attr("transform", `translate(${chartW / 2},${(chartH / 2)})`) + .call(componentRadarArea); - containerEnter.select(".axis") - .attr("transform", `translate(${chartW / 2},${chartH / 2})`) - .call(circularSectorLabels) - .call(circularAxis); + // Axis Labels + if (showAxis) { + chartSelect.select(".axis") + .attr("transform", `translate(${chartW / 2},${chartH / 2})`) + .call(componentCircularSectorLabels) + .call(componentCircularAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -199,6 +224,54 @@ export default function() { return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * diff --git a/src/chart/roseChart.js b/src/chart/roseChart.js index 0283e6b..7dcd940 100644 --- a/src/chart/roseChart.js +++ b/src/chart/roseChart.js @@ -15,13 +15,18 @@ export default function() { let classed = "roseChart"; let width = 700; let height = 400; - let margin = { top: 20, right: 20, bottom: 20, left: 20 }; + let margin = { top: 40, right: 40, bottom: 40, left: 40 }; let colors = palette.categorical(3); let transition = { ease: d3.easeLinear, duration: 0 }; let dispatch = d3.dispatch("customValueMouseOver", "customValueMouseOut", "customValueClick", "customSeriesMouseOver", "customSeriesMouseOut", "customSeriesClick"); /* Other Customisation Options */ + let title = null; + let subTitle = null; + let legendTitle = "Key"; let opacity = 1; + let showLegend = false; + let showAxis = true; let stacked = true; /** @@ -45,12 +50,13 @@ export default function() { selection.each(function(data) { // Set up margins and dimensions for the chart - const legendW = 120; - const legendPad = 15; + const legendW = showLegend ? 120 : 0; + const legendH = Math.max(height / 2.5, 100); + const legendPad = showLegend ? 15 : 0; + const titleH = title ? 40 : 0; const chartW = Math.max((width - margin.left - legendPad - legendW - margin.right), 100); - const chartH = Math.max((height - margin.top - margin.bottom), 100); - const legendH = Math.max(chartH / 2, 100); - const radius = Math.min(chartW, chartH) / 2; + const chartH = Math.max((height - margin.top - titleH - margin.bottom), 100); + const radius = Math.min(chartW, chartH) / 2.3; const innerRadius = 0; let { rowKeys, columnKeys, valueMin, valueMax, valueExtentStacked } = dataTransform(data).summary(); @@ -71,36 +77,35 @@ export default function() { .domain(columnKeys) .range(colors); + // Add Title, Chart and Legend main layer groups + const mainLayers = ["title", "chart", "legend"]; svg.classed("d3ez", true) .attr("width", width) - .attr("height", height); - - // Update the chart dimensions and container and layer groups - const container = svg.selectAll(".container") - .data([data]); + .attr("height", height) + .selectAll("g") + .data(mainLayers) + .enter() + .append("g") + .attr("class", (d) => d); - container.exit() - .remove(); + const titleSelect = svg.select(".title"); + const chartSelect = svg.select(".chart"); + const legendSelect = svg.select(".legend"); - const containerEnter = container.enter() - .append("g") - .classed("container", true) - .classed(classed, true) - .merge(container) - .attr("transform", `translate(${margin.left},${margin.top})`) + // Update the chart dimensions and layer groups + const chartLayers = ["axis", "seriesGroup"]; + chartSelect.classed(classed, true) .attr("width", chartW) - .attr("height", chartH); - - // Update the chart dimensions and container and layer groups - const layers = ["axis", "chart", "legend"]; - containerEnter.selectAll("g") - .data(layers) + .attr("height", chartH) + .attr("transform", `translate(${margin.left},${margin.top + titleH})`) + .selectAll("g") + .data(chartLayers) .enter() .append("g") .attr("class", (d) => d); // Rose Sectors - const roseChartSector = component.roseChartSector() + const componentRoseChartSector = component.roseChartSector() .xScale(xScale) .yScale(yScale) .colorScale(colorScale) @@ -110,51 +115,70 @@ export default function() { .transition(transition); // Circular Axis - const circularAxis = component.circularAxis() + const componentCircularAxis = component.circularAxis() .radialScale(xScale) .ringScale(yScale); // Circular Labels - const circularSectorLabels = component.circularSectorLabels() + const componentCircularSectorLabels = component.circularSectorLabels() .ringScale(yScale) .radialScale(xScale) .textAnchor("middle") .capitalizeLabels(true); // Create Series Group - const seriesGroup = containerEnter.select(".chart") - .selectAll(".seriesGroup") - .data((d) => d); + const series = chartSelect.select(".seriesGroup") + .selectAll(".series") + .data(data); - seriesGroup.enter() + series.enter() .append("g") - .classed("seriesGroup", true) - .merge(seriesGroup) - .attr("transform", `translate(${chartW / 2},${chartH / 2})`) + .classed("series", true) + .merge(series) + .attr("transform", `translate(${chartW / 2},${(chartH / 2)})`) .each(function() { - d3.select(this).call(roseChartSector); + d3.select(this).call(componentRoseChartSector); }); - seriesGroup.exit() + series.exit() .remove(); - // Outer Ring Labels - containerEnter.select(".axis") - .attr("transform", `translate(${chartW / 2},${chartH / 2})`) - .call(circularSectorLabels) - .call(circularAxis); + // Axis Labels + if (showAxis) { + chartSelect.select(".axis") + .attr("transform", `translate(${chartW / 2},${(chartH / 2)})`) + .call(componentCircularSectorLabels) + .call(componentCircularAxis); + } else { + chartSelect.selectAll(".axis").selectAll('*').remove(); + } + + // Title + if (title) { + const componentTitle = component.title() + .mainText(title) + .subText(subTitle); + + titleSelect.attr("transform", `translate(${width / 2},${margin.top})`) + .call(componentTitle); + } else { + titleSelect.selectAll("*").remove(); + } // Legend - const legend = component.legend() - .colorScale(colorScale) - .height(legendH) - .width(legendW) - .itemType("rect") - .opacity(opacity); - - containerEnter.select(".legend") - .attr("transform", `translate(${chartW + legendPad},0)`) - .call(legend); + if (showLegend) { + const componentLegend = component.legend() + .colorScale(colorScale) + .height(legendH) + .width(legendW) + .itemType("rect") + .opacity(opacity); + + legendSelect.attr("transform", `translate(${margin.left + chartW + legendPad},${margin.top})`) + .call(componentLegend); + } else { + legendSelect.selectAll("*").remove(); + } }); } @@ -206,6 +230,54 @@ export default function() { return this; }; + /** + * Show Axis Getter / Setter + * + * @param {Boolean} _v - Show axis true / false. + * @returns {*} + */ + my.showAxis = function(_v) { + if (!arguments.length) return showAxis; + showAxis = _v; + return this; + }; + + /** + * Show Legend Getter / Setter + * + * @param {Boolean} _v - Show legend true / false. + * @returns {*} + */ + my.showLegend = function(_v) { + if (!arguments.length) return showLegend; + showLegend = _v; + return this; + }; + + /** + * Title Getter / Setter + * + * @param {string} _v - Title text. + * @returns {*} + */ + my.title = function(_v) { + if (!arguments.length) return title; + title = _v; + return this; + }; + + /** + * SubTitle Getter / Setter + * + * @param {string} _v - SubTitle text. + * @returns {*} + */ + my.subTitle = function(_v) { + if (!arguments.length) return subTitle; + subTitle = _v; + return this; + }; + /** * Opacity Getter / Setter * diff --git a/src/component.js b/src/component.js index fd76b2d..425ef1a 100644 --- a/src/component.js +++ b/src/component.js @@ -25,6 +25,7 @@ import componentProportionalAreaCircles from "./component/proportionalAreaCircle import componentRadarArea from "./component/radarArea.js"; import componentRoseChartSector from "./component/roseChartSector.js"; import componentScatterPlot from "./component/scatterPlot.js"; +import componentTitle from "./component/title.js"; export default { barsCircular: componentBarsCircular, @@ -53,5 +54,6 @@ export default { proportionalAreaCircles: componentProportionalAreaCircles, radarArea: componentRadarArea, roseChartSector: componentRoseChartSector, - scatterPlot: componentScatterPlot + scatterPlot: componentScatterPlot, + title: componentTitle }; diff --git a/src/component/legendSize.js b/src/component/legendSize.js index a3c272a..bf3e71d 100644 --- a/src/component/legendSize.js +++ b/src/component/legendSize.js @@ -83,7 +83,7 @@ export default function() { .attr("fill", "#cad4e7") .attr("stroke", "#cad4e7") .attr("stroke-width", 1) - .attr("fill-opacity", opacity / 2); + .attr("fill-opacity", opacity); itemsEnter.append("text") .attr("font-size", "0.9em") diff --git a/src/component/title.js b/src/component/title.js new file mode 100644 index 0000000..c23178f --- /dev/null +++ b/src/component/title.js @@ -0,0 +1,105 @@ +import * as d3 from "d3"; + +/** + * Reusable Title Component + * + * @module + */ +export default function() { + + /* Default Properties */ + let mainText = "Title"; + let subText = "Sub Title"; + let height = 40; + let width = 200; + + /** + * Constructor + * + * @constructor + * @alias title + * @param {d3.selection} selection - The chart holder D3 selection. + */ + function my(selection) { + selection.selectAll("#titleGroup") + .data([0]) + .enter() + .append("g") + .attr("id", "titleGroup"); + const titleGroup = selection.select("#titleGroup"); + + titleGroup.selectAll(".title").data([mainText]) + .enter() + .append("text") + .classed("title", true) + .text((d) => d) + .attr("fill", "currentColor"); + const title = titleGroup.select(".title").text(mainText); + + titleGroup.selectAll(".subTitle").data([subText]) + .enter() + .append("text") + .classed("subTitle", true) + .text((d) => d) + .attr("fill", "currentColor"); + const subTitle = titleGroup.select(".subTitle").text(subText); + + // Centre Text + // const titleOffset = 0 - (title.node().getBBox().width / 2); + title.style("text-anchor", "middle") + .attr("transform", "translate(0, 15)"); + // const subTitleOffset = 0 - (subTitle.node().getBBox().width / 2); + subTitle.style("text-anchor", "middle") + .attr("transform", "translate(0, 30)"); + } + + /** + * Width Getter / Setter + * + * @param {number} _v - Width in px. + * @returns {*} + */ + my.width = function(_v) { + if (!arguments.length) return width; + width = _v; + return this; + }; + + /** + * Height Getter / Setter + * + * @param {number} _v - Height in px. + * @returns {*} + */ + my.height = function(_v) { + if (!arguments.length) return height; + height = _v; + return this; + }; + + /** + * Main Text Getter / Setter + * + * @param {string} _v - Main text title. + * @returns {*} + */ + my.mainText = function(_v) { + if (!arguments.length) return mainText; + mainText = _v; + return this; + }; + + /** + * Sub Text Getter / Setter + * + * @param {string} _v - Sub text description. + * @returns {*} + */ + my.subText = function(_v) { + if (!arguments.length) return subText; + subText = _v; + return this; + }; + + return my; +}