k

component/ExerciseAccordion.tsx

@@ -5,7 +5,7 @@ import {
   AccordionTrigger,
 } from '@/component/UI/accordion';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
-import { Eye } from 'lucide-react';
+import { Check, Eye } from 'lucide-react';
 import { ReactNode } from 'react';
 import { CodeSandbox } from './CodeSandbox';
 import { Badge } from './UI/badge';
@@ -34,9 +34,10 @@ export const ExerciseAccordion = ({ exercises }: ExerciseAccordionProps) => {
                   <span>{i + 1}</span>
                 </div>
                 <span>{exercise.title}</span>
-                <Eye />
+                <Check size={16} />
               </div>
             </AccordionTrigger>
+
             <AccordionContent>
               <div className="grid grid-cols-2 gap-4 pt-4">
                 <div>

pages/course/svg/main-svg-elements.tsx

@@ -233,8 +233,37 @@ export default function Home() {
                 <li>Add some text in the circle</li>
               </ul>
             ),
-            practiceSandbox: 'exercise/SvgMultipleCirclesPractice',
-            solutionSandbox: 'exercise/SvgMultipleCirclesSolution',
+            practiceSandbox: 'exercise/SvgStackingOrderPractice',
+            solutionSandbox: 'exercise/SvgStackingOrderSolution',
+          },
+
+          {
+            title: <span>Dealing with SVG overflow</span>,
+            whyItMatters: (
+              <>
+                <p>
+                  Parts of the SVG elements that extend beyond the SVG canvas
+                  boundaries will not be visible. It is called <b>clipping</b>.{' '}
+                </p>
+                <p>
+                  But you can change the <code>overflow</code> css property of
+                  the svg element to <code>visible</code> to show shapes outside
+                  the SVG element boundaries.
+                </p>
+              </>
+            ),
+            toDo: (
+              <ul>
+                <li>Draw a big circle at the bottom of the SVG area.</li>
+                <li>Notice that a part of it is clipped!</li>
+                <li>
+                  Use the overflow property to avoid clipping and show the full
+                  circle
+                </li>
+              </ul>
+            ),
+            practiceSandbox: 'exercise/SvgStackingOrderPractice',
+            solutionSandbox: 'exercise/SvgStackingOrderSolution',
           },
         ]}
       />

viz/exercise/SvgOverflowPractice/Graph.tsx

@@ -0,0 +1,7 @@
+export const Graph = () => {
+  return (
+    <svg width={500} height={300}>
+      {/* TODO */}
+    </svg>
+  );
+};

viz/exercise/SvgOverflowPractice/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);

viz/exercise/SvgOverflowPractice/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

viz/exercise/SvgOverflowSolution/Graph.tsx

@@ -0,0 +1,7 @@
+export const Graph = () => {
+  return (
+    <svg width={500} height={300} style={{ overflow: 'visible' }}>
+      <circle cx={100} cy={290} r={70} fill="red" />
+    </svg>
+  );
+};

viz/exercise/SvgOverflowSolution/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);

viz/exercise/SvgOverflowSolution/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}