Control Settings

Each control's three-dot menu allows for control settings. In the control settings, you can configure the appearance and interactions with the dashboard.

Control Appearance

Control appearance can be set to control the rounded corners, padding, size and position, border background, etc. It can be set in the control settings -> style, or through control theme settings.

Customize Control Appearance

In Control Settings -> Style, you can customize the appearance of the control. Please refer to the following guidelines for setup.

Apply Theme Style to Widgets

• Apply Theme Style After users customize and visually adjust the appearance of an individual widget, if they want this widget to follow the theme style, they can simply click the 3-dot menu in the top-right corner of the widget and select "Apply Theme Style". This will make the widget's appearance follow the "Theme + Customization".

• Clear Widget Style Click the 3-dot menu in the top-right corner of the widget and select "Clear Widget Style". This will make the widget's appearance follow the "Theme + Customization" and also clear any custom settings within the widget. This includes adjustments to the visualization of the chart, which will revert to the initial default style.

Tip

The appearance of widgets is affected by the theme. Settings within the theme will automatically apply to newly created widgets and widgets with default styles. For individual widgets that have been customized, the theme will not apply to the customized content when switching themes. (E.g., widget background color/widget title, etc. If elements within the widget have been individually set, the theme will not apply to these elements when switching themes.) If you want certain individually set elements of a widget to follow the theme, you can choose "Apply Theme Style" for the widget.

Configuration

In the configuration tab, you can configure the corner radius, padding, opacity, and fixed position on the page.

• The corner radius controls the radius value of the rounded corners of the widget.
• Padding controls the distance from the widget content to the widget border.
• Opacity controls the overall opacity of the widget, with a setting range of 0~100.
• Fixed to page refers to fixing the widget to a certain position on the page, such as the top or bottom of the dashboard. After enabling the fixed page feature, you can set the widget size, position, and alignment. However, resizing the widget by dragging is no longer supported.

Background and Border

In the Background and Border tab, you can set the background, border, and shadow of the control.

• Background Color
  • You can set the background color of the control, supporting single color and gradient.
  • You can add a background image to the control, with the background image layer above the background color.
• Border
  • You can set the control border, including color, thickness, line type, etc.
• Shadow
  • You can set the outer shadow and inner shadow of the control.

Control Interaction Settings

Control interaction refers to the interaction behavior between the control and other controls in the dashboard when the control is clicked, including linked filtering, drilling down, linked filtering + drilling down, executing JS code, no response, and jumping.

Linked Filtering

When the control interaction selects linked filtering, clicking on the dimension information in the chart will cause related chart controls to perform data linkage together. As shown in the figure, when clicking on the Daily Customer Growth chart, the associated chart controls will all follow the value selected by the chart for linked filtering, with the filtering date being August 2020. Clicking on the Liaoning province in the Customer Distribution will also use Liaoning province for data association in other charts.

By default, linked filtering will link all related charts, i.e., filtering charts made with the same dataset. It is also possible to set linked filtering for specified charts.

Tip

By default, the chart control interaction selects linked filtering.

Multi-Level Linkage

Click on a chart to trigger linkage, the current chart will display the linked charts, and the linked charts will display the linkage conditions acting on them. It supports simultaneous clicking on multiple charts for linkage.

View Linked Filter Conditions

On the linked chart, you can view the linked conditions applied to the current chart. On the linked filter panel, you can see all the filter conditions of the entire dashboard, categorized by charts. For example, if there are two linked conditions in a table, two rows will be displayed on the chart, but only one row will be displayed on the filter panel.

Cancel Linkage Filter Conditions

Canceling linkage filters can either cancel the linkage filter for the current chart or for the entire dashboard.

• Click the cancel linkage button on the chart to cancel the linkage filter triggered by the current chart. You can also cancel the linkage filter by removing the chart from the linkage filter panel.
• Click "Clear and Close" on the filter panel to cancel the filter conditions for all charts in the dashboard.

Drill Down

Drill down refers to the process where clicking on a data item in a chart displays the corresponding chart according to the set path, allowing for in-depth exploration and analysis of the data layer by layer. An example is the sales performance of a certain product. The chart shows the sales of the product across various cities in the country. Clicking on a city reveals the sales performance of each mall in that city, and clicking on a mall shows the details of specific orders.

