Add more chart test data and allow disabling animations

tinytek-io · Jul 15, 2024 · dc1a86e · dc1a86e
1 parent d373f65
commit dc1a86e
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 29 deletions.
diff --git a/docs/charts/basic/area-chart.mdx b/docs/charts/basic/area-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <AreaChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { AreaChart } from '@/ui/charts/AreaChart';
+
+export default function Example() {
+  return (
+    <AreaChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
diff --git a/docs/charts/basic/bar-chart.mdx b/docs/charts/basic/bar-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <BarChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { BarChart } from '@/ui/charts/BarChart';
+
+export default function Example() {
+  return (
+    <BarChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
diff --git a/docs/charts/basic/data.ts b/docs/charts/basic/data.ts
@@ -0,0 +1,110 @@
+import type { GroupedData } from "@/ui/charts/util";
+
+export const chartDataMedium: GroupedData<"uv" | "pv" | "av">[] = [
+  "Page A",
+  "Page B",
+  "Page C",
+  "Page D",
+  "Page E"
+].map((name) => ({
+  name,
+  uv: getRandomInt(900, 3000),
+  pv: getRandomInt(900, 3000),
+  av: getRandomInt(900, 3000)
+}));
+
+export const chartDataLarge: GroupedData<"uv" | "pv" | "av" | "rv" | "tv" | "sv">[] = [
+  "Page A",
+  "Page B",
+  "Page C",
+  "Page D",
+  "Page E"
+].map((name) => ({
+  name,
+  uv: getRandomInt(900, 3000),
+  pv: getRandomInt(900, 3000),
+  av: getRandomInt(900, 3000),
+  rv: getRandomInt(900, 3000),
+  tv: getRandomInt(900, 3000),
+  sv: getRandomInt(900, 3000)
+}));
+
+export const chartDataMaximum: GroupedData<
+  | "GDP Growth"
+  | "Inflation Rate"
+  | "Unemployment Rate"
+  | "Interest Rates"
+  | "Consumer Spending"
+  | "Export Volume"
+  | "Import Volume"
+  | "Government Debt"
+  | "Foreign Exchange Reserves"
+>[] = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"].map(
+  (name) => ({
+    name,
+    "GDP Growth": getRandomInt(300, 3000),
+    "Inflation Rate": getRandomInt(300, 3000),
+    "Unemployment Rate": getRandomInt(300, 3000),
+    "Interest Rates": getRandomInt(300, 3000),
+    "Consumer Spending": getRandomInt(300, 3000),
+    "Export Volume": getRandomInt(300, 3000),
+    "Import Volume": getRandomInt(300, 3000),
+    "Government Debt": getRandomInt(300, 3000),
+    "Foreign Exchange Reserves": getRandomInt(300, 3000)
+  })
+);
+
+export const radarDataMedium: GroupedData<"Mike" | "Lily" | "Taylor">[] = [
+  "Math",
+  "Chinese",
+  "English",
+  "Geography",
+  "Physics",
+  "History"
+].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150)
+}));
+
+/**
+ * Data for the radar chart. Using the category names "Math", "Chinese", "English", "Geography", "Physics", and "History".
+ * The data is grouped by the categories and the students' names are the keys to the scores.
+ * The scores are between 0 and 150. The data should be random and contain both high and low scores.
+ */
+export const radarDataLarge: GroupedData<"Mike" | "Lily" | "Taylor" | "Morgan" | "Casey" | "Jamie">[] = [
+  "Math",
+  "Chinese",
+  "English",
+  "Geography",
+  "Physics",
+  "History"
+].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150),
+  Morgan: getRandomInt(0, 150),
+  Casey: getRandomInt(0, 150),
+  Jamie: getRandomInt(0, 150)
+}));
+
+export const radarDataBig: GroupedData<
+  "Mike" | "Lily" | "Taylor" | "Morgan" | "Casey" | "Jamie" | "Avery" | "Riley" | "Quinn"
+>[] = ["Math", "Chinese", "English", "Geography", "Physics", "History"].map((name) => ({
+  name,
+  Mike: getRandomInt(0, 150),
+  Lily: getRandomInt(0, 150),
+  Taylor: getRandomInt(0, 150),
+  Morgan: getRandomInt(0, 150),
+  Casey: getRandomInt(0, 150),
+  Jamie: getRandomInt(0, 150),
+  Avery: getRandomInt(0, 150),
+  Riley: getRandomInt(0, 150),
+  Quinn: getRandomInt(0, 150)
+}));
+
+function getRandomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
diff --git a/docs/charts/basic/line-plot.mdx b/docs/charts/basic/line-plot.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <LinePlot data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { LinePlot } from '@/ui/charts/LinePlot';
+
+export default function Example() {
+  return (
+    <LinePlot data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
diff --git a/docs/charts/basic/pie-chart.mdx b/docs/charts/basic/pie-chart.mdx
@@ -55,4 +55,43 @@ export default function Example() {
     <PieChart data={data} />
   );
 }
+```
+
+## Animation Disabled
+
+```tsx preview
+import { chartDataMedium } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataMedium} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { chartDataLarge } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataLarge} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { chartDataMaximum } from "@/docs/charts/basic/data";
+import { PieChart } from '@/ui/charts/PieChart';
+
+export default function Example() {
+  return (
+    <PieChart data={chartDataMaximum} isAnimationActive={false} />
+  );
+}
 ```
diff --git a/docs/charts/basic/radar-chart.mdx b/docs/charts/basic/radar-chart.mdx
@@ -5,43 +5,79 @@ RadarChart is a component that displays data in a bar chart format.
 ```tsx preview
 import { RadarChart } from '@/ui/charts/RadarChart';
 
-const data: GroupedData<"uv" | "pv" | "amt">[] = [
+export const data: GroupedData<"Mike" | "Lily">[] = [
   {
-    name: 'Math',
+    name: "Math",
     Mike: 120,
-    Lily: 110,
+    Lily: 100
   },
   {
-    name: 'Chinese',
-    Mike: 98,
-    Lily: 130,
+    name: "Chinese",
+    Mike: 100,
+    Lily: 120
   },
   {
-    name: 'English',
-    Mike: 86,
-    Lily: 130,
+    name: "English",
+    Mike: 110,
+    Lily: 100
   },
   {
-    name: 'Geography',
-    Mike: 99,
-    Lily: 100,
-    fullMark: 150,
+    name: "Geography",
+    Mike: 120,
+    Lily: 100
   },
   {
-    name: 'Physics',
-    Mike: 85,
-    Lily: 90,
+    name: "Physics",
+    Mike: 100,
+    Lily: 120
   },
   {
-    name: 'History',
-    Mike: 65,
-    Lily: 85,
-  },
+    name: "History",
+    Mike: 110,
+    Lily: 100
+  }
 ];
 
 export default function Example() {
   return (
     <RadarChart data={data} domain={[0, 150]} />
   );
 }
+```
+
+```tsx preview
+import { radarDataMedium } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataMedium} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
+```
+
+## Large data series
+
+```tsx preview
+import { radarDataLarge } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataLarge} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
+```
+
+## Maximum data series
+
+```tsx preview
+import { radarDataBig } from "@/docs/charts/basic/data";
+import { RadarChart } from '@/ui/charts/RadarChart';
+
+export default function Example() {
+  return (
+    <RadarChart data={radarDataBig} domain={[0, 150]} isAnimationActive={false} />
+  );
+}
 ```