Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

trivial: docs updated list of visual components #5372

Merged
merged 2 commits into from
Sep 20, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions docs/content/en/latest/references/visual_components/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ weight: 10

GoodData.UI comes with ready-made visual components. You can use these visual components as-is or customize them. You can also use the unique [InsightView](../../learn/visualize_data/insightview/) component that simply renders any chart that you create in GoodData.

This article provides components examples and basic instructions on component usage. For details about each component, see its page. For details on common ways of customizing charts (colors, sorting, legend) see [Chart Config](./chart_config). To explore live examples of code within your browser check [Interactive Examples](./interactive_examples/).
This article provides components examples and basic instructions on component usage. For details about each component, see its page. For details on common ways of customizing charts (colors, sorting, legend) see [Chart Config](./chart_config/). To explore live examples of code within your browser check [Interactive Examples](./interactive_examples/).

{{% alert %}} All examples in this section showcase the use of the code generated by catalog-export and assume that the application is set up with BackendProvider and WorkspaceProvider as described in [Integrate into and Existing Application](../../learn/integrate_and_authenticate/cn_and_cloud_integration/).
{{% /alert %}}
Expand All @@ -21,13 +21,19 @@ Currently available out-of-the-box visualizations:
| [Area Chart](./area_chart/) | ![Area Chart](/gd-ui/area_chart.png) |Shows data as an area under a line intersecting dots. Can display multiple measures or a single measure split by one attribute. |
| [Bar Chart](./bar_chart/) | ![Bar Chart](/gd-ui/bar_chart.png) | Horizontal visual commonly used to illustrate trends, comparisons, and distributions. |
| [Bubble Chart](./bubble_chart/) | ![Bubble Chart](/gd-ui/bubble_chart.png) | Shows data as bubbles using Cartesian coordinates. Typically shows three measures for X-axis, Y-axis, and one for the size. |
| [Bullet Chart](./bullet_chart/) | ![Bullet Chart](/gd-ui/bullet_chart.png) | Displays performance of a primary measure and its progress towards a goal, with optional comparison to another measure. |
| [Column Chart](./column_chart/) | ![Column Chart](/gd-ui/column_chart.png) | Shows data in vertical columns. Can display one or multiple measures. |
| [Combo Chart](./combo_chart/) | ![Combo Chart](/gd-ui/combochart.png) | Combines two types of visualizations, usually, a column chart and a line chart. |
| [Dependency Wheel Chart](./dependency_wheel_chart/) | ![Dependency Wheel Chart](/gd-ui/dependency_wheel_chart.png) | Visualizes nodes in a circle with links between them, showing flow quantity or weight proportionally through link width and node size. |
| [Donut Chart](./donut_chart/) | ![Donut Chart](/gd-ui/donut_chart.png) | Shows data as proportional segments of a disc with hollowed out center. Can be segmented by either multiple measures or an attribute. |
| [Funnel Chart](./funnel_chart/) | ![Funnel Chart](/gd-ui/funnel_chart.png) | Shows data as parts of a funnel, segmented by multiple measures or a single attribute, displaying values as progressively decreasing proportions. |
| [Geo Pushpin Chart](./geo_pushpin_chart/) | ![Bar Chart](/gd-ui/geo_pushpin_chart.png) | Visualizes data broken down by geographic region across an actual map and points the latitude and longitude of locations.|
| [Headline](./headline/) | ![Headline](/gd-ui/headline.png)| Shows a single number or compares two numbers. |
| [Heatmap](./heatmap/) | ![Heatmap](/gd-ui/heatmap.png) | Represents data as a matrix where individual values are represented as colors. Helps discover trends and understand complex datasets. |
| [Line Chart](./line_chart/) | ![Line chart](/gd-ui/line_chart.png) | Shows data as line-connected dots. Can display either multiple measures as individual lines or a single measure split by one attribute into multiple lines with points intersecting attribute values. |
| [Pie Chart](./pie_chart/) | ![Pie Chart](/gd-ui/pie_chart.png) | Shows data as proportional segments of a disc. Can be segmented by either multiple measures or an attribute. |
| [Pivot Table](./pivot_table/) | ![Pivot Table](/gd-ui/pivot_table.png) | Expands capabilities of a regular (flat) table by allowing to reorganize and summarize selected data beyond the typical row-column relationship. |
| [Scatter Plot](./scatter_plot/) |![Scatter Plot](/gd-ui/scatter_plot.png) | Shows data as points using Cartesian coordinates. Typically have a minimum of two measures, one for the X-axis and the other for the Y-axis, and one attribute, which determines the meaning of each data point. |
| [Repeater](./repeater_chart/) | ![Repeater](/gd-ui/repeater_chart.png) | Displays multiple simple visualizations or values side-by-side across rows, for each key attribute value, allowing quick trend comparison and data changes. |
| [Sankey Chart](./sankey_chart/) | ![Sankey Chart](/gd-ui/sankey_chart.png) | Visualizes flow quantity proportionally through the width of links between nodes. Can display one measure as flowing between values of two attributes. |
| [Scatter Plot](./scatter_plot/) |![Scatter Plot](/gd-ui/scatter_plot.png) | Shows data as points using Cartesian coordinates. Typically have a minimum of two measures, one for the X-axis and the other for the Y-axis, and one attribute, which determines the meaning of each data point. |
| [Treemap](./treemap/) |![Treemap](/gd-ui/treemap.png) | Presents data hierarchically as nested rectangles, useful for comparing proportions within a hierarchy. |