Closed Stamates closed 2 years ago
@Stamates Here is the static svg code that would be the base for the doughnut chart in the component.... It is shaped and would work similarly to the progress chart. I left the code that adds the colors and the table for accessibility readers.
<figure data-testid="lc-live-progress-component" role="img" class="chart--doughnut" aria-label="Doughnut chart visualizing <%= @chart.title %>" alt="Progress chart visualizing <%= Chart.title(@chart) %>" tabindex="0" phx-target="<%= @myself %>" phx-focus="show_table">
<svg width="100%" height="100%" viewBox="0 0 42 42" class="chart--doughnut">
<circle class="doughnut--center" cx="21" cy="21" r="15" fill="transparent"></circle>
<circle class="doughnut--ring" cx="21" cy="21" r="15" fill="transparent" stroke="url(#redGradient)" stroke-width="8"></circle>
<circle class="doughnut--segment" cx="21" cy="21" r="15" fill="transparent" stroke="url(#blueGradient)" stroke-width="8" stroke-dasharray="40 60" stroke-dashoffset="25"></circle>
<circle class="doughnut--segment" cx="21" cy="21" r="15" fill="transparent" stroke="url(#roseGradient)" stroke-width="8" stroke-dasharray="20 80" stroke-dashoffset="85"></circle>
<circle class="doughnut--segment" cx="21" cy="21" r="15" fill="transparent" stroke="url(#blueGradient)" stroke-width="8" stroke-dasharray="30 70" stroke-dashoffset="65"></circle>
<%= render "_color_defs.html", chart: @chart %>
</svg>
</figure>
<%= tag :table, [tabindex: "0", phx_target: @myself, phx_blur: "hide_table"] ++ maybe_show_table(@always_show_table || @show_table) %>
<caption><%= @chart.title %></caption>
<thead>
<tr>
<th scope="col">[Data title]</th>
<th scope="col">Progress</th>
</tr>
</thead>
<tr>
<th scope="row"><%= if @data.label, do: @data.label %> <%= if @data.secondary_label, do: @data.secondary_label %></th>
<td><%= @progress %>%</td>
</tr>
</table>
The stroke-width and stroke color need to be adjustable.
It looks like dialyzer might be drunk (eg outdated cache on CircleCI). I'm merging this now and dealing with it on main branch if it's failing there too.
Implement doughnut chart