Skip to content
This repository has been archived by the owner on Aug 18, 2020. It is now read-only.

Commit

Permalink
fix(chart): Fix CircleChart resize issues
Browse files Browse the repository at this point in the history
== DETAILS
When a CircleChart is sized to anything other than 110x110 it's center is offset.
  • Loading branch information
ggascoigne committed Aug 9, 2017
1 parent 8172e3c commit cfe2660
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 11 deletions.
8 changes: 7 additions & 1 deletion src/components/charts/CircleChart/Circle.examples.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
Standard Radial Chart

<CircleChart endPercentValue={'75k'} border={5} endPercent={0.45} backgroundOpacity={0.5} />
<CircleChart endPercentValue={'75k'} border={5} endPercent={0.45} backgroundOpacity={0.5} />

Smaller Radial Chart

<div style={{fontSize:'10px', width:'75px'}}>
<CircleChart endPercentValue={'75k'} border={5} radius={35} endPercent={0.25} backgroundOpacity={0.5} padding={2} />
</div>
21 changes: 11 additions & 10 deletions src/components/charts/CircleChart/Circle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,30 @@ import React from 'react'
import palette from '../../../palette'
import filterAttributesFromProps from '../../../util/externalAttributeFilter'

var d3 = Object.assign({}, require('d3-shape'))
const d3 = Object.assign({}, require('d3-shape'))

const twoPi = Math.PI * 2
// const formatPercent = d3.format('.0%');

const CircleChart = (props) => {
const { color, border, endPercent, radius, padding, backgroundOpacity } = props
const {color, border, endPercent, radius, padding, backgroundOpacity} = props
const center = radius + padding
const boxSize = (radius + padding) * 2
const endPercentValue = props.endPercentValue

const arc = d3.arc()
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border)
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border)
const arcbg = d3.arc()
.startAngle(0)
.innerRadius(radius - 4)
.outerRadius(radius - 1)
.startAngle(0)
.innerRadius(radius - 4)
.outerRadius(radius - 1)
const externalAttributes = filterAttributesFromProps(props)

return (
<div {...externalAttributes} >
<svg width={boxSize} height={boxSize}>
<g transform='translate(55,55)'>
<g transform={`translate(${center},${center})`}>
<g className='progress-meter'>
<path
className='background'
Expand Down

0 comments on commit cfe2660

Please sign in to comment.