Added kpi component to models

examples/iris/blue.css

@@ -7,3 +7,7 @@
 .pf-number-content {
     color: blue;
 }
+
+.pf-kpi-content {
+    color: navy;
+}

examples/iris/main.py

@@ -33,6 +33,10 @@ def main():
             pf.Number(len(iris_df.species.unique()), "Unique species"),
             pf.Number(iris_df.sepal_length.max(), "Max Sepal Length"),
         ],
+        [
+            pf.KPI(round(taxi_df["tip"].mean(), 2), 3, "Average Tip"),
+            pf.KPI(taxi_df[taxi_df["tip"] < 1].shape[0], 1, "Tips under 1$"),
+        ],
         pf.Table(iris_df.head(10), "Iris dataset"),
         [pf.Figure(width_figure), pf.Figure(length_figure)],
         pf.PageBreak(),

pydfy/models.py

@@ -51,6 +51,22 @@ class Number(Component):
     template_path: str = field(kw_only=True, default="src/partials/number.html")
 
 
+@dataclass
+class KPI(Component):
+    current: Union[int, float]
+    target: Union[int, float]
+    title: str
+
+    template_path: str = field(kw_only=True, default="src/partials/kpi.html")
+
+    @property
+    def _percent(self) -> float:
+        if self.target == 0:
+            return float("inf")
+        else:
+            return (self.current - self.target) / self.target * 100
+
+
 @dataclass
 class Paragraph(Component):
     content: str

pydfy/template/src/partials/kpi.html

@@ -0,0 +1,8 @@
+<div class="pf-kpi border-solid border border-gray-100">
+    <div class="pf-kpi-title bg-gray-200 text-lg font-bold text-center align-top">{{ component.title }}</div>
+    <div class="pf-kpi-content mt-2 text-center">
+        <div class="text-3xl">{{ "{:,}".format(component.current) }}</div>
+        <div class="text-xs mb-2">{{ "Target: {:,} ({:+.2f} %)".format(component.target,
+                                                                       component._percent) }}</div>
+    </div>
+</div>

tests/test_render.py

@@ -78,6 +78,7 @@ def test_all_components(tmp_path, out):
         [
             pf.Number(df.shape[0], "Sample size"),
             pf.Number(df[1].max(), "Max"),
+            pf.KPI(482.537, 595.092, "Compare"),
         ],
         pf.Table(df.head(10), "Test dataset"),
         [pf.Image(asset_dir / "hist.png"), pf.Figure(figure)],