superset动态修改筛选器中的参数后嵌入dashboard

通过新增css模板适配移动端可行(已经新增了css模板文件，修改了样式) 创建dashboard步骤： 1.创建dashboard时 宽度拉满 高度默认 2.编辑dashboard 维护嵌入的页面 获取dashboard嵌入id 维护css模板

默认传参问题(需要按照格式通过url传参)： id — 包含本机过滤器 ID。在高级部分编辑“仪表板属性”时，可以通过查看 JSON 元数据来获取过滤器 ID。

column — 要筛选的列。请注意，必须使用列名称，而不是过滤器名称。

value — 要选择的值

native_filters=(NATIVE_FILTER-:(__cache:(label:'value',validateStatus:!f,value:!('value')),extraFormData:(filters:!((col:column,op:IN,val:!('value')))),filterState:(label:'value',validateStatus:!f,value:!('value')),id:NATIVE_FILTER-id,ownState:()))

单选

native_filters=(NATIVE_FILTER-qq4iEdJTg:(__cache:(label:'2024-01-01',validateStatus:!f,value:!('2024-01-01')),extraFormData:(filters:!((col:pv_ads_sales_local_date,op:IN,val:!('2024-01-01')))),filterState:(label:'2024-01-01',validateStatus:!f,value:!('2024-01-01')),id:NATIVE_FILTER-qq4iEdJTg,ownState:()))

多选

native_filters=(NATIVE_FILTER-qq4iEdJTg:(__cache:(label:'2024-01-01,2024-02-01',validateStatus:!f,value:!('2024-01-01','2024-02-01')),extraFormData:(filters:!((col:pv_ads_sales_local_date,op:IN,val:!('2024-01-01','2024-02-01')))),filterState:(label:'2024-01-01,2024-02-01',validateStatus:!f,value:!('2024-01-01','2024-02-01')),id:NATIVE_FILTER-qq4iEdJTg,ownState:()))

1.首先获取到筛选器的唯一id

2.获取到筛选器对应的column

3.替换value

原理是将JSON转化为RISON放到url上 RISON online decoder/encoder / Yuri Astrakhan | Observable (observablehq.com) observablehq.com/@nyurik/ris…

这个网址可以在线转换

在sdk中调用

embedDashboard({
	id: supersetDashboardId,
	supersetDomain: 'https://qdsuperset.pharmbrain.com',
	mountPoint: document.getElementById(`superset-card-${echartsId}`),
	fetchGuestToken: () => token,
	dashboardUiConfig: {
		// dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional), urlParams (optional)
		hideTitle: true,
		hideTab: true,
		filters: {
			visible: true,
			expanded: false,
		},

		urlParams: {
			native_filters:'(NATIVE_FILTER-qq4iEdJTg:(__cache:(label:'2024-01-01',validateStatus:!f,value:!('2024-01-01')),extraFormData:(filters:!((col:pv_ads_sales_local_date,op:IN,val:!('2024-01-01')))),filterState:(label:'2024-01-01',validateStatus:!f,value:!('2024-01-01')),id:NATIVE_FILTER-qq4iEdJTg,ownState:()))'
		},
	},
});