Skip to content

Commit 3d2cb77

Browse files
author
Ritik Srivastava
authored
LegendTable (new component) and RadialChart updated (#89)
* aligment for Legend fixed, padding for <td> still not fixed * styling fixes for legend table, padding left in mui still issue * styling color changes in legendTable * tooltipData: label+value alignment * minor changes in raidal chart * some comments removed, package.json version updated in previous commit * reset onMouseLeave(), minor styling fixes * updated as per wt-barGraph, legendTable data computation restricted with showLegends * styling fix, uncomment testData for radialChart * spelling correction * comments removed * radial Chart all working: centerData styling done * center data setState updated Signed-off-by: Ritik Srivastava <ritik.srivastava@mayadata.io>
1 parent 4b92077 commit 3d2cb77

22 files changed

+513
-387
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "kubera-ui",
33
"license": "Apache-2.0",
4-
"version": "0.3.5",
4+
"version": "0.3.6",
55
"private": false,
66
"description": "Component Library for Kubera products",
77
"author": "MayaData, Inc.",

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { storiesOf } from '@storybook/react';
2+
import React from 'react';
3+
import { ThemedBackground } from '../../../utils/storybook';
4+
import { LegendTable } from './LegendTable';
5+
import { LegendTableTestData1 } from './testData';
6+
storiesOf('Graphs/LegendTable', module).add('Kubera Chaos', () => (
7+
<ThemedBackground platform="kubera-chaos">
8+
<LegendTable
9+
data={LegendTableTestData1}
10+
heading={['Metric Name', 'Curr']}
11+
width={400}
12+
height={150}
13+
/>
14+
</ThemedBackground>
15+
));

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import {
2+
Table,
3+
TableBody,
4+
TableCell,
5+
TableContainer,
6+
TableHead,
7+
TableRow,
8+
Typography,
9+
} from '@material-ui/core';
10+
import React from 'react';
11+
import { LegendData } from './base';
12+
import { useStyles } from './style';
13+
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.root}>
30+
<Table aria-label="simple table" cellPadding="0.2">
31+
<TableHead>
32+
<TableRow className={classes.tableRow}>
33+
{heading &&
34+
heading.map((element) => (
35+
<TableCell
36+
key={`${element}-heading-cell`}
37+
className={`${classes.tableCell} ${classes.tableHeading}`}
38+
>
39+
<Typography>{element}</Typography>
40+
</TableCell>
41+
))}
42+
</TableRow>
43+
</TableHead>
44+
<TableBody style={{ width: '100%' }}>
45+
{data &&
46+
data.map((row) => (
47+
<TableRow
48+
key={`${row.data[0]} ${Math.random() * 100} }`}
49+
className={classes.tableRow}
50+
>
51+
{row.data.map(
52+
(element: string, index: number) =>
53+
(index === 0 && (
54+
<TableCell
55+
key={`${element}-${Math.random() * 100} `}
56+
className={classes.tableCell}
57+
>
58+
<hr color={row.baseColor} className={classes.hr} />
59+
<Typography
60+
className={`${classes.tableLabel} ${classes.tableFont}`}
61+
>
62+
{element}
63+
</Typography>
64+
</TableCell>
65+
)) ||
66+
(index !== 0 && (
67+
<TableCell
68+
key={`${element}-${Math.random() * 100} `}
69+
className={classes.tableCell}
70+
>
71+
<Typography
72+
className={`${classes.tableData} ${classes.tableFont}`}
73+
>
74+
{element}
75+
</Typography>
76+
</TableCell>
77+
))
78+
)}
79+
</TableRow>
80+
))}
81+
</TableBody>
82+
</Table>
83+
</TableContainer>
84+
);
85+
};
86+
export { LegendTable };

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface LegendData {
2+
data: Array<string>;
3+
baseColor?: string;
4+
}

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

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

‎src/lab/Graphs/LegendTable/style.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { makeStyles, Theme } from '@material-ui/core';
2+
3+
interface StyleProps {
4+
width?: number;
5+
height?: number;
6+
}
7+
8+
const useStyles = makeStyles((theme: Theme) => ({
9+
root: (props: StyleProps) => ({
10+
display: 'flex',
11+
width: props.width,
12+
height: props.height,
13+
backgroundColor: theme.palette.background.paper,
14+
overflowY: 'auto',
15+
'&::-webkit-scrollbar': {
16+
width: '3px',
17+
height: '3px',
18+
},
19+
20+
'&::-webkit-scrollbar-track': {
21+
backgroundColor: theme.palette.background.paper,
22+
borderRadius: '3px',
23+
},
24+
25+
'&::-webkit-scrollbar-corner': {
26+
backgroundColor: theme.palette.background.paper,
27+
},
28+
29+
'&::-webkit-scrollbar-thumb': {
30+
backgroundColor: theme.palette.highlight,
31+
borderRadius: '3px',
32+
},
33+
'&::-webkit-scrollbar-thumb:hover': {
34+
backgroundColor: theme.palette.highlight,
35+
},
36+
}),
37+
tableRow: {
38+
display: 'flex',
39+
justifyContent: 'space-between',
40+
border: 'none',
41+
margin: 'none',
42+
width: '100%',
43+
},
44+
tableCell: {
45+
display: 'flex',
46+
border: 'none',
47+
margin: 'none',
48+
alignContent: 'flex-start',
49+
padding: theme.spacing(1, 0),
50+
},
51+
52+
tableHeading: {
53+
display: 'flex',
54+
border: 'none',
55+
margin: '0',
56+
justifyContent: 'space-between',
57+
color: theme.graph.dashboard.lightBlue,
58+
width: '4rem',
59+
'&:first-child': {
60+
maxWidth: '14rem',
61+
minWidth: '4rem',
62+
},
63+
},
64+
tableLabel: {
65+
maxWidth: '14rem',
66+
minWidth: '4rem',
67+
},
68+
tableData: {
69+
width: '4rem',
70+
'& span': {
71+
alignContent: 'flex-start',
72+
},
73+
},
74+
tableFont: {
75+
wordWrap: 'break-word',
76+
whiteSpace: 'initial',
77+
alignContent: 'flex-start',
78+
color: theme.palette.text.primary,
79+
},
80+
hr: {
81+
position: 'relative',
82+
width: '1rem',
83+
height: '0.2rem',
84+
alignSelf: 'baseline',
85+
marginRight: '0.5em',
86+
marginTop: '0.5rem',
87+
},
88+
}));
89+
90+
export { useStyles };

‎src/lab/Graphs/LegendTable/testData.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { LegendData } from './base';
2+
3+
const LegendTableTestData1: LegendData[] = [
4+
{ data: ['ip:172.12.192.222', '10'], baseColor: 'red' },
5+
{ data: ['ip:173.12.192.222', '15'], baseColor: 'lightBlue' },
6+
{ data: ['ip:174.12.192.222', '120'], baseColor: 'lightOrange' },
7+
{ data: ['ip:175.12.192.222', '80'], baseColor: 'yellow' },
8+
{ data: ['ip:176.12.192.222', '90'], baseColor: 'lightGreen' },
9+
{ data: ['ip:177.12.192.222', '100'], baseColor: 'pink' },
10+
];
11+
12+
export { LegendTableTestData1 };

0 commit comments

Comments
 (0)