@cfasim-ui/charts 0.7.8 → 0.8.1

package/src/ChartMenu/ChartMenu.vue

@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "reka-ui";
+
+export interface ChartMenuItem {
+  label: string;
+  action: () => void;
+  /** Sets aria-pressed on the menu item — use for toggle-style items. */
+  ariaPressed?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    items: ChartMenuItem[];
+    /** Force the dropdown style even when only one item is provided. */
+    forceDropdown?: boolean;
+    /**
+     * When the chart is expanded, the menu trigger is replaced by a
+     * persistent close (✕) button that emits `close`.
+     */
+    isFullscreen?: boolean;
+  }>(),
+  { forceDropdown: false, isFullscreen: false },
+);
+
+const emit = defineEmits<{ (e: "close"): void }>();
+
+const useDropdown = () => props.forceDropdown || props.items.length > 1;
+</script>
+
+<template>
+  <div
+    class="chart-menu-trigger-area"
+    :class="{ 'chart-menu-trigger-area--expanded': isFullscreen }"
+  >
+    <!-- Expanded: a close button replaces the menu trigger -->
+    <button
+      v-if="isFullscreen"
+      class="chart-menu-button chart-close-button"
+      aria-label="Collapse"
+      @click="emit('close')"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M4 4l8 8M12 4l-8 8" />
+      </svg>
+    </button>
+    <!-- Single item: plain button -->
+    <button
+      v-else-if="!useDropdown()"
+      class="chart-menu-button chart-menu-single"
+      :aria-label="items[0].label"
+      @click="items[0].action"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M7 1v8M3 6l4 4 4-4M2 13h10" />
+      </svg>
+    </button>
+    <!-- Multiple items: dropdown menu -->
+    <DropdownMenuRoot v-else :modal="false">
+      <DropdownMenuTrigger class="chart-menu-button" aria-label="Chart options">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <circle cx="3" cy="8" r="1.5" />
+          <circle cx="8" cy="8" r="1.5" />
+          <circle cx="13" cy="8" r="1.5" />
+        </svg>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          class="chart-menu-content"
+          :side-offset="4"
+          align="end"
+        >
+          <DropdownMenuItem
+            v-for="item in items"
+            :key="item.label"
+            class="chart-menu-item"
+            :aria-pressed="item.ariaPressed"
+            @select="item.action"
+          >
+            {{ item.label }}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </DropdownMenuRoot>
+  </div>
+</template>
+
+<style scoped>
+.chart-menu-trigger-area {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  z-index: 1;
+}
+
+/* In fullscreen the button anchors to the viewport corner (the wrapper's
+   content padding doesn't move an absolutely-positioned child), so inset it
+   further for modal-style breathing room. */
+.chart-menu-trigger-area--expanded {
+  top: 1.25em;
+  right: 1.25em;
+}
+
+.chart-menu-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  background: var(--color-bg-0, #fff);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.chart-menu-button[data-state="open"] {
+  opacity: 1;
+}
+
+/* The close button is always visible while the chart is expanded. */
+.chart-close-button {
+  opacity: 1;
+}
+
+.chart-menu-button:hover {
+  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
+  color: var(--color-text);
+}
+</style>
+
+<style>
+/* Reveal the menu button when the user hovers/focuses anywhere in the
+   chart. These reference the parent wrapper classes, so they can't be
+   scoped to ChartMenu. (In fullscreen the menu button is swapped for the
+   always-visible close button, so no rule is needed there.) */
+.line-chart-wrapper:hover .chart-menu-button,
+.bar-chart-wrapper:hover .chart-menu-button,
+.choropleth-wrapper:hover .chart-menu-button,
+.line-chart-wrapper:focus-within .chart-menu-button,
+.bar-chart-wrapper:focus-within .chart-menu-button,
+.choropleth-wrapper:focus-within .chart-menu-button {
+  opacity: 1;
+}
+
+/* Visually-hidden live region used by each chart wrapper to announce
+   expansion. Lives here so it ships once with the shared menu. */
+.chart-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.chart-menu-content {
+  z-index: 100;
+  background: var(--color-bg-0);
+  border: 1px solid var(--color-border);
+  border-radius: 0.25em;
+  padding: 0.25em;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  min-width: 140px;
+}
+
+.chart-menu-item {
+  display: flex;
+  align-items: center;
+  padding: 0.375em 0.5em;
+  border-radius: 0.25em;
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  white-space: nowrap;
+}
+
+.chart-menu-item[data-highlighted] {
+  background: var(--color-primary);
+  color: white;
+}
+</style>

package/src/ChartMenu/download.ts

