Skip to content

Commit

Permalink
Treasury Dashboard Fixes (#2991)
Browse files Browse the repository at this point in the history 
* Set the Y-axis of the liquid backing comparison graph to be centered around the values

* Note on reporting gOHM balances

* Fix loading issues for treasury assets table when changing date range

* Fix chart loading issues when switching dates

* Truncate the type column in the OHM supply table

* Fix date selector on smaller screens
  • Loading branch information
@0xJem
0xJem authored Oct 6, 2023
1 parent 5daf0f3 commit 1a37f2d
Show file tree
Hide file tree
Showing 9 changed files with 195 additions and 39 deletions.
60 changes: 49 additions & 11 deletions src/components/Chart/Chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
} from "src/components/Chart/IntersectionHelper";
import { formatCurrency, formatNumber, trim } from "src/helpers";
import { getFloat } from "src/helpers/NumberHelper";
import { getMaximumValue, objectHasProperty } from "src/helpers/subgraph/ProtocolMetricsHelper";
import { getMaximumValue, getMinimumValue, objectHasProperty } from "src/helpers/subgraph/ProtocolMetricsHelper";
import { ChartCard, DEFAULT_HEIGHT } from "src/views/TreasuryDashboard/components/Graph/ChartCard";

const TICK_COUNT = 5;
Expand Down Expand Up @@ -109,6 +109,7 @@ const renderAreaChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
displayTooltipTotal?: boolean,
onMouseMove?: CategoricalChartFunc,
Expand Down Expand Up @@ -143,7 +144,7 @@ const renderAreaChart = (
tick={tickStyle}
width={dataFormat == DataFormat.Percentage ? 33 : 55}
tickFormatter={number => getTickFormatter(dataFormat, number)}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
dx={3}
allowDataOverflow={false}
/>
Expand Down Expand Up @@ -191,6 +192,7 @@ const renderStackedAreaChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
displayTooltipTotal?: boolean,
onMouseMove?: CategoricalChartFunc,
Expand Down Expand Up @@ -225,7 +227,7 @@ const renderStackedAreaChart = (
tickCount={isExpanded ? TICK_COUNT_EXPANDED : TICK_COUNT}
tickLine={false}
tickFormatter={number => getTickFormatter(dataFormat, number)}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
allowDataOverflow={false}
/>
<Tooltip
Expand Down Expand Up @@ -268,6 +270,7 @@ const renderComposedChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
displayTooltipTotal?: boolean,
composedLineDataKeys?: string[],
Expand Down Expand Up @@ -303,7 +306,7 @@ const renderComposedChart = (
tickCount={isExpanded ? TICK_COUNT_EXPANDED : TICK_COUNT}
tickLine={false}
tickFormatter={number => getTickFormatter(dataFormat, number)}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
allowDataOverflow={false}
/>
<Tooltip
Expand Down Expand Up @@ -362,6 +365,7 @@ const renderLineChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
scale?: string,
displayTooltipTotal?: boolean,
Expand All @@ -388,7 +392,7 @@ const renderLineChart = (
width={32}
scale={() => scale}
axisLine={false}
domain={[scale == "log" ? "dataMin" : 0, maximumYValue]}
domain={[scale == "log" ? "dataMin" : minimumYValue, maximumYValue]}
allowDataOverflow={false}
// Ticks
tick={tickStyle}
Expand Down Expand Up @@ -448,6 +452,7 @@ const renderAreaDifferenceChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
itemDecimals?: number,
displayTooltipTotal?: boolean,
Expand Down Expand Up @@ -536,7 +541,7 @@ const renderAreaDifferenceChart = (
tickLine={false}
width={25}
tickFormatter={number => getTickFormatter(dataFormat, number)}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
allowDataOverflow={false}
/>
<Tooltip
Expand Down Expand Up @@ -577,6 +582,7 @@ const renderMultiLineChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
itemDecimals?: number,
displayTooltipTotal?: boolean,
Expand All @@ -602,7 +608,7 @@ const renderMultiLineChart = (
tick={tickStyle}
width={25}
tickFormatter={number => getTickFormatter(dataFormat, number)}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
allowDataOverflow={false}
/>
<Tooltip
Expand Down Expand Up @@ -642,6 +648,7 @@ const renderBarChart = (
isExpanded: boolean,
margin: CategoricalChartProps["margin"],
tickStyle: Record<string, string | number>,
minimumYValue: number,
maximumYValue: number,
displayTooltipTotal?: boolean,
onMouseMove?: CategoricalChartFunc,
Expand All @@ -666,7 +673,7 @@ const renderBarChart = (
tickLine={false}
tickCount={isExpanded ? TICK_COUNT_EXPANDED : TICK_COUNT}
width={33}
domain={[0, maximumYValue]}
domain={[minimumYValue, maximumYValue]}
allowDataOverflow={false}
tickFormatter={number => getTickFormatter(dataFormat, number)}
/>
Expand Down Expand Up @@ -698,6 +705,7 @@ function Chart({
type,
data,
scale,
minimumYValue = 0,
dataKeys,
dataKeyColors,
headerText,
Expand All @@ -723,6 +731,7 @@ function Chart({
type: ChartType;
data: Record<string, unknown>[];
scale?: string;
minimumYValue?: number | "dataMin";
/** string array with all of the dataKeys that should be rendered */
dataKeys: string[];
/** mapping of data keys to colors used for stroke/fill */
Expand All @@ -747,6 +756,7 @@ function Chart({
}) {
const [open, setOpen] = useState(false);
const [maximumYValue, setMaximumYValue] = useState(0.0);
const [calculatedMinimumYValue, setCalculatedMinimumYValue] = useState(0.0);

/**
* Recharts has a bug where using "auto" or "dataMax" as the
Expand All @@ -763,11 +773,32 @@ function Chart({
return;
}

const tempMaxValue = getMaximumValue(data, dataKeys, type, composedLineDataKeys);
// Give a bit of a buffer
setMaximumYValue(tempMaxValue * 1.1);
// Get the maximum value, apply a buffer and get the nearest whole number above it
const maxValue = getMaximumValue(data, dataKeys, type, composedLineDataKeys);
const tempMaxValue = Math.ceil(maxValue * 1.1);
setMaximumYValue(tempMaxValue);
}, [data, dataKeys, type, composedLineDataKeys]);

/**
* Calculate a minimum value for the Y-Axis.
*/
useMemo(() => {
if (!data || !data.length) {
setCalculatedMinimumYValue(0.0);
return;
}

if (minimumYValue !== "dataMin") {
setCalculatedMinimumYValue(minimumYValue);
return;
}

// Get the minimum value, apply a buffer and get the nearest whole number below it
const minValue = getMinimumValue(data, dataKeys, type, composedLineDataKeys);
const tempMinValue = Math.floor(minValue * 0.9);
setCalculatedMinimumYValue(tempMinValue);
}, [data, dataKeys, type, composedLineDataKeys, minimumYValue]);

const handleOpen = () => {
setOpen(true);
};
Expand All @@ -789,6 +820,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
scale,
displayTooltipTotal,
Expand All @@ -806,6 +838,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
displayTooltipTotal,
onMouseMove,
Expand All @@ -822,6 +855,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
displayTooltipTotal,
onMouseMove,
Expand All @@ -838,6 +872,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
itemDecimals,
displayTooltipTotal,
Expand All @@ -855,6 +890,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
itemDecimals,
displayTooltipTotal,
Expand All @@ -872,6 +908,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
displayTooltipTotal,
onMouseMove,
Expand All @@ -888,6 +925,7 @@ function Chart({
isExpanded,
margin,
tickStyle,
calculatedMinimumYValue,
maximumYValue,
displayTooltipTotal,
composedLineDataKeys,
Expand Down
61 changes: 61 additions & 0 deletions src/helpers/subgraph/ProtocolMetricsHelper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,3 +193,64 @@ export const getMaximumValue = (
}),
);
};

/**
* Returns the minimum value found in any of the {keys} properties across all elements of
* {data}.
*
* This supports using nested keys ("records.DAI.value"), using the `get-value` library.
*
* If {type} is stacked, the maximum value of the sum of the values corresponding to
* {keys} will be returned.
*
* If {type} is ChartType.Composed and {composedLineDataKeys} is specified, the maximum
* value corresponding to {composedLineDataKeys} and the sum of the stacked values will
* be returned.
*
* @param data
* @param keys
* @param stacked
* @returns
*/
export const getMinimumValue = (
data: Record<string, unknown>[],
keys: string[],
type: ChartType,
composedLineDataKeys?: string[],
): number => {
const stacked = type === ChartType.StackedArea || type === ChartType.Composed;

return Math.min(
...data.map(value => {
if (!stacked) {
return Math.min(
...keys.map(key => {
return getFloat(get(value, key));
}),
);
}

// If we are stacking values, then we want to add the values for the keys,
// but only if they are not within composedLineDataKeys
const stackedTotal = keys.reduce((previousValue, key) => {
if (composedLineDataKeys && composedLineDataKeys.includes(key)) {
return previousValue;
}

return previousValue + getFloat(get(value, key));
}, 0);
// Grab the minimum value corresponding to the keys specified in composedLineDataKeys
const maxComposedLineDataKeyValue = Math.min(
...keys.map(key => {
if (!composedLineDataKeys || type !== ChartType.Composed) return 0;

if (!composedLineDataKeys.includes(key)) return 0;

return getFloat(get(value, key));
}),
);

return Math.min(maxComposedLineDataKeyValue, stackedTotal);
}),
);
};
20 changes: 15 additions & 5 deletions src/views/TreasuryDashboard/TreasuryDashboard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Box, Container, Grid, useMediaQuery, useTheme } from "@mui/material";
import { Metric, MetricCollection, Paper, TabBar } from "@olympusdao/component-library";
import { memo, useEffect, useState } from "react";
import { memo, useEffect, useMemo, useState } from "react";
import { Outlet, Route, Routes, useSearchParams } from "react-router-dom";
import PageTitle from "src/components/PageTitle";
import { SafariFooter } from "src/components/SafariFooter";
Expand Down Expand Up @@ -48,7 +48,17 @@ const MetricsDashboard = () => {
* asynchronously, so we set the initial value of daysPrior and earliestDate to null. Child components are designed to recognise this
* and not load data until earliestDate is a valid value.
*/
const earliestDate = !daysPrior ? null : getISO8601String(adjustDateByDays(new Date(), -1 * parseInt(daysPrior)));
const [earliestDate, setEarliestDate] = useState<string | null>(null);
useMemo(() => {
if (!daysPrior) {
setEarliestDate(null);
return;
}

const tempEarliestDate = getISO8601String(adjustDateByDays(new Date(), -1 * parseInt(daysPrior)));
console.log(`Setting earliestDate to ${tempEarliestDate}`);
setEarliestDate(tempEarliestDate);
}, [daysPrior]);

// State variable for ignoring the API cache
const [ignoreCache, setIgnoreCache] = useState<boolean | undefined>();
Expand Down Expand Up @@ -168,8 +178,8 @@ const MetricsDashboard = () => {
{/* Custom paddingBottom to make the filter row(s) equidistant from the metrics (above) and
treasury assets (below). */}
<Grid item xs={12} container spacing={1} paddingBottom={"29px"}>
{hideToggleSidePadding ? <></> : <Grid item xs={2} sm={3} />}
<Grid item xs={8} sm={6} md={5} lg={4} textAlign="center">
{hideToggleSidePadding ? <></> : <Grid item xs={1} sm={3} />}
<Grid item xs={10} sm={6} md={5} lg={4} textAlign="center">
<TabBar
disableRouting
items={[
Expand All @@ -196,7 +206,7 @@ const MetricsDashboard = () => {
]}
/>
</Grid>
<Grid item xs={2} sm={3} md={1} />
<Grid item xs={1} sm={3} md={1} />
{/* From here onwards will break onto a new line at the "sm" breakpoint or smaller. */}
<Grid item xs={3} sm={4} md={3} lg={5} />
<Grid item xs={6} sm={4} md={3} lg={2} textAlign="center">
Expand Down
Loading

0 comments on commit 1a37f2d

Please sign in to comment.