Skip to content

Commit d0ede77

Browse files
matt-aitkenmatt-aitken
committed
Multiple series
1 parent 7292440 commit d0ede77

File tree

1 file changed

+74
-64
lines changed

1 file changed

+74
-64
lines changed

‎apps/webapp/app/components/code/ChartConfigPanel.tsx‎

Lines changed: 74 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -328,75 +328,85 @@ export function ChartConfigPanel({ columns, config, onChange, className }: Chart
328328
<span className="text-xs text-text-dimmed">No numeric columns</span>
329329
) : (
330330
<div className="flex flex-col gap-1.5">
331-
{config.yAxisColumns.map((col, index) => (
332-
<div key={index} className="flex items-center gap-1">
333-
<Select
334-
value={col}
335-
setValue={(value) => {
336-
const newColumns = [...config.yAxisColumns];
337-
if (value) {
338-
newColumns[index] = value;
339-
} else {
340-
newColumns.splice(index, 1);
341-
}
342-
updateConfig({ yAxisColumns: newColumns });
343-
}}
344-
variant="tertiary/small"
345-
placeholder="Select column"
346-
items={yAxisOptions.filter(
347-
(opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
348-
)}
349-
dropdownIcon
350-
className="min-w-[140px] flex-1"
351-
>
352-
{(items) =>
353-
items.map((item) => (
354-
<SelectItem key={item.value} value={item.value}>
355-
<span className="flex items-center gap-2">
356-
<span>{item.label}</span>
357-
<TypeBadge type={item.type} />
358-
</span>
359-
</SelectItem>
360-
))
361-
}
362-
</Select>
363-
{index > 0 && (
364-
<button
365-
type="button"
366-
onClick={() => {
367-
const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
331+
{/* Always show at least one dropdown, even if yAxisColumns is empty */}
332+
{(config.yAxisColumns.length === 0 ? [""] : config.yAxisColumns).map(
333+
(col, index) => (
334+
<div key={index} className="flex items-center gap-1">
335+
<Select
336+
value={col}
337+
setValue={(value) => {
338+
const newColumns = [...config.yAxisColumns];
339+
if (value) {
340+
// If this is a new slot (empty string), add it
341+
if (index >= config.yAxisColumns.length) {
342+
newColumns.push(value);
343+
} else {
344+
newColumns[index] = value;
345+
}
346+
} else if (index < config.yAxisColumns.length) {
347+
newColumns.splice(index, 1);
348+
}
368349
updateConfig({ yAxisColumns: newColumns });
369350
}}
370-
className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
371-
title="Remove series"
351+
variant="tertiary/small"
352+
placeholder="Select column"
353+
items={yAxisOptions.filter(
354+
(opt) => opt.value === col || !config.yAxisColumns.includes(opt.value)
355+
)}
356+
dropdownIcon
357+
className="min-w-[140px] flex-1"
372358
>
373-
<XIcon className="h-3.5 w-3.5" />
374-
</button>
375-
)}
376-
</div>
377-
))}
378-
379-
{/* Add another series button - disabled when group by is set */}
380-
{config.yAxisColumns.length < yAxisOptions.length && !config.groupByColumn && (
381-
<button
382-
type="button"
383-
onClick={() => {
384-
const availableColumns = yAxisOptions.filter(
385-
(opt) => !config.yAxisColumns.includes(opt.value)
386-
);
387-
if (availableColumns.length > 0) {
388-
updateConfig({
389-
yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
390-
});
391-
}
392-
}}
393-
className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
394-
>
395-
<Plus className="h-3 w-3" />
396-
Add series
397-
</button>
359+
{(items) =>
360+
items.map((item) => (
361+
<SelectItem key={item.value} value={item.value}>
362+
<span className="flex items-center gap-2">
363+
<span>{item.label}</span>
364+
<TypeBadge type={item.type} />
365+
</span>
366+
</SelectItem>
367+
))
368+
}
369+
</Select>
370+
{index > 0 && (
371+
<button
372+
type="button"
373+
onClick={() => {
374+
const newColumns = config.yAxisColumns.filter((_, i) => i !== index);
375+
updateConfig({ yAxisColumns: newColumns });
376+
}}
377+
className="rounded p-1 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
378+
title="Remove series"
379+
>
380+
<XIcon className="h-3.5 w-3.5" />
381+
</button>
382+
)}
383+
</div>
384+
)
398385
)}
399386

387+
{/* Add another series button - only show when we have at least one series and not grouped */}
388+
{config.yAxisColumns.length > 0 &&
389+
config.yAxisColumns.length < yAxisOptions.length &&
390+
!config.groupByColumn && (
391+
<button
392+
type="button"
393+
onClick={() => {
394+
const availableColumns = yAxisOptions.filter(
395+
(opt) => !config.yAxisColumns.includes(opt.value)
396+
);
397+
if (availableColumns.length > 0) {
398+
updateConfig({
399+
yAxisColumns: [...config.yAxisColumns, availableColumns[0].value],
400+
});
401+
}
402+
}}
403+
className="flex items-center gap-1 self-start rounded px-1 py-0.5 text-xs text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
404+
>
405+
<Plus className="h-3 w-3" />
406+
Add series
407+
</button>
408+
)}
409+
400410
{config.groupByColumn && config.yAxisColumns.length === 1 && (
401411
<span className="text-xxs text-text-dimmed">
402412
Remove group by to add multiple series

0 commit comments

Comments
 (0)