Each chart requires two steps to implement the drill-down functionality:

1. Turn on the drill-down switch.
2. Configure the drill-down layers.

Drill Down Switch

The drill-down feature can be used in dashboards or when a chart is opened, and the drill-down switch needs to be turned on in both scenarios.

1. To perform chart drill-down in a dashboard, you need to select the Drill Down or Link Filter + Drill Down function in Control Settings -> Interaction. The usage scenario is shown in the figure below.
2. To perform drill-down interaction when opening a chart, you need to select Popup Menu or Drill Down in the chart's interaction settings. The usage scenario is shown in the figure below.

Tip

1. The drill-down switch only controls the scenarios where the drill-down function is used, and is unrelated to the content of the drill-down layers.
2. The drill-down layers of the same chart are the same in any scenario.

Configure Drill-Down Layers

Each level of the drill-down path can have its dimensions, measures, and chart types set individually. Refer to the following guidelines to configure drill-down layers.

1. Click the "+" on the right side of the drill-down settings to add a new drill-down layer. The new drill-down layer directly copies the main chart.
2. Configure the drill-down layer, modify the chart type, drag in dimensions and measures, and set styles and interactions.
3. Repeat step 2 to add the next level of drill-down layers until all drill-down layers are configured.

Tip

Each level of the drill-down chart inherits the filtering conditions of the previous level, including chart dimensions and internal filter values. You can adjust the order between drill-down layers by dragging, such as swapping the order of Drill-Down Chart 1 and Drill-Down Chart 2.

Drill Down Button Display

When editing or displaying drill-down layers, a set of drill-up and drill-down buttons will be displayed in the upper right corner of the chart. This button group is floating at the top right corner of the control, allowing you to directly reach the topmost layer, drill down or roll up layer by layer, and display the drill-down path, enabling selection of any drill-down layer.

Linkage Filtering + Drill Down

Linkage Filtering + Drill Down refers to the interaction where clicking on a chart triggers linkage filtering on other charts and drill-down operations on the chart itself, combining two interactive features.

No Response

No response refers to no event being triggered when clicking the control.

Jump

In the switching between dashboards within an app, HENGSHI SENSE commonly uses a bottom-anchored pager, allowing users to quickly switch between various dashboards with ease.

However, if users wish to click on a specific icon object and then purposefully jump to a dashboard, how should this be set up?

In version 3.1, we introduced a powerful control jump feature, allowing the setting of jump targets for individual controls.

For example, in a financial report, if a KPI indicator is profit, then we can set up an interactive click-to-jump function for this KPI, with the jump target set to the "Profit Analysis" dashboard for detailed analysis of profit.

Jump to Dashboard within the App

Use dashboards within the app as the target for navigation, thereby achieving page transitions without the need for a pager. This operation can significantly enhance users' understanding of the logical relationship between the target and the clickable object, establishing a logical hierarchy between pages, making the displayed information easier to comprehend.

Bring Filter Conditions

When the target for the jump is set to Dashboard within App, you can check Bring Filter Conditions:

• Check Bring Filter Conditions: The field indicators and other information contained in the clicked chart object will be brought as filter conditions to the target dashboard.
• Uncheck Bring Filter Conditions: Only the jump action will be performed.

Tip

For example: In "Dashboard 1", set the action to jump from clicking "Bar Chart" to "Dashboard 2", while also checking Bring Filter Conditions. "Dashboard 1", "Bar Chart" has the dimension of months. When a user clicks on the "May" bar in Dashboard 1, they will be redirected to "Dashboard 2". At the same time, "Month=May" will be brought as a filter condition to "Dashboard 2", filtering the charts in "Dashboard 2".

Note

For Bring Filter Conditions to take effect, it is necessary to ensure that both dashboards use the same dataset or that there is a related model established between the datasets.

Below is an explanation of the value taken by checking Bring Filter Conditions in different charts

Bar Chart/Line Chart/Area Chart/Single Dimension Charts

