Component Options Reference

const [componentKey, setComponentKey] = useState(0);
const [token, setToken] = useState(initialToken);

// When updating props
const updateProps = (newToken) => {
  setToken(newToken);
  setComponentKey(prev => prev + 1); // Force re-render
};

return (
  <dbn-dashboard 
    key={componentKey}
    token={token}
    dashboard-id="your-dashboard-id"
  />
);

const [isLoading, setIsLoading] = useState(false);
const [token, setToken] = useState(initialToken);

const updateToken = async (newToken) => {
  setIsLoading(true);
  // Brief delay to ensure component unmounts
  await new Promise(resolve => setTimeout(resolve, 100));
  setToken(newToken);
  setIsLoading(false);
};

return (
  <>
    {isLoading ? (
      <div>Loading...</div>
    ) : (
      <dbn-dashboard token={token} dashboard-id="your-dashboard-id" />
    )}
  </>
);

// ✅ Correct - Array of hex colors
const chartColors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"];

// ❌ Incorrect - Invalid color format
const chartColors = ["red", "blue"]; // Use hex codes instead

<!-- ✅ Correct -->
<dbn-dashboard 
  chart-colors={JSON.stringify(["#FF6B6B", "#4ECDC4"])}
  options={JSON.stringify({
    chartColors: ["#FF6B6B", "#4ECDC4"]
  })}
/>

<!-- ❌ Incorrect -->
<dbn-dashboard chart-colors={["#FF6B6B", "#4ECDC4"]} />

/* Your custom colors might be overridden */
.your-dashboard-container {
  --chart-color-1: #FF6B6B !important;
  --chart-color-2: #4ECDC4 !important;
}

<dbn-dashboard 
  token={token}
  dashboard-id="your-dashboard-id"
  custom-messages={JSON.stringify({
    tokenExpiry: "Your session has expired. Redirecting to login...",
    tokenAbsent: "Please log in to view this dashboard."
  })}
  handle-server-event="handleAuthError"
/>

// Define globally accessible function
window.handleAuthError = (event) => {
  if (event.type === 'TOKEN_EXPIRED') {
    // Redirect to login or refresh token
    window.location.href = '/login';
  }
};

const useTokenRefresh = () => {
  const [token, setToken] = useState(null);
  
  useEffect(() => {
    const refreshToken = async () => {
      try {
        const response = await fetch('/api/refresh-token');
        const { token: newToken } = await response.json();
        setToken(newToken);
      } catch (error) {
        console.error('Token refresh failed:', error);
      }
    };
    
    // Refresh token every 50 minutes (assuming 1-hour expiry)
    const interval = setInterval(refreshToken, 50 * 60 * 1000);
    refreshToken(); // Initial call
    
    return () => clearInterval(interval);
  }, []);
  
  return token;
};

<dbn-dashboard 
  hide-date-picker-options={JSON.stringify([
    "yesterday", 
    "last week", 
    "this month"
  ])}
/>

<dbn-dashboard 
  theme={JSON.stringify({
    multiSelectFilterDropdown: {
      badgeColor: "#007bff",
      badgeTextColor: "white"
    }
  })}
  admin-theme-options={JSON.stringify({
    dashboard: {
      selectBoxSize: "large",
      selectBoxVariant: "floating",
      selectBoxBorderRadius: "8px",
      selectBoxTextColor: "#333"
    }
  })}
/>

const globalFilters = {
  "Region": {
    options: [
      { value: "north", label: "North America" },
      { value: "europe", label: "Europe" },
      { value: "asia", label: "Asia Pacific" }
    ],
    defaultOption: "north"
  },
  "Date Range": {
    defaultOption: { startDate: "2024-01-01", endDate: "2024-12-31" },
    datePresetOptions: [
      {
        type: "last",
        interval: 30,
        timeGrain: "day",
        label: "Last 30 Days"
      }
    ]
  }
};

// Check token validity
const validateToken = async (token) => {
  try {
    const response = await fetch('/api/validate-token', {
      headers: { Authorization: `Bearer ${token}` }
    });
    return response.ok;
  } catch (error) {
    console.error('Token validation failed:', error);
    return false;
  }
};

// Verify dashboard exists
const checkDashboard = async (dashboardId) => {
  try {
    const response = await fetch(`/api/dashboards/${dashboardId}`);
    return response.ok;
  } catch (error) {
    console.error('Dashboard check failed:', error);
    return false;
  }
};

// Ensure web components are imported
import '@databrainhq/plugin/web';

// For TypeScript, add declarations
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'dbn-dashboard': any;
      'dbn-metric': any;
    }
  }
}

// Check browser console for CORS errors
// Ensure your backend allows requests from your domain

const DashboardWithTenancy = ({ userId, tenantId }) => {
  const [token, setToken] = useState(null);
  
  useEffect(() => {
    const fetchTenantToken = async () => {
      const response = await fetch('/api/guest-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          clientId: userId,
          tenantId: tenantId,
          dataAppName: 'your-app-name'
        })
      });
      const { token } = await response.json();
      setToken(token);
    };
    
    fetchTenantToken();
  }, [userId, tenantId]);
  
  if (!token) return <div>Loading...</div>;
  
  return (
    <dbn-dashboard 
      token={token}
      dashboard-id="tenant-specific-dashboard"
    />
  );
};

