@jiker/superset-charts NPM

@jiker/superset-charts

npm.io npm.io npm.io npm.io

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 方法接收两个参数： 1. 图表 ID（必选） - 绑定 superset 图表的 ID 2. 过滤数组（可选） - 根据 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]);
      }
    });
  }
};