How can I generate a Business Model Canvas (BMC) with text from a dataframe within a qmd-document?

[sebastiansukstorf]

Description

Hello,
I need to generate a Business Model Canvas (BMC) image or graph with text from a dataframe within a qmd-document. I tried to use mermaid or D2 diagram. Another way I tried was to generate a markdown table. The output from mermaid and D2 is not fine for my. The markdown table is also not fine. Are there any other possiblities to generate a graph or diagram with data? Any help ist wellcome. Sebastian

[mcanouil]

Did you try the project type dashboard? See https://quarto.org/docs/dashboards/.

As for "with text from a dataframe", that is really up to you to code that part.

[sebastiansukstorf]

Hello, no but I will have a closer look...Thank you.

[sebastiansukstorf]

Hi @mcanouil, I tried the dashboard with this code. But I cant insert the last row C¢ and R$. And I cant mix columns with row due to the orientation in yaml header

    ---
    title: "BMC Dashboard"
    author: Sebastian Sukstorf
    format: 
        dashboard:
            orientation: columns
    ---

    ## Column {height=70%}

    ```{python}
    #| title: Chart A
    print("Chart A")
    ```

    ## Column {height=30%}

    ```{python}
    #| title: Chart B
    print("Chart B")
    ```

    ```{python}
    #| title: Chart C
    print("Chart C")
    ```

    ## Column {height=70%}

    ```{python}
    #| title: Chart D
    print("Chart D")
    ```

    ## Column {height=30%}

    ```{python}
    #| title: Chart E
    print("Chart E")
    ```

    ```{python}
    #| title: Chart F
    print("Chart F")
    ```

    ## Column {height=70%}

    ```{python}
    #| title: Chart G
    print("Chart G")
    ```

With quarto check:

Quarto 1.4.551
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.551
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2022.12.12
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/sebastiansukstorf/Library/TinyTeX/bin/universal-darwin
      Version: 2022

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.9.13 (Conda)
      Path: /Users/sebastiansukstorf/opt/anaconda3/bin/python
      Jupyter: 4.11.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.3.3
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Library/Frameworks/R.framework/Versions/4.3-x86_64/Resources/library
      knitr: 1.45
      rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

[mcanouil]

Default icons are Bootstrap Icons (BI), see https://quarto.org/docs/dashboards/data-display.html#icon-and-color.

Your print() calls don't have any linebreaks. Why would you expect Quarto to add some?
Looking at the screenshot, are you actually talking about line wrapping? If so, that's CSS. Use your favourite browser developer/inspect mode to targets the proper elements, and add a new (S)CSS rule to your dashboard.

[sebastiansukstorf]

Hello @mcanouil, I tried to embed icons from Bootstrap if I want to work with quarto. In the documentation of quarto dashboards I found that icons can be embedded in a .valuebox.

    ```{python}
    #| content: card
    #| title: "Renevue Streams"
    #| icon: "currency-euro"
    print("Woher generieren Sie Ihr Einkommen? Welche sind Ihre wichtigsten Einnahmequellen, und gibt es Möglichkeiten, 
    diese zu diversifizieren oder zu maximieren?")
    ```

But I am using .card elements. I am wondering how I can embed an icon in a .card element? Are the any preconditions for the use of Bootstrap with quarto and what will be the best solution?

[sebastiansukstorf]

Hello @mcanouil , For the text wrapping I was given the tip to use a css ore a scss file. I tried with the a css solution css: custom_style.css.

The css file looks like this:

       div {
            overflow-wrap: break-word;
       }

But this solution is not working and I don't know where the error is? Thank you for your help. For your information: I am not a programmer or an IT specialist. I just want to use quarto for my use case if possible.

[mcanouil]

Please don't ping me in every single reply. Thank you!

[mcanouil]

1. Don't indent the code when you share it, it makes it unusable by others, see How can I generate a Business Model Canvas (BMC) with text from a dataframe within a qmd-document? #9051 (reply in thread)
2. If you intend to output text from a code cell, you need to tell Quarto it's not code, it's actual markdown that you output. Use output: asis or IPython. Code as no wrapping by default and here your cards contents are not text, but strings.

Regarding CSS and HTML, I'am afraid, you'll have to learn by yourself using online resources as this is out of Quarto scope.

[sebastiansukstorf]

My BMC dashboard working fine. But last I want to know, if I can embed an bootstrap icon in the .card header, just like the the bellow solution. Bootstrap 4 : Icon in a card header

[sebastiansukstorf]

