From f27bb1a474b6245a7eac141ca347cb05af2c1272 Mon Sep 17 00:00:00 2001 From: yanofsky Date: Thu, 17 Sep 2015 08:01:07 -0700 Subject: [PATCH 1/5] add subtitle --- src/js/components/ChartMetadata.jsx | 1 + src/js/components/RendererWrapper.jsx | 15 ++++++++++++++- src/styl/chart-renderer.styl | 4 ++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/js/components/ChartMetadata.jsx b/src/js/components/ChartMetadata.jsx index 55ff7052..6bed5168 100644 --- a/src/js/components/ChartMetadata.jsx +++ b/src/js/components/ChartMetadata.jsx @@ -41,6 +41,7 @@ var chart_sizes = [ var text_input_values = [ { name: "title", content: "Title" }, + { name: "subtitle", content: "Subtitle"}, { name: "credit", content: "Credit" }, { name: "source", content: "Source" } ]; diff --git a/src/js/components/RendererWrapper.jsx b/src/js/components/RendererWrapper.jsx index db9008c5..849d1bfc 100644 --- a/src/js/components/RendererWrapper.jsx +++ b/src/js/components/RendererWrapper.jsx @@ -246,7 +246,7 @@ var RendererWrapper = React.createClass({ var margin = this.state.chartConfig.display.margin; var metadataSvg = []; - var title; + var title,subtitle; var translate = { top: margin.top, @@ -269,6 +269,19 @@ var RendererWrapper = React.createClass({ metadataSvg.push(title); } + if (metadata.subtitle && metadata.subtitle !== "") { + subtitle = ( + + ); + metadataSvg.push(subtitle); + } + metadataSvg.push( Date: Thu, 17 Sep 2015 08:02:10 -0700 Subject: [PATCH 2/5] magic number spacing --- src/js/components/RendererWrapper.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/components/RendererWrapper.jsx b/src/js/components/RendererWrapper.jsx index 849d1bfc..8630f2b3 100644 --- a/src/js/components/RendererWrapper.jsx +++ b/src/js/components/RendererWrapper.jsx @@ -261,7 +261,7 @@ var RendererWrapper = React.createClass({ From 95f12cf8f7dea2b6eaf779a5b1998723713e858c Mon Sep 17 00:00:00 2001 From: golfecholima Date: Tue, 26 Jan 2016 17:30:26 -0500 Subject: [PATCH 3/5] adds optional subtitle --- .../charts/cb-chart-grid/chart-grid-config.js | 11 +++++---- .../cb-chart-grid/chart-grid-dimensions.js | 2 ++ src/js/charts/cb-xy/xy-config.js | 11 +++++---- src/js/components/ChartMetadata.jsx | 7 +++--- src/js/components/RendererWrapper.jsx | 21 ++++++++-------- .../components/chart-grid/ChartGridBars.jsx | 5 +++- .../chart-grid/ChartGridRenderer.jsx | 24 +++++++++++++++++++ src/js/components/chart-grid/ChartGridXY.jsx | 4 +++- src/js/components/chart-xy/XYRenderer.jsx | 23 ++++++++++++++---- src/styl/chart-renderer.styl | 6 ++--- 10 files changed, 83 insertions(+), 31 deletions(-) diff --git a/src/js/charts/cb-chart-grid/chart-grid-config.js b/src/js/charts/cb-chart-grid/chart-grid-config.js index cb65f044..026400ba 100644 --- a/src/js/charts/cb-chart-grid/chart-grid-config.js +++ b/src/js/charts/cb-chart-grid/chart-grid-config.js @@ -10,6 +10,7 @@ var ChartConfig = require("../ChartConfig"); * @static * @memberof chart_grid_config * @property {Nem|number} afterTitle - Distance btwn top of title and top of legend or chart +* @property {Nem|number} afterSub - Distance btwn top of sub and top of legend or chart * @property {Nem|number} afterLegend - Distance btwn top of legend and top of chart * @property {Nem|number} blockerRectOffset - Distance btwn text of axis and its background blocker * @property {Nem|number} paddingBerBar - Space btwn two bars in a bar grid @@ -24,7 +25,8 @@ var ChartConfig = require("../ChartConfig"); * @property {object} padding - Distances btwn inner chart elements and container */ var display = { - afterTitle: "1.25em", // distance between top of title and top of legend or chart + afterTitle: "1.25em", // distance between top of title and top of sub, legend or chart + afterSub: "1em", // distance between top of sub and top of legend or chart afterLegend: "0.5em", // distance between top of legend and top of chart blockerRectOffset: 6, // distance between text and background blocker rect paddingPerBar: "0.7em", // extra space around bars @@ -36,9 +38,9 @@ var display = { xy: require("../cb-xy/xy-config").display, margin: { top: "0.8em", - right: "0.25em", - bottom: "0.15em", - left: "0.25em" + right: "0.5em", + bottom: "0.5em", + left: "0.5em" }, padding: { top: "0.5em", @@ -117,6 +119,7 @@ var defaultProps = { id: null, chartType: "chartgrid", title: "", + sub: "", source: "", credit: "Made with Chartbuilder", size: "auto" diff --git a/src/js/charts/cb-chart-grid/chart-grid-dimensions.js b/src/js/charts/cb-chart-grid/chart-grid-dimensions.js index 64242e39..bf0e05c3 100644 --- a/src/js/charts/cb-chart-grid/chart-grid-dimensions.js +++ b/src/js/charts/cb-chart-grid/chart-grid-dimensions.js @@ -27,6 +27,8 @@ function chartGridDimensions(width, opts) { if (model.metadata.title.length > 0 && opts.showMetadata) { height += opts.displayConfig.afterTitle; + } else if (model.metadata.sub.length > 0 && opts.showMetadata) { + height += opts.displayConfig.afterTitle + opts.displayConfig.afterSub; } else if (!opts.showMetadata) { height -= opts.displayConfig.padding.bottom; } diff --git a/src/js/charts/cb-xy/xy-config.js b/src/js/charts/cb-xy/xy-config.js index 3df6a24a..f19c87ba 100644 --- a/src/js/charts/cb-xy/xy-config.js +++ b/src/js/charts/cb-xy/xy-config.js @@ -14,7 +14,8 @@ var ChartConfig = require("../ChartConfig"); * @property {Nem|number} labelTextMargin - Horiz distance btwn label rect and text * @property {Nem|number} labelRowHeight - Vert distance btwn rows of labels * items with colors the appropriate indexed CSS class -* @property {Nem|number} afterTitle - Distance btwn top of title and top of legend or chart +* @property {Nem|number} afterTitle - Distance btwn top of title and top of legend, sub or chart +* @property {Nem|number} afterSub - Distance btwn top of sub and top of legend or chart * @property {Nem|number} afterLegend - Distance btwn top of legend and top of chart * @property {Nem|number} blockerRectOffset - Distance btwn text of axis and its background blocker * @property {Nem|number} columnPaddingCoefficient - Distance relative to @@ -35,6 +36,7 @@ var display = { labelTextMargin: "0.3em", labelRowHeight: "1.2em", afterTitle: "1.6em", + afterSub: "1em", afterLegend: "1.6em", blockerRectOffset: "0.3em", columnPaddingCoefficient: 0.3, @@ -47,9 +49,9 @@ var display = { }, margin: { top: "0.8em", - right: "0.25em", - bottom: "0.15em", - left: "0.25em" + right: "0.5em", + bottom: "0.5em", + left: "0.5em" }, padding: { top: 0, @@ -134,6 +136,7 @@ var defaultProps = { metadata: { chartType: 'xy', title: "", + sub: "", source: "", credit: "Made with Chartbuilder", size: "auto" diff --git a/src/js/components/ChartMetadata.jsx b/src/js/components/ChartMetadata.jsx index 6bed5168..87676c4a 100644 --- a/src/js/components/ChartMetadata.jsx +++ b/src/js/components/ChartMetadata.jsx @@ -1,5 +1,5 @@ // Component that handles global metadata, ie data that is universal regardless -// of chart type. Eg title, source, credit, size. +// of chart type. Eg title, sub, source, credit, size. var React = require("react"); var PropTypes = React.PropTypes; @@ -41,7 +41,7 @@ var chart_sizes = [ var text_input_values = [ { name: "title", content: "Title" }, - { name: "subtitle", content: "Subtitle"}, + { name: "sub", content: "Sub" }, { name: "credit", content: "Credit" }, { name: "source", content: "Source" } ]; @@ -64,6 +64,7 @@ var ChartMetadata = React.createClass({ size: PropTypes.string.isRequired, source: PropTypes.string, credit: PropTypes.string, + sub: PropTypes.string, title: PropTypes.string }), stepNumber: PropTypes.string, @@ -105,7 +106,7 @@ var ChartMetadata = React.createClass({

{this.props.stepNumber} - Set title, source, credit and size + Set title, sub, source, credit and size

{textInputs} {this.props.additionalComponents} diff --git a/src/js/components/RendererWrapper.jsx b/src/js/components/RendererWrapper.jsx index 8630f2b3..a747ffbc 100644 --- a/src/js/components/RendererWrapper.jsx +++ b/src/js/components/RendererWrapper.jsx @@ -246,7 +246,8 @@ var RendererWrapper = React.createClass({ var margin = this.state.chartConfig.display.margin; var metadataSvg = []; - var title,subtitle; + var title; + var sub; var translate = { top: margin.top, @@ -261,7 +262,7 @@ var RendererWrapper = React.createClass({ @@ -269,17 +270,17 @@ var RendererWrapper = React.createClass({ metadataSvg.push(title); } - if (metadata.subtitle && metadata.subtitle !== "") { - subtitle = ( + if (metadata.sub && metadata.sub !== "") { + sub = ( ); - metadataSvg.push(subtitle); + metadataSvg.push(sub); } metadataSvg.push( @@ -332,4 +333,4 @@ var RendererWrapper = React.createClass({ }); -module.exports = RendererWrapper; +module.exports = RendererWrapper; \ No newline at end of file diff --git a/src/js/components/chart-grid/ChartGridBars.jsx b/src/js/components/chart-grid/ChartGridBars.jsx index 80521ce4..fba8df92 100644 --- a/src/js/components/chart-grid/ChartGridBars.jsx +++ b/src/js/components/chart-grid/ChartGridBars.jsx @@ -93,7 +93,10 @@ var ChartGridBars = React.createClass({ /* Height of each grid block */ dimensionsPerGrid.height = (dimensions.height) / chartProps._grid.rows; - if (this.props.hasTitle) { + if (this.props.hasBoth) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub; + dimensionsPerGrid.height -= displayConfig.afterTitle + displayConfig.afterSub; + } else if (this.props.hasTitle) { extraPadding.top = extraPadding.top + displayConfig.afterTitle; dimensionsPerGrid.height -= displayConfig.afterTitle; } diff --git a/src/js/components/chart-grid/ChartGridRenderer.jsx b/src/js/components/chart-grid/ChartGridRenderer.jsx index 91f16467..b4aad62a 100644 --- a/src/js/components/chart-grid/ChartGridRenderer.jsx +++ b/src/js/components/chart-grid/ChartGridRenderer.jsx @@ -94,6 +94,30 @@ var ChartGridRenderer = React.createClass({ /> ); } + + /* Pass a boolean that detects whether there is a title and sub*/ + var hasBoth = (this.props.metadata.title.length > 0 && this.props.metadata.sub.length > 0 && this.props.showMetadata); + + /* Choose between grid of bars and grid of XY, and transfer all props to + * relevant component + */ + if (this.props.chartProps._grid.type == "bar") { + gridTypeRenderer = ( + + ); + } else { + gridTypeRenderer = ( + + ); + } return gridTypeRenderer; } }); diff --git a/src/js/components/chart-grid/ChartGridXY.jsx b/src/js/components/chart-grid/ChartGridXY.jsx index 62e50e37..e737bfa1 100644 --- a/src/js/components/chart-grid/ChartGridXY.jsx +++ b/src/js/components/chart-grid/ChartGridXY.jsx @@ -94,7 +94,9 @@ var ChartGridXY = React.createClass({ var dimensions = clone(this.props.dimensions); - if (this.props.hasTitle) { + if (this.props.hasBoth) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub; + } else if (this.props.hasTitle) { extraPadding.top = extraPadding.top + displayConfig.afterTitle; } diff --git a/src/js/components/chart-xy/XYRenderer.jsx b/src/js/components/chart-xy/XYRenderer.jsx index 114a2602..fdf83567 100644 --- a/src/js/components/chart-xy/XYRenderer.jsx +++ b/src/js/components/chart-xy/XYRenderer.jsx @@ -132,10 +132,11 @@ var XYRenderer = React.createClass({ // apply `chartSettings` to data var dataWithSettings = this._applySettingsToData(_chartProps); - // compute margin based on existence of labels and title, based on default + // compute margin based on existence of labels and titles, based on default // margin set in config var labels = _chartProps._annotations.labels; var hasTitle = (this.props.metadata.title.length > 0 && this.props.showMetadata); + var hasBoth = (this.props.metadata.title.length > 0 && this.props.metadata.sub.length > 0 && this.props.showMetadata); // compute the max tick width for each scale each(scaleNames, function(scaleKey) { @@ -196,6 +197,7 @@ var XYRenderer = React.createClass({ key="xy-chart" chartProps={_chartProps} hasTitle={hasTitle} + hasBoth={hasBoth} displayConfig={this.props.displayConfig} styleConfig={this.props.styleConfig} data={dataWithSettings} @@ -215,6 +217,7 @@ var XYRenderer = React.createClass({ chartAreaDimensions={chartAreaDimensions} data={dataWithSettings} hasTitle={hasTitle} + hasBoth={hasBoth} scale={scale} editable={this.props.editable} maxTickWidth={this.state.maxTickWidth} @@ -235,6 +238,7 @@ var XYRenderer = React.createClass({ * propTypes: { * chartProps: PropTypes.object.isRequired, * hasTitle: PropTypes.bool.isRequired, + * hasBoth: PropTypes.bool.isRequired, * displayConfig: PropTypes.object.isRequired, * styleConfig: PropTypes.object.isRequired, * data: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -257,6 +261,7 @@ var XYChart = React.createClass({ propTypes: { chartProps: PropTypes.object.isRequired, hasTitle: PropTypes.bool.isRequired, + hasBoth: PropTypes.bool.isRequired, displayConfig: PropTypes.object.isRequired, styleConfig: PropTypes.object.isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -305,7 +310,9 @@ var XYChart = React.createClass({ componentWillReceiveProps: function(nextProps) { var yOffset; - if (nextProps.hasTitle) { + if (nextProps.hasBoth) { + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub; + } else if (nextProps.hasTitle) { yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle; } else { yOffset = nextProps.displayConfig.margin.top; @@ -367,6 +374,7 @@ var XYChart = React.createClass({ * propTypes: { * chartProps: PropTypes.object.isRequired, * hasTitle: PropTypes.bool.isRequired, + * hasBoth: PropTypes.bool.isRequired, * displayConfig: PropTypes.object.isRequired, * styleConfig: PropTypes.object.isRequired, * data: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -391,6 +399,7 @@ var XYLabels = React.createClass({ chartProps: PropTypes.object.isRequired, editable: PropTypes.bool, hasTitle: PropTypes.bool.isRequired, + hasBoth: PropTypes.bool.isRequired, displayConfig: PropTypes.object.isRequired, styleConfig: PropTypes.object.isRequired, data: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -421,7 +430,9 @@ var XYLabels = React.createClass({ // Determine how far down vertically the labels should be placed, depending // on presence (or not) of a title var yOffset; - if (nextProps.hasTitle) { + if (nextProps.hasBoth) { + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub; + } else if (nextProps.hasTitle) { yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle; } else { yOffset = nextProps.displayConfig.margin.top; @@ -876,9 +887,11 @@ function computePadding(props, chartHeight) { var displayConfig = props.displayConfig; var _top = (props.labelYMax * props.chartAreaDimensions.height) + displayConfig.afterLegend; - if (props.hasTitle) { + if (props.hasBoth) { + _top += displayConfig.afterTitle + displayConfig.afterSub; + } else if (props.hasTitle) { _top += displayConfig.afterTitle; - } + } // Maintain space between legend and chart area unless all legend labels // have been dragged diff --git a/src/styl/chart-renderer.styl b/src/styl/chart-renderer.styl index d79bdd2a..a0d8146d 100644 --- a/src/styl/chart-renderer.styl +++ b/src/styl/chart-renderer.styl @@ -140,9 +140,9 @@ svg fill $color-body-text font-family $font-sans font-size $em_size - &.svg-text-subtitle - fill $color-body-text - font-family $font-sans + &.svg-text-sub + fill $color-chart-axis-text + font-family $font-sans-light font-size $em_size .svg-source-pipe From 16efd13f25f987e6739947f9b376bdd7d2538ee3 Mon Sep 17 00:00:00 2001 From: yanofsky Date: Mon, 7 Mar 2016 15:04:08 -0800 Subject: [PATCH 4/5] removing magic numbers, changing title logic, introducing afterTopMeta --- .../charts/cb-chart-grid/chart-grid-config.js | 11 +++---- .../cb-chart-grid/chart-grid-dimensions.js | 8 +++-- src/js/charts/cb-xy/xy-config.js | 11 +++---- src/js/components/ChartMetadata.jsx | 9 ++++-- src/js/components/RendererWrapper.jsx | 29 +++++++++++-------- .../components/chart-grid/ChartGridBars.jsx | 12 ++++---- .../chart-grid/ChartGridRenderer.jsx | 11 ++----- src/js/components/chart-grid/ChartGridXY.jsx | 11 +++---- src/js/components/chart-xy/XYRenderer.jsx | 14 ++++----- 9 files changed, 63 insertions(+), 53 deletions(-) diff --git a/src/js/charts/cb-chart-grid/chart-grid-config.js b/src/js/charts/cb-chart-grid/chart-grid-config.js index 026400ba..64ca9cdd 100644 --- a/src/js/charts/cb-chart-grid/chart-grid-config.js +++ b/src/js/charts/cb-chart-grid/chart-grid-config.js @@ -25,8 +25,9 @@ var ChartConfig = require("../ChartConfig"); * @property {object} padding - Distances btwn inner chart elements and container */ var display = { - afterTitle: "1.25em", // distance between top of title and top of sub, legend or chart - afterSub: "1em", // distance between top of sub and top of legend or chart + afterTitle: "1.2em", // distance between top of title and top of sub, legend or chart + afterSub: "1.2em", // distance between top of sub and top of legend or chart + afterTopMeta: "0.2em", afterLegend: "0.5em", // distance between top of legend and top of chart blockerRectOffset: 6, // distance between text and background blocker rect paddingPerBar: "0.7em", // extra space around bars @@ -38,9 +39,9 @@ var display = { xy: require("../cb-xy/xy-config").display, margin: { top: "0.8em", - right: "0.5em", - bottom: "0.5em", - left: "0.5em" + right: "0.25em", + bottom: "0.15em", + left: "0.25em" }, padding: { top: "0.5em", diff --git a/src/js/charts/cb-chart-grid/chart-grid-dimensions.js b/src/js/charts/cb-chart-grid/chart-grid-dimensions.js index bf0e05c3..13a56a19 100644 --- a/src/js/charts/cb-chart-grid/chart-grid-dimensions.js +++ b/src/js/charts/cb-chart-grid/chart-grid-dimensions.js @@ -27,8 +27,12 @@ function chartGridDimensions(width, opts) { if (model.metadata.title.length > 0 && opts.showMetadata) { height += opts.displayConfig.afterTitle; - } else if (model.metadata.sub.length > 0 && opts.showMetadata) { - height += opts.displayConfig.afterTitle + opts.displayConfig.afterSub; + height += (opts.displayConfig.afterTopMeta || 0); + + if (model.metadata.sub.length > 0) { + height += opts.displayConfig.afterSub; + } + } else if (!opts.showMetadata) { height -= opts.displayConfig.padding.bottom; } diff --git a/src/js/charts/cb-xy/xy-config.js b/src/js/charts/cb-xy/xy-config.js index f19c87ba..5a76c486 100644 --- a/src/js/charts/cb-xy/xy-config.js +++ b/src/js/charts/cb-xy/xy-config.js @@ -35,8 +35,9 @@ var display = { labelXMargin: "0.6em", labelTextMargin: "0.3em", labelRowHeight: "1.2em", - afterTitle: "1.6em", - afterSub: "1em", + afterTitle: "1.2em", + afterSub: "1.2em", + afterTopMeta: "0.4em", afterLegend: "1.6em", blockerRectOffset: "0.3em", columnPaddingCoefficient: 0.3, @@ -49,9 +50,9 @@ var display = { }, margin: { top: "0.8em", - right: "0.5em", - bottom: "0.5em", - left: "0.5em" + right: "0.25em", + bottom: "0.15em", + left: "0.25em" }, padding: { top: 0, diff --git a/src/js/components/ChartMetadata.jsx b/src/js/components/ChartMetadata.jsx index 87676c4a..4f6ed46a 100644 --- a/src/js/components/ChartMetadata.jsx +++ b/src/js/components/ChartMetadata.jsx @@ -41,7 +41,7 @@ var chart_sizes = [ var text_input_values = [ { name: "title", content: "Title" }, - { name: "sub", content: "Sub" }, + { name: "sub", content: "Subtitle" }, { name: "credit", content: "Credit" }, { name: "source", content: "Source" } ]; @@ -100,13 +100,16 @@ var ChartMetadata = React.createClass({ placeholder={textInput.content} onChange={this._handleMetadataUpdate} /> - }, this); + }, this) + .filter(function(chart_meta_text){ + return chart_meta_text.key == "sub" ? (metadata.title.length > 0) : true; + }); return (

{this.props.stepNumber} - Set title, sub, source, credit and size + Set title, subtitle, source, credit and size

{textInputs} {this.props.additionalComponents} diff --git a/src/js/components/RendererWrapper.jsx b/src/js/components/RendererWrapper.jsx index a747ffbc..8edcbe75 100644 --- a/src/js/components/RendererWrapper.jsx +++ b/src/js/components/RendererWrapper.jsx @@ -107,6 +107,10 @@ var RendererWrapper = React.createClass({ chartProps = _chartProps; } var state = assign({}, { chartProps: chartProps }, size_calcs); + + // if there's no afterTopMeta use afterTitle + state.chartConfig.display.afterTopMeta = state.chartConfig.display.afterTopMeta || 0; + this.setState(state); }, @@ -268,19 +272,20 @@ var RendererWrapper = React.createClass({ /> ); metadataSvg.push(title); - } - if (metadata.sub && metadata.sub !== "") { - sub = ( - - ); - metadataSvg.push(sub); + // only display a subtitle if there's a title + if (metadata.sub && metadata.sub !== "") { + sub = ( + + ); + metadataSvg.push(sub); + } } metadataSvg.push( diff --git a/src/js/components/chart-grid/ChartGridBars.jsx b/src/js/components/chart-grid/ChartGridBars.jsx index fba8df92..fd17a1d9 100644 --- a/src/js/components/chart-grid/ChartGridBars.jsx +++ b/src/js/components/chart-grid/ChartGridBars.jsx @@ -93,12 +93,12 @@ var ChartGridBars = React.createClass({ /* Height of each grid block */ dimensionsPerGrid.height = (dimensions.height) / chartProps._grid.rows; - if (this.props.hasBoth) { - extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub; - dimensionsPerGrid.height -= displayConfig.afterTitle + displayConfig.afterSub; - } else if (this.props.hasTitle) { - extraPadding.top = extraPadding.top + displayConfig.afterTitle; - dimensionsPerGrid.height -= displayConfig.afterTitle; + if (this.props.metadata.hasBoth) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub + displayConfig.afterTopMeta; + dimensionsPerGrid.height -= displayConfig.afterTitle + displayConfig.afterSub + displayConfig.afterTopMeta; + } else if (this.props.metadata.hasTitle) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterTopMeta; + dimensionsPerGrid.height -= displayConfig.afterTitle + displayConfig.afterTopMeta; } diff --git a/src/js/components/chart-grid/ChartGridRenderer.jsx b/src/js/components/chart-grid/ChartGridRenderer.jsx index b4aad62a..31b4fa9d 100644 --- a/src/js/components/chart-grid/ChartGridRenderer.jsx +++ b/src/js/components/chart-grid/ChartGridRenderer.jsx @@ -71,8 +71,9 @@ var ChartGridRenderer = React.createClass({ var chartProps = update(_chartProps, { $merge: { scale: scale }}); - /* Pass a boolean that detects whether there is a title */ - var hasTitle = (this.props.metadata.title.length > 0 && this.props.showMetadata); + /* Pass a boolean that detects whether there is a title and sub*/ + this.props.metadata.hasTitle = this.props.metadata.title.length > 0 && this.props.showMetadata; + this.props.metadata.hasBoth = this.props.metadata.hasTitle && this.props.metadata.sub && this.props.metadata.sub.length > 0; /* Choose between grid of bars and grid of XY, and transfer all props to * relevant component @@ -82,7 +83,6 @@ var ChartGridRenderer = React.createClass({ ); } else { @@ -90,13 +90,10 @@ var ChartGridRenderer = React.createClass({ ); } - /* Pass a boolean that detects whether there is a title and sub*/ - var hasBoth = (this.props.metadata.title.length > 0 && this.props.metadata.sub.length > 0 && this.props.showMetadata); /* Choose between grid of bars and grid of XY, and transfer all props to * relevant component @@ -106,7 +103,6 @@ var ChartGridRenderer = React.createClass({ ); } else { @@ -114,7 +110,6 @@ var ChartGridRenderer = React.createClass({ ); } diff --git a/src/js/components/chart-grid/ChartGridXY.jsx b/src/js/components/chart-grid/ChartGridXY.jsx index e737bfa1..87a3d825 100644 --- a/src/js/components/chart-grid/ChartGridXY.jsx +++ b/src/js/components/chart-grid/ChartGridXY.jsx @@ -94,10 +94,11 @@ var ChartGridXY = React.createClass({ var dimensions = clone(this.props.dimensions); - if (this.props.hasBoth) { - extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub; - } else if (this.props.hasTitle) { - extraPadding.top = extraPadding.top + displayConfig.afterTitle; + + if (this.props.metadata.hasBoth) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterSub + displayConfig.afterTopMeta; + } else if (this.props.metadata.hasTitle) { + extraPadding.top = extraPadding.top + displayConfig.afterTitle + displayConfig.afterTopMeta; } /* Divide total width by number of grids, also subtracting the spade to be @@ -362,7 +363,7 @@ function drawXYChartGrid(el, state) { .left(function(y) { y.key("value") .domain(chartProps.scale.primaryScale.domain) - .range([this.height - this.padding.bottom, this.padding.top + displayConfig.afterTitle]); + .range([this.height - this.padding.bottom, this.padding.top + displayConfig.afterTitle + displayConfig.afterTopMeta]); }) .chartAreaOnTop(false) .mixout("rightAxis") diff --git a/src/js/components/chart-xy/XYRenderer.jsx b/src/js/components/chart-xy/XYRenderer.jsx index fdf83567..291e9ea0 100644 --- a/src/js/components/chart-xy/XYRenderer.jsx +++ b/src/js/components/chart-xy/XYRenderer.jsx @@ -136,7 +136,7 @@ var XYRenderer = React.createClass({ // margin set in config var labels = _chartProps._annotations.labels; var hasTitle = (this.props.metadata.title.length > 0 && this.props.showMetadata); - var hasBoth = (this.props.metadata.title.length > 0 && this.props.metadata.sub.length > 0 && this.props.showMetadata); + var hasBoth = hasTitle && this.props.metadata.sub.length > 0; // compute the max tick width for each scale each(scaleNames, function(scaleKey) { @@ -311,9 +311,9 @@ var XYChart = React.createClass({ componentWillReceiveProps: function(nextProps) { var yOffset; if (nextProps.hasBoth) { - yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub; + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub + nextProps.displayConfig.afterTopMeta; } else if (nextProps.hasTitle) { - yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle; + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterTopMeta; } else { yOffset = nextProps.displayConfig.margin.top; } @@ -431,9 +431,9 @@ var XYLabels = React.createClass({ // on presence (or not) of a title var yOffset; if (nextProps.hasBoth) { - yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub; + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterSub + nextProps.displayConfig.afterTopMeta; } else if (nextProps.hasTitle) { - yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle; + yOffset = nextProps.displayConfig.margin.top + nextProps.displayConfig.afterTitle + nextProps.displayConfig.afterTopMeta; } else { yOffset = nextProps.displayConfig.margin.top; } @@ -888,9 +888,9 @@ function computePadding(props, chartHeight) { var _top = (props.labelYMax * props.chartAreaDimensions.height) + displayConfig.afterLegend; if (props.hasBoth) { - _top += displayConfig.afterTitle + displayConfig.afterSub; + _top += displayConfig.afterTitle + displayConfig.afterSub + displayConfig.afterTopMeta; } else if (props.hasTitle) { - _top += displayConfig.afterTitle; + _top += displayConfig.afterTitle + displayConfig.afterTopMeta; } // Maintain space between legend and chart area unless all legend labels From 25c0d36d60c1b2cc3a571f12013cc21e9e292573 Mon Sep 17 00:00:00 2001 From: yanofsky Date: Mon, 7 Mar 2016 15:09:29 -0800 Subject: [PATCH 5/5] bumping version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4450195f..b1f6bec6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chartbuilder", - "version": "2.4.0", + "version": "2.6.0", "description": "Easily create beautiful charts", "main": "src/js/index.js", "scripts": {