@spteck/fluentui-react-charts 0.1.8

package/src/components/buttonMenu/ButtonMenu.tsx

@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+
+import {
+  Field,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemRadio,
+  MenuList,
+  MenuPopover,
+  MenuProps,
+  MenuTrigger,
+  Tooltip,
+} from '@fluentui/react-components';
+
+import { IButtonMenuOption } from './IButtonMenuOption';
+import { IButtonMenuProps } from './IButtonMenuProps';
+
+export const ButtonMenu: React.FunctionComponent<IButtonMenuProps> = (
+  props: React.PropsWithChildren<IButtonMenuProps>
+) => {
+  const {
+    onSelected,
+    value,
+    styles,
+    options,
+    apparence,
+    shape,
+    label,
+    defaultButtonIcon = undefined,
+    showItemLabel = true,
+    showOnlyIcon = false,
+    DefaultButtonLabel,
+    as = 'Radiobutton',
+    buttonTooltip = undefined,
+  } = props;
+  const iconSelectedRef = React.useRef<JSX.Element>();
+
+  // State for selected option
+  const [selectedOption, setSelectedOption] = React.useState<IButtonMenuOption>(
+    value ?? options[0]
+  );
+
+  const [checkedValues, setCheckedValues] = React.useState<
+    Record<string, string[]>
+  >({
+    option: [value ? value?.key : options?.[0]?.key],
+  });
+
+  const fieldRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    // Synchronize selectedOption  with props
+    if (value !== undefined) {
+      setSelectedOption(value);
+      setCheckedValues({ option: [value.key] });
+    }
+    iconSelectedRef.current = options.find(
+      option => option.key === (value?.key ?? options[0]?.key)
+    )?.icon;
+  }, [value, options]);
+
+  const [open, setOpen] = React.useState(false);
+  const onOpenChange: MenuProps['onOpenChange'] = React.useCallback(
+    (_e: any, data: { open: boolean | ((prevState: boolean) => boolean) }) => {
+      setOpen(data.open);
+    },
+    []
+  );
+
+  const getOptionLabel = React.useCallback((option: IButtonMenuOption) => {
+    return option?.text ?? '';
+  }, []);
+
+  const onCheckedValueChange: MenuProps['onCheckedValueChange'] = React.useCallback(
+    (
+      _e: unknown,
+      { name, checkedItems }: { name: string; checkedItems: string[] }
+    ) => {
+      if (name === 'option') {
+        const newOption = checkedItems[0];
+        setSelectedOption(options.find(option => option.key === newOption)!);
+        setCheckedValues({ option: checkedItems });
+        iconSelectedRef.current = options.find(
+          option => option.key === newOption
+        )?.icon;
+        onSelected(options.find(option => option.key === newOption)!);
+      }
+    },
+    [options, onSelected]
+  );
+
+  const buttonLabel = React.useMemo(() => {
+    if (showItemLabel) {
+      return (
+        getOptionLabel(selectedOption) ??
+        DefaultButtonLabel ??
+        'No data available'
+      );
+    }
+    return DefaultButtonLabel ?? 'Select an option';
+  }, [selectedOption, showItemLabel, getOptionLabel, DefaultButtonLabel]);
+
+  const RenderMenuButtonIcon = React.useCallback(() => {
+    return (
+      <Field label={label} style={styles} ref={fieldRef}>
+        <Menu open={open} onOpenChange={onOpenChange}>
+          <MenuTrigger disableButtonEnhancement>
+            <MenuButton
+              shape={shape ?? 'circular'}
+              icon={showItemLabel ? iconSelectedRef.current : defaultButtonIcon}
+              appearance={apparence ?? 'secondary'}
+            >
+              {showOnlyIcon ? '' : buttonLabel}
+            </MenuButton>
+          </MenuTrigger>
+          <MenuPopover style={{ minWidth: 'fit-content' }}>
+            <MenuList
+              onCheckedValueChange={onCheckedValueChange}
+              checkedValues={checkedValues}
+              style={{ width: fieldRef.current?.offsetWidth }}
+            >
+              {options.map((option: IButtonMenuOption) =>
+                as === 'Radiobutton' ? (
+                  <MenuItemRadio
+                    key={option.key}
+                    name="option"
+                    value={option.key}
+                    icon={option.icon}
+                    disabled={option.disabled}
+                  >
+                    {getOptionLabel(option)}
+                  </MenuItemRadio>
+                ) : (
+                  <MenuItem
+                    key={option.key}
+                    onClick={() => {
+                      onSelected(option);
+                      setOpen(false);
+                    }}
+                    icon={option.icon}
+                    disabled={option.disabled}
+                  >
+                    {getOptionLabel(option)}
+                  </MenuItem>
+                )
+              )}
+            </MenuList>
+          </MenuPopover>
+        </Menu>
+      </Field>
+    );
+  }, [
+    label,
+    styles,
+    open,
+    onOpenChange,
+    shape,
+    showItemLabel,
+    defaultButtonIcon,
+    apparence,
+    showOnlyIcon,
+    buttonLabel,
+    onCheckedValueChange,
+    checkedValues,
+    options,
+    as,
+    getOptionLabel,
+    onSelected,
+  ]);
+
+  return (
+    <>
+      {buttonTooltip !== undefined ? (
+        <Tooltip content={buttonTooltip} relationship="label">
+          <div>
+            <RenderMenuButtonIcon />
+          </div>
+        </Tooltip>
+      ) : (
+        <RenderMenuButtonIcon />
+      )}
+    </>
+  );
+};

