Update docstrings and screenshot

vizro-core/changelog.d/20240701_084052_huong_li_nguyen_update_docs_kpi.md

@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/_dev/app.py

@@ -5,9 +5,7 @@
 from vizro import Vizro
 from vizro.figures import kpi_card, kpi_card_reference
 
-df_kpi = pd.DataFrame(
-    {"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Reference Zero": [0, 0, 0], "Category": ["A", "B", "C"]}
-)
+df_kpi = pd.DataFrame({"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Category": ["A", "B", "C"]})
 
 example_cards = [
     kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
@@ -31,28 +29,28 @@
         data_frame=df_kpi,
         value_column="Actual",
         reference_column="Reference",
-        title="Delta Positive",
+        title="KPI reference (pos)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
         reference_column="Reference",
         agg_func="median",
-        title="Delta Negative",
+        title="KPI reference (neg)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
-        reference_column="Actual",
-        title="Delta Zero",
+        reference_column="Reference",
+        title="KPI reference with formatting",
         value_format="{value:.2f}$",
         reference_format="{delta:.2f}$ vs. last year ({reference:.2f}$)",
     ),
     kpi_card_reference(
         data_frame=df_kpi,
         value_column="Actual",
-        reference_column="Reference Zero",
-        title="Reference Zero",
+        reference_column="Reference",
+        title="KPI reference with icon",
         icon="shopping_cart",
     ),
 ]

vizro-core/src/vizro/figures/kpi_cards.py

@@ -104,7 +104,7 @@ def kpi_card_reference(  # noqa: PLR0913
              - "{value:,}": Formats the value with comma as a thousands separator.
 
         reference_format: Format string to be applied to the reference. For more details on possible placeholders, see
-            docstring on `value_format`. Defaults to "{delta_relative:.1%} vs. reference ({reference})".
+            docstring on `value_format`. Defaults to "{delta_relative:+.1%} vs. reference ({reference})".
         agg_func: String function name to be used for aggregating the data. Common options include
             "sum", "mean" or "median". Default is "sum". For more information on possible functions, see
             https://stackoverflow.com/questions/65877567/passing-function-names-as-strings-to-pandas-groupby-aggregrate.