Skip to content

Commit 6a2eaff

Browse files
author
Ritik Srivastava
authored
adding radialChart (#76)
Signed-off-by: Ritik Srivastava <ritik.srivastava@mayadata.io>
1 parent ca07f9f commit 6a2eaff

File tree

7 files changed

+296
-0
lines changed

7 files changed

+296
-0
lines changed

‎src/lab/Graphs/RadialChart/LegendTable.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// this is a file will be removed later
2+
import Table from '@material-ui/core/Table';
3+
import TableBody from '@material-ui/core/TableBody';
4+
import TableCell from '@material-ui/core/TableCell';
5+
import TableContainer from '@material-ui/core/TableContainer';
6+
import TableHead from '@material-ui/core/TableHead';
7+
import TableRow from '@material-ui/core/TableRow';
8+
import Typography from '@material-ui/core/Typography';
9+
import React from 'react';
10+
import { LegendData } from '../LineAreaGraph/base';
11+
import { useStyles } from '../LineAreaGraph/styles';
12+
const colorArr = ['#52F995', '#F6B92B', '#CA2C2C'];
13+
const colorCount = 3;
14+
export type LegendProps = {
15+
data?: Array<LegendData>;
16+
heading?: Array<string>;
17+
width?: number;
18+
height?: number;
19+
};
20+
21+
const LegendTable: React.FC<LegendProps> = ({
22+
data,
23+
heading,
24+
width = 400,
25+
height = 200,
26+
}) => {
27+
const classes = useStyles({ width, height });
28+
return (
29+
<TableContainer className={classes.table}>
30+
<Table aria-label="simple table">
31+
<TableHead>
32+
<TableRow>
33+
{heading &&
34+
heading.map((element) => (
35+
<TableCell
36+
key={`${element}-heading-cell`}
37+
className={`${classes.tableFont} ${classes.tableHeading}`}
38+
>
39+
{element}
40+
</TableCell>
41+
))}
42+
</TableRow>
43+
</TableHead>
44+
<TableBody>
45+
{data &&
46+
data.map((row, i) => (
47+
<TableRow key={`${row.value[0]} ${Math.random() * 100} }`}>
48+
{row.value.map((element, index) => (
49+
<TableCell
50+
key={`${element}-${Math.random() * 100} `}
51+
className={classes.tableCell}
52+
>
53+
<div className={classes.tableDataRow}>
54+
{index === 0 && (
55+
<hr
56+
color={colorArr[i % colorCount]}
57+
className={classes.hr}
58+
/>
59+
)}
60+
61+
<Typography className={classes.tableFont}>
62+
{element}
63+
</Typography>
64+
</div>
65+
</TableCell>
66+
))}
67+
</TableRow>
68+
))}
69+
</TableBody>
70+
</Table>
71+
</TableContainer>
72+
);
73+
};
74+
export { LegendTable };

‎src/lab/Graphs/RadialChart/RadialChart.tsx

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { Arc, Group, LinearGradient, Text } from '@visx/visx';
2+
import React, { useState } from 'react';
3+
import { LegendData } from '../LineAreaGraph/base';
4+
import { RadialChartProps } from './base';
5+
import { LegendTable } from './LegendTable';
6+
import { useStyles } from './styles';
7+
const green = '#52F995';
8+
const red = '#CA2C2C';
9+
10+
const color = ['#52F995', '#F6B92B', '#CA2C2C'];
11+
12+
export type ChordProps = {
13+
width: number;
14+
height: number;
15+
legendTableHeight?: number;
16+
centerSize?: number;
17+
events?: boolean;
18+
showOuterArc?: boolean;
19+
semiCircle?: boolean;
20+
showArc?: boolean;
21+
showLegend?: boolean;
22+
radialData: RadialChartProps[];
23+
};
24+
25+
const RadialChart = ({
26+
width,
27+
height,
28+
radialData,
29+
centerSize = 30,
30+
showOuterArc = true,
31+
semiCircle = true,
32+
showArc = true,
33+
legendTableHeight = 150,
34+
showLegend = true,
35+
}: ChordProps) => {
36+
let legenddata: Array<LegendData> = [{ value: [] }];
37+
const classes = useStyles();
38+
const [centerDataValue, setCenterDataValue] = useState<string>('NoData');
39+
const circleOrient = semiCircle ? 1 : 2;
40+
const scalerArc: number = circleOrient * Math.PI;
41+
42+
console.log(centerDataValue);
43+
const startAngle: number = -(Math.PI / 2);
44+
let currentAngle: number = startAngle;
45+
const outerRadius =
46+
(circleOrient == 1 ? Math.max(width, height) : Math.min(width, height)) *
47+
0.5 -
48+
centerSize;
49+
const innerRadius = outerRadius - centerSize;
50+
51+
const total = radialData
52+
? radialData.reduce(
53+
(previousValue, currentValue) => previousValue + currentValue.value,
54+
0
55+
)
56+
: NaN;
57+
// console.log(total);
58+
const radialArc = radialData
59+
? radialData.map((elem) => {
60+
return {
61+
value: (total ? elem.value / total : 0) * scalerArc,
62+
lable: elem.lable,
63+
};
64+
})
65+
: [{ value: NaN, lable: '' }];
66+
if (centerDataValue === 'NoData' && total > 0) {
67+
setCenterDataValue(total.toString());
68+
}
69+
70+
// console.log(radialArc);
71+
legenddata = legenddata.splice(0);
72+
if (radialData) {
73+
radialData.map((element, index) => {
74+
if (element.value !== undefined)
75+
legenddata[index] = {
76+
value: [element.lable, element.value.toString()],
77+
};
78+
});
79+
}
80+
return width < 10 ? null : (
81+
<div className="chords">
82+
<svg width={width} height={height}>
83+
<LinearGradient
84+
id="gpinkorange"
85+
from={green}
86+
to={red}
87+
vertical={false}
88+
/>
89+
90+
<rect
91+
width={width}
92+
height={height}
93+
className={classes.rectBase}
94+
rx={14}
95+
/>
96+
97+
<Group top={circleOrient == 1 ? height : height / 2} left={width / 2}>
98+
{showArc &&
99+
total > 0 &&
100+
radialArc &&
101+
radialArc.map((elem, i) => (
102+
<Arc
103+
className={classes.radicalArc}
104+
cornerRadius={2}
105+
padAngle={0.02}
106+
key={`key-${i}`}
107+
data={true}
108+
innerRadius={innerRadius}
109+
outerRadius={outerRadius}
110+
fill={color[i % 3]}
111+
startAngle={currentAngle}
112+
endAngle={(currentAngle += elem.value)}
113+
onMouseEnter={() =>
114+
setCenterDataValue(radialData[i].value.toString())
115+
}
116+
onMouseLeave={() => setCenterDataValue(total.toString())}
117+
/>
118+
))}
119+
{(currentAngle = Math.PI)}
120+
{showArc && (total == 0 || isNaN(total)) && (
121+
<Arc
122+
cornerRadius={2}
123+
padAngle={0.02}
124+
key={`key-something-something`}
125+
data={true}
126+
innerRadius={innerRadius}
127+
outerRadius={outerRadius}
128+
fill={'#2B333B'}
129+
startAngle={startAngle}
130+
endAngle={circleOrient == 1 ? Math.PI / 2 : 2 * Math.PI}
131+
/>
132+
)}
133+
{showOuterArc && (
134+
<Arc
135+
cornerRadius={2}
136+
padAngle={0.02}
137+
key={`key-something-122`}
138+
data={true}
139+
innerRadius={outerRadius + 10}
140+
outerRadius={outerRadius + 15}
141+
fill={
142+
total == 0 || isNaN(total) ? '#2B333B' : 'url(#gpinkorange)'
143+
}
144+
startAngle={startAngle}
145+
endAngle={circleOrient * Math.PI}
146+
/>
147+
)}
148+
<Group
149+
id={'test-text'}
150+
left={-14 * centerDataValue.toString().length}
151+
top={circleOrient == 1 ? -8 : 16}
152+
>
153+
<Text className={classes.centerDataValue}>{centerDataValue}</Text>
154+
</Group>
155+
</Group>
156+
</svg>
157+
{showLegend && (
158+
<LegendTable
159+
data={legenddata}
160+
heading={['', 'Count']}
161+
width={width}
162+
height={legendTableHeight}
163+
/>
164+
)}
165+
</div>
166+
);
167+
};
168+
169+
export { RadialChart };

‎src/lab/Graphs/RadialChart/RaidalChart.stories.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
import { ThemedBackground } from '../../../utils/storybook';
4+
import { RadialChart } from './RadialChart';
5+
import { testRadialChartData } from './testRadialChartData';
6+
7+
storiesOf('Graphs/RadialChart', module).add('Kubera Chaos', () => (
8+
<ThemedBackground platform="kubera-chaos">
9+
<RadialChart
10+
width={500}
11+
height={250}
12+
radialData={testRadialChartData}
13+
semiCircle
14+
/>
15+
</ThemedBackground>
16+
));

‎src/lab/Graphs/RadialChart/base.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface RadialChartProps {
2+
value: number;
3+
lable: string;
4+
}

‎src/lab/Graphs/RadialChart/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './RadialChart';

‎src/lab/Graphs/RadialChart/styles.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { makeStyles } from '@material-ui/core';
2+
3+
const useStyles = makeStyles(() => ({
4+
rectBase: {
5+
fill: 'rgba(10, 24, 24, 0.9)',
6+
},
7+
radicalArc: {
8+
opacity: 0.9,
9+
transform: 'scale(1)',
10+
'&:hover': {
11+
opacity: 1,
12+
transform: 'scale(1.02)',
13+
},
14+
},
15+
centerDataValue: {
16+
fontFamily: 'Ubuntu',
17+
fontSize: '3rem',
18+
fontStyle: 'normal',
19+
fontWeight: 500,
20+
textAlign: 'left',
21+
fill: 'white',
22+
},
23+
}));
24+
export { useStyles };

‎src/lab/Graphs/RadialChart/testRadialChartData.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { RadialChartProps } from './base';
2+
3+
const testRadialChartData: RadialChartProps[] = [
4+
{ value: 60, lable: 'pass' },
5+
{ value: 30, lable: 'pending' },
6+
{ value: 50, lable: 'failed' },
7+
];
8+
export { testRadialChartData };

0 commit comments

Comments
 (0)