From cf01ccaaa90b5819422a5f6aaa00288bc051e1e3 Mon Sep 17 00:00:00 2001
From: Holtz Yan <yan.holtz@datadoghq.com>
Date: Thu, 24 Oct 2024 10:30:42 +0200
Subject: [PATCH] scale lesson 1 ok

---
 .../CircleScaleExercise.tsx                   | 45 +++++++++++++----
 pages/course/scales/introduction.tsx          | 32 ++++++++++++
 pages/course/svg/d3-shape.tsx                 | 34 -------------
 pages/course/svg/tips-and-tricks.tsx          | 49 ++++++++++++++-----
 util/lessonList.tsx                           |  2 +-
 5 files changed, 106 insertions(+), 56 deletions(-)

diff --git a/component/interactiveTeaching/CircleScaleExercise.tsx b/component/interactiveTeaching/CircleScaleExercise.tsx
index be252b62..066c468a 100644
--- a/component/interactiveTeaching/CircleScaleExercise.tsx
+++ b/component/interactiveTeaching/CircleScaleExercise.tsx
@@ -1,15 +1,17 @@
 import { Button } from '@/component/UI/button';
 import { useCallback, useState } from 'react';
 
+const INITIAL_POSITIONS = [
+  { id: 1, cx: 370, value: 0 },
+  { id: 2, cx: 280, value: 50 },
+  { id: 3, cx: 150, value: 60 },
+  { id: 4, cx: 260, value: 82 },
+  { id: 5, cx: 80, value: 100 },
+];
+
 export const CircleScaleExercise = () => {
   // Initial positions of the circles
-  const [circles, setCircles] = useState([
-    { id: 1, cx: 200, value: 0 },
-    { id: 2, cx: 220, value: 50 },
-    { id: 3, cx: 240, value: 60 },
-    { id: 4, cx: 260, value: 82 },
-    { id: 5, cx: 280, value: 100 },
-  ]);
+  const [circles, setCircles] = useState(INITIAL_POSITIONS);
   const [draggingCircleId, setDraggingCircleId] = useState(null);
 
   // Handle mouse down event to start dragging
@@ -47,7 +49,7 @@ export const CircleScaleExercise = () => {
       <div className="mx-auto">
         <svg
           width={500}
-          height={400}
+          height={320}
           overflow={'visible'}
           onMouseMove={handleMouseMove}
           onMouseUp={handleMouseUp}
@@ -65,15 +67,30 @@ export const CircleScaleExercise = () => {
                 fillOpacity={1}
                 onMouseDown={(e) => handleMouseDown(e, circle.id)}
                 cursor={'pointer'}
+                style={{
+                  transition: 'cx 0.5s ease', // Smooth transition for the x-position
+                }}
+                onMouseEnter={(e) => (e.target.style.transition = 'none')} // Disable transition on hover
+                onMouseLeave={(e) =>
+                  (e.target.style.transition = 'transform 0.5s ease')
+                } // Re-enable transition when hover ends
               />
               <text
-                x={circle.cx}
+                x={0}
                 y={140}
                 textAnchor="middle"
                 alignmentBaseline="central"
                 fontSize={12}
                 cursor={'pointer'}
                 pointerEvents={'none'}
+                style={{
+                  transition: 'transform 0.5s ease', // Smooth transition for position
+                  transform: `translateX(${circle.cx}px)`,
+                }}
+                onMouseEnter={(e) => (e.target.style.transition = 'none')} // Disable transition on hover
+                onMouseLeave={(e) =>
+                  (e.target.style.transition = 'transform 0.5s ease')
+                } // Re-enable transition when hover ends
               >
                 {circle.value}
               </text>
@@ -118,7 +135,15 @@ export const CircleScaleExercise = () => {
         </svg>
       </div>
 
-      <div>
+      <div className="w-full flex justify-center gap-2">
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            setCircles(INITIAL_POSITIONS);
+          }}
+        >
+          Reset
+        </Button>
         <Button
           onClick={() => {
             setCircles([
diff --git a/pages/course/scales/introduction.tsx b/pages/course/scales/introduction.tsx
index a7ca4ed8..29145cc1 100644
--- a/pages/course/scales/introduction.tsx
+++ b/pages/course/scales/introduction.tsx
@@ -5,6 +5,7 @@ import { lessonList } from '@/util/lessonList';
 import { CodeBlock } from '@/component/UI/CodeBlock';
 import { Button } from '@/component/UI/button';
 import { CircleScaleExercise } from '@/component/interactiveTeaching/CircleScaleExercise';
+import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 
 const previousURL = '/course/svg/path-element';
 const currentURL = '/course/scales/introduction';
@@ -14,6 +15,10 @@ const seoDescription = '';
 export default function Home() {
   const currentLesson = lessonList.find((l) => l.link === currentURL);
 
+  if (!currentLesson) {
+    return null;
+  }
+
   return (
     <LayoutCourse
       title={currentLesson.name}
@@ -67,6 +72,33 @@ export default function Home() {
 
       <CircleScaleExercise />
 
+      <p>
+        <br /> <br />
+      </p>
+
+      <ExerciseAccordion
+        localStorageId={currentLesson.link}
+        exercises={[
+          {
+            title: <span>Let's do some math</span>,
+            content: (
+              <>
+                <p>
+                  I'm pretty sure you managed to put the circles at the right
+                  position.
+                </p>
+                <p>
+                  But, before reading the following, try to write down the{' '}
+                  <b>function</b> that allows to go from a value in the dataset
+                  to a position in pixel.
+                </p>
+                <p>The answer is coming below!</p>
+              </>
+            ),
+          },
+        ]}
+      />
+
       <h2>How it actually works</h2>
 
       <h3>The obvious part:</h3>
diff --git a/pages/course/svg/d3-shape.tsx b/pages/course/svg/d3-shape.tsx
index 188bb0c2..6fd7022e 100644
--- a/pages/course/svg/d3-shape.tsx
+++ b/pages/course/svg/d3-shape.tsx
@@ -441,40 +441,6 @@ const exercices: Exercise[] = [
     solutionSandbox: 'exercise/d3AreaFunctionSolution',
   },
 
-  {
-    whyItMatters: (
-      <>
-        <p>
-          Using the <code>area()</code> function is almost the same as the{' '}
-          <code>line()</code> function.
-        </p>
-        <p>
-          That's the magic of the <code>d3-shape</code> module, you switch from
-          one shape to the other easily!
-        </p>
-      </>
-    ),
-    toDo: (
-      <ul>
-        <li>
-          Let's switch to an area chart, thanks to the <code>d3.area()</code>{' '}
-          function. Three methods must be chained to <code>area()</code>:
-        </li>
-        <li>
-          <code>x()</code> is the same as for the line chart.
-        </li>
-        <li>
-          <code>y0()</code>: Y coordinate of the bottom of the area
-        </li>
-        <li>
-          <code>y1()</code> Y coordinate of the top.
-        </li>
-      </ul>
-    ),
-    practiceSandbox: 'exercise/d3LineMultipleLineChartPractice',
-    solutionSandbox: 'exercise/d3LineMultipleLineChartSolution',
-  },
-
   {
     whyItMatters: (
       <>
diff --git a/pages/course/svg/tips-and-tricks.tsx b/pages/course/svg/tips-and-tricks.tsx
index 32b212ed..d5dfcc4a 100644
--- a/pages/course/svg/tips-and-tricks.tsx
+++ b/pages/course/svg/tips-and-tricks.tsx
@@ -12,6 +12,7 @@ import {
 } from '@/component/UI/select';
 import { Sidenote } from '@/component/SideNote';
 import { MoveHorizontal, MoveVertical } from 'lucide-react';
+import { CodeBlock } from '@/component/UI/CodeBlock';
 
 const previousURL = '/course/svg/path-element';
 const currentURL = '/course/svg/tips-and-tricks';
@@ -194,13 +195,35 @@ export default function Home() {
         This is especially useful for applying transformations, styles, or
         events to a collection of elements as a single unit.
       </p>
-
+      <CodeBlock
+        code={`
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" stroke="black">
+    <circle cx="50" cy="50" r="40" />
+    <rect x="100" y="100" width="80" height="80" />
+    <line x1="20" y1="20" x2="180" y2="180" />
+  </g>
+</svg>
+`.trim()}
+      />
+      {/* -
+      -
+      -
+      -
+      -
+      -
+      -
+      -
+      -
+       */}
       <h2>4️⃣ Stroke, Fill, and Color: Different from HTML</h2>
       <p>
         In SVG, the concepts of <code>stroke</code>, <code>fill</code>, and{' '}
-        <code>color</code> work differently than in standard HTML. The{' '}
-        <code>fill</code> property controls the interior color of shapes, while{' '}
-        <code>stroke</code> affects the outline. Unlike <code>div</code>{' '}
+        <code>color</code> work differently than in standard HTML.
+      </p>
+      <p>
+        The <code>fill</code> property controls the interior color of shapes,
+        while <code>stroke</code> affects the outline. Unlike <code>div</code>{' '}
         elements, SVG shapes don’t have separate properties for borders and
         backgrounds; instead, you use <code>stroke</code> and <code>fill</code>{' '}
         to control these aspects.
@@ -221,16 +244,20 @@ export default function Home() {
         specificity rules.
       </p>
 
-      <h2>6️⃣ Text Specificity in SVG vs. HTML</h2>
+      <h2>6️⃣ Text Wrapping</h2>
+      <p>
+        In SVG, there is{' '}
+        <b>no built-in functionality for automatic text wrapping</b> like you
+        would find in HTML or CSS. 😱
+      </p>
       <p>
-        In SVG, there is no built-in functionality for automatic text wrapping
-        like you would find in HTML or CSS. You have to manage text wrapping
-        manually or use JavaScript libraries to handle it. You need to calculate
-        where to break the text and create multiple
+        You have to manage text wrapping manually or use JavaScript libraries to
+        handle it.
       </p>
       <p>
-        This is very super annoying. We will talk about workarounds in this
-        course.
+        This is very very annoying. In practice, we'll often use a HTML layer on
+        top of the SVG layer to add text (like in tooltips) to make our life
+        simpler.
       </p>
 
       <h2>7️⃣ SVG Dimensions: The Impact of “100%”</h2>
diff --git a/util/lessonList.tsx b/util/lessonList.tsx
index b9a71b48..d88368ac 100644
--- a/util/lessonList.tsx
+++ b/util/lessonList.tsx
@@ -133,7 +133,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/svg/d3-shape',
-    status: 'wip',
+    status: 'free',
     moduleId: 'svg',
   },
   {