push initial code

DatabaseCalculator.mdx

@@ -0,0 +1,319 @@
+export const DatabaseCalculator = () => {
+  const [values, setValues] = useState({
+    database_type: 'mysql',
+    storage_size: 100,
+    storage_unit: 'GB',
+    concurrent_connections: 100,
+    queries_per_second: 1000,
+    backup_frequency: 'daily',
+    replication_factor: 1
+  });
+
+  const [results, setResults] = useState({});
+
+  const handleChange = (name, value) => {
+    setValues(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const calculate = () => {
+    const storageBytes = values.storage_size * (values.storage_unit === 'GB' ? 1024 * 1024 * 1024 : 1024 * 1024);
+
+    // Database-specific multipliers for resource requirements
+    const dbMultipliers = {
+      mysql: { cpu: 1.0, memory: 1.0, storage: 1.0 },
+      postgresql: { cpu: 1.2, memory: 1.3, storage: 1.1 },
+      mongodb: { cpu: 1.1, memory: 1.5, storage: 1.2 },
+      redis: { cpu: 0.8, memory: 2.0, storage: 0.5 },
+      cassandra: { cpu: 1.3, memory: 1.4, storage: 1.5 }
+    };
+
+    const multiplier = dbMultipliers[values.database_type] || dbMultipliers.mysql;
+
+    // Calculate resource requirements
+    const baseMemoryGB = Math.max(2, (values.concurrent_connections * 0.01) + (values.queries_per_second * 0.001));
+    const recommendedMemoryGB = baseMemoryGB * multiplier.memory * values.replication_factor;
+
+    const baseCPUCores = Math.max(2, (values.queries_per_second * 0.0001) + (values.concurrent_connections * 0.001));
+    const recommendedCPUCores = baseCPUCores * multiplier.cpu;
+
+    const totalStorageGB = (storageBytes / (1024 * 1024 * 1024)) * multiplier.storage * values.replication_factor;
+
+    // Backup storage calculation
+    const backupMultiplier = values.backup_frequency === 'hourly' ? 24 : values.backup_frequency === 'daily' ? 7 : 4;
+    const backupStorageGB = totalStorageGB * 0.3 * backupMultiplier; // Assume 30% compression
+
+    setResults({
+      recommended_memory: recommendedMemoryGB,
+      recommended_cpu: recommendedCPUCores,
+      total_storage: totalStorageGB,
+      backup_storage: backupStorageGB,
+      total_storage_with_backup: totalStorageGB + backupStorageGB
+    });
+  };
+
+  useEffect(() => {
+    calculate();
+  }, [values]);
+
+  const databaseTypes = [
+    { value: 'mysql', label: 'MySQL' },
+    { value: 'postgresql', label: 'PostgreSQL' },
+    { value: 'mongodb', label: 'MongoDB' },
+    { value: 'redis', label: 'Redis' },
+    { value: 'cassandra', label: 'Cassandra' }
+  ];
+
+  const storageUnits = [
+    { value: 'MB', label: 'MB' },
+    { value: 'GB', label: 'GB' }
+  ];
+
+  const backupFrequencies = [
+    { value: 'hourly', label: 'Hourly' },
+    { value: 'daily', label: 'Daily' },
+    { value: 'weekly', label: 'Weekly' }
+  ];
+
+  const inputFields = [
+    { 
+      name: 'database_type', 
+      label: 'Database Type', 
+      type: 'select', 
+      options: databaseTypes,
+      description: 'The type of database system you are planning to use.' 
+    },
+    { 
+      name: 'storage_size', 
+      label: 'Storage Size', 
+      type: 'number', 
+      unit: values.storage_unit,
+      description: 'The amount of storage space required for your database.' 
+    },
+    { 
+      name: 'storage_unit', 
+      label: 'Storage Unit', 
+      type: 'select', 
+      options: storageUnits,
+      description: 'The unit of measurement for storage size.' 
+    },
+    { 
+      name: 'concurrent_connections', 
+      label: 'Concurrent Connections', 
+      type: 'number', 
+      unit: 'Connections',
+      description: 'The maximum number of simultaneous database connections.' 
+    },
+    { 
+      name: 'queries_per_second', 
+      label: 'Queries Per Second', 
+      type: 'number', 
+      unit: 'QPS',
+      description: 'The expected number of database queries per second.' 
+    },
+    { 
+      name: 'backup_frequency', 
+      label: 'Backup Frequency', 
+      type: 'select', 
+      options: backupFrequencies,
+      description: 'How often you plan to create database backups.' 
+    },
+    { 
+      name: 'replication_factor', 
+      label: 'Replication Factor', 
+      type: 'number', 
+      unit: 'Replicas',
+      description: 'The number of database replicas for high availability.' 
+    }
+  ];
+
+  const resultFields = [
+    { name: 'recommended_memory', label: 'Recommended Memory', unit: 'GB', description: 'The recommended amount of RAM for optimal performance.' },
+    { name: 'recommended_cpu', label: 'Recommended CPU Cores', unit: 'Cores', description: 'The recommended number of CPU cores.' },
+    { name: 'total_storage', label: 'Total Storage Required', unit: 'GB', description: 'The total storage space required including replication.' },
+    { name: 'backup_storage', label: 'Backup Storage', unit: 'GB', description: 'Additional storage required for backups.' },
+    { name: 'total_storage_with_backup', label: 'Total with Backups', unit: 'GB', description: 'Total storage including backup space.' }
+  ];
+
+  return (
+    <div style={{ 
+      maxWidth: '800px', 
+      margin: '0 auto', 
+      padding: '20px',
+      fontFamily: 'system-ui, -apple-system, sans-serif'
+    }}>
+      <div style={{
+        backgroundColor: '#f8f9fa',
+        border: '1px solid #e9ecef',
+        borderRadius: '8px',
+        padding: '24px',
+        marginBottom: '24px'
+      }}>
+        <h3 style={{ 
+          margin: '0 0 20px 0', 
+          color: '#495057',
+          fontSize: '1.25rem',
+          fontWeight: '600'
+        }}>
+          Database Sizing Calculator
+        </h3>
+
+        <div style={{ marginBottom: '24px' }}>
+          <h4 style={{ 
+            margin: '0 0 16px 0',
+            color: '#6c757d',
+            fontSize: '1rem',
+            fontWeight: '500'
+          }}>
+            Input Parameters
+          </h4>
+
+          <div style={{ 
+            display: 'grid', 
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+            gap: '16px' 
+          }}>
+            {inputFields.map(field => (
+              <div key={field.name} style={{ marginBottom: '12px' }}>
+                <div style={{ 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  marginBottom: '4px' 
+                }}>
+                  <label 
+                    htmlFor={field.name}
+                    title={field.description}
+                    style={{ 
+                      marginRight: 'auto',
+                      fontSize: '0.875rem',
+                      fontWeight: '500',
+                      color: '#495057'
+                    }}
+                  >
+                    {field.label}
+                  </label>
+
+                  {field.type === 'select' ? (
+                    <select
+                      id={field.name}
+                      name={field.name}
+                      value={values[field.name]}
+                      onChange={(e) => handleChange(field.name, e.target.value)}
+                      title={field.description}
+                      style={{
+                        margin: '0 10px',
+                        padding: '6px 8px',
+                        border: '1px solid #ced4da',
+                        borderRadius: '4px',
+                        fontSize: '0.875rem',
+                        width: '120px'
+                      }}
+                    >
+                      {field.options.map(option => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <input
+                      id={field.name}
+                      name={field.name}
+                      type="number"
+                      value={values[field.name]}
+                      onChange={(e) => handleChange(field.name, parseFloat(e.target.value) || 0)}
+                      title={field.description}
+                      required
+                      style={{
+                        margin: '0 10px',
+                        padding: '6px 8px',
+                        border: '1px solid #ced4da',
+                        borderRadius: '4px',
+                        fontSize: '0.875rem',
+                        width: '80px'
+                      }}
+                    />
+                  )}
+
+                  <label style={{ 
+                    width: '80px',
+                    fontSize: '0.875rem',
+                    color: '#6c757d'
+                  }}>
+                    {field.unit || ''}
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <hr style={{ margin: '24px 0', border: 'none', borderTop: '1px solid #dee2e6' }} />
+
+        <div>
+          <h4 style={{ 
+            margin: '0 0 16px 0',
+            color: '#6c757d',
+            fontSize: '1rem',
+            fontWeight: '500'
+          }}>
+            Calculated Results
+          </h4>
+
+          <div style={{ 
+            display: 'grid', 
+            gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', 
+            gap: '16px' 
+          }}>
+            {resultFields.map(field => (
+              <div key={field.name} style={{ marginBottom: '12px' }}>
+                <div style={{ 
+                  display: 'flex', 
+                  alignItems: 'center', 
+                  marginBottom: '4px' 
+                }}>
+                  <label 
+                    title={field.description}
+                    style={{ 
+                      marginRight: 'auto',
+                      fontSize: '0.875rem',
+                      fontWeight: '500',
+                      color: '#495057'
+                    }}
+                  >
+                    {field.label}
+                  </label>
+                  <input
+                    type="text"
+                    value={(results[field.name] || 0).toFixed(2)}
+                    disabled
+                    title={field.description}
+                    style={{
+                      margin: '0 10px',
+                      padding: '6px 8px',
+                      border: '1px solid #ced4da',
+                      borderRadius: '4px',
+                      fontSize: '0.875rem',
+                      width: '80px',
+                      backgroundColor: '#f8f9fa',
+                      color: '#495057'
+                    }}
+                  />
+                  <label style={{ 
+                    width: '80px',
+                    fontSize: '0.875rem',
+                    color: '#6c757d'
+                  }}>
+                    {field.unit}
+                  </label>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};