feat: easier to read evolution

src/components/Graph/components/Line.tsx

@@ -1,16 +1,18 @@
-import { blue, green, red } from '@radix-ui/colors';
+import { blue, green, red, slateDark } from '@radix-ui/colors';
 import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root.js';
 
 export enum LineColor {
   Red,
   Green,
   Blue,
+  White,
 }
 
 const LINE_COLORS = {
   [LineColor.Red]: red.red9,
   [LineColor.Green]: green.green9,
   [LineColor.Blue]: blue.blue9,
+  [LineColor.White]: slateDark.slate11,
 };
 
 export enum LineStyle {

src/components/Graph/components/Margin.tsx

@@ -1,32 +1,34 @@
 import { times } from 'lodash';
 import { theme } from '../../../stitches.config.js';
-import { MarginProps } from './Root.js';
+import { MarginProps as RootMarginProps } from './Root.js';
 
-export enum VerticalMarginAlign {
-  Left,
-  Right,
+export enum MarginOrientation {
+  Vertical,
+  Horizontal,
 }
 
-export interface VerticalMarginProps extends MarginProps {
+export interface MarginProps extends RootMarginProps {
   verticalSeparations: number;
-  align?: VerticalMarginAlign;
+  orientation?: MarginOrientation;
 }
 
-export function VerticalMargin({
+export function Margin({
   verticalSeparations,
   max,
   min,
   suffix,
-  align = VerticalMarginAlign.Left,
-}: VerticalMarginProps) {
+  precision = 0,
+  orientation = MarginOrientation.Vertical,
+}: MarginProps) {
+  const isVertical = orientation === MarginOrientation.Vertical;
+
   return (
     <div
       style={{
-        width: 32,
+        paddingLeft: isVertical ? 0 : 64,
+        width: isVertical ? 48 : '100%',
         display: 'flex',
-        flexDirection: 'column',
-        alignItems:
-          align === VerticalMarginAlign.Right ? 'flex-end' : 'flex-start',
+        flexDirection: isVertical ? 'column' : 'row-reverse',
         justifyContent: 'space-between',
       }}
     >
@@ -43,7 +45,7 @@ export function VerticalMargin({
               ((verticalSeparations - (index + 1)) /
                 (verticalSeparations - 1)) +
             min
-          ).toFixed(0)}${suffix ?? ''}`}
+          ).toFixed(precision)}${suffix ?? ''}`}
         </span>
       ))}
     </div>

src/components/Graph/components/Root.tsx

@@ -1,42 +1,55 @@
 import { times } from 'lodash';
 import { ReactNode } from 'react';
 import { theme } from '../../../stitches.config.js';
-import { VerticalMargin, VerticalMarginAlign } from './VerticalMargin.js';
+import { Margin, MarginOrientation } from './Margin.js';
 
-export const GRAPH_WIDTH = 512;
+export const GRAPH_WIDTH = 544;
 export const GRAPH_HEIGHT = 320;
 
 export interface MarginProps {
   min: number;
   max: number;
   suffix?: string;
+  precision?: number;
 }
 
 export interface RootProps {
   children: ReactNode;
-  leftVerticalMargin?: MarginProps;
-  rightVerticalMargin?: MarginProps;
-  verticalSeparations?: number;
+  verticalMargin?: MarginProps;
+  horizontalMargin?: MarginProps;
+  separations?: number;
   xMinLabel: string;
   xMaxLabel: string;
 }
 
 export function Root({
   children,
-  leftVerticalMargin,
-  rightVerticalMargin,
-  verticalSeparations = 5,
+  verticalMargin,
+  horizontalMargin,
+  separations = 5,
   xMinLabel,
   xMaxLabel,
 }: RootProps) {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div
+        style={{
+          paddingLeft: 64,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMinLabel}
+        </span>
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMaxLabel}
+        </span>
+      </div>
+
       <div style={{ display: 'flex', gap: 16 }}>
-        {leftVerticalMargin && (
-          <VerticalMargin
-            {...leftVerticalMargin}
-            verticalSeparations={verticalSeparations}
-          />
+        {verticalMargin && (
+          <Margin {...verticalMargin} verticalSeparations={separations} />
         )}
 
         <svg
@@ -49,8 +62,8 @@ export function Root({
             border: theme.borderStyles.nonInteractive,
           }}
         >
-          {times(verticalSeparations - 2, (index) => {
-            const y = GRAPH_HEIGHT * ((index + 1) / (verticalSeparations - 1));
+          {times(separations - 2, (index) => {
+            const y = GRAPH_HEIGHT * ((index + 1) / (separations - 1));
 
             return (
               <polyline
@@ -66,31 +79,15 @@ export function Root({
 
           {children}
         </svg>
-
-        {rightVerticalMargin && (
-          <VerticalMargin
-            {...rightVerticalMargin}
-            verticalSeparations={verticalSeparations}
-            align={VerticalMarginAlign.Right}
-          />
-        )}
       </div>
 
-      <div
-        style={{
-          paddingLeft: 48,
-          paddingRight: 48,
-          display: 'flex',
-          justifyContent: 'space-between',
-        }}
-      >
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
-          {xMinLabel}
-        </span>
-        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
-          {xMaxLabel}
-        </span>
-      </div>
+      {horizontalMargin && (
+        <Margin
+          {...horizontalMargin}
+          verticalSeparations={separations}
+          orientation={MarginOrientation.Horizontal}
+        />
+      )}
     </div>
   );
 }

src/components/Graph/index.ts

@@ -1,3 +1,3 @@
 export * from './components/Line.js';
+export * from './components/Margin.js';
 export * from './components/Root.js';
-export * from './components/VerticalMargin.js';