@spteck/fluentui-react-charts 0.1.8

package/src/components/stack/Stack.tsx

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

package/src/components/themeProvider/ThemeProvider.tsx

@@ -0,0 +1,48 @@
+import React, { ReactNode, createContext, useContext, useState } from 'react';
+import { Theme, webDarkTheme, webLightTheme } from '@fluentui/react-components';
+
+// Define your supported themes
+export type SupportedTheme = 'light' | 'dark';
+
+// Create context
+interface ThemeContextValue {
+  themeName: SupportedTheme;
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+ 
+// Create provider
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: SupportedTheme;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = 'light',
+}) => {
+  const [themeName, setThemeName] = useState<SupportedTheme>(defaultTheme);
+
+  const toggleTheme = () => {
+    setThemeName(prev => (prev === 'light' ? 'dark' : 'light'));
+  };
+
+  const theme = themeName === 'light' ? webLightTheme : webDarkTheme;
+
+  return (
+    <ThemeContext.Provider value={{ themeName, theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// Hook to use the context
+export const useThemeContext = (): ThemeContextValue => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/constants/Constants.tsx

@@ -0,0 +1,23 @@
+import { tokens as fluentTokens } from "@fluentui/react-components";
+
+// Assign colors per series based on label
+export function getFluentPalette() {
+  return [
+    fluentTokens?.colorPaletteBerryBackground2,
+    fluentTokens?.colorPaletteBlueBackground2,
+    fluentTokens?.colorPaletteGreenBackground2,
+    fluentTokens?.colorPaletteDarkOrangeBackground2,
+    fluentTokens?.colorPalettePinkBackground2,
+    fluentTokens?.colorPalettePurpleBackground2,
+    fluentTokens?.colorPaletteRedBackground2,
+    fluentTokens?.colorPaletteTealBackground2,
+    fluentTokens?.colorPaletteYellowBackground2,
+    fluentTokens?.colorPaletteMarigoldBackground2,
+    fluentTokens?.colorPaletteBrassBackground2,
+    fluentTokens?.colorPaletteForestBackground2,
+    fluentTokens?.colorPaletteSeafoamBackground2,
+    fluentTokens?.colorPaletteLavenderBackground2,
+    fluentTokens?.colorPaletteCornflowerBackground2,
+  ];
+}
+ 

package/src/graphGlobalStyles/useGraphGlobalStyles.ts

@@ -0,0 +1,28 @@
+import { css } from "@emotion/css";
+
+export const useGraphGlobalStyles = () => {
+    return   {
+        chartWithLegend: css({
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            chartArea: {
+                flexGrow: 1,
+                minHeight: 0,
+            },
+        }),
+        chartArea: css`
+            flex-grow: 1;
+            min-height: 0;
+        `,
+        legendArea: css`
+            margin-top: 0px;
+            padding-top: 0px;
+            
+            margin-Left: 10px;
+            margin-Right: 10px;
+       
+        `,
+    };
+   
+}

package/src/hooks/index.ts

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

package/src/hooks/useGraphUtils.tsx

@@ -0,0 +1,314 @@
+import {
+  ChartType,
+  TooltipCallbacks,
+  TooltipItem,
+  TooltipModel,
+  TooltipOptions,
+} from 'chart.js';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+
+import AreaChart from '../charts/areaChart/AreaChart';
+import BarChart from '../charts/BarChart/BarChart';
+import BarHorizontalChart from '../charts/barHorizontalChart/BarHotizontalChart';
+import BubbleChart from '../charts/bubbleChart/BubbleChart';
+import ComboChart from '../charts/ComboChart/ComboChart';
+import DoughnutChart from '../charts/Doughnut/DoughnutChart';
+import FloatingBarChart from '../charts/floatBarChart/FloatBarChart';
+import { IChart } from '../models/IChart';
+import LineChart from '../charts/lineChart/LineChart';
+import PieChart from '../charts/PieChart/PieChart';
+import PolarChart from '../charts/polarChart/PolarChart';
+import RadarChart from '../charts/radarChart/RadarChart';
+import React from 'react';
+import ScatterChart from '../charts/scatterChart/ScatterChart';
+import StackedLineChart from '../charts/stackedLineChart/StackedLineChart';
+import SteamChart from '../charts/steamChart/SteamChart';
+import { useMemo } from 'react';
+
+/**
+ * Lightens a given hex color by a percentage amount (0 to 1).
+ */
+export const lightenColor = (hex: string, amount: number): string => {
+  if (!/^#?[0-9A-Fa-f]{6}$/.test(hex)) return hex;
+  if (hex.startsWith('#')) hex = hex.slice(1);
+
+  let r = parseInt(hex.slice(0, 2), 16);
+  let g = parseInt(hex.slice(2, 4), 16);
+  let b = parseInt(hex.slice(4, 6), 16);
+
+  r = Math.min(255, Math.floor(r + (255 - r) * amount));
+  g = Math.min(255, Math.floor(g + (255 - g) * amount));
+  b = Math.min(255, Math.floor(b + (255 - b) * amount));
+
+  const toHex = (v: number) => v.toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+
+export const getFluentPalette = (_theme: Theme): string[] => [
+  '#4e79a7',
+  '#f28e2c',
+  '#e15759',
+  '#76b7b2',
+  '#59a14f',
+  '#edc949',
+  '#af7aa1',
+  '#ff9da7',
+  '#9c755f',
+  '#bab0ab',
+  '#8cd17d',
+  '#b6992d',
+  '#d37295',
+  '#fabfd2',
+  '#79706e',
+];
+
+const chartProps = (chart: IChart) => ({
+  data: chart.data,
+  title: chart.title,
+  getPrimary: (d: any) => d.name,
+  getSecondary: (d: any) => d.value,
+});
+
+const getChartComponent = (chart: IChart, theme: Theme) => {
+  const { type } = chart;
+  const  fuiTheme =  theme ?? webLightTheme; 
+  switch (type) {
+    case 'bar':
+      return <BarChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
+    case 'line':
+      return <LineChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'area':
+      return <AreaChart {...chartProps(chart)} stacked={false} theme={fuiTheme} />;
+
+    case 'bar-horizontal':
+      return <BarHorizontalChart {...chartProps(chart)} stacked={true} theme={fuiTheme} />;
+    case 'bubble':
+      return (
+        <BubbleChart {...chartProps(chart)} getRadius={d => d.radius ?? 1} theme={fuiTheme} />
+      );
+    case 'multiple-axes':
+      return (
+        <ComboChart
+          {...chartProps(chart)}
+          theme={fuiTheme}
+       
+          data={chart.data.map((series: any) => ({
+            label: series.label,
+            type: series.type ?? 'bar',
+            data: series.data,
+            yAxisID: series.secondaryAxisId,
+     
+          }))}
+        />
+      );
+    case 'steam':
+      return <SteamChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'floating-bar':
+      return (
+        <FloatingBarChart
+          getRange={d => [d.min ?? 0, d.max ?? 0]}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'stacked-line':
+      return <StackedLineChart {...chartProps(chart)} theme={fuiTheme} />;
+    case 'doughnut':
+      return (
+        <DoughnutChart
+          getLabel={datum => datum.name}
+          getValue={datum => datum.value ?? 0}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'pie':
+      return (
+        <PieChart
+          getLabel={datum => datum.name}
+          getValue={datum => datum.value ?? 0}
+          showDataLabels={true}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+        />
+      );
+    case 'scatter':
+      return (
+        <ScatterChart
+          getX={d => {
+            if (typeof d.x === 'number') return d.x;
+            if (typeof d.x === 'string') return Number(d.x) || 0;
+            if (d.x instanceof Date) return d.x.getTime();
+            return 0;
+          }}
+          getY={d => (typeof d.y === 'number' ? d.y : 0)}
+          {...chartProps(chart)}
+          theme={fuiTheme}
+          showDataLabels={false}
+        />
+      );
+    case 'polar':
+      return (
+        <PolarChart
+          data={chart.data}
+          getLabel={d => d.name}
+          getValue={d => d.value ?? 0}
+          title={chart.title}
+          showDataLabels={true} 
+          theme={fuiTheme}
+        />
+      );
+    case 'radar':
+      return (
+        <RadarChart
+          data={chart.data}
+          getLabel={d => d.name}
+          getValue={d => d.value ?? 0}
+          title={chart.title}
+          theme={fuiTheme}
+        />
+      );
+
+    default:
+      throw new Error(`Unsupported chart type: ${type}`);
+  }
+};
+
+/**
+ * Smart Fluent tooltip generator with chart-type awareness.
+ */
+
+export function createFluentTooltip<TType extends ChartType>(
+  theme: Theme
+): Partial<TooltipOptions<TType>> {
+  const fontFamily = theme.fontFamilyBase;
+  const fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
+  const tooltipBg = theme.colorNeutralBackground1;
+  const tooltipTitleColor = theme.colorNeutralForeground1;
+  const tooltipBodyColor = theme.colorNeutralForeground2;
+  const borderColor = theme.colorNeutralStroke2;
+
+  const callbacks: TooltipCallbacks<TType> = {
+    title(this: TooltipModel<TType>, context: TooltipItem<TType>[]) {
+      return context[0]?.label ?? '';
+    },
+
+    label(this: TooltipModel<TType>, item: TooltipItem<TType>) {
+      const datasetLabel =
+        'label' in (item.dataset as Record<string, any>) &&
+        typeof (item.dataset as Record<string, any>).label === 'string'
+          ? (item.dataset as Record<string, any>).label
+          : 'Value';
+
+      const raw = item.raw;
+
+      //  Bubble format { x, y, r }
+      if (
+        typeof raw === 'object' &&
+        raw !== null &&
+        'x' in raw &&
+        'y' in raw &&
+        'r' in raw
+      ) {
+        const { x, y, r } = raw as any;
+        return `${datasetLabel} — x: ${x}, y: ${y}, r: ${r}`;
+      }
+
+      //   Scatter format { x, y }
+      if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
+        const { x, y } = raw as any;
+        return `${datasetLabel} — x: ${x}, y: ${y}`;
+      }
+
+      //  Floating bar [min, max]
+      if (Array.isArray(raw) && raw.length === 2) {
+        const [min, max] = raw;
+        return `${datasetLabel}: ${min} – ${max}`;
+      }
+
+      //  Default: single number or string
+      return `${datasetLabel}: ${raw}`;
+    },
+
+    beforeTitle: () => '',
+    afterTitle: () => '',
+    beforeBody: () => '',
+    afterBody: () => '',
+    beforeLabel: () => '',
+    afterLabel: () => '',
+    labelColor: () => undefined as any,
+    labelTextColor: () => '',
+    footer: () => '',
+    beforeFooter: () => '',
+    afterFooter: () => '',
+    labelPointStyle: () => ({
+      pointStyle: 'circle',
+      rotation: 0,
+      radius: 5,
+    }),
+  };
+
+  return {
+    enabled: true,
+    displayColors: true,
+    boxWidth: 10,
+    boxHeight: 10,
+    boxPadding: 5,
+    backgroundColor: tooltipBg,
+    borderColor,
+    borderWidth: 1,
+    cornerRadius: 4,
+    padding: 10,
+    titleColor: tooltipTitleColor,
+    bodyColor: tooltipBodyColor,
+    titleFont: { family: fontFamily, size: fontSize },
+    bodyFont: { family: fontFamily, size: fontSize },
+    callbacks,
+  };
+}
+
+
+/**
+ * Returns a Chart.js ticks callback to truncate long labels and add optional prefix/suffix.
+ */
+export const createAxisLabelFormatter = ({
+  maxLength = 12,
+  suffix = '',
+  prefix = '',
+}: {
+  maxLength?: number;
+  suffix?: string;
+  prefix?: string;
+}) => {
+  return function (this: any, value: string | number): string {
+    const label = typeof value === 'number' ? this.getLabelForValue(value) : String(value);
+    const trimmed = label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
+    return `${prefix}${trimmed}${suffix}`;
+  };
+};
+
+
+function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): T {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  return function(this: any, ...args: any[]) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  } as T;
+}
+
+/**
+ * useGraphUtils — shared theming and chart helpers.
+ */
+export function useGraphUtils(theme?: Theme) {
+  return useMemo(
+    () => ({
+      lightenColor,
+      getFluentPalette,
+      getChartComponent,
+      createFluentTooltip,
+      createAxisLabelFormatter,
+      debounce
+    }),
+    [theme]
+  );
+}

package/src/hooks/useResponsiveLegend.ts

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { ResizeObserver } from '@juggle/resize-observer';
+import { useGraphUtils } from './useGraphUtils';
+
+const BUTTON_WIDTH = 100;
+const GAP = 10;
+
+export function useResponsiveLegend<T extends { label: string }>(items: T[]) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [maxVisible, setMaxVisible] = useState(items.length);
+  const { debounce } = useGraphUtils();
+  useEffect(() => {
+    const measure = () => {
+      const containerWidth = containerRef.current?.offsetWidth ?? 0;
+      const itemTotalWidth = BUTTON_WIDTH + GAP;
+      const count = Math.floor(containerWidth / itemTotalWidth);
+      setMaxVisible(count);
+    };
+
+    const debouncedMeasure = debounce(measure, 100); // debounce resize
+
+    const observer = new ResizeObserver(debouncedMeasure);
+    if (containerRef.current) observer.observe(containerRef.current);
+    measure(); // initial
+
+    return () => observer.disconnect();
+  }, [items]);
+
+  return {
+    containerRef,
+    visibleItems: items.slice(0, maxVisible),
+    overflowItems: items.slice(maxVisible),
+  };
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+
+export * from './components';
+export * from './hooks';
+export * from './models';

package/src/models/IChart.ts

@@ -0,0 +1,50 @@
+export type ChartType =
+  | 'bar'
+  | 'line'
+  | 'area'
+  | 'band'
+  | 'bar-horizontal'
+  | 'bubble'
+  | 'steam'
+  | 'multiple-axes'
+  | 'floating-bar'
+  | 'stacked-line'
+  | 'doughnut'
+  | 'pie'
+  | 'radar'
+  | 'polar'
+  | 'combo'
+  | 'gauge'
+  | 'funnel'
+  | 'heatmap'
+  | 'treemap'
+  | 'sunburst'
+  | 'sankey'
+  | 'waterfall'
+  | 'boxplot'
+  | 'violin'
+  | 'radial-bar'
+  | 'sparkline'
+  | 'scatter';
+  
+export type ChartData = {
+  name: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  radius?: number;
+  x?: number | string | Date;
+  y?: number;
+ 
+};
+export interface IChart {
+  id: string;
+  title: string;
+  type: ChartType;
+  data: { label: string; data: ChartData[]; secondaryAxisId?: string }[];
+}
+export interface BubbleDatum {
+  primary: number | string | Date;
+  secondary: number;
+  radius: number;
+}

package/src/models/index.ts

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