Done! The Business Model Canvas is ready. This is the qmd code:

---
title: "Business Model Canvas"
format: 
    dashboard:
        theme: default
        embed-resources: true
        css: custom_style.css
engine: knitr
---

## Row {height="70%"}

### Column {width="100%"}

::: {.card}
## Key Partners {{< iconify fa-solid link >}}

```{python}
#| output: asis
print("Gibt es Partnerorganisationen oder Lieferanten, die für den Erfolg Ihres Geschäftsmodells entscheidend sind? Wie können Sie diese Beziehungen weiter stärken?")
```
:::

### Column {width="100%"}

::: {.card}
## Key Activities {{< iconify vaadin check-square >}}

```{python}
#| output: asis
print("Welche Aktivitäten sind entscheidend für den Erfolg Ihrer Organisation? Welche Prozesse müssen optimiert werden, um effizienter zu arbeiten?")
```
:::

::: {.card}
## Key Resources {{< iconify wpf factory >}}

```{python}
#| output: asis
print("Welche Ressourcen benötigen Sie, um Ihr Geschäftsmodell erfolgreich umzusetzen? Das können materielle, finanzielle oder auch immaterielle Ressourcen sein.")
```
:::

### Column {width="100%"}

::: {.card}
## Value Propositions {{< iconify heroicons gift-solid >}}

```{python}
#| output: asis
print("Was bietet Ihre Organisation Ihren Kunden an? Was sind die wichtigsten Produkte oder Dienstleistungen, die Sie bereitstellen? Welche Probleme lösen sie für Ihre Kunden, und welchen Mehrwert bieten sie?")
```
:::

### Column {width="100%"}

::: {.card}
## Customer Relationships {{< iconify mdi heart >}}

```{python}
#| output: asis
print("Wie pflegen Sie die Beziehungen zu Ihren Kunden? Welche Art von Interaktion haben Sie mit ihnen, und wie können Sie diese Beziehungen verbessern, um die Kundenzufriedenheit zu steigern?")
```
:::

::: {.card}
## Channels {{< iconify mdi truck >}}

```{python}
#| output: asis
print("Wie gelangen Ihre Produkte oder Dienstleistungen zu Ihren Kunden? Welche Vertriebskanäle nutzen Sie, um Ihre Zielgruppe zu erreichen? Gibt es Möglichkeiten, diese Kanäle zu optimieren oder zu erweitern?")
```
:::

### Column {width="100%"}

::: {.card}
## Customer Segments {{< iconify foundation torsos-all-female >}}

```{python}
#| output: asis
print("Wer sind Ihre wichtigsten Kundengruppen und was sind ihre Bedürfnisse und Probleme? Welche unterschiedlichen Segmente können wir identifizieren, und wie können wir sie am besten ansprechen?")
```
:::

## Row {height="20%"}

::: {.card}
## Cost Structure {{< iconify ant-design tags-filled >}}

```{python}
#| output: asis
print("Welche sind Ihre wichtigsten Kostenarten? Wie können Sie Kosten senken oder optimieren, um Ihre Rentabilität zu verbessern?")
```
:::

::: {.card}
## Revenue Streams {{< iconify healthicons money-bag >}}
```{python}
#| output: asis
print("Woher generieren Sie Ihr Einkommen? Welche sind Ihre wichtigsten Einnahmequellen, und gibt es Möglichkeiten, diese zu diversifizieren oder zu maximieren?")
```
:::

And this is my custom_style.css for the background-color:

 body {
    background-color: #E7E9EB;
}

The rendered html looks like:

[mcanouil]

@sebastiansukstorf Glad you finally succeeded to get the desired output.
May I ask you to remove the indentation of the code which means any users will have to remove it in order to make it work. Use extra backticks (four, five or more) to enclose your code.
If you don't see the issue with how you share code, I invite you to use the copy button and paste it in a document, then try to render without editing.

[sebastiansukstorf]

The BMC as a dashboard should now integrated in a qmd document or a Revealjs presentation. How can I integrate the rendered html? I want to integrate the whole bmc (with icons, background-color) and render the new output document as pdf.

[mcanouil]

You can't. A dashboard is an output format on its own.
The only place you can really embed a dashboard is a website project.

This being said, you can use technology such as decktape, or since you are using R/knitr webshot2 to turn your dashboard into a static PDF/PNG which you can then include however you want/like.

(There are way more technologies to turn HTML into PDF/PNG/etc. that you can easily find on GitHub and/or any web search engine)