Skip to content

Commit

Permalink
Make showing all goals data prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@terotik
terotik committed Nov 29, 2024
1 parent fd4dc44 commit b0b9fe6
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 115 deletions.
217 changes: 109 additions & 108 deletions components/paths/InventoryNodeSummary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ type EmissionDisplay = {
type Emissions = {
label: string | null;
id: number | string;
metricName: string | null;
latest: EmissionDisplay;
reference: EmissionDisplay;
};
Expand All @@ -92,6 +93,7 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
const [emissions, setEmissions] = useState<Emissions[]>([
{
label: null,
metricName: null,
id: 0,
latest: {
value: null,
Expand All @@ -109,10 +111,10 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
]);

const [unit, setUnit] = useState<string | null>(null);
const nodeMetric = new DimensionalMetric(node.metricDim!);

// Redefine values if yearRange is maniupulated
// Redefine values if yearRange has been manipulated
useEffect(() => {
const nodeMetric = new DimensionalMetric(node.metricDim!);
const historicalYears = nodeMetric.getHistoricalYears();
const lastHistoricalYear = historicalYears[historicalYears.length - 1];
setUnit(nodeMetric.getUnit());
Expand All @@ -121,6 +123,8 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {

displayGoals.forEach((goal) => {
const sliceConfig: SliceConfig = nodeMetric.getDefaultSliceConfig(goal);

// TODO: Data seems to exist even when goal is not available on metric?
const latestData = nodeMetric.getSingleYear(
lastHistoricalYear,
sliceConfig.categories
Expand All @@ -129,6 +133,8 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
yearRange[1],
sliceConfig.categories
);

// So we check slice config to determine if data is valid
// Let's assume the first key is the one we want to display
//const displayCategoryType = Object.keys(sliceConfig.categories)[0];
const displayCategoryType =
Expand All @@ -139,46 +145,52 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
? { id: displayCategoryType?.groups[0], type: 'group' }
: { id: displayCategoryType?.categories[0], type: 'category' };

if (displayCategory.id) {
const latestLabel = latestData.allLabels.find(
(label) => label.id === displayCategory.id
)?.label;
const referenceLabel = referenceData.allLabels.find(
(label) => label.id === displayCategory.id
)?.label;
const hasDataForThisGoal = displayCategory.id ? true : false;

const latestLabel = latestData.allLabels.find(
(label) => label.id === displayCategory.id
)?.label;
const referenceLabel = referenceData.allLabels.find(
(label) => label.id === displayCategory.id
)?.label;

const latestValue = getTotalValues(latestData)[0];
const referenceValue = goal?.hideForecast
const latestValue = hasDataForThisGoal
? getTotalValues(latestData)[0]
: null;
const referenceValue =
goal?.hideForecast || !hasDataForThisGoal
? null
: getTotalValues(referenceData)[0];

displayEmissions.push({
label: goal.label ? goal.label : null,
id: goal.id,
latest: {
value: latestValue,
label: latestLabel || null,
year: lastHistoricalYear,
change:
lastHistoricalYear > yearRange[1] &&
referenceValue &&
referenceValue !== latestValue
? (latestValue - referenceValue) / Math.abs(referenceValue)
: null,
},
reference: {
value: referenceValue,
label: referenceLabel || null,
year: yearRange[1],
change:
lastHistoricalYear < yearRange[1] &&
latestValue &&
latestValue !== referenceValue
? (referenceValue - latestValue) / Math.abs(latestValue)
: null,
},
});
}
displayEmissions.push({
metricName: nodeMetric.getName(),
label: goal.label ? goal.label : null,
id: goal.id,
latest: {
value: latestValue,
label: latestLabel || null,
year: lastHistoricalYear,
change:
latestValue !== null &&
lastHistoricalYear > yearRange[1] &&
referenceValue &&
referenceValue !== latestValue
? (latestValue - referenceValue) / Math.abs(referenceValue)
: null,
},
reference: {
value: referenceValue,
label: referenceLabel || null,
year: yearRange[1],
change:
referenceValue !== null &&
lastHistoricalYear < yearRange[1] &&
latestValue &&
latestValue !== referenceValue
? (referenceValue - latestValue) / Math.abs(latestValue)
: null,
},
});
});

setEmissions(displayEmissions);
Expand All @@ -187,78 +199,67 @@ const InventoryNodeSummary = (props: PathsBasicNodeContentProps) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [yearRange[1]]);

console.log('display goals', displayGoals);
console.log('emissions', emissions);
return (
<>
{emissions.map(
(em) =>
(em.latest.value || em.reference.value) && (
<Values key={em.id}>
<ValuesHeader>{em.label}</ValuesHeader>
{em.latest.value ? (
<SubValue>
<HighlightValue
displayValue={
em.latest.value
? format.number(em.latest.value, {
maximumSignificantDigits: 2,
})
: ''
}
header={`${em.latest.year}`}
unit={unit || ''}
size="md"
change={
em.latest.change != null
? `${em.latest.change > 0 ? '+' : ''}${format.number(
em.latest.change * 100,
{
style: 'unit',
unit: 'percent',
maximumSignificantDigits: 2,
}
)}`
: undefined
}
/>
</SubValue>
) : (
<SubValue />
)}
{em.reference.value ? (
<SubValue>
<HighlightValue
displayValue={
em.reference.value
? format.number(em.reference.value, {
maximumSignificantDigits: 2,
})
: ''
}
header={`${em.reference.year}`}
unit={unit || ''}
size="md"
change={
em.reference.change != null
? `${em.reference.change > 0 ? '+' : ''}${format.number(
em.reference.change * 100,
{
style: 'unit',
unit: 'percent',
maximumSignificantDigits: 2,
}
)}`
: undefined
}
/>
</SubValue>
) : (
<SubValue />
)}
</Values>
)
)}
{emissions.map((em) => (
<Values key={em.id}>
<ValuesHeader>{em.label}</ValuesHeader>

<SubValue>
<HighlightValue
displayValue={
em.latest.value != null
? format.number(em.latest.value, {
maximumSignificantDigits: 2,
})
: ' '
}
header={`${em.latest.value != null ? em.latest.year : '-'}`}
unit={em.latest.value && unit ? unit : ''}
size="md"
change={
em.latest.change != null
? `${em.latest.change > 0 ? '+' : ''}${format.number(
em.latest.change * 100,
{
style: 'unit',
unit: 'percent',
maximumSignificantDigits: 2,
}
)}`
: undefined
}
/>
</SubValue>

<SubValue>
<HighlightValue
displayValue={
em.reference.value != null
? format.number(em.reference.value, {
maximumSignificantDigits: 2,
})
: ' '
}
header={`${em.reference.value != null ? em.reference.year : '-'}`}
unit={em.reference.value && unit ? unit : ''}
size="md"
change={
em.reference.change != null
? `${em.reference.change > 0 ? '+' : ''}${format.number(
em.reference.change * 100,
{
style: 'unit',
unit: 'percent',
maximumSignificantDigits: 2,
}
)}`
: undefined
}
/>
</SubValue>
</Values>
))}
</>
);
};
Expand Down
15 changes: 8 additions & 7 deletions components/providers/PathsProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,15 @@ export default function PathsProvider({ instance, children }: Props) {
};
});

const augmentedInstance = {
instance: { ...pathsInstance, goals: instanceGoals },
availableNormalizations: pathsAvailableNormalizations,
parameters: pathsParameters,
scenarios: pathsScenarios,
};
const augmentedInstance = instance
? {
instance: { ...pathsInstance, goals: instanceGoals },
availableNormalizations: pathsAvailableNormalizations,
parameters: pathsParameters,
scenarios: pathsScenarios,
}
: undefined;

console.log('Augmented Paths instance', augmentedInstance);
return (
<PathsContext.Provider value={augmentedInstance}>
{children}
Expand Down

0 comments on commit b0b9fe6

Please sign in to comment.