@databiosphere/findable-ui 50.6.0 → 50.7.0

package/lib/components/Filter/components/ai/components/FacetAssistant/types.d.ts

@@ -0,0 +1,13 @@
+export interface AiResponse {
+    facets: Facet[];
+    query: string;
+}
+export interface Facet {
+    facet: string;
+    selectedValues: SelectedValue[];
+}
+export interface SelectedValue {
+    mention: string;
+    recognized: boolean;
+    term: string;
+}

package/lib/components/Filter/components/ai/components/FacetAssistant/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/ai/components/FacetAssistant/utils.d.ts

@@ -0,0 +1,15 @@
+import type { SelectedFilter } from "../../../../../../common/entities";
+import type { ResultSummaryData } from "./components/ResultSummary/types";
+import type { AiResponse } from "./types";
+/**
+ * Builds a summary of matched and unmatched mention-term pairs from the AI response.
+ * @param response - The AI response object.
+ * @returns A summary object with matched and unmatched pairs, or undefined if no response.
+ */
+export declare function buildSummary(response: AiResponse | null): ResultSummaryData | undefined;
+/**
+ * Maps the AI response to a list of selected filters.
+ * @param response - AI response.
+ * @returns List of selected filters.
+ */
+export declare function mapResponse(response: AiResponse): SelectedFilter[];

package/lib/components/Filter/components/ai/components/FacetAssistant/utils.js

@@ -0,0 +1,91 @@
+/**
+ * Builds a summary of matched and unmatched mention-term pairs from the AI response.
+ * @param response - The AI response object.
+ * @returns A summary object with matched and unmatched pairs, or undefined if no response.
+ */
+export function buildSummary(response) {
+    if (!response)
+        return;
+    const matched = [];
+    const unmatched = [];
+    for (const facet of response.facets) {
+        const facetUnmatched = isUnmatchedFacet(facet);
+        for (const selectedValue of facet.selectedValues) {
+            const { mention, term } = selectedValue;
+            const pair = [mention, term];
+            if (facetUnmatched || isUnknownValue(selectedValue)) {
+                unmatched.push(pair);
+            }
+            else {
+                matched.push(pair);
+            }
+        }
+    }
+    return { matched, unmatched };
+}
+/**
+ * Filters out unknown facets.
+ * @param facet - Facet.
+ * @returns Boolean.
+ */
+function filterFacet(facet) {
+    return facet.facet !== "unknown" && facet.facet !== "unmatched";
+}
+/**
+ * Filters out unknown or unrecognized values.
+ * @param selectedValue - Selected value.
+ * @returns Boolean.
+ */
+function filterValue(selectedValue) {
+    return !isUnknownValue(selectedValue);
+}
+/**
+ * Checks if a value is unknown or unrecognized.
+ * @param selectedValue - Selected value to check.
+ * @returns Boolean.
+ */
+function isUnknownValue(selectedValue) {
+    return selectedValue.term === "unknown" || selectedValue.recognized === false;
+}
+/**
+ * Identifies unmatched facets.
+ * @param facet - Facet.
+ * @returns Boolean.
+ */
+function isUnmatchedFacet(facet) {
+    return facet.facet === "unknown" || facet.facet === "unmatched";
+}
+/**
+ * Maps the AI response to a list of selected filters.
+ * @param response - AI response.
+ * @returns List of selected filters.
+ */
+export function mapResponse(response) {
+    const { facets } = response;
+    // Filter out unknown facets.
+    const filteredFacets = facets.filter(filterFacet);
+    // Map facets to selected filters.
+    return filteredFacets
+        .map(mapSelectedFilter)
+        .filter((filter) => filter.value.length > 0);
+}
+/**
+ * Maps the facet to a selected filter.
+ * @param facet - Facet.
+ * @returns Selected filter.
+ */
+function mapSelectedFilter(facet) {
+    const { facet: categoryKey, selectedValues } = facet;
+    return {
+        categoryKey,
+        value: selectedValues.filter(filterValue).map(mapValue),
+    };
+}
+/**
+ * Maps the selected value to a string.
+ * @param selectedValue - Selected value.
+ * @returns String.
+ */
+function mapValue(selectedValue) {
+    return selectedValue.term;
+}

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/aiSwitch.d.ts

