@spteck/fluentui-react-charts 1.0.7 → 1.0.8

package/src/components/dashboard/DashBoard.tsx

@@ -1,314 +0,0 @@
-import { Card, CardHeader, Text, Theme } from '@fluentui/react-components';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-
-import { ICardChartContainer } from '../../models/ICardChartContainer';
-import { IDashboardProps } from './IDashboardProps';
-import { NoDashboards } from './NoDashboards';
-import { SelectZoom } from './selectZoom/SelectZoom';
-import { useChartFactory } from '../../hooks/useChartFactory';
-import { useDashboardStyles } from './useDashboardStyles';
-import { useIndexedDBCache } from '../../hooks/useIndexedDBCache';
-
-const MINIMUM_DASHBOARD_WIDTH = 600;
-const MAX_ROWS = 4;
-const DASHBOARD_LAYOUT_CACHE_KEY = 'dashboard-layout-settings';
-const DASHBOARD_ORDER_CACHE_KEY = 'dashboard-card-order';
-const CACHE_EXPIRATION_DAYS = 30;
-
-export const Dashboard: React.FC<IDashboardProps> = ({
-  cardCharts,
-  theme,
-  containerWidth,
-  containerHeight = '100%',
-  maxSpanRows = MAX_ROWS,
-}) => {
-  const styles = useDashboardStyles();
-  const { getChartComponent } = useChartFactory();
-  
-  // Cache with 30-day expiration for dashboard layout settings
-  const { getData, setData } = useIndexedDBCache<Record<string, { spanCols: number; spanRows: number }>>(
-    CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000
-  );
-
-  // Cache for card order
-  const { 
-    getData: getOrderData, 
-    setData: setOrderData 
-  } = useIndexedDBCache<string[]>(
-    CACHE_EXPIRATION_DAYS * 24 * 60 * 60 * 1000
-  );
-
- 
-
-  const [CardChartContainer, setCardChartContainer] = useState<
-    ICardChartContainer[]
-  >([]);
-
-  const [sizes, setSizes] = useState<
-    Record<string, { spanCols: number; spanRows: number }>
-  >({});
-  const dragItem = useRef<number | null>(null);
-  const dragOverItem = useRef<number | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    // Load cached card order and sizes
-    const initializeData = async () => {
-      try {
-        const [cachedSizes, cachedOrder] = await Promise.all([
-          getData(DASHBOARD_LAYOUT_CACHE_KEY),
-          getOrderData(DASHBOARD_ORDER_CACHE_KEY)
-        ]);
-        
-        // Restore card order if available, otherwise use original order
-        let orderedCards = cardCharts;
-        if (cachedOrder && cachedOrder.length > 0) {
-          // Reorder cards based on cached order, but handle cases where cards might have been added/removed
-          const cardMap = new Map(cardCharts.map(card => [card.id, card]));
-          const validCachedOrder = cachedOrder.filter(id => cardMap.has(id));
-          const missingCards = cardCharts.filter(card => !cachedOrder.includes(card.id));
-          
-          orderedCards = [
-            ...validCachedOrder.map(id => cardMap.get(id)!),
-            ...missingCards
-          ];
-        }
-        
-        setCardChartContainer(orderedCards);
-        
-        const initialSizes: Record<
-          string,
-          { spanCols: number; spanRows: number }
-        > = {};
-        
-        cardCharts.forEach(c => {
-          const cachedSize = cachedSizes?.[c.id];
-          initialSizes[c.id] = {
-            spanCols: cachedSize?.spanCols ?? c.defaultSpan?.spanCols ?? 1,
-            spanRows: cachedSize?.spanRows ?? c.defaultSpan?.spanRows ?? 1,
-          };
-        });
-        
-        setSizes(initialSizes);
-      } catch (error) {
-        // Fallback to default values if cache fails
-        console.warn('Failed to load dashboard data from cache:', error);
-        setCardChartContainer(cardCharts);
-        const fallbackSizes: Record<
-          string,
-          { spanCols: number; spanRows: number }
-        > = {};
-        cardCharts.forEach(c => {
-          fallbackSizes[c.id] = {
-            spanCols: c.defaultSpan?.spanCols ?? 1,
-            spanRows: c.defaultSpan?.spanRows ?? 1,
-          };
-        });
-        setSizes(fallbackSizes);
-      }
-    };
-    
-    initializeData();
-  }, [cardCharts]); // Only depend on cardCharts - getData/getOrderData are stable
-
-  // Save sizes to cache whenever they change
-  useEffect(() => {
-    const saveSizesToCache = async () => {
-      try {
-        await setData(DASHBOARD_LAYOUT_CACHE_KEY, sizes);
-      } catch (error) {
-        console.warn('Failed to save dashboard layout to cache:', error);
-      }
-    };
-
-    // Only save if sizes is not empty (avoid saving initial empty state)
-    if (Object.keys(sizes).length > 0) {
-      saveSizesToCache();
-    }
-  }, [sizes]); // Only depend on sizes - setData is stable
-
-  // Save card order to cache whenever it changes
-  useEffect(() => {
-    const saveOrderToCache = async () => {
-      try {
-        const cardOrder = CardChartContainer.map(card => card.id);
-        await setOrderData(DASHBOARD_ORDER_CACHE_KEY, cardOrder);
-      } catch (error) {
-        console.warn('Failed to save dashboard order to cache:', error);
-      }
-    };
-
-    // Only save if CardChartContainer is not empty
-    if (CardChartContainer.length > 0) {
-      saveOrderToCache();
-    }
-  }, [CardChartContainer]); // Only depend on CardChartContainer - setOrderData is stable
-
-  useEffect(() => {
-    if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
-      setSizes(() => {
-        const reset: Record<
-          string,
-          { spanCols: number; spanRows: number }
-        > = {};
-        CardChartContainer.forEach(c => {
-          reset[c.id] = { spanCols: 1, spanRows: 1 };
-        });
-        return reset;
-      });
-    }
-  }, [containerWidth, CardChartContainer]);
-
-  const showZoom = useMemo(() => containerWidth > MINIMUM_DASHBOARD_WIDTH, [
-    containerWidth,
-  ]);
-
-  const { minCardWidth, gridGap, containerPadding } = useMemo(
-    () => ({
-      minCardWidth: 350,
-      gridGap: 16,
-      containerPadding: 20,
-    }),
-    []
-  );
-
-  const innerWidth = containerWidth - containerPadding * 2;
-  const columns = useMemo(
-    () => Math.floor((innerWidth + gridGap) / (minCardWidth + gridGap)),
-    [innerWidth, gridGap, minCardWidth]
-  );
-  const maxZoom = Math.max(columns, 1);
-
-  const handleSort = useCallback(() => {
-    if (
-      dragItem.current !== null &&
-      dragOverItem.current !== null &&
-      dragItem.current !== dragOverItem.current
-    ) {
-      const copy = [...CardChartContainer];
-      const [moved] = copy.splice(dragItem.current, 1);
-      copy.splice(dragOverItem.current, 0, moved);
-      setCardChartContainer(copy);
-    }
-    dragItem.current = null;
-    dragOverItem.current = null;
-  }, [CardChartContainer]);
-
-  const handleZoomSelect = useCallback(
-    (id: string, span: { spanCols: number; spanRows: number }) => {
-      const newSizes = {
-        spanCols: Math.min(Math.max(span.spanCols, 1), maxZoom),
-        spanRows: Math.min(Math.max(span.spanRows, 1), maxSpanRows),
-      };
-      
-      setSizes(prev => ({
-        ...prev,
-        [id]: newSizes,
-      }));
-    },
-    [maxZoom, maxSpanRows]
-  );
-
-  const defaultColsAndRowSpanBasedOnNumberColumns = useMemo(() => {
-    return CardChartContainer.reduce((acc, card) => {
-      acc[card.id] = {
-        spanCols: Math.min(card.defaultSpan?.spanCols ?? 1, columns),
-        spanRows: card.defaultSpan?.spanRows ?? 1,
-      };
-      return acc;
-    }, {} as Record<string, { spanCols: number; spanRows: number }>);
-  }, [CardChartContainer, columns]);
-
-  const renderCards = useMemo(() => {
-    return CardChartContainer.map((cardContainer, idx) => (
-      <div
-        className={styles.cardWrapper}
-        key={cardContainer.id}
-        draggable
-        onDragStart={() => (dragItem.current = idx)}
-        onDragEnter={() => (dragOverItem.current = idx)}
-        onDragOver={e => e.preventDefault()}
-        onDragEnd={handleSort}
-        style={{
-          gridColumnEnd: sizes[cardContainer.id]?.spanCols
-            ? `span ${sizes[cardContainer.id].spanCols}`
-            : `span ${defaultColsAndRowSpanBasedOnNumberColumns[
-                cardContainer.id
-              ]?.spanCols || 1}`,
-          gridRowEnd: sizes[cardContainer.id]?.spanRows
-            ? `span ${sizes[cardContainer.id].spanRows}`
-            : `span ${defaultColsAndRowSpanBasedOnNumberColumns[
-                cardContainer.id
-              ]?.spanRows || 1}`,
-        }}
-      >
-        <Card className={styles.cardBody}>
-          <CardHeader
-            header={
-              <Text weight="semibold" size={400}>
-                {cardContainer.cardTitle}
-              </Text>
-            }
-            action={
-              showZoom ? (
-                <SelectZoom
-                  values={
-                    sizes[cardContainer.id] ||
-                    defaultColsAndRowSpanBasedOnNumberColumns[
-                      cardContainer.id
-                    ] || { spanCols: 1, spanRows: 1 }
-                  }
-                  maxCols={maxZoom}
-                  maxRows={maxSpanRows}
-                  IsOpen={false}
-                  onChange={v => handleZoomSelect(cardContainer.id, v)}
-                />
-              ) : (
-                undefined
-              )
-            }
-          />
-          <div
-            className={styles.chartContainer}
-            style={{ height: containerHeight }}
-          >
-            {theme &&
-              theme.fontSizeBase100 &&
-              getChartComponent(cardContainer.chart, theme as Theme)}
-          </div>
-        </Card>
-      </div>
-    ));
-  }, [
-    CardChartContainer,
-    handleSort,
-    sizes,
-    styles.cardBody,
-    styles.chartContainer,
-    showZoom,
-    maxZoom,
-    getChartComponent,
-    handleZoomSelect,
-    theme,
-  ]);
-
-  if (CardChartContainer.length === 0) {
-    return <NoDashboards />;
-  }
-
-  return (
-    <>
-      <div ref={containerRef} className={styles.dashboardContainer} style={{  height: containerHeight }}>
-        {renderCards}
-      </div>
-    </>
-  );
-};
-
-export default Dashboard;

