feat(chart): SKFP-692 add pie and chart graphics

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "7.3.0",
+    "version": "7.4.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -85,6 +85,10 @@
         "@dnd-kit/core": "^4.0.3",
         "@dnd-kit/sortable": "^5.1.0",
         "@dnd-kit/utilities": "^3.2.0",
+        "@nivo/bar": "^0.80.0",
+        "@nivo/core": "^0.80.0",
+        "@nivo/pie": "^0.80.0",
+        "@nivo/tooltip": "^0.80.0",
         "classnames": "^2.2.6",
         "command-line-args": "^5.1.1",
         "cross-spawn": "^7.0.3",

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

@@ -0,0 +1,27 @@
+@import "theme.template";
+
+.barChartWrapper {
+  height: 100%;
+  position: relative;;
+  width: 100%;
+  text-align: center;
+
+  .barChartContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+  }
+
+  *[class$="-typography"] {
+    margin: 0;
+  }
+
+  .title {
+    font-size: 12px;
+    color: $chart-title-color;
+  }
+}
+
+

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BarDatum, BarSvgProps, ResponsiveBar } from '@nivo/bar';
+import { Typography } from 'antd';
+
+import styles from './index.module.scss';
+
+type TBarChart = Omit<BarSvgProps<BarDatum>, 'width' | 'height'> & {
+    title?: string;
+};
+
+const { Title } = Typography;
+
+const BarChart = ({
+    margin = { bottom: 12, left: 24, right: 24, top: 12 },
+    onMouseEnter,
+    colorBy = 'indexValue',
+    title,
+    ...rest
+}: TBarChart): JSX.Element => (
+    <div className={styles.barChartWrapper}>
+        <div className={styles.barChartContent}>
+            {title && (
+                <Title className={styles.title} level={5}>
+                    {title}
+                </Title>
+            )}
+            <ResponsiveBar
+                colorBy={colorBy}
+                margin={margin}
+                onMouseEnter={(_: any, e: any) => {
+                    if (onMouseEnter) {
+                        onMouseEnter(_, e);
+                    }
+                    e.target.style.cursor = 'pointer';
+                }}
+                {...rest}
+            />
+        </div>
+    </div>
+);
+
+export default BarChart;

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

@@ -0,0 +1,24 @@
+@import "theme.template";
+
+.pieChartWrapper {
+  height: 100%;
+  position: relative;;
+  width: 100%;
+  text-align: center;
+
+  .pieChartContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  *[class$="-typography"] {
+    margin: 0;
+  }
+
+  .title {
+    font-size: 12px;
+    color: $chart-title-color;
+  }
+}
+

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { DefaultRawDatum, PieSvgProps, ResponsivePie } from '@nivo/pie';
+import { BasicTooltip } from '@nivo/tooltip';
+import { Typography } from 'antd';
+
+import styles from './index.module.scss';
+
+export type TPieChart = Omit<PieSvgProps<DefaultRawDatum>, 'width' | 'height'> & {
+    title?: string;
+    margin?: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+};
+
+const { Title } = Typography;
+
+const PieChart = ({
+    margin = { bottom: 16, left: 24, right: 24, top: 16 },
+    onMouseEnter,
+    title,
+    ...rest
+}: TPieChart): JSX.Element => (
+    <div className={styles.pieChartWrapper}>
+        <div className={styles.pieChartContent}>
+            <ResponsivePie
+                enableArcLabels={false}
+                enableArcLinkLabels={false}
+                margin={margin}
+                onMouseEnter={(_: any, e: any) => {
+                    if (onMouseEnter) {
+                        onMouseEnter(_, e);
+                    }
+                    e.target.style.cursor = 'pointer';
+                }}
+                tooltip={(value) => (
+                    <BasicTooltip color={value.datum.color} id={value.datum.id.toString()} value={value.datum.value} />
+                )}
+                {...rest}
+            />
+            {title && (
+                <Title className={styles.title} level={5}>
+                    {title}
+                </Title>
+            )}
+        </div>
+    </div>
+);
+
+export default PieChart;

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout';
 import { SizeMe } from 'react-sizeme';
 import { Space } from 'antd';
-import { isEqual, xorWith } from 'lodash';
+import { isEqual } from 'lodash';
 
 import ResizableItemSelector from './ResizableItemSelector';
 

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

@@ -38,14 +38,18 @@ $padding-side-and-bottom: 24px;
     }
 
     &.resizableCard {
-      padding: 0;
+      padding: 0 !important;
+      padding-bottom: 16px !important;
 
       div[class$="-head"] {
         cursor: move;
         div[class$="-head-title"] {
           padding: 2px 0;
         }
       }
+      div[class$="-body"] {
+        padding: 16px !important;
+      }
     }
 
     &.withHeaderOnly {

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

@@ -206,4 +206,7 @@ $color-tag-benign-color: $green-9;
 // Maintenance
 $maintenance-page-bg: $gray-3;
 $maintenance-page-title: $gray-8;
-$maintenance-page-subtitle: $gray-9;
+$maintenance-page-subtitle: $gray-9;
+
+// chart
+$chart-title-color: $gray-8;

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

@@ -0,0 +1,44 @@
+import BarChart from '@ferlab/ui/components/Charts/Bar';
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+
+const data = [
+    {
+        "id": "1",
+        "label": "label 1",
+        "value": 6560
+    },
+    {
+        "id": "2",
+        "label": "label 2",
+        "value": 2966
+    },
+    {
+        "id": "3",
+        "label": "label 3",
+        "value": 2096
+    },
+    {
+        "id": "4",
+        "label": "label 4",
+        "value": 1681
+    }
+]
+
+export default {
+    title: "@ferlab/Components/Charts/Bar",
+    component: BarChart,
+    decorators: [
+        (Story) => (
+            <>
+                <h2>{Story}</h2>
+                <Story />
+            </>
+        ),
+    ],
+} as Meta;
+
+
+export const BarChartStory = () => (
+    <BarChart title="Bar Chart Example" data={data}  />
+);

storybook/stories/Components/Chart/pie.stories.tsx

@@ -0,0 +1,44 @@
+import PieChart from '@ferlab/ui/components/Charts/Pie';
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+
+const data = [
+    {
+        "id": "1",
+        "label": "label 1",
+        "value": 6560
+    },
+    {
+        "id": "2",
+        "label": "label 2",
+        "value": 2966
+    },
+    {
+        "id": "3",
+        "label": "label 3",
+        "value": 2096
+    },
+    {
+        "id": "4",
+        "label": "label 4",
+        "value": 1681
+    }
+]
+
+export default {
+    title: "@ferlab/Components/Charts/Pie",
+    component: PieChart,
+    decorators: [
+        (Story) => (
+            <>
+                <h2>{Story}</h2>
+                <Story />
+            </>
+        ),
+    ],
+} as Meta;
+
+
+export const PieChartBaseStory = () => (
+    <PieChart title="Pie Chart Example" data={data} />
+);