@smallwebco/tinypivot-react 1.0.79 → 1.0.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +91 -1
  2. package/dist/index.cjs +14 -9
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +7 -5
  5. package/dist/index.d.ts +7 -5
  6. package/dist/index.js +14 -9
  7. package/dist/index.js.map +1 -1
  8. package/dist/style.css +727 -900
  9. package/package.json +2 -2
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
2
- import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
2
+ import { AIAnalystConfig, ResolvedTheme, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, Theme, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
3
3
  export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
4
4
  import * as react from 'react';
5
5
  import react__default from 'react';
@@ -15,7 +15,7 @@ import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/rea
15
15
 
16
16
  interface AIAnalystProps {
17
17
  config: AIAnalystConfig;
18
- theme?: 'light' | 'dark';
18
+ theme?: ResolvedTheme;
19
19
  onDataLoaded?: (payload: AIDataLoadedEvent) => void;
20
20
  onConversationUpdate?: (payload: AIConversationUpdateEvent) => void;
21
21
  onQueryExecuted?: (payload: AIQueryExecutedEvent) => void;
@@ -68,7 +68,7 @@ interface DataGridProps {
68
68
  pageSize?: number;
69
69
  enableColumnResize?: boolean;
70
70
  enableClipboard?: boolean;
71
- theme?: 'light' | 'dark' | 'auto';
71
+ theme?: Theme;
72
72
  stripedRows?: boolean;
73
73
  exportFilename?: string;
74
74
  enableVerticalResize?: boolean;
@@ -135,8 +135,9 @@ interface PivotConfigProps {
135
135
  onAddCalculatedField?: (field: CalculatedField) => void;
136
136
  onRemoveCalculatedField?: (id: string) => void;
137
137
  onUpdateCalculatedField?: (field: CalculatedField) => void;
138
+ theme?: string;
138
139
  }
139
- declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
140
+ declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, theme, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
140
141
 
141
142
  interface ActiveFilter {
142
143
  column: string;
@@ -166,8 +167,9 @@ interface PivotSkeletonProps {
166
167
  onUpdateAggregation: (field: string, oldAgg: AggregationFunction, newAgg: AggregationFunction) => void;
167
168
  onReorderRowFields: (fields: string[]) => void;
168
169
  onReorderColumnFields: (fields: string[]) => void;
170
+ theme?: string;
169
171
  }
170
- declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
172
+ declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, theme, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
171
173
 
172
174
  interface UseAIAnalystOptions {
173
175
  config: AIAnalystConfig;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as _smallwebco_tinypivot_core from '@smallwebco/tinypivot-core';
2
- import { AIAnalystConfig, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
2
+ import { AIAnalystConfig, ResolvedTheme, AIDataLoadedEvent, AIConversationUpdateEvent, AIQueryExecutedEvent, AIErrorEvent, ColumnStats, NumericRange, DateRange, NumberFormat, DateFormat, Theme, FieldStats, PivotValueField, CalculatedField, AggregationFunction, PivotResult, AIConversation, AITableSchema, AIDataSource, PivotExportData, ExportOptions, SelectionBounds, PaginationOptions, LicenseInfo } from '@smallwebco/tinypivot-core';
3
3
  export { AIAnalystConfig, AIColumnSchema, AIConversation, AIConversationUpdateEvent, AIDataLoadedEvent, AIDataSource, AIErrorEvent, AIMessage, AIMessageMetadata, AIQueryExecutedEvent, AITableSchema, AggregationFunction, CellClickEvent, ColumnStats, CopyEvent, DataGridProps, ExportEvent, ExportOptions, FieldStats, FilterEvent, GridOptions, LicenseInfo, LicenseType, PaginationOptions, PivotCell, PivotConfig as PivotConfigType, PivotField, PivotResult, PivotTableProps, PivotValueField, RowSelectionChangeEvent, SelectionBounds, SelectionChangeEvent, SortEvent, formatCellValue, getAggregationLabel, getColumnUniqueValues } from '@smallwebco/tinypivot-core';
4
4
  import * as react from 'react';
5
5
  import react__default from 'react';
@@ -15,7 +15,7 @@ import { SortingState, ColumnFiltersState, VisibilityState } from '@tanstack/rea
15
15
 
16
16
  interface AIAnalystProps {
17
17
  config: AIAnalystConfig;
18
- theme?: 'light' | 'dark';
18
+ theme?: ResolvedTheme;
19
19
  onDataLoaded?: (payload: AIDataLoadedEvent) => void;
20
20
  onConversationUpdate?: (payload: AIConversationUpdateEvent) => void;
21
21
  onQueryExecuted?: (payload: AIQueryExecutedEvent) => void;
@@ -68,7 +68,7 @@ interface DataGridProps {
68
68
  pageSize?: number;
69
69
  enableColumnResize?: boolean;
70
70
  enableClipboard?: boolean;
71
- theme?: 'light' | 'dark' | 'auto';
71
+ theme?: Theme;
72
72
  stripedRows?: boolean;
73
73
  exportFilename?: string;
74
74
  enableVerticalResize?: boolean;
@@ -135,8 +135,9 @@ interface PivotConfigProps {
135
135
  onAddCalculatedField?: (field: CalculatedField) => void;
136
136
  onRemoveCalculatedField?: (id: string) => void;
137
137
  onUpdateCalculatedField?: (field: CalculatedField) => void;
138
+ theme?: string;
138
139
  }
139
- declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
140
+ declare function PivotConfig({ availableFields, rowFields, columnFields, valueFields, showRowTotals, calculatedFields, onShowRowTotalsChange, onShowColumnTotalsChange, onClearConfig, onAutoSuggest, onDragStart, onDragEnd, onUpdateAggregation, onRemoveRowField, onRemoveColumnField, onRemoveValueField, onAddRowField, onAddColumnField, onAddCalculatedField, onRemoveCalculatedField, onUpdateCalculatedField, theme, }: PivotConfigProps): react_jsx_runtime.JSX.Element;
140
141
 
141
142
  interface ActiveFilter {
142
143
  column: string;
@@ -166,8 +167,9 @@ interface PivotSkeletonProps {
166
167
  onUpdateAggregation: (field: string, oldAgg: AggregationFunction, newAgg: AggregationFunction) => void;
167
168
  onReorderRowFields: (fields: string[]) => void;
168
169
  onReorderColumnFields: (fields: string[]) => void;
170
+ theme?: string;
169
171
  }
170
- declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
172
+ declare function PivotSkeleton({ rowFields, columnFields, valueFields, calculatedFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, theme, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
171
173
 
172
174
  interface UseAIAnalystOptions {
173
175
  config: AIAnalystConfig;
package/dist/index.js CHANGED
@@ -789,6 +789,7 @@ var AIAnalyst = forwardRef(({
789
789
  onQueryExecuted,
790
790
  onError
791
791
  });
792
+ const isDarkTheme = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
792
793
  useImperativeHandle(ref, () => ({
793
794
  loadFullData,
794
795
  selectedDataSource
@@ -950,7 +951,7 @@ var AIAnalyst = forwardRef(({
950
951
  return !!message.metadata?.data && message.metadata.data.length > 0;
951
952
  };
952
953
  if (!selectedDataSource) {
953
- return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-content", children: [
954
+ return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsx("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-content", children: [
954
955
  /* @__PURE__ */ jsxs("div", { className: "vpg-ai-picker-header", children: [
955
956
  /* @__PURE__ */ jsx("div", { className: "vpg-ai-icon-lg", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
956
957
  /* @__PURE__ */ jsx("path", { d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }),
@@ -1022,7 +1023,7 @@ var AIAnalyst = forwardRef(({
1022
1023
  ] })
1023
1024
  ] }) }) });
1024
1025
  }
1025
- return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-split-layout", children: [
1026
+ return /* @__PURE__ */ jsx("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "vpg-ai-split-layout", children: [
1026
1027
  /* @__PURE__ */ jsxs("div", { className: "vpg-ai-chat-panel", children: [
1027
1028
  /* @__PURE__ */ jsxs("div", { className: "vpg-ai-chat-header", children: [
1028
1029
  /* @__PURE__ */ jsx(
@@ -1764,7 +1765,7 @@ function ChartBuilder({
1764
1765
  return val.toFixed(dec);
1765
1766
  }, []);
1766
1767
  const chartOptions = useMemo4(() => {
1767
- const isDark = theme === "dark";
1768
+ const isDark = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
1768
1769
  const config = chartConfig;
1769
1770
  const options = config.options || {};
1770
1771
  const baseOptions = {
@@ -3886,7 +3887,8 @@ function PivotConfig({
3886
3887
  onAddColumnField,
3887
3888
  onAddCalculatedField,
3888
3889
  onRemoveCalculatedField,
3889
- onUpdateCalculatedField
3890
+ onUpdateCalculatedField,
3891
+ theme
3890
3892
  }) {
3891
3893
  const [fieldSearch, setFieldSearch] = useState12("");
3892
3894
  const [showCalcModal, setShowCalcModal] = useState12(false);
@@ -4012,7 +4014,7 @@ function PivotConfig({
4012
4014
  setShowCalcModal(false);
4013
4015
  setEditingCalcField(null);
4014
4016
  }, []);
4015
- return /* @__PURE__ */ jsxs7("div", { className: "vpg-pivot-config", children: [
4017
+ return /* @__PURE__ */ jsxs7("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
4016
4018
  /* @__PURE__ */ jsxs7("div", { className: "vpg-config-header", children: [
4017
4019
  /* @__PURE__ */ jsxs7("h3", { className: "vpg-config-title", children: [
4018
4020
  /* @__PURE__ */ jsx7("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx7(
@@ -4280,7 +4282,8 @@ function PivotSkeleton({
4280
4282
  onAddValueField,
4281
4283
  onRemoveValueField,
4282
4284
  onReorderRowFields,
4283
- onReorderColumnFields
4285
+ onReorderColumnFields,
4286
+ theme
4284
4287
  }) {
4285
4288
  const { showWatermark, canUsePivot, isDemo } = useLicense();
4286
4289
  const getValueFieldDisplayName = useCallback13((field) => {
@@ -4646,7 +4649,7 @@ function PivotSkeleton({
4646
4649
  return /* @__PURE__ */ jsxs8(
4647
4650
  "div",
4648
4651
  {
4649
- className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
4652
+ className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${theme ? `vpg-theme-${theme}` : ""} ${draggingField ? "vpg-is-dragging" : ""}`,
4650
4653
  children: [
4651
4654
  showCopyToast && /* @__PURE__ */ jsxs8("div", { className: "vpg-toast", children: [
4652
4655
  /* @__PURE__ */ jsx8("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -6197,7 +6200,8 @@ function DataGrid({
6197
6200
  onRemoveValueField: removeValueField,
6198
6201
  onAddCalculatedField: addCalculatedField,
6199
6202
  onRemoveCalculatedField: removeCalculatedField,
6200
- onUpdateCalculatedField: addCalculatedField
6203
+ onUpdateCalculatedField: addCalculatedField,
6204
+ theme: currentTheme
6201
6205
  }
6202
6206
  ) }),
6203
6207
  /* @__PURE__ */ jsx9("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ jsx9(
@@ -6222,7 +6226,8 @@ function DataGrid({
6222
6226
  onRemoveValueField: removeValueField,
6223
6227
  onUpdateAggregation: updateValueFieldAggregation,
6224
6228
  onReorderRowFields: setRowFields,
6225
- onReorderColumnFields: setColumnFields
6229
+ onReorderColumnFields: setColumnFields,
6230
+ theme: currentTheme
6226
6231
  }
6227
6232
  ) })
6228
6233
  ] }),