feat: add Calculator & Grapher tool

Adds a full-featured mathematical calculator and interactive function
grapher at /calculate. Powered by Math.js v15 with a HiDPI Canvas
renderer for the graph.

- Evaluates arbitrary math expressions (trig, log, complex, matrices,
  factorials, combinatorics, and more) with named variable scope
- Persists history (50 entries) and variables via localStorage
- 32 quick-insert buttons for constants and functions
- Interactive graph: pan (drag), zoom (scroll), crosshair tooltip
  showing cursor coords and f₁(x)…f₈(x) values simultaneously
- Up to 8 color-coded functions with inline color pickers and
  visibility toggles
- Discontinuity detection for functions like tan(x)
- Adaptive grid labels that rescale with zoom
- Responsive layout: 2/5–3/5 split on desktop, tabbed on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-28 20:44:53 +01:00
parent aa890a0d55
commit 9efa783ca3
11 changed files with 1249 additions and 1 deletions

View File

@@ -1,4 +1,4 @@
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon, QRCodeIcon, AnimateIcon } from '@/components/AppIcons';
import { ColorIcon, UnitsIcon, ASCIIIcon, MediaIcon, FaviconIcon, QRCodeIcon, AnimateIcon, CalculateIcon } from '@/components/AppIcons';
export interface Tool {
/** Short display name (e.g. "Color") */
@@ -97,6 +97,17 @@ export const tools: Tool[] = [
icon: AnimateIcon,
badges: ['CSS', 'Tailwind v4', '20+ Presets'],
},
{
shortTitle: 'Calculate',
title: 'Calculator & Grapher',
navTitle: 'Calculator',
href: '/calculate',
description: 'Advanced expression evaluator with interactive function graphing.',
summary:
'Powerful mathematical calculator powered by Math.js. Evaluate complex expressions, define variables, and plot multiple functions simultaneously on an interactive graph with pan and zoom.',
icon: CalculateIcon,
badges: ['Math.js', 'Graphing', 'Interactive'],
},
];
/** Look up a tool by its href path */