| 231 | } |
| 232 | |
| 233 | export default function Chart(props: OuterbaseChartProps) { |
| 234 | let backGroundStyle = {}; |
| 235 | |
| 236 | if (props.value.params.options?.backgroundType === "gradient") { |
| 237 | const startColor = props.value.params.options?.gradientStart; |
| 238 | const stopColor = props.value.params.options?.gradientStop; |
| 239 | backGroundStyle = { |
| 240 | background: `linear-gradient(45deg, ${startColor}, ${stopColor})`, |
| 241 | }; |
| 242 | } else if (props.value.params.options?.backgroundType === "image") { |
| 243 | backGroundStyle = { |
| 244 | backgroundImage: `url(${outerBaseUrl + props.value.params.options?.backgroundImage})`, |
| 245 | backgroundSize: "cover", |
| 246 | backgroundPosition: "center", |
| 247 | }; |
| 248 | } |
| 249 | |
| 250 | return ( |
| 251 | <div className="flex h-full w-full flex-1 p-6" style={backGroundStyle}> |
| 252 | <div |
| 253 | className={cn("flex h-full w-full flex-col rounded-lg p-2", { |
| 254 | "dark:shadow-accent shadow-2xl backdrop-blur-lg backdrop-brightness-100 dark:backdrop-brightness-100": |
| 255 | props.value.params.options?.backgroundType === "image", |
| 256 | })} |
| 257 | > |
| 258 | <h1 |
| 259 | className="mb-4 text-lg font-semibold" |
| 260 | style={{ color: props.value.params.options?.foreground }} |
| 261 | > |
| 262 | {props.value.name ?? "New Chart"} |
| 263 | </h1> |
| 264 | <div className="flex-1 overflow-hidden"> |
| 265 | <ChartBody {...props} /> |
| 266 | </div> |
| 267 | </div> |
| 268 | </div> |
| 269 | ); |
| 270 | } |