Onboarding: Create Issuance modelling chart

src/components/Onboarding/Screens/Apps/IssuanceSettings/IssuanceChart.js

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react'
+import { ChartBase } from '@components/Onboarding/kit/ChartComponents'
+import { ResponsiveLine } from '@nivo/line'
+import { useCharts } from '@/providers/Charts'
+import { generateElements } from '@/utils/conviction-modelling-helpers'
+import { YEARS_IN_SECONDS } from '@/utils/kit-utils'
+
+const DEFAULT_MAX_MONTH = 12
+const DEFAULT_INCREMENT = 1 / 2
+
+const calculateRatio = maxAdjustmentRatioPerSeconds => {
+  // TODO: calculate ratio...
+  return 0
+}
+const computeChartData = (
+  maxAdjustmentRatioPerYear,
+  targetRatio,
+  maxMonth,
+  increment
+) => {
+  const maxAdjustmentRatioPerSeconds =
+    maxAdjustmentRatioPerYear * YEARS_IN_SECONDS
+  const timeData = generateElements(maxMonth, increment)
+
+  return timeData.map(time => ({
+    x: time,
+    y: calculateRatio(maxAdjustmentRatioPerSeconds),
+  }))
+}
+
+const IssuanceChart = ({
+  height,
+  width,
+  maxAdjustmentRatioPerYear,
+  targetRatio,
+}) => {
+  const { commonProps, createAxis } = useCharts()
+  const chartData = useMemo(
+    () =>
+      computeChartData(
+        maxAdjustmentRatioPerYear,
+        targetRatio,
+        DEFAULT_MAX_MONTH,
+        DEFAULT_INCREMENT
+      ),
+    [maxAdjustmentRatioPerYear, targetRatio]
+  )
+  return (
+    <div>
+      <ChartBase title="Ratio vs Time" height={height} width={width}>
+        <ResponsiveLine
+          {...commonProps}
+          data={[{ id: 'ratio-time', data: chartData }]}
+          axisBottom={createAxis('time (months)', 'bottom')}
+          axisLeft={createAxis('ratio(%)', 'left')}
+        />
+      </ChartBase>
+    </div>
+  )
+}
+
+export default IssuanceChart

src/components/Onboarding/Screens/Apps/IssuanceSettings/index.js

@@ -3,6 +3,10 @@ import { GU, Help } from '@1hive/1hive-ui'
 import { useOnboardingState } from '@providers/Onboarding'
 import { Header, PercentageField } from '@components/Onboarding/kit'
 import Navigation from '@components/Onboarding/Navigation'
+// import IssuanceChart from './IssuanceChart'
+
+// const CHART_HEIGHT = '350px'
+// const CHART_WIDTH = '100%'
 
 function reduceFields(fields, [field, value]) {
   switch (field) {
@@ -93,6 +97,20 @@ function IssuanceSettings() {
           value={maxAdjustmentRatioPerYear}
           onChange={handleMaxAdjustmentRatioPerYear}
         />
+        {/* Issuance chart */}
+        {/* <div
+          css={`
+            align-self: center;
+            width: 100%;
+          `}
+        >
+          <IssuanceChart
+            height={CHART_HEIGHT}
+            width={CHART_WIDTH}
+            maxAdjustmentRatioPerYear={maxAdjustmentRatioPerYear}
+            targetRatio={targetRatio}
+          />
+        </div> */}
       </div>
       <Navigation
         backEnabled

src/utils/kit-utils.js

@@ -1,3 +1,4 @@
 export const MINUTE_IN_SECONDS = 60
 export const HOUR_IN_SECONDS = MINUTE_IN_SECONDS * 60
 export const DAY_IN_SECONDS = HOUR_IN_SECONDS * 24
+export const YEARS_IN_SECONDS = 365 * DAY_IN_SECONDS