hujian
/
bi-custom-chart-demo
forked from Jimmy.Zheng/bi-custom-chart-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

BI-126685 fix: 自定义图表demo

master
jimmychai 10 months ago
parent
87dd0bee55
commit
f7a8995b4b
9 changed files with 886 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 146
      build.xml
  2. 37
      plugin.xml
  3. 42
      pom.xml
  4. 152
      readme.md
  5. 27
      src/main/java/com/finebi/plugin/custom/component/CustomComponent.java
  6. 86
      src/main/java/com/finebi/plugin/custom/component/DemoComponentProvider.java
  7. 196
      src/main/resources/com/finebi/plugin/custom/component/config.json
  8. 3
      src/main/resources/com/finebi/plugin/custom/component/demo.css
  9. 219
      src/main/resources/com/finebi/plugin/custom/component/demo.js

146
build.xml
Unescape View File

@ -0,0 +1,146 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<project basedir="." default="jar" name="plugin">
<!-- JDK路径，根据自己机器上实际位置修改-->
<!-- JDK路径，根据自己机器上实际位置修改-->
<property name="jdk.home" value="D:\Java\jdk1.8.0_361"/>
<property name="libs" value="${basedir}/lib"/>
<property name="publicLibs" value=""/>
<property name="reportLibs" value="D:\chrome\downloads\BI6.0_spider_jar_jdk1.8"/>
<property name="destLoc" value="."/>
<property name="classes" value="classes"/>
<xmlproperty file="${basedir}/plugin.xml"/>
<property name="current-version" value="${plugin.version}"/>
<!-- 插件版本-->
<property name="plugin-version" value="${current-version}"/>
<!-- 插件名字-->
<property name="plugin-name" value="bi-custom-chart-demo"/>
<property name="plugin-jar" value="${plugin-name}-${plugin-version}.jar"/>
<property name="compile_files" value="${basedir}/src/main/java"/>
<!-- 编译好的classe-->
<property name="exist_classes" value="${basedir}/target/classes"/>
<target name="prepare">
<!-- <delete dir="${classes}"/>-->
<delete dir="fr-plugin-${plugin-name}-${plugin-version}"/>
<xmlproperty file="${basedir}/plugin.xml"/>
<delete dir="${destLoc}/${plugin.name}"/>
</target>
<path id="compile.classpath">
<fileset dir="${libs}">
<include name="**/*.jar"/>
</fileset>
<fileset dir="${publicLibs}">
<include name="**/*.jar"/>
</fileset>
<fileset dir="${reportLibs}">
<include name="**/*.jar"/>
</fileset>
</path>
<patternset id="resources4Jar">
<exclude name="**/.settings/**"/>
<exclude name=".classpath"/>
<exclude name=".project"/>
<exclude name="**/*.java"/>
<exclude name="**/*.db"/>
<exclude name="**/*.g"/>
<exclude name="**/package.html"/>
</patternset>
<target name="copy_resources">
<echo message="从${resources_from}拷贝图片,JS,CSS等资源文件"/>
<delete dir="tmp"/>
<copy todir="tmp">
<fileset dir="${resources_from}/src/main/resources">
<patternset refid="resources4Jar"/>
</fileset>
</copy>
<copy todir="${classes}">
<fileset dir="tmp"/>
</copy>
<delete dir="tmp"/>
</target>
<path id="compile.classpath2">
<fileset dir="${basedir}/lib">
<include name="*.jar"/>
</fileset>
<pathelement path="H:\coding\java\fanruan\bi\bi6.0_release\env\webroot\WEB-INF\classes"/>
</path>
<target name="compile_javas">
<echo message="编译${compile_files}下的Java文件"/>
<javac destdir="${classes}" debug="true" optimize="on" source="${source_jdk_version}"
target="${target_jdk_version}"
fork="true" memoryMaximumSize="1024m" listfiles="false" srcdir="${compile_files}"
executable="${compile_jdk_version}/bin/javac"
verbose="true">
<src path="${compile_files}"/>
<exclude name="**/.svn/**"/>
<compilerarg line="-encoding UTF8 "/>
<classpath refid="compile.classpath2"/>
<classpath refid="compile.classpath"/>
</javac>
<taskdef name="pretreatment" classname="com.fr.plugin.pack.PluginPretreatmentTask">
<classpath refid="compile.classpath"/>
</taskdef>
<pretreatment baseDir="${basedir}"/>
</target>
<!-- <target name="compile_javas">-->
<!-- <echo message="如果无其他依赖则直接用${exist_classes}避免ant报错"/>-->
<!-- </target>-->
<target name="jar_classes">
<echo message="打Jar包:${jar_name}"/>
<delete file="${basedir}/${jar_name}"/>
<jar jarfile="${basedir}/${jar_name}">
<fileset dir="${classes}">
<exclude name="**/*.java"/>
</fileset>
</jar>
</target>
<target name="super_jar" depends="prepare">
<antcall target="copy_resources">
<param name="resources_from" value="${basedir}"/>
</antcall>
<antcall target="compile_javas">
<param name="source_jdk_version" value="1.8"/>
<param name="target_jdk_version" value="1.8"/>
<param name="compile_jdk_version" value="${jdk.home}"/>
<param name="compile_files" value="${basedir}/src/main/java"/>
</antcall>
<echo message="compile plugin success!"/>
<antcall target="jar_classes">
<param name="jar_name" value="${plugin-jar}"/>
</antcall>
<delete dir="${classes}"/>
</target>
<target name="jar" depends="super_jar">
<antcall target="zip"/>
</target>
<target name="zip">
<property name="plugin-folder" value="${plugin-name}-${plugin-version}"/>
<echo message="----------zip files----------"/>
<mkdir dir="${plugin-folder}"/>
<copy todir="${plugin-folder}">
<fileset dir=".">
<include name="${plugin-jar}"/>
<include name="plugin.xml"/>
<include name="readme.md"/>
</fileset>
<fileset dir="${libs}">
<include name="*.*"/>
</fileset>
</copy>
<zip destfile="${basedir}/${plugin-folder}.zip" basedir=".">
<include name="${plugin-folder}/*.*"/>
</zip>
<move file="${plugin-folder}.zip" todir="${destLoc}/install"/>
</target>
</project>

