drizzle-cube 0.1.3 → 0.1.4

package/dist/client/providers/CubeProvider.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { CubeClient } from '../client/CubeClient';
+import { CubeQueryOptions } from '../types';
+interface CubeContextValue {
+    cubeApi: CubeClient;
+    options?: CubeQueryOptions;
+}
+interface CubeProviderProps {
+    cubeApi: CubeClient;
+    options?: CubeQueryOptions;
+    children: React.ReactNode;
+}
+export declare function CubeProvider({ cubeApi, options, children }: CubeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useCubeContext(): CubeContextValue;
+export {};

package/dist/client/styles.css

@@ -0,0 +1 @@
+.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-grid-layout{position:relative}.react-grid-item{transition:all .2s ease;transition-property:left,top}.react-grid-item.cssTransforms{transition-property:transform}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px;bottom:0;right:0;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiM0NDRDY2MiIGZpbGwtb3BhY2l0eT0iLjMiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0ibTUgNWgtNHYtNGg0eiIvPjwvZz48L3N2Zz4=);background-position:bottom right;padding:0 3px 3px 0;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;cursor:se-resize}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.drizzle-cube-portlet{background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;display:flex;flex-direction:column}.drizzle-cube-portlet-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid #e5e7eb;flex-shrink:0;background:#f9fafb;border-radius:.5rem .5rem 0 0;margin:-1px -1px 0}.drizzle-cube-portlet-drag-handle{display:flex;align-items:center;gap:.5rem;cursor:move;flex:1;min-width:0}.drizzle-cube-portlet-title{font-weight:600;font-size:.875rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.drizzle-cube-portlet-controls{display:flex;align-items:center;gap:.25rem;flex-shrink:0}.drizzle-cube-portlet-control-button{padding:.25rem;background:transparent;border:none;border-radius:.25rem;color:#6b7280;cursor:pointer;transition:background-color .15s ease-in-out}.drizzle-cube-portlet-control-button:hover{background:#e5e7eb}.drizzle-cube-portlet-content{padding:.75rem;flex:1;min-height:0;display:flex;flex-direction:column}.drizzle-cube-spinner{border:2px solid #f3f4f6;border-top:2px solid #3b82f6;border-radius:50%;width:2rem;height:2rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drizzle-cube-error{color:#dc2626;text-align:center;padding:1rem}.drizzle-cube-empty-state{color:#6b7280;text-align:center;padding:2rem}.drizzle-cube-modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem}.drizzle-cube-modal{background:#fff;border-radius:.5rem;box-shadow:0 25px 50px -12px #00000040;max-height:90vh;max-width:90vw;width:100%;display:flex;flex-direction:column;overflow:hidden;padding:1.5rem}.drizzle-cube-modal-sm{max-width:24rem}.drizzle-cube-modal-md{max-width:42rem}.drizzle-cube-modal-lg{max-width:56rem}.drizzle-cube-modal-xl{max-width:72rem}.drizzle-cube-modal-full{max-width:none;width:100%;height:100%;max-height:none}.drizzle-cube-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-shrink:0}.drizzle-cube-modal-title{font-weight:600;font-size:1.25rem;margin:0;color:#111827}.drizzle-cube-modal-close{background:transparent;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;border-radius:.25rem;transition:color .15s ease-in-out}.drizzle-cube-modal-close:hover{color:#4b5563}.drizzle-cube-modal-content{flex:1;overflow-y:auto}.drizzle-cube-modal-footer{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;flex-shrink:0}.drizzle-cube-portlet-content>div{flex:1;min-height:0}@media (max-width: 768px){.drizzle-cube-portlet-header,.drizzle-cube-portlet-content{padding:.5rem}.drizzle-cube-portlet-title{font-size:.8125rem}.drizzle-cube-modal-backdrop{padding:.5rem}.drizzle-cube-modal{padding:1rem}}

package/dist/client/types.d.ts

