Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DE-1397 | Investments by Disbursement Area new chart block #80

Merged
merged 4 commits into from
Sep 17, 2024
Merged

DE-1397 | Investments by Disbursement Area new chart block #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ec44b5a
feat: new disbursement chart block
stephanoshadjipetrou Sep 12, 2024
81bfd4e
chore: incremental
stephanoshadjipetrou Sep 16, 2024
64c88f1
Merge branch 'develop' into feat/DE-1397
stephanoshadjipetrou Sep 17, 2024
ff65ce4
chore: incremental
stephanoshadjipetrou Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/components/charts/sankey/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface SankeyChartData {

export interface SankeyChartProps {
data: SankeyChartData;
formatLabel?: boolean;
}

export interface SankeyChartTooltipProps extends SankeyChartNode {
Expand Down
106 changes: 99 additions & 7 deletions src/app/components/charts/sankey/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import sumBy from "lodash/sumBy";
import Box from "@mui/material/Box";
import { appColors } from "app/theme";
import * as echarts from "echarts/core";
Expand All @@ -15,6 +16,10 @@ import {
SankeySeriesOption,
SankeyChart as EChartsSankey,
} from "echarts/charts";
import {
getFinancialValueWithMetricPrefix,
getRange,
} from "app/utils/getFinancialValueWithMetricPrefix";

echarts.use([TooltipComponent, EChartsSankey, SVGRenderer]);

Expand All @@ -35,7 +40,7 @@ export const SankeyChart: React.FC<SankeyChartProps> = (

const totalValue = React.useMemo(() => {
return props.data.links
.filter((link) => link.source === "Total budget")
.filter((link) => link.source.includes("Total"))
.reduce((acc, item) => acc + item.value, 0);
}, [props.data.links]);

Expand All @@ -49,6 +54,8 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
renderer: "svg",
});

const maxLevel = Math.max(...props.data.nodes.map((node) => node.level));

const option: echarts.ComposeOption<
SankeySeriesOption | TooltipComponentOption
> = {
Expand All @@ -61,7 +68,7 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
type: "sankey",
draggable: false,
layoutIterations: 0,
right: mobile ? 0 : 250,
right: mobile || maxLevel === 2 ? 0 : 250,
nodes: props.data.nodes,
links: props.data.links,
emphasis: {
Expand All @@ -88,6 +95,30 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
position: "right",
fontWeight: "bold",
color: appColors.COMMON.WHITE,
formatter: (params: any) => {
const range = getRange([{ value: params.value }], ["value"]);
return props.formatLabel
? [
`{name|${params.name}: }`,
`{value|US$ ${getFinancialValueWithMetricPrefix(
params.value,
range.index,
3
)}${range.abbr}}`,
].join("\n")
: params.name;
},
rich: {
name: {
fontSize: 12,
fontWeight: "bold",
color: appColors.COMMON.WHITE,
},
value: {
fontSize: 12,
color: appColors.COMMON.WHITE,
},
},
},
lineStyle: {
color:
Expand All @@ -103,6 +134,40 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
show: !mobile,
position: "left",
color: appColors.COMMON.WHITE,
formatter: (params: any) => {
const range = getRange([{ value: params.value }], ["value"]);
return props.formatLabel
? [
`{name|${params.name}: }`,
`{value|US$ ${getFinancialValueWithMetricPrefix(
params.value,
range.index,
3
)}${range.abbr}}`,
`\n`,
`{perc|${((params.value / totalValue) * 100)
.toFixed(2)
.replace(".00", "")}% of total}`,
].join("")
: params.name;
},
rich: {
name: {
fontSize: 12,
fontWeight: "bold",
color: appColors.COMMON.WHITE,
},
value: {
fontSize: 12,
color: appColors.COMMON.WHITE,
},
perc: {
fontSize: 10,
align: "right",
padding: [5, 0, 0, 0],
color: appColors.COMMON.WHITE,
},
},
},
lineStyle: {
color:
Expand All @@ -112,8 +177,32 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
{
depth: 2,
label: {
position: "right",
color: appColors.COMMON.BLACK,
position: maxLevel === 2 ? "left" : "right",
formatter: (params: any) => {
const range = getRange([{ value: params.value }], ["value"]);
return props.formatLabel
? [
`{name|${params.name}: }`,
`{value|US$ ${getFinancialValueWithMetricPrefix(
params.value,
range.index,
3
)}${range.abbr}}`,
].join("")
: params.name;
},
rich: {
name: {
fontSize: 12,
fontWeight: "bold",
color: appColors.COMMON.BLACK,
},
value: {
fontSize: 12,
color: appColors.COMMON.BLACK,
},
},
},
lineStyle: {
color: appColors.SANKEY_CHART.LINK_COLORS[2],
Expand Down Expand Up @@ -151,6 +240,10 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
formatter: (params: any) => {
const data = params.data;
if (data.source && data.target) {
const sourceTotal = sumBy(
props.data.links.filter((node) => node.source === data.source),
"value"
);
return ReactDOMServer.renderToString(
<Box
style={{
Expand All @@ -175,12 +268,11 @@ export const SankeyChart: React.FC<SankeyChartProps> = (
{formatFinancialValue(data.value)}
</Typography>
<Box>
{data.source} -{">"} {data.target}
<br />
{((data.value / totalValue) * 100)
{data.target} -{" "}
{((data.value / sourceTotal) * 100)
.toFixed(2)
.replace(".00", "")}
% of total budget
% of {data.source}
</Box>
</Box>
);
Expand Down
15 changes: 15 additions & 0 deletions src/app/components/table/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7891,3 +7891,18 @@ export const TABLE_VARIATION_15_DATA: {
],
},
];

export const TABLE_VARIATION_16_COLUMNS: ColumnDefinition[] = [
{
title: "Disbursement Area",
field: "name",
width: "50%",
formatter: cellBGColorFormatter,
},
{
title: "Amount (US$)",
field: "amount",
width: "50%",
formatter: financialFormatter,
},
];
2 changes: 2 additions & 0 deletions src/app/pages/datasets/common/chart-block/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,7 @@ export interface DatasetChartBlockProps {
handleDropdownChange?: (value: string) => void;
removeFilter: (value: string, types: string[]) => void;
toggleFilter: (checked: boolean, value: string, type: string) => void;
titleVariant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2";
dropdownItems: { value: string; label: string; icon?: React.ReactElement }[];
subtitleVariant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2";
}
54 changes: 29 additions & 25 deletions src/app/pages/datasets/common/chart-block/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,12 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (

return (
<Box id={props.id} data-cy="dataset-chart-block">
<Typography variant="h3" lineHeight={1.2}>
<Typography variant={props.titleVariant ?? "h3"} lineHeight={1.2}>
{props.title}
</Typography>
<Typography variant="body2">{props.subtitle}</Typography>
<Typography variant={props.subtitleVariant ?? "body2"}>
{props.subtitle}
</Typography>
<Divider
sx={{
margin: "20px 0",
Expand All @@ -149,29 +151,31 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
}}
>
<Box gap="10px" display="flex" flexDirection="row">
<Button
variant="outlined"
startIcon={<Add fontSize="small" />}
onClick={handleFilterButtonClick}
sx={
props.appliedFilters.length > 0
? {
"&:after": {
top: "-3px",
right: "8px",
width: "6px",
height: "6px",
content: "''",
borderRadius: "50%",
position: "absolute",
background: "#2196F3",
},
}
: {}
}
>
Filters
</Button>
{props.filterGroups.length > 0 && (
<Button
variant="outlined"
startIcon={<Add fontSize="small" />}
onClick={handleFilterButtonClick}
sx={
props.appliedFilters.length > 0
? {
"&:after": {
top: "-3px",
right: "8px",
width: "6px",
height: "6px",
content: "''",
borderRadius: "50%",
position: "absolute",
background: "#2196F3",
},
}
: {}
}
>
Filters
</Button>
)}
{filterPopover}
{/* <Button variant="outlined" startIcon={<SettingsIcon />}>
Settings
Expand Down
Loading
Loading