create-bluecopa-react-app 1.0.40 → 1.0.42

package/templates/latest/app/components/charts/bar-chart.tsx

@@ -0,0 +1,132 @@
+import React, { useMemo } from "react";
+import type { EChartsOption } from "echarts";
+import { BaseChart, type BaseChartRef } from "./base-chart";
+import { chartTooltip, chartLegend, chartGrid, chartCategoryAxis, chartValueAxis, chartTitle, chartAnimation, chartColor } from "./chart-utils";
+import { cn } from "~/utils/utils";
+
+export interface BarChartSeries {
+  name: string;
+  data: number[];
+  color?: string;
+}
+
+export interface BarChartData {
+  categories: string[];
+  series: BarChartSeries[];
+}
+
+export interface BarChartProps {
+  data: BarChartData;
+  title?: string;
+  subtitle?: string;
+  height?: string | number;
+  className?: string;
+  horizontal?: boolean;
+  stacked?: boolean;
+  showLegend?: boolean;
+  showValues?: boolean;
+  loading?: boolean;
+  empty?: boolean;
+  emptyText?: string;
+  onBarClick?: (params: { name: string; seriesName: string; value: number }) => void;
+  formatValue?: (value: number) => string;
+  ariaLabel?: string;
+}
+
+export const BarChart = React.forwardRef<BaseChartRef, BarChartProps>(
+  function BarChart(
+    { data, title, subtitle, height = "100%", className, horizontal = false, stacked = false, showLegend, showValues = false, loading = false, empty = false, emptyText, onBarClick, formatValue, ariaLabel },
+    ref
+  ) {
+    const option = useMemo<EChartsOption>(() => {
+      const { categories, series } = data;
+      const shouldShowLegend = showLegend ?? series.length > 1;
+
+      const chartSeries = series.map((s, idx) => ({
+        type: "bar" as const,
+        name: s.name,
+        data: s.data,
+        itemStyle: {
+          color: s.color ?? chartColor(idx),
+          borderRadius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
+        },
+        emphasis: {
+          focus: "series" as const,
+          blurScope: "coordinateSystem" as const,
+          itemStyle: { shadowBlur: 10, shadowOffsetY: 2, shadowColor: "rgba(0, 0, 0, 0.18)", borderWidth: 1, borderColor: "rgba(255, 255, 255, 0.4)" },
+        },
+        stack: stacked ? "value" : undefined,
+        label: showValues
+          ? { show: true, position: (horizontal ? "right" : "top") as any, formatter: formatValue ? (p: any) => formatValue(p.value) : undefined, fontSize: 11, fontWeight: 500, distance: 4 }
+          : undefined,
+      }));
+
+      const baseOption: Record<string, any> = {
+        ...(title && chartTitle(title, { subtitle })),
+        ...chartTooltip({
+          trigger: "axis",
+          formatter: (params: any) => {
+            if (!Array.isArray(params)) params = [params];
+            let html = `<strong>${params[0]?.name}</strong><br/>`;
+            params.forEach((p: any) => {
+              const val = formatValue ? formatValue(p.value) : p.value;
+              html += `<span style="display:inline-block;margin-right:8px;"><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:${p.color};margin-right:6px;"></span>${p.seriesName}: ${val}</span><br/>`;
+            });
+            return html;
+          },
+        }),
+        ...(shouldShowLegend && chartLegend({ position: "bottom" })),
+        ...chartGrid(),
+        ...chartAnimation({ delay: (idx: number) => idx * 60 }),
+      };
+
+      if (horizontal) {
+        baseOption.xAxis = chartValueAxis();
+        baseOption.yAxis = chartCategoryAxis(categories);
+      } else {
+        baseOption.xAxis = chartCategoryAxis(categories);
+        baseOption.yAxis = chartValueAxis();
+      }
+
+      baseOption.series = chartSeries;
+      return baseOption;
+    }, [data, title, subtitle, horizontal, stacked, showLegend, showValues, formatValue]);
+
+    const onEvents = useMemo(() => {
+      if (!onBarClick) return undefined;
+      return {
+        click: (params: any) => {
+          if (params.componentSubType === "bar") {
+            onBarClick({ name: params.name, seriesName: params.seriesName, value: params.value });
+          }
+        },
+      };
+    }, [onBarClick]);
+
+    const dataSummary = useMemo(() => {
+      const { categories, series } = data;
+      return series.map((s) => {
+        const points = s.data.map((val, i) => `${categories[i]}: ${formatValue ? formatValue(val) : val}`).join(", ");
+        return `${s.name}: ${points}`;
+      }).join(". ");
+    }, [data, formatValue]);
+
+    return (
+      <BaseChart
+        ref={ref}
+        option={option}
+        height={height}
+        className={cn("copa:bar-chart", className)}
+        loading={loading}
+        empty={empty}
+        emptyText={emptyText}
+        onEvents={onEvents}
+        ariaLabel={ariaLabel || `Bar chart${title ? `: ${title}` : ""}`}
+        dataSummary={dataSummary}
+      />
+    );
+  }
+);
+
+BarChart.displayName = "BarChart";
+export default BarChart;