37
plugin.xml
Unescape View File

@ -1,26 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><plugin>
<id>com.fanruan.plugin.template.uuid</id>
<name><![CDATA[插件名字]]></name>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<plugin>
<id>com.finebi.plugin.custom.chart.demo.v6</id>
<name><![CDATA[自定义图表demo]]></name>
<active>yes</active>
<version>1.0.0</version>
<env-version>10.0</env-version>
<jartime>2020-08-08</jartime>
<vendor>author</vendor>
<description><![CDATA[插件介绍。]]></description>
<version>1.6.0</version>
<env-version>11.0~11.0</env-version>
<bi-env-version>6.0~</bi-env-version>
<jartime>2023-05-16</jartime>
<vendor>fanruan</vendor>
<description><![CDATA[自定义图表demo]]></description>
<change-notes><![CDATA[
[2020-08-08]初始化插件。<br/>
[2023-06-01] demo
]]></change-notes>
<extra-core>
</extra-core>
<extra-decision>
</extra-decision>
<extra-report>
</extra-report>
<extra-designer>
</extra-designer>
<function-recorder class=""/>
<main-package>com</main-package>
<function-recorder class="com.finebi.plugin.custom.component.DemoComponentProvider"/>
<extra-core>
<CustomComponentProvider class="com.finebi.plugin.custom.component.DemoComponentProvider"/>
</extra-core>
</plugin>

42
pom.xml
Unescape View File

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>com.finebi.project</groupId>
<artifactId>nuclear-maven</artifactId>
<version>5.0-RELEASE-SNAPSHOT</version>
<relativePath>../nuclear-maven/pom.xml</relativePath>
</parent>
<artifactId>plugin-bi-custom-chart-demo</artifactId>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<dependencies>
<dependency>
<groupId>com.finebi</groupId>
<artifactId>common-service</artifactId>
<version>5.0-RELEASE-SNAPSHOT</version>
<scope>compile</scope>
</dependency>
</dependencies>
<build>
<!---如果要更改调试插件，改这里的配置就可以了-->
<outputDirectory>D:\apache-tomcat-9.0.73\webapps\webroot\WEB-INF/plugins/plugin-com.finebi.plugin.custom.chart.demo.v6/classes</outputDirectory>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>8</source>
<target>8</target>
</configuration>
</plugin>
</plugins>
</build>
</project>

