@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/components/dashboard/useDashboardStyles.ts

@@ -1,76 +0,0 @@
-import { css } from '@emotion/css';
-import { tokens } from '@fluentui/react-components';
-
-export const useDashboardStyles = (): {
-  dashboardContainer: string;
-  cardBody: string;
-  chartContainer: string;
-  cardDescription: string;
-  cardWrapper: string;
-} => {
-  return {
-    dashboardContainer: css({
-      display: 'grid',
-      padding: '20px',
-      gap: '16px',
-      backgroundColor: tokens.colorNeutralBackground2,
-      gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
-      gridAutoRows: '350px',
-      overflowY: 'auto',
-      overflowX: 'hidden',
-
-      // Scrollbar styles
-      '::-webkit-scrollbar': {
-        width: '5px', // Width for vertical scrollbars
-        height: '5px', // Height for horizontal scrollbars
-      },
-      '::-webkit-scrollbar-track': {
-        background: tokens.colorNeutralBackground4, // Light gray for the track
-        borderRadius: '10px',
-      },
-      '::-webkit-scrollbar-thumb': {
-        background: tokens.colorBrandStroke2Hover, // Dark gray for the thumb
-        borderRadius: '10px',
-      },
-      '::-webkit-scrollbar-thumb:hover': {
-        background: tokens.colorNeutralStroke2, // Dark gray for the thumb
-      },
-
-      justifyContent: 'center',
-      gridAutoFlow: 'dense',
-    }),
-    cardBody: css({
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      minHeight: '320px',
-    }),
-    chartContainer: css({
-      flex: 1,
-      width: '100%',
-      minHeight: '280px',
-    }),
-    cardDescription: css({
-      color: `${tokens.colorNeutralForeground2}`,
-      marginTop: '4px',
-    }),
-
-    cardWrapper: css({
-      position: 'relative',
-      height: '100%',
-      minHeight: '300px',
-      borderRadius: tokens.borderRadiusMedium,
-      transition: 'all 0.2s ease',
-
-      '&:hover': {
-        transform: 'translateY(-2px)',
-        boxShadow: `${tokens.shadow16}`,
-      },
-
-      '&:active': {
-        transform: 'translateY(0)',
-        boxShadow: `${tokens.shadow8}`,
-      },
-    }),
-  };
-};

package/src/components/index.ts

@@ -1,17 +0,0 @@
-export * from '../charts/BarChart';
-export * from '../charts/ComboChart';
-export * from './dashboard/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

@@ -1,118 +0,0 @@
-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

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

@@ -1,46 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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"];
-}

package/src/components/stack/Stack.tsx

@@ -1,103 +0,0 @@
-import { mergeClasses, tokens } from "@fluentui/react-components";
-
-import { IStackProps } from "./IStackProps";
-import React from "react";
-import { css } from "@emotion/css";
-
-/**
- * Mapping of predefined sizes to Fluent UI tokens.
- */
-const sizeMap: Record<string, string> = {
-  xs: tokens.spacingHorizontalXS,
-  s: tokens.spacingHorizontalS,
-  m: tokens.spacingHorizontalM,
-  l: tokens.spacingHorizontalL,
-  xl: tokens.spacingHorizontalXL,
-  xxl: tokens.spacingHorizontalXXL,
-};
-
-/**
- * Stack component provides a flexible layout using Flexbox.
- * It allows stacking child components either horizontally or vertically with predefined spacing options.
- */
-export const Stack: React.FC<IStackProps> = React.memo(
-  ({
-    direction = "vertical",
-    justifyContent = "flex-start",
-    alignItems = "stretch",
-    gap,
-    columnGap,
-    rowGap,
-    margin,
-    padding,
-    marginTop,
-    marginBottom,
-    marginLeft,
-    marginRight,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    width,
-    height,
-    wrap = false,
-    children,
-    style,
-    className,
-    overflow,
-    background
-  }) => {
-    const stackStyle = css({
-      display: "flex",
-      flexDirection: direction === "horizontal" ? "row" : "column",
-      justifyContent,
-      alignItems,
-      gap: gap && sizeMap[gap] ? sizeMap[gap] : gap,
-      columnGap:
-        columnGap && sizeMap[columnGap] ? sizeMap[columnGap] : columnGap,
-      rowGap: rowGap && sizeMap[rowGap] ? sizeMap[rowGap] : rowGap,
-      margin: margin && sizeMap[margin] ? sizeMap[margin] : margin,
-      padding: padding && sizeMap[padding] ? sizeMap[padding] : padding,
-      marginTop:
-        marginTop && sizeMap[marginTop] ? sizeMap[marginTop] : marginTop,
-      marginBottom:
-        marginBottom && sizeMap[marginBottom]
-          ? sizeMap[marginBottom]
-          : marginBottom,
-      marginLeft:
-        marginLeft && sizeMap[marginLeft] ? sizeMap[marginLeft] : marginLeft,
-      marginRight:
-        marginRight && sizeMap[marginRight]
-          ? sizeMap[marginRight]
-          : marginRight,
-      paddingTop:
-        paddingTop && sizeMap[paddingTop] ? sizeMap[paddingTop] : paddingTop,
-      paddingBottom:
-        paddingBottom && sizeMap[paddingBottom]
-          ? sizeMap[paddingBottom]
-          : paddingBottom,
-      paddingLeft:
-        paddingLeft && sizeMap[paddingLeft]
-          ? sizeMap[paddingLeft]
-          : paddingLeft,
-      paddingRight:
-        paddingRight && sizeMap[paddingRight]
-          ? sizeMap[paddingRight]
-          : paddingRight,
-      width,
-      height,
-      overflow,
-      flexWrap: wrap ? "wrap" : "nowrap",
-      backgroundColor: background,
-      ...style,
-    });
-
-    return (
-      <div className={mergeClasses(className, stackStyle)}>{children}</div>
-    );
-  }
-);
-
-Stack.displayName = "Stack";
-
-export default Stack;