draupnir4all-web

git clone git://archive.git.mtrnord.blog/MTRNord/draupnir4all-web.git
Log | Files | Refs | README | LICENSE

plotly-chart.tsx (715B)

      1 "use client"
      2 
      3 import dynamic from "next/dynamic"
      4 import type { Data, Layout, Config } from "plotly.js"
      5 
      6 // Import Plotly dynamically to avoid SSR issues
      7 const Plot = dynamic(() => import("react-plotly.js"), { ssr: false })
      8 
      9 interface PlotlyChartProps {
     10     data: Data[]
     11     layout: Partial<Layout>
     12     config?: Config
     13     className?: string
     14 }
     15 
     16 export function PlotlyChart({ data, layout, config, className = "" }: PlotlyChartProps) {
     17     const defaultConfig = {
     18         displayModeBar: false,
     19         responsive: true,
     20         ...config,
     21     }
     22 
     23     return (
     24         <div className={className}>
     25             <Plot data={data} layout={layout} config={defaultConfig} style={{ width: "100%" }} />
     26         </div>
     27     )
     28 }