Handle pie chart empty state (#18)

kubk · Feb 24, 2024 · 2b73ec2 · 2b73ec2
1 parent a3289de
commit 2b73ec2
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 38 deletions.
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -167,4 +167,4 @@ export const myPlansRequest = () => {
 
 export const myStatisticsRequest = () => {
   return request<MyStatisticsResponse>("/my-statistics");
-}
+};
diff --git a/src/screens/component-catalog/components.tsx b/src/screens/component-catalog/components.tsx
@@ -2,6 +2,7 @@ import { Button } from "../../ui/button.tsx";
 import { ReactNode } from "react";
 import { CardPreviewStory } from "./card-preview-story.tsx";
 import { SelectStory } from "./select-story.tsx";
+import { PieChartCanvasStory } from "./pie-chart-canvas-story.tsx";
 
 export type Component = {
   name: string;
@@ -46,4 +47,8 @@ export const components: Array<Component> = [
     name: "Select",
     component: <SelectStory />,
   },
+  {
+    name: "PieChart",
+    component: <PieChartCanvasStory />,
+  },
 ];
diff --git a/src/screens/component-catalog/pie-chart-canvas-story.tsx b/src/screens/component-catalog/pie-chart-canvas-story.tsx
@@ -0,0 +1,43 @@
+import { PieChartCanvas } from "../user-statistics/pie-chart-canvas.tsx";
+import { css } from "@emotion/css";
+
+export const PieChartCanvasStory = () => {
+  return (
+    <div
+      className={css({
+        display: "flex",
+        gap: 16,
+        flexDirection: "column",
+      })}
+    >
+      <PieChartCanvas
+        data={[
+          { interval_range: "1-2", frequency: 10 },
+          { interval_range: "3-4", frequency: 20 },
+          { interval_range: "5-6", frequency: 30 },
+        ]}
+        width={200}
+        height={200}
+      />
+
+      <PieChartCanvas
+        data={[
+          { interval_range: "1-2", frequency: 10 },
+          { interval_range: "3-4", frequency: 20 },
+        ]}
+        width={200}
+        height={200}
+      />
+
+      <PieChartCanvas
+        data={[
+          { interval_range: "1-2", frequency: 0 },
+          { interval_range: "3-4", frequency: 0 },
+          { interval_range: "5-6", frequency: 0 },
+        ]}
+        width={200}
+        height={200}
+      />
+    </div>
+  );
+};
diff --git a/src/screens/user-statistics/empty-study-frequency-chart-text.tsx b/src/screens/user-statistics/empty-study-frequency-chart-text.tsx
@@ -0,0 +1,27 @@
+import { css } from "@emotion/css";
+import { theme } from "../../ui/theme.tsx";
+import React from "react";
+import { t } from "../../translations/t.ts";
+
+export const EmptyStudyFrequencyChartText = () => {
+  return (
+    <div
+      className={css({
+        backgroundColor: theme.bgColor,
+        color: theme.textColor,
+        padding: 12,
+        boxShadow: theme.boxShadow,
+        borderRadius: theme.borderRadius,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        fontSize: 14,
+        width: 250,
+        textAlign: "center",
+      })}
+    >
+      {t("user_stats_empty_text")}
+    </div>
+  );
+};
diff --git a/src/screens/user-statistics/legend-item.tsx b/src/screens/user-statistics/legend-item.tsx
@@ -1,15 +1,19 @@
 import { css } from "@emotion/css";
 import React from "react";
 
-export const LegendItem = (props: { color: string }) => {
+type Props = {
+  color: string;
+};
+
+export const LegendItem = (props: Props) => {
   const { color } = props;
   return (
     <div
       className={css({
         height: 14,
         width: 14,
         backgroundColor: color,
-        borderRadius: 4
+        borderRadius: 4,
       })}
     />
   );

diff --git a/src/screens/user-statistics/store/user-statistics-store.ts b/src/screens/user-statistics/store/user-statistics-store.ts
@@ -44,4 +44,8 @@ export class UserStatisticsStore {
 
     return this.userStatistics.value.intervalFrequency;
   }
+
+  get isFrequencyChartEmpty() {
+    return this.frequencyChart.every((item) => item.frequency === 0);
+  }
 }
diff --git a/src/screens/user-statistics/user-statistics-screen.tsx b/src/screens/user-statistics/user-statistics-screen.tsx
@@ -16,6 +16,10 @@ import {
 } from "./pie-chart-canvas.tsx";
 import { LegendItem } from "./legend-item.tsx";
 import { DeckLoading } from "../shared/deck-loading.tsx";
+import { EmptyStudyFrequencyChartText } from "./empty-study-frequency-chart-text.tsx";
+
+const pieChartWidth = 250;
+const pieChartHeight = 200;
 
 export const UserStatisticsScreen = observer(() => {
   const userStatisticsStore = useUserStatisticsStore();
@@ -79,45 +83,78 @@ export const UserStatisticsScreen = observer(() => {
               marginTop: 10,
               marginLeft: "auto",
               marginRight: "auto",
+              position: "relative",
             })}
           >
-            <PieChartCanvas
-              data={userStatisticsStore.frequencyChart}
-              width={250}
-              height={200}
-            />
-          </div>
+            {userStatisticsStore.isFrequencyChartEmpty ? (
+              <div className={css({ filter: "blur(5px)" })}>
+                <PieChartCanvas
+                  data={[
+                    { interval_range: "1-2", frequency: 10 },
+                    { interval_range: "3-4", frequency: 20 },
+                    { interval_range: "5-6", frequency: 30 },
+                    { interval_range: "7-8", frequency: 10 },
+                    { interval_range: "9-10", frequency: 20 },
+                  ]}
+                  width={pieChartWidth}
+                  height={pieChartHeight}
+                />
+              </div>
+            ) : (
+              <PieChartCanvas
+                data={userStatisticsStore.frequencyChart}
+                width={pieChartWidth}
+                height={pieChartHeight}
+              />
+            )}
 
-          <div
-            className={css({
-              display: "flex",
-              flexDirection: "column",
-              gap: 4,
-              alignSelf: "center",
-            })}
-          >
-            <div
-              className={css({ display: "flex", gap: 4, alignItems: "center" })}
-            >
-              <LegendItem color={chartStart} />
-              <span className={css({ fontSize: 14 })}>
-                {t("user_stats_chart_min_expl")}
-              </span>
-            </div>
-            <div
-              className={css({ display: "flex", gap: 4, alignItems: "center" })}
-            >
-              <LegendItem color={chartFinish} />
-              <span className={css({ fontSize: 14 })}>
-                {t("user_stats_chart_max_expl")}
-              </span>
-            </div>
+            {userStatisticsStore.isFrequencyChartEmpty && (
+              <EmptyStudyFrequencyChartText />
+            )}
           </div>
-          <p>
-            <HintTransparent>
-              {t("user_stats_learning_time_hint")}
-            </HintTransparent>
-          </p>
+
+          {!userStatisticsStore.isFrequencyChartEmpty && (
+            <>
+              <div
+                className={css({
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  alignSelf: "center",
+                })}
+              >
+                <div
+                  className={css({
+                    display: "flex",
+                    gap: 4,
+                    alignItems: "center",
+                  })}
+                >
+                  <LegendItem color={chartStart} />
+                  <span className={css({ fontSize: 14 })}>
+                    {t("user_stats_chart_min_expl")}
+                  </span>
+                </div>
+                <div
+                  className={css({
+                    display: "flex",
+                    gap: 4,
+                    alignItems: "center",
+                  })}
+                >
+                  <LegendItem color={chartFinish} />
+                  <span className={css({ fontSize: 14 })}>
+                    {t("user_stats_chart_max_expl")}
+                  </span>
+                </div>
+              </div>
+              <p>
+                <HintTransparent>
+                  {t("user_stats_learning_time_hint")}
+                </HintTransparent>
+              </p>
+            </>
+          )}
         </>
       ) : null}
     </Screen>

diff --git a/src/translations/t.ts b/src/translations/t.ts
@@ -2,6 +2,7 @@ import { Translator } from "../lib/translator/translator.ts";
 import { getUserLanguage } from "./get-user-language.ts";
 
 const en = {
+  user_stats_empty_text: "Study more cards to see the data",
   hide_card_forever: "Hide forever",
   mute_cards: "Mute sound",
   unmute_cards: "Unmute sound",
@@ -186,6 +187,7 @@ const en = {
 type Translation = typeof en;
 
 const ru: Translation = {
+  user_stats_empty_text: "Изучите больше карточек, чтобы увидеть данные",
   hide_card_forever_confirm_title:
     "Вы уверены, что хотите скрыть эту карточку навсегда? Вы больше не увидите её",
   hide_card_forever: "Скрыть навсегда",
@@ -363,6 +365,7 @@ const ru: Translation = {
 };
 
 const es: Translation = {
+  user_stats_empty_text: "Estudia más tarjetas para ver los datos",
   hide_card_forever: "Ocultar para siempre",
   mute_cards: "Silenciar sonido",
   unmute_cards: "Activar sonido",
@@ -546,6 +549,7 @@ const es: Translation = {
 };
 
 const ptBr: Translation = {
+  user_stats_empty_text: "Estude mais cartões para ver os dados",
   hide_card_forever: "Ocultar para sempre",
   mute_cards: "Silenciar som",
   unmute_cards: "Ativar som",
-Original file line number
+Diff line change
@@ Expand Up / @@ -167,4 +167,4 @@ export const myPlansRequest = () => { @@
     export const myStatisticsRequest = () => {
       return request<MyStatisticsResponse>("/my-statistics");
-    }
+    };