Skip to content

Commit

Permalink
Display emissions properly
Browse files Browse the repository at this point in the history
  • Loading branch information
@terotik
terotik committed Oct 22, 2024
1 parent 4b4e42d commit 91ebb73
Show file tree
Hide file tree
Showing 5 changed files with 128 additions and 93 deletions.
83 changes: 48 additions & 35 deletions components/paths/CategoryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
GET_NODE_CONTENT,
GET_NODE_INFO,
} from '@/queries/paths/get-paths-node';
import { getScopeLabel, getScopeTotal } from '@/utils/paths/emissions';
import { DimensionalMetric } from '@/utils/paths/metric';
import { getHttpHeaders } from '@/utils/paths/paths.utils';
import PathsActionNode from '@/utils/paths/PathsActionNode';
Expand Down Expand Up @@ -94,18 +95,13 @@ const PathsBasicNodeContent = (props) => {
useEffect(() => {
if (data) {
const nodeMetric = new DimensionalMetric(data.node.metricDim!);
const defaultConfig = nodeMetric.getDefaultSliceConfig(activeGoal);
const thisYear = nodeMetric.getSingleYear(
yearRange[1],
defaultConfig.categories
const indirectEmissions = getScopeTotal(
nodeMetric,
'indirect',
yearRange[1]
);

const yearTotal =
thisYear.rows[0] &&
thisYear.rows.reduce(
(partialSum, a) => (a ? partialSum + a[0] : partialSum),
0
);
const directEmissions = getScopeTotal(nodeMetric, 'direct', yearRange[1]);
const yearTotal = indirectEmissions + directEmissions;
onLoaded(categoryId, yearTotal || 0);
}
}, [activeGoal, data, yearRange]);
Expand All @@ -119,43 +115,60 @@ const PathsBasicNodeContent = (props) => {
if (data) {
if (data.node.metricDim) {
const nodeMetric = new DimensionalMetric(data.node.metricDim!);
const defaultConfig = nodeMetric.getDefaultSliceConfig(activeGoal);
const thisYear = nodeMetric.getSingleYear(
yearRange[1],
defaultConfig.categories

const indirectEmissions = getScopeTotal(
nodeMetric,
'indirect',
yearRange[1]
);
const directEmissions = getScopeTotal(nodeMetric, 'direct', yearRange[1]);

const indirectEmissionsLabel = getScopeLabel(nodeMetric, 'indirect');
const directEmissionsLabel = getScopeLabel(nodeMetric, 'direct');

const yearTotal =
thisYear.rows[0] &&
thisYear.rows.reduce(
(partialSum, a) => (a ? partialSum + a[0] : partialSum),
0
);
/*
console.log('default config', defaultConfig);
console.log('metric', nodeMetric);
console.log('this year', thisYear);
*/
// TODO: Just get any label for now
const configCategories = Object.values(defaultConfig.categories)[0];
const label = thisYear.allLabels.find(
(label) =>
label.id === configCategories?.categories[0] ||
label.id === configCategories?.groups[0]
)?.label;

const unit = nodeMetric.getUnit();

return (
<CardContentBlock $disabled={refetching}>
{yearTotal && (
<>
<h5>{label}</h5>
<h4>
{yearTotal.toPrecision(3)} {unit}
</h4>
</>
)}
<div>
{directEmissions || indirectEmissions ? (
<div>
<h5>
{nodeMetric.getName()} ({yearRange[1]})
</h5>
<h4>
{(directEmissions + indirectEmissions).toPrecision(3)} {unit}
</h4>
</div>
) : null}
{directEmissions ? (
<div>
{directEmissionsLabel}
<h5>
{directEmissions && directEmissions.toPrecision(3)} {unit}
</h5>
</div>
) : (
<div />
)}
{indirectEmissions ? (
<div>
{indirectEmissionsLabel}
<h5>
{indirectEmissions.toPrecision(3)} {unit}
</h5>
</div>
) : (
<div />
)}
</div>
</CardContentBlock>
);
} else {
Expand Down
1 change: 0 additions & 1 deletion components/paths/GoalSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ const GoalSelector = () => {
<DropdownItem header>{t('change-target')}</DropdownItem>
{paths?.instance.goals.map((goal) => (
<DropdownItem
disabled={goal.disabled}
key={goal.id}
active={goal.id === activeGoal?.id}
onClick={() => selectGoal(goal)}
Expand Down
2 changes: 1 addition & 1 deletion components/paths/PathsPageContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const PathsPageContent = ({
<CategoryPageHeaderBlock
page={page}
title={page.title}
lead="Category page header title"
lead={page.category?.leadParagraph}
pathsNodeId={page.category?.kausalPathsNodeUuid}
/>
{page.body && <StreamField page={page} blocks={page.body} />}
Expand Down
101 changes: 45 additions & 56 deletions components/paths/contentblocks/CategoryPageHeaderBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
GET_NODE_CONTENT,
GET_NODE_INFO,
} from '@/queries/paths/get-paths-node';
import { getScopeLabel, getScopeTotal } from '@/utils/paths/emissions';
import { DimensionalMetric } from '@/utils/paths/metric';
import { getHttpHeaders } from '@/utils/paths/paths.utils';
import PathsActionNode from '@/utils/paths/PathsActionNode';
Expand Down Expand Up @@ -122,7 +123,7 @@ const PathsBasicNodeContent = (props) => {
const yearRange = useReactiveVar(yearRangeVar);
const activeGoal = useReactiveVar(activeGoalVar);
// const t = useTranslations();

//console.log(activeGoal);
const { data, loading, error, networkStatus } = useQuery(GET_NODE_CONTENT, {
fetchPolicy: 'no-cache',
variables: { node: node, goal: activeGoal?.id },
Expand All @@ -135,84 +136,72 @@ const PathsBasicNodeContent = (props) => {

const refetching = networkStatus === NetworkStatus.refetch;

useEffect(() => {
if (data) {
const nodeMetric = new DimensionalMetric(data.node.metricDim!);
const defaultConfig = nodeMetric.getDefaultSliceConfig(activeGoal);
const thisYear = nodeMetric.getSingleYear(
yearRange[1],
defaultConfig.categories
);

const yearTotal =
thisYear.rows[0] &&
thisYear.rows.reduce(
(partialSum, a) => (a ? partialSum + a[0] : partialSum),
0
);
}
}, [activeGoal, data, yearRange]);

if (loading && !refetching) {
return <PathsContentLoader />;
}
if (error) {
return <div>Error: {error.message}</div>; // Handle error appropriately
}
if (data) {
//console.log('data', data);
if (data.node.metricDim) {
const nodeMetric = new DimensionalMetric(data.node.metricDim!);
const defaultConfig = nodeMetric.getDefaultSliceConfig(activeGoal);
const thisYear = nodeMetric.getSingleYear(
yearRange[1],
defaultConfig.categories

const indirectEmissions = getScopeTotal(
nodeMetric,
'indirect',
yearRange[1]
);
const directEmissions = getScopeTotal(nodeMetric, 'direct', yearRange[1]);

const yearTotal =
thisYear.rows[0] &&
thisYear.rows.reduce(
(partialSum, a) => (a ? partialSum + a[0] : partialSum),
0
);
/*
console.log('default config', defaultConfig);
console.log('metric', nodeMetric);
console.log('this year', thisYear);
*/
// TODO: Just get any label for now
const configCategories = Object.values(defaultConfig.categories)[0];
const label = thisYear.allLabels.find(
(label) =>
label.id === configCategories?.categories[0] ||
label.id === configCategories?.groups[0]
)?.label;
const indirectEmissionsLabel = getScopeLabel(nodeMetric, 'indirect');
const directEmissionsLabel = getScopeLabel(nodeMetric, 'direct');

const unit = nodeMetric.getUnit();

const hasEmissionGoals = false;
return (
<PathsActionImpact>
<div>
<h4>{label}</h4>
<h4>
{nodeMetric.getName()} ({yearRange[1]})
</h4>
<div>
<div>
{yearTotal.toPrecision(3)} {unit}
</div>
<div>
Indirect emissions<h5>XXX</h5>
{directEmissionsLabel}
<h5>
{directEmissions ? directEmissions.toPrecision(3) : 'XXX'}{' '}
{unit}
</h5>
</div>
{indirectEmissions ? (
<div>
{indirectEmissionsLabel}
<h5>
{indirectEmissions.toPrecision(3)} {unit}
</h5>
</div>
) : (
<div />
)}
</div>
</div>
<div>
<h4>Emissions target (2024)</h4>
{/* Hide targets now as we dont have them */}
{hasEmissionGoals ? (
<div>
<h4>Emissions target (2024)</h4>
<div>
Direct emissions<h5>XXX</h5>
</div>
<div>
Indirect emissions<h5>XXX</h5>
<div>
Direct emissions<h5>XXX</h5>
</div>
<div>
Indirect emissions<h5>XXX</h5>
</div>
</div>
</div>
</div>
) : (
<div />
)}
</PathsActionImpact>
);
} else {
Expand Down Expand Up @@ -259,7 +248,7 @@ const PathsActionNodeContent = (props) => {
return (
<PathsActionImpact>
<div>
<h4>Emissions (2022)</h4>
<h4>Emissions ({yearRangeVar[1]})</h4>
<div>
<div>
Direct emissions<h5>{impact}</h5>
Expand All @@ -270,7 +259,7 @@ const PathsActionNodeContent = (props) => {
</div>
</div>
<div>
<h4>Emissions target (2024)</h4>
<h4>Emissions target</h4>
<div>
<div>
Direct emissions<h5>XXX</h5>
Expand Down Expand Up @@ -363,14 +352,14 @@ function CategoryPageHeaderBlock(props: Props) {
<h1>
{identifier && <Identifier>{identifier}.</Identifier>} {title}
</h1>
{lead && <p>{lead}</p>}
{pathsNodeId && paths && (
<PathsNodeContent
categoryId={identifier}
node={pathsNodeId}
paths={paths.instance.id}
/>
)}
{lead && <p>{lead}</p>}
</CategoryHeader>
</Container>
</Background>
Expand Down
34 changes: 34 additions & 0 deletions utils/paths/emissions.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/* Get total of specific cope for a specific year */
export const getScopeTotal = (node, scope, year) => {
const emissionDimension = node.dimensions.find(
(dim) => dim.originalId === 'emission_scope'
);
const scopeGroup = emissionDimension?.groups.find(
(group) => group.originalId === scope
);
const scopeConfigCats = {};
if (emissionDimension && scopeGroup)
scopeConfigCats[emissionDimension.id] = {
groups: [scopeGroup.id],
categories: scopeGroup?.categories.map((cat) => cat.id),
};
const scopeYear = node.getSingleYear(year, scopeConfigCats);
const scopeYearTotal =
scopeYear.rows[0] &&
scopeYear.rows.reduce(
(partialSum, a) => (a ? partialSum + a[0] : partialSum),
0
);
return scopeYearTotal;
};

/* Get label for a emission scope */
export const getScopeLabel = (node, scope) => {
const emissionDimension = node.dimensions.find(
(dim) => dim.originalId === 'emission_scope'
);
const scopeGroup = emissionDimension?.groups.find(
(group) => group.originalId === scope
);
return scopeGroup?.label;
};

0 comments on commit 91ebb73

Please sign in to comment.