@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/components/RenderLabel/useRenderLabelStylesStyles.ts

@@ -1,25 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  makeStyles,
-  shorthands,
-} from '@fluentui/react-components';
-
-export const useRenderLabelStyles = makeStyles({
-
-  labelContainer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    ...shorthands.gap("6px"),
-  },
-  iconStyles: {
-    width: "26px",
-  },
-  item: {
-    paddingLeft: "15px",
-  },
-  
-
-});

package/src/components/RenderLegend/RenderLegend.tsx

@@ -1,40 +0,0 @@
-import { LegendContainer } from '../legendContainer/LegendContainer';
-import React from 'react';
-import { useResponsiveLegend } from '../../hooks/useResponsiveLegend';
-
-export interface LegendControlProps {
-  data: { label: string }[];
-  visibleSeries: string[];
-  seriesColors: Record<string, string>;
-  toggleSeries: (label: string) => void;
-}
-
-const RenderLegend: React.FC<LegendControlProps> = ({
-  data,
-  visibleSeries,
-  seriesColors,
-  toggleSeries,
-}) => {
-  const {
-    containerRef,
-   
-    visibleItems,
-    overflowItems,
-  } = useResponsiveLegend(data);
-
-  return (
-    <LegendContainer
-      containerRef={containerRef}
-     
-      visibleItems={visibleItems}
-      overflowItems={overflowItems}
-      items={data}
-      visibleLabels={visibleSeries}
-      toggleLabel={toggleSeries}
-      renderLabel={d => d.label}
-      getColor={d => seriesColors[d.label]}
-    />
-  );
-};
-
-export default RenderLegend;

package/src/components/RenderTooltip/RenderTooltip.tsx

@@ -1,111 +0,0 @@
-import {
- Caption1,
- Card,
- FluentProvider,
- IdPrefixProvider,
- Text,
- Theme,
-} from '@fluentui/react-components';
-import { css, keyframes } from '@emotion/css';
-
-import React from 'react';
-import Stack from '../stack/Stack';
-import { useThemeContext } from '../themeProvider/ThemeProvider';
-
-interface TooltipItem {
-  dataset: {
-    label: string;
-    backgroundColor: string;
-  };
-  raw: number | null;
-}
-
-interface IRenderTooltipProps {
- 
-  title: string[];
-  body: TooltipItem[];
-}
-
-const fadeIn = keyframes`
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-`;
-
-const useStyles = (theme: Theme, isDark: boolean) => ({
-  tooltip: css({
-    backgroundColor: isDark
-      ? 'rgba(32, 32, 32, 0.9)'
-      : 'rgba(255, 255, 255, 0.9)',
-    border: `1px solid ${
-      isDark ? theme.colorNeutralStroke1 : theme.colorNeutralStroke2
-    }`,
-    boxShadow: theme.shadow4,
-    padding: '8px 12px',
-    maxWidth: 250,
-    borderRadius: '4px',
-    animation: `${fadeIn} 150ms ease-out`,
-    transformOrigin: 'top left',
-    position: 'relative',
-  }),
-  arrow: css({
-    position: 'absolute',
-    top: '-6px',
-    left: '10px',
-    width: 0,
-    height: 0,
-    borderLeft: '6px solid transparent',
-    borderRight: '6px solid transparent',
-    borderBottom: `6px solid ${
-      isDark ? 'rgba(32, 32, 32, 0.9)' : 'rgba(255, 255, 255, 0.9)'
-    }`,
-  }),
-  colorDot: css({
-    width: '10px',
-    height: '10px',
-    borderRadius: '50%',
-    marginRight: '6px',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-  }),
-});
-
-export function RenderTooltip({   title, body }: IRenderTooltipProps) {
- const { theme,themeName  } = useThemeContext();
-  const isDark = themeName === 'dark';
-  const styles = useStyles(theme, isDark);
-
-  return (
-    <IdPrefixProvider value="chartjs-tooltip">
-      <FluentProvider theme={theme} style={{ zIndex: 1000 }}>
-        <Card className={styles.tooltip}>
-          <div className={styles.arrow} />
-          <Stack rowGap="5px">
-            {title.length > 0 && (
-              <Text   block>
-                {title[0]}
-              </Text>
-            )}
-            {body.map((item, index) => (
-              <Stack
-                key={index}
-                direction="horizontal"
-                columnGap="6px"
-                alignItems="center"
-              >
-                <div
-                  className={styles.colorDot}
-                  style={{
-                    backgroundColor: item.dataset.backgroundColor,
-                    border: `1px solid ${item.dataset.backgroundColor}`,
-                  }}
-                />
-                <Caption1>{item.dataset.label}:</Caption1>
-                <Text>{item.raw}</Text>
-              </Stack>
-            ))}
-          </Stack>
-        </Card>
-      </FluentProvider>
-    </IdPrefixProvider>
-  );
-}

package/src/components/buttonMenu/ButtonMenu.tsx

@@ -1,186 +0,0 @@
-/* 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

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

package/src/components/buttonMenu/IButtonMenuProps.tsx

@@ -1,40 +0,0 @@
-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;
-}