Skip to content

This playbook teaches you how to compose Tableau's varied product capabilities into applications that thrill customers, coworkers and friends!

License

Notifications You must be signed in to change notification settings

yashsuhagiya/embedding_playbook

 
 

Repository files navigation

Tableau Embedded Analytics Playbook

Tableau is the world's leading end-to-end data and analytics platform.

tableau logo

Leverage the analytical powerhouse of Tableau to analyze and visualize data. This Playbook teaches you how to compose Tableau's varied product capabilities into applications that thrill customers, coworkers and friends!

Beyond creating visual representations of data, Tableau provides the greatest benefits as it helps people discover what information is valuable to others. It enables users to analyze data and build the interfaces that represent them with unmatched speed and flexibility resulting in a springboarding of ideas into value.

tableau running on a laptop

To get started, go to the Tableau Embedded Analytics Playbook.


Local Development

First, clone this GitHub repository using your method of choice.

Then, navigate to the directory where you cloned the repository using your shell.

cd embedding_playbook

Install dependencies (look for a file called package.json).

npm i

Finally, start the development server.

npm run dev

Visit localhost:3000 to see the app. Enjoy!

NOTE: Development on GitHub codespaces may differ from this process. Please refer to their documentation for further guidance.

up and down area chart

About the Playbook

The Playbook was created with Nextra, a documentation template built with the Nextjs web framework that uses React to generate cutting-edge static webapps while content is written in Markdown, an industry standard language for documentation. The app can be hosted on Nextjs, GitHub Pages and other static hosts.

This architecture was selected for the following reasons:

  1. React is great for creating dynamic UI elements such as Tableau embeds that fit seamlessly within product documentation. It's popularity makes it easier to find developers who can contribute to the codebase or teach others how to do so. Nextjs is the most popular React metaframework known for some of the highest rated developer experiences out there.
  2. Markdown is a commonly used lightweight markup language that allows technical writers to produce content within a "docs-as-code" framework. This is an established method for application developers and technical writers to work in the most agile way possible with no overhead expenses. It is also the established process for writing technical documentation within this organization.
  3. Jamstack is the architectural approach that encompasses SSG (static site generation) which allows for the generation of complex and dynamic websites through 'builds' which result in a static app that can be hosted freely or inexpensively on some of the fastest web infrastructure, CDNs.

The combination works great for this use case since it is built to facilitate contributions towards content that fulfill the purpose of this Playbook while still allowing developers to write a dynamic application with cutting-edge best practices for the web.

Most technical documentation required to configure, alter or enhance this codebase is updated and maintained by professional teams listed here (in order of importance):

  1. Nextra (docs theme)
  2. Nextjs (framework)
  3. React (UI library)

Embedding Tableau

Embedding in the Playbook relies on importing a reusable UI component into an article that ends with .mdx as it designates the file as using a superset of markdown that supports React components. To accomplish this, do the following:

  1. Make sure the article ends in .mdx rather than .md which does not support React.
  2. Import the <Tableau/> component into the article and provide configuration options as shown here:
import Tableau from './../../components/tableau/tableau'

# Embedding Tableau Views

This is generic markdown content preceding the Tableau component of interest

<Tableau
  src='https://public.tableau.com/views/{viz}'
  height='900'
  width='700'
  hideTabs='true'
  device='default'
/>

sample embed


Contributing

Contributions to this project are more than welcome and may come in the form of enhancements to the codebase, writing articles, correcting or identifying bugs or even suggesting improvements.

For more information please refer to the Contribution Guide.

License

This project is licensed under the MIT License.

narrow area chart

About

This playbook teaches you how to compose Tableau's varied product capabilities into applications that thrill customers, coworkers and friends!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • MDX 52.7%
  • JavaScript 42.9%
  • TypeScript 3.8%
  • CSS 0.6%