npm package: @jiker/superset-charts
Description: Superset Charts in Jiker
Author: zhuhuajian
Latest version: 4.7.1

# @jiker/superset-charts

![](https://img.shields.io/badge/-jiker-brightgreen)
![](https://img.shields.io/npm/dw/@jiker/superset-charts)
![](https://img.shields.io/npm/v/@jiker/superset-charts)
![](https://img.shields.io/npm/l/@jiker/superset-charts)
![](https://img.shields.io/npm/collaborators/@jiker/superset-charts)

> Superset Charts in Jiker.

## Usage (4.x)

在路由的全局前置守卫里通过请求获取 superset 的 token，并存入本地存储里。
其中`superset_token`可以是任何`string`，可配合`@jiker/superset-charts/service/axios.js`进行同步更改。

```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`获取，示例如下：

```html
<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>
```

```js
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` 方法接收两个参数：
1. 图表 ID（必选） - 绑定 superset 图表的 ID
2. 过滤数组（可选） - 根据 superset 的过滤规范过滤出所需数据

```js
// 过滤数组的数据结构参考
[
  {
    col: "companyAppid",
    op: "==",
    val: appid,
  },
];
```

注：`4.4.x` 以上的版本新增了导出 CSV 与跳转到 Superset 的功能：
- 添加 `is-export` 即可添加 导出 CSV 功能，样式可通过 export 插槽插入
- 添加 `is-skip` 即可添加跳转功能，跳转 ID 通过 `chart-id` 注入，样式可通过 skip 插槽插入

```html
<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`获取，示例如下：

```html
<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>
```

```js
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 中所注册的用户名与密码。

```js
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`获取，示例如下：

```html
<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>
```

```js
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
[MIT](http://git.jiker-inc.com/jiker/npm/superset-charts/blob/master/LICENSE)

Copyright (c) 2021-present zhuhuajian