@spteck/fluentui-react-charts 0.1.8 → 1.0.0

package/dist/models/ChartDatum.d.ts

@@ -0,0 +1,4 @@
+export interface ChartDatum {
+    name: string;
+    value: number;
+}

package/dist/models/index.d.ts

@@ -1 +1,2 @@
 export * from './IChart';
+export * from './ChartDatum';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.8",
+  "version": "1.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -38,11 +38,9 @@
   },
   "name": "@spteck/fluentui-react-charts",
   "author": "João Mendes",
-  
   "module": "dist/fluentui-react-charts.esm.js",
   "devDependencies": {
     "@size-limit/preset-small-lib": "^11.2.0",
-     
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "husky": "^9.1.7",
@@ -54,6 +52,7 @@
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@fluentui/react-components": "^9.66.2",
+    "@iconify/react": "^6.0.0",
     "@juggle/resize-observer": "^3.4.0",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",

package/src/components/RenderLabel/RenderLabel.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+import {
+  Caption1,
+  tokens,
+} from '@fluentui/react-components';
+import { Icon } from '@iconify/react';
+
+import { useRenderLabelStyles } from './useRenderLabelStylesStyles';
+
+export interface IRenderLabelProps {
+  label: string; icon?: string | JSX.Element; isRequired?: boolean
+}
+
+export const RenderLabel: React.FunctionComponent<IRenderLabelProps> = (props: React.PropsWithChildren<IRenderLabelProps>) => {
+  const { label, icon, isRequired } = props;
+  const styles = useRenderLabelStyles();
+  return (
+    <>
+      <div className={styles.labelContainer}>
+        {icon && React.isValidElement(icon) ? (
+          icon
+        ) : (
+          <Icon
+            icon={icon as string}
+            className={styles.iconStyles}
+            width={"20px"}
+            height={"20px"}
+            color={tokens.colorBrandForeground1}
+          />
+        )}
+        <Caption1 style={{ color: tokens.colorBrandForeground1 }}>{label}</Caption1>
+        <Caption1 style={{ color: tokens.colorPaletteRedForeground1 }}>{isRequired ? " *" : ""}</Caption1>
+      </div>
+    </>
+  );
+};
+
+export default RenderLabel;

package/src/components/RenderLabel/index.ts

@@ -0,0 +1,2 @@
+export * from './RenderLabel';
+export { default as RenderLabel } from './RenderLabel';

package/src/components/RenderLabel/useRenderLabelStylesStyles.ts

@@ -0,0 +1,25 @@
+/* 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/dashboard/DashBoard.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import { Card, CardHeader, Text, Theme } from '@fluentui/react-components';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { ICardChartContainer } from './ICardChartContainer';
+import { IDashboardProps } from './IDashboardProps';
+import { NoDashboards } from './NoDashboards';
+import { SelectZoom } from './selectZoom/SelectZoom';
+import { useDashboardStyles } from './useDashboardStyles';
+import { useGraphUtils } from '../../hooks';
+
+const MINIMUM_DASHBOARD_WIDTH = 600;
+const MAX_ROWS = 4;
+
+const Dashboard: React.FC<IDashboardProps> = ({
+  cardCharts,
+  theme,
+  containerWidth  ,
+  containerHeight = '100%',
+  maxSpanRows = MAX_ROWS,
+}) => {
+  const styles = useDashboardStyles();
+
+  const { getChartComponent } = useGraphUtils(theme as Theme);
+
+  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(() => {
+    setCardChartContainer(cardCharts);
+    setSizes(() => {
+      const initialSizes: Record<
+        string,
+        { spanCols: number; spanRows: number }
+      > = {};
+      cardCharts.forEach(c => {
+        initialSizes[c.id] = {
+          spanCols: c.defaultSpan?.spanCols ?? 1,
+          spanRows: c.defaultSpan?.spanRows ?? 1,
+        };
+      });
+      return initialSizes;
+    });
+  }, [cardCharts]);
+
+  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 }) => {
+      setSizes(prev => ({
+        ...prev,
+        [id]: {
+          spanCols: Math.min(Math.max(span.spanCols, 1), maxZoom),
+          spanRows: Math.min(Math.max(span.spanRows, 1), maxSpanRows),
+        },
+      }));
+    },
+    [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}>
+        {renderCards}
+      </div>
+    </>
+  );
+};
+
+export default Dashboard;

package/src/components/dashboard/ExampleDashboardUsage.tsx

@@ -0,0 +1,114 @@
+import { Text, Theme, webLightTheme } from '@fluentui/react-components';
+
+import DashBoard from './DashBoard';
+import { ICardChartContainer } from './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} // Adjust height for header
+      />
+    </Stack>
+  );
+};
+
+export default ExampleDashboardUsage;

package/src/components/dashboard/ICardChartContainer.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { ChartDatum } from '../../models/ChartDatum';
+import { IChart } from '../../models';
+
+export interface ICardChartContainer {
+  chart: IChart;
+  cardTitle: string;
+  showZoom?: boolean;
+  id: string;
+  data?: { label: string; data: ChartDatum[]; }[];
+  defaultSpan?: { spanCols: number; spanRows: number; };
+}

package/src/components/dashboard/IDashboardProps.tsx

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

package/src/components/dashboard/NoDashboards.tsx

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

@@ -0,0 +1,4 @@
+export * from './DashBoard';
+export * from './ICardChartContainer';
+export * from './IDashboardProps';
+

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

@@ -0,0 +1,189 @@
+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 { Icon } from "@iconify/react";
+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;
+} => ({
+  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;
+  `,
+ 
+   
+});
+
+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
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: "6px",
+            width: "100%",
+            boxSizing: "border-box",
+            padding: "8px",
+          }}
+        >
+          <RenderLabel
+            label={`Selected Span (${values.spanCols} × ${values.spanRows})`}
+            icon={
+              <Icon
+                icon="fluent:number-row-20-regular"
+                width="32"
+                height="32"
+              />
+            }
+          />
+        </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>
+  );
+};