App Display Interaction

When displaying apps in the App Marketplace, interactions with dashboards and charts are involved, mainly including functions such as Analyze, Save Current Filter Snapshot, Refresh, Full Screen, Embed, and Export.

Go Analyze

Go Analyze is an enhanced feature of charts, where the system integrates the Metrics Analysis Function with the published application, enabling the published charts to have secondary analysis capabilities.

Chart Go Analyze consists of two parts: the first part is the self-service analysis of chart metrics, and the second part is the AI Data Query Assistant.

Self-Service Analysis of Chart Metrics

On the analysis page (highlighted in red in the image below), users can select chart metrics and their analysis dimensions to display new business chart information, allowing for multi-faceted business analysis. Users can duplicate multiple charts for comparative analysis, with support for dimension filtering and other functions. The entire operation process is click-based, requiring no prior data analysis knowledge. For detailed guidance on metric analysis, please refer to Metric Analysis.

AI Data Query Assistant

The AI Assistant feature on the analysis page allows users to input questions in the query box to receive summarized answers and corresponding chart analyses. The charts can be inserted into the left-hand dashboard for comparative analysis.

The AI Assistant supports the following three methods to assist in inputting queries, enabling more accurate and efficient data retrieval.

• Supports saving frequently asked questions

• Supports large model calibration to optimize the input box content

• Supports inserting field or metric information from the current analysis data source using the @ symbol in the input box

Tip

Configuration is required before using the AI Assistant feature here.

Export

After analyzing the charts within the app in the App Market, it supports exporting the data of the analyzed dashboard results.

Save Current Filter Snapshot

Dashboards often use filters to display data for different analytical scenarios. When users switch from one scenario to another, they need to adjust the corresponding filter options. When there are many filters or the user's display scenarios change frequently, it requires frequent operation of the filters.

The dashboard's save filter snapshot feature allows users to save the filtering conditions for different business scenarios. When displaying, users only need to import the corresponding scenario snapshot, eliminating the need to operate the filters again, and quickly switch between different business scenarios. As shown in the figure, User A is responsible for sales information in the Northeast and North China regions. When viewing the dashboard, they want the filters to display information for the Northeast and North China regions, so they save the filter configuration for these regions. Each time, they only need to import the snapshot information to see the relevant information without the need for filtering.

The operation to save the current filter snapshot is quite simple. When users are filtering and encounter a snapshot they need to save, they can click to save the filter snapshot to a temporary storage area. When the snapshot window is closed, the snapshots in the temporary area will be lost. By clicking save in the temporary area, the snapshot can be saved to the user's system (permanent area). When the dashboard is opened again, the saved snapshot information can be found in the permanent storage area.

Snapshots saved in the system support operations such as setting as default, importing, renaming, and deleting.

• Set as Default: Use the filter options in the snapshot as the default option values for the filters. Each time the dashboard is opened, it will read the information from the snapshot instead of the initial settings of the dashboard. Users can customize the business scenarios displayed on the dashboard through this feature.
• Import: Import the filter information from the snapshot during the dashboard display to show the corresponding data.
• Rename: Rename the filter snapshot.
• Delete: Delete the snapshot information.

Refresh

Do not use chart cache data, but directly refresh the chart data.

Full Screen

Display the dashboard in full screen mode. In full screen mode, you can set up automatic rotation.

Embedding

Dashboards, charts, and the applications themselves within the app all support embedding. Users can perform embedding operations at different levels according to their display needs. Both the App Market and the applications created in App Creation support embedding.

Iframe Embedding Guide

Taking app embedding as an example, this guide introduces how to perform Iframe embedding. The process for embedding dashboards and charts is similar to app embedding and will not be detailed here.

1. Click the embed button at the top right of the app and select "Embed this app".

2. The embedding window will appear, containing the URL for embedding and an iframe example.

3. The URL in the embedding window can be directly shared, allowing users to display it in a browser. The image below shows the effect of using the URL in a browser. It can be seen that the embedded page only has refresh, full screen, and export buttons, without other functional operation buttons.

4. The iframe in the embedding window provides an example for embedding in code, supporting various custom parameters. Users can adjust the display style after embedding through these parameters. The example below shows the display effect of an iframe embedded with a size of 800*600.

Note

1. When embedding apps and dashboards, only refresh, full screen, and export buttons are displayed, without PC-side function buttons.
2. When embedding charts, you need to open the chart first, then click the embed button to get the link content.
3. Filter conditions are not included during embedding.

Custom Parameters for Embedding Scenarios

Apps, Dashboards, and Charts support various custom parameters when embedding. Users can set these parameters as needed to influence the display effect after embedding.

