From 919e648e8f63aee9241f48d229e3b2bc3d76e1c5 Mon Sep 17 00:00:00 2001
From: Josseline Perdomo <josselineperdomoc@gmail.com>
Date: Aug 23 2021 15:54:55 +0000
Subject: Added style to plotly chart


Signed-off-by: Josseline Perdomo <josselineperdomoc@gmail.com>

---

diff --git a/contributor_trends/dashboard/figures.py b/contributor_trends/dashboard/figures.py
index 0f12b39..28c600b 100644
--- a/contributor_trends/dashboard/figures.py
+++ b/contributor_trends/dashboard/figures.py
@@ -1,9 +1,17 @@
+from dataclasses import asdict
+
 import plotly.express as px
 from plotly.graph_objs import Figure
 
 from contributor_trends.dashboard.datasets import Dataset
+from contributor_trends.dashboard.utils.style import FigureStyle
 
 
 def area_chart(dataset: Dataset) -> Figure:
-    fig = px.area(dataset.data, x=dataset.x, y=dataset.y)
+    fig = px.area(dataset.data, x=dataset.x, y=dataset.y, **asdict(FigureStyle.CHART))
+
+    fig.update_layout(**asdict(FigureStyle.LAYOUT))
+    fig.update_xaxes(**asdict(FigureStyle.X_AXE))
+    fig.update_yaxes(**asdict(FigureStyle.Y_AXE))
+
     return fig
diff --git a/contributor_trends/dashboard/utils/style.py b/contributor_trends/dashboard/utils/style.py
new file mode 100644
index 0000000..a70631c
--- /dev/null
+++ b/contributor_trends/dashboard/utils/style.py
@@ -0,0 +1,58 @@
+from dataclasses import dataclass, field
+from enum import Enum
+from typing import Optional, List
+
+import plotly.express as px
+
+__all__ = ["Colors", "FigureStyle"]
+
+
+@dataclass
+class BoxModel:
+    l: Optional[int] = 0  # left, in px
+    r: Optional[int] = 0  # right, in px
+    b: Optional[int] = 0  # bottom, in px
+    t: Optional[int] = 0  # top, in px
+
+
+@dataclass
+class LayoutProperties:
+    margin: Optional[BoxModel] = BoxModel()
+    font_size: Optional[int] = 16  # in px
+    font_family: Optional[str] = "Arial, sans-serif"
+
+
+@dataclass
+class AxeProperties:
+    title_standoff: Optional[int] = 0
+
+
+@dataclass
+class ChartProperties:
+    color_discrete_sequence: Optional[List[str]] = field(
+        default_factory=lambda: px.colors.qualitative.Plotly
+    )
+
+
+class Colors(Enum):
+    GREEN = "#38bc3b"
+    MAGENTA = "#db3279"
+    YELLOW = "#ffd117"
+    BLUE = "#3c6eb4"
+    VIOLET = "#603e79"
+    LIGHT_BLUE = "#51a2da"
+    LIGHT_GREEN = "#afea85"
+    LIGHT_ORANGE = "#f5a326"
+    LIGHT_VIOLET = "#b193c8"
+    DARK_BLUE = "#294172"
+
+    @classmethod
+    def list(cls):
+        return list(map(lambda c: c.value, cls))
+
+
+class FigureStyle:
+    CHART = ChartProperties(color_discrete_sequence=Colors.list())
+    LAYOUT = LayoutProperties(font_size=14, font_family="Open Sans, sans-serif")
+    X_AXE = AxeProperties(title_standoff=30)
+    Y_AXE = AxeProperties(title_standoff=30)