152
readme.md
Unescape View File

@ -6,4 +6,154 @@
## 插件使用简介
请在这里提供一个简要的插件使用教程。
### config.json 配置解释
{
/**
* 自定义横纵轴名称
*/
"dataRegions": [
{
"name": "自定义数据1"
},
{
"name": "自定义数据2"
}
],
/**
* 自定义图形属性
* 两种方式：
* 1. 可选配置。通过 settings 指定，有 color、size、symbol 三种可选配置，取 BI 图表默认实现
* 2. 可配配置。通过 settings 指定，有 Checkbox、RadioGroup、Segment、Select、ColorPicker、Input 六种基本组件
*/
"attrRegions": [
{
"name": "颜色1", // 属性名称
"multiFields": false, // 是否可以拖入多个字段
"settings": "color"
},
{
"name": "大小1",
"multiFields": true,
"settings": "size"
},
{
"name": "形状1",
"multiFields": false,
"settings": "symbol"
},
{
"name": "自定选项",
"multiFields": false,
"settings": [
{
"name": "Checkbox",
"type": "Checkbox",
"defaultValue": ["2", "3"],
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项2",
"value": "3"
}
]
},
{
"name": "RadioGroup",
"type": "RadioGroup",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Segment",
"type": "Segment",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Select",
"type": "Select",
"defaultValue": "1",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "ColorPicker",
"type": "ColorPicker",
"defaultValue": "#ffffff"
},
{
"name": "Input",
"type": "Input",
"defaultValue": "test"
}
]
},
{
"name": "属性1属性1属性1",
"multiFields": true
},
{
"name": "属性2",
"multiFields": false
}
],
/**
* 自定义组件样式
* 方式同自定义图形属性中的可配配置
*/
"chartStyles": [
{
"name": "自定义1",
"settings": [
{
"name": "RadioGroup",
"type": "RadioGroup",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
}
]
}
]
}

27
src/main/java/com/finebi/plugin/custom/component/CustomComponent.java
Unescape View File

@ -0,0 +1,27 @@
package com.finebi.plugin.custom.component;
import com.fr.web.struct.AssembleComponent;
import com.fr.web.struct.Atom;
import com.fr.web.struct.browser.RequestClient;
import com.fr.web.struct.category.ParserType;
import com.fr.web.struct.category.ScriptPath;
import com.fr.web.struct.category.StylePath;
public class CustomComponent extends AssembleComponent {
public static final CustomComponent KEY = new CustomComponent();
@Override
public Atom[] refer() {
return new Atom[0];
}
@Override
public ScriptPath script(RequestClient req) {
return ScriptPath.build("/com/finebi/plugin/custom/component/demo.js");
}
@Override
public StylePath style(RequestClient req) {
return StylePath.build("/com/finebi/plugin/custom/component/demo.css", ParserType.DYNAMIC);
}
}

86
src/main/java/com/finebi/plugin/custom/component/DemoComponentProvider.java
Unescape View File

