Enhance data

easy-deep-learning · Jan 12, 2025 · 3563f37 · 3563f37
1 parent c29b615
commit 3563f37
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 20 deletions.
diff --git a/components/TimeSpanBar/TimeSpanBar.stories.tsx b/components/TimeSpanBar/TimeSpanBar.stories.tsx
@@ -10,16 +10,64 @@ const meta: Meta<typeof TimeSpanBar> = {
   },
   tags: ["autodocs"],
   argTypes: {
-    startDate: { control: "date" },
-    endDate: { control: "date" },
+    start: { control: "object" },
+    end: { control: "object" },
     events: {
-      control: "multi-select",
+      control: "object",
       options: ["Event 1", "Event 2", "Event 3", "Event 4"],
       mapping: {
-        "Event 1": { name: "Event 1", date: new Date("2024-02-15") },
-        "Event 2": { name: "Event 2", date: new Date("2024-04-20") },
-        "Event 3": { name: "Event 3", date: new Date("2024-06-10") },
-        "Event 4": { name: "Event 4", date: new Date("2024-08-30") },
+        "Event 1": {
+          name: "Event 1",
+          info: {
+            date: new Date("2024-02-15"),
+            image:
+              "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
+            location: {
+              name: "Moscow",
+              latitude: 55.7558,
+              longitude: 37.6173,
+            },
+          },
+        },
+        "Event 2": {
+          name: "Event 2",
+          info: {
+            date: new Date("2024-04-20"),
+            image:
+              "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg/440px-Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg",
+            location: {
+              name: "Moscow",
+              latitude: 55.7558,
+              longitude: 37.6173,
+            },
+          },
+        },
+        "Event 3": {
+          name: "Event 3",
+          info: {
+            date: new Date("2024-06-10"),
+            image:
+              "https://upload.wikimedia.org/wikipedia/commons/d/dc/Nikita_Khrushchev-TIME-1953.jpg",
+            location: {
+              name: "Moscow",
+              latitude: 55.7558,
+              longitude: 37.6173,
+            },
+          },
+        },
+        "Event 4": {
+          name: "Event 4",
+          info: {
+            date: new Date("2024-08-30"),
+            image:
+              "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
+            location: {
+              name: "Moscow",
+              latitude: 55.7558,
+              longitude: 37.6173,
+            },
+          },
+        },
       },
     },
   },
@@ -34,11 +82,49 @@ export const Default: Story = {
     header: "Хрущёв, Никита Сергеевич",
     image:
       "https://upload.wikimedia.org/wikipedia/commons/c/c5/Bundesarchiv_Bild_183-B0628-0015-035%2C_Nikita_S._Chruschtschow.jpg?uselang=ru",
-    startDate: new Date("1894-04-15"),
-    endDate: new Date("1971-09-11"),
+    start: {
+      date: new Date("1894-04-15"),
+      location: {
+        name: "Moscow",
+        latitude: 55.7558,
+        longitude: 37.6173,
+      },
+    },
+    end: {
+      date: new Date("1971-09-11"),
+      location: {
+        name: "Moscow",
+        latitude: 55.7558,
+        longitude: 37.6173,
+      },
+    },
     events: [
-      { name: "Event 1", date: new Date("2024-02-15") },
-      { name: "Event 2", date: new Date("2024-04-20") },
+      {
+        name: "Event 1",
+        info: {
+          date: new Date("2024-02-15"),
+          image:
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/NikitaNina.JPG/440px-NikitaNina.JPG",
+          location: {
+            name: "Moscow",
+            latitude: 55.7558,
+            longitude: 37.6173,
+          },
+        },
+      },
+      {
+        name: "Event 2",
+        info: {
+          date: new Date("2024-04-20"),
+          image:
+            "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg/440px-Joseph_Stalin_and_Nikita_Khrushchev%2C_1936.jpg",
+          location: {
+            name: "Moscow",
+            latitude: 55.7558,
+            longitude: 37.6173,
+          },
+        },
+      },
     ],
   },
 };
diff --git a/components/TimeSpanBar/TimeSpanBar.tsx b/components/TimeSpanBar/TimeSpanBar.tsx
@@ -2,20 +2,36 @@ import React from "react";
 
 import classes from "./TimeSpanBar.module.css";
 
+type Location = {
+  name: string;
+  latitude: number;
+  longitude: number;
+};
+
 type TimeSpanBarProps = {
-  startDate: Date;
-  endDate?: Date;
+  start: {
+    date: Date;
+    location?: Location;
+  };
+  end?: {
+    date: Date;
+    location?: Location;
+  };
   events: {
     name: string;
-    date: Date;
+    info: {
+      date: Date;
+      image?: string;
+      location?: Location;
+    };
   }[];
   header: string;
   image: string;
 };
 
 const TimeSpanBar = ({
-  startDate,
-  endDate,
+  start,
+  end,
   events,
   header,
   image,
@@ -26,18 +42,27 @@ const TimeSpanBar = ({
       <div className={classes.content}>
         <div className={classes.start}>
           <div className={classes.label}>Дата рождения</div>
-          <div className={classes.date}>{startDate.toLocaleDateString()}</div>
+          <div className={classes.date}>{start.date.toLocaleDateString()}</div>
         </div>
         <img width={64} src={image} alt={header} className={classes.image} />
         <div className={classes.events}>
           {events.map((event) => (
-            <div className={classes.event}>{event.name}</div>
+            <div className={classes.event}>
+              <div className={classes.eventDate}>
+                {event.info.date.toLocaleDateString()}
+              </div>
+              <div className={classes.eventName}>{event.name}</div>
+              <div className={classes.eventLocation}>
+                {event.info.location?.name}
+              </div>
+              <img width={64} src={event.info.image} alt={event.name} />
+            </div>
           ))}
         </div>
-        {endDate && (
+        {end && (
           <div className={classes.end}>
             <div className={classes.label}>Дата смерти</div>
-            <div className={classes.date}>{endDate.toLocaleDateString()}</div>
+            <div className={classes.date}>{end.date.toLocaleDateString()}</div>
           </div>
         )}
       </div>