@databiosphere/findable-ui 27.0.0 → 28.0.0

package/tests/chart.test.tsx

@@ -2,7 +2,11 @@ import { composeStories } from "@storybook/react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { SelectCategoryValueView } from "../src/common/entities";
-import { parseTranslate } from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils";
+import {
+  getCategoryTotalCount,
+  getCountText,
+  parseTranslate,
+} from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/utils";
 import { CHART_TEST_ID } from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/constants";
 import * as stories from "../src/components/Index/components/EntitiesView/components/ChartView/components/Chart/stories/chart.stories";
 import { PALETTE } from "../src/styles/common/constants/palette";
@@ -16,6 +20,7 @@ const { Default, Selected } = composeStories(stories);
 
 const DATA = Default.args.selectCategoryValueViews || [];
 const SELECTED_DATA = Selected.args.selectCategoryValueViews || [];
+const TOTAL_COUNT = getCategoryTotalCount(DATA);
 
 describe("Chart", () => {
   describe("basic rendering", () => {
@@ -35,7 +40,7 @@ describe("Chart", () => {
   });
 
   describe("category labels and counts", () => {
-    const counts = DATA.map(mapCount);
+    const counts = DATA.map((d) => mapCount(d, TOTAL_COUNT));
     const labels = DATA.map(mapLabel);
     let countTextEls: NodeListOf<SVGElement>;
     let labelTextEls: NodeListOf<SVGElement>;
@@ -127,7 +132,9 @@ describe("Chart", () => {
     it("renders bars in descending order of count", () => {
       render(<Default testId={CHART_TEST_ID} />);
       // Order data by count in descending order.
-      const counts = [...DATA].sort(sortByCount).map(mapCount);
+      const counts = [...DATA]
+        .sort(sortByCount)
+        .map((d) => mapCount(d, TOTAL_COUNT));
       // Sort count <text> elements by their transform’s translate‑Y (vertical) value, since they’re rendered in data order.
       const countTextEls = getEls(CLASSNAMES.TEXT_COUNT, "text");
       const textContents = [...countTextEls]
@@ -200,12 +207,16 @@ function isFillPrimaryMain(element: Element): boolean {
 }
 
 /**
- * Maps the count of a category value view to a string.
- * @param categoryValueView - Category value view.
- * @returns Count as a string.
+ * Maps the count of a category value to a string representation.
+ * @param categoryValueView - The category value view to be processed.
+ * @param total - The total count associated with the category value.
+ * @returns The formatted count text for the category value.
  */
-function mapCount(categoryValueView: SelectCategoryValueView): string {
-  return categoryValueView.count.toLocaleString();
+function mapCount(
+  categoryValueView: SelectCategoryValueView,
+  total: number
+): string {
+  return getCountText(categoryValueView, total);
 }
 
 /**

package/tests/chartView.test.tsx

@@ -35,7 +35,7 @@ describe("ChartView", () => {
     } = Default;
     ["Biological Sex", "Genus Species"].forEach((category) => {
       expect(
-        screen.getByText(new RegExp(`${entityName} per ${category}`))
+        screen.getByText(new RegExp(`${entityName} by ${category}`))
       ).toBeDefined();
     });
   });

package/lib/components/Index/components/Hero/components/Summaries/summaries.stories.d.ts

@@ -1,13 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        summaries: {
-            control: "object";
-        };
-    };
-    component: ({ summaries }: import("./summaries").SummariesProps) => JSX.Element;
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const SummariesStory: Story;

package/lib/components/Index/components/Hero/hero.stories.d.ts

@@ -1,23 +0,0 @@
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    argTypes: {
-        Summaries: {
-            table: {
-                disable: true;
-            };
-        };
-        title: {
-            table: {
-                disable: true;
-            };
-        };
-    };
-    component: ({ SideBarButton, Summaries, title, }: import("./hero").HeroProps) => JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    title: string;
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const HeroStory: Story;

package/lib/components/Index/components/Hero/hero.stories.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { Summaries } from "./components/Summaries/summaries";
-import { SummariesStory } from "./components/Summaries/summaries.stories";
-import { Hero } from "./hero";
-const meta = {
-    argTypes: {
-        Summaries: { table: { disable: true } },
-        title: { table: { disable: true } },
-    },
-    component: Hero,
-    parameters: {
-        layout: "fullscreen",
-    },
-    title: "Components/Hero/ExploreView",
-};
-export default meta;
-export const HeroStory = {
-    args: {
-        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
-        title: "Data Explorer",
-    },
-};

package/lib/components/Index/index.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { Index } from "./index";
-declare const _default: Meta<typeof Index>;
-export default _default;
-type Story = StoryObj<typeof Index>;
-export declare const IndexStory: Story;

package/lib/components/Index/index.stories.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { Summaries } from "./components/Hero/components/Summaries/summaries";
-import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
-import { Index } from "./index";
-export default {
-    argTypes: {
-        Summaries: { table: { disable: true } },
-        Tabs: { table: { disable: true } },
-        list: { table: { disable: true } },
-        title: { table: { disable: true } },
-    },
-    component: Index,
-    parameters: {
-        layout: "fullscreen",
-    },
-    title: "Views/ExploreView",
-};
-export const IndexStory = {
-    args: {
-        Summaries: React.createElement(Summaries, { ...SummariesStory.args }),
-        Tabs: undefined,
-        chart: undefined,
-        list: undefined,
-        title: "Explore Data",
-    },
-};

package/src/components/Index/components/Hero/hero.stories.tsx

@@ -1,28 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Summaries } from "./components/Summaries/summaries";
-import { SummariesStory } from "./components/Summaries/summaries.stories";
-import { Hero } from "./hero";
-
-const meta = {
-  argTypes: {
-    Summaries: { table: { disable: true } },
-    title: { table: { disable: true } },
-  },
-  component: Hero,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Components/Hero/ExploreView",
-} satisfies Meta<typeof Hero>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const HeroStory: Story = {
-  args: {
-    Summaries: <Summaries {...SummariesStory.args} />,
-    title: "Data Explorer",
-  },
-};

package/src/components/Index/index.stories.tsx

@@ -1,31 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Summaries } from "./components/Hero/components/Summaries/summaries";
-import { SummariesStory } from "./components/Hero/components/Summaries/summaries.stories";
-import { Index } from "./index";
-
-export default {
-  argTypes: {
-    Summaries: { table: { disable: true } },
-    Tabs: { table: { disable: true } },
-    list: { table: { disable: true } },
-    title: { table: { disable: true } },
-  },
-  component: Index,
-  parameters: {
-    layout: "fullscreen",
-  },
-  title: "Views/ExploreView",
-} as Meta<typeof Index>;
-
-type Story = StoryObj<typeof Index>;
-
-export const IndexStory: Story = {
-  args: {
-    Summaries: <Summaries {...SummariesStory.args} />,
-    Tabs: undefined,
-    chart: undefined,
-    list: undefined,
-    title: "Explore Data",
-  },
-};