@@ -0,0 +1,9 @@
+import { AiSwitchProps } from "./types";
+/**
+ * AiSwitch component.
+ * Renders a switch for AI search assist to toggle between search all filters and facet assistant.
+ * @param props - Component props.
+ * @param props.enabled - Whether the switch is enabled.
+ * @returns AiSwitch component.
+ */
+export declare const AiSwitch: ({ enabled, ...props }: AiSwitchProps) => JSX.Element | null;

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/aiSwitch.js

@@ -0,0 +1,16 @@
+import { Switch } from "@mui/material";
+import React from "react";
+import { SWITCH_PROPS } from "../../../../../../../styles/common/mui/switch";
+import { StyledFormControlLabel } from "./aiSwitch.styles";
+/**
+ * AiSwitch component.
+ * Renders a switch for AI search assist to toggle between search all filters and facet assistant.
+ * @param props - Component props.
+ * @param props.enabled - Whether the switch is enabled.
+ * @returns AiSwitch component.
+ */
+export const AiSwitch = ({ enabled = false, ...props /* MuiSwitchProps */ }) => {
+    if (!enabled)
+        return null;
+    return (React.createElement(StyledFormControlLabel, { control: React.createElement(Switch, { color: SWITCH_PROPS.COLOR.PURPLE, ...props }), label: "AI Search Assist" }));
+};

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/aiSwitch.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const StyledFormControlLabel: import("@emotion/styled").StyledComponent<import("@mui/material").FormControlLabelProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/aiSwitch.styles.js

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+import { FormControlLabel } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledFormControlLabel = styled(FormControlLabel) `
+  .MuiFormControlLabel-label {
+    border-bottom: 1px dashed ${PALETTE.SMOKE_DARK};
+    height: 20px;
+  }
+`;

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/stories/aiSwitch.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { AiSwitch } from "../aiSwitch";
+declare const meta: Meta<typeof AiSwitch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DEFAULT: Story;

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/stories/aiSwitch.stories.js

@@ -0,0 +1,8 @@
+import { AiSwitch } from "../aiSwitch";
+const meta = {
+    component: AiSwitch,
+};
+export default meta;
+export const DEFAULT = {
+    args: { enabled: true },
+};

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/types.d.ts

@@ -0,0 +1,4 @@
+import { SwitchProps } from "@mui/material";
+export interface AiSwitchProps extends SwitchProps {
+    enabled?: boolean;
+}

package/lib/components/Filter/components/controls/Controls/components/AiSwitch/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/button.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps } from "./types";
+/**
+ * Button component.
+ * Renders a button with sort icon and "sort" text for filter sorting.
+ * @param props - Component props.
+ * @param props.onClick - Click handler.
+ * @param props.open - Whether the button is open.
+ * @returns Button component.
+ */
+export declare const Button: ({ onClick, open }: ButtonProps) => JSX.Element;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/button.js

@@ -0,0 +1,16 @@
+import { SortRounded } from "@mui/icons-material";
+import React from "react";
+import { BUTTON_PROPS } from "../../../../../../../../../styles/common/mui/button";
+import { TEST_IDS } from "../../../../../../../../../tests/testIds";
+import { StyledButton } from "./button.styles";
+/**
+ * Button component.
+ * Renders a button with sort icon and "sort" text for filter sorting.
+ * @param props - Component props.
+ * @param props.onClick - Click handler.
+ * @param props.open - Whether the button is open.
+ * @returns Button component.
+ */
+export const Button = ({ onClick, open = false }) => {
+    return (React.createElement(StyledButton, { color: BUTTON_PROPS.COLOR.SECONDARY, "data-testid": TEST_IDS.FILTER_SORT_BUTTON, onClick: onClick, open: open, startIcon: React.createElement(SortRounded, null), variant: BUTTON_PROPS.VARIANT.TEXT }, "Sort"));
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/button.styles.d.ts

@@ -0,0 +1,6 @@
+import { MenuProps } from "@mui/material";
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "size" | "href" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "loading" | "loadingIndicator" | "variant" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
+} & Pick<MenuProps, "open">, {}, {}>;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/button.styles.js

