diff --git a/README.md b/README.md index 1786dbe..5eafb1c 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ basic chart package Uncharted and adapts Uncharted charts for display as compone ***Charts Included***: - The Bar Chart - The Column Chart -- The Doughnut Chart +- The Donut Chart - The Line Chart - The Pie Chart - The Progress Chart diff --git a/uncharted/lib/uncharted.ex b/uncharted/lib/uncharted.ex index 3364ead..ce17ea3 100644 --- a/uncharted/lib/uncharted.ex +++ b/uncharted/lib/uncharted.ex @@ -9,12 +9,13 @@ defmodule Uncharted do @type color_name :: atom() @typedoc """ - a struct representing the dataset that the chart uses. Dfferent charts needs similar but differing information so this - is a union type + a struct representing the dataset that the chart uses. Dfferent charts need similar but differing + information so this is a union type """ @type dataset :: Uncharted.BarChart.Dataset.t() | Uncharted.ColumnChart.Dataset.t() + | Uncharted.DonutChart.Dataset.t() | Uncharted.LineChart.Dataset.t() | Uncharted.PieChart.Dataset.t() | Uncharted.ProgressChart.Dataset.t() diff --git a/uncharted/lib/uncharted/dataset.ex b/uncharted/lib/uncharted/dataset.ex new file mode 100644 index 0000000..98f935e --- /dev/null +++ b/uncharted/lib/uncharted/dataset.ex @@ -0,0 +1,26 @@ +defprotocol Uncharted.Dataset do + @doc """ + Takes an `Uncharted.dataset` data structure + and returns a label for the data names. This label + will be used as the first header of the data table + provided for accessibilty. + """ + @fallback_to_any true + @spec data_name_label(Uncharted.dataset()) :: String.t() + def data_name_label(dataset) + + @doc """ + Takes an `Uncharted.dataset` data structure + and returns a label for the data values. This label + will be used as the second header of the data table + provided for accessibilty. + """ + @fallback_to_any true + @spec data_value_label(Uncharted.dataset()) :: String.t() + def data_value_label(dataset) +end + +defimpl Uncharted.Dataset, for: Any do + def data_name_label(_), do: "Data Names" + def data_value_label(_), do: "Data Values" +end diff --git a/uncharted/lib/uncharted/donut_chart/base_chart_impl.ex b/uncharted/lib/uncharted/donut_chart/base_chart_impl.ex new file mode 100644 index 0000000..56ea6a1 --- /dev/null +++ b/uncharted/lib/uncharted/donut_chart/base_chart_impl.ex @@ -0,0 +1,19 @@ +defimpl Uncharted.DonutChart, for: Uncharted.BaseChart do + alias Uncharted.BaseChart + alias Uncharted.DonutChart.DonutSlice + + def donut_slices(%BaseChart{dataset: nil}), do: [] + + def donut_slices(%BaseChart{dataset: %{data: []}}), do: [] + + def donut_slices(%BaseChart{dataset: %{data: data}}) do + data + |> Enum.map(fn datum -> + %DonutSlice{ + label: datum.name, + percentage: hd(datum.values), + fill_color: datum.fill_color + } + end) + end +end diff --git a/uncharted/lib/uncharted/donut_chart/dataset.ex b/uncharted/lib/uncharted/donut_chart/dataset.ex new file mode 100644 index 0000000..43cf127 --- /dev/null +++ b/uncharted/lib/uncharted/donut_chart/dataset.ex @@ -0,0 +1,34 @@ +defmodule Uncharted.DonutChart.Dataset do + @moduledoc """ + Struct representing a dataset for a basic donut chart. + """ + defstruct [ + :data, + :data_name_label, + :data_value_label, + :center_value, + :center_value_fill_color, + :label, + :label_fill_color, + :secondary_label + ] + + @typep color :: atom() + @type t() :: %__MODULE__{ + data: list(Uncharted.BaseDatum.t()), + data_name_label: String.t(), + data_value_label: String.t(), + center_value: number(), + center_value_fill_color: color(), + label: String.t() | nil, + label_fill_color: color(), + secondary_label: String.t() | nil + } +end + +defimpl Uncharted.Dataset, for: Uncharted.DonutChart.Dataset do + alias Uncharted.DonutChart.Dataset + + def data_name_label(%Dataset{data_name_label: data_name_label}), do: data_name_label + def data_value_label(%Dataset{data_value_label: data_value_label}), do: data_value_label +end diff --git a/uncharted/lib/uncharted/donut_chart/donut_chart.ex b/uncharted/lib/uncharted/donut_chart/donut_chart.ex new file mode 100644 index 0000000..8efd311 --- /dev/null +++ b/uncharted/lib/uncharted/donut_chart/donut_chart.ex @@ -0,0 +1,3 @@ +defprotocol Uncharted.DonutChart do + def donut_slices(chart) +end diff --git a/uncharted/lib/uncharted/doughnut_chart/doughnut_slice.ex b/uncharted/lib/uncharted/donut_chart/donut_slice.ex similarity index 63% rename from uncharted/lib/uncharted/doughnut_chart/doughnut_slice.ex rename to uncharted/lib/uncharted/donut_chart/donut_slice.ex index 141d4f8..b22eb4b 100644 --- a/uncharted/lib/uncharted/doughnut_chart/doughnut_slice.ex +++ b/uncharted/lib/uncharted/donut_chart/donut_slice.ex @@ -1,6 +1,6 @@ -defmodule Uncharted.DoughnutChart.DoughnutSlice do +defmodule Uncharted.DonutChart.DonutSlice do @moduledoc """ - A struct representing doughnut chart slice display properties. + A struct representing donut chart slice display properties. """ defstruct [:label, :percentage, :fill_color] diff --git a/uncharted/lib/uncharted/doughnut_chart/base_chart_impl.ex b/uncharted/lib/uncharted/doughnut_chart/base_chart_impl.ex deleted file mode 100644 index f1befec..0000000 --- a/uncharted/lib/uncharted/doughnut_chart/base_chart_impl.ex +++ /dev/null @@ -1,19 +0,0 @@ -defimpl Uncharted.DoughnutChart, for: Uncharted.BaseChart do - alias Uncharted.BaseChart - alias Uncharted.DoughnutChart.DoughnutSlice - - def doughnut_slices(%BaseChart{dataset: nil}), do: [] - - def doughnut_slices(%BaseChart{dataset: %{data: []}}), do: [] - - def doughnut_slices(%BaseChart{dataset: %{data: data}}) do - data - |> Enum.map(fn datum -> - %DoughnutSlice{ - label: datum.name, - percentage: hd(datum.values), - fill_color: datum.fill_color - } - end) - end -end diff --git a/uncharted/lib/uncharted/doughnut_chart/dataset.ex b/uncharted/lib/uncharted/doughnut_chart/dataset.ex deleted file mode 100644 index 465e1ec..0000000 --- a/uncharted/lib/uncharted/doughnut_chart/dataset.ex +++ /dev/null @@ -1,23 +0,0 @@ -defmodule Uncharted.DoughnutChart.Dataset do - @moduledoc """ - Struct representing a dataset for a basic doughnut chart. - """ - defstruct [ - :data, - :center_value, - :center_value_fill_color, - :label, - :label_fill_color, - :secondary_label - ] - - @typep color :: atom() - @type t() :: %__MODULE__{ - data: Uncharted.DoughnutChart.Dataset.t(), - center_value: number(), - center_value_fill_color: color(), - label: String.t() | nil, - label_fill_color: color(), - secondary_label: String.t() | nil - } -end diff --git a/uncharted/lib/uncharted/doughnut_chart/doughnut_chart.ex b/uncharted/lib/uncharted/doughnut_chart/doughnut_chart.ex deleted file mode 100644 index 10bd97b..0000000 --- a/uncharted/lib/uncharted/doughnut_chart/doughnut_chart.ex +++ /dev/null @@ -1,3 +0,0 @@ -defprotocol Uncharted.DoughnutChart do - def doughnut_slices(chart) -end diff --git a/uncharted/lib/uncharted/progress_chart/dataset.ex b/uncharted/lib/uncharted/progress_chart/dataset.ex index 135356f..3023d58 100644 --- a/uncharted/lib/uncharted/progress_chart/dataset.ex +++ b/uncharted/lib/uncharted/progress_chart/dataset.ex @@ -13,7 +13,7 @@ defmodule Uncharted.ProgressChart.Dataset do :percentage_fill_color, :label_fill_color, progress_shape: :round, - doughnut_width: 5 + donut_width: 5 ] @typep color :: atom() @@ -27,6 +27,6 @@ defmodule Uncharted.ProgressChart.Dataset do percentage_fill_color: color(), label_fill_color: color(), progress_shape: :round | :butt | :square, - doughnut_width: number() + donut_width: number() } end diff --git a/uncharted/test/uncharted/doughnut_chart_test.exs b/uncharted/test/uncharted/doughnut_chart_test.exs index de5a9bc..0ec5b42 100644 --- a/uncharted/test/uncharted/doughnut_chart_test.exs +++ b/uncharted/test/uncharted/doughnut_chart_test.exs @@ -1,8 +1,8 @@ -defmodule Uncharted.DoughnutChartTest do +defmodule Uncharted.DonutChartTest do alias Uncharted.{ BaseChart, BaseDatum, - DoughnutChart + DonutChart } use ExUnit.Case @@ -14,30 +14,29 @@ defmodule Uncharted.DoughnutChartTest do %BaseDatum{name: "Slice Four", values: [7.0]}, %BaseDatum{name: "Slice Five", values: [22.0]} ] - @dataset %DoughnutChart.Dataset{data: @data} + @dataset %DonutChart.Dataset{data: @data} @chart %BaseChart{title: "title", dataset: @dataset} - describe "doughnut_slices/1" do + describe "donut_slices/1" do test "returns the number of slices that make up the dataset" do - assert length(DoughnutChart.doughnut_slices(@chart)) == length(@data) + assert length(DonutChart.donut_slices(@chart)) == length(@data) end - test "returns doughnut slice labels" do - doughnut_slices = Enum.map(DoughnutChart.doughnut_slices(@chart), & &1.label) + test "returns donut slice labels" do + donut_slices = Enum.map(DonutChart.donut_slices(@chart), & &1.label) labels = Enum.map(@data, & &1.name) - assert doughnut_slices + assert donut_slices |> Enum.zip(labels) |> Enum.all?(fn {actual, expected} -> actual == expected end) end test "returns correct percentages for slices" do - doughnut_slice_percentages = - Enum.map(DoughnutChart.doughnut_slices(@chart), & &1.percentage) + donut_slice_percentages = Enum.map(DonutChart.donut_slices(@chart), & &1.percentage) expected_percentages = [20.0, 24.0, 27.0, 7.0, 22.0] - assert doughnut_slice_percentages == expected_percentages + assert donut_slice_percentages == expected_percentages end end end diff --git a/uncharted_phoenix/README.md b/uncharted_phoenix/README.md index a543b98..ea97651 100644 --- a/uncharted_phoenix/README.md +++ b/uncharted_phoenix/README.md @@ -2,7 +2,7 @@ A simple ***Elixir*** charting library that generates easy to customize charts for ***Phoenix*** and ***LiveView***. ## Features -- Easily generate pie charts, doughnut charts, column charts, bar charts, progress counters, and line charts +- Easily generate pie charts, donut charts, column charts, bar charts, progress counters, and line charts - Generates responsive and accessible SVGs as LiveView components - Provides advanced styling like gradients and rounded corners - Smooth animations for updating live data to the UI @@ -220,7 +220,7 @@ defp progress_chart(from: %BaseChart{} = chart) do percentage_text_fill_color: :blue_gradient, percentage_fill_color: :rose_gradient, label_fill_color: :rose_gradient, - doughnut_width: 5, + donut_width: 5, progress_shape: :round } } @@ -278,12 +278,12 @@ scatter_plot = %BaseChart{ } ``` -### The Doughnut Chart - +### The Donut Chart + ```elixir -doughnut_chart = %BaseChart{ - title: "Best kind of doughnut", +donut_chart = %BaseChart{ + title: "Best kind of donut", colors: %{ rose_gradient: %Gradient{ start_color: "#642B73", @@ -298,7 +298,7 @@ doughnut_chart = %BaseChart{ stop_color: "#FF1379" } }, - dataset: %DoughnutChart.Dataset{ + dataset: %DonutChart.Dataset{ data: [ %BaseDatum{ name: "Cake", @@ -321,6 +321,8 @@ doughnut_chart = %BaseChart{ values: [17.0] } ], + data_name_label: "Donut Type", + data_value_label: "Percentage", center_value: 100, center_value_fill_color: :blue_gradient, label: "Donuts Tasted", diff --git a/uncharted_phoenix/lib/uncharted_phoenix/components/component_impl.ex b/uncharted_phoenix/lib/uncharted_phoenix/components/component_impl.ex index 23c1085..80ae87d 100644 --- a/uncharted_phoenix/lib/uncharted_phoenix/components/component_impl.ex +++ b/uncharted_phoenix/lib/uncharted_phoenix/components/component_impl.ex @@ -2,7 +2,7 @@ defimpl Uncharted.Component, for: Uncharted.BaseChart do alias Uncharted.BaseChart alias Uncharted.BarChart alias Uncharted.ColumnChart - alias Uncharted.DoughnutChart + alias Uncharted.DonutChart alias Uncharted.LineChart alias Uncharted.PieChart alias Uncharted.ProgressChart @@ -12,7 +12,7 @@ defimpl Uncharted.Component, for: Uncharted.BaseChart do case dataset do %BarChart.Dataset{} -> UnchartedPhoenix.LiveBarComponent %ColumnChart.Dataset{} -> UnchartedPhoenix.LiveColumnComponent - %DoughnutChart.Dataset{} -> UnchartedPhoenix.LiveDoughnutComponent + %DonutChart.Dataset{} -> UnchartedPhoenix.LiveDonutComponent %LineChart.Dataset{} -> UnchartedPhoenix.LiveLineComponent %PieChart.Dataset{} -> UnchartedPhoenix.LivePieComponent %ProgressChart.Dataset{} -> UnchartedPhoenix.LiveProgressComponent diff --git a/uncharted_phoenix/lib/uncharted_phoenix/components/live_bar.html.leex b/uncharted_phoenix/lib/uncharted_phoenix/components/live_bar.html.leex index d905a2b..51efed5 100644 --- a/uncharted_phoenix/lib/uncharted_phoenix/components/live_bar.html.leex +++ b/uncharted_phoenix/lib/uncharted_phoenix/components/live_bar.html.leex @@ -19,8 +19,8 @@