argent-grid 0.1.0 → 0.3.0

package/src/stories/Grouping.stories.ts

@@ -0,0 +1,290 @@
+import { BrowserModule } from '@angular/platform-browser';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ArgentGridComponent, ArgentGridModule, themeQuartz } from '../public-api';
+import {
+  departmentValueFormatter,
+  locationValueFormatter,
+  roleValueFormatter,
+  STORY_DEPARTMENTS,
+  STORY_LOCATIONS,
+  STORY_ROLES,
+} from './story-utils';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Features/Grouping',
+  component: ArgentGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ArgentGridModule, BrowserModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<ArgentGridComponent<Employee>>;
+
+function generateStaticData(count: number): Employee[] {
+  const departments = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Employee ${i + 1}`,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 50000 + i * 1000,
+    location: locations[i % locations.length],
+  }));
+}
+
+export const RowGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 180,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        valueFormatter: locationValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁',
+        width: 250,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 1, // Expand first level by default
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Row grouping by Department** column. Grouped columns show a 📁 icon. Click the **▶ expand/collapse arrows** in the group rows to show/hide items. **Drag column headers** to the left panel to group by multiple columns.',
+      },
+    },
+  },
+};
+
+export const MultiLevelGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 150,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'location',
+        headerName: 'Location 📁',
+        width: 150,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+        valueFormatter: locationValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁📁',
+        width: 300,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 2, // Expand first 2 levels by default
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Multi-level grouping** by Department AND Location. Each grouped column shows a 📁 icon. Groups are **expanded by default** to show the hierarchy. Click **▶ arrows** to collapse/expand. Notice the nested structure: Department → Location → Employees.',
+      },
+    },
+  },
+};
+
+export const GroupingWithAggregation: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁',
+        width: 180,
+        rowGroup: true,
+        headerComponentParams: { groupIcon: '📁' },
+        valueFormatter: departmentValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+      {
+        field: 'salary',
+        headerName: 'Salary 💰',
+        width: 120,
+        aggFunc: 'sum', // Show sum in group rows
+      },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        valueFormatter: locationValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      autoGroupColumnDef: {
+        headerName: 'Organization 📁',
+        width: 250,
+        pinned: 'left',
+      },
+      groupDefaultExpanded: 1,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Grouping with aggregation**. Salary column shows **sum (💰)** for each department group. Look at the group rows to see aggregated values. Supported aggregations: sum, avg, min, max, count.',
+      },
+    },
+  },
+};
+
+export const DragAndDropGrouping: Story = {
+  args: {
+    columnDefs: [
+      { field: 'id', headerName: 'ID', width: 80 },
+      { field: 'name', headerName: 'Name', width: 200 },
+      {
+        field: 'department',
+        headerName: 'Department 📁 (drag me!)',
+        width: 180,
+        rowGroup: false, // Not pre-grouped - user can drag
+        headerComponentParams: { draggable: true },
+        valueFormatter: departmentValueFormatter,
+      },
+      {
+        field: 'location',
+        headerName: 'Location 📁 (drag me!)',
+        width: 150,
+        rowGroup: false,
+        headerComponentParams: { draggable: true },
+        valueFormatter: locationValueFormatter,
+      },
+      { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+      { field: 'salary', headerName: 'Salary', width: 120 },
+    ],
+    rowData: generateStaticData(100),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+    gridOptions: {
+      rowGroupPanelShow: 'always', // Always show group panel
+      autoGroupColumnDef: {
+        headerName: 'Groups 📁',
+        width: 250,
+        pinned: 'left',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '**Drag-and-drop grouping**. See the **"Drag me!"** labels? **Drag column headers** (Department, Location) to the **"Groups" panel on the left** to create groups dynamically. Drop columns back to ungroup. Multiple columns can be grouped at once.',
+      },
+    },
+  },
+};
+
+export const ColumnGroups: Story = {
+  args: {
+    columnDefs: [
+      {
+        headerName: 'Group A',
+        children: [
+          { field: 'id', headerName: 'ID', width: 80 },
+          { field: 'name', headerName: 'Name', width: 200 },
+        ],
+      },
+      {
+        headerName: 'Group B',
+        children: [
+          {
+            field: 'department',
+            headerName: 'Department',
+            width: 180,
+            valueFormatter: departmentValueFormatter,
+          },
+          {
+            headerName: 'Deep Group',
+            children: [
+              { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+              { field: 'salary', headerName: 'Salary', width: 120 },
+            ],
+          },
+        ],
+      },
+      {
+        field: 'location',
+        headerName: 'Location',
+        width: 150,
+        valueFormatter: locationValueFormatter,
+      },
+    ],
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '**Nested column groups**. Demonstrates multiple levels of header grouping.',
+      },
+    },
+  },
+};

package/src/stories/Streaming.stories.ts

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { StreamingWrapperComponent } from './streaming-wrapper.component';
+
+const meta: Meta<StreamingWrapperComponent> = {
+  title: 'Features/Streaming',
+  component: StreamingWrapperComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [StreamingWrapperComponent],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<StreamingWrapperComponent>;
+
+export const LiveStockFeed: Story = {
+  args: {
+    updateFrequency: 100,
+    batchSize: 5,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<app-streaming-wrapper [updateFrequency]="updateFrequency" [batchSize]="batchSize" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Simulates a live stock market feed. Updates are buffered and applied via applyTransaction at most twice per second (500ms throttle) for efficient rendering. Demonstrates high-performance row updates with the canvas engine.',
+      },
+    },
+  },
+};
+
+export const HighFrequencyStream: Story = {
+  args: {
+    updateFrequency: 50,
+    batchSize: 10,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<app-streaming-wrapper [updateFrequency]="updateFrequency" [batchSize]="batchSize" />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Stresses the grid with 20 updates per second (10 rows each), totaling 200 row updates per second. All updates are buffered and applied in batched transactions every 500ms. Shows the efficiency of the transaction API and canvas renderer.',
+      },
+    },
+  },
+};

package/src/stories/Theming.stories.ts

@@ -0,0 +1,137 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { ArgentGridComponent, ArgentGridModule, colorSchemeDark, themeQuartz } from '../public-api';
+import {
+  departmentValueFormatter,
+  locationValueFormatter,
+  roleValueFormatter,
+  STORY_DEPARTMENTS,
+  STORY_LOCATIONS,
+  STORY_ROLES,
+} from './story-utils';
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  role: string;
+  salary: number;
+  location: string;
+}
+
+const meta: Meta<ArgentGridComponent<Employee>> = {
+  title: 'Features/Theming',
+  component: ArgentGridComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ArgentGridModule, BrowserModule, BrowserAnimationsModule],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<ArgentGridComponent<Employee>>;
+
+function generateStaticData(count: number): Employee[] {
+  const departments = STORY_DEPARTMENTS;
+  const roles = STORY_ROLES;
+  const locations = STORY_LOCATIONS;
+
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Employee ${i + 1}`,
+    department: departments[i % departments.length],
+    role: roles[i % roles.length],
+    salary: 50000 + i * 1000,
+    location: locations[i % locations.length],
+  }));
+}
+
+const columnDefs = [
+  { field: 'id', headerName: 'ID', width: 80 },
+  { field: 'name', headerName: 'Name', width: 200 },
+  {
+    field: 'department',
+    headerName: 'Department',
+    width: 180,
+    valueFormatter: departmentValueFormatter,
+  },
+  { field: 'role', headerName: 'Role', width: 250, valueFormatter: roleValueFormatter },
+  { field: 'salary', headerName: 'Salary', width: 120 },
+  { field: 'location', headerName: 'Location', width: 150, valueFormatter: locationValueFormatter },
+];
+
+export const LightMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default light theme using Quartz theme.',
+      },
+    },
+  },
+};
+
+export const DarkMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz.withPart(colorSchemeDark),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Dark mode using Quartz theme with dark color scheme.',
+      },
+    },
+  },
+};
+
+export const CompactMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz.withParams({ rowHeight: 32, fontSize: 12, spacing: 4 }),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Compact mode with smaller row height and font size.',
+      },
+    },
+  },
+};
+
+export const CompactDarkMode: Story = {
+  args: {
+    columnDefs,
+    rowData: generateStaticData(50),
+    height: 'calc(100vh - 60px)',
+    width: '100%',
+    theme: themeQuartz
+      .withParams({ rowHeight: 32, fontSize: 12, spacing: 4 })
+      .withPart(colorSchemeDark),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Combined compact and dark mode for dense data display.',
+      },
+    },
+  },
+};