package/src/components/buttonMenu/IButtonMenuOption.ts

@@ -0,0 +1,9 @@
+export interface IButtonMenuOption {
+    key: string;
+    text: string;
+    icon?: React.ReactElement;
+    selected: boolean;
+    disabled?: boolean;
+    description?: string;
+    color?: string;
+}

package/src/components/buttonMenu/IButtonMenuProps.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import { IButtonMenuOption } from "./IButtonMenuOption";
+import { Theme } from "@fluentui/react-components";
+
+/**
+ * Props for the ButtonMenu component.
+ *
+ * @property onSelected - Callback invoked when an option is selected.
+ * @property value - The currently selected option.
+ * @property label - Optional label for the button menu.
+ * @property styles - Custom CSS styles for the component.
+ * @property theme - Theme object to style the component.
+ * @property options - Array of selectable options for the menu.
+ * @property apparence - Visual appearance of the button menu. Can be "primary", "subtle", "outline", or "transparent".
+ * @property shape - Shape of the button. Can be "circular" or "square".
+ * @property defaultButtonIcon - Icon to display on the default button.
+ * @property showItemLabel - Whether to show the label for each item.
+ * @property showOnlyIcon - Whether to display only the icon without the label.
+ * @property DefaultButtonLabel - Label to display on the default button.
+ * @property as - Determines the button type, either "Radiobutton" or "MenuButton".
+ * @property buttonTooltip - Tooltip text for the button.
+ */
+
+export interface IButtonMenuProps {
+  onSelected: (option: IButtonMenuOption) => void;
+  value?: IButtonMenuOption;
+  label?: string;
+  styles?: React.CSSProperties;
+  theme?: Theme;
+  options: IButtonMenuOption[];
+  apparence?: "primary" | "subtle" | "outline" | "transparent";
+  shape?: "circular" | "square";
+  defaultButtonIcon?: JSX.Element;
+  showItemLabel?: boolean;
+  showOnlyIcon?: boolean;
+  DefaultButtonLabel?: string;
+  as?: "Radiobutton" | "MenuButton";
+  buttonTooltip?: string;
+}

package/src/components/index.ts

@@ -0,0 +1,15 @@
+export * from '../charts/BarChart';
+export * from '../charts/ComboChart';
+export * from './DashBoard';
+export * from '../charts/Doughnut';
+export * from '../charts/PieChart';
+export * from '../charts/areaChart';
+export * from '../charts/barHorizontalChart';
+export * from '../charts/bubbleChart';
+export * from '../charts/floatBarChart';
+export * from '../charts/lineChart';
+export * from '../charts/polarChart';
+export * from '../charts/radarChart';
+export * from '../charts/scatterChart';
+export * from '../charts/stackedLineChart';
+export * from '../charts/steamChart';

package/src/components/legendContainer/LegendContainer.tsx

