File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { Component } from "react";
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import CommonUtil from "../../../resources/js/CommonUtil";
export default function Chart8({ data }) {
const createChart = () => {
console.log('createChart8 data : ', data);
/* Chart code */
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
let root = am5.Root.new("Chart8");
root._logo.dispose();
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
let chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none"
}));
// We don't want zoom-out button to appear while animating, so we hide it
chart.zoomOutButton.set("forceHidden", true);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
let yRenderer = am5xy.AxisRendererY.new(root, {
minGridDistance: 30
});
yRenderer.grid.template.set("location", 1);
let yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "user_name",
renderer: yRenderer,
tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
}));
let xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
extraMax: 0.1,
renderer: am5xy.AxisRendererX.new(root, {
strokeOpacity: 0.1
})
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
let series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "average",
categoryYField: "user_name",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "left",
labelText: "{valueX}"
})
}));
// Rounded corners for columns
series.columns.template.setAll({
cornerRadiusTR: 5,
cornerRadiusBR: 5,
strokeOpacity: 0
});
// Make each column to be of a different color
series.columns.template.adapters.add("fill", function (fill, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add("stroke", function (stroke, target) {
return chart.get("colors").getIndex(series.columns.indexOf(target));
});
// Set data
yAxis.data.setAll(data);
series.data.setAll(data);
// Get series item by category
function getSeriesItem(category) {
for (var i = 0; i < series.dataItems.length; i++) {
let dataItem = series.dataItems[i];
if (dataItem.get("categoryY") == category) {
return dataItem;
}
}
}
chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none",
xAxis: xAxis,
yAxis: yAxis
}));
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}
React.useEffect(() => {
console.log('React.useEffect chart8 data : ', data);
if (CommonUtil.isEmpty(data) == false) {
createChart();
}
}, [data])
return (
<div id="Chart8" style={{ width: "100%", height: "100%" }}></div>
)
}