@ -0,0 +1,86 @@
package com.finebi.plugin.custom.component;
import com.finebi.common.api.service.plugin.common.context.OperationContext;
import com.finebi.common.api.service.plugin.component.AbstractCustomComponentProvider;
import com.fr.general.IOUtils;
import com.fr.plugin.transform.ExecuteFunctionRecord;
import com.fr.plugin.transform.FunctionRecorder;
import com.fr.web.struct.AssembleComponent;
@FunctionRecorder
public class DemoComponentProvider extends AbstractCustomComponentProvider{
/**
* 自定义图表名称
*/
@Override
public String getName() {
return "自定义图表demo";
}
/**
* 自定义图表类型
*/
@Override
public String getType() {
return "demo";
}
/**
* 自定义图表 icon
*/
@Override
public String getIcon() {
return "http://webapi.amap.com/theme/v1.3/mapinfo_05.png";
}
/**
* 空自定义图表提示，不写默认取 icon
*/
@Override
public String getPreviewIcon() {
return "http://webapi.amap.com/theme/v1.3/mapinfo_05.png";
}
/**
* 自定义图表预览 dom，注入依赖文件和挂载节点，可以获取 context
* @param context 上下文
*/
@ExecuteFunctionRecord
@Override
public String getPreviewPageHTML(OperationContext context) {
return "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://fanruan.design/fineui/2.0/fineui.min.css\" />" +
"<script src=\"https://fanruan.design/fineui/2.0/fineui.min.js\"></script>" +
"<div>context: </div>" + context.getSystemInfo() + context.getUserInfo() +
"<div id=\"container\">这是预览</div>";
}
/**
* 自定义图表编辑 dom，不写默认取预览
* @param context 上下文
*/
@ExecuteFunctionRecord
@Override
public String getEditPageHTML(OperationContext context) {
return "<link rel=\"stylesheet\" type=\"text/css\" href=\"https://fanruan.design/fineui/2.0/fineui.min.css\" />" +
"<script src=\"https://fanruan.design/fineui/2.0/fineui.min.js\"></script>" +
"<div>context: </div>" + context.getSystemInfo() + context.getUserInfo() +
"<div id=\"container\">这是编辑</div>";
}
/**
* 自定义图表渲染 js、css 注入
* @param context 上下文
*/
@Override
public AssembleComponent previewClient(OperationContext context) {
return CustomComponent.KEY;
}
/**
* 自定义图表配置文件
*/
@Override
public String config() {
return IOUtils.readResourceAsString("com/finebi/plugin/custom/component/config.json");
}
}

196
src/main/resources/com/finebi/plugin/custom/component/config.json
Unescape View File

@ -0,0 +1,196 @@
{
"dataRegions": [
{
"name": "自定义数据1"
},
{
"name": "自定义数据2"
}
],
"attrRegions": [
{
"name": "颜色1",
"multiFields": false,
"settings": "color"
},
{
"name": "大小1",
"multiFields": true,
"settings": "size"
},
{
"name": "形状1",
"multiFields": false,
"settings": "symbol"
},
{
"name": "自定选项",
"multiFields": false,
"settings": [
{
"name": "Checkbox",
"type": "Checkbox",
"defaultValue": ["2", "3"],
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项2",
"value": "3"
}
]
},
{
"name": "RadioGroup",
"type": "RadioGroup",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Segment",
"type": "Segment",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Select",
"type": "Select",
"defaultValue": "1",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "ColorPicker",
"type": "ColorPicker",
"defaultValue": "#ffffff"
},
{
"name": "Input",
"type": "Input",
"defaultValue": "test"
}
]
},
{
"name": "属性1属性1属性1",
"multiFields": true
},
{
"name": "属性2",
"multiFields": false
}
],
"chartStyles": [
{
"name": "自定选项",
"settings": [
{
"name": "Checkbox",
"type": "Checkbox",
"defaultValue": ["2", "3"],
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
},
{
"text": "选项2",
"value": "3"
}
]
},
{
"name": "RadioGroup",
"type": "RadioGroup",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Segment",
"type": "Segment",
"defaultValue": "2",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "Select",
"type": "Select",
"defaultValue": "1",
"items": [
{
"text": "选项1",
"value": "1"
},
{
"text": "选项2",
"value": "2"
}
]
},
{
"name": "ColorPicker",
"type": "ColorPicker",
"defaultValue": "#ffffff"
},
{
"name": "Input",
"type": "Input",
"defaultValue": "test"
}
]
}
]
}

3
src/main/resources/com/finebi/plugin/custom/component/demo.css
Unescape View File

@ -0,0 +1,3 @@
*{
font-size: 20px;
}

219
src/main/resources/com/finebi/plugin/custom/component/demo.js
Unescape View File