The dimension corresponding to the clicked content will be brought in, as shown below:

Chinese-style Report (Table)

In a table, where there are multiple dimensions and measures intersecting, the values for filtering conditions brought by jumps follow these rules:

• Clicking on ①, the filtering condition is: "region = West"

• Clicking on ②, the filtering condition is: "region = West" & "state = California"

• Clicking on ③, the filtering condition is: "region = West" & "state = Idaho" & "sales = Corporate"

• Clicking on ④, the filtering condition is: "sales = Consumer"

PC Opening Location

When jumping on a PC, it supports opening in the current window, or setting to open in a new window or a pop-up window. When using a pop-up window, you can set the size of the pop-up window.

Tip

This setting does not take effect on mobile devices; the destination dashboard will always open in the current window.

Jump to URL

This feature allows the page to jump to a specified URL address, commonly used for connecting to enterprise websites, external links, etc. You can set the URL to open in a new window, in the current window, or using a pop-up window.

Tip

This setting does not take effect on mobile devices; the URL address will always open in the current window.

Please note

Note: The interaction setting for the web control is enabled click / disabled click.

Execute JS Code

Usually, linkage filtering and jumping can meet most of the requirements for drilling down reports, but inevitably, there are some more complex scenarios where the pre-set centralized event handling options are not sufficient. At this point, we can use the method of writing JS code to extend our functionality.

After selecting "Execute JS Code" in the click interaction response options, we can click on the Edit Code on the right to customize and write specific JS code.

The system provides the call parameter params, which users can use to implement related functions. The parameter contains a series of variables and calling methods.

• params.appId represents the application ID corresponding to the current dashboard. The parameter is of numeric type.

• params.dashboardId represents the ID of the current dashboard. The parameter is of numeric type.

• params.chartId If the mouse click is on a chart control in the dashboard, chartId displays the ID of that chart. The parameter is of numeric type.

• params.loginUser All information about the currently logged-in user. The parameter type is Object, containing information such as id, loginName, tenantId, tenantCode, etc.

  • params.loginUser.id The ID information of the currently logged-in user.
  • params.loginUser.loginName The username of the currently logged-in user.
  • params.loginUser.tenantId If the role of the currently logged-in user is a tenant, the tenant's ID will be displayed.
  • params.loginUser.tenantCode If the role of the currently logged-in user is a tenant, the tenant's enterprise ID will be displayed.

• params.userAttributes Stores all user attribute information of the currently logged-in user. The parameter type is Object.

• params.filters The filter conditions generated by clicking on the chart element.

  • Clicking on ①, the filter condition is: "region = West"
  • Clicking on ②, the filter condition is: "region = West" & "state = California"
  • Clicking on ③, the filter condition is: "region = West" & "state = Idaho" & "sales = Corporate"
  • Clicking on ④, the filter condition is: "sales = Consumer"

• params.allFilters All filters under the current dashboard, distinguished by filterType whether it is a parameter. This parameter is of array type.

• params.redirectCallback Opens the link address in the current page window.

• params.newTabCallback Opens the link address in a new page window.

• params.modalCallback Pops up a modal window in the current page window, where users can customize the display content.

Example

Below is an example using the cultural classroom. When you click on the "Tao Te Ching" course in the course list, the course content pops up. When you click on other courses, the introduction on Baidu pops up. In this case, you can use JavaScript code to achieve different interactions by clicking on the same chart.

Example JavaScript code is as follows:

console.log(params);
/*Get the course name at the mouse click*/
let Course = params.filters[0].args[1].op[0];
/*Concatenate the URL on Baidu based on the course name*/
let url = 'https://www.baidu.com/s?wd='+ Course;

/*Determine: If the click is on Tao Te Ching, a popup appears showing the content of Tao Te Ching. If it's another course, its Baidu search content is displayed in a new tab*/
if (Course === '道德经') {
   params.modalCallback({
   url: 'https://develop.hengshi.org/#/preview/127661/dashboard/29',
   title: "Tao Te Ching",
   width: 1024,
   height: 768
   });
} else {
   params.newTabCallback(url);
}

The chart interaction effect is shown in the figure.