Skip to content

Commit 137f076

Browse files
lflangislflangis
authored
Merge pull request #281 from Ferlab-Ste-Justine/feat/SKFP-692/responsive-pie
feat(chart): SKFP-692 add pie and chart graphics
2 parents 6d77a73 + 75ddb61 commit 137f076

File tree

11 files changed

+838
-6
lines changed

11 files changed

+838
-6
lines changed

‎packages/ui/package-lock.json‎

Lines changed: 590 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/ui/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ferlab/ui",
3-
"version": "7.3.0",
3+
"version": "7.4.0",
44
"description": "Core components for scientific research data portals",
55
"publishConfig": {
66
"access": "public"
@@ -85,6 +85,10 @@
8585
"@dnd-kit/core": "^4.0.3",
8686
"@dnd-kit/sortable": "^5.1.0",
8787
"@dnd-kit/utilities": "^3.2.0",
88+
"@nivo/bar": "^0.80.0",
89+
"@nivo/core": "^0.80.0",
90+
"@nivo/pie": "^0.80.0",
91+
"@nivo/tooltip": "^0.80.0",
8892
"classnames": "^2.2.6",
8993
"command-line-args": "^5.1.1",
9094
"cross-spawn": "^7.0.3",

‎packages/ui/src/components/Charts/Bar/index.module.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@import "theme.template";
2+
3+
.barChartWrapper {
4+
height: 100%;
5+
position: relative;;
6+
width: 100%;
7+
text-align: center;
8+
9+
.barChartContent {
10+
position: absolute;
11+
width: 100%;
12+
height: 100%;
13+
text-align: center;
14+
15+
}
16+
17+
*[class$="-typography"] {
18+
margin: 0;
19+
}
20+
21+
.title {
22+
font-size: 12px;
23+
color: $chart-title-color;
24+
}
25+
}
26+
27+

‎packages/ui/src/components/Charts/Bar/index.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { BarDatum, BarSvgProps, ResponsiveBar } from '@nivo/bar';
3+
import { Typography } from 'antd';
4+
5+
import styles from './index.module.scss';
6+
7+
type TBarChart = Omit<BarSvgProps<BarDatum>, 'width' | 'height'> & {
8+
title?: string;
9+
};
10+
11+
const { Title } = Typography;
12+
13+
const BarChart = ({
14+
margin = { bottom: 12, left: 24, right: 24, top: 12 },
15+
onMouseEnter,
16+
colorBy = 'indexValue',
17+
title,
18+
...rest
19+
}: TBarChart): JSX.Element => (
20+
<div className={styles.barChartWrapper}>
21+
<div className={styles.barChartContent}>
22+
{title && (
23+
<Title className={styles.title} level={5}>
24+
{title}
25+
</Title>
26+
)}
27+
<ResponsiveBar
28+
colorBy={colorBy}
29+
margin={margin}
30+
onMouseEnter={(_: any, e: any) => {
31+
if (onMouseEnter) {
32+
onMouseEnter(_, e);
33+
}
34+
e.target.style.cursor = 'pointer';
35+
}}
36+
{...rest}
37+
/>
38+
</div>
39+
</div>
40+
);
41+
42+
export default BarChart;

‎packages/ui/src/components/Charts/Pie/index.module.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "theme.template";
2+
3+
.pieChartWrapper {
4+
height: 100%;
5+
position: relative;;
6+
width: 100%;
7+
text-align: center;
8+
9+
.pieChartContent {
10+
position: absolute;
11+
width: 100%;
12+
height: 100%;
13+
}
14+
15+
*[class$="-typography"] {
16+
margin: 0;
17+
}
18+
19+
.title {
20+
font-size: 12px;
21+
color: $chart-title-color;
22+
}
23+
}
24+

‎packages/ui/src/components/Charts/Pie/index.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { DefaultRawDatum, PieSvgProps, ResponsivePie } from '@nivo/pie';
3+
import { BasicTooltip } from '@nivo/tooltip';
4+
import { Typography } from 'antd';
5+
6+
import styles from './index.module.scss';
7+
8+
export type TPieChart = Omit<PieSvgProps<DefaultRawDatum>, 'width' | 'height'> & {
9+
title?: string;
10+
margin?: {
11+
top: number;
12+
bottom: number;
13+
left: number;
14+
right: number;
15+
};
16+
};
17+
18+
const { Title } = Typography;
19+
20+
const PieChart = ({
21+
margin = { bottom: 16, left: 24, right: 24, top: 16 },
22+
onMouseEnter,
23+
title,
24+
...rest
25+
}: TPieChart): JSX.Element => (
26+
<div className={styles.pieChartWrapper}>
27+
<div className={styles.pieChartContent}>
28+
<ResponsivePie
29+
enableArcLabels={false}
30+
enableArcLinkLabels={false}
31+
margin={margin}
32+
onMouseEnter={(_: any, e: any) => {
33+
if (onMouseEnter) {
34+
onMouseEnter(_, e);
35+
}
36+
e.target.style.cursor = 'pointer';
37+
}}
38+
tooltip={(value) => (
39+
<BasicTooltip color={value.datum.color} id={value.datum.id.toString()} value={value.datum.value} />
40+
)}
41+
{...rest}
42+
/>
43+
{title && (
44+
<Title className={styles.title} level={5}>
45+
{title}
46+
</Title>
47+
)}
48+
</div>
49+
</div>
50+
);
51+
52+
export default PieChart;

‎packages/ui/src/layout/ResizableGridLayout/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
22
import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout';
33
import { SizeMe } from 'react-sizeme';
44
import { Space } from 'antd';
5-
import { isEqual, xorWith } from 'lodash';
5+
import isEqual from 'lodash/isEqual';
66

77
import ResizableItemSelector from './ResizableItemSelector';
88

‎packages/ui/src/view/v2/GridCard/Gridcard.module.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,18 @@ $padding-side-and-bottom: 24px;
3838
}
3939