package/templates/latest/app/components/charts/base-chart.tsx

@@ -0,0 +1,149 @@
+/**
+ * BaseChart
+ *
+ * Thin wrapper around echarts-for-react that uses the BlueCopa ECharts theme,
+ * handles responsive resizing, and provides loading & empty states.
+ */
+
+import React, { useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from "react";
+import ReactECharts from "echarts-for-react";
+import type { EChartsOption, ECharts } from "echarts";
+import { useChartContext } from "./chart-provider";
+import { chartAnimation } from "./chart-utils";
+import { cn } from "~/utils/utils";
+
+export interface BaseChartProps {
+  option: EChartsOption | Record<string, any>;
+  height?: string | number;
+  width?: string | number;
+  className?: string;
+  style?: React.CSSProperties;
+  loading?: boolean;
+  empty?: boolean;
+  emptyText?: string;
+  onEvents?: Record<string, (params: any) => void>;
+  group?: string;
+  noAnimation?: boolean;
+  renderer?: "canvas" | "svg";
+  onChartReady?: (instance: ECharts) => void;
+  ariaLabel?: string;
+  dataSummary?: string;
+}
+
+export interface BaseChartRef {
+  getInstance: () => ECharts | undefined;
+  resize: () => void;
+}
+
+function ChartLoading() {
+  return (
+    <div className="copa:absolute copa:inset-0 copa:flex copa:items-center copa:justify-center copa:bg-background/60 copa:backdrop-blur-sm copa:z-10 copa:rounded-lg">
+      <div className="copa:flex copa:flex-col copa:items-center copa:gap-3">
+        <div className="copa:h-8 copa:w-8 copa:rounded-full copa:border-2 copa:border-muted copa:border-t-primary copa:animate-spin" />
+        <span className="copa:text-xs copa:text-muted-foreground">Loading chart…</span>
+      </div>
+    </div>
+  );
+}
+
+function ChartEmpty({ text = "No data available" }: { text?: string }) {
+  return (
+    <div className="copa:absolute copa:inset-0 copa:flex copa:items-center copa:justify-center copa:z-10">
+      <div className="copa:flex copa:flex-col copa:items-center copa:gap-2 copa:text-muted-foreground">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="copa:opacity-40">
+          <path d="M3 3v18h18" />
+          <path d="M7 16l4-8 4 4 4-6" />
+        </svg>
+        <span className="copa:text-sm">{text}</span>
+      </div>
+    </div>
+  );
+}
+
+export const BaseChart = forwardRef<BaseChartRef, BaseChartProps>(
+  function BaseChart(
+    {
+      option,
+      height = "100%",
+      width = "100%",
+      className,
+      style,
+      loading = false,
+      empty = false,
+      emptyText,
+      onEvents,
+      group,
+      noAnimation = false,
+      renderer = "canvas",
+      onChartReady,
+      ariaLabel,
+      dataSummary,
+    },
+    ref
+  ) {
+    const chartRef = useRef<ReactECharts>(null);
+    const { themeName, version } = useChartContext();
+
+    const mergedOption = useMemo(() => {
+      const anim = noAnimation ? { animation: false } : chartAnimation();
+      return { ...anim, ...option };
+    }, [option, noAnimation]);
+
+    useImperativeHandle(ref, () => ({
+      getInstance: () => chartRef.current?.getEchartsInstance(),
+      resize: () => chartRef.current?.getEchartsInstance()?.resize(),
+    }));
+
+    useEffect(() => {
+      if (group) {
+        const instance = chartRef.current?.getEchartsInstance();
+        if (instance) instance.group = group;
+      }
+    }, [group]);
+
+    useEffect(() => {
+      if (onChartReady) {
+        const instance = chartRef.current?.getEchartsInstance();
+        if (instance) onChartReady(instance);
+      }
+    }, [onChartReady]);
+
+    const key = `chart-${version}`;
+
+    return (
+      <div
+        className={cn("copa:relative", className)}
+        style={{
+          height: typeof height === "number" ? `${height}px` : height,
+          width: typeof width === "number" ? `${width}px` : width,
+          minHeight: 200,
+          ...style,
+        }}
+        role="img"
+        aria-label={ariaLabel}
+      >
+        {dataSummary && (
+          <div className="copa:sr-only" role="document" aria-label="Chart data">
+            {dataSummary}
+          </div>
+        )}
+        {loading && <ChartLoading />}
+        {empty && <ChartEmpty text={emptyText} />}
+
+        <ReactECharts
+          key={key}
+          ref={chartRef}
+          option={mergedOption}
+          theme={themeName}
+          style={{ height: "100%", width: "100%" }}
+          opts={{ renderer }}
+          onEvents={onEvents}
+          notMerge={true}
+          lazyUpdate={true}
+        />
+      </div>
+    );
+  }
+);
+
+export default BaseChart;

package/templates/latest/app/components/charts/chart-provider.tsx

@@ -0,0 +1,71 @@
+/**
+ * ChartProvider
+ *
+ * React context that bridges the CSS design token system to ECharts.
+ * Re-registers the ECharts theme when the document theme changes.
+ */
+
+import React, { createContext, useContext, useEffect, useState, useCallback, useRef } from "react";
+import { registerChartTheme, resolveChartTokens, CHART_THEME_NAME, type ChartTokens } from "./chart-theme";
+
+interface ChartContextValue {
+  themeName: string;
+  tokens: ChartTokens;
+  version: number;
+}
+
+const ChartContext = createContext<ChartContextValue | null>(null);
+
+export function useChartContext(): ChartContextValue {
+  const ctx = useContext(ChartContext);
+  if (!ctx) {
+    throw new Error("useChartContext must be used inside a <ChartProvider>.");
+  }
+  return ctx;
+}
+
+interface ChartProviderProps {
+  children: React.ReactNode;
+}
+
+export function ChartProvider({ children }: ChartProviderProps) {
+  const [version, setVersion] = useState(0);
+  const [chartTokens, setChartTokens] = useState<ChartTokens>(() =>
+    typeof window !== "undefined" ? resolveChartTokens() : ({} as ChartTokens)
+  );
+  const observerRef = useRef<MutationObserver | null>(null);
+
+  const refresh = useCallback(() => {
+    registerChartTheme();
+    setChartTokens(resolveChartTokens());
+    setVersion((v) => v + 1);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+
+    const target = document.documentElement;
+    observerRef.current = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === "attributes" && (m.attributeName === "class" || m.attributeName === "data-theme" || m.attributeName === "style")) {
+          refresh();
+          break;
+        }
+      }
+    });
+
+    observerRef.current.observe(target, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, [refresh]);
+
+  return (
+    <ChartContext.Provider value={{ themeName: CHART_THEME_NAME, tokens: chartTokens, version }}>
+      {children}
+    </ChartContext.Provider>
+  );
+}
+
+export default ChartProvider;

