@spteck/fluentui-react-charts 0.1.8 → 1.0.0

package/src/components/DashBoard.tsx

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