4040
&.resizableCard {
41-
padding: 0;
41+
padding: 0 !important;
42+
padding-bottom: 16px !important;
4243

4344
div[class$="-head"] {
4445
cursor: move;
4546
div[class$="-head-title"] {
4647
padding: 2px 0;
4748
}
4849
}
50+
div[class$="-body"] {
51+
padding: 16px !important;
52+
}
4953
}
5054

5155
&.withHeaderOnly {

‎packages/ui/themes/default/_theme.template.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,4 +206,7 @@ $color-tag-benign-color: $green-9;
206206
// Maintenance
207207
$maintenance-page-bg: $gray-3;
208208
$maintenance-page-title: $gray-8;
209-
$maintenance-page-subtitle: $gray-9;
209+
$maintenance-page-subtitle: $gray-9;
210+
211+
// chart
212+
$chart-title-color: $gray-8;

‎storybook/stories/Components/Chart/bar.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import BarChart from '@ferlab/ui/components/Charts/Bar';
2+
import { Meta } from "@storybook/react/types-6-0";
3+
import React from "react";
4+
5+
const data = [
6+
{
7+
"id": "1",
8+
"label": "label 1",
9+
"value": 6560
10+
},
11+
{
12+
"id": "2",
13+
"label": "label 2",
14+
"value": 2966
15+
},
16+
{
17+
"id": "3",
18+
"label": "label 3",
19+
"value": 2096
20+
},
21+
{
22+
"id": "4",
23+
"label": "label 4",
24+
"value": 1681
25+
}
26+
]
27+
28+
export default {
29+
title: "@ferlab/Components/Charts/Bar",
30+
component: BarChart,
31+
decorators: [
32+
(Story) => (
33+
<>
34+
<h2>{Story}</h2>
35+
<Story />
36+
</>
37+
),
38+
],
39+
} as Meta;
40+
41+
42+
export const BarChartStory = () => (
43+
<BarChart title="Bar Chart Example" data={data} />
44+
);

0 commit comments

Comments
 (0)