@@ -0,0 +1,118 @@
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+} from '@fluentui/react-components';
+
+import { LegendButton } from '../legendeButton/LegendButton';
+import React from 'react';
+import Stack from '../stack/Stack';
+import { css } from '@emotion/css';
+
+interface LegendContainerProps<T> {
+  items: T[];
+  visibleLabels: string[];
+  toggleLabel: (label: string) => void;
+  renderLabel: (item: T) => string;
+  getColor: (item: T) => string;
+}
+
+const styles = {
+  wrapper: css({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    gap: 10,
+    padding: 2,
+    width: '100%',
+    boxSizing: 'border-box',
+  }),
+};
+
+export function LegendContainer<T extends { label: string }>(
+  props: LegendContainerProps<T> & {
+    containerRef: React.RefObject<HTMLDivElement>;
+   
+    visibleItems: T[];
+    overflowItems: T[];
+  }
+) {
+  const {
+    containerRef,
+   
+    visibleItems,
+    overflowItems,
+    visibleLabels,
+    toggleLabel,
+    renderLabel,
+    getColor,
+  } = props;
+
+  return (
+    <Stack
+      justifyContent="center"
+      alignItems="center"
+      marginLeft="10px"
+      marginRight="10px"
+      marginTop="25px"
+      marginBottom="20px"
+    >
+      <div ref={containerRef} className={styles.wrapper}>
+        {visibleItems.map(item => {
+          const label = item.label;
+          const isVisible =
+            visibleLabels.length === 0 || visibleLabels.includes(label);
+          return (
+           
+                <LegendButton
+                  key={label}
+                  label={renderLabel(item)}
+                  color={getColor(item)}
+                  isVisible={isVisible}
+                  onClick={() => toggleLabel(label)}
+                 
+                />
+           
+          );
+        })}
+
+        {overflowItems.length > 0 && (
+          <Menu>
+            <MenuTrigger disableButtonEnhancement>
+              <MenuButton size="small" appearance="transparent">
+                +{overflowItems.length}
+              </MenuButton>
+            </MenuTrigger>
+            <MenuPopover style={{ minWidth: 'fit-content', maxWidth: '200px' }}>
+              <MenuList>
+                {overflowItems.map(item => {
+                  const label = item.label;
+                  const isVisible =
+                    visibleLabels.length === 0 || visibleLabels.includes(label);
+                  return (
+                    <MenuItem key={label} style={{ padding: 0 }}>
+                     
+                          <LegendButton
+                            label={renderLabel(item)}
+                            color={getColor(item)}
+                            isVisible={isVisible}
+                            onClick={() => toggleLabel(label)}
+                            style={{ width: '100px', textAlign: 'left' }}
+                          />
+                       
+                   
+                    </MenuItem>
+                  );
+                })}
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        )}
+      </div>
+    </Stack>
+  );
+}

package/src/components/legendeButton/LegendButton.tsx

@@ -0,0 +1,57 @@
+// LegendButton.tsx
+import { Button, Caption1, Tooltip, tokens } from '@fluentui/react-components';
+
+import React from 'react';
+
+interface LegendButtonProps {
+  label: string;
+  isVisible: boolean;
+  color: string;
+  onClick: () => void;
+  style?: React.CSSProperties;
+  buttonRef?: React.Ref<HTMLButtonElement>;
+}
+
+export const LegendButton: React.FC<LegendButtonProps> = ({
+  label,
+  isVisible,
+  color,
+  onClick,
+  style = {},
+  buttonRef,
+}) => {
+  return (
+    <Tooltip content={label} relationship="label">
+      <Button
+        ref={buttonRef}
+        shape="circular"
+        size="small"
+        appearance={isVisible ? 'primary' : 'outline'}
+        onClick={onClick}
+        style={{
+          backgroundColor: isVisible ? color : 'transparent',
+          color: isVisible ? '#fff' : tokens.colorNeutralForeground1,
+          borderColor: color,
+          borderWidth: 1,
+          width: '100px',
+          padding: '4px 8px',
+          textAlign: 'center',
+          ...style,
+        }}
+      >
+        <Caption1
+          as="span"
+          style={{
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            lineHeight: '1.25',
+          }}
+        >
+          {label}
+        </Caption1>
+      </Button>
+    </Tooltip>
+  );
+};

package/src/components/renderSliceLegend/RenderSliceLegend.tsx

