unchartedelixir / uncharted

33 stars 8 forks source link

Feature/doughnut chart #53

Closed Stamates closed 2 years ago

Stamates commented 2 years ago

Implement doughnut chart

rheubach commented 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.

tmecklem commented 2 years ago

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.