// Node.js example
app.post('/api/guest-token', async (req, res) => {
  const { clientId, tenantId, dataAppName } = req.body;
  
  try {
    const response = await fetch('https://api.usedatabrain.com/api/v2/guest-token/create', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.DATABRAIN_API_TOKEN}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        clientId: `${tenantId}_${clientId}`, // Prefix with tenant
        dataAppName: dataAppName
      })
    });
    
    const data = await response.json();
    res.json({ token: data.token });
  } catch (error) {
    res.status(500).json({ error: 'Token generation failed' });
  }
});

<dbn-metric 
  chart-renderer-type="canvas"
  token={token}
  metric-id="large-dataset-metric"
/>

<dbn-dashboard 
  options={JSON.stringify({
    disableMainLoader: true,
    disableMetricLoader: true,
    shouldFitFullScreen: true,
    disableUnderlyingData: true
  })}
/>

const LazyDashboard = ({ dashboardId }) => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);
  
  return (
    <div ref={ref}>
      {isVisible ? (
        <dbn-dashboard 
          token={token}
          dashboard-id={dashboardId}
        />
      ) : (
        <div>Loading dashboard...</div>
      )}
    </div>
  );
};

const ResponsiveMetric = () => {
  const [dimensions, setDimensions] = useState({ width: 500, height: 300 });
  
  useEffect(() => {
    const handleResize = () => {
      const container = document.getElementById('metric-container');
      if (container) {
        setDimensions({
          width: container.offsetWidth,
          height: Math.min(container.offsetWidth * 0.6, 400)
        });
      }
    };
    
    window.addEventListener('resize', handleResize);
    handleResize(); // Initial call
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return (
    <div id="metric-container">
      <dbn-metric 
        token={token}
        metric-id="responsive-metric"
        width={dimensions.width}
        height={dimensions.height}
      />
    </div>
  );
};

.dashboard-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 10px;
  }
  
  dbn-dashboard {
    --metric-card-padding: 8px;
    --font-size-small: 12px;
  }
}

@media (max-width: 480px) {
  dbn-dashboard {
    --chart-height: 200px;
    --hide-chart-legend: true;
  }
}

const isMobile = window.innerWidth < 768;

const mobileOptions = {
  hideMetricCardShadow: true,
  shouldFitFullScreen: true,
  chartAppearance: {
    chartLegend: { show: false },
    chartMargin: { marginTop: 5, marginLeft: 5, marginRight: 5, marginBottom: 5 }
  }
};

<dbn-dashboard 
  options={JSON.stringify(isMobile ? mobileOptions : desktopOptions)}
/>

window.databrainErrorHandler = (error) => {
  // Log to your analytics service
  analytics.track('Databrain Error', {
    error: error.message,
    component: error.component,
    timestamp: new Date().toISOString()
  });
  
  // Show user-friendly message
  if (error.type === 'NETWORK_ERROR') {
    showToast('Connection issue. Please check your internet connection.');
  } else if (error.type === 'AUTH_ERROR') {
    redirectToLogin();
  } else {
    showToast('Something went wrong. Please try again.');
  }
};

class DashboardErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('Dashboard Error:', error, errorInfo);
    // Log to error reporting service
  }
  
  render() {
    if (this.state.hasError) {
      return (
        <div className="error-fallback">
          <h3>Dashboard temporarily unavailable</h3>
          <button onClick={() => this.setState({ hasError: false })}>
            Try Again
          </button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

// Usage
<DashboardErrorBoundary>
  <dbn-dashboard token={token} dashboard-id="dashboard-id" />
</DashboardErrorBoundary>

const tooltipConfig = {
  chartTooltip: {
    labelStyle: {
      size: 16,
      family: "Arial, sans-serif",
      weight: 600,
      color: "#2c3e50"
    },
    valueStyle: {
      size: 14,
      family: "Arial, sans-serif", 
      weight: 400,
      color: "#34495e"
    }
  }
};

const legendConfig = {
  chartLegend: {
    show: true,
    fixedPosition: "bottom-center", // or use enableVariablePosition
    enableVariablePosition: false,
    legendAppearance: "horizontal",
    truncateLegend: 30,
    legendShape: "roundRect",
    fontSize: 12,
    fontWeight: 500,
    fontFamily: "Inter, sans-serif",
    color: "#2c3e50",
    disableLegendScrolling: false
  }
};

<dbn-metric 
  chart-appearance={JSON.stringify({
    ...tooltipConfig,
    ...legendConfig,
    chartLabel: {
      position: "top",
      radialChartposition: "outside"
    },
    chartMargin: {
      marginTop: 20,
      marginLeft: 20,
      marginRight: 20,
      marginBottom: 40
    },
    verticalAxis: {
      hideAxisLines: false,
      hideSplitLines: true,
      hideAxisLabels: false,
      axisName: "Revenue ($)",
      fontSize: 12,
      fontFamily: "Inter"
    },
    horizontalAxis: {
      hideAxisLines: false,
      hideSplitLines: true,
      hideAxisLabels: false,
      axisName: "Time Period",
      fontSize: 12,
      fontFamily: "Inter"
    }
  })}
/>