@@ -0,0 +1,111 @@
+/**
+ * Type definitions for drizzle-cube client components
+ */
+export type ChartType = 'line' | 'bar' | 'pie' | 'table' | 'area' | 'scatter' | 'radar' | 'radialBar' | 'treemap';
+export interface ChartAxisConfig {
+    xAxis?: string[];
+    yAxis?: string[];
+    series?: string[];
+    x?: string;
+    y?: string[];
+}
+export interface ChartDisplayConfig {
+    showLegend?: boolean;
+    showGrid?: boolean;
+    showTooltip?: boolean;
+    colors?: string[];
+    orientation?: 'horizontal' | 'vertical';
+    stacked?: boolean;
+    stackedBarChart?: boolean;
+}
+export interface PortletConfig {
+    id: string;
+    title: string;
+    query: string;
+    chartType: ChartType;
+    chartConfig?: ChartAxisConfig;
+    displayConfig?: ChartDisplayConfig;
+    w: number;
+    h: number;
+    x: number;
+    y: number;
+}
+export interface DashboardConfig {
+    portlets: PortletConfig[];
+    layouts?: {
+        [key: string]: any;
+    };
+}
+export interface CubeQuery {
+    measures?: string[];
+    dimensions?: string[];
+    timeDimensions?: Array<{
+        dimension: string;
+        granularity?: string;
+        dateRange?: string[] | string;
+    }>;
+    filters?: Array<{
+        member: string;
+        operator: string;
+        values: any[];
+    }>;
+    order?: {
+        [key: string]: 'asc' | 'desc';
+    };
+    limit?: number;
+    offset?: number;
+    segments?: string[];
+}
+export interface CubeQueryOptions {
+    skip?: boolean;
+    resetResultSetOnChange?: boolean;
+    subscribe?: boolean;
+}
+export interface CubeApiOptions {
+    apiUrl?: string;
+    token?: string;
+    headers?: Record<string, string>;
+}
+export interface CubeResultSet {
+    rawData(): any[];
+    tablePivot(): any[];
+    series(): any[];
+    annotation(): any;
+    loadResponse?: any;
+}
+export interface AnalyticsPortletProps {
+    query: string;
+    chartType: ChartType;
+    chartConfig?: ChartAxisConfig;
+    displayConfig?: ChartDisplayConfig;
+    height?: string | number;
+    title?: string;
+}
+export interface AnalyticsDashboardProps {
+    config: DashboardConfig;
+    apiUrl?: string;
+    apiOptions?: CubeApiOptions;
+    editable?: boolean;
+    onConfigChange?: (config: DashboardConfig) => void;
+    onSave?: (config: DashboardConfig) => Promise<void> | void;
+    onDirtyStateChange?: (isDirty: boolean) => void;
+}
+export interface ChartProps {
+    data: any[];
+    chartConfig?: ChartAxisConfig;
+    displayConfig?: ChartDisplayConfig;
+    queryObject?: CubeQuery;
+    height?: string | number;
+}
+export interface GridLayout {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW?: number;
+    minH?: number;
+}
+export interface ResponsiveLayout {
+    [breakpoint: string]: GridLayout[];
+}

package/dist/client/utils/chartConstants.d.ts

@@ -0,0 +1,15 @@
+export declare const CHART_COLORS: string[];
+export declare const POSITIVE_COLOR = "#10b981";
+export declare const NEGATIVE_COLOR = "#ef4444";
+export declare const CHART_MARGINS: {
+    top: number;
+    right: number;
+    left: number;
+    bottom: number;
+};
+export declare const RESPONSIVE_CHART_MARGINS: {
+    top: number;
+    right: number;
+    left: number;
+    bottom: number;
+};

package/dist/client/utils/chartUtils.d.ts

@@ -0,0 +1,9 @@
+export declare function formatTimeValue(value: any, granularity?: string): string;
+export declare function getFieldGranularity(queryObject: any, fieldName: string): string | undefined;
+export declare function transformChartData(data: any[], xAxisField: string, yAxisFields: string[], queryObject: any): any[];
+export interface ChartSeriesResult {
+    data: any[];
+    seriesKeys: string[];
+    hasDimensions: boolean;
+}
+export declare function transformChartDataWithSeries(data: any[], xAxisField: string, yAxisFields: string[], queryObject: any, seriesFields?: string[]): ChartSeriesResult;

package/dist/client/utils/index.d.ts

@@ -0,0 +1,87 @@
+import { PortletConfig, DashboardConfig } from '../types';
+export * from './chartUtils';
+export * from './chartConstants';
+/**
+ * Create a dashboard layout from portlet configurations
+ */
+export declare function createDashboardLayout(portlets: PortletConfig[]): DashboardConfig;
+/**
+ * Generate responsive layouts for different breakpoints
+ */
+export declare function generateResponsiveLayouts(portlets: PortletConfig[]): {
+    lg: {
+        i: string;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        minW: number;
+        minH: number;
+    }[];
+    md: {
+        w: number;
+        i: string;
+        x: number;
+        y: number;
+        h: number;
+        minW: number;
+        minH: number;
+    }[];
+    sm: {
+        w: number;
+        i: string;
+        x: number;
+        y: number;
+        h: number;
+        minW: number;
+        minH: number;
+    }[];
+    xs: {
+        w: number;
+        i: string;
+        x: number;
+        y: number;
+        h: number;
+        minW: number;
+        minH: number;
+    }[];
+    xxs: {
+        w: number;
+        i: string;
+        x: number;
+        y: number;
+        h: number;
+        minW: number;
+        minH: number;
+    }[];
+};
+/**
+ * Format chart data for display
+ */
+export declare function formatChartData(data: any[], options?: {
+    formatNumbers?: boolean;
+    precision?: number;
+}): any[];
+/**
+ * Generate a unique ID for new portlets
+ */
+export declare function generatePortletId(): string;
+/**
+ * Find the next available position in a grid
+ */
+export declare function findNextPosition(existingPortlets: PortletConfig[], _w?: number, _h?: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Validate a cube query JSON string
+ */
+export declare function validateCubeQuery(queryString: string): {
+    valid: boolean;
+    error?: string;
+    query?: any;
+};
+/**
+ * Create a sample portlet configuration
+ */
+export declare function createSamplePortlet(): Omit<PortletConfig, 'id'>;