Skip to content

Commit c368d19

Browse files
author
Dylan Huang
committed
vite build / fix warnings
1 parent 2aee4bb commit c368d19

File tree

9 files changed

+296
-165
lines changed

9 files changed

+296
-165
lines changed

vite-app/dist/assets/index-Dc1lntzy.js renamed to vite-app/dist/assets/index-C2gwzPFv.js

Lines changed: 28 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vite-app/dist/assets/index-C2gwzPFv.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vite-app/dist/assets/index-Dc1lntzy.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

vite-app/dist/assets/index-CvsKHhRd.css renamed to vite-app/dist/assets/index-SA8VJz3D.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vite-app/dist/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>EP | Log Viewer</title>
77
<link rel="icon" href="/assets/favicon-BkAAWQga.png" />
8-
<script type="module" crossorigin src="/assets/index-Dc1lntzy.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-CvsKHhRd.css">
8+
<script type="module" crossorigin src="/assets/index-C2gwzPFv.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-SA8VJz3D.css">
1010
</head>
1111
<body>
1212
<div id="root"></div>
1313
</body>
14-
</html>
14+
</html>

‎vite-app/src/components/ChartExport.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useCallback, useState } from "react";
1+
import { useRef, useCallback, useState } from "react";
22
import { Chart as ChartJS, registerables } from "chart.js";
33
import { Chart } from "react-chartjs-2";
44
import html2canvas from "html2canvas-oklch";
@@ -160,10 +160,6 @@ const ChartExport = <T extends Record<string, unknown>>({
160160

161161
const chartData = getChartData();
162162

163-
// Debug logging
164-
console.log("Chart data:", chartData);
165-
console.log("Chart type:", selectedChartType);
166-
167163
// Don't render chart if no data
168164
if (!chartData.labels.length || !chartData.datasets.length) {
169165
return (

‎vite-app/src/components/PivotTab.tsx‎

Lines changed: 54 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,19 @@ import ChartExport from "./ChartExport";
44
import SearchableSelect from "./SearchableSelect";
55
import Button from "./Button";
66
import FilterSelector from "./FilterSelector";
7-
import { state } from "../App";
87
import { type FilterGroup } from "../types/filters";
9-
import { createFilterFunction } from "../util/filter-utils";
10-
import { computePivot } from "../util/pivot";
8+
import { usePivotData } from "../hooks/usePivotData";
9+
import {
10+
createFieldHandlerSet,
11+
getAvailableKeys,
12+
getPivotConfig,
13+
updatePivotConfig,
14+
resetPivotConfig,
15+
updateFilterConfig,
16+
getFlattenedDataset,
17+
createFilterFunction,
18+
getFilterConfig,
19+
} from "../util/field-processors";
1120

1221
interface FieldSelectorProps {
1322
title: string;
@@ -127,62 +136,36 @@ const AggregatorSelector = ({
127136
);
128137

129138
const PivotTab = observer(() => {
130-
const { pivotConfig } = state;
139+
const pivotConfig = getPivotConfig();
140+
const availableKeys = getAvailableKeys();
131141

132-
const updateRowFields = (index: number, value: string) => {
133-
const newRowFields = [...pivotConfig.selectedRowFields];
134-
newRowFields[index] = value;
135-
state.updatePivotConfig({ selectedRowFields: newRowFields });
136-
};
137-
138-
const updateColumnFields = (index: number, value: string) => {
139-
const newColumnFields = [...pivotConfig.selectedColumnFields];
140-
newColumnFields[index] = value;
141-
state.updatePivotConfig({ selectedColumnFields: newColumnFields });
142-
};
142+
// Use the pivot data hook
143+
const pivotData = usePivotData({
144+
rowFields: pivotConfig.selectedRowFields,
145+
columnFields: pivotConfig.selectedColumnFields,
146+
valueField: pivotConfig.selectedValueField,
147+
aggregator: pivotConfig.selectedAggregator as
148+
| "count"
149+
| "sum"
150+
| "avg"
151+
| "min"
152+
| "max",
153+
showRowTotals: true,
154+
showColumnTotals: true,
155+
});
143156

144157
const updateValueField = (value: string) => {
145-
state.updatePivotConfig({ selectedValueField: value });
158+
updatePivotConfig({ selectedValueField: value });
146159
};
147160

148161
const updateAggregator = (value: string) => {
149-
state.updatePivotConfig({ selectedAggregator: value });
162+
updatePivotConfig({ selectedAggregator: value });
150163
};
151164

152165
const updateFilters = (filters: FilterGroup[]) => {
153-
state.updateFilterConfig(filters);
154-
};
155-
156-
const createFieldHandler = (
157-
updater: (index: number, value: string) => void
158-
) => {
159-
return (index: number, value: string) => {
160-
updater(index, value);
161-
};
162-
};
163-
164-
const createAddHandler = (
165-
fields: string[],
166-
updater: (fields: string[]) => void
167-
) => {
168-
return () => {
169-
if (fields.length < 3) {
170-
updater([...fields, ""]);
171-
}
172-
};
166+
updateFilterConfig(filters);
173167
};
174168

175-
const createRemoveHandler = (
176-
fields: string[],
177-
updater: (fields: string[]) => void
178-
) => {
179-
return (index: number) => {
180-
updater(fields.filter((_, i) => i !== index));
181-
};
182-
};
183-
184-
const availableKeys = state.flattenedDatasetKeys;
185-
186169
return (
187170
<div>
188171
<div className="text-xs text-gray-600 mb-2 max-w-2xl">
@@ -196,7 +179,7 @@ const PivotTab = observer(() => {
196179
{/* Controls Section with Reset Button */}
197180
<div className="mb-4 flex justify-between items-center">
198181
<Button
199-
onClick={() => state.resetPivotConfig()}
182+
onClick={() => resetPivotConfig()}
200183
variant="secondary"
201184
size="sm"
202185
>
@@ -207,13 +190,8 @@ const PivotTab = observer(() => {
207190
<FieldSelector
208191
title="Row Fields"
209192
fields={pivotConfig.selectedRowFields}
210-
onFieldChange={createFieldHandler(updateRowFields)}
211-
onAddField={createAddHandler(pivotConfig.selectedRowFields, (fields) =>
212-
state.updatePivotConfig({ selectedRowFields: fields })
213-
)}
214-
onRemoveField={createRemoveHandler(
215-
pivotConfig.selectedRowFields,
216-
(fields) => state.updatePivotConfig({ selectedRowFields: fields })
193+
{...createFieldHandlerSet(pivotConfig.selectedRowFields, (fields) =>
194+
updatePivotConfig({ selectedRowFields: fields })
217195
)}
218196
availableKeys={availableKeys}
219197
variant="row"
@@ -222,14 +200,8 @@ const PivotTab = observer(() => {
222200
<FieldSelector
223201
title="Column Fields"
224202
fields={pivotConfig.selectedColumnFields}
225-
onFieldChange={createFieldHandler(updateColumnFields)}
226-
onAddField={createAddHandler(
227-
pivotConfig.selectedColumnFields,
228-
(fields) => state.updatePivotConfig({ selectedColumnFields: fields })
229-
)}
230-
onRemoveField={createRemoveHandler(
231-
pivotConfig.selectedColumnFields,
232-
(fields) => state.updatePivotConfig({ selectedColumnFields: fields })
203+
{...createFieldHandlerSet(pivotConfig.selectedColumnFields, (fields) =>
204+
updatePivotConfig({ selectedColumnFields: fields })
233205
)}
234206
availableKeys={availableKeys}
235207
variant="column"
@@ -248,7 +220,7 @@ const PivotTab = observer(() => {
248220
/>
249221

250222
<FilterSelector
251-
filters={state.filterConfig}
223+
filters={getFilterConfig()}
252224
onFiltersChange={updateFilters}
253225
availableKeys={availableKeys}
254226
title="Filters"
@@ -265,72 +237,27 @@ const PivotTab = observer(() => {
265237
*/}
266238

267239
{/* Chart Export Component */}
268-
{pivotConfig.selectedRowFields.some((field) => field !== "") &&
269-
pivotConfig.selectedColumnFields.some((field) => field !== "") && (
270-
<ChartExport
271-
pivotData={computePivot({
272-
data: state.flattenedDataset,
273-
rowFields: pivotConfig.selectedRowFields.filter(
274-
(field) => field !== ""
275-
) as (keyof (typeof state.flattenedDataset)[number])[],
276-
columnFields: pivotConfig.selectedColumnFields.filter(
277-
(field) => field !== ""
278-
) as (keyof (typeof state.flattenedDataset)[number])[],
279-
valueField:
280-
pivotConfig.selectedValueField as keyof (typeof state.flattenedDataset)[number],
281-
aggregator: pivotConfig.selectedAggregator as
282-
| "count"
283-
| "sum"
284-
| "avg"
285-
| "min"
286-
| "max",
287-
filter: createFilterFunction(state.filterConfig),
288-
})}
289-
rowFields={
290-
pivotConfig.selectedRowFields.filter(
291-
(field) => field !== ""
292-
) as (keyof (typeof state.flattenedDataset)[number])[]
293-
}
294-
columnFields={
295-
pivotConfig.selectedColumnFields.filter(
296-
(field) => field !== ""
297-
) as (keyof (typeof state.flattenedDataset)[number])[]
298-
}
299-
valueField={
300-
pivotConfig.selectedValueField as keyof (typeof state.flattenedDataset)[number]
301-
}
302-
aggregator={pivotConfig.selectedAggregator}
303-
showRowTotals
304-
showColumnTotals
305-
/>
306-
)}
240+
{pivotData.hasValidConfiguration && (
241+
<ChartExport
242+
pivotData={pivotData.pivotResult}
243+
rowFields={pivotData.rowFields}
244+
columnFields={pivotData.columnFields}
245+
valueField={pivotData.valueField}
246+
aggregator={pivotData.aggregator}
247+
showRowTotals
248+
showColumnTotals
249+
/>
250+
)}
307251

308252
<PivotTable
309-
data={state.flattenedDataset}
310-
rowFields={
311-
pivotConfig.selectedRowFields.filter(
312-
(field) => field !== ""
313-
) as (keyof (typeof state.flattenedDataset)[number])[]
314-
}
315-
columnFields={
316-
pivotConfig.selectedColumnFields.filter(
317-
(field) => field !== ""
318-
) as (keyof (typeof state.flattenedDataset)[number])[]
319-
}
320-
valueField={
321-
pivotConfig.selectedValueField as keyof (typeof state.flattenedDataset)[number]
322-
}
323-
aggregator={
324-
pivotConfig.selectedAggregator as
325-
| "count"
326-
| "sum"
327-
| "avg"
328-
| "min"
329-
| "max"
330-
}
253+
data={getFlattenedDataset()}
254+
rowFields={pivotData.rowFields}
255+
columnFields={pivotData.columnFields}
256+
valueField={pivotData.valueField}
257+
aggregator={pivotData.aggregator}
331258
showRowTotals
332259
showColumnTotals
333-
filter={createFilterFunction(state.filterConfig)}
260+
filter={createFilterFunction()}
334261
/>
335262
</div>
336263
);

‎vite-app/src/hooks/usePivotData.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { useMemo } from 'react';
2+
import { computePivot } from '../util/pivot';
3+
import { createFilterFunction } from '../util/filter-utils';
4+
import { state } from '../App';
5+
6+
export interface PivotDataConfig {
7+
rowFields: string[];
8+
columnFields: string[];
9+
valueField?: string;
10+
aggregator: 'count' | 'sum' | 'avg' | 'min' | 'max';
11+
showRowTotals?: boolean;
12+
showColumnTotals?: boolean;
13+
}
14+
15+
export interface ProcessedPivotData {
16+
rowFields: string[];
17+
columnFields: string[];
18+
valueField?: string;
19+
aggregator: 'count' | 'sum' | 'avg' | 'min' | 'max';
20+
pivotResult: ReturnType<typeof computePivot<any>>;
21+
hasValidConfiguration: boolean;
22+
}
23+
24+
/**
25+
* Custom hook that processes pivot configuration and computes pivot data
26+
* Centralizes all pivot-related logic to avoid duplication
27+
*/
28+
export function usePivotData(
29+
config: PivotDataConfig
30+
): ProcessedPivotData {
31+
const { rowFields, columnFields, valueField, aggregator, showRowTotals = true, showColumnTotals = true } = config;
32+
33+
// Filter out empty fields and cast to proper types
34+
const processedRowFields = useMemo(
35+
() => rowFields.filter((field) => field !== '') as string[],
36+
[rowFields]
37+
);
38+
39+
const processedColumnFields = useMemo(
40+
() => columnFields.filter((field) => field !== '') as string[],
41+
[columnFields]
42+
);
43+
44+
const processedValueField = useMemo(
45+
() => (valueField && valueField !== '' ? valueField : undefined) as string | undefined,
46+
[valueField]
47+
);
48+
49+
// Check if we have a valid configuration for pivot computation
50+
const hasValidConfiguration = useMemo(
51+
() => processedRowFields.length > 0 && processedColumnFields.length > 0,
52+
[processedRowFields, processedColumnFields]
53+
);
54+
55+
// Compute pivot data only when configuration is valid
56+
const pivotResult = useMemo(() => {
57+
if (!hasValidConfiguration) {
58+
// Return empty pivot result structure
59+
return {
60+
rowKeyTuples: [],
61+
colKeyTuples: [],
62+
cells: {},
63+
rowTotals: {},
64+
colTotals: {},
65+
grandTotal: 0,
66+
} as ReturnType<typeof computePivot<any>>;
67+
}
68+
69+
return computePivot<any>({
70+
data: state.flattenedDataset,
71+
rowFields: processedRowFields,
72+
columnFields: processedColumnFields,
73+
valueField: processedValueField,
74+
aggregator,
75+
filter: createFilterFunction(state.filterConfig),
76+
});
77+
}, [hasValidConfiguration, processedRowFields, processedColumnFields, processedValueField, aggregator]);
78+
79+
return {
80+
rowFields: processedRowFields,
81+
columnFields: processedColumnFields,
82+
valueField: processedValueField,
83+
aggregator,
84+
pivotResult,
85+
hasValidConfiguration,
86+
};
87+
}

0 commit comments

Comments
 (0)