Embedded Chart Parameters

Parameter Name	Usage Example	Description
noTitle	1. noTitle=true 2. noTitle=false 3. Default Setting	Set whether to display the title: true does not display the title false displays the title Default setting, displays the title
titleColor	1.titleColor=rgb(0, 0, 0) 2.titleColor=rgba(0, 0, 0, 1) 3.titleColor=red 4.titleColor=hsl(0,0,0)	Set the title color of the chart, RGB hexadecimal color settings are not supported
chartBackground	1.chartBackground=rgb(0, 0, 0) 2.chartBackground=rgba(0, 0, 0, 1) 3.chartBackground=red 4.chartBackground=hsl(0,0,0) 5.chartBackground=transparent	Set the background color of the chart, RGB hexadecimal color settings are not supported When the parameter is "transparent", the chart displays a transparent background color

Embed Dashboard Parameters

Parameter Name	Usage Example	Description
copyright	1. copyright=true 2. copyright=false 3. copyright=other values	Whether to display the header and footer: true to display false to not display Default setting is to display
background	1.background=rgb(0, 0, 0) 2.background=rgba(0, 0, 0, 1) 3.background=red 4.background=hsl(0,0,0)	Dashboard background color, does not support RGB hexadecimal color settings
padding	padding=5	Set margin, unit is pixels px
scrollable	1. scrollable=true 2. scrollable=false 3. scrollable=other values	Dashboard vertical scroll bar setting: true, can scroll false, cannot scroll other values, default setting can scroll
chartBackground	1.chartBackground=rgb(0, 0, 0) 2.chartBackground=rgba(0, 0, 0, 1) 3.chartBackground=red 4.chartBackground=hsl(0,0,0) chartBackground=transparent	Set chart background color, does not support RGB hexadecimal color settings When the parameter is "transparent", it is a transparent background color
chartGap	chartGap=5	Set chart spacing, unit is pixels px
chartTitleColor	1.chartTitleColor=rgb(0, 0, 0) 2.chartTitleColor=rgba(0, 0, 0, 1) 3.chartTitleColor=red 4.chartTitleColor=hsl(0,0,0)	Set chart title color, does not support RGB hexadecimal color settings
chartAccessible	1. chartAccessible=true 2. chartAccessible=false 3. chartAccessible=other values	true can open false cannot open other values, default setting can open
isMobile	name="isMobile"	When using this parameter, it means the dashboard is displayed in mobile style. Note that if the dashboard does not have a corresponding mobile display style, using this parameter will result in a 404 error.

JS SDK Embedding

During the iframe embedding process, the browser performs two renderings, which increases the page load time. When multiple charts are embedded on a single page, each chart undergoes two renderings, significantly slowing down the overall page load speed and affecting the page display performance.

To better address the embedding performance issues of dashboards and charts, the system has introduced the JS SDK embedding method, which directly renders dashboards and charts within the embedded page. When multiple dashboards or charts are embedded on the same page, each embedded page loads static resources only once, greatly improving rendering speed compared to iframe embedding. JS SDK embedding supports dynamic adjustment of the embedded page's style and interaction, making the embedding method more flexible. However, the JS SDK has a higher entry barrier than iframe, requiring embedders to be familiar with JavaScript.

The JS SDK embedding example is as follows, which can be divided into three parts: introducing the sdk.js file, initializing the SDK, and embedding.

<div id="hst__embed"></div>
<script src="https://develop.hengshi.org/assets/sdk.4.3.0.js"></script>
<script>
  window.HsEmbedSDK.init({
    baseUrl: 'https://develop.hengshi.org',
  }, onReady);

  function onReady(loginSuccess) {
    if (!loginSuccess) return;
    window.HsEmbedSDK.EmbedChart(document.querySelector('#hst__embed'), {
      width: "1573",
      height: "948",
      params: {
        app: 126457,
        dashboard: 5,
        chart: 37,
      },
    });
  }
</script>

Referencing the SDK's js File

The following example demonstrates how to reference the SDK's js file. Note that the SDK's js file varies across different environments. The purpose of referencing is to include the global variable HsEmbedSDK in the window domain of the embedded page, preparing for the subsequent rendering of embedded dashboards or charts.

<script src="https://develop.hengshi.org/assets/sdk.4.3.0.js"></script>

Initialize SDK

Use the HsEmbedSDK.init function to initialize the SDK, as shown in the following example.

<script>
  window.HsEmbedSDK.init({
    baseUrl: 'https://develop.hengshi.org',
  }, onReady);

  function onReady(loginSuccess) {
    if (!loginSuccess) return;
    window.HsEmbedSDK.EmbedChart(document.querySelector('#hst__embed'), {
      width: "1573",
      height: "948",
      params: {
        app: 126457,
        dashboard: 5,
        chart: 37,
      },
    });
  }
