@opencorestack/opengridx 0.1.6 → 0.1.7

package/lib/components/Toolbar/PivotPanel.css

@@ -0,0 +1,212 @@
+.ogx-pivot-panel {
+  position: fixed;
+  width: 440px;
+  max-width: calc(100vw - 24px);
+  background: var(--ogx-overlay-background, var(--ogx-grid-background));
+  border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-lg);
+  box-shadow: var(--ogx-overlay-shadow, var(--ogx-shadow-lg));
+  z-index: 9999;
+  overflow: hidden;
+  animation: ogx-panel-in 0.15s ease-out;
+  font-family: var(--ogx-font-family);
+}
+@keyframes ogx-panel-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+.ogx-pivot-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  background: var(--ogx-grid-header-background);
+}
+.ogx-pivot-panel__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--ogx-font-size-sm);
+  font-weight: 600;
+  color: var(--ogx-grid-header-text);
+}
+.ogx-pivot-panel__reset-btn {
+  padding: 2px 8px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-sm);
+  background: transparent;
+  color: var(--ogx-color-error, #ef4444);
+  font-family: var(--ogx-font-family);
+  font-size: var(--ogx-font-size-xs);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
+}
+.ogx-pivot-panel__reset-btn:hover {
+  background: var(--ogx-toolbar-btn-danger-bg, rgba(239, 68, 68, 0.08));
+  color: var(--ogx-toolbar-btn-danger-text, #ef4444);
+  border-color: var(--ogx-color-error, #ef4444);
+}
+.ogx-pivot-panel__body {
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.ogx-pivot-zone {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ogx-pivot-zone__label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ogx-color-gray-400, #94a3b8);
+}
+.ogx-pivot-zone__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.ogx-pivot-zone__dot--row    { background: var(--ogx-color-primary, #3b82f6); }
+.ogx-pivot-zone__dot--col    { background: var(--ogx-color-secondary, #8b5cf6); }
+.ogx-pivot-zone__dot--value  { background: var(--ogx-color-success, #10b981); }
+.ogx-pivot-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  min-height: 30px;
+  padding: 5px 8px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  border-radius: var(--ogx-border-radius-md);
+  background: var(--ogx-grid-header-background);
+}
+.ogx-pivot-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px 3px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+.ogx-pivot-chip--row   { background: rgba(59,130,246,0.12); color: var(--ogx-color-primary-dark, #2563eb); }
+.ogx-pivot-chip--col   { background: rgba(139,92,246,0.12); color: var(--ogx-color-secondary-dark, #7c3aed); }
+.ogx-pivot-chip--value { background: var(--ogx-toolbar-chip-active-bg, rgba(16,185,129,0.12)); color: var(--ogx-toolbar-chip-active-text, #047857); }
+.ogx-pivot-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.6;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+  color: inherit;
+  transition: opacity 0.1s;
+}
+.ogx-pivot-chip__remove:hover { opacity: 1; }
+.ogx-pivot-chip__fn-select {
+  border: none;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 700;
+  color: inherit;
+  cursor: pointer;
+  padding: 0 2px;
+  margin-left: 2px;
+  font-family: var(--ogx-font-family-mono, monospace);
+}
+.ogx-pivot-chips--empty::after {
+  content: attr(data-placeholder);
+  font-size: 11px;
+  color: var(--ogx-color-gray-400, #94a3b8);
+  align-self: center;
+  pointer-events: none;
+}
+.ogx-pivot-panel__fields-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ogx-color-gray-400, #94a3b8);
+  margin-bottom: 4px;
+}
+.ogx-pivot-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+.ogx-pivot-field-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-border-color));
+  border-radius: 999px;
+  background: var(--ogx-grid-header-background);
+  color: var(--ogx-grid-row-text);
+  font-family: var(--ogx-font-family);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  white-space: nowrap;
+}
+.ogx-pivot-field-btn:hover {
+  background: var(--ogx-color-primary-light, #eff6ff);
+  border-color: var(--ogx-color-primary, #3b82f6);
+  color: var(--ogx-color-primary, #3b82f6);
+}
+.ogx-pivot-field-btn--numeric::before {
+  content: '#';
+  font-family: var(--ogx-font-family-mono, monospace);
+  font-size: 10px;
+  opacity: 0.5;
+}
+.ogx-pivot-field-actions {
+  display: flex;
+  gap: 3px;
+}
+.ogx-pivot-add-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border: var(--ogx-border-width-thin) solid var(--ogx-border-color);
+  border-radius: var(--ogx-border-radius-sm);
+  background: transparent;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, border-color 0.1s, color 0.1s;
+}
+.ogx-pivot-add-btn--row    { color: var(--ogx-color-primary, #3b82f6); }
+.ogx-pivot-add-btn--col    { color: var(--ogx-color-secondary, #8b5cf6); }
+.ogx-pivot-add-btn--value  { color: var(--ogx-toolbar-chip-active-text, #047857); }
+.ogx-pivot-add-btn:hover {
+  background: var(--ogx-grid-header-hover-background);
+  border-color: currentColor;
+}
+.ogx-pivot-panel__divider {
+  border: none;
+  border-top: var(--ogx-border-width-thin) solid var(--ogx-overlay-border, var(--ogx-grid-border-color));
+  margin: 0;
+}

package/lib/components/Toolbar/PivotPanel.tsx

@@ -0,0 +1,239 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import type { GridColDef } from '../../types';
+import type { GridPivotModel, GridPivotAggFn, GridPivotValueField } from '../../types';
+
+const AGG_FNS: GridPivotAggFn[] = ['sum', 'avg', 'count', 'min', 'max'];
+
+export function PivotIcon() {
+    return (
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+            aria-hidden="true"
+        >
+            <rect x="3" y="3" width="7" height="7" rx="1" />
+            <rect x="14" y="3" width="7" height="7" rx="1" />
+            <rect x="3" y="14" width="7" height="7" rx="1" />
+            <rect x="14" y="14" width="7" height="7" rx="1" fill="currentColor" opacity="0.25" />
+            <path d="M17 14v-4M17 10l-2 2 2 2" />
+        </svg>
+    );
+}
+
+export interface PivotPanelProps {
+    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    columns: GridColDef[];
+    model: GridPivotModel;
+    onChange: (model: GridPivotModel) => void;
+    onClose: () => void;
+}
+
+export function PivotPanel({ anchorRef, columns, model, onChange, onClose }: PivotPanelProps) {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const [pos, setPos] = useState({ top: 0, right: 0 });
+
+    const computePos = useCallback(() => {
+        if (!anchorRef.current) return { top: 0, right: 0 };
+        const rect = anchorRef.current.getBoundingClientRect();
+        return { top: rect.bottom + 6, right: window.innerWidth - rect.right };
+    }, [anchorRef]);
+
+    useEffect(() => {
+        setPos(computePos());
+        const update = () => setPos(computePos());
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [computePos]);
+
+    useEffect(() => {
+        function onClick(e: MouseEvent) {
+            if (
+                panelRef.current && !panelRef.current.contains(e.target as Node) &&
+                anchorRef.current && !anchorRef.current.contains(e.target as Node)
+            ) onClose();
+        }
+        function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose(); }
+        document.addEventListener('mousedown', onClick);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('mousedown', onClick);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [anchorRef, onClose]);
+
+    const inRow = new Set(model.rowFields);
+    const inCol = new Set(model.columnFields);
+    const inValue = new Set(model.valueFields.map((v) => v.field));
+    const isUsed = (f: string) => inRow.has(f) || inCol.has(f) || inValue.has(f);
+
+    function addRow(field: string) {
+        if (inRow.has(field)) return;
+        onChange({ ...model, rowFields: [...model.rowFields, field] });
+    }
+    function addCol(field: string) {
+        if (inCol.has(field)) return;
+        onChange({ ...model, columnFields: [...model.columnFields, field] });
+    }
+    function addValue(field: string, aggFn: GridPivotAggFn = 'sum') {
+        if (inValue.has(field)) return;
+        onChange({ ...model, valueFields: [...model.valueFields, { field, aggFn }] });
+    }
+    function removeRow(field: string) {
+        onChange({ ...model, rowFields: model.rowFields.filter((f) => f !== field) });
+    }
+    function removeCol(field: string) {
+        onChange({ ...model, columnFields: model.columnFields.filter((f) => f !== field) });
+    }
+    function removeValue(field: string) {
+        onChange({ ...model, valueFields: model.valueFields.filter((v) => v.field !== field) });
+    }
+    function changeValueFn(field: string, aggFn: GridPivotAggFn) {
+        onChange({
+            ...model,
+            valueFields: model.valueFields.map((v) => v.field === field ? { ...v, aggFn } : v),
+        });
+    }
+    function reset() {
+        onChange({ rowFields: [], columnFields: [], valueFields: [] });
+    }
+
+    const numericFields = new Set(columns.filter((c) => c.type === 'number' || c.aggregable).map((c) => c.field));
+
+    const totalActive = model.rowFields.length + model.columnFields.length + model.valueFields.length;
+
+    const colLabel = (field: string) =>
+        columns.find((c) => c.field === field)?.headerName ?? field;
+
+    const panel = (
+        <div
+            ref={panelRef}
+            className="ogx-pivot-panel"
+            role="dialog"
+            aria-label="Pivot configuration"
+            style={{ top: pos.top, right: pos.right }}
+        >
+            { }
+            <div className="ogx-pivot-panel__header">
+                <span className="ogx-pivot-panel__title">
+                    <PivotIcon />
+                    Pivot Mode
+                </span>
+                {totalActive > 0 && (
+                    <button className="ogx-pivot-panel__reset-btn" onClick={reset} title="Reset pivot">
+                        Reset
+                    </button>
+                )}
+            </div>
+
+            <div className="ogx-pivot-panel__body">
+
+                { }
+                <div className="ogx-pivot-zone">
+                    <span className="ogx-pivot-zone__label">
+                        <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--row" />
+                        Row Fields
+                    </span>
+                    <div
+                        className={`ogx-pivot-chips${model.rowFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
+                        data-placeholder="Add fields here — each becomes a row label"
+                    >
+                        {model.rowFields.map((f) => (
+                            <span key={f} className="ogx-pivot-chip ogx-pivot-chip--row">
+                                {colLabel(f)}
+                                <button className="ogx-pivot-chip__remove" onClick={() => removeRow(f)} title={`Remove ${colLabel(f)}`}>×</button>
+                            </span>
+                        ))}
+                    </div>
+                </div>
+
+                { }
+                <div className="ogx-pivot-zone">
+                    <span className="ogx-pivot-zone__label">
+                        <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--col" />
+                        Column Fields
+                    </span>
+                    <div
+                        className={`ogx-pivot-chips${model.columnFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
+                        data-placeholder="Add fields here — unique values become column headers"
+                    >
+                        {model.columnFields.map((f) => (
+                            <span key={f} className="ogx-pivot-chip ogx-pivot-chip--col">
+                                {colLabel(f)}
+                                <button className="ogx-pivot-chip__remove" onClick={() => removeCol(f)} title={`Remove ${colLabel(f)}`}>×</button>
+                            </span>
+                        ))}
+                    </div>
+                </div>
+
+                { }
+                <div className="ogx-pivot-zone">
+                    <span className="ogx-pivot-zone__label">
+                        <span className="ogx-pivot-zone__dot ogx-pivot-zone__dot--value" />
+                        Value Fields (aggregated)
+                    </span>
+                    <div
+                        className={`ogx-pivot-chips${model.valueFields.length === 0 ? ' ogx-pivot-chips--empty' : ''}`}
+                        data-placeholder="Add numeric fields here — values are aggregated"
+                    >
+                        {model.valueFields.map((vf: GridPivotValueField) => (
+                            <span key={vf.field} className="ogx-pivot-chip ogx-pivot-chip--value">
+                                {colLabel(vf.field)}
+                                <select
+                                    className="ogx-pivot-chip__fn-select"
+                                    value={vf.aggFn}
+                                    onChange={(e) => changeValueFn(vf.field, e.target.value as GridPivotAggFn)}
+                                    title="Aggregation function"
+                                >
+                                    {AGG_FNS.map((fn) => (
+                                        <option key={fn} value={fn}>{fn.toUpperCase()}</option>
+                                    ))}
+                                </select>
+                                <button className="ogx-pivot-chip__remove" onClick={() => removeValue(vf.field)} title={`Remove ${colLabel(vf.field)}`}>×</button>
+                            </span>
+                        ))}
+                    </div>
+                </div>
+
+                <hr className="ogx-pivot-panel__divider" />
+
+                { }
+                <div>
+                    <div className="ogx-pivot-panel__fields-label">Available Fields</div>
+                    <div className="ogx-pivot-fields">
+                        {columns.map((col) => {
+                            const isNum = numericFields.has(col.field);
+                            const used = isUsed(col.field);
+                            if (used) return null;
+                            return (
+                                <div key={col.field} style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+                                    <span className={`ogx-pivot-field-btn${isNum ? ' ogx-pivot-field-btn--numeric' : ''}`}>
+                                        {col.headerName ?? col.field}
+                                    </span>
+                                    <div className="ogx-pivot-field-actions">
+                                        <button className="ogx-pivot-add-btn ogx-pivot-add-btn--row" onClick={() => addRow(col.field)} title="Add to Row Fields">Row</button>
+                                        <button className="ogx-pivot-add-btn ogx-pivot-add-btn--col" onClick={() => addCol(col.field)} title="Add to Column Fields">Col</button>
+                                        {isNum && (
+                                            <button className="ogx-pivot-add-btn ogx-pivot-add-btn--value" onClick={() => addValue(col.field)} title="Add to Value Fields">Val</button>
+                                        )}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                        {columns.every((col) => isUsed(col.field)) && (
+                            <span style={{ fontSize: 12, color: 'var(--ogx-color-gray-400, #94a3b8)' }}>
+                                All fields are in use.
+                            </span>
+                        )}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+
+    return ReactDOM.createPortal(panel, anchorRef.current?.closest('.ogx-theme-provider') || document.body);
+}

package/lib/components/Tooltip/Tooltip.css

@@ -0,0 +1,59 @@
+.ogx-tooltip {
+  pointer-events: none;
+  background: var(--ogx-overlay-background, rgba(30, 41, 59, 0.92));
+  color: var(--ogx-overlay-text, #fff);
+  font-family: var(--ogx-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.4;
+  padding: 3px 6px;
+  border-radius: 6px;
+  white-space: nowrap;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  z-index: 99999;
+}
+.ogx-tooltip--top {
+  transform: translate(-50%, -100%);
+  animation: ogx-tooltip-in-top 0.15s ease-out;
+}
+
+.ogx-tooltip--bottom {
+  transform: translate(-50%, 0);
+  animation: ogx-tooltip-in-bottom 0.15s ease-out;
+}
+
+@keyframes ogx-tooltip-in-top {
+  from { opacity: 0; transform: translate(-50%, -95%) scale(0.98); }
+  to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
+}
+
+@keyframes ogx-tooltip-in-bottom {
+  from { opacity: 0; transform: translate(-50%, -4px) scale(0.98); }
+  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
+}
+
+/* Optional: Add a small arrow if needed */
+/* 
+.ogx-tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.ogx-tooltip--top::before {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top: 5px solid var(--ogx-overlay-background, rgba(30, 41, 59, 0.92));
+}
+
+.ogx-tooltip--bottom::before {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom: 5px solid var(--ogx-overlay-background, rgba(30, 41, 59, 0.92));
+}
+*/

package/lib/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,106 @@
+import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import './Tooltip.css';
+
+interface GridTooltipProps {
+    title: React.ReactNode;
+    children: React.ReactElement;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    enterDelay?: number;
+    leaveDelay?: number;
+}
+
+export function GridTooltip({
+    title,
+    children,
+    placement = 'top',
+    enterDelay = 200,
+    leaveDelay = 0
+}: GridTooltipProps) {
+    const [open, setOpen] = useState(false);
+    const [coords, setCoords] = useState({ top: 0, left: 0 });
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+    const childRef = useRef<HTMLElement | null>(null);
+
+    const updateCoords = useCallback(() => {
+        if (!childRef.current) return;
+        const rect = childRef.current.getBoundingClientRect();
+
+        let t = 0;
+        let l = 0;
+
+        // Note: These calculations are for positioning absolute relative to document.body
+        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
+        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
+
+        if (placement === 'top') {
+            t = rect.top + scrollY - 8;
+            l = rect.left + scrollX + rect.width / 2;
+        } else if (placement === 'bottom') {
+            t = rect.bottom + scrollY + 8;
+            l = rect.left + scrollX + rect.width / 2;
+        }
+
+        setCoords({ top: t, left: l });
+    }, [placement]);
+
+    useLayoutEffect(() => {
+        if (open) {
+            updateCoords();
+            window.addEventListener('scroll', updateCoords, true);
+            window.addEventListener('resize', updateCoords);
+        }
+        return () => {
+            window.removeEventListener('scroll', updateCoords, true);
+            window.removeEventListener('resize', updateCoords);
+        };
+    }, [open, updateCoords]);
+
+    const handleMouseEnter = () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setOpen(true);
+        }, enterDelay);
+    };
+
+    const handleMouseLeave = () => {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setOpen(false);
+        }, leaveDelay);
+    };
+
+    const wrapperRef = useCallback((node: HTMLSpanElement | null) => {
+        // Use the first real child element for coordinates, not the wrapper span.
+        // display:contents would give zero rects; inline-block wrapper gives correct rects
+        // but we want coords from the actual child for pixel-perfect placement.
+        childRef.current = node ? (node.firstElementChild as HTMLElement) ?? node : null;
+    }, []);
+
+    return (
+        <>
+            <span
+                ref={wrapperRef}
+                style={{ display: 'inline-block', lineHeight: 0 }}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                {children}
+            </span>
+            {open && title && ReactDOM.createPortal(
+                <div
+                    className={`ogx-tooltip ogx-tooltip--${placement}`}
+                    style={{
+                        top: coords.top,
+                        left: coords.left,
+                        position: 'absolute',
+                        zIndex: 99999
+                    }}
+                >
+                    {title}
+                </div>,
+                document.body
+            )}
+        </>
+    );
+}