fix(chord): skip rendering for zero/negative radius

plouc · Oct 25, 2018 · 647a496 · 647a496
1 parent a866586
commit 647a496
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/packages/chord/src/Chord.js b/packages/chord/src/Chord.js
@@ -83,46 +83,50 @@ const Chord = ({
                         margin={margin}
                         theme={theme}
                     >
-                        <g transform={`translate(${centerX}, ${centerY})`}>
-                            <ChordRibbons
-                                ribbons={ribbons}
-                                shapeGenerator={ribbonGenerator}
-                                borderWidth={ribbonBorderWidth}
-                                getBorderColor={getRibbonBorderColor}
-                                getOpacity={getRibbonOpacity}
-                                blendMode={ribbonBlendMode}
-                                setCurrent={setCurrentRibbon}
-                                theme={theme}
-                                tooltipFormat={tooltipFormat}
-                                showTooltip={showTooltip}
-                                hideTooltip={hideTooltip}
-                                {...motionProps}
-                            />
-                            <ChordArcs
-                                arcs={arcs}
-                                shapeGenerator={arcGenerator}
-                                borderWidth={arcBorderWidth}
-                                getBorderColor={getArcBorderColor}
-                                getOpacity={getArcOpacity}
-                                setCurrent={setCurrentArc}
-                                theme={theme}
-                                tooltipFormat={tooltipFormat}
-                                showTooltip={showTooltip}
-                                hideTooltip={hideTooltip}
-                                {...motionProps}
-                            />
-                            {enableLabel && (
-                                <ChordLabels
+                        {radius > 0 && (
+                            <g transform={`translate(${centerX}, ${centerY})`}>
+                                {radius > 0 && (
+                                    <ChordRibbons
+                                        ribbons={ribbons}
+                                        shapeGenerator={ribbonGenerator}
+                                        borderWidth={ribbonBorderWidth}
+                                        getBorderColor={getRibbonBorderColor}
+                                        getOpacity={getRibbonOpacity}
+                                        blendMode={ribbonBlendMode}
+                                        setCurrent={setCurrentRibbon}
+                                        theme={theme}
+                                        tooltipFormat={tooltipFormat}
+                                        showTooltip={showTooltip}
+                                        hideTooltip={hideTooltip}
+                                        {...motionProps}
+                                    />
+                                )}
+                                <ChordArcs
                                     arcs={arcs}
-                                    radius={radius + labelOffset}
-                                    rotation={labelRotation}
-                                    getLabel={getLabel}
-                                    getColor={getLabelTextColor}
+                                    shapeGenerator={arcGenerator}
+                                    borderWidth={arcBorderWidth}
+                                    getBorderColor={getArcBorderColor}
+                                    getOpacity={getArcOpacity}
+                                    setCurrent={setCurrentArc}
                                     theme={theme}
+                                    tooltipFormat={tooltipFormat}
+                                    showTooltip={showTooltip}
+                                    hideTooltip={hideTooltip}
                                     {...motionProps}
                                 />
-                            )}
-                        </g>
+                                {enableLabel && (
+                                    <ChordLabels
+                                        arcs={arcs}
+                                        radius={radius + labelOffset}
+                                        rotation={labelRotation}
+                                        getLabel={getLabel}
+                                        getColor={getLabelTextColor}
+                                        theme={theme}
+                                        {...motionProps}
+                                    />
+                                )}
+                            </g>
+                        )}
                         {legends.map((legend, i) => (
                             <BoxLegendSvg
                                 key={i}

diff --git a/packages/chord/src/ChordCanvas.js b/packages/chord/src/ChordCanvas.js
@@ -83,6 +83,9 @@ class ChordCanvas extends Component {
 
         this.ctx.fillStyle = theme.background
         this.ctx.fillRect(0, 0, outerWidth, outerHeight)
+
+        if (radius <= 0) return
+
         this.ctx.translate(centerX, centerY)
 
         this.ctx.font = `${theme.labels.text.fontSize}px sans-serif`