@@ -0,0 +1,120 @@
+export function downloadBlob(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+/** Inherited CSS properties propagated onto the cloned SVG root so text and
+ *  `currentColor` strokes render with the same color/typography as the
+ *  live chart when the SVG is opened standalone or rasterized to PNG. */
+const ROOT_INHERITED_PROPS = [
+  "color",
+  "font-family",
+  "font-size",
+  "font-weight",
+] as const;
+
+/** Presentation attributes that may contain `var(--…)` references. The
+ *  fallback inside `var(--name, #fff)` is the only thing that renders when
+ *  the custom property is undefined outside the page context — so we
+ *  resolve them against the document's CSS custom properties before
+ *  serializing. */
+const VAR_RESOLVABLE_ATTRS = ["fill", "stroke"] as const;
+
+/** Resolve a single `var(--name)` or `var(--name, fallback)` expression.
+ *  Looks the name up on `document.documentElement` (where theme tokens are
+ *  declared); falls back to the in-expression fallback, then the original
+ *  expression if neither resolves. */
+function resolveVarExpression(expr: string): string {
+  const match = expr.match(
+    /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^)]*?)\s*)?\)\s*$/,
+  );
+  if (!match) return expr;
+  const [, name, fallback] = match;
+  const value = window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+  if (value) return value;
+  if (fallback) return fallback.trim();
+  return expr;
+}
+
+/** Clone `svg` and inline the styles that don't survive a standalone render:
+ *  inherited `color`/`font-*` on the root (so `currentColor` and unset
+ *  font-family resolve), and any `var(--…)` references in fill/stroke
+ *  attributes resolved against the document. */
+export function prepareSvgForExport(svg: SVGSVGElement): SVGSVGElement {
+  const clone = svg.cloneNode(true) as SVGSVGElement;
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+  const rootComputed = window.getComputedStyle(svg);
+  const rootStyleParts: string[] = [];
+  for (const prop of ROOT_INHERITED_PROPS) {
+    const value = rootComputed.getPropertyValue(prop);
+    if (value) rootStyleParts.push(`${prop}: ${value}`);
+  }
+  const existingRootStyle = clone.getAttribute("style") ?? "";
+  clone.setAttribute(
+    "style",
+    [existingRootStyle, ...rootStyleParts].filter(Boolean).join("; "),
+  );
+
+  for (const target of clone.querySelectorAll<SVGElement>("*")) {
+    for (const attr of VAR_RESOLVABLE_ATTRS) {
+      const raw = target.getAttribute(attr);
+      if (!raw || !raw.includes("var(")) continue;
+      target.setAttribute(attr, resolveVarExpression(raw));
+    }
+  }
+
+  return clone;
+}
+
+export function saveSvg(svg: SVGSVGElement, filename: string) {
+  const clone = prepareSvgForExport(svg);
+  const xml = new XMLSerializer().serializeToString(clone);
+  downloadBlob(new Blob([xml], { type: "image/svg+xml" }), `${filename}.svg`);
+}
+
+export function savePng(svg: SVGSVGElement, filename: string) {
+  const clone = prepareSvgForExport(svg);
+  const xml = new XMLSerializer().serializeToString(clone);
+  const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(svgBlob);
+  const img = new Image();
+  const w = svg.width.baseVal.value || svg.clientWidth;
+  const h = svg.height.baseVal.value || svg.clientHeight;
+  const scale = 2;
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = w * scale;
+    canvas.height = h * scale;
+    const ctx = canvas.getContext("2d")!;
+    ctx.scale(scale, scale);
+    ctx.drawImage(img, 0, 0, w, h);
+    canvas.toBlob((blob) => {
+      if (blob) downloadBlob(blob, `${filename}.png`);
+    });
+    URL.revokeObjectURL(url);
+  };
+  img.src = url;
+}
+
+/**
+ * Downloads a rendering canvas's current contents as a PNG — no SVG
+ * round-trip. The canvas backing store is already sized at
+ * devicePixelRatio, so the export is naturally high-resolution.
+ */
+export function saveCanvasPng(canvas: HTMLCanvasElement, filename: string) {
+  canvas.toBlob((blob) => {
+    if (blob) downloadBlob(blob, `${filename}.png`);
+  }, "image/png");
+}
+
+export function downloadCsv(csv: string, filename: string) {
+  downloadBlob(new Blob([csv], { type: "text/csv" }), `${filename}.csv`);
+}

package/src/ChartTooltip/ChartTooltip.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import {
+  PopoverRoot,
+  PopoverAnchor,
+  PopoverPortal,
+  PopoverContent,
+} from "reka-ui";
+
+const props = withDefaults(
+  defineProps<{
+    /** Pixel x-coordinate relative to the positioned parent container */
+    x: number;
+    /** Pixel y-coordinate relative to the positioned parent container */
+    y: number;
+    /** Whether the tooltip is visible */
+    open: boolean;
+    /** Interaction mode. Default: 'hover' */
+    mode?: "hover" | "click";
+    /** Offset from anchor in pixels. Default: 8 */
+    sideOffset?: number;
+  }>(),
+  {
+    mode: "hover",
+    sideOffset: 16,
+  },
+);
+
+defineEmits<{
+  /** Fired in click mode when user dismisses the tooltip */
+  (e: "close"): void;
+}>();
+</script>
+
+<template>
+  <!-- Hover mode: lightweight CSS-positioned div -->
+  <div
+    v-if="mode === 'hover' && open"
+    class="chart-tooltip-content"
+    :style="{
+      position: 'absolute',
+      left: `${x + sideOffset}px`,
+      top: `${y}px`,
+      transform: 'translateY(-50%)',
+    }"
+  >
+    <slot />
+  </div>
+
+  <!-- Click mode: reka-ui Popover for dismiss-on-outside-click -->
+  <template v-else-if="mode === 'click'">
+    <PopoverRoot :open="open">
+      <PopoverAnchor as-child>
+        <div
+          class="chart-tooltip-anchor"
+          :style="{ left: `${x}px`, top: `${y}px` }"
+        />
+      </PopoverAnchor>
+      <PopoverPortal>
+        <PopoverContent
+          v-if="open"
+          class="chart-tooltip-content"
+          side="right"
+          :side-offset="sideOffset"
+          update-position-strategy="always"
+          @pointer-down-outside="$emit('close')"
+          @escape-key-down="$emit('close')"
+        >
+          <slot />
+        </PopoverContent>
+      </PopoverPortal>
+    </PopoverRoot>
+  </template>
+</template>
+
+<style scoped>
+.chart-tooltip-anchor {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+</style>
+
+<style>
+.chart-tooltip-content {
+  z-index: 100;
+  background: var(--color-bg-0, #fff);
+  border: 1px solid var(--color-border, #e5e7eb);
+  border-radius: 0.375em;
+  padding: 0.5em 0.75em;
+  font-size: var(--font-size-sm, 0.875rem);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+}
+</style>