@@ -0,0 +1,18 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Button } from "@mui/material";
+import { FONT } from "../../../../../../../../../styles/common/constants/font";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+export const StyledButton = styled(Button) `
+  align-items: center;
+  font: ${FONT.BODY_SMALL_500};
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  ${({ open }) => open &&
+    css `
+      color: ${PALETTE.INK_MAIN};
+    `}
+`;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/types.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps as MButtonProps, MenuProps } from "@mui/material";
+export type ButtonProps = MButtonProps & Pick<MenuProps, "open">;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/Button/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/constants.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/constants.js

@@ -0,0 +1,4 @@
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../../../styles/common/mui/svgIcon";
+export const SVG_ICON_PROPS = {
+    fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/iconButton.d.ts

@@ -0,0 +1,10 @@
+import { IconButtonProps } from "./types";
+/**
+ * IconButton component.
+ * Renders an icon button with a settings icon for filter sorting.
+ * @param props - Component props.
+ * @param props.onClick - Click handler.
+ * @param props.open - Whether the icon button is open.
+ * @returns IconButton component.
+ */
+export declare const IconButton: ({ onClick, open, }: IconButtonProps) => JSX.Element;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/iconButton.js

@@ -0,0 +1,18 @@
+import { SettingsOutlined } from "@mui/icons-material";
+import React from "react";
+import { ICON_BUTTON_PROPS } from "../../../../../../../../../styles/common/mui/iconButton";
+import { TEST_IDS } from "../../../../../../../../../tests/testIds";
+import { SVG_ICON_PROPS } from "./constants";
+import { StyledIconButton } from "./iconButton.styles";
+/**
+ * IconButton component.
+ * Renders an icon button with a settings icon for filter sorting.
+ * @param props - Component props.
+ * @param props.onClick - Click handler.
+ * @param props.open - Whether the icon button is open.
+ * @returns IconButton component.
+ */
+export const IconButton = ({ onClick, open = false, }) => {
+    return (React.createElement(StyledIconButton, { color: ICON_BUTTON_PROPS.COLOR.INK_LIGHT, "data-testid": TEST_IDS.FILTER_SORT_BUTTON, onClick: onClick, open: open },
+        React.createElement(SettingsOutlined, { ...SVG_ICON_PROPS })));
+};

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/iconButton.styles.d.ts

@@ -0,0 +1,6 @@
+import { MenuProps } from "@mui/material";
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "size" | "className" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableFocusRipple" | "edge" | "loading" | "loadingIndicator"> & {
+    theme?: import("@emotion/react").Theme;
+} & Pick<MenuProps, "open">, {}, {}>;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/iconButton.styles.js

@@ -0,0 +1,13 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButton } from "@mui/material";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+export const StyledIconButton = styled(IconButton) `
+  align-self: center;
+  padding: 0;
+
+  ${({ open }) => open &&
+    css `
+      color: ${PALETTE.INK_MAIN};
+    `}
+`;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/types.d.ts

@@ -0,0 +1,2 @@
+import { MenuProps, IconButtonProps as MIconButtonProps } from "@mui/material";
+export type IconButtonProps = MIconButtonProps & Pick<MenuProps, "open">;

package/lib/components/Filter/components/controls/Controls/components/FilterSort/components/IconButton/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Filter/components/surfaces/drawer/components/Button/types.d.ts

@@ -0,0 +1,4 @@
+import { ButtonProps as MButtonProps } from "@mui/material";
+import type { BaseComponentProps } from "../../../../../../types";
+import type { FilterCountChipProps } from "../../../../FilterCountChip/types";
+export type ButtonProps = BaseComponentProps & MButtonProps & Pick<FilterCountChipProps, "count">;

