From e391954ffcf4e82a2c2b151bb3f97dcb39ee347a Mon Sep 17 00:00:00 2001
From: Tom Robinson <tlrobinson@gmail.com>
Date: Mon, 21 Mar 2016 17:58:34 -0700
Subject: [PATCH] Hide donut detail if very small
---
frontend/src/visualizations/PieChart.jsx | 14 ++++++++++++--
.../visualizations/components/ChartWithLegend.css | 2 +-
2 files changed, 13 insertions(+), 3 deletions(-)
diff --git a/frontend/src/visualizations/PieChart.jsx b/frontend/src/visualizations/PieChart.jsx
index 8e135208c49..2fd3e8dcc70 100644
--- a/frontend/src/visualizations/PieChart.jsx
+++ b/frontend/src/visualizations/PieChart.jsx
@@ -37,6 +37,16 @@ export default class PieChart extends Component {
if (cols.length < 2) { throw new MinColumnsError(2, cols.length); }
}
+ componentDidUpdate() {
+ let groupElement = ReactDOM.findDOMNode(this.refs.group);
+ let detailElement = ReactDOM.findDOMNode(this.refs.detail);
+ if (groupElement.getBoundingClientRect().width < 100) {
+ detailElement.classList.add("hide");
+ } else {
+ detailElement.classList.remove("hide");
+ }
+ }
+
render() {
const { series, hovered, onHoverChange, className, gridSize } = this.props;
const { data } = series[0];
@@ -123,13 +133,13 @@ export default class PieChart extends Component {
hovered={hovered} onHoverChange={(d) => onHoverChange && onHoverChange(d && { ...d, ...hoverForIndex(d.index) })}
>
<div className={styles.ChartAndDetail}>
- <div className={styles.Detail}>
+ <div ref="detail" className={styles.Detail}>
<div className={styles.Value}>{value}</div>
<div className={styles.Title}>{title}</div>
</div>
<div className={styles.Chart}>
<svg className={styles.Donut+ " m1"} viewBox="0 0 100 100">
- <g transform={`translate(50,50)`}>
+ <g ref="group" transform={`translate(50,50)`}>
{pie(slices).map((slice, index) =>
<path
key={index}
diff --git a/frontend/src/visualizations/components/ChartWithLegend.css b/frontend/src/visualizations/components/ChartWithLegend.css
index cab9676acb0..e8a4fe9312b 100644
--- a/frontend/src/visualizations/components/ChartWithLegend.css
+++ b/frontend/src/visualizations/components/ChartWithLegend.css
@@ -47,7 +47,7 @@
justify-content: space-around;
}
:local .ChartWithLegend.horizontal .Legend {
- flex-grow: 1;
+ flex-grow: 0;
flex-shrink: 1;
overflow: hidden;
}
--
GitLab