@spteck/fluentui-react-charts 0.1.9 → 1.0.1

package/src/components/dashboard/useDashboardStyles.ts

@@ -0,0 +1,76 @@
+import { css } from '@emotion/css';
+import { tokens } from '@fluentui/react-components';
+
+export const useDashboardStyles = (): {
+  dashboardContainer: string;
+  cardBody: string;
+  chartContainer: string;
+  cardDescription: string;
+  cardWrapper: string;
+} => {
+  return {
+    dashboardContainer: css({
+      display: 'grid',
+      padding: '20px',
+      gap: '16px',
+      backgroundColor: tokens.colorNeutralBackground2,
+      gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
+      gridAutoRows: '350px',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+
+      // Scrollbar styles
+      '::-webkit-scrollbar': {
+        width: '5px', // Width for vertical scrollbars
+        height: '5px', // Height for horizontal scrollbars
+      },
+      '::-webkit-scrollbar-track': {
+        background: tokens.colorNeutralBackground4, // Light gray for the track
+        borderRadius: '10px',
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: tokens.colorBrandStroke2Hover, // Dark gray for the thumb
+        borderRadius: '10px',
+      },
+      '::-webkit-scrollbar-thumb:hover': {
+        background: tokens.colorNeutralStroke2, // Dark gray for the thumb
+      },
+
+      justifyContent: 'center',
+      gridAutoFlow: 'dense',
+    }),
+    cardBody: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      minHeight: '320px',
+    }),
+    chartContainer: css({
+      flex: 1,
+      width: '100%',
+      minHeight: '280px',
+    }),
+    cardDescription: css({
+      color: `${tokens.colorNeutralForeground2}`,
+      marginTop: '4px',
+    }),
+
+    cardWrapper: css({
+      position: 'relative',
+      height: '100%',
+      minHeight: '300px',
+      borderRadius: tokens.borderRadiusMedium,
+      transition: 'all 0.2s ease',
+
+      '&:hover': {
+        transform: 'translateY(-2px)',
+        boxShadow: `${tokens.shadow16}`,
+      },
+
+      '&:active': {
+        transform: 'translateY(0)',
+        boxShadow: `${tokens.shadow8}`,
+      },
+    }),
+  };
+};

package/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from '../charts/BarChart';
 export * from '../charts/ComboChart';
-export * from './DashBoard';
+export * from './dashboard/DashBoard';
 export * from '../charts/Doughnut';
 export * from '../charts/PieChart';
 export * from '../charts/areaChart';
@@ -13,3 +13,5 @@ export * from '../charts/radarChart';
 export * from '../charts/scatterChart';
 export * from '../charts/stackedLineChart';
 export * from '../charts/steamChart';
+ 
+ 

package/src/components/svgImages/BusinessReportIcon.tsx

@@ -0,0 +1,218 @@
+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/models/ChartDatum.ts

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

package/src/models/ICardChartContainer.tsx

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

package/src/models/index.ts

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

package/dist/components/DashBoard.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const DashboardWithGridDnD: React.FC;
-export default DashboardWithGridDnD;