@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/components/svgImages/BusinessReportIcon.tsx

@@ -1,218 +0,0 @@
-import React from "react";
-import { tokens } from "@fluentui/react-components";
-
-interface BusinessReportIconProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export const BusinessReportIcon: React.FC<BusinessReportIconProps> = ({
-  width = 200,
-  height = 200,
-  className,
-  style,
-}) => {
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="200 400 1400 1000"
-      className={className}
-      style={{
-        fill: tokens.colorNeutralForeground2,
-        ...style,
-      }}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g id="BACKGROUND">
-        <rect
-          style={{ fill: tokens.colorNeutralBackground1 }}
-          x="200"
-          y="400"
-          width="1400"
-          height="1000"
-        />
-      </g>
-
-      {/* Main chart/dashboard area */}
-      <g>
-        <g>
-          <rect
-            x="486.006"
-            y="568.026"
-            style={{ fill: tokens.colorNeutralBackground1 }}
-            width="1038.994"
-            height="768.164"
-          />
-          <path
-            style={{ fill: tokens.colorNeutralStroke1 }}
-            d="M1527.5,1338.69H483.506V565.526H1527.5V1338.69z M488.506,1333.69H1522.5V570.526H488.506V1333.69z"
-          />
-        </g>
-        <g>
-          {/* Chart bars */}
-          <rect
-            x="558.003"
-            y="1086.698"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="164.492"
-          />
-          <rect
-            x="693.003"
-            y="1004.672"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="246.519"
-          />
-          <rect
-            x="828.003"
-            y="835.487"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="415.703"
-          />
-          <rect
-            x="963.003"
-            y="955.6"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="295.591"
-          />
-          <rect
-            x="1098.003"
-            y="825.238"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="425.952"
-          />
-          <rect
-            x="1233.003"
-            y="847.489"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="403.701"
-          />
-          <rect
-            x="1368.003"
-            y="699.989"
-            style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-            width="85"
-            height="551.201"
-          />
-          {/* Chart line */}
-          <polygon
-            style={{ fill: tokens.colorBrandBackground }}
-            points="583.634,1185.919 581.366,1181.462 723.336,1109.231 869.748,909.808 1003.791,1050.114 1141.593,912.312 1275.235,928.549 1409.365,774.548 1413.135,777.833 1277.265,933.832 1143.407,917.569 1003.709,1057.267 870.251,917.573 726.664,1113.149"
-          />
-        </g>
-        {/* Chart grid lines */}
-        <rect
-          x="796.336"
-          y="662.857"
-          style={{ fill: tokens.colorBrandBackground }}
-          width="418.333"
-          height="5"
-        />
-        <rect
-          x="937.543"
-          y="717.857"
-          style={{ fill: tokens.colorBrandBackground }}
-          width="135.92"
-          height="5"
-        />
-      </g>
-
-      {/* Small chart on left */}
-      <g>
-        <g>
-          <rect
-            x="264.978"
-            y="441.049"
-            style={{ fill: tokens.colorNeutralBackground1 }}
-            width="482.581"
-            height="379.067"
-          />
-          <path
-            style={{ fill: tokens.colorNeutralStroke1 }}
-            d="M750.06,822.616H262.478V438.549H750.06V822.616z M267.478,817.616H745.06V443.549H267.478V817.616z"
-          />
-        </g>
-        <g>
-          {/* Small chart elements */}
-          <g>
-            <rect
-              x="330.537"
-              y="503.15"
-              style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-              width="108.842"
-              height="61.633"
-            />
-            <g>
-              <rect
-                x="485.277"
-                y="509.093"
-                style={{ fill: tokens.colorBrandBackground }}
-                width="198.014"
-                height="2.623"
-              />
-              <rect
-                x="485.277"
-                y="532.656"
-                style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-                width="198.014"
-                height="2.623"
-              />
-              <rect
-                x="485.277"
-                y="556.218"
-                style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-                width="198.014"
-                height="2.623"
-              />
-            </g>
-          </g>
-          {/* Bar chart elements */}
-          <g>
-            <g>
-              <rect
-                x="381.691"
-                y="687.747"
-                style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-                width="22.73"
-                height="70.417"
-              />
-              <rect
-                x="404.421"
-                y="653.482"
-                style={{ fill: tokens.colorBrandBackground }}
-                width="22.73"
-                height="104.682"
-              />
-            </g>
-            <g>
-              <rect
-                x="466.491"
-                y="641.634"
-                style={{ fill: tokens.colorNeutralForeground3, opacity: 0.3 }}
-                width="22.73"
-                height="116.089"
-              />
-              <rect
-                x="489.221"
-                y="714.758"
-                style={{ fill: tokens.colorBrandBackground }}
-                width="22.73"
-                height="42.965"
-              />
-            </g>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
-};
-
-export default BusinessReportIcon;

package/src/components/themeProvider/ThemeProvider.tsx

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

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

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

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

package/src/hooks/useChartFactory.tsx

@@ -1,136 +0,0 @@
-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";
-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';
-
-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}`);
-  }
-};
-
-export const useChartFactory = () => {
-  return React.useMemo(() => ({
-    getChartComponent
-  }), []);
-};

package/src/hooks/useChartUtils.tsx

@@ -1,187 +0,0 @@
-import {
-  ChartType,
-  TooltipCallbacks,
-  TooltipItem,
-  TooltipModel,
-  TooltipOptions,
-} from 'chart.js';
-
-import { Theme } from '@fluentui/react-components';
-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',
-];
-
-
-
-/**
- * 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;
-}
-
-/**
- * useChartUtils — shared theming and chart helpers.
- */
-export function useChartUtils(theme?: Theme) {
-  return useMemo(
-    () => ({
-      lightenColor,
-      getFluentPalette,
-      createFluentTooltip,
-      createAxisLabelFormatter,
-      debounce
-    }),
-    [theme]
-  );
-}