Fix colors

christophertull · christophertull · commit 97b1d0cab3d9 · 2026-01-27T09:39:23.000-08:00
diff --git a/README.md b/README.md
@@ -0,0 +1,80 @@
+# MWD WINS API Explorer
+
+A web application for exploring water meter data from the Metropolitan Water District of Southern California (MWD). Browse agencies, search meters, view real-time flow data, and visualize historical usage with interactive charts.
+
+## What is this?
+
+The Metropolitan Water District of Southern California provides public access to water delivery data through their WINS (Water Information System) API. This explorer makes that data accessible through an intuitive interface, allowing anyone to:
+
+- **Browse member agencies** - View the 27 member agencies and their sub-agencies that receive water from MWD
+- **Explore meters** - Search through service connections and meters across Southern California
+- **View real-time data** - See current flow rates for any meter
+- **Analyze historical data** - Visualize 15-minute interval flow and volume data with interactive charts
+- **Test the API** - Use the built-in playground to construct and test API calls
+
+## Features
+
+### Dashboard
+Overview of the system with quick stats on agencies, meters, and active connections.
+
+### Agency Explorer
+Browse all member agencies and retail agencies. View their service connections, filter by status (active/retired), and see connection details like capacity, feeder, and reading type.
+
+### Meter Explorer
+Search for specific meters, view detailed connection information, and analyze interval data with:
+- **Flow charts** - Line charts showing flow rate (CFS) over time
+- **Volume charts** - Bar charts showing water volume (acre-feet) per interval
+- **Cumulative charts** - Area charts showing total volume delivered over a date range
+- **Data export** - Download data as CSV or JSON
+
+### API Playground
+Test API endpoints directly, view responses, and generate code snippets for your own applications.
+
+## Data Source
+
+All data is provided by the **Metropolitan Water District of Southern California** through their public WINS API.
+
+- **API Documentation**: [https://webservices.mwdsc.org/wins/Public/Help](https://webservices.mwdsc.org/wins/Public/Help)
+- **Data Provider**: Metropolitan Water District of Southern California
+
+The WINS API provides access to:
+- Member and sub-agency information
+- Service connection details
+- Real-time flow readings
+- Historical interval data (15-minute intervals)
+- Meter readings
+
+## Technology
+
+Built with:
+- [React](https://react.dev/) - UI framework
+- [TypeScript](https://www.typescriptlang.org/) - Type safety
+- [Vite](https://vitejs.dev/) - Build tool
+- [Tailwind CSS](https://tailwindcss.com/) - Styling
+- [React Query](https://tanstack.com/query) - Data fetching and caching
+- [Recharts](https://recharts.org/) - Charts and visualizations
+- [React Router](https://reactrouter.com/) - Navigation
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## License
+
+This project is open source. The data displayed is public information provided by MWD.
+
+---
+
+*This application is not affiliated with or endorsed by the Metropolitan Water District of Southern California. It is an independent tool for exploring publicly available data.*
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -11,12 +11,12 @@ export function Header() {
   const location = useLocation()
 
   return (
-    <header className="bg-mwd-blue-800 border-b border-mwd-blue-700 sticky top-0 z-50">
+    <header className="sticky top-0 z-50 border-b border-mwd-blue-900" style={{ backgroundColor: '#164876' }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16">
           <Link to="/" className="flex items-center gap-3">
             <svg
-              className="h-8 w-8 text-mwd-blue-400"
+              className="h-8 w-8 text-white"
               viewBox="0 0 24 24"
               fill="currentColor"
             >
@@ -36,8 +36,8 @@ export function Header() {
                   to={item.path}
                   className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
                     isActive
-                      ? 'bg-mwd-blue-400 text-mwd-blue-900'
-                      : 'text-mwd-blue-200 hover:text-white hover:bg-mwd-blue-700'
+                      ? 'bg-white text-mwd-blue-800'
+                      : 'text-white/80 hover:text-white hover:bg-white/10'
                   }`}
                 >
                   {item.name}
@@ -50,7 +50,7 @@ export function Header() {
             href="https://webservices.mwdsc.org/wins/Public/Help"
             target="_blank"
             rel="noopener noreferrer"
-            className="hidden sm:flex items-center gap-1 text-sm text-mwd-blue-300 hover:text-white"
+            className="hidden sm:flex items-center gap-1 text-sm text-white/80 hover:text-white"
           >
             <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -61,7 +61,7 @@ export function Header() {
       </div>
 
       {/* Mobile navigation */}
-      <nav className="md:hidden border-t border-mwd-blue-700 px-4 py-2 flex gap-1 overflow-x-auto">
+      <nav className="md:hidden border-t border-mwd-blue-900 px-4 py-2 flex gap-1 overflow-x-auto" style={{ backgroundColor: '#164876' }}>
         {navigation.map((item) => {
           const isActive = location.pathname === item.path
           return (
@@ -70,8 +70,8 @@ export function Header() {
               to={item.path}
               className={`px-3 py-1.5 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
                 isActive
-                  ? 'bg-mwd-blue-400 text-mwd-blue-900'
-                  : 'text-mwd-blue-200 hover:text-white hover:bg-mwd-blue-700'
+                  ? 'bg-white text-mwd-blue-800'
+                  : 'text-white/80 hover:text-white hover:bg-white/10'
               }`}
             >
               {item.name}
diff --git a/src/components/common/StatCard.tsx b/src/components/common/StatCard.tsx
@@ -17,7 +17,7 @@ export function StatCard({ label, value, icon, subtext, trend }: StatCardProps)
       <div className="flex items-start justify-between">
         <div>
           <p className="text-sm font-medium text-mwd-blue-600">{label}</p>
-          <p className="mt-1 text-2xl font-semibold text-mwd-blue-800">{value}</p>
+          <p className="mt-1 text-2xl font-semibold" style={{ color: '#2e74a8' }}>{value}</p>
           {subtext && <p className="mt-1 text-sm text-mwd-blue-500">{subtext}</p>}
           {trend && (
             <p
@@ -31,7 +31,7 @@ export function StatCard({ label, value, icon, subtext, trend }: StatCardProps)
           )}
         </div>
         {icon && (
-          <div className="p-2 bg-lavender-100 rounded-lg text-mwd-blue-800">
+          <div className="p-2 rounded-lg" style={{ backgroundColor: '#c4ddf0', color: '#2e74a8' }}>
             {icon}
           </div>
         )}
diff --git a/src/pages/ApiPlayground.tsx b/src/pages/ApiPlayground.tsx
@@ -185,9 +185,10 @@ print(data)`
                     onClick={() => setCodeLanguage(lang)}
                     className={`px-3 py-1 text-xs font-medium rounded ${
                       codeLanguage === lang
-                        ? 'bg-mwd-blue-800 text-white'
+                        ? 'text-white'
                         : 'bg-lavender-100 text-mwd-blue-700 hover:bg-lavender-200'
                     }`}
+                    style={codeLanguage === lang ? { backgroundColor: '#164876' } : undefined}
                   >
                     {lang === 'javascript' ? 'JS' : lang === 'python' ? 'Python' : 'cURL'}
                   </button>
diff --git a/src/pages/MeterExplorer.tsx b/src/pages/MeterExplorer.tsx
@@ -264,16 +264,16 @@ export function MeterExplorer() {
                 {/* Connection Details & Current Flow */}
                 <div className="card p-4">
                   <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
-                    <div className="bg-mwd-blue-800 rounded-lg p-3">
-                      <p className="text-xs font-medium text-white/80">Current Flow</p>
+                    <div className="bg-lavender-100 rounded-lg p-3 border-2 border-mwd-blue-400">
+                      <p className="text-xs font-medium text-mwd-blue-600">Current Flow</p>
                       {flowLoading ? (
-                        <p className="text-xl font-bold text-white">...</p>
+                        <p className="text-xl font-bold" style={{ color: '#2e74a8' }}>...</p>
                       ) : currentFlow && currentFlow[0] ? (
-                        <p className="text-xl font-bold text-white">
+                        <p className="text-xl font-bold" style={{ color: '#2e74a8' }}>
                           {currentFlow[0].Flow} <span className="text-xs font-normal">CFS</span>
                         </p>
                       ) : (
-                        <p className="text-xl font-bold text-white">N/A</p>
+                        <p className="text-xl font-bold" style={{ color: '#2e74a8' }}>N/A</p>
                       )}
                     </div>
                     {connectionInfo && (
@@ -413,9 +413,10 @@ export function MeterExplorer() {
                               onClick={() => setChartType(type)}
                               className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
                                 chartType === type
-                                  ? 'bg-mwd-blue-800 text-white'
+                                  ? 'text-white'
                                   : 'bg-lavender-100 text-mwd-blue-700 hover:bg-lavender-200'
                               }`}
+                              style={chartType === type ? { backgroundColor: '#164876' } : undefined}
                             >
                               {type === 'flow' ? 'Flow' : type === 'volume' ? 'Volume' : 'Cumulative'}
                             </button>
@@ -440,7 +441,7 @@ export function MeterExplorer() {
                               <YAxis tick={{ fontSize: 12 }} tickLine={false} axisLine={false} label={{ value: 'Flow (CFS)', angle: -90, position: 'insideLeft' }} />
                               <Tooltip contentStyle={{ backgroundColor: 'white', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
                               <Legend />
-                              <Line type="monotone" dataKey="Flow" stroke="#2c3c5b" strokeWidth={2} dot={false} name="Flow (CFS)" />
+                              <Line type="monotone" dataKey="Flow" stroke="#2e74a8" strokeWidth={2} dot={false} name="Flow (CFS)" />
                             </LineChart>
                           ) : chartType === 'volume' ? (
                             <BarChart data={chartData}>
@@ -449,7 +450,7 @@ export function MeterExplorer() {
                               <YAxis tick={{ fontSize: 12 }} tickLine={false} axisLine={false} label={{ value: 'Volume (AF)', angle: -90, position: 'insideLeft' }} />
                               <Tooltip contentStyle={{ backgroundColor: 'white', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
                               <Legend />
-                              <Bar dataKey="Volume" fill="#82aed6" name="Volume (AF)" />
+                              <Bar dataKey="Volume" fill="#4a90c4" name="Volume (AF)" />
                             </BarChart>
                           ) : (
                             <AreaChart data={chartData}>
@@ -458,7 +459,7 @@ export function MeterExplorer() {
                               <YAxis tick={{ fontSize: 12 }} tickLine={false} axisLine={false} label={{ value: 'Cumulative Volume (AF)', angle: -90, position: 'insideLeft' }} />
                               <Tooltip contentStyle={{ backgroundColor: 'white', border: '1px solid #e5e7eb', borderRadius: '8px' }} />
                               <Legend />
-                              <Area type="monotone" dataKey="cumulativeVolume" stroke="#2c3c5b" fill="#82aed6" name="Cumulative Volume (AF)" />
+                              <Area type="monotone" dataKey="cumulativeVolume" stroke="#2e74a8" fill="#4a90c4" fillOpacity={0.6} name="Cumulative Volume (AF)" />
                             </AreaChart>
                           )}
                         </ResponsiveContainer>
