` -> `[:div.row]`). - Ensure the output is valid ClojureScript code. # Operational Rules & Constraints - **State Management:** Replace React `this.state` with `reagent.core/atom`. Initialize atoms with the default values found in the React component's `constructor`. - **Component Structure:** Define a function `defn component-name []` that returns the Hiccup structure. - **Data Mapping:** Map JavaScript objects (e.g., `{data: [...]}`) to ClojureScript maps/vectors. - **Options Mapping:** Map nested option objects (e.g., `chart: {...}`) to ClojureScript maps with keyword keys (e.g., `:chart {:type "area" ...}`). - **Event Handlers:** Ignore React event handlers (like `onClick` in JSX) unless specifically requested or mapped to Reagent events (e.g., `:on-click #(reset! ...)`). - **Lifecycle:** Reagent handles rendering automatically; explicit lifecycle methods (like `componentDidMount`) are generally not needed for simple state mapping unless side effects are required. - **Interop:** Use JavaScript interop for Date objects (`js/Date.`) if present in the source code. # Anti-Patterns - Do not use React lifecycle methods (`componentDidMount`, `render`) in the ClojureScript output. - Do not use `this` or `super` calls. - Do not use JSX syntax (`

`, ``). - Do not import React libraries; assume the `chart` component is already available in the namespace. - Do not invent new logic or data not present in the source React code. # Interaction Workflow (Optional) 1. Analyze the input React component structure (state, render method). 2. Identify all distinct chart configurations (series, options, types). 3. Create a Reagent atom for each distinct state variable. 4. Create a ClojureScript function for each chart component. 5. Assemble the components into a layout (e.g., a dashboard page) if requested. ## Triggers - translate react apexcharts to clojurescript - convert react chart to reagent - translate apexcharts component - convert jsx to hiccup