Add displayAllLabels option to PieChart (#113)

* add displayAllLabels prop to pie chart * update CHANGELOG.md * v7.3.0 * add sample to story
guern1kn · Dec 2, 2019 · ab25ed0 · ab25ed0
1 parent dfb525c
commit ab25ed0
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+# 7.3.0 - 11/18/19
+- [Feature] Add `displayAllLabels` to `PieChart` component
+
 # 7.2.0 - 11/18/19
 - [Feature] Add ability to have tooltip only show up on bar hover
 - [Fix] Fix linear guage tooltip not working correctly

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "reaviz",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Data Visualization using React and D3.js",
   "scripts": {
     "start": "start-storybook -p 9010 -s public",
@@ -99,7 +99,6 @@
     "@babel/cli": "^7.7.0",
     "@babel/core": "^7.7.2",
     "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "storybook-chroma": "^3.1.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@babel/plugin-proposal-optional-chaining": "^7.6.0",
@@ -152,6 +151,7 @@
     "rollup-plugin-typescript2": "^0.25.2",
     "sass-loader": "^8.0.0",
     "semver": "^6.3.0",
+    "storybook-chroma": "^3.1.0",
     "topojson-client": "^3.1.0",
     "ts-jest": "^24.1.0",
     "ts-loader": "^6.2.1",

diff --git a/src/PieChart/PieArcSeries/PieArcSeries.tsx b/src/PieChart/PieArcSeries/PieArcSeries.tsx
@@ -14,6 +14,7 @@ export interface PieArcSeriesProps {
   arcWidth: number;
   doughnut: boolean;
   explode: boolean;
+  displayAllLabels: boolean;
   height: number;
   width: number;
   label?: ReactElement<PieArcLabelProps, typeof PieArcLabel> | null;
@@ -31,6 +32,7 @@ export class PieArcSeries extends Component<PieArcSeriesProps> {
     colorScheme: 'cybertron',
     innerRadius: 0,
     explode: false,
+    displayAllLabels: false,
     arcWidth: 0.25,
     label: <PieArcLabel />,
     arc: <PieArc />
@@ -48,6 +50,12 @@ export class PieArcSeries extends Component<PieArcSeriesProps> {
     };
   }
 
+  shouldDisplayLabel(arcData) {
+    const { displayAllLabels } = this.props
+
+    return displayAllLabels || labelVisible(arcData)
+  }
+
   calculateLabelPositions(outerArc, outerRadius) {
     const { label, data } = this.props;
 
@@ -62,15 +70,15 @@ export class PieArcSeries extends Component<PieArcSeriesProps> {
 
       for (let i = 0; i < data.length - 1; i++) {
         const a = data[i];
-        if (!labelVisible(a)) {
+        if (!this.shouldDisplayLabel(a)) {
           continue;
         }
 
         const [aPosX, aPosY] = positions[i];
 
         for (let j = i + 1; j < data.length; j++) {
           const b = data[j];
-          if (!labelVisible(b)) {
+          if (!this.shouldDisplayLabel(b)) {
             continue;
           }
 
@@ -147,7 +155,7 @@ export class PieArcSeries extends Component<PieArcSeriesProps> {
       <Fragment>
         {data.map((arcData: any, index: number) => (
           <Fragment key={arcData.data.key.toString()}>
-            {label && labelVisible(arcData) && (
+            {label && this.shouldDisplayLabel(arcData) && (
               <CloneElement<PieArcLabelProps>
                 element={label}
                 data={arcData}

diff --git a/src/PieChart/PieChart.story.tsx b/src/PieChart/PieChart.story.tsx
@@ -48,6 +48,14 @@ storiesOf('Demos|Pie Chart/Pie', module)
   .add('Label Overlap', () => (
     <PieChart width={350} height={250} data={browserData} />
   ))
+  .add('Display All Labels', () => (
+    <PieChart
+      width={350}
+      height={250}
+      data={browserData}
+      displayAllLabels={true}
+    />
+  ))
   .add('Live Updating', () => <LiveUpdatingStory />)
   .add('Autosize', () => (
     <div style={{ width: '50vw', height: '50vh', border: 'solid 1px red' }}>

diff --git a/src/PieChart/PieChart.tsx b/src/PieChart/PieChart.tsx
@@ -22,6 +22,11 @@ interface PieChartProps extends ChartProps {
    */
   disabled?: boolean;
 
+  /**
+   * Whether to display labels even if their value has a small display radius.
+   */
+  displayAllLabels?: boolean;
+
   /**
    * The series component that renders the arc components.
    */
@@ -31,6 +36,7 @@ interface PieChartProps extends ChartProps {
 export class PieChart extends Component<PieChartProps> {
   static defaultProps: PieChartProps = {
     disabled: false,
+    displayAllLabels: false,
     data: [],
     margins: 10,
     series: (
@@ -39,6 +45,7 @@ export class PieChart extends Component<PieChartProps> {
         doughnut={false}
         innerRadius={0}
         arcWidth={0.25}
+        displayAllLabels={false}
       />
     )
   };
@@ -56,7 +63,7 @@ export class PieChart extends Component<PieChartProps> {
 
   renderChart(containerProps: ChartContainerChildProps) {
     const { chartWidth, chartHeight } = containerProps;
-    const { series } = this.props;
+    const { series, displayAllLabels } = this.props;
     const data = this.getData(this.props.data, this.props.series.props.explode);
 
     return (
@@ -65,6 +72,7 @@ export class PieChart extends Component<PieChartProps> {
         data={data}
         height={chartHeight}
         width={chartWidth}
+        displayAllLabels={displayAllLabels}
       />
     );
   }