Skip to content
Permalink
Browse files

refactor radial chart api

  • Loading branch information...
amcdnl committed Mar 15, 2019
1 parent 29562b9 commit a01679b3b2af3524b6d2cf0d96874515945c9104
@@ -37,10 +37,6 @@ storiesOf('Charts/Axis/Radial', module)
<RadialAxis
height={600}
xScale={xScale}
line={{
...RadialAxis.defaultProps.line,
show: false
}}
/>
</g>
</svg>
@@ -1,108 +1,60 @@
import React, { Component, Fragment } from 'react';
import { RadialAxisLineSeries } from './RadialAxisLineSeries';
import { RadialAxisTickSeries } from './RadialAxisTickSeries';
import { RadialAxisArcSeries } from './RadialAxisArcSeries';
import { RadialAxisLineSeries, RadialAxisLineSeriesProps } from './RadialAxisLineSeries';
import { RadialAxisTickSeries, RadialAxisTickSeriesProps } from './RadialAxisTickSeries';
import { RadialAxisArcSeries, RadialAxisArcSeriesProps } from './RadialAxisArcSeries';
import { CloneElement } from '../../utils/children';

interface RadialAxisProps {
height: number;
xScale: any;
arc: {
show: boolean;
padding: number;
minRadius: number;
count: number;
stroke: ((index: number) => string) | string;
strokeDasharray: ((index: number) => string) | string;
};
line: {
show: boolean;
count: number;
innerRadius: number;
stroke: ((index: number) => string) | string;
};
ticks: {
show: boolean;
count: number;
line: {
show: boolean;
stroke: string;
size: number;
};
label: {
show: boolean;
fill: string;
fontSize: number;
fontFamily: string;
format?: (value: any, index: number) => any;
};
};
arcs: JSX.Element;
ticks: JSX.Element | null;
lines: JSX.Element | null;
}

