Chart Type Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its chart band drawn inline over a picture of the report, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the chart chosen in the copy is the one the dialog opens with. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

From one typed series at the top of the block, seven days of visits for this week and last week, so every type draws the same numbers and you can compare how each shows them: lines, steps and areas along the days, bars in pairs or stacked, scatter points, a two-row heatmap shaded by visits, a funnel of this week's days from busiest to quietest, and a radar with a spoke for each day. The geometry is plain module-scope functions that turn values into path data and rectangles, with no chart library. In your app pass your own series and keep the geometry.

The drawing is hidden from assistive technology and replaced by two things: a sentence beside it that says what the chart shows ("Seven pairs of bars. This week is highest on Sat at 640 and lowest on Tue at 310"), and a list of the figures, one line a day ("Mon: this week 320, last week 280"). The sentence changes with the type and with Stacked. The chart's days run the same way in any page direction, as a time axis should.

For Bar it stacks last week's bar on this week's in one column per day, and for Area it stacks last week's area on this week's, rescaling the axis so the total fits. For the other types the switch row is still there but unseen and inert, so the band never changes height, and the status line says nothing when it can't apply. The setting is remembered when you move to another type and back.

All of it. The series, the chosen type and the switch are typed state in the block; nothing is saved and nothing leaves the page. In your app replace THIS and LAST with your data, write the type and the switch to the selected chart in pick, and keep the band as the preview.

Yes. Type to search by name, hint or word ("trend", "bar", "scatter", "shade"), the arrow keys move through the types, Enter draws the highlighted one and keeps focus in the input, and Escape closes the menu and puts focus on the field; Tab reaches the Stacked switch. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. A tick and the words ", drawn now" mark the type on show.

The chart is hidden and the band shrinks to one line of text ("Line chart, seven days. This week peaks on Sat at 640") with the Stacked switch under it; the figures stay in the list for screen readers. The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.