@spteck/fluentui-react-charts 0.1.8

package/src/components/DashBoard.tsx

@@ -0,0 +1,409 @@
+import {
+  Card,
+  CardHeader,
+  FluentProvider,
+  IdPrefixProvider,
+  Text,
+} from '@fluentui/react-components';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { ButtonMenu } from './buttonMenu/ButtonMenu';
+import { ResizeObserver } from '@juggle/resize-observer';
+import { css } from '@emotion/css';
+import { tokens } from '@fluentui/react-components';
+import { useGraphUtils } from '../hooks/useGraphUtils';
+import { useThemeContext } from './themeProvider/ThemeProvider';
+
+// Fixed card width grid and centering
+const dashboardContainer = css`
+  display: grid;
+  padding: 20px;
+  gap: 16px;
+  background-color: ${tokens.colorNeutralBackground2};
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  grid-auto-rows: minmax(350px, 450px);
+  justify-content: center;
+  grid-auto-flow: dense;
+  overflow: auto;
+`;
+const cardBody = css`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+const chartContainer = css`
+  flex: 1;
+  min-height: 0; /* enables flex child to shrink properly */
+  overflow: hidden;
+`;
+
+const DashboardWithGridDnD: React.FC = () => {
+  const { theme } = useThemeContext();
+  const { getChartComponent } = useGraphUtils(theme);
+
+  // sample charts array
+  // Helper to generate random integer between min and max (inclusive)
+  const randomInt = (min: number, max: number) =>
+    Math.floor(Math.random() * (max - min + 1)) + min;
+
+  // Helper to generate random chart data for a given type
+  const generateRandomData = (type: string) => {
+    switch (type) {
+      case 'bar':
+      case 'line':
+      case 'area':
+      case 'bar-horizontal':
+      case 'stacked-line':
+        return [
+          {
+            label: '2023',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100) },
+              { name: 'Feb', value: randomInt(10, 100) },
+              { name: 'Mar', value: randomInt(10, 100) },
+            ],
+          },
+          {
+            label: '2024',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100) },
+              { name: 'Feb', value: randomInt(10, 100) },
+              { name: 'Mar', value: randomInt(10, 100) },
+            ],
+          },
+          {
+            label: '2025',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100) },
+              { name: 'Feb', value: randomInt(10, 100) },
+              { name: 'Mar', value: randomInt(10, 100) },
+            ],
+          },
+        ];
+      case 'bubble':
+        return [
+          {
+            label: '2023',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Feb', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Mar', value: randomInt(10, 100), radius: randomInt(5, 20) },
+            ],
+          },
+          {
+            label: '2024',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Feb', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Mar', value: randomInt(10, 100), radius: randomInt(5, 20) },
+            ],
+          },
+          {
+            label: '2025',
+            data: [
+              { name: 'Jan', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Feb', value: randomInt(10, 100), radius: randomInt(5, 20) },
+              { name: 'Mar', value: randomInt(10, 100), radius: randomInt(5, 20) },
+            ],
+          },
+        ];
+      case 'steam':
+        return Array.from({ length: 5 }, (_, i) => ({
+          label: `${2021 + i}`,
+          data: [
+            { name: 'Jan', value: randomInt(10, 200) },
+            { name: 'Feb', value: randomInt(10, 200) },
+            { name: 'Mar', value: randomInt(10, 200) },
+          ],
+        }));
+      case 'multiple-axes':
+        return [
+          ...Array.from({ length: 3 }, (_, i) => ({
+            label: `${2021 + i}`,
+            type: 'bar',
+            data: [
+              { name: 'Jan', value: randomInt(10, 200) },
+              { name: 'Feb', value: randomInt(10, 200) },
+              { name: 'Mar', value: randomInt(10, 200) },
+            ],
+          })),
+          ...Array.from({ length: 2 }, (_, i) => ({
+            label: `${2024 + i}`,
+            type: 'line',
+            data: [
+              { name: 'Jan', value: randomInt(10, 200) },
+              { name: 'Feb', value: randomInt(10, 200) },
+              { name: 'Mar', value: randomInt(10, 200) },
+            ],
+          })),
+        ];
+      case 'floating-bar':
+        return [
+          {
+            label: 'City Porto',
+            data: [
+              { name: 'Jan', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Feb', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Mar', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Apr', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'May', min: randomInt(-10, 10), max: randomInt(10, 30) },
+            ],
+          },
+          {
+            label: 'City Lisbon',
+            data: [
+              { name: 'Jan', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Feb', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Mar', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'Apr', min: randomInt(-10, 10), max: randomInt(10, 30) },
+              { name: 'May', min: randomInt(-10, 10), max: randomInt(10, 30) },
+            ],
+          },
+          {
+            label: 'City Faro',
+            data: [
+              { name: 'Jan', min: randomInt(-20, 20), max: randomInt(20, 150) },
+              { name: 'Feb', min: randomInt(-20, 20), max: randomInt(20, 150) },
+              { name: 'Mar', min: randomInt(-20, 20), max: randomInt(20, 150) },
+              { name: 'Apr', min: randomInt(-20, 20), max: randomInt(20, 150) },
+              { name: 'May', min: randomInt(-20, 20), max: randomInt(20, 150) },
+            ],
+          },
+        ];
+      case 'doughnut':
+      case 'pie':
+        return [
+          {
+            label: [2023],
+            data: [
+              { name: 'Jan', value: randomInt(10, 100) },
+              { name: 'Feb', value: randomInt(10, 100) },
+              { name: 'Mar', value: randomInt(10, 100) },
+              { name: 'Apr', value: randomInt(10, 100) },
+            ],
+          },
+        ];
+      case 'scatter':
+        return [
+          {
+            label: 'Group A',
+            data: [
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+            ],
+          },
+          {
+            label: 'Group B',
+            data: [
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+            ],
+          },
+          {
+            label: 'Group C',
+            data: [
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+              { x: randomInt(1, 10), y: randomInt(1, 20) },
+            ],
+          },
+        ];
+      case 'polar':
+      case 'radar':
+        return [
+          {
+            label: [2025],
+         
+            data: [
+              { name: 'Jan', value: randomInt(10, 50) },
+              { name: 'Feb', value: randomInt(10, 50) },
+              { name: 'Mar', value: randomInt(10, 50) },
+              { name: 'Apr', value: randomInt(10, 50) },
+              { name: 'May', value: randomInt(10, 50) },
+              { name: 'Jun', value: randomInt(10, 50) },
+              { name: 'Jul', value: randomInt(10, 50) },
+              { name: 'Aug', value: randomInt(10, 50) },
+              { name: 'Sep', value: randomInt(10, 50) },
+              { name: 'Oct', value: randomInt(10, 50) },
+              { name: 'Nov', value: randomInt(10, 50) },
+              { name: 'Dec', value: randomInt(10, 50) },
+            ],
+          },
+          ...(type === 'radar'
+            ? [
+                {
+                  label: [2024],
+                  data: [
+                    { name: 'Jan', value: randomInt(10, 50) },
+                    { name: 'Feb', value: randomInt(10, 50) },
+                    { name: 'Mar', value: randomInt(10, 50) },
+                    { name: 'Apr', value: randomInt(10, 50) },
+                    { name: 'May', value: randomInt(10, 50) },
+                    { name: 'Jun', value: randomInt(10, 50) },
+                    { name: 'Jul', value: randomInt(10, 50) },
+                    { name: 'Aug', value: randomInt(10, 50) },
+                    { name: 'Sep', value: randomInt(10, 50) },
+                    { name: 'Oct', value: randomInt(10, 50) },
+                    { name: 'Nov', value: randomInt(10, 50) },
+                    { name: 'Dec', value: randomInt(10, 50) },
+                  ],
+                },
+              ]
+            : []),
+        ];
+      default:
+        return [];
+    }
+  };
+
+  // Chart definitions with random data
+  const [charts, setCharts] = useState<any[]>([
+    { id: '7', title: 'Multi-Series Multiple Axes Chart', type: 'bar', data: generateRandomData('bar') },
+    { id: '1', title: 'Multi-Series Line Chart', type: 'line', data: generateRandomData('line') },
+    { id: '2', title: 'Multi-Series Area Chart', type: 'area', data: generateRandomData('area') },
+    { id: '9', title: 'Multi-Series Bar-Horizontal Chart', type: 'bar-horizontal', data: generateRandomData('bar-horizontal') },
+    { id: '10', title: 'Multi-Series Bubble Chart', type: 'bubble', data: generateRandomData('bubble') },
+    { id: '11', title: 'Multi-Series Steam Chart', type: 'steam', data: generateRandomData('steam') },
+    { id: '12', title: 'Multi-Series Multiple Axes Chart', type: 'multiple-axes', data: generateRandomData('multiple-axes') },
+    { id: '16', title: 'Floating Bar Chart', type: 'floating-bar', data: generateRandomData('floating-bar') },
+    { id: '19', title: 'Stacked Line Chart', type: 'stacked-line', data: generateRandomData('stacked-line') },
+    { id: '20', title: 'Doughnut Chart', type: 'doughnut', data: generateRandomData('doughnut') },
+    { id: '23', title: 'Pie Chart', type: 'pie', data: generateRandomData('pie') },
+    { id: '24', title: 'Scatter Chart', type: 'scatter', data: generateRandomData('scatter') },
+    { id: '38', title: 'Polar Chart', type: 'polar', data: generateRandomData('polar') },
+    { id: '39', title: 'Radar Chart', type: 'radar', data: generateRandomData('radar') },
+  ]);
+  const [sizes, setSizes] = useState<Record<string, number>>({});
+  const dragItem = useRef<number | null>(null);
+  const dragOverItem = useRef<number | null>(null);
+
+  // measure container width to hide zoom on mobile
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const obs = new ResizeObserver(entries => {
+      setContainerWidth(entries[0].contentRect.width);
+    });
+    obs.observe(containerRef.current);
+    return () => obs.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (containerWidth <= 600) {
+      setSizes(() => {
+        const reset: Record<string, number> = {};
+        charts.forEach(c => {
+          reset[c.id] = 1;
+        });
+        return reset;
+      });
+    }
+  }, [containerWidth, charts]);
+
+  const showZoom = React.useMemo(() => containerWidth > 600, [containerWidth]);
+
+  const minCardWidth = 350;
+  const gridGap = 16; // same value as CSS gap
+  const containerPadding = 20; // same as dashboardContainer padding
+  // calculate how many full columns fit
+  const innerWidth = containerWidth - containerPadding * 2;
+  const columns = Math.floor((innerWidth + gridGap) / (minCardWidth + gridGap));
+  const maxZoom = Math.max(columns, 1);
+
+  // if no charts, show placeholder
+  if (charts.length === 0) {
+    return (
+      <FluentProvider theme={theme}>
+        <div
+          className={css`
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: ${tokens.colorNeutralBackground2};
+          `}
+        >
+          <Text size={500} weight="semibold">
+            No charts to display.
+          </Text>
+        </div>
+      </FluentProvider>
+    );
+  }
+
+  const handleSort = () => {
+    if (
+      dragItem.current !== null &&
+      dragOverItem.current !== null &&
+      dragItem.current !== dragOverItem.current
+    ) {
+      const copy = [...charts];
+      const [moved] = copy.splice(dragItem.current, 1);
+      copy.splice(dragOverItem.current, 0, moved);
+      setCharts(copy);
+    }
+    dragItem.current = null;
+    dragOverItem.current = null;
+  };
+  const handleResize = (id: string, span: number) => {
+    setSizes(prev => ({ ...prev, [id]: Math.min(Math.max(span, 1), maxZoom) }));
+  };
+
+  return (
+    <IdPrefixProvider value="dashboard-grid-dnd">
+      <FluentProvider theme={theme} style={{height: '100%', backgroundColor: tokens.colorNeutralBackground2  }} >
+        <div ref={containerRef} className={dashboardContainer}>
+          {charts.map((chart, idx) => {
+            const zoomOptions = Array.from({ length: maxZoom }, (_, i) => ({
+              key: String(i + 1),
+              text: `Zoom: ${i + 1}x${i + 1}`,
+              selected: sizes[chart.id] === i + 1,
+            }));
+            return (
+              <div
+                key={chart.id}
+                draggable
+                onDragStart={() => (dragItem.current = idx)}
+                onDragEnter={() => (dragOverItem.current = idx)}
+                onDragOver={e => e.preventDefault()}
+                onDragEnd={handleSort}
+                style={{
+                  gridColumnEnd: sizes[chart.id]
+                    ? `span ${sizes[chart.id]}`
+                    : undefined,
+                }}
+              >
+                <Card className={cardBody}>
+                  <CardHeader
+                    header={chart.title}
+                    action={
+                      <>
+                        {showZoom && (
+                          <ButtonMenu
+                         
+                            options={zoomOptions}
+                            onSelected={opt =>
+                              handleResize(chart.id, Number(opt.key))
+                            }
+                          />
+                        )}
+                      </>
+                    }
+                  />
+                  <div className={chartContainer}>{getChartComponent(chart, theme)}</div>
+                </Card>
+              </div>
+            );
+          })}
+        </div>
+      </FluentProvider>
+    </IdPrefixProvider>
+  );
+};
+
+export default DashboardWithGridDnD;

package/src/components/RenderLegend/RenderLegend.tsx

@@ -0,0 +1,40 @@
+import { LegendContainer } from '../legendContainer/LegendContainer';
+import React from 'react';
+import { useResponsiveLegend } from '../../hooks/useResponsiveLegend';
+
+export interface LegendControlProps {
+  data: { label: string }[];
+  visibleSeries: string[];
+  seriesColors: Record<string, string>;
+  toggleSeries: (label: string) => void;
+}
+
+const RenderLegend: React.FC<LegendControlProps> = ({
+  data,
+  visibleSeries,
+  seriesColors,
+  toggleSeries,
+}) => {
+  const {
+    containerRef,
+   
+    visibleItems,
+    overflowItems,
+  } = useResponsiveLegend(data);
+
+  return (
+    <LegendContainer
+      containerRef={containerRef}
+     
+      visibleItems={visibleItems}
+      overflowItems={overflowItems}
+      items={data}
+      visibleLabels={visibleSeries}
+      toggleLabel={toggleSeries}
+      renderLabel={d => d.label}
+      getColor={d => seriesColors[d.label]}
+    />
+  );
+};
+
+export default RenderLegend;

package/src/components/RenderTooltip/RenderTooltip.tsx

@@ -0,0 +1,111 @@
+import {
+ Caption1,
+ Card,
+ FluentProvider,
+ IdPrefixProvider,
+ Text,
+ Theme,
+} from '@fluentui/react-components';
+import { css, keyframes } from '@emotion/css';
+
+import React from 'react';
+import Stack from '../stack/Stack';
+import { useThemeContext } from '../themeProvider/ThemeProvider';
+
+interface TooltipItem {
+  dataset: {
+    label: string;
+    backgroundColor: string;
+  };
+  raw: number | null;
+}
+
+interface IRenderTooltipProps {
+ 
+  title: string[];
+  body: TooltipItem[];
+}
+
+const fadeIn = keyframes`
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`;
+
+const useStyles = (theme: Theme, isDark: boolean) => ({
+  tooltip: css({
+    backgroundColor: isDark
+      ? 'rgba(32, 32, 32, 0.9)'
+      : 'rgba(255, 255, 255, 0.9)',
+    border: `1px solid ${
+      isDark ? theme.colorNeutralStroke1 : theme.colorNeutralStroke2
+    }`,
+    boxShadow: theme.shadow4,
+    padding: '8px 12px',
+    maxWidth: 250,
+    borderRadius: '4px',
+    animation: `${fadeIn} 150ms ease-out`,
+    transformOrigin: 'top left',
+    position: 'relative',
+  }),
+  arrow: css({
+    position: 'absolute',
+    top: '-6px',
+    left: '10px',
+    width: 0,
+    height: 0,
+    borderLeft: '6px solid transparent',
+    borderRight: '6px solid transparent',
+    borderBottom: `6px solid ${
+      isDark ? 'rgba(32, 32, 32, 0.9)' : 'rgba(255, 255, 255, 0.9)'
+    }`,
+  }),
+  colorDot: css({
+    width: '10px',
+    height: '10px',
+    borderRadius: '50%',
+    marginRight: '6px',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+  }),
+});
+
+export function RenderTooltip({   title, body }: IRenderTooltipProps) {
+ const { theme,themeName  } = useThemeContext();
+  const isDark = themeName === 'dark';
+  const styles = useStyles(theme, isDark);
+
+  return (
+    <IdPrefixProvider value="chartjs-tooltip">
+      <FluentProvider theme={theme} style={{ zIndex: 1000 }}>
+        <Card className={styles.tooltip}>
+          <div className={styles.arrow} />
+          <Stack rowGap="5px">
+            {title.length > 0 && (
+              <Text   block>
+                {title[0]}
+              </Text>
+            )}
+            {body.map((item, index) => (
+              <Stack
+                key={index}
+                direction="horizontal"
+                columnGap="6px"
+                alignItems="center"
+              >
+                <div
+                  className={styles.colorDot}
+                  style={{
+                    backgroundColor: item.dataset.backgroundColor,
+                    border: `1px solid ${item.dataset.backgroundColor}`,
+                  }}
+                />
+                <Caption1>{item.dataset.label}:</Caption1>
+                <Text>{item.raw}</Text>
+              </Stack>
+            ))}
+          </Stack>
+        </Card>
+      </FluentProvider>
+    </IdPrefixProvider>
+  );
+}