Below is the English translation of the provided markdown file:
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
- [Embedded Data Analysis Scenario Solutions](#embedded-data-analysis-scenario-solutions)
- [Solution Overview](#solution-overview)
- [Embedded Data Filtering Guide for Published Pages](#embedded-data-filtering-guide-for-published-pages)
- [Example](#example)
- [HQL Introduction](#hql-introduction)
- [Syntax Rules](#syntax-rules)
- [Definition](#definition)
- [Quickstart](#quickstart)
- [Field](#field)
- [Where filtering](#where-filtering)
- [Having filtering](#having-filtering)
- [Customization Guide for Embedding Styles on Published Pages](#customization-guide-for-embedding-styles-on-published-pages)
- [Customizing the Dashboard iframe](#customizing-the-dashboard-iframe)
- [Parameter List](#parameter-list)
- [Example](#example-1)
- [Customizing the Chart iframe](#customizing-the-chart-iframe)
- [Parameter List](#parameter-list-1)
- [Example](#example-2)
- [Guide to Dynamically Change Embedded URLs](#guide-to-dynamically-change-embedded-urls)
- [1. PostMessage:](#1-postmessage)
- [2. iframe.src:](#2-iframesrc)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
# HENGSHI SENSE Embedded Data Analysis Scenario Solutions
## Solution Overview
| Key Points | Solution | Reference | Notes |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------- |
| Account Integration | Integrate with SSO authentication, solve the unified authentication of application identity and user identity, provide secure and reliable user authentication and identity transmission | [SSO Documentation](authorization.md) | |
| Single Sign-On | Integrate with SSO authentication, solve the unified authentication of application identity and user identity, provide secure and reliable user authentication and identity transmission | [SSO Documentation](authorization.md) | |
| Functional Permissions | Utilize user role management | [User Management Documentation](user-role.md) | |
| Data Permissions | Utilize data connection;<br/> Or leverage application publishing permissions;<br/> Or use the parameters embedded in the published page directly | [Connection Permissions](connection_permission.md) <br/> [Publishing Permission Control](publish-permission.md) <br/> This document's "Embedded Data Filtering Guide for Published Pages" section | |
| Embedding Creative Pages | Embed HENGSHI product links in iframes, adding the attribute name="export". For example, convert https://preview.hengshi.io/#/app's iframe to `<iframe src="https://preview.hengshi.io/#/app" name="export"></iframe>` | | Creative area pages do not support embedding on mobile devices |
| Embedding Published Pages | Supports similar methods of embedding in creative area pages; Or use the [share button](publish-analyst-share-embed.md) in the publishing area page to get the embedding link and embed it with iframe | [App Share Embed](publish-analyst-share-embed.md) | Published area pages support adaptive page responsiveness |
| API Support | HENGSHI system supports client-mode Restful API | [API Documentation](https://api.hengshi.io) | | |
Notes:
1. Page embedding supports parameters, including two categories: data filtering and style customization, which will be described separately below.
2. The API list required should be considered from the product perspective by the integrator, and it is recommended to use the page integration method as much as possible to avoid the complexity of the API;
3. On the user roles and user groups side, the integrator needs to consider the issue of functional permissions: synchronizing user information into the HENGSHI system; user registration/deletion will trigger the call of HENGSHI API, user role modification; coordination of user groups.
## Embedded Data Filtering Guide for Published Pages
When visiting or embedding a dashboard/chart from HENGSHI SENSE smart analysis platform, you can add parameters to the URL to achieve functionality similar to filters in the dashboard/chart. The following examples are provided for a detailed explanation.
### ExampleIn this example, the specific parameter is[
{"args": [
{"kind": "field",
"op": "_c7"
},
{"kind": "constant",
"op": [
"completion"
]
}
],
"datasetId": 961,
"fieldName": "_c7",
"kind": "function",
"op": "in",
"use": "checkbox"
}
]
This means filtering records where the _c7 field value is "completion". For a detailed explanation of the parameters, refer to the HQL section below.
Here is a simple method to obtain this parameter:
Open the Chrome browser's "Developer Tools", access this non-parameterized URL: https://preview.hengshi.io/#/share/3B4888A0/dashboard/FC3BBDE7
Open the filter, select the project phase, and choose the value "completion"
Then view the "Network" tab in the "Developer Tools", select the corresponding chart data interface, and view the request parameters in the headers:
Find the where part as shown in the figure above, JSON.stringify its value, and pass it to the URL's where parameter, refer to the example above.
### HQL Introduction
The syntax for the URL parameter values of the dashboard uses HENGSHI SENSE Query Language (HQL). Here, we briefly introduce the syntax rules of HQL. For more details, please refer to [API Documentation](https://api.hengshi.io/dashboard.html).
#### Syntax Rules
Use a unified JSON to describe each computational process. HQL consists of multiple recursive HE (Hengshi Expression).
##### DefinitionHE: {
"uid": "The unique global identifier of this node",
"kind": "Node type, which can be one of function, field, constant, setgroup, rangegroup, formula, reference",
"op": "Function type function name, field type field name, constant type specific value, setgroup and rangegroup source column, formula formula, reference pointed uid",
"args": "Arguments for the function type, null for other types of nodes",
"type": "Specifies the data type of this node, which can be one of string, number, integer, date, time, json, bool",
"value": "Only rangegroup and setgroup has this field",
"other": "Specific types of fields also have their own additional parameters, to be specified separately"
}
##### Quickstart
Let's look at a specific example. For example, if I want to perform an operation: select f1, f2::float * 100 as percent from table:options.axes = [
{
"kind": "field",
"op": "f1",
},
{
"kind": "field",
"op": "*",
"type": "integer",
"args": [
{
"kind": "field",
"op": "f2",
"type": "number"
},
{
"kind": "constant",
"op": 100
}
],
"uid": "percent"
}
]
For the above example, we can simplify it:options.axes = [
"f1",
{
"kind": "function",
"op": "*",
"args": ["f2", 100]
}
]
oroptions.axes = [
"f1",
{
"kind": "formula",
"op": "{f2} * 100"
}
]
##### Field{
"kind": "field",
"op": "field1"
}
or dataset5.field{
"kind": "field",
"op": "field1",
"args": [{"kind":"dataset", "op":5}]
}
##### Where filtering
If you need to filter products with a price > 20:where = [
{
"kind": "function",
"op": ">",
args[
{
"kind":"field",
"op": "price",
},
{
"kind": "constant",
"op": 20
}
]
}
]
Of course, it can also be simplified to:where = [
{
"kind": "function",
"op": ">",
"args": ["time", {"kind":"constant", "op":"2018-12-31", "type": "date"}]
}
]
orwhere = [
{
"kind": "formula",
"op": "{price} > 20"
}
]
##### Having filtering
If you need to filter products with a price > 20:having = [
{
"kind": "function",
"op": "notin",
args[
{
"kind":"reference",
"op": "x1",
},
{
"kind": "constant",
"op": [1, 2, 3]
}
]
}
]
Of course, it can also be simplified to:having = [
{
"kind": "function",
"op": "notin",
"args": [{"kind": "reference"}, [1, 2, 3]]
}
]
orhaving = [
{
"kind": "formula",
"op": "{x1} notin [1, 2, 3]"
}
]
## Customization Guide for Embedding Styles on Published Pages
After creating Dashboards and Charts using the HENGSHI SENSE smart analysis platform, you can embed them into existing systems using iframes. To achieve a unified style, embedding in iframes supports a variety of customization options.
### Customizing the Dashboard iframe
#### Parameter List
| **Parameter Name** | **Parameter Value** | **Description** |
| ------------------ | ------------------------------------------------------------ | ------------------------------------------- |
| copyright | copyright=false - Do not display copyright=true - Display (default value) | Set whether to display the Dashboard title. |
| background | background=rgb(255,255,0) - Set color value background=url(http://image) - Set background image | Set Dashboard background color or image. |
| padding | padding=10 5 10 5 - Set the padding of the Dashboard from top, right, bottom, left, spaced by blank spaces. | Set the Dashboard padding. |
| scrollable | scrollable=false - Not scrollable scrollable=true - Scrollable (default value) | Set whether the Dashboard is scrollable. |
| chartBackground | chartBackground=transparent - Set transparent background color chartBackground=rgb(255,255,0) - Set color value chartBackground=url([http://image)](http://)) - Set background image | Set background color or image for all Charts in the Dashboard. |
| chartTheme | chartTheme=white - Set white theme color chartTheme=blue - Set blue theme color chartTheme=darkblue - Set dark blue theme color | Set the coordinate axis color for all Charts in the Dashboard. |
| chartGap | chartGap=10 5 10 5 - Set gaps between Charts in the Dashboard from top, right, bottom, left, spaced by blank spaces. | Set the gap between different Charts in the Dashboard. |
| chartTitleColor | chartTitleColor=rgb(255,255,0) | Set title color for all Charts in the Dashboard. |
| chartAccessible | chartAccessible=false - Dashboard Charts cannot be opened chartAccessible=true - Dashboard Charts can be opened | Set whether Charts in the Dashboard can be opened. |
| locale | Specify the page language | Possible languages are `en-US`, `zh-CN`, `zh-TW`. |
#### Example
1. Original link: https://preview.hengshi.io/#/share/49AB8138/dashboard/2C454926
2. Set background image: https://preview.hengshi.io/#/share/49AB8138/dashboard/2C454926?background=url(http://hengshi.com/assets/img/slider_about.jpg)&chartBackground=transparent&chartTitleColor=rgb(255,255,255)&chartTheme=darkblue©right=false&scrollable=false
| **Parameter** | **Explanation** |
| --------------------------------------------------------------- | ------------------------------------- |
| background=url(http://hengshi.com/assets/img/slider_about.jpg) | Set Dashboard background image |
| chartBackground=transparent | Set Chart background color to transparent in the Dashboard |
| chartTitleColor=rgb(255,255,255) | Set Chart title color in the Dashboard |
| chartTheme=darkblue | Set Chart theme in the Dashboard |
| copyright=false | Hide Dashboard title |
| scrollable=false | Prevent Dashboard from scrolling down |
### Customizing the Chart iframe
#### Parameter List
| **Parameter Name** | **Parameter Value** | **Description** |
| ------------------ | ------------------------------------------------------------ | ---------------------------- |
| noFilter | noFilter=true - Do not display noFilter=false - Display (default value) | Do not display filter in Chart. |
| noAxes | noAxes=true – Do not display noAxes=false – Display (default value) | Do not display axes in Chart. |
| noTitle | noTitle=true – Do not display noTitle=false – Display (default value) | Do not display Chart title. |
| showAction | showAction=true – Display showAction=false – Do not display | Display the button in the top right corner of the Chart |
| titleColor | titleColor=rgb(255,255,255) | Set Chart title color. |
| chartPadding | chartPadding=10 5 10 5 – Set the gap between Charts in the Dashboard from top, right, bottom, left, spaced by blank spaces. | Set Chart padding. |
| chartBackground | chartBackground=transparent – Set transparent background color chartBackground=rgb(255,255,0) – Set color value chartBackground=url([http://image)](http://)) - Set background image | Set the Chart background color or image. |
| locale | Specify the page language | Possible languages are `en-US`, `zh-CN`, `zh-TW`. |
#### Example
1. Original link: https://preview.hengshi.io/#/share/49AB8138/dashboard/2C454926/sharechart/7387E416
2. Set background image: https://preview.hengshi.io/#/share/49AB8138/dashboard/2C454926/sharechart/7387E416?noFilter=1&noAxes=1&titleColor=rgb(255,255,255)&chartBackground=url(http://hengshi.com/assets/img/slider_about.jpg)&chartPadding=0%200%200%200
| **Parameter** | **Explanation** |
| ---------------------------------------------------------------- | ------------------------ |
| noFilter=1 | Do not display the filter in the top left corner |
| noAxes=1 | Do not display dimensions and metrics at the bottom |
| titleColor=rgb(255,255,255) | Set Chart title color |
| chartBackground=url(http://hengshi.com/assets/img/slider_about.jpg) | Set Chart background image |
| chartPadding=0 0 0 0 | Set Chart padding to 0 |
## Guide to Dynamically Change Embedded URLs
In embedding scenarios, it is common to need to dynamically change the embedded page URL based on business and interaction requirements. For this need, the embedded pages of HENGSHI SENSE support the following two ways to dynamically modify the embedded iFrame URL:
### 1. PostMessage:html