@ -0,0 +1,219 @@
function render(
data,
config,
saveSessionCallback,
// 暂时没用
closeSessionCallBack,
extensionCallBack
) {
const {
// 数据，若横纵轴多指标时图表属性有维度字段，dataModels 为以图表属性为分组的多组数据
dataModels,
// 横纵轴拖入字段的维度 id
dataMapping,
// 图表属性拖入字段的维度 id
chartAttrMapping,
// 图表点击值
clicked
} = data;
const {
// 组件 id
widgetId,
// 全局样式中图表最终样式
globalStyles,
// 图表属性配置所选值
chartAttr,
// 图表样式配置所选值
chartStyle,
// 图标属性中使用形状时的图标映射
symbolIconMap,
// 自定义保存的值(saveSessionCallback)
customConfig
} = config;
const refs = {};
// demo 仅使用表格模拟
BI.createWidget({
type: 'bi.vertical',
element: '#container',
items: [
{
type: 'bi.label',
text:
'dataMapping(横纵轴拖入字段的维度 id): ' +
JSON.stringify(dataMapping)
},
{
type: 'bi.label',
text:
'chartAttrMapping(图表属性拖入字段的维度 id): ' +
JSON.stringify(chartAttrMapping)
},
{
type: 'bi.label',
text: 'widgetId(组件 id): ' + JSON.stringify(widgetId)
},
{
type: 'bi.label',
text:
'globalStyles(全局样式中图表最终样式): ' +
JSON.stringify(globalStyles)
},
{
type: 'bi.label',
text:
'chartAttr(图表属性配置所选值): ' +
JSON.stringify(chartAttr)
},
{
type: 'bi.label',
text:
'chartStyle(图表样式配置所选值): ' +
JSON.stringify(chartStyle)
},
{
type: 'bi.label',
text:
'symbolIconMap(图标属性中使用形状时的图标映射): ' +
JSON.stringify(symbolIconMap)
},
{
type: 'bi.label',
text:
'customConfig(自定义保存的值(saveSessionCallback)): ' +
JSON.stringify(customConfig)
},
{
type: 'bi.vertical',
items: dataModels.map(dataModel => {
const { fields, colData } = dataModel;
return {
type: 'bi.vertical',
items: [
{
type: 'bi.vertical_adapt',
items: fields.map(field => {
return {
type: 'bi.label',
text: field.name,
rgap: 5
};
})
},
{
type: 'bi.vertical_adapt',
items: colData.map((data, colIndex) => {
// 维度id
const dId = fields[colIndex].id;
return {
type: 'bi.vertical',
items: data.map((text, dataIndex) => {
const key =
'' + colIndex + dataIndex;
// 构造当前联动点击值对象
const value = [];
for (
let i = 0;
i <= colIndex;
i++
) {
// 当前维度和之前维度的id及对应值
value.push({
dId: fields[i].id,
text: colData[i][dataIndex]
});
}
// 联动点击值对象
const currentClicked = {
dId,
value
};
return {
type: 'bi.label',
height: 30,
rgap: 5,
text,
cls: isClicked(
clicked,
currentClicked
)
? 'bi-border'
: '',
ref: ref => {
refs[key] = ref;
},
handler: () => {
BI.each(refs, (_, ref) => {
ref.element.removeClass(
'bi-border'
);
});
refs[key].element.addClass(
'bi-border'
);
// 触发联动
extensionCallBack(
'click',
currentClicked
);
// 模拟自定义保存值，可以是任意值，通过 customConfig 原样返回
saveSessionCallback({
saveValue:
currentClicked
});
}
};
})
};
})
}
]
};
})
}
]
});
}
// 注册渲染方法
new BIPlugin().init(render);
// 判断当前数据是否为点击值
function isClicked(clicked, currentClicked) {
function valueEq(v1, v2) {
if (v1 === v2) {
return true;
}
if (!BI.isArray(v1) || !BI.isArray(v2)) {
return false;
}
if (v1.length !== v2.length) {
return false;
}
return !BI.some(v1, (i, v) => {
const textEq = BI.isNull(v.text)
? BI.isNull(v.text) !== BI.isNull(v2[i].text)
: v.text !== v2[i].text;
return v.dId !== v2[i].dId || textEq;
});
}
if (BI.isNull(clicked) || BI.isNull(currentClicked)) {
return false;
}
return (
clicked.dId === currentClicked.dId &&
valueEq(clicked.value, currentClicked.value)
);
}
Write Preview
Loading…
Cancel
Save