Skip to content

Commit 9f0c91e

Browse files
eilifjohanseneilifjohansen
committed
La til helptext
1 parent e89c912 commit 9f0c91e

File tree

2 files changed

+80
-69
lines changed

2 files changed

+80
-69
lines changed

‎src/components/chartbuilder/Summarize.tsx

+79-68
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Heading, Select, Label, TextField, UNSAFE_Combobox, Switch } from '@navikt/ds-react';
1+
import { Button, Heading, Select, Label, TextField, UNSAFE_Combobox, Switch, HelpText } from '@navikt/ds-react';
22
import { MoveUp, MoveDown } from 'lucide-react';
33
import { useState } from 'react'; // Add useState
44
import {
@@ -179,13 +179,16 @@ const Summarize = ({
179179
</div>
180180
)}
181181

182-
{/* Group By section - remove the reset button here */}
183-
<Heading level="3" size="xsmall" spacing>
182+
{/* Group By section */}
183+
184+
<div className="flex items-center gap-2 mb-4">
185+
<Heading level="3" size="xsmall" >
184186
Gruppering
185187
</Heading>
186-
<p className="text-sm text-gray-600 mb-4">
188+
<HelpText title="Hva er en gruppering?">
187189
Legg til en eller flere grupperinger, disse vises som kolonner i tabeller.
188-
</p>
190+
</HelpText>
191+
</div>
189192

190193
<div className="space-y-4 mb-6">
191194
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
@@ -315,12 +318,14 @@ const Summarize = ({
315318

316319
{/* Metrics section */}
317320
<div className="border-t pt-4">
318-
<Heading level="3" size="xsmall" spacing>
321+
<div className="flex items-center gap-2 mb-4">
322+
<Heading level="3" size="xsmall" >
319323
Beregninger
320324
</Heading>
321-
<p className="text-sm text-gray-600 mb-4">
325+
<HelpText title="Hva er en beregning?">
322326
Legg til en eller flere beregninger, disse vises som kolonner i tabeller.
323-
</p>
327+
</HelpText>
328+
</div>
324329

325330
<div className="space-y-4 mb-6">
326331
{/* Move dropdown to the top */}
@@ -583,58 +588,62 @@ const Summarize = ({
583588
{/* Order By section */}
584589
<div className="border-t pt-4">
585590
<Heading level="3" size="xsmall" spacing>
586-
Sortering
591+
Visning
587592
</Heading>
588-
{!orderBy && (
589-
<p className="text-sm text-gray-600 mb-4">
590-
Standard sorterer etter første kolonne i synkende rekkefølge.
591-
</p>
592-
)}
593-
594-
<div className="mb-6 space-y-4">
595-
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
596-
<Select
597-
label="Sorter etter"
598-
value={orderBy?.column || ""}
599-
onChange={(e) => {
600-
if (e.target.value) {
601-
// Use ascending order for dates, descending for other metrics
602-
const direction = e.target.value === 'dato' ? 'ASC' : 'DESC';
603-
setOrderBy(e.target.value, direction);
604-
} else {
605-
clearOrderBy();
606-
}
607-
}}
608-
size="small"
609-
className="flex-grow"
610-
>
611-
<option value="">Standard sortering</option>
612-
<optgroup label="Grupperinger">
613-
{groupByFields.map((field) => {
614-
const column = Object.values(COLUMN_GROUPS)
615-
.flatMap(group => group.columns)
616-
.find(col => col.value === field);
617-
618-
return (
619-
<option key={field} value={field === 'created_at' ? 'dato' : field}>
620-
{field === "created_at" ? "Dato" : column?.label || field}
593+
<div className="flex flex-col gap-4 pb-4">
594+
<Switch
595+
className="mt-1"
596+
size="small"
597+
checked={orderBy !== null}
598+
onChange={() => orderBy ? clearOrderBy() : setOrderBy('dato', 'DESC')}
599+
>
600+
Tilpass sortering
601+
</Switch>
602+
603+
{orderBy && (
604+
<>
605+
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
606+
<Select
607+
label="Sorter etter"
608+
value={orderBy?.column || ""}
609+
onChange={(e) => {
610+
if (e.target.value) {
611+
// Use ascending order for dates, descending for other metrics
612+
const direction = e.target.value === 'dato' ? 'ASC' : 'DESC';
613+
setOrderBy(e.target.value, direction);
614+
} else {
615+
clearOrderBy();
616+
}
617+
}}
618+
size="small"
619+
className="flex-grow"
620+
>
621+
<option value="">Standard sortering</option>
622+
<optgroup label="Grupperinger">
623+
{groupByFields.map((field) => {
624+
const column = Object.values(COLUMN_GROUPS)
625+
.flatMap(group => group.columns)
626+
.find(col => col.value === field);
627+
628+
return (
629+
<option key={field} value={field === 'created_at' ? 'dato' : field}>
630+
{field === "created_at" ? "Dato" : column?.label || field}
631+
</option>
632+
);
633+
})}
634+
</optgroup>
635+
<optgroup label="Metrikker">
636+
{metrics.map((metric, index) => (
637+
<option
638+
key={`metrikk_${index}`}
639+
value={metric.alias || `metrikk_${index + 1}`}
640+
>
641+
{metric.alias || `metrikk_${index + 1}`}
621642
</option>
622-
);
623-
})}
624-
</optgroup>
625-
<optgroup label="Metrikker">
626-
{metrics.map((metric, index) => (
627-
<option
628-
key={`metrikk_${index}`}
629-
value={metric.alias || `metrikk_${index + 1}`}
630-
>
631-
{metric.alias || `metrikk_${index + 1}`}
632-
</option>
633-
))}
634-
</optgroup>
635-
</Select>
643+
))}
644+
</optgroup>
645+
</Select>
636646

637-
{orderBy && (
638647
<Select
639648
label="Retning"
640649
value={orderBy.direction}
@@ -647,16 +656,18 @@ const Summarize = ({
647656
<option value="ASC">Stigende (A-Å, 0-9)</option>
648657
<option value="DESC">Synkende (Å-A, 9-0)</option>
649658
</Select>
650-
)}
651-
</div>
659+
</div>
660+
<p className="text-sm text-gray-600">
661+
<strong>Standard:</strong> sorterer etter første kolonne i synkende rekkefølge.
662+
</p>
663+
664+
</>
665+
)}
652666
</div>
653667
</div>
654668

655669
{/* Result Limit section */}
656-
<div className="border-t pt-4">
657-
<Heading level="3" size="xsmall" spacing>
658-
Maks rader
659-
</Heading>
670+
<div>
660671
<div className="flex flex-col gap-4">
661672
<Switch
662673
size="small"
@@ -667,6 +678,7 @@ const Summarize = ({
667678
</Switch>
668679

669680
{limit !== null && (
681+
<>
670682
<div className="flex gap-2 items-center bg-white p-3 rounded-md border">
671683
<TextField
672684
label="Maksimalt antall rader"
@@ -688,13 +700,12 @@ const Summarize = ({
688700
className="flex-grow"
689701
/>
690702
</div>
703+
<p className="text-sm text-gray-600">
704+
<strong>Eksempel:</strong> for en topp 10-liste
705+
</p>
706+
</>
691707
)}
692708
</div>
693-
{limit == null && (
694-
<p className="text-sm text-gray-600 mt-4">
695-
<strong>Eksempel:</strong> for en topp 10-liste
696-
</p>
697-
)}
698709
</div>
699710
</div>
700711
</>

‎src/pages/Chartbuilder.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1075,7 +1075,7 @@ const ChartsPage = () => {
10751075
{/* Parameters section - Remove AdvancedOptions */}
10761076
<section className="mt-4"> {/* Add explicit margin-top for better spacing */}
10771077
<Heading level="2" size="small" spacing>
1078-
Datautforsker
1078+
Utforsker
10791079
</Heading>
10801080
<EventParameterSelector
10811081
availableEvents={availableEvents}

0 commit comments

Comments
 (0)