@@ -0,0 +1,46 @@
+import { LegendContainer } from '../legendContainer/LegendContainer';
+import React from 'react';
+import { useResponsiveLegend } from '../../hooks/useResponsiveLegend';
+
+export interface SliceLegendProps {
+  labels: string[];
+  colors: string[];
+  visibleLabels: string[];
+  toggleLabel: (label: string) => void;
+}
+
+const RenderSliceLegend: React.FC<SliceLegendProps> = ({
+  labels,
+  colors,
+  visibleLabels,
+  toggleLabel,
+}) => {
+  interface SliceLegendItem {
+    label: string;
+    color: string;
+  }
+
+  const items: SliceLegendItem[] = labels.map((label, i) => ({ label, color: colors[i] }));
+  const {
+    containerRef,
+  
+    visibleItems,
+    overflowItems,
+  } = useResponsiveLegend(items);
+
+  return (
+    <LegendContainer
+      containerRef={containerRef}
+    
+      visibleItems={visibleItems}
+      overflowItems={overflowItems}
+      items={items}
+      visibleLabels={visibleLabels}
+      toggleLabel={toggleLabel}
+      renderLabel={item => item.label}
+      getColor={item => item.color}
+    />
+  );
+};
+
+export default RenderSliceLegend;

package/src/components/renderValueLegend/RenderValueLegend.tsx

@@ -0,0 +1,43 @@
+import { LegendContainer } from '../legendContainer/LegendContainer';
+import React from 'react';
+import { useResponsiveLegend } from '../../hooks/useResponsiveLegend';
+
+export interface LegendEntry {
+  label: string;
+  value: number;
+  color: string;
+}
+
+export interface ValueLegendProps {
+  entries: LegendEntry[];
+  visibleLabels: string[];
+  toggleLabel: (label: string) => void;
+}
+
+const RenderValueLegend: React.FC<ValueLegendProps> = ({
+  entries,
+  visibleLabels,
+  toggleLabel,
+}) => {
+  const {
+    containerRef,
+
+    visibleItems,
+    overflowItems,
+  } = useResponsiveLegend(entries);
+
+  return (
+    <LegendContainer
+      containerRef={containerRef}
+      visibleItems={visibleItems}
+      overflowItems={overflowItems}
+      items={entries}
+      visibleLabels={visibleLabels}
+      toggleLabel={toggleLabel}
+      renderLabel={entry => `${entry.label}: ${entry.value}`}
+      getColor={entry => entry.color}
+    />
+  );
+};
+
+export default RenderValueLegend;

package/src/components/stack/IStackProps.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+/**
+ * StackProps interface defines the properties for the Stack component.
+ */
+export interface IStackProps {
+  /**
+   * Direction of stacking: horizontal (row) or vertical (column).
+   */
+  direction?: "horizontal" | "vertical";
+
+  /**
+   * Flexbox justify-content property.
+   */
+  justifyContent?: React.CSSProperties["justifyContent"];
+
+  /**
+   * Flexbox align-items property.
+   */
+  alignItems?: React.CSSProperties["alignItems"];
+
+  /**
+   * Gap between items (can be predefined or custom value like '20px').
+   */
+  gap?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+
+  /**
+   * Column gap between items (custom value or predefined).
+   */
+  columnGap?: string;
+
+  /**
+   * Row gap between items (custom value or predefined).
+   */
+  rowGap?: string;
+
+  /**
+   * Predefined margin sizes (shorthand) or custom value.
+   */
+  margin?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+
+  /**
+   * Predefined padding sizes (shorthand) or custom value.
+   */
+  padding?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+
+  /**
+   * Individual margin properties (predefined or custom value).
+   */
+  marginTop?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  marginBottom?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  marginLeft?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  marginRight?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+
+  /**
+   * Individual padding properties (predefined or custom value).
+   */
+  paddingTop?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  paddingBottom?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  paddingLeft?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+  paddingRight?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | string;
+
+  /**
+   * Width of the stack.
+   */
+  width?: React.CSSProperties["width"];
+
+  /* Height of the stack. */
+  height?: React.CSSProperties["height"];
+
+  /**
+   * Enable or disable wrapping of items.
+   */
+  wrap?: boolean;
+
+  /**
+   * Child components to be rendered inside the stack.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Additional inline styles.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Additional class names for the stack.
+   */
+  className?: string;
+  /* Overflow property */
+  overflow?: React.CSSProperties["overflow"];
+  /** background Color */
+  background?: React.CSSProperties["backgroundColor"];
+}