package/src/components/dashboard/ExampleDashboardUsage.tsx

@@ -1,114 +0,0 @@
-import { Text, Theme, webLightTheme } from '@fluentui/react-components';
-
-import DashBoard from './DashBoard';
-import { ICardChartContainer } from '../../models/ICardChartContainer';
-import React from 'react';
-import { Stack } from '../stack/Stack';
-
-// Example usage of the reusable DashBoard component
-const ExampleDashboardUsage: React.FC<{ theme: Theme }> = ({ theme }) => {
-  // Sample data for the charts
-  const sampleData = [
-    { month: 'Jan', sales: 10000, expenses: 8000 },
-    { month: 'Feb', sales: 15000, expenses: 9000 },
-    { month: 'Mar', sales: 12000, expenses: 7500 },
-    { month: 'Apr', sales: 18000, expenses: 10000 },
-    { month: 'May', sales: 16000, expenses: 8500 },
-    { month: 'Jun', sales: 22000, expenses: 11000 },
-  ];
-
-  // Define the chart containers with different chart types
-  const cardChartContainers: ICardChartContainer[] = [
-    {
-      id: '1',
-      cardTitle: 'Monthly Sales',
-      chart: {
-        id: '1',
-        title: 'Sales Performance',
-        type: 'line',
-        data: [{ 
-          label: 'Sales', 
-          data: sampleData.map(d => ({ name: d.month, value: d.sales, x: d.month, y: d.sales }))
-        }],
-      },
-      defaultSpan: { spanCols: 2, spanRows: 1 },
-    },
-    {
-      id: '2',
-      cardTitle: 'Sales vs Expenses',
-      chart: {
-        id: '2',
-        title: 'Financial Overview',
-        type: 'bar',
-        data: [
-          { 
-            label: 'Sales', 
-            data: sampleData.map(d => ({ name: d.month, value: d.sales, x: d.month, y: d.sales }))
-          },
-          { 
-            label: 'Expenses', 
-            data: sampleData.map(d => ({ name: d.month, value: d.expenses, x: d.month, y: d.expenses }))
-          }
-        ],
-      },
-      defaultSpan: { spanCols: 2, spanRows: 2 },
-    },
-    {
-      id: '3',
-      cardTitle: 'Revenue Distribution',
-      chart: {
-        id: '3',
-        title: 'Q2 Revenue',
-        type: 'pie',
-        data: [{ 
-          label: 'Revenue', 
-          data: [
-            { name: 'Product A', value: 35000 },
-            { name: 'Product B', value: 25000 },
-            { name: 'Product C', value: 18000 },
-            { name: 'Services', value: 15000 },
-          ]
-        }],
-      },
-      defaultSpan: { spanCols: 1, spanRows: 1 },
-    },
-    {
-      id: '4',
-      cardTitle: 'Growth Trend',
-      chart: {
-        id: '4',
-        title: 'Monthly Growth',
-        type: 'area',
-        data: [{ 
-          label: 'Growth', 
-          data: sampleData.map(d => {
-            const growthPercentage = ((d.sales - d.expenses) / d.expenses * 100);
-            return { 
-              name: d.month, 
-              value: Number(growthPercentage.toFixed(1)),
-              x: d.month,
-              y: Number(growthPercentage.toFixed(1))
-            };
-          })
-        }],
-      },
-      defaultSpan: { spanCols: 2, spanRows: 1 },
-    },
-  ];
-
-  return (
-    <Stack direction="vertical" style={{ width: '100%', height: '100vh' }}>
-      <Stack padding="l">
-        <Text as="h1" size={900} weight="bold">Sample Dashboard</Text>
-      </Stack>
-      <DashBoard
-        cardCharts={cardChartContainers}
-        theme={theme ?? webLightTheme}
-        containerWidth={window.innerWidth}
-        containerHeight={(window.innerHeight - 100).toString()} // Adjust height for header
-      />
-    </Stack>
-  );
-};
-
-export default ExampleDashboardUsage;

