diff --git a/.github/workflows/vizro-qa-tests-trigger.yml b/.github/workflows/vizro-qa-tests-trigger.yml index 1d223a6de..e0561e221 100644 --- a/.github/workflows/vizro-qa-tests-trigger.yml +++ b/.github/workflows/vizro-qa-tests-trigger.yml @@ -17,6 +17,7 @@ jobs: name: Vizro QA ${{ matrix.label }} trigger runs-on: ubuntu-latest strategy: + fail-fast: false matrix: include: - label: integration tests @@ -30,6 +31,7 @@ jobs: name: Vizro QA ${{ matrix.label }} trigger runs-on: ubuntu-latest strategy: + fail-fast: false matrix: include: - label: integration tests @@ -46,5 +48,6 @@ jobs: export INPUT_WORKFLOW_FILE_NAME=${{ secrets.VIZRO_QA_NOTEBOOKS_TESTS_WORKFLOW }} fi export INPUT_GITHUB_TOKEN=${{ secrets.VIZRO_SVC_PAT }} - export INPUT_REF=${{ github.head_ref }} + export INPUT_REF=main # because we should send existent branch to dispatch workflow + export INPUT_CLIENT_PAYLOAD='{"branch": "${{ github.head_ref }}"}' tools/trigger-workflow-and-wait.sh diff --git a/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png new file mode 100644 index 000000000..0fc6b0033 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_1.png differ diff --git a/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png new file mode 100644 index 000000000..833c6d6a9 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/advanced_chart_2.png differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif b/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif new file mode 100644 index 000000000..2fa89d821 Binary files /dev/null and b/vizro-ai/docs/assets/tutorials/chart/animated_advanced_chart.gif differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png deleted file mode 100644 index 9c96881c8..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_1.png and /dev/null differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png deleted file mode 100644 index 4637880c3..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_2.png and /dev/null differ diff --git a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png b/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png deleted file mode 100644 index d784fb677..000000000 Binary files a/vizro-ai/docs/assets/tutorials/chart/animated_bar_chart_3.png and /dev/null differ diff --git a/vizro-ai/docs/assets/user_guides/map_chart.gif b/vizro-ai/docs/assets/user_guides/map_chart.gif index d44569475..33731a5e3 100644 Binary files a/vizro-ai/docs/assets/user_guides/map_chart.gif and b/vizro-ai/docs/assets/user_guides/map_chart.gif differ diff --git a/vizro-ai/docs/assets/user_guides/surface_plot.gif b/vizro-ai/docs/assets/user_guides/surface_plot.gif index 9611b1218..7041dd42e 100644 Binary files a/vizro-ai/docs/assets/user_guides/surface_plot.gif and b/vizro-ai/docs/assets/user_guides/surface_plot.gif differ diff --git a/vizro-ai/docs/pages/user-guides/chart-examples.md b/vizro-ai/docs/pages/user-guides/chart-examples.md index 7d33420f7..86ade587e 100644 --- a/vizro-ai/docs/pages/user-guides/chart-examples.md +++ b/vizro-ai/docs/pages/user-guides/chart-examples.md @@ -53,7 +53,7 @@ The next chart we'll look at is a geographical map chart to visualize spatial pa from dotenv import load_dotenv load_dotenv() - df = px.data.wind() + df = px.data.gapminder() vizro_ai = VizroAI(model="gpt-4-0613") fig = vizro_ai.plot(df, diff --git a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md index ae0f9f5f2..6ca83f703 100644 --- a/vizro-ai/docs/pages/user-guides/create-advanced-charts.md +++ b/vizro-ai/docs/pages/user-guides/create-advanced-charts.md @@ -3,7 +3,7 @@ This page explains how to use Vizro-AI to create charts with advanced visualizat ## Animated bar chart -We'll create an animated bar chart illustrating the population development of each continent over time. Run the code below and look at the result. +We'll create an animated bar chart illustrating the GDP per capita of each continent over time. Run the code below and look at the result. !!! example "Vizro-AI animated chart" @@ -15,15 +15,16 @@ We'll create an animated bar chart illustrating the population development of ea df = px.data.gapminder() vizro_ai = VizroAI() - fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years.") + fig = vizro_ai.plot(df, "Visualize GDP per capita over the years for each country using map chart.") fig.show() ``` === "Result" [![AnimatedChart1]][AnimatedChart1] - [AnimatedChart1]: ../../assets/tutorials/chart/animated_bar_chart_1.png + [AnimatedChart1]: ../../assets/tutorials/chart/advanced_chart_1.png -Having unveiled our animated bar chart showcasing population development per country, it's clear that crucial details are overshadowed by the legend. Next, we will try to tweak our prompt to group the countries into continents and improve the overall layout. +Having unveiled our animated map chart showcasing GDP per capita development per country, it's clear that the map area is small, and it is very difficult to differentiate countries. +Next, we will try to tweak our prompt to improve the overall layout. !!! example "Vizro-AI animated chart" @@ -35,18 +36,20 @@ Having unveiled our animated bar chart showcasing population development per cou df = px.data.gapminder() vizro_ai = VizroAI() - fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Please improve layout.") + fig = vizro_ai.plot(df, + """Visualize GDP per capita over the years for each country using animated map chart. + Show countries on the map. Increase the width and height of the figure.""") fig.show() ``` === "Result" [![AnimatedChart2]][AnimatedChart2] - [AnimatedChart2]: ../../assets/tutorials/chart/animated_bar_chart_2.png + [AnimatedChart2]: ../../assets/tutorials/chart/advanced_chart_2.png -By incorporating the directive `Please improve layout`, we've successfully refined our animation and are now able to better interpret our result. +By incorporating the directive `Increase the width and height of the figure.` and `Show countries on the map.` we've successfully refined our animation. -Upon closer inspection, two challenges emerge: the legend overlaps the x-axis and the y-axis range is insufficient to capture the full spectrum of Asia's population development. Let's run the code below to improve the chart. +Upon closer inspection, the title is too long and the color palette used does not match our needs. We can fix those issues with better and more specific prompting. Let's run the code below to visually improve the chart. !!! example "Vizro-AI animated chart" @@ -58,16 +61,17 @@ Upon closer inspection, two challenges emerge: the legend overlaps the x-axis an df = px.data.gapminder() vizro_ai = VizroAI() - fig = vizro_ai.plot(df, "The chart should be an animated stacked bar chart with population on the y axis and continent on the x axis with all respective countries, allowing you to observe changes in the population over consecutive years. Make sure that y axis range fits entire data. Please improve layout and optimize layout of legend.") + fig = vizro_ai.plot(df, + """Visualize GDP per capita over the years for each country using animated map chart. + Show countries on the map. Increase the width and height of the figure. + Set title to be: `GDP per Capita over the years`. Use `Blues` as color sequence. """) fig.show() ``` === "Result" [![AnimatedChart3]][AnimatedChart3] - [AnimatedChart3]: ../../assets/tutorials/chart/animated_bar_chart_3.png + [AnimatedChart3]: ../../assets/tutorials/chart/animated_advanced_chart.gif Congratulations! You've now gained insights into harnessing the power of a LLM and Vizro-AI for crafting advanced charts and improving formatting. Don't forget, enabling `explain=True` is a good way of learning more about how a chart can be further improved and formatted. Advanced charts are well-suited for [Vizro](https://github.com/mckinsey/vizro/tree/main/vizro-core) dashboard applications. You can create a chart using `vizro-ai` to plug into your `vizro` dashboard in seconds! - -![chart-into-dashboard](../../assets/tutorials/chart_into_dashboard.gif)