Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: function plots #27

Merged
merged 3 commits into from
Jun 28, 2023
Merged

feat: function plots #27

merged 3 commits into from
Jun 28, 2023

Conversation

PaulRBerg
Copy link
Member

@PaulRBerg PaulRBerg commented Jun 26, 2023

Context

This PR integrates the function-plot package to plot the streaming curves directly on the docs website rather than redirecting the user to Desmos.

Plots

  • Lockup Linear: Simple
  • Lockup Linear: Cliff
  • Lockup Dynamic: Exponential
  • Lockup Dynamic: Exponential Cliff
  • Lockup Dynamic: Traditional Unlocks

Preview

This is how it looks for Lockup Linear:

Screenshot 2023-06-26 at 9 31 37 PM

build: add "function-plot" as dep
refactor: polish Stream Types
refactor: uncollapse Protocol Concepts
@maxdesalle
Copy link
Member

Added the graph functions @PaulRBerg! Let me know if you want me to change something.

Comment on lines 114 to 126
<FunctionPlot
options={{
data: [
{ fn: "0", range: [0, 10], color: "orange" },
{ fn: "10", range: [10, 20], color: "orange" },
{ fn: "20", range: [20, 30], color: "orange" },
{ fn: "30", range: [30, 40], color: "orange" },
{ fn: "40", range: [40, 50], color: "orange" },
{ fn: "50", range: [50, 60], color: "orange" },
{ fn: "60", range: [60, 70], color: "orange" },
{ fn: "70", range: [70, 80], color: "orange" },
{ fn: "80", range: [80, 90], color: "orange" },
{ fn: "90", range: [90, 100], color: "orange" },
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can generate the points programmatically using a script like this:

...Array.from({ length: 10 }, (_, i) => ({
    color: "#f77423",
    fn: `${i * 10}`,
    range: [i * 10, (i + 1) * 10],
  })),

<FunctionPlot
options={{
data: [
{ fn: "0", range: [0, 50], color: "orange" },
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use #f77423 (the brand color) instead of the generic orange.

Comment on lines 37 to 41
{ fn: "x - 30", range: [50, 100], color: "orange" },
{
points: [
[50, 0],
[50, 20],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to use 25 as a point so that the visual representation matches the text (which refers to 1-year-cliff, 4-year-total vesting plans).

@PaulRBerg
Copy link
Member Author

Thanks @maxdesalle, super cool work! Made a few refinements, and merging now.

@PaulRBerg PaulRBerg merged commit 4f33bd0 into main Jun 28, 2023
2 checks passed
@PaulRBerg PaulRBerg deleted the feat/function-plots branch June 28, 2023 18:24
@PaulRBerg PaulRBerg changed the title feat: function plot for Lockup Linear feat: function plots Jun 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants