Skip to content

Commit

Permalink
code refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@SanjeevLakhwani
SanjeevLakhwani committed Jul 24, 2023
1 parent da1427b commit 542e3fb
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 179 deletions.
80 changes: 34 additions & 46 deletions src/components/charts/CustomPieChart.js
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,57 @@
import React from "react";
import React, { useCallback } from "react";
import PropTypes from "prop-types";
import { useHistory } from "react-router-dom";
import { PieChart } from "bento-charts";

import { Empty } from "antd";

const titleStyle = {
fontStyle: "italic",
padding: "0",
marginBottom: "-15px",
};

const CustomPieChart = ({
title,
data,
chartHeight,
setAutoQueryPageTransition,
autoQueryDataType,
fieldLabel,
sort = true,
data = [],
chartHeight = 300,
onAutoQueryTransition,
dataType,
labelKey,
sortData = true,
}) => {
const history = useHistory();

const onClick = (data) => {
if (!setAutoQueryPageTransition || data.skipAutoquery) {
return;
}
console.log("data", data);
setAutoQueryPageTransition(window.location.href, autoQueryDataType, fieldLabel, data.name);
const handleChartClick = useCallback(
(pointData) => {
if (!onAutoQueryTransition || pointData.skipAutoquery) return;

// Navigate to Explorer
history.push("/data/explorer/search");
};
onAutoQueryTransition(window.location.href, dataType, labelKey, pointData.name);
history.push("/data/explorer/search");
},
[onAutoQueryTransition, dataType, labelKey, history]
);

if (!data || data.length === 0) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No Data" />;
if (!data.length) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No available data" />;
}

const pieChartData = data.map(({ name, value }) => ({ x: name, y: value }));

return (
<>
<div
style={{
marginBottom: "20px",
}}
>
<h2 style={titleStyle}>{title}</h2>
<PieChart
data={data.map(({ name, value }) => ({ x: name, y: value }))}
height={chartHeight}
onClick={onClick}
sort={sort}
/>
</div>
</>
<div style={{ marginBottom: "20px" }}>
<h2 style={{ fontStyle: "italic", padding: "0", marginBottom: "-15px" }}>{title}</h2>
<PieChart data={pieChartData} height={chartHeight} onClick={handleChartClick} sort={sortData} />
</div>
);
};

CustomPieChart.propTypes = {
title: PropTypes.string,
data: PropTypes.array,
title: PropTypes.string.isRequired,
data: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
value: PropTypes.number,
})
),
chartHeight: PropTypes.number,
setAutoQueryPageTransition: PropTypes.func,
autoQueryDataType: PropTypes.string,
sort: PropTypes.bool,
fieldLabel: PropTypes.string,
onAutoQueryTransition: PropTypes.func,
dataType: PropTypes.string,
labelKey: PropTypes.string,
sortData: PropTypes.bool,
};

export default CustomPieChart;
37 changes: 15 additions & 22 deletions src/components/charts/Histogram.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,36 @@ import PropTypes from "prop-types";
import { Empty } from "antd";
import { BarChart } from "bento-charts";

const titleStyle = {
const TITLE_STYLE = {
fontStyle: "italic",
padding: "0",
marginBottom: "-15px",
};
const titleHeaderHeight = 31;

const Histogram = ({ title = "Histogram", data = [], chartHeight = 300 }) => {
const transformedData = useMemo(() => transformData(data), [data]);

if (!transformedData.length) {
return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No available data" />;
}

const Histogram = ({ title, data, chartHeight, chartAspectRatio }) => {
data = data.map(({ ageBin, count }) => ({ x: ageBin, y: count }));
return (
<div style={{ marginBottom: "20px" }}>
<h2 style={titleStyle}>{title}</h2>
{data.length !== 0 ? (
<BarChart data={data} height={chartHeight} />
) : (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: `${chartHeight - titleHeaderHeight}px`,
width: `${(chartHeight - titleHeaderHeight) * chartAspectRatio}px`,
}}
>
<Empty />
</div>
)}
<h2 style={TITLE_STYLE}>{title}</h2>
<BarChart data={transformedData} height={chartHeight} />
</div>
);
};

Histogram.propTypes = {
title: PropTypes.string,
data: PropTypes.array,
data: PropTypes.arrayOf(
PropTypes.shape({
ageBin: PropTypes.string,
count: PropTypes.number,
})
),
chartHeight: PropTypes.number,
chartAspectRatio: PropTypes.number,
};

export default Histogram;
32 changes: 9 additions & 23 deletions src/components/overview/ClinicalSummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@ const ClinicalSummary = () => {
dispatch(setAutoQueryPageTransition(priorPageUrl, type, field, value));

const { data, isFetching } = useSelector((state) => state.overviewSummary);
const otherThresholdPercentage = useSelector(
(state) => state.explorer.otherThresholdPercentage,
);
const otherThresholdPercentage = useSelector((state) => state.explorer.otherThresholdPercentage);

const statistics = [
{
Expand Down Expand Up @@ -45,19 +43,13 @@ const ClinicalSummary = () => {
const charts = [
{
title: "Individuals",
data: mapNameValueFields(
data.data_type_specific?.individuals?.sex,
-1,
),
data: mapNameValueFields(data.data_type_specific?.individuals?.sex, -1),
fieldLabel: "[dataset item].subject.sex",
type: "PIE",
},
{
title: "Diseases",
data: mapNameValueFields(
data.data_type_specific?.diseases?.term,
otherThresholdPercentage / 100,
),
data: mapNameValueFields(data.data_type_specific?.diseases?.term, otherThresholdPercentage / 100),
fieldLabel: "[dataset item].diseases.[item].term.label",
type: "PIE",
},
Expand All @@ -70,7 +62,7 @@ const ClinicalSummary = () => {
title: "Biosamples",
data: mapNameValueFields(
data.data_type_specific?.biosamples?.sampled_tissue,
otherThresholdPercentage / 100,
otherThresholdPercentage / 100
),
fieldLabel: "[dataset item].biosamples.[item].sampled_tissue.label",
type: "PIE",
Expand All @@ -79,7 +71,7 @@ const ClinicalSummary = () => {
title: "Phenotypic Features",
data: mapNameValueFields(
data.data_type_specific?.phenotypic_features?.type,
otherThresholdPercentage / 100,
otherThresholdPercentage / 100
),
fieldLabel: "[dataset item].phenotypic_features.[item].type.label",
type: "PIE",
Expand All @@ -91,9 +83,7 @@ const ClinicalSummary = () => {
return (
<>
<Row>
<Typography.Title level={4}>
Clinical/Phenotypic Data
</Typography.Title>
<Typography.Title level={4}>Clinical/Phenotypic Data</Typography.Title>
<Row style={{ marginBottom: "24px" }} gutter={[0, 16]}>
{statistics.map((s, i) => (
<Col key={i} xl={2} lg={3} md={5} sm={6} xs={10}>
Expand All @@ -115,13 +105,9 @@ const ClinicalSummary = () => {
data={c.data}
chartHeight={chartHeight}
chartAspectRatio={chartAspectRatio}
fieldLabel={c.fieldLabel}
setAutoQueryPageTransition={
setAutoQueryPageTransitionFunc
}
autoQueryDataType={
autoQueryDataType
}
labelKey={c.fieldLabel}
onAutoQueryTransition={setAutoQueryPageTransitionFunc}
dataType={autoQueryDataType}
/>
) : (
<Histogram
Expand Down
Loading

0 comments on commit 542e3fb

Please sign in to comment.