package/src/components/dashboard/IDashboardProps.tsx

@@ -1,11 +0,0 @@
-import { ICardChartContainer } from '../../models/ICardChartContainer';
-import { Theme } from '@fluentui/react-components';
-
-export interface IDashboardProps {
-  cardCharts: ICardChartContainer[];
-  theme: Theme;
-  containerWidth: number;
-  containerHeight?: string;
-
-  maxSpanRows?: number;
-}

package/src/components/dashboard/NoDashboards.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-import BusinessReportIcon from '../svgImages/BusinessReportIcon';
-import Stack from '../stack/Stack';
-import { Text } from '@fluentui/react-components';
-
-export interface INoDashboardsProps {
-  height?: string;
-}
-
-export const NoDashboards: React.FunctionComponent<INoDashboardsProps> = (props: React.PropsWithChildren<INoDashboardsProps>) => {
-  const { height } = props;
-
-  return (
-    <>
-      <Stack
-        style={{ height: height || "100%" }}
-        justifyContent="Center"
-        alignItems="Center"
-      >
-        <BusinessReportIcon width={200} height={200} />
-        <Text  size={500} weight='semibold'>No Dashboards Available</Text>
-      </Stack>
-    </>
-  );
-};

package/src/components/dashboard/index.ts

@@ -1,3 +0,0 @@
-export * from './DashBoard';
-
-

