@jiker/superset-charts
v4.7.1
Published
Superset Charts in Jiker
Downloads
157
Readme
@jiker/superset-charts
Superset Charts in Jiker.
Usage (4.x)
在路由的全局前置守卫里通过请求获取 superset 的 token,并存入本地存储里。
其中superset_token
可以是任何string
,可配合@jiker/superset-charts/service/axios.js
进行同步更改。
import supersetService from "@/global/service/superset";
// ...
router.beforeEach(async (to, from, next) => {
// ...
try {
const SUPERSETTOKEN = localStorage.getItem("superset_token");
if (!SUPERSETTOKEN) {
const res = await supersetService.token();
localStorage.setItem("superset_token", res);
}
// ...
next();
} catch {
next();
}
});
// ...
通过组件注册使用它,数据可通过service
获取,示例如下:
<jk-bar
:id="chart.id"
:chart-id="chart.chart_id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-bar>
<jk-table
:chart-id="chart.chart_id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:chart-colnames="chart.colnames"
:width="chart.width"
:height="chart.height"
></jk-table>
import supersetService from "@jiker/superset-charts/service";
import { JkBar, JkTable } from "@jiker/superset-charts";
export default {
components: {
JkBar,
JkTable,
},
data() {
return {
chart: {
id: 1,
chart_id: 1,
width: 600,
height: 400
}
};
},
created() {
const id = this.chart.chart_id;
supersetService.getData(id).then(res => {
this.$set(chart, "type", res[2].viz_type);
this.$set(chart, "chart_id", id);
this.$set(chart, "name", res[0]);
this.$set(data, "description", res[1]);
this.$set(chart, "data", res[3].result[0].data);
this.$set(chart, "config", res[2]);
if (res[2].viz_type === "table") {
this.$set(chart, "colnames", res[3].result[0].colnames);
}
});
}
};
目前可注册组件有:
- JkBar
- JkEchartsDiy
- JkGantt
- JkHydrograph
- JkLine
- JkLineBar
- JkNumber
- JkPie
- JkSankey
- JkScatter
- JkTable
service
的 getData
方法接收两个参数:
- 图表 ID(必选) - 绑定 superset 图表的 ID
- 过滤数组(可选) - 根据 superset 的过滤规范过滤出所需数据
// 过滤数组的数据结构参考
[
{
col: "companyAppid",
op: "==",
val: appid,
},
];
注:4.4.x
以上的版本新增了导出 CSV 与跳转到 Superset 的功能:
- 添加
is-export
即可添加 导出 CSV 功能,样式可通过 export 插槽插入 - 添加
is-skip
即可添加跳转功能,跳转 ID 通过chart-id
注入,样式可通过 skip 插槽插入
<template v-if="chart.type === 'table'">
<jk-table
:chart-id="chart.chart_id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:chart-colnames="chart.colnames"
:width="chart.width"
:height="chart.height"
is-skip
is-export
>
<template v-slot:skip></template>
<template v-slot:export></template>
</jk-table>
</template>
Usage (3.x)
通过组件注册使用它,数据可通过service
获取,示例如下:
<template v-if="chart.type === 'table'">
<jk-table
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:chart-colnames="chart.colnames"
:width="chart.width"
:height="chart.height"
></jk-table>
</template>
<template v-if="chart.type === 'echarts_line'">
<jk-line
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-line>
</template>
<template v-if="chart.type === 'echarts_bar'">
<jk-bar
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-bar>
</template>
<template v-if="chart.type === 'echarts_pie'">
<jk-pie
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-pie>
</template>
<template v-if="chart.type === 'echarts_hydrograph'">
<jk-hydrograph
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-hydrograph>
</template>
<template v-if="chart.type === 'jk_number'">
<jk-number
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-number>
</template>
<template v-if="chart.type === 'echarts_line_bar'">
<jk-line-bar
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-line-bar>
</template>
<template v-if="chart.type === 'echarts_gantt'">
<jk-gantt
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-gantt>
</template>
<template v-if="chart.type === 'echarts_scatter'">
<jk-scatter
:id="chart.id"
:chart-name="chart.name"
:chart-description="chart.description"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-scatter>
</template>
import supersetService from "@jiker/superset-charts/service";
import {
JkTable,
JkLine,
JkBar,
JkPie,
JkHydrograph,
JkNumber,
JkLineBar,
JkGantt,
JkScatter
} from "@jiker/superset-charts";
import axios from "@/global/request/axios";
import API from "@/global/request/api";
export default {
components: {
JkTable,
JkLine,
JkBar,
JkPie,
JkHydrograph,
JkNumber,
JkLineBar,
JkGantt,
JkScatter
},
data() {
return {
chart: {
id: 1,
chart_id: 1,
width: 600,
height: 400
}
};
},
created() {
const id = this.chart.chart_id;
supersetService
.getData(axios, API.chartItem(id), API.chartData)
.then(res => {
this.$set(chart, "type", res[2].viz_type);
this.$set(chart, "name", res[0]);
this.$set(data, "description", res[1]);
this.$set(chart, "data", res[3].result[0].data);
this.$set(chart, "config", res[2]);
if (res[2].viz_type === "table") {
this.$set(chart, "colnames", res[3].result[0].colnames);
}
});
}
};
Usage (2.x)
在路由的全局前置守卫里通过登录请求获取 superset 的 token,并存入本地存储里。
其中superset_token
可以是任何string
,可配合@jiker/superset-charts/service/axios.js
进行同步更改。
配置params
中的username
和password
为 superset 中所注册的用户名与密码。
import supersetService from "@jiker/superset-charts/service";
// ...
router.beforeEach(async (to, from, next) => {
// ...
try {
const SUPERSETTOKEN = localStorage.getItem("superset_token");
if (!SUPERSETTOKEN) {
const params = {
username: "admin",
password: "123456",
provider: "db",
refresh: true
};
const superset = await supersetService.securityLogin(params);
localStorage.setItem("superset_token", superset.access_token);
}
// ...
next();
} catch {
next();
}
});
// ...
然后通过组件注册使用它,数据可通过service
获取,示例如下:
<template v-if="chart.type === 'table'">
<jk-table
:chart-name="chart.name"
:chart-data="chart.data"
:chart-colnames="chart.colnames"
:pagination-page-size="chart.paginationPageSize"
:pagination-total="chart.paginationTotal"
:width="chart.width"
:height="chart.height"
></jk-table>
</template>
<template v-if="chart.type === 'echarts_line'">
<jk-line
:id="chart.id"
:chart-name="chart.name"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-line>
</template>
<template v-if="chart.type === 'echarts_bar'">
<jk-bar
:id="chart.id"
:chart-name="chart.name"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-bar>
</template>
<template v-if="chart.type === 'echarts_pie'">
<jk-pie
:id="chart.id"
:chart-name="chart.name"
:chart-config="chart.config"
:chart-data="chart.data"
:width="chart.width"
:height="chart.height"
></jk-pie>
</template>
import supersetService from "@jiker/superset-charts/service";
import { JkTable, JkLine, JkBar, JkPie } from "@jiker/superset-charts";
export default {
components: {
JkTable,
JkLine,
JkBar,
JkPie
},
data() {
return {
chart: {
id: 1,
chart_id: 1,
width: 600,
height: 400
}
};
},
created() {
const id = this.chart.chart_id;
supersetService.getData(id).then(res => {
this.$set(chart, "type", res[1].viz_type);
this.$set(chart, "name", res[0]);
this.$set(chart, "data", res[2].result[0].data);
if (res[1].viz_type === "table") {
this.$set(chart, "colnames", res[2].result[0].colnames);
this.$set(chart, "paginationPageSize", res[1].page_length);
this.$set(chart, "paginationTotal", res[2].result[0].rowcount);
} else {
this.$set(chart, "config", res[1]);
}
});
}
};
License
Copyright (c) 2021-present zhuhuajian