package/lib/components/Filter/components/surfaces/drawer/components/Button/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Index/components/Cell/cell.d.ts

@@ -0,0 +1,7 @@
+export interface CellProps {
+    value?: number | string | string[];
+}
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+export declare const Cell: ({ value }: CellProps) => JSX.Element;

package/lib/components/Index/components/Cell/cell.js

@@ -0,0 +1,10 @@
+import React from "react";
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+export const Cell = ({ value = "Unspecified" }) => {
+    if (typeof value === "string" || typeof value === "number") {
+        return React.createElement("div", null, value);
+    }
+    return (React.createElement(React.Fragment, null, value.map((v) => (React.createElement("div", { key: v }, v)))));
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.d.ts

@@ -0,0 +1,2 @@
+import { ChartViewProps } from "./types";
+export declare const ChartView: ({ categoryFilters, entityName, loading, testId, }: ChartViewProps) => JSX.Element | null;

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.js

@@ -0,0 +1,20 @@
+import { Typography } from "@mui/material";
+import React, { Fragment } from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
+import { Loading, LOADING_PANEL_STYLE } from "../../../../../Loading/loading";
+import { StyledGrid, StyledGridPaperSection } from "./chartView.styles";
+import { Chart } from "./components/Chart/chart";
+import { useChartView } from "./hooks/UseChartView/useChartView";
+export const ChartView = ({ categoryFilters, entityName, loading, testId, }) => {
+    const { chartViewRef, selectCategoryViews, width } = useChartView(categoryFilters);
+    if (selectCategoryViews.length === 0)
+        return null;
+    return (React.createElement(Fragment, null,
+        React.createElement(Loading, { appear: false, autoPosition: false, loading: loading, panelStyle: LOADING_PANEL_STYLE.INHERIT }),
+        React.createElement(StyledGrid, { "data-testid": testId, ref: chartViewRef }, selectCategoryViews.map(({ key, label, values }) => (React.createElement(StyledGridPaperSection, { key: key },
+            React.createElement(Typography, { variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_HEADING_SMALL },
+                entityName,
+                " by ",
+                label),
+            React.createElement(Chart, { selectCategoryValueViews: values, width: width })))))));
+};

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.styles.d.ts

@@ -0,0 +1,13 @@
+export declare const StyledGrid: import("@emotion/styled").StyledComponent<import("@mui/material").GridBaseProps & {
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme>;
+} & import("@mui/system").SystemProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, ("p" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "textTransform" | "color" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontStyle" | "textAlign") | "sx" | keyof import("@mui/material").GridBaseProps> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledGridPaperSection: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Index/components/EntitiesView/components/ChartView/chartView.styles.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { Grid } from "@mui/material";
+import { GridPaperSection } from "../../../../../common/Section/section.styles";
+export const StyledGrid = styled(Grid) `
+  display: grid;
+  gap: inherit;
+`;
+export const StyledGridPaperSection = styled(GridPaperSection) `
+  &:last-of-type {
+    border-radius: inherit;
+  }
+`;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const BAR_GAP = 8;
+export declare const BAR_HEIGHT = 24;
+export declare const DATA_FIELD: {
+    readonly COUNT: "count";
+    readonly LABEL: "label";
+    readonly SELECTED: "selected";
+};
+export declare const MARGIN_LEFT = 136;
+export declare const TEXT_PADDING = 8;
+export declare const TICKS = 6;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/constants.js

@@ -0,0 +1,10 @@
+export const BAR_GAP = 8;
+export const BAR_HEIGHT = 24;
+export const DATA_FIELD = {
+    COUNT: "count",
+    LABEL: "label",
+    SELECTED: "selected",
+};
+export const MARGIN_LEFT = 136;
+export const TEXT_PADDING = 8;
+export const TICKS = 6;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.d.ts

@@ -0,0 +1,3 @@
+import { PlotOptions } from "@observablehq/plot";
+import { SelectCategoryValueView } from "../../../../../../../../../common/entities";
+export declare function getPlotOptions(selectCategoryValueViews: SelectCategoryValueView[], width: number): PlotOptions;

package/lib/components/Index/components/EntitiesView/components/ChartView/components/Chart/barX/plot.js

@@ -0,0 +1,91 @@
+import * as Plot from "@observablehq/plot";
+import { PALETTE } from "../../../../../../../../../styles/common/constants/palette";
+import { formatCountSize } from "../../../../../../../../../utils/formatCountSize";
+import { DATA_FIELD, MARGIN_LEFT, TEXT_PADDING } from "./constants";
+import { getCategoryTotalCount, getCategoryValueText, getCategoryValueTextFill, getColorRangeValue, getCountText, getCountTextFill, getPlotHeight, getTicks, getXDomain, getYPaddingInner, getYPaddingOuter, isAnyValueSelected, renderText, } from "./utils";
+export function getPlotOptions(selectCategoryValueViews, width) {
+    const isCategorySelected = isAnyValueSelected(selectCategoryValueViews);
+    const totalCount = getCategoryTotalCount(selectCategoryValueViews);
+    return {
+        color: {
+            domain: [false, true], // false = unselected, true = selected.
+            legend: false,
+            range: [getColorRangeValue(isCategorySelected), PALETTE.PRIMARY_MAIN],
+        },
+        height: getPlotHeight(selectCategoryValueViews.length),
+        margin: 0,
+        marginBottom: 32,
+        marginLeft: MARGIN_LEFT,
+        marks: [
+            Plot.axisX({
+                className: "x-axis",
+                tickFormat: formatCountSize,
+                tickPadding: 8,
+                tickSize: 0,
+                ticks: getTicks(selectCategoryValueViews),
+            }),
+            Plot.gridX({
+                stroke: PALETTE.SMOKE_MAIN,
+                strokeOpacity: 1,
+                ticks: getTicks(selectCategoryValueViews),
+            }),
+            Plot.barX(selectCategoryValueViews, {
+                className: "x-bar",
+                fill: DATA_FIELD.SELECTED,
+                rx1: 0,
+                rx2: 4,
+                sort: { order: "descending", y: "x" }, // Sort by count (x-axis), descending.
+                x: DATA_FIELD.COUNT,
+                y: DATA_FIELD.LABEL,
+            }),
+            Plot.text(selectCategoryValueViews, {
+                className: "text-category-label",
+                dx: -TEXT_PADDING,
+                dy: -2,
+                fill: (d) => getCategoryValueTextFill(d, isCategorySelected),
+                lineHeight: 0.8125,
+                lineWidth: (MARGIN_LEFT - TEXT_PADDING) / 13, // "em" unit; font-size is 13px.
+                text: getCategoryValueText,
+                textAnchor: "end",
+                textOverflow: "ellipsis",
+                title: getCategoryValueText,
+                x: 0,
+                y: DATA_FIELD.LABEL,
+            }),
+            Plot.text(selectCategoryValueViews, {
+                className: "text-count",
+                dx: -TEXT_PADDING,
+                dy: -2,
+                fill: (d) => getCountTextFill(d, isCategorySelected),
+                fontWeight: 500,
+                lineHeight: 0.8125,
+                render: renderText,
+                text: (d) => getCountText(d, totalCount),
+                textAnchor: "end",
+                x: DATA_FIELD.COUNT,
+                y: DATA_FIELD.LABEL,
+            }),
+        ],
+        style: {
+            dominantBaseline: "middle",
+            font: "inherit",
+            overflow: "visible",
+        },
+        width,
+        x: {
+            domain: getXDomain(selectCategoryValueViews),
+            grid: false,
+            label: null,
+            line: false,
+        },
+        y: {
+            label: null,
+            line: false,
+            paddingInner: getYPaddingInner(),
+            paddingOuter: getYPaddingOuter(),
+            tickFormat: () => "",
+            tickSize: 0,
+            type: "band", // Treats number-like strings as categorical labels to prevent numeric scale warnings.
+        },
+    };
+}