package/src/components/dashboard/selectZoom/SelectZoom.tsx

@@ -1,184 +0,0 @@
-import * as React from "react";
-
-import {
-  Caption1,
-  Menu,
-  MenuButton,
-  MenuPopover,
-  MenuProps,
-  MenuTrigger,
-  Tooltip,
-  tokens,
-} from "@fluentui/react-components";
-import {
-  Settings20Filled,
-  Settings20Regular,
-  bundleIcon,
-} from "@fluentui/react-icons";
-
-import { RenderLabel } from "../../RenderLabel";
-import { css } from "@emotion/css";
-
-export interface ISelectZoomProps {
-  IsOpen: boolean;
-  onChange?: (value: { spanCols: number; spanRows: number }) => void;
-  values: { spanCols: number; spanRows: number };
-  maxCols: number;
-  maxRows: number;
-}
-
-const useStyles = (): {
-  gridContainer: string;
-  cell: string;
-  hoveredCell: string;
-  selectedCell: string;
-  menuPopover: string;
-  bottomText: string;
-  zoomContainer: string;
-} => ({
-  gridContainer: css`
-    display: grid;
-    gap: 4px;
-    padding: 8px;
-    justify-content: center;
-  `,
-  cell: css`
-    width: 30px;
-    height: 30px;
-    border: 1px solid ${tokens.colorNeutralStroke1};
-    background-color: ${tokens.colorNeutralBackground1};
-    cursor: pointer;
-    transition: background-color 150ms ease, transform 150ms ease;
-    will-change: background-color, transform;
-  `,
-  hoveredCell: css`
-    background-color: ${tokens.colorNeutralBackground1Hover};
-    transform: scale(1.05);
-  `,
-  selectedCell: css`
-    background-color: ${tokens.colorNeutralBackground1Selected};
-  `,
-  menuPopover: css`
-    min-width: fit-content;
-  `,
-  bottomText: css`
-    padding-left: 8px;
-    padding-right: 8px;
-  `,
-  zoomContainer: css({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: '6px',
-    width: '100%',
-    boxSizing: 'border-box',
-    
-    padding: '8px 0px',
-    
-  }),
-});
-
-export const SelectZoom: React.FunctionComponent<ISelectZoomProps> = (
-  props: React.PropsWithChildren<ISelectZoomProps>
-) => {
-  const { onChange, values: defaultValues, maxCols, maxRows } = props;
-  const Settings = bundleIcon(Settings20Filled, Settings20Regular);
-  const styles = useStyles();
-
-  const [values, setValues] = React.useState(defaultValues);
-  const [hovered, setHovered] = React.useState<{
-    spanCols: number;
-    spanRows: number;
-  } | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    setValues(defaultValues);
-  }, [defaultValues]);
-
-  const onOpenChange: MenuProps["onOpenChange"] = (_, data) => {
-    setOpen(data.open);
-    setHovered(null);
-  };
-
-  const handleCellClick = (row: number, col: number):void => {
-    const newValues = { spanCols: col + 1, spanRows: row + 1 };
-    setValues(newValues);
-    onChange?.(newValues);
-    setOpen(false);
-  };
-
-  const handleCellHover = (row: number, col: number):void => {
-    setHovered({ spanCols: col + 1, spanRows: row + 1 });
-  };
-
-  const handleMouseLeave = ():void => {
-    setHovered(null);
-  };
-
-  const renderGridCells = (): React.ReactNode[] => {
-    const cells: React.ReactNode[] = [];
-    for (let row = 0; row < maxRows; row++) {
-      for (let col = 0; col < maxCols; col++) {
-        const isSelected = row < values.spanRows && col < values.spanCols;
-        const isHovered =
-          hovered && row < hovered.spanRows && col < hovered.spanCols;
-        cells.push(
-          <div
-            key={`${row}-${col}`}
-            className={`${styles.cell} ${isHovered ? styles.hoveredCell : ""} ${
-              isSelected ? styles.selectedCell : ""
-            }`}
-            onMouseEnter={() => handleCellHover(row, col)}
-            onClick={() => handleCellClick(row, col)}
-          />
-        );
-      }
-    }
-    return cells;
-  };
-
-  // Compute popover width dynamically
-  const popoverWidth = React.useMemo(() => (30 * maxCols) + (4 * (maxCols - 1)) + 32, [maxCols]); // 30px for each cell, 4px gap, and 32px padding (16 left and right)
-
-  return (
-    <Menu open={open} onOpenChange={onOpenChange}>
-      <MenuTrigger disableButtonEnhancement>
-        <Tooltip content="Configure" relationship="label">
-          <MenuButton
-            icon={<Settings />}
-            size="small"
-            appearance="transparent"
-          />
-        </Tooltip>
-      </MenuTrigger>
-
-      <MenuPopover
-        style={{ width: `${popoverWidth}px`, minWidth: "120px", padding: 8 }}
-      >
-        <div
-          className={styles.zoomContainer}        
-        >
-          <RenderLabel
-            label={`Span (${values.spanCols} × ${values.spanRows})`}
-           
-          />
-        </div>
-
-        {/* Grid */}
-        <div
-          className={styles.gridContainer}
-          style={{
-            gridTemplateColumns: `repeat(${maxCols}, 30px)`,
-            gridTemplateRows: `repeat(${maxRows}, 30px)`,
-          }}
-          onMouseLeave={handleMouseLeave}
-        >
-          {renderGridCells()}
-        </div>
-
-        <Caption1 className={styles.bottomText}>Click to set span</Caption1>
-      </MenuPopover>
-    </Menu>
-  );
-};