.. image:: /_images/icons/app_simlytiks.png :width: 5% :align: right :target: index.html .. |Pages| image:: /_images/icons/icon_Pages.png :width: 4% :target: Pages.html .. _Pages: ####################### |Pages| Pages & Layouts ####################### Each Simlytiks Dashboard contains pages which hold and organize our data visualizations. With the ability to add multiple pages and with a variety of page layouts, we can create an in-depth exploration of our data. .. thumbnail:: /_images/Images/Splash/Splash_Pages.png :title: Example of Finished Pages .. centered:: :sup:`Example of Finished Pages` | ************************ |files-o| Pages Overview ************************ The Simlytiks UI Views (Classic, Modern and Slides) have different locations for the pages panels and commands. Modern Pages View ================= .. thumbnail:: /_images/Images/Pages/ModernPages.png :title: Modern Pages .. centered:: :sup:`Figure 1: Modern Pages` | 1. Pages Panel 2. Add New Page 3. Page Settings Classic Pages View ================== .. thumbnail:: /_images/Images/Pages/ClassicPages.png :title: Classic Pages .. centered:: :sup:`Figure 2: Classic Pages` | 1. Pages Panel 2. Add New Page 3. Page Settings Slides Pages View ================== .. thumbnail:: /_images/Images/Pages/SlidesPages.png :title: Slides Pages .. centered:: :sup:`Figure 2: Modern Pages` | 1. Pages Panel 2. Add New Page 3. Page Settings .. _AddPage: **************************************** |plus| Adding and |pencil| Editing Pages **************************************** Adding pages to our dashboard involves clicking the button indicated near the pages panel, which is different for each view. Classic view also has the option to add sections to further organize our pages. We'll also want to choose a page layout for our newly created page. With over 12 page layouts, we have the flexibility to customize our explorations and compare multiple charts at once. Once we have created a new page, we can change the name, description and layout anytime. Edit pages by hovering over their names and clicking the pencil icon. Delete pages by clicking the indicated button in the pages panel. Modern View =========== Here is how to add and edit pages in Modern view: .. video:: _static/movies/Pages/SLK_Page_ModernVO.mp4 | | Classic View ============ Here is how to add and edit pages in Classic view: .. video:: _static/movies/Pages/SLK_Page_ClassicVO.mp4 :width: 100% | | Slides View ============ Here is how to add and edit pages in Slides view: .. video:: _static/movies/Pages/SLK_PagesSlideViewVO.mp4 :width: 100% | | **************************************** |th-large| Page Layouts **************************************** There are 25 different layouts to choose from when creating pages. These can be found under the Layouts tab of a page. .. thumbnail:: /_images/Images/Pages/PageLayouts.png :title: Page Layouts .. centered:: :sup:`Figure 1: Page Layouts` | Watch the following video for a review on the page layouts available in Simlytiks: .. video:: _static/movies/Pages/SLK_SimlytiksPageLayouts_vo.mp4 :width: 100% | | NOTE: When uploading a dataset that has one of the asymmetrical page layouts, curves will be combined under one chart as shown below: .. thumbnail:: /_images/Images/Pages/CombinedCurvesUnderOneChart.png :title: Combined Curves Under One Chart .. centered:: :sup:`Figure 2: Combined Curves Under One Chart` | Simlytik's page layouts can be resized by dragging them to personalize them. .. thumbnail:: /_images/Images/Pages/ResizePageLayout.png :title: Resizing Page Layouts .. centered:: :sup:`Figure : Resize page Layouts` <<<<<<< HEAD | **************************************** |desktop| NEW! Dashboard Layout **************************************** Under the layouts tab in a page, the Dashboard option allows you to create custom dynamic layouts of your data using basic widgets like headings (1), data filters and aggregators (2) and charts (3). .. thumbnail:: /_images/Images/Pages/Dashboard_Layout.png :title: Dashboard Layout .. centered:: :sup:`Figure 1: Dashboard Layout` | Adding, Moving and Resizing Widgets ===================================== Drag-and-drop a widget anywhere on the canvas to get started. .. video:: _static/movies/Pages/SLK_CreateDashboard_AddWidgetsVO.mp4 :width: 100% | | Click on the row of dots icon at the top of the edit box or click outside of a widget on the canvas to see all available widgets again. .. video:: _static/movies/Pages/SLK_Widgets_CorrespondingEditVO.mp4 :width: 100% | | Hover over a widget box until you see the drag icon, then click-and-drag to move the widget around the canvas. .. video:: _static/movies/Pages/SLK_MoveWidgetsVO.mp4 :width: 100% | | Hover over the bottom right corner a widget box until you see the sizing arrow icons, then click-and-drag to resize the widget width, length or both. .. video:: _static/movies/Pages/SLK_ResizeWidgetVO.mp4 :width: 100% | | Basic Widgets =============== Basic widgets help with making your dashboard report oriented. Add a heading, a text box, an image or a divider. Let's go over each. Heading --------- Create custom titles for any part of your dashboard using the Headings widget. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/headingwidget.png :title: Drag-and-Drop Heading .. centered:: :sup:`Figure 2: Drag-and-Drop Heading` | Edit the heading text in the first tab which includes basic text and paragraph formatting like weight, decoration and alignment. .. thumbnail:: /_images/Images/Pages/EditHeadingWidget.png :title: Edit Tab .. centered:: :sup:`Figure 3: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HeadingWidgetVO.mp4 :width: 100% | | Text Box --------- Add custom paragraphs or comments using the Text Box widget. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/textboxwidget.png :title: Drag-and-Drop Text Box .. centered:: :sup:`Figure 4: Drag-and-Drop Text Box` | Edit the text in the first tab which includes basic text and paragraph formatting like weight, decoration and alignment. .. thumbnail:: /_images/Images/Pages/EditTextWidget.png :title: Edit Tab .. centered:: :sup:`Figure 5: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_TextWidgetVO.mp4 :width: 100% | Image --------- Upload any image for your dashboard using the Image widget. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/imagewidget.png :title: Drag-and-Drop Image .. centered:: :sup:`Figure 6: Drag-and-Drop Image` | In the Edit tab, upload your own image or choose from the Simlytiks media library (click on the input box to view all). .. thumbnail:: /_images/Images/Pages/editimage.png :title: Edit Tab .. centered:: :sup:`Figure 7: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ImageWidgetVO.mp4 :width: 100% | | Divider --------- Place dividers into your dashboard to create sections for grouping elements. Drag-and-drop the widget anywhere onto the canvas to get started. .. thumbnail:: /_images/Images/Pages/dividerwidget.png :title: Drag-and-Drop Divider .. centered:: :sup:`Figure 8: Drag-and-Drop Divider` | In the Edit tab, choose to view the divider as horizontal or vertical and specify the width and color of the line. .. thumbnail:: /_images/Images/Pages/Edit_Divider.png :title: Edit Tab .. centered:: :sup:`Figure 9: Edit Tab` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_DividerWidgetVO.mp4 :width: 100% | We can clone widgets by maintaining their aspect ratio and styling as it is using the Clone option available in the widget context menu (1). Cloned widget (2) This applies to all the widgets in the list. .. thumbnail:: /_images/Images/Pages/Clone_Widgets.png :title: Clone Widget .. centered:: :sup:`Figure 10: Clone Widget` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_CloneWidgetVO.mp4 :width: 100% | | Filters and Aggregators ======================== The second section has three unique visualizers for filtering, highlighting and aggregating data. .. thumbnail:: /_images/Images/Pages/filtersaggregatorsdash.png :title: Filters and Aggregators .. centered:: :sup:`Figure 11: Filters and Aggregators` | These options create dynamic dashboards by linking up with each other and other charts :ref:`(skip to this section to learn more)`. Data Filter ------------ Data Filter allows us to filter out data in any of our dashboard charts. Here is how to set up the data filter widget. .. video:: _static/movies/Pages/SLK_DataFilterWidgetVO.mp4 :width: 100% | Data Highlighter ----------------- Data Highlighter allows us to highlight data in any of our dashboard charts. Here is how to set up the data highlighter widget. .. video:: _static/movies/Pages/SLK_DataHighlighterWidgetVO.mp4 :width: 100% | | Data Aggregator ----------------- Data Aggregator shows key values based on the data column pick. For example, choosing a numerical column such as sepal length in the Iris dataset presents us with specifications about the sepal length in the dataset such as sepal length average and median. .. thumbnail:: /_images/Images/Pages/DataAggregator.png :title: Data Aggregator .. centered:: :sup:`Figure 12: Data Aggregator` | Visualizers ======================== Just like on normal Simlytiks page layouts we can add visualizers, we can also add them in our dashboard, just as widgets instead. .. thumbnail:: /_images/Images/Pages/Dashboardvisualizers.png :title: Widget Visualizers .. centered:: :sup:`Figure 13: Widget Visualizers` | This way, we can customize them in accordance with our dashboard. The following is a video example of adding the parallel line chart widget. .. video:: _static/movies/Pages/SLK_ParallelWidgetVO.mp4 :width: 100% | For more detailed view of the desired widget, click "Enlarge" in the right context menu (1). To return back to dashboard view, click on "Compress" in the right context menu (2). .. thumbnail:: /_images/Images/Pages/Enlarged_View.png :title: Enlarge Widget .. centered:: :sup:`Figure 14: Enlarge Widget` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_EnlargeWidgetVO.mp4 :width: 100% | We can hide or show widget titles based on user requirements. Click Hide Title in the right context menu to hide (1) and select Show Title to display it again (2). .. thumbnail:: /_images/Images/Pages/Hidetitle.png :title: Hide and Show Widget Title .. centered:: :sup:`Figure 15: Toggle Widget Title` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HideTitleVO.mp4 :width: 100% | To view all the highlighted values at the top of the data highlighter, set "Move Highlighted Items to Top" to "Yes." .. thumbnail:: /_images/Images/Pages/Show_Highlighted_at_the_top.png :title: Show Highlighted Items at the Top .. centered:: :sup:`Figure 16: Show Highlighted Items at the Top` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ShowHighlightedatTopVO.mp4 :width: 100% | | Editing Widget Style ====================== All widgets can be styled similarly in the second tab called "Widget Style". .. thumbnail:: /_images/Images/Pages/EditWidgetStyle.png :title: Edit Widget Style .. centered:: :sup:`Figure 17: Edit Widget Style` | Alter the appearance of the text and box such as changing the box shadow, background color or text color. .. video:: _static/movies/Pages/SLK_WidgetStyleVO.mp4 :width: 100% | | .. _DashDynDataLink: Dynamic Data Linking ======================== Once we've added our visualizers, we can use our data filters and highlighters as tools for dynamically showing aspects of our data. In the following image, we've added a parallel line chart to the right showing the relationship between sepal and petal width and length with Iris flower class. The data filter widget to the left shows filtered sepal length which is reflected in the parallel line chart. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris_Sepallength.png :title: Sepal Length Dynamic Data Linking .. centered:: :sup:`Figure 18: Sepal Length Dynamic Data Linking` | .. video:: _static/movies/Pages/SLK_DynamicLink_Iris_SepalLengthVO.mp4 :width: 100% | | In the following image, we have the same parallel line chart filtered to reflect the chosen Iris classes in the data filter widget to the left. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris_Class.png :title: Iris Class Dynamic Data Linking .. centered:: :sup:`Figure 19: Iris Class Dynamic Data Linking` | The following video shows how the dynamic linking looks for the Iris class in real time. .. video:: _static/movies/Pages/SLK_DynamicLink_Iris_ClassVO.mp4 :width: 100% | Dashboard Examples ======================== The following are some examples of customized Simlytiks dashboards for different datasets. Iris Class ----------- This dashboard shows the relationship between Iris class and petal and sepal dimensions using data filter, image, heading, parallel line chart, donut chart and stacked area chart. .. thumbnail:: /_images/Images/Pages/DynamicLink_Iris.png :title: Iris Class Dashboard .. centered:: :sup:`Figure 20: Iris Class Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_IrisVO.mp4 :width: 100% | | Auto MPG ----------- This dashboard shows the relationship between Automobile MPG, horsepower and weight using data filter, image, heading, parallel line chart, and scatter plot. .. thumbnail:: /_images/Images/Pages/DynamicLink_AutoMPG.png :title: Auto MPG Dashboard .. centered:: :sup:`Figure 21: Auto MPG Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_AutoMPGVO.mp4 :width: 100% | | World Happiness ---------------- This dashboard shows how different standard of living determines the happiness score of countries using ranking table, histogram, data aggregator and data filter. .. thumbnail:: /_images/Images/Pages/DynamicLink_WorldHappiness.png :title: World Happiness Dashboard .. centered:: :sup:`Figure 18: World Happiness Dashboard` ======= .. centered:: :sup:`Figure 22: World Happiness Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_WorldHappinessVO.mp4 :width: 100% | | Beers ---------------- This dashboard shows how ABV values relate to different beers and beer styles using data filter, data highlighter and gauge. .. thumbnail:: /_images/Images/Pages/DynamicLink_BeerData.png :title: Beers Dashboard .. centered:: :sup:`Figure 23: Beers Dashboard` | The following video demonstrates the dynamic linking for this dashboard example. .. video:: _static/movies/Pages/SLK_DynamicLink_BeerVO.mp4 :width: 100% | | The default view which is the modern view can be changed to dashboard view for viewing dashboards that were created for a given dataset. Click on Dashboard in the view dropdown menu (1) to view all the dashboards. To return to page view again, go to the view dropdown and select any desired view type (2). .. thumbnail:: /_images/Images/Pages/Dashboard_view.png :title: Dashboards View .. centered:: :sup:`Figure 24: Edit Dashboards View` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_DashboardViewVO.mp4 :width: 100% | | The data highlighter display type can be changed from background color to colored bubble type by setting the color for the column and selecting "Colored Bubble" in the "Selection Display Type" field for the highlighter. .. thumbnail:: /_images/Images/Pages/DataHighlighterDisplayType.png :title: Dashboards View .. centered:: :sup:`Figure 25: Data Highlighter Colored Bubble Display Type` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_HighlighterDisplayType_SLK-237_VO.mp4 :width: 100% | | Multiple sections can be added within a dashboard page by clicking on "Add Section" and the new section can be personalized with new widgets. These widgets can be deleted at any time by clicking on the "x" available towards the right top; also, scroll the page to view all the sections. .. thumbnail:: /_images/Images/Pages/MultipleSections.png :title: Multiple Sections .. centered:: :sup:`Figure 26: Multiple Sections in a Dashboard page` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_Dashboard_MultipleSections_246_VO.mp4 :width: 100% | | Image annotator selection display type can be changed from background color to colored bubble type by setting color for the column and selecting Colored Bubble as input for the "Select Annotation Display Type" field for the highlighter. .. thumbnail:: /_images/Images/Pages/Select_AnnotationDiapType.png :title: Annotation Diaplay Type .. centered:: :sup:`Figure 27: Annotation Display Type` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/SLK_ImageAnnotator_ColoredBubbleDisp_245_VO.mp4 :width: 100% | | Widgets list view type in dashboard page can be changes based on user requirement. To do this, click on the eye icon and switch to the desired view. .. thumbnail:: /_images/Images/Pages/Widgets_ViewTypes.png :title: Widghets List View Types .. centered:: :sup:`Figure 28: Widgets List View Types` | Watch the following video to see how it's done: .. video:: _static/movies/Pages/--------------------------------.mp4 :width: 100% | | "Show Only Selected Data" and "Move Highlighted Items to Top" are enabled by default to show only filtered data and move them to the top. .. thumbnail:: /_images/Images/Pages/Data_Highlighter_ShowOnlyFiltered.png :title: Show only selected data at the top in Data Highlighter .. centered:: :sup:`Figure : Show only selected data at the top in Data Highlighter` =======