I am seeking to create a reusable SVG chart using Angularjs and I have some inquiries regarding directives and controllers.
Initially, I would like the markup to look something like this, rendering a chart with form elements that impact the internal state and data visualization:
<scatterChart></scatterChart>
=>
<div class="scatterChart">
<div> [Form elements] </div>
<svg>
[Data visualization]
</svg>
</div>
Query 1: Controller, Directive, Module
Would it be logical to develop this as a single directive with a separate controller? Or should the controller be embedded within the directive or possibly create a module?
Query 2: Model/State to SVG render
Assuming the chart controller has an internal state like this:
scope.model = {
xAxis : "xyz",
yAxis : "abc"
}
A modification in the model should trigger a re-rendering of the chart. What is the most efficient way to share all user-controlled attributes of the charts between the controller and directive while also allowing for some dependent/private attributes in the directive?
Query 3: API
How can an initial state be passed to the chart? Through attributes? And what if it is a state with multiple parameters (e.g., 20)?
<scatterChart xAxis="abc"></scatterChart>