Chart Toolbar

1import * as React from 'react'
2import { Download, Image, FileText, Maximize } from 'lucide-react'
3import { cn } from '@/lib/utils'
4import { Button } from '@/components/ui/button'
5import {
6  downloadCSV,
7  exportPNG,
8  exportSVG,
9  toggleFullscreen,
10} from '@/lib/chart-export'
11 
12export interface ChartToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
13  /** Rows fed to the chart — enables the CSV export button when provided. */
14  data?: Array<Record<string, unknown>>
15  /** Base filename (no extension) for exports. Default 'chart'. */
16  filename?: string
17  /** Show the PNG export button. Default true. */
18  png?: boolean
19  /** Show the SVG export button. Default true (no-ops for canvas engines). */
20  svg?: boolean
21  /** Show the fullscreen toggle. Default true. */
22  fullscreen?: boolean
23}
24 
25/**
26 * Wraps a chart and overlays a brutalist export toolbar (PNG / SVG / CSV /
27 * fullscreen). Framework-agnostic under the hood — works with any chart that
28 * renders an <svg> (Recharts) or <canvas> into the wrapped container.
29 *
30 *   <ChartToolbar data={rows} filename="sales">
31 *     <ChartContainer config={config}>…</ChartContainer>
32 *   </ChartToolbar>
33 */
34export const ChartToolbar = React.forwardRef<HTMLDivElement, ChartToolbarProps>(
35  (
36    { data, filename = 'chart', png = true, svg = true, fullscreen = true, className, children, ...props },
37    ref
38  ) => {
39    const innerRef = React.useRef<HTMLDivElement | null>(null)
40    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)
41 
42    const withContainer = (fn: (el: HTMLElement) => void) => () => {
43      const el = innerRef.current
44      if (el) fn(el)
45    }
46 
47    return (
48      <div ref={innerRef} className={cn('relative', className)} {...props}>
49        <div data-chart-export-controls className="absolute right-2 top-2 z-10 flex gap-1">
50          {png && (
51            <Button
52              type="button"
53              variant="outline"
54              size="icon"
55              className="h-8 w-8"
56              aria-label="Export chart as PNG"
57              title="Export PNG"
58              onClick={withContainer((el) => void exportPNG(el, `${filename}.png`))}
59            >
60              <Image />
61            </Button>
62          )}
63          {svg && (
64            <Button
65              type="button"
66              variant="outline"
67              size="icon"
68              className="h-8 w-8"
69              aria-label="Export chart as SVG"
70              title="Export SVG"
71// … truncated