From 9173a6bb0cc2a701d3bc6e0ea200a9e03b4ba864 Mon Sep 17 00:00:00 2001 From: Brian Beck Date: Fri, 1 Dec 2017 14:42:51 -0800 Subject: [PATCH 1/2] Add support for row gutters --- demo/victory-legend-demo.js | 9 ++++++++- package-lock.json | 2 +- src/victory-legend/helper-methods.js | 12 +++++++++--- src/victory-legend/victory-legend.js | 8 +++++++- 4 files changed, 25 insertions(+), 6 deletions(-) diff --git a/demo/victory-legend-demo.js b/demo/victory-legend-demo.js index 09c284f..77b1c47 100644 --- a/demo/victory-legend-demo.js +++ b/demo/victory-legend-demo.js @@ -69,7 +69,7 @@ const data = [{ const LegendDemo = () => (
@@ -137,6 +137,13 @@ const LegendDemo = () => ( data={data} style={legendStyle} /> + } diff --git a/package-lock.json b/package-lock.json index 7044613..6e2ea29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "victory-core", - "version": "20.0.0", + "version": "20.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/victory-legend/helper-methods.js b/src/victory-legend/helper-methods.js index f01f328..ff4821a 100644 --- a/src/victory-legend/helper-methods.js +++ b/src/victory-legend/helper-methods.js @@ -75,11 +75,13 @@ const groupData = (props) => { }; const getColumnWidths = (props, data) => { + const gutter = props.gutter || {}; + const columnGutter = (typeof gutter === "object" ? gutter.column : gutter) || 0; const dataByColumn = groupBy(data, "column"); const columns = keys(dataByColumn); return columns.reduce((memo, curr, index) => { const lengths = dataByColumn[curr].map((d) => { - return d.textSize.width + props.gutter + d.size + d.symbolSpacer; + return d.textSize.width + d.size + d.symbolSpacer + columnGutter; }); memo[index] = Math.max(...lengths); return memo; @@ -87,10 +89,15 @@ const getColumnWidths = (props, data) => { }; const getRowHeights = (props, data) => { + const gutter = props.gutter || {}; + // If `gutter` is a number, it only refers to column gutter. + const rowGutter = (typeof gutter === "object" ? gutter.row : 0) || 0; const dataByRow = groupBy(data, "row"); return keys(dataByRow).reduce((memo, curr, index) => { const rows = dataByRow[curr]; - const lengths = rows.map((d) => d.textSize.height + d.symbolSpacer); + const lengths = rows.map((d) => { + return d.textSize.height + d.symbolSpacer + rowGutter; + }); memo[index] = Math.max(...lengths); return memo; }, []); @@ -242,4 +249,3 @@ export default (props, fallbackProps) => { return childProps; }, initialProps); }; - diff --git a/src/victory-legend/victory-legend.js b/src/victory-legend/victory-legend.js index d215183..07fcb63 100644 --- a/src/victory-legend/victory-legend.js +++ b/src/victory-legend/victory-legend.js @@ -71,7 +71,13 @@ class VictoryLegend extends React.Component { eventHandlers: PropTypes.object })), groupComponent: PropTypes.element, - gutter: CustomPropTypes.nonNegative, + gutter: PropTypes.oneOfType([ + CustomPropTypes.nonNegative, + PropTypes.shape({ + column: CustomPropTypes.nonNegative, + row: CustomPropTypes.nonNegative + }) + ]), height: CustomPropTypes.nonNegative, itemsPerRow: CustomPropTypes.nonNegative, labelComponent: PropTypes.element, From c2cf2ae1e4fed37a6e45a31530388ccfc3d775db Mon Sep 17 00:00:00 2001 From: Brian Beck Date: Fri, 1 Dec 2017 16:01:44 -0800 Subject: [PATCH 2/2] Replace gutter={ column, row } with rowGutter prop --- demo/victory-legend-demo.js | 3 ++- src/victory-legend/helper-methods.js | 9 ++------- src/victory-legend/victory-legend.js | 9 ++------- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/demo/victory-legend-demo.js b/demo/victory-legend-demo.js index 77b1c47..026f7de 100644 --- a/demo/victory-legend-demo.js +++ b/demo/victory-legend-demo.js @@ -140,7 +140,8 @@ const LegendDemo = () => ( diff --git a/src/victory-legend/helper-methods.js b/src/victory-legend/helper-methods.js index ff4821a..a974a7b 100644 --- a/src/victory-legend/helper-methods.js +++ b/src/victory-legend/helper-methods.js @@ -75,13 +75,11 @@ const groupData = (props) => { }; const getColumnWidths = (props, data) => { - const gutter = props.gutter || {}; - const columnGutter = (typeof gutter === "object" ? gutter.column : gutter) || 0; const dataByColumn = groupBy(data, "column"); const columns = keys(dataByColumn); return columns.reduce((memo, curr, index) => { const lengths = dataByColumn[curr].map((d) => { - return d.textSize.width + d.size + d.symbolSpacer + columnGutter; + return d.textSize.width + d.size + d.symbolSpacer + (props.gutter || 0); }); memo[index] = Math.max(...lengths); return memo; @@ -89,14 +87,11 @@ const getColumnWidths = (props, data) => { }; const getRowHeights = (props, data) => { - const gutter = props.gutter || {}; - // If `gutter` is a number, it only refers to column gutter. - const rowGutter = (typeof gutter === "object" ? gutter.row : 0) || 0; const dataByRow = groupBy(data, "row"); return keys(dataByRow).reduce((memo, curr, index) => { const rows = dataByRow[curr]; const lengths = rows.map((d) => { - return d.textSize.height + d.symbolSpacer + rowGutter; + return d.textSize.height + d.symbolSpacer + (props.rowGutter || 0); }); memo[index] = Math.max(...lengths); return memo; diff --git a/src/victory-legend/victory-legend.js b/src/victory-legend/victory-legend.js index 07fcb63..20b4a41 100644 --- a/src/victory-legend/victory-legend.js +++ b/src/victory-legend/victory-legend.js @@ -71,13 +71,7 @@ class VictoryLegend extends React.Component { eventHandlers: PropTypes.object })), groupComponent: PropTypes.element, - gutter: PropTypes.oneOfType([ - CustomPropTypes.nonNegative, - PropTypes.shape({ - column: CustomPropTypes.nonNegative, - row: CustomPropTypes.nonNegative - }) - ]), + gutter: PropTypes.nonNegative, height: CustomPropTypes.nonNegative, itemsPerRow: CustomPropTypes.nonNegative, labelComponent: PropTypes.element, @@ -91,6 +85,7 @@ class VictoryLegend extends React.Component { right: PropTypes.number }) ]), + rowGutter: PropTypes.nonNegative, sharedEvents: PropTypes.shape({ events: PropTypes.array, getEventState: PropTypes.func