Interaction

import { Chart, Plot, Bar, Label, slat } from "@bezda/rhp";

// Point at a row: its band lights up and its exact number appears. Only
// CSS.
const Row = slat(
  {
    css: `
      .row:hover {
        background: color-mix(in srgb, var(--rhp-ink) 8%, transparent);
      }
      .tip { opacity: 0; transition: opacity .15s; }
      .row:hover .tip { opacity: 1; }
    `,
  },
  (d) => (
    <div class="row">
      <Label edge="start">{d.city}</Label>
      <Bar to={d.rain} />
      <Label at={d.rain}>
        <span class="tip">{d.rain} mm</span>
      </Label>
    </div>
  ),
);

export default function Rain() {
  return (
    <Chart scale={[0, 200]}>
      <Plot
        city={["Bergen", "Glasgow", "Dublin", "London"]}
        rain={[184, 124, 81, 56]}
      >
        {Row}
      </Plot>
    </Chart>
  );
}

import { createSignal } from "solid-js";
import { Chart, Plot, Bar, Label, slat } from "@bezda/rhp";

// Click a bar to pick its city; the others fade. The pick goes back
// into the
// Plot as data.
const Row = slat(
  {
    css: `
      .bar { cursor: pointer; }
      .faded .bar { opacity: .3; }
    `,
  },
  (d) => (
    <div class={d.faded ? "faded" : ""}>
      <Label edge="start">{d.city}</Label>
      <Bar to={d.rain} class="bar" data-city={d.city} />
      <Label at={d.rain}>{d.rain} mm</Label>
    </div>
  ),
);

export default function Rain() {
  const [picked, setPicked] = createSignal();
  const onClick = (e) => {
    const city = e.target.closest("[data-city]")?.dataset.city;
    if (city) setPicked(picked() === city ? undefined : city);
  };
  return (
    <div onClick={onClick}>
      <Chart scale={[0, 200]}>
        <Plot
          city={["Bergen", "Glasgow", "Dublin", "London"]}
          rain={[184, 124, 81, 56]}
          faded={(d) => picked() !== undefined && d.city !== picked()}
        >
          {Row}
        </Plot>
      </Chart>
    </div>
  );
}