improve canvas graphs

Author: AidanBlumLevine

client/src/components/sidebar/game/resource-graph.tsx

@@ -37,17 +37,9 @@ export const ResourceGraph: React.FC<Props> = (props: Props) => {
     const data = props.active && round ? getChartData(round, props.property) : []
 
     return (
-        <div className="mt-2 px-2 w-full">
-            <h2 className="mx-auto text-center">{props.propertyDisplayName}</h2>
-            {/*
-            <D3LineChart
-                data={data}
-                width={300 + 40} // Add 40 so that tooltip is visible outside of SVG container
-                height={200}
-                margin={{ top: 20, right: 20 + 20, bottom: 30, left: 40 + 20 }}
-            />
-        */}
-            <QuickLineChart data={data} width={300} height={200} margin={{ top: 0, right: 0, bottom: 0, left: 0 }} />
+        <div className="mt-2 w-full">
+            <h2 className="mx-auto text-center mb-2">{props.propertyDisplayName}</h2>
+            <QuickLineChart data={data} width={350} height={200} margin={{ top: 2, right: 20, bottom: 17, left: 30 }} />
         </div>
     )
 }

client/src/util/graph-util.ts

@@ -6,8 +6,10 @@ export function getAxes(
     margin: { top: number; right: number; bottom: number; left: number },
     size: { x: number; y: number }
 ) {
-    const xScale = (value: number) => (value * (width - margin.left - margin.right)) / size.x + margin.left
-    const yScale = (value: number) => height - margin.bottom - (value / size.y) * (height - margin.top - margin.bottom)
+    // +/- 1 is to avoid overlapping axis lines
+    const xScale = (value: number) => (value * (width - margin.left - margin.right)) / size.x + margin.left + 1
+    const yScale = (value: number) =>
+        height - margin.bottom - (value / size.y) * (height - margin.top - margin.bottom) - 1
     const innerWidth = width - margin.left - margin.right
     const innerHeight = height - margin.top - margin.bottom
     return { xScale, yScale, innerWidth, innerHeight }
@@ -56,7 +58,9 @@ export function drawXAxis(
             context.lineTo(xPos, height - margin.bottom + 6)
             context.stroke()
             context.fillStyle = options.textColor ?? 'black'
-            context.fillText(Math.round(range.min + i * labelGap).toString(), xPos - 3, height)
+            const label = Math.round(range.min + i * labelGap).toString()
+            const textWidth = context.measureText(label).width
+            context.fillText(label, xPos - textWidth / 2, height)
         }
     }
 }
@@ -82,7 +86,9 @@ export function drawYAxis(
             context.lineTo(margin.left - 6, yPos)
             context.stroke()
             context.fillStyle = options.textColor ?? 'black'
-            context.fillText(point.toString(), 0, yPos + 5)
+            const label = point.toString()
+            const textWidth = context.measureText(label).width
+            context.fillText(label, margin.left - textWidth - 10, yPos + 5)
         }
     } else if (options.count) {
         const gap = (range.max - range.min) / (options.count - (options.centered ? 0 : 1))
@@ -94,7 +100,9 @@ export function drawYAxis(
             context.lineTo(margin.left - 6, yPos)
             context.stroke()
             context.fillStyle = options.textColor ?? 'black'
-            context.fillText(Math.round(range.min + i * labelGap).toString(), 0, yPos + 5)
+            const label = Math.round(range.min + i * labelGap).toString()
+            const textWidth = context.measureText(label).width
+            context.fillText(label, margin.left - textWidth - 10, yPos + 5)
         }
     }
 }