package/templates/latest/app/components/charts/chart-theme.ts

@@ -0,0 +1,262 @@
+/**
+ * Chart Theme Bridge
+ * Reads CSS design tokens from .mfe-root and maps them to ECharts theme.
+ */
+
+import * as echarts from "echarts";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Resolve a CSS custom property — prefers .mfe-root, falls back to :root */
+function getCSSVar(name: string): string {
+  const mfeRoot = document.querySelector(".mfe-root") as HTMLElement | null;
+  const target = mfeRoot ?? document.documentElement;
+  return getComputedStyle(target).getPropertyValue(name).trim();
+}
+
+function clamp01(x: number): number {
+  return Math.max(0, Math.min(1, x));
+}
+
+function linearToSrgb(c: number): number {
+  return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+}
+
+function oklabToLinearSrgb(L: number, a: number, b: number): [number, number, number] {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return [
+    +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
+  ];
+}
+
+function oklchToHex(L: number, C: number, H: number): string {
+  const hRad = (H * Math.PI) / 180;
+  const a = C * Math.cos(hRad);
+  const b = C * Math.sin(hRad);
+  const [lr, lg, lb] = oklabToLinearSrgb(L, a, b);
+  const r = Math.round(clamp01(linearToSrgb(lr)) * 255);
+  const g = Math.round(clamp01(linearToSrgb(lg)) * 255);
+  const bv = Math.round(clamp01(linearToSrgb(lb)) * 255);
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${bv.toString(16).padStart(2, "0")}`;
+}
+
+function parseRgbToHex(str: string): string | null {
+  const m = str.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/);
+  if (!m) return null;
+  const r = Math.round(parseFloat(m[1]));
+  const g = Math.round(parseFloat(m[2]));
+  const b = Math.round(parseFloat(m[3]));
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+
+function resolveColor(cssValue: string): string {
+  if (!cssValue) return "#888888";
+  const v = cssValue.trim();
+
+  if (/^#[0-9a-fA-F]{6}$/.test(v)) return v;
+  if (/^#[0-9a-fA-F]{3}$/.test(v)) {
+    const [, r, g, b] = v.split("");
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+
+  const oklchMatch = v.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+  if (oklchMatch) {
+    return oklchToHex(parseFloat(oklchMatch[1]), parseFloat(oklchMatch[2]), parseFloat(oklchMatch[3]));
+  }
+
+  const rgbResult = parseRgbToHex(v);
+  if (rgbResult) return rgbResult;
+
+  return "#888888";
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  return [parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16), parseInt(h.substring(4, 6), 16)];
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return "#" + [r, g, b].map((c) => Math.max(0, Math.min(255, Math.round(c))).toString(16).padStart(2, "0")).join("");
+}
+
+function tint(hex: string, factor: number): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r + (255 - r) * factor, g + (255 - g) * factor, b + (255 - b) * factor);
+}
+
+function shade(hex: string, factor: number): string {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r * (1 - factor), g * (1 - factor), b * (1 - factor));
+}
+
+// ---------------------------------------------------------------------------
+// Fallback colors (hex equivalents of Dream Light OKLCH chart palette)
+// ---------------------------------------------------------------------------
+
+const CHART_FALLBACK_COLORS = [
+  "#2563eb", // --chart-1: oklch(0.55 0.15 255) — Blue
+  "#0d9488", // --chart-2: oklch(0.62 0.12 175) — Teal
+  "#ca8a04", // --chart-3: oklch(0.70 0.13 80)  — Gold
+  "#7c3aed", // --chart-4: oklch(0.55 0.14 295) — Purple
+  "#dc2626", // --chart-5: oklch(0.62 0.12 15)  — Red
+];
+
+function resolveChartColor(cssVar: string, fallback: string): string {
+  const raw = getCSSVar(cssVar);
+  if (!raw) return fallback;
+  const resolved = resolveColor(raw);
+  return resolved === "#888888" ? fallback : resolved;
+}
+
+// ---------------------------------------------------------------------------
+// Token Resolution
+// ---------------------------------------------------------------------------
+
+export interface ChartTokens {
+  colors: string[];
+  fontFamily: string;
+  fontSize: number;
+  textColor: string;
+  textColorSecondary: string;
+  backgroundColor: string;
+  borderColor: string;
+  successColor: string;
+  warningColor: string;
+  errorColor: string;
+  infoColor: string;
+  containerPadding: number;
+  animationDuration: number;
+  animationEasing: string;
+}
+
+export function resolveChartTokens(): ChartTokens {
+  const base5 = [
+    resolveChartColor("--chart-1", CHART_FALLBACK_COLORS[0]),
+    resolveChartColor("--chart-2", CHART_FALLBACK_COLORS[1]),
+    resolveChartColor("--chart-3", CHART_FALLBACK_COLORS[2]),
+    resolveChartColor("--chart-4", CHART_FALLBACK_COLORS[3]),
+    resolveChartColor("--chart-5", CHART_FALLBACK_COLORS[4]),
+  ];
+
+  const extended = [
+    ...base5,
+    tint(base5[0], 0.35),
+    shade(base5[1], 0.25),
+    tint(base5[2], 0.4),
+    shade(base5[3], 0.2),
+    tint(base5[4], 0.3),
+  ];
+
+  const fontFamily = getCSSVar("--font-sans") || "Satoshi, system-ui, sans-serif";
+
+  return {
+    colors: extended,
+    fontFamily,
+    fontSize: 12,
+    textColor: resolveChartColor("--foreground", "#1a1a1a"),
+    textColorSecondary: resolveChartColor("--muted-foreground", "#737373"),
+    backgroundColor: resolveChartColor("--background", "#f8f8fa"),
+    borderColor: resolveChartColor("--border", "#e5e5e5"),
+    successColor: resolveChartColor("--status-success", "#22c55e"),
+    warningColor: resolveChartColor("--status-warning", "#f59e0b"),
+    errorColor: resolveChartColor("--status-error", "#ef4444"),
+    infoColor: resolveChartColor("--status-info", "#3b82f6"),
+    containerPadding: 16,
+    animationDuration: 800,
+    animationEasing: "cubicInOut",
+  };
+}
+
+// ---------------------------------------------------------------------------
+// ECharts Theme
+// ---------------------------------------------------------------------------
+
+export function buildEChartsTheme(tokens: ChartTokens): Record<string, any> {
+  const { colors, fontFamily, fontSize, textColor, textColorSecondary, backgroundColor, borderColor } = tokens;
+
+  return {
+    color: colors,
+    backgroundColor: "transparent",
+    textStyle: { fontFamily, fontSize, color: textColor },
+    title: {
+      textStyle: { fontFamily, fontSize: 16, fontWeight: 600, color: textColor },
+      subtextStyle: { fontFamily, fontSize: 12, color: textColorSecondary },
+      top: 0, left: 0, padding: [0, 0, 16, 0],
+    },
+    legend: {
+      textStyle: { fontFamily, fontSize: 12, color: textColorSecondary },
+      icon: "roundRect", itemWidth: 12, itemHeight: 12, itemGap: 16, bottom: 0,
+    },
+    tooltip: {
+      backgroundColor, borderColor, borderWidth: 1, borderRadius: 8, padding: [8, 12],
+      textStyle: { fontFamily, fontSize: 12, color: textColor },
+      extraCssText: "box-shadow: 0 4px 12px rgba(0,0,0,0.08); backdrop-filter: blur(8px);",
+    },
+    grid: { top: 48, right: 16, bottom: 48, left: 16, containLabel: true },
+    categoryAxis: {
+      axisLine: { show: true, lineStyle: { color: borderColor } },
+      axisTick: { show: false },
+      axisLabel: { fontFamily, fontSize: 11, color: textColorSecondary },
+      splitLine: { show: false },
+    },
+    valueAxis: {
+      axisLine: { show: false }, axisTick: { show: false },
+      axisLabel: { fontFamily, fontSize: 11, color: textColorSecondary },
+      splitLine: { show: true, lineStyle: { color: borderColor, type: "dashed", opacity: 0.6 } },
+    },
+    bar: {
+      barMaxWidth: 32,
+      itemStyle: { borderRadius: [4, 4, 0, 0] },
+      emphasis: {
+        focus: "series", blurScope: "coordinateSystem",
+        itemStyle: { shadowBlur: 12, shadowOffsetY: 3, shadowColor: "rgba(0,0,0,0.2)", borderWidth: 1, borderColor: "rgba(255,255,255,0.4)" },
+      },
+    },
+    line: {
+      smooth: true, symbol: "circle", symbolSize: 6, lineStyle: { width: 2.5 },
+      emphasis: {
+        focus: "series", blurScope: "coordinateSystem", lineStyle: { width: 4 },
+        itemStyle: { borderWidth: 3, borderColor: "#fff", shadowBlur: 8, shadowColor: "rgba(0,0,0,0.18)" },
+      },
+    },
+    pie: {
+      radius: ["0%", "70%"],
+      itemStyle: { borderColor: backgroundColor, borderWidth: 3, borderRadius: 4 },
+      label: { fontFamily, fontSize: 12, color: textColor },
+      emphasis: {
+        focus: "self",
+        itemStyle: { shadowBlur: 16, shadowOffsetY: 4, shadowColor: "rgba(0,0,0,0.25)", borderWidth: 3, borderColor: "rgba(255,255,255,0.6)" },
+      },
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Theme Registration
+// ---------------------------------------------------------------------------
+
+const THEME_NAME = "bluecopa";
+let _registered = false;
+
+export function registerChartTheme(): string {
+  const tokens = resolveChartTokens();
+  const theme = buildEChartsTheme(tokens);
+  echarts.registerTheme(THEME_NAME, theme);
+  _registered = true;
+  return THEME_NAME;
+}
+
+export function isChartThemeRegistered(): boolean {
+  return _registered;
+}
+
+export const CHART_THEME_NAME = THEME_NAME;