We are happy to announce the release of the Apache ECharts Panel 4.3.0/4.3.1. This release include the following updates:
- Added an alert state and annotations.
Added the `getDataSourceSrv` parameter to retrieve the entry point to data sources.- Updated U.S. and world maps in the GeoJSON module.
- Updated the plugin to the latest Grafana 9.4.7 toolkit and the Apache ECharts 5.4.2 library.
After the plugin review by the Grafana team, the getDataSourceSrv parameter was removed due to security reasons in v4.3.1.
The plugin was updated in the Grafana Plugins catalog on April 24, 2023.
100k downloads
We are pleased to announce that Apache ECharts Panel has been downloaded over 100,000 times. This extension is not a plug-and-play product and requires some learning. Our YouTube tutorials and documentation will undoubtedly assist you in mastering the plugin and revealing its unrivaled customization potential.
Alert State and Annotations
We added support for Annotations in Apache ECharts using mark lines. Data for mark lines is retrieved from the data.annotations object as explained in the product documentation.
const annotations = [];
data.annotations.map((a) => {
a.source.forEach((source) =>
annotations.push({
xAxis: source.time,
label: source.text,
lineStyle: {
color: source.color,
width: 2,
},
})
);
});
/**
* Data Sources
*/
const series = data.series.map((s) => {
const sData =
s.fields.find((f) => f.type === "number").values.buffer ||
s.fields.find((f) => f.type === "number").values;
const sTime =
s.fields.find((f) => f.type === "time").values.buffer ||
s.fields.find((f) => f.type === "time").values;
return {
name: s.refId,
type: "line",
showSymbol: false,
areaStyle: {
opacity: 0.1,
},
lineStyle: {
width: 1,
},
data: sData.map((d, i) => [sTime[i], d.toFixed(2)]),
markLine: {
data: annotations,
label: {
show: false,
},
symbol: ["none", "none"],
},
};
});
Entry point to data sources
After the plugin review by the Grafana team, this functionality was removed due to security reasons in v4.3.1.
We are testing a security-safe technique in the Data Manipulation plugin and plan to include it into Apache ECharts Panel.
Apache ECharts Panel allows you to retrieve an entry point of a data source. You can use the data source instance to perform any methods supplied by the data source.
async () => {
const targets = data.request?.targets;
if (targets.length && targets[0].datasource) {
const datasource = await getDataSourceSrv().get(targets[0].datasource);
notifySuccess(["PostgreSQL Version", await datasource.getVersion()]);
}
};
GeoJSON updates
GeoJSON files (U.S. and world maps) were synchronized with native maps provided within Grafana GeoMap. You may now quickly transition from GeoMap to Apache ECharts Panel to display visual maps, like we already did for the Website Analytics blog.
Panel Variables
We continue to explore with integrating DOM components straight into the Apache ECharts container to add more interactivity. This time, we introduced a dropdown box that lets you update Apache ECharts or establish a direct interaction with the data source through an entry point.
loading...
Getting Started
You can install Apache ECharts Panel from the Grafana Plugins catalog or using the Grafana command line tool.
For the latter, please use the following command.
grafana-cli plugins install volkovlabs-echarts-panel
YouTube Tutorial
The Apache ECharts Panel plugin is a data visualization extension for Grafana that allows you to integrate charts and graphs from the popular Apache ECharts library into your Grafana dashboard.
One of the three plugins that completes Grafana is Apache ECharts Panel. With Dynamic Text, Data Manipulation, and Apache ECharts Panel you can create fully functional web applications meeting your needs and expectations.
Release Notes
Breaking changes in 4.3.1
- Removed the
getDataSourceSrvparameter due to security reasons (#156).
Features / Enhancements
- Added compatibility with Grafana 9.4.7 (#146).
- Added
getDataSourceSrvparameter to retrieve the entry point to data sources (#146). - Updated the Apache ECharts library to version 5.4.2 (#147).
- Updated U.S. and world GeoJSON maps used in the GeoMap module (#154).
- Added the Alert State and Annotations (#155).
Apache ECharts 5.4.2
- [Feature][bar] Support borderRadius for polar bar and its background. #17995 (Ovilia)
- [Feature][i18n] Add Turkish(tr_TR) translation. #18012 (partitect)
- [Feature][i18n] Add Vietnamese(vi_VN) translation. #18279 (nghiepdev)
- [Fix][bar] Polar bar animation should start from r0 rather than 0. #17997 (Ovilia)
- [Fix][marker] Fix abnormal range of markArea in bar series. #18229 (Ovilia)
- [Fix][line] Fix labels don't show in line series when ssr is enabled. #18032 (plainheart)
- [Fix][svg] Fix defined CSS doesn't work due to unexpected encoding for style tag. #982 (plainheart)
- [Fix][sunburst] Fix labels might upside down in radial layout. #18240 (susiwen8)
- [Fix][dataset] Fix chart can't render when using object array and object item contains a property named length. #18276 (susiwen8)
- [Fix][tooltip] Fix tooltip still disappears after leaving the tooltip even if alwaysShowContent was enabled. #18221 (jianghaoran116)
- [Fix][text] Charsets like Cyrillic should break word the same as Latin. #973 (Ovilia)
- [Fix][type] Add missing treePathInfo property into sunburst formatter callback and add missing data option into SunburstSeriesOption. #18310 (plainheart)
- [Fix][type] Add missing callback function type for the symbol option of tree series. #18070 (ChepteaCatalin)
Feedback
We're looking forward to hearing from you. You can use different ways to get in touch with us.
- Ask a question, request a new feature, or report an issue at GitHub issues.
- Subscribe to our YouTube Channel and leave your comments.
- Sponsor our open-source plugins for Grafana at GitHub Sponsor.
- Support our project by starring the repository.