export class RadialAxis extends Component<RadialAxisProps, {}> {
static defaultProps = {
ticks: {
show: true,
count: 12,
line: {
show: true,
stroke: '#054856',
size: 10
},
label: {
show: true,
fill: '#3B5F6A',
fontSize: 11,
fontFamily: 'sans-serif'
}
},
arc: {
show: true,
padding: 50,
minRadius: 10,
stroke: '#054856',
count: 13,
strokeDasharray: '1,4'
},
line: {
show: true,
count: 4,
stroke: '#054856',
innerRadius: 25
}
static defaultProps: Partial<RadialAxisProps> = {
arcs: <RadialAxisArcSeries />,
ticks: <RadialAxisTickSeries />,
lines: <RadialAxisLineSeries />
};

getArcWidth(chartRadius) {
const {
arc: { minRadius, count, padding }
} = this.props;
getArcWidth(chartRadius: number) {
const { minRadius, count, padding } = this.props.arcs.props;
return (chartRadius - minRadius - count * padding) / count;
}

render() {
const { arc, line, ticks, xScale, height } = this.props;
const { arcs, ticks, xScale, height, lines } = this.props;
const chartRadius = height / 2 - 40;
const arcWidth = this.getArcWidth(chartRadius);
const outerRadius = chartRadius + arcWidth;
const { minRadius, padding } = this.props.arcs.props;

return (
<Fragment>
{line.show && (
<RadialAxisLineSeries
{...line}
{arcs && (
<CloneElement<RadialAxisArcSeriesProps>
element={arcs}
arcWidth={arcWidth}
/>
)}
{lines && (
<CloneElement<RadialAxisLineSeriesProps>
element={lines}
height={height}
arcWidth={arcWidth}
minRadius={arc.minRadius}
padding={arc.padding}
minRadius={minRadius}
padding={padding}
/>
)}
{ticks.show && (
<RadialAxisTickSeries
{...ticks}
{ticks && (
<CloneElement<RadialAxisTickSeriesProps>
element={ticks}
scale={xScale}
outerRadius={outerRadius}
/>
)}
{arc.show && <RadialAxisArcSeries {...arc} arcWidth={arcWidth} />}
</Fragment>
);
}
@@ -1,6 +1,6 @@
import React, { Component } from 'react';

interface RadialAxisArcProps {
export interface RadialAxisArcProps {
width: number;
padding: number;
minRadius: number;
@@ -10,7 +10,12 @@ interface RadialAxisArcProps {
strokeDasharray: ((index: number) => string) | string;
}

export class RadialAxisArc extends Component<RadialAxisArcProps, {}> {
export class RadialAxisArc extends Component<RadialAxisArcProps> {
static defaultProps: Partial<RadialAxisArcProps> = {
stroke: '#054856',
strokeDasharray: '1,4'
};

getInnerRadius(index: number) {
const { minRadius, count, padding, width } = this.props;
return minRadius + (count - (index + 1)) * (width + padding);
@@ -1,46 +1,48 @@
import React, { Component } from 'react';
import { RadialAxisArc } from './RadialAxisArc';
import React, { Component, Fragment } from 'react';
import { RadialAxisArc, RadialAxisArcProps } from './RadialAxisArc';
import { range } from 'd3-array';
import { CloneElement } from '../../../utils/children';

interface RadialAxisArcSeriesProps {
export interface RadialAxisArcSeriesProps {
arc: JSX.Element;
count: number;
padding: number;
minRadius: number;
stroke: ((index: number) => string) | string;
strokeDasharray: ((index: number) => string) | string;
arcWidth: number;
}

export class RadialAxisArcSeries extends Component<
RadialAxisArcSeriesProps,
{}
> {
export class RadialAxisArcSeries extends Component<RadialAxisArcSeriesProps> {
static defaultProps: Partial<RadialAxisArcSeriesProps> = {
padding: 50,
minRadius: 10,
count: 13,
arc: <RadialAxisArc />
};

render() {
const {
count,
padding,
minRadius,
stroke,
strokeDasharray,
arc,
arcWidth
} = this.props;
const arcs = range(count);

return (
<g>
<Fragment>
{arcs.map(i => (
<RadialAxisArc
<CloneElement<RadialAxisArcProps>
element={arc}
key={i}
index={i}
minRadius={minRadius}
count={count}
width={arcWidth}
padding={padding}
stroke={stroke}
strokeDasharray={strokeDasharray}
/>
))}
</g>
</Fragment>
);
}
}
@@ -1 +1,2 @@
export * from './RadialAxisArcSeries';
export * from './RadialAxisArc';
@@ -2,16 +2,16 @@ import React, { Component } from 'react';

export const degrees = (radians: number) => (radians / Math.PI) * 180 - 90;

interface RadialAxisLineProps {
export interface RadialAxisLineProps {
index: number;
radius: any;
angle: any;
stroke: ((index: number) => string) | string;
}

export class RadialAxisLine extends Component<RadialAxisLineProps, {}> {
static defaultProps = {
style: () => {}
export class RadialAxisLine extends Component<RadialAxisLineProps> {
static defaultProps: Partial<RadialAxisLineProps> = {
stroke: '#054856'
};

render() {
@@ -1,28 +1,31 @@
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import { scaleLinear, scalePoint } from 'd3-scale';
import { range } from 'd3-array';
import { RadialAxisLine } from './RadialAxisLine';
import { RadialAxisLine, RadialAxisLineProps } from './RadialAxisLine';
import { CloneElement } from '../../../utils/children';

interface RadialAxisLineSeriesProps {
export interface RadialAxisLineSeriesProps {
minRadius: number;
count: number;
padding: number;
arcWidth: number;
height: number;
stroke: ((index: number) => string) | string;
line: JSX.Element;
}

export class RadialAxisLineSeries extends Component<
RadialAxisLineSeriesProps,
{}
> {
export class RadialAxisLineSeries extends Component<RadialAxisLineSeriesProps> {
static defaultProps: Partial<RadialAxisLineSeriesProps> = {
count: 12,
line: <RadialAxisLine />
};

getInnerArcRadius(arcWidth: number) {
const { minRadius, count, padding } = this.props;
return minRadius + (count - (count - 3)) * (arcWidth + padding);
}

render() {
const { count, stroke, height, arcWidth } = this.props;
const { count, height, arcWidth, line } = this.props;
const outerRadius = height / 2;
const lines = range(count);
const innerRadius = this.getInnerArcRadius(arcWidth);
@@ -32,17 +35,17 @@ export class RadialAxisLineSeries extends Component<
.range([0.75, 2.25 * Math.PI]);

return (
<g>
<Fragment>
{lines.map((_, i) => (
<RadialAxisLine
<CloneElement<RadialAxisLineProps>
element={line}
key={i}
radius={radius}
index={i}
angle={angle}
stroke={stroke}
/>
))}
</g>
</Fragment>
);
}
}
@@ -1 +1,2 @@
export * from './RadialAxisLineSeries';
export * from './RadialAxisLine';
@@ -1,44 +1,43 @@
import React, { Component } from 'react';
import { RadialAxisTickLine } from './RadialAxisTickLine';
import { RadialAxisTickLabel } from './RadialAxisTickLabel';
import { RadialAxisTickLineProps, RadialAxisTickLine } from './RadialAxisTickLine';
import { RadialAxisTickLabelProps, RadialAxisTickLabel } from './RadialAxisTickLabel';
import { CloneElement } from '../../../utils/children';

interface RadialAxisTickProps {
export interface RadialAxisTickProps {
scale: any;
outerRadius: number;
tick: any;
data: any;
index: number;
line: {
show: boolean;
stroke: string;
size: number;
};
label: {
show: boolean;
fill: string;
fontSize: number;
fontFamily: string;
format?: (value: any, index: number) => any;
};
line: JSX.Element | null;
label: JSX.Element | null;
}

export class RadialAxisTick extends Component<RadialAxisTickProps, {}> {
export class RadialAxisTick extends Component<RadialAxisTickProps> {
static defaultProps: Partial<RadialAxisTickProps> = {
outerRadius: 0,
line: <RadialAxisTickLine />,
label: <RadialAxisTickLabel />
};

render() {
const { line, label, scale, outerRadius, tick, index } = this.props;
const rotation = (scale(tick) * 180) / Math.PI - 90;
const { line, label, scale, outerRadius, data, index } = this.props;
const rotation = (scale(data) * 180) / Math.PI - 90;
const transform = `rotate(${rotation}) translate(${outerRadius + 25},0)`;

return (
<g transform={transform}>
{line.show && (
<RadialAxisTickLine size={line.size} stroke={line.stroke} />
{line && (
<CloneElement<RadialAxisTickLineProps>
element={line}
/>
)}
{label.show && (
<RadialAxisTickLabel
{...label}
{label && (
<CloneElement<RadialAxisTickLabelProps>
element={label}
index={index}
rotation={rotation}
lineSize={line.size}
tick={tick}
lineSize={line.props.size}
data={data}
/>
)}
</g>
Oops, something went wrong.

0 comments on commit a01679b

Please sign in to comment.
You can’t perform that action at this time.