</script>

When initializing, two parameters need to be passed:

• Parameter 1 is an object, structured as follows. The baseUrl is the deployment address of the system. The example https://develop.hengshi.org is a primary address, and secondary addresses are also supported. noAuth indicates whether to enable authentication, defaulting to true to enable authentication, and setting it to false means skipping authentication.

interface SDKConfig {
    baseUrl: string;
    noAuth?: boolean;
}

• Parameter 2 is a callback function, onReady in the example is the callback function.

Tip

If using jwt authentication, noAuth needs to be configured as true, and the jwt parameter needs to be passed in the embedded dashboard or chart. Example:

  window.HsEmbedSDK.init({
    noAuth: true,
    baseUrl: 'https://develop.hengshi.org',
  }, onReady);
  function onReady(loginSuccess) {
    if (!loginSuccess) return;
    window.HsEmbedSDK.EmbedDashboard(document.querySelector('#hst__embed'), {
      width: window.innerWidth,
      height: window.innerHeight,
      params: {
        app: 125396,
        dashboard: 1,
      },
      location: {
        query: {
          activeAuth: 'jwt-param',
          jwtParam: 'c3MiOiLlj5HooYzogIU6emhlbmdjaHVueGkiLCJzdWIiOiJtYXJzaGFsbCJ9.cCX2yMcMpJYnE4mU7xDewD22uCyj-o'
        },
      },
    });
  }

Embedding Dashboards/Charts

After referencing the SDK's js file and initializing the SDK, you can start embedding dashboards and charts into your application.

Tip

When embedding multiple dashboards and charts, you only need to reference the SDK's js file and initialize the SDK the first time you embed. When embedding applications and dashboards, only buttons such as refresh, full screen, and export are displayed, and functional buttons for the PC version are not shown. To embed a chart, you need to open the chart first, then click the embed button to get the link content. Filter conditions are not included when embedding. The JS SDK initially supports embedding dashboards and charts in analytical applications, and future versions will continue to expand the supported embedding scope.

Embedding Dashboard

Use the HsEmbedSDK.EmbedDashboard(Element, DashboardOptions) function to embed a dashboard, which requires two parameters: Element and DashboardOptions. Click the embed icon on the dashboard, select "Embed this dashboard", and view the embedding example.

• Element is the DOM element to be embedded, which can be obtained from the embedding example. The Element passed in the example is document.querySelector('#hst__embed').

• DashboardOptions are the parameters related to the dashboard, structured as follows.

  • useshadowDom: Use shadow DOM for style isolation, boolean type, default is true, this item is optional.
  • width: The width of the embedded dashboard, numeric type, unit is px, this item is required.
  • height: The height of the embedded dashboard, numeric type, unit is px, this item is required.
  • params: The application ID and dashboard ID where the dashboard is located, can be obtained from the embedding example, this item is required.
  • location: When filter parameters need to be added to the URL, they can be passed through location.query, this item is optional.

interface Dashboardoptions {
  useshadowDom?: boolean;
  width: number;
  height:number;
  params:{
    app: number | string;
    dashboard: number | string;
  };
  location?:{
    query?: string | Record<string, any>;
  },
}

Embedding Charts

Use the HsEmbedSDK.EmbedChart(Element, ChartOptions) function to embed charts, requiring two parameters: Element and ChartOptions. Click the embed icon on the chart to view the reference example for chart embedding.

• Element is the DOM element to be embedded, which can be obtained from the embedding example. The Element passed in the example is document.querySelector('#hst__embed').

• ChartOptions are the parameters related to the chart, structured as follows.

  • useShadowDom: Use shadow DOM for style isolation, boolean type, default is true, this item is optional.

  • width: The width of the chart after embedding, numeric type, unit is px, this item is required.

  • height: The height of the chart after embedding, numeric type, unit is px, this item is required.

  • params: The application ID, dashboard ID, and chart ID where the chart is located, can be obtained from the embedding reference example provided by the system, this item is required.

  • location: When filter parameters need to be added to the URL, they can be passed through location.query, this item is optional.

    interface ChartOptions{
      useShadowDom?: boolean;
      width: number;
      height:number;
      params:{
        app: number | string;
        dashboard: number | string;
        chart: number | string;
      };
      location?:{
        query?:string | Record<string, any>;
      },
    }

Clear Linked Filters

The JS SDK supports the use of the function HsEmbedSDK.clearFilters() to clear linked filters between charts. After calling this function, the linked filters shown in the chart will be cleared, and no linkage will occur between the charts.