Skip to content

Commit 2fe5735

Browse files
eilifjohanseneilifjohansen
committed
La til switch i oppsummering
1 parent 975d85f commit 2fe5735

File tree

1 file changed

+101
-73
lines changed

1 file changed

+101
-73
lines changed

‎src/components/chartbuilder/Summarize.tsx

+101-73
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ const Summarize = ({
7171
show: false,
7272
message: ''
7373
});
74+
75+
// Add state for showing advanced options
76+
const [showAdvancedGrouping, setShowAdvancedGrouping] = useState<boolean>(false);
77+
const [showAdvancedCalculations, setShowAdvancedCalculations] = useState<boolean>(false);
7478

7579
// Add helper function to deduplicate parameters
7680
const getUniqueParameters = (params: Parameter[]): Parameter[] => {
@@ -280,46 +284,58 @@ const Summarize = ({
280284
</div>
281285
</div>
282286

283-
{/* Original dropdown for other groupings */}
284-
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
285-
<Select
286-
label="Eller velg en annen gruppering"
287-
description="F.eks. dato (dag, uker, måneder), enhet, nettlesertype, etc."
288-
onChange={(e) => {
289-
if (e.target.value) {
290-
addGroupByField(e.target.value);
291-
(e.target as HTMLSelectElement).value = '';
292-
}
293-
}}
294-
size="small"
295-
className="flex-grow"
296-
>
297-
<option value="">Velg gruppering...</option>
298-
{Object.entries(COLUMN_GROUPS).map(([groupKey, group]) => (
299-
<optgroup key={groupKey} label={group.label}>
300-
{group.columns
301-
.filter(col => !groupByFields.includes(col.value))
302-
.map(col => (
303-
<option key={col.value} value={col.value}>
304-
{col.label}
305-
</option>
306-
))}
307-
</optgroup>
308-
))}
309-
310-
{uniqueParameters.length > 0 && (
311-
<optgroup label="Egendefinerte">
312-
{uniqueParameters
313-
.filter(param => !groupByFields.includes(`param_${sanitizeColumnName(param.key)}`))
314-
.map(param => (
315-
<option key={`param_${param.key}`} value={`param_${sanitizeColumnName(param.key)}`}>
316-
{param.key}
317-
</option>
318-
))}
319-
</optgroup>
320-
)}
321-
</Select>
322-
</div>
287+
{/* Switch for showing advanced grouping options */}
288+
<Switch
289+
className="mt-2"
290+
size="small"
291+
checked={showAdvancedGrouping}
292+
onChange={() => setShowAdvancedGrouping(!showAdvancedGrouping)}
293+
>
294+
Vis alle grupperingsvalg
295+
</Switch>
296+
297+
{/* Original dropdown for other groupings - now conditional */}
298+
{showAdvancedGrouping && (
299+
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
300+
<Select
301+
label="Grupper etter"
302+
description="F.eks. dato (dag, uker, måneder), enhet, nettlesertype, etc."
303+
onChange={(e) => {
304+
if (e.target.value) {
305+
addGroupByField(e.target.value);
306+
(e.target as HTMLSelectElement).value = '';
307+
}
308+
}}
309+
size="small"
310+
className="flex-grow"
311+
>
312+
<option value="">Velg gruppering...</option>
313+
{Object.entries(COLUMN_GROUPS).map(([groupKey, group]) => (
314+
<optgroup key={groupKey} label={group.label}>
315+
{group.columns
316+
.filter(col => !groupByFields.includes(col.value))
317+
.map(col => (
318+
<option key={col.value} value={col.value}>
319+
{col.label}
320+
</option>
321+
))}
322+
</optgroup>
323+
))}
324+
325+
{uniqueParameters.length > 0 && (
326+
<optgroup label="Egendefinerte">
327+
{uniqueParameters
328+
.filter(param => !groupByFields.includes(`param_${sanitizeColumnName(param.key)}`))
329+
.map(param => (
330+
<option key={`param_${param.key}`} value={`param_${sanitizeColumnName(param.key)}`}>
331+
{param.key}
332+
</option>
333+
))}
334+
</optgroup>
335+
)}
336+
</Select>
337+
</div>
338+
)}
323339

324340
{groupByFields.length > 0 && (
325341
<div className="space-y-2">
@@ -455,41 +471,53 @@ const Summarize = ({
455471
</div>
456472
</div>
457473

458-
{/* Original dropdown for advanced metrics */}
459-
<div className="flex flex-col gap-2 bg-white p-3 rounded-md border">
460-
<Select
461-
label="Eller velg en annen beregning"
462-
description="F.eks. antall, andel, sum, gjennomsnitt, etc."
463-
onChange={(e) => {
464-
if (e.target.value) {
465-
// Add the metric
466-
addMetric(e.target.value);
467-
468-
// If it's a percentage metric, set default column to 'visitors' (Besøkende)
469-
if (e.target.value === 'percentage' || e.target.value === 'andel') {
470-
// Get the index of the newly added metric (it will be the last one)
471-
const newIndex = metrics.length; // This will be the index after addMetric completes
474+
{/* Switch for showing advanced calculation options */}
475+
<Switch
476+
className="mt-2"
477+
size="small"
478+
checked={showAdvancedCalculations}
479+
onChange={() => setShowAdvancedCalculations(!showAdvancedCalculations)}
480+
>
481+
Vis alle beregningsvalg
482+
</Switch>
483+
484+
{/* Original dropdown for advanced metrics - now conditional */}
485+
{showAdvancedCalculations && (
486+
<div className="flex flex-col gap-2 bg-white p-3 rounded-md border">
487+
<Select
488+
label="Målt som"
489+
description="F.eks. antall, andel, sum, gjennomsnitt, etc."
490+
onChange={(e) => {
491+
if (e.target.value) {
492+
// Add the metric
493+
addMetric(e.target.value);
494+
495+
// If it's a percentage metric, set default column to 'visitors' (Besøkende)
496+
if (e.target.value === 'percentage' || e.target.value === 'andel') {
497+
// Get the index of the newly added metric (it will be the last one)
498+
const newIndex = metrics.length; // This will be the index after addMetric completes
499+
500+
// Set timeout to let the addMetric finish processing
501+
setTimeout(() => {
502+
updateMetric(newIndex, { column: 'session_id' });
503+
}, 0);
504+
}
472505

473-
// Set timeout to let the addMetric finish processing
474-
setTimeout(() => {
475-
updateMetric(newIndex, { column: 'session_id' });
476-
}, 0);
506+
(e.target as HTMLSelectElement).value = '';
477507
}
478-
479-
(e.target as HTMLSelectElement).value = '';
480-
}
481-
}}
482-
size="small"
483-
className="w-full"
484-
>
485-
<option value="">Velg beregning...</option>
486-
{METRICS.map(metric => (
487-
<option key={metric.value} value={metric.value}>
488-
{metric.label}
489-
</option>
490-
))}
491-
</Select>
492-
</div>
508+
}}
509+
size="small"
510+
className="w-full"
511+
>
512+
<option value="">Velg beregning...</option>
513+
{METRICS.map(metric => (
514+
<option key={metric.value} value={metric.value}>
515+
{metric.label}
516+
</option>
517+
))}
518+
</Select>
519+
</div>
520+
)}
493521

494522
{metrics.map((metric, index) => (
495523
<div key={index} className="flex flex-col bg-white p-3 rounded-md border">

0 commit comments

Comments
 (0)