Merge pull request #4 from old-door/3-add-functional-canvas-test-example

3 add functional canvas test example

Author: old-door

package-lock.json

@@ -14,7 +14,8 @@
  "dayjs": "^1.11.13",
  "react": "^19.1.1",
  "react-dom": "^19.1.1",
- "react-router-dom": "^7.8.0"
+ "react-router-dom": "^7.8.0",
+ "sharp": "^0.34.3"
  },
  "devDependencies": {
  "@eslint/js": "^9.32.0",

package.json

@@ -4,11 +4,13 @@ import TablePage from './pages/TablePage'
 import Items from './pages/Items'
 import './index.css'
 import React from 'react'
+import ChartPage from './pages/ChartPage'
 
 const navItems = [
  { to: '/', label: 'Home', testId: 'nav-home' },
  { to: '/table', label: 'Table', testId: 'nav-table' },
  { to: '/items', label: 'Items', testId: 'nav-items' },
+ { to: '/chart', label: 'Chart', testId: 'nav-paint' },
 ]
 
 export default function App() {
@@ -36,6 +38,7 @@ export default function App() {
  <Route path="/" element={<Home />} />
  <Route path="/table" element={<TablePage />} />
  <Route path="/items" element={<Items />} />
+ <Route path="/chart" element={<ChartPage />} />
  </Routes>
  </main>
  </div>

playwright-report-example.zip

@@ -11,6 +11,8 @@
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+ --axis-color: #e0e0e0;
+ --text-color: #e0e0e0;
 }
 
 a {
@@ -73,14 +75,51 @@ input[type="number"]:focus {
  box-shadow: 0 0 4px rgba(163, 191, 250, 0.5);
 }
 
+.canvas-container,
 .container {
  border: 1px solid #333;
- padding: 1rem;
  border-radius: 8px;
  background-color: #222;
  color: #e0e0e0;
 }
 
+.container {
+ padding: 1rem;
+}
+
+.tooltip {
+ border: 1px solid #333;
+ background-color: #222;
+ color: #e0e0e0;
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+.context-menu {
+ border: 1px solid #333;
+ background-color: #222;
+ color: #e0e0e0;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+.context-menu-option {
+ border-radius: 4px;
+ cursor: pointer;
+ white-space: nowrap;
+ padding: 4px;
+ background-color: #222;
+ color: #e0e0e0;
+}
+.context-menu-option:hover {
+ background-color: #2e2e2e;
+}
+.context-menu-option:active {
+ background-color: #444;
+}
+
 .item-card {
  display: flex;
  flex-direction: column;
@@ -98,6 +137,8 @@ input[type="number"]:focus {
  :root {
  color: #213547;
  background-color: #ffffff;
+ --axis-color: #213547;
+ --text-color: #213547;
  }
  body {
  color: #213547;
@@ -127,7 +168,7 @@ input[type="number"]:focus {
  }
  button:active {
  outline: 4px auto -webkit-focus-ring-color;
- background-color: #eee;
+ background-color: #ddd;
  }
 
  input[type="checkbox"],
@@ -148,13 +189,28 @@ input[type="number"]:focus {
  box-shadow: 0 0 4px rgba(100, 108, 255, 0.5);
  }
 
+ .context-menu,
+ .tooltip,
+ .canvas-container,
  .container {
- border-color: #ccc;
+ border: 1px solid #ccc;
  background-color: #f8f8f8;
  color: #213547;
  }
- .item-card:hover {
+
+ .context-menu-option {
+ background-color: #f8f8f8;
+ color: #213547;
+ }
+
+ .context-menu-option:hover {
  background-color: #f0f0f0;
+ }
+ .context-menu-option:active {
+ background-color: #ddd;
+ }
+
+ .item-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
 }