Add weighted deltaB chart

projects/ui/src/components/Analytics/Bean/DeltaB.graphql → projects/ui/src/components/Analytics/Bean/DeltaBInstant.graphql

@@ -1,4 +1,4 @@
-query SeasonalDeltaB($season_lte: Int, $first: Int, $season_gte: Int) {
+query SeasonalInstantDeltaB($season_lte: Int, $first: Int, $season_gte: Int) {
   seasons: beanHourlySnapshots(
     where: { season_lte: $season_lte, season_gte: $season_gte }
     first: $first

projects/ui/src/components/Analytics/Bean/DeltaB.tsx → projects/ui/src/components/Analytics/Bean/DeltaBInstant.tsx

@@ -6,15 +6,15 @@ import SeasonPlot, {
 } from '~/components/Common/Charts/SeasonPlot';
 import { BEAN } from '~/constants/tokens';
 import {
-  SeasonalDeltaBDocument,
-  SeasonalDeltaBQuery,
+  SeasonalInstantDeltaBDocument,
+  SeasonalInstantDeltaBQuery,
 } from '~/generated/graphql';
 import { SnapshotData } from '~/hooks/beanstalk/useSeasonsQuery';
 import { toTokenUnitsBN } from '~/util';
 
 import { FC } from '~/types';
 
-const getValue = (season: SnapshotData<SeasonalDeltaBQuery>) =>
+const getValue = (season: SnapshotData<SeasonalInstantDeltaBQuery>) =>
   toTokenUnitsBN(season.instantaneousDeltaB, BEAN[1].decimals).toNumber();
 const formatValue = (value: number) =>
   `${value.toLocaleString('en-us', { maximumFractionDigits: 2 })}`;
@@ -35,9 +35,11 @@ const lineChartProps: Partial<LineChartProps> = {
   horizontalLineNumber: 0,
 };
 
-const DeltaB: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ height }) => (
-  <SeasonPlot<SeasonalDeltaBQuery>
-    document={SeasonalDeltaBDocument}
+const DeltaBInstant: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({
+  height,
+}) => (
+  <SeasonPlot<SeasonalInstantDeltaBQuery>
+    document={SeasonalInstantDeltaBDocument}
     height={height}
     getValue={getValue}
     formatValue={formatValue}
@@ -48,4 +50,4 @@ const DeltaB: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({ height }) => (
   />
 );
 
-export default DeltaB;
+export default DeltaBInstant;

projects/ui/src/components/Analytics/Bean/DeltaBWeighted.graphql

@@ -0,0 +1,13 @@
+query SeasonalWeightedDeltaB($season_lte: Int, $first: Int, $season_gte: Int) {
+  seasons: seasons(
+    where: { season_lte: $season_lte, season_gte: $season_gte }
+    first: $first
+    orderBy: season
+    orderDirection: desc
+  ) {
+    id
+    season
+    createdAt
+    deltaB
+  }
+}

projects/ui/src/components/Analytics/Bean/DeltaBWeighted.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { tickFormatLocale } from '~/components/Analytics/formatters';
+import { LineChartProps } from '~/components/Common/Charts/LineChart';
+import SeasonPlot, {
+  SeasonPlotBaseProps,
+} from '~/components/Common/Charts/SeasonPlot';
+import { BEAN } from '~/constants/tokens';
+import {
+  SeasonalWeightedDeltaBDocument,
+  SeasonalWeightedDeltaBQuery,
+} from '~/generated/graphql';
+import { SnapshotData } from '~/hooks/beanstalk/useSeasonsQuery';
+import { toTokenUnitsBN } from '~/util';
+
+import { FC } from '~/types';
+
+const getValue = (season: SnapshotData<SeasonalWeightedDeltaBQuery>) =>
+  toTokenUnitsBN(season.deltaB, BEAN[1].decimals).toNumber();
+const formatValue = (value: number) =>
+  `${value.toLocaleString('en-us', { maximumFractionDigits: 2 })}`;
+const statProps = {
+  title: 'deltaB',
+  titleTooltip:
+    'The liquidity and time weighted average shortage of Beans in liquidity pools on the Minting Whitelist at the beginning of every Season.',
+  gap: 0.25,
+};
+
+const queryConfig = {
+  variables: { season_gte: 6074 },
+  context: { subgraph: 'beanstalk' },
+};
+
+const lineChartProps: Partial<LineChartProps> = {
+  yTickFormat: tickFormatLocale,
+  horizontalLineNumber: 0,
+};
+
+const DeltaBWeighted: FC<{ height?: SeasonPlotBaseProps['height'] }> = ({
+  height,
+}) => (
+  <SeasonPlot<SeasonalWeightedDeltaBQuery>
+    document={SeasonalWeightedDeltaBDocument}
+    height={height}
+    getValue={getValue}
+    formatValue={formatValue}
+    queryConfig={queryConfig}
+    StatProps={statProps}
+    LineChartProps={lineChartProps}
+  />
+);
+
+export default DeltaBWeighted;

projects/ui/src/components/Analytics/Bean/index.tsx

@@ -1,15 +1,16 @@
 import { Card, Tab, Tabs } from '@mui/material';
 
 import Crosses from '~/components/Analytics/Bean/Crosses';
-import DeltaB from '~/components/Analytics/Bean/DeltaB';
+import DeltaBInstant from '~/components/Analytics/Bean/DeltaBInstant';
+import DeltaBWeighted from '~/components/Analytics/Bean/DeltaBWeighted';
 import { FC } from '~/types';
 import Liquidity from '~/components/Analytics/Bean/Liquidity';
 import MarketCap from '~/components/Analytics/Bean/MarketCap';
-import Price from './Price';
 import React from 'react';
 import Supply from '~/components/Analytics/Bean/Supply';
 import VolumeChart from '~/components/Analytics/Bean/VolumeChart';
 import useTabs from '~/hooks/display/useTabs';
+import Price from './Price';
 import LiquiditySupplyRatio from './LiquiditySupplyRatio';
 
 const SLUGS = [
@@ -20,7 +21,8 @@ const SLUGS = [
   'supply',
   'crosses',
   'inst_delta_b',
-  'liquiditysupplyratio'
+  'weigh_delta_b',
+  'liquiditysupplyratio',
 ];
 
 const BeanAnalytics: FC<{}> = () => {
@@ -40,6 +42,7 @@ const BeanAnalytics: FC<{}> = () => {
         <Tab label="Supply" />
         <Tab label="Crosses" />
         <Tab label="Inst. deltaB" />
+        <Tab label="Weighted deltaB" />
         <Tab label="L2SR" />
       </Tabs>
       {/* 
@@ -54,8 +57,9 @@ const BeanAnalytics: FC<{}> = () => {
       {tab === 3 && <MarketCap height={CHART_HEIGHT} />}
       {tab === 4 && <Supply height={CHART_HEIGHT} />}
       {tab === 5 && <Crosses height={CHART_HEIGHT} />}
-      {tab === 6 && <DeltaB height={CHART_HEIGHT} />}
-      {tab === 7 && <LiquiditySupplyRatio height={CHART_HEIGHT} />}
+      {tab === 6 && <DeltaBInstant height={CHART_HEIGHT} />}
+      {tab === 7 && <DeltaBWeighted height={CHART_HEIGHT} />}
+      {tab === 8 && <LiquiditySupplyRatio height={CHART_HEIGHT} />}
     </Card>
   );
 };