@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
72 lines (71 loc) • 3.89 kB
JavaScript
import { __assign } from "tslib";
import React, { useCallback, useRef } from 'react';
import Grid from './grid';
import LineSeries from './line-series';
import BarSeries from './bar-series';
import styles from './styles.css.js';
export default function ChartContainer(_a) {
var width = _a.width, height = _a.height, series = _a.series, visibleSeries = _a.visibleSeries, highlightedSeries = _a.highlightedSeries, onHighlightChange = _a.onHighlightChange, pinnedSeries = _a.pinnedSeries, setPinnedSeries = _a.setPinnedSeries, stackedBars = _a.stackedBars, xScale = _a.xScale, yScale = _a.yScale, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, xTitle = _a.xTitle, yTitle = _a.yTitle;
var svgRef = useRef(null);
var margins = {
left: 50,
top: 38,
right: 0,
bottom: 60
};
var innerWidth = width - margins.left - margins.right;
var innerHeight = height - margins.top - margins.bottom;
var highlightSerie = useCallback(function (series, trigger) {
if (series !== highlightedSeries) {
onHighlightChange(series);
}
}, [highlightedSeries, onHighlightChange]);
var clearHighlightedSeries = useCallback(function () {
onHighlightChange(null);
}, [onHighlightChange]);
var onClick = useCallback(function (serie, triggerRef) {
if (pinnedSeries === serie) {
setPinnedSeries(null);
clearHighlightedSeries();
}
else {
setPinnedSeries(serie);
highlightSerie(serie, triggerRef);
}
}, [pinnedSeries, clearHighlightedSeries, setPinnedSeries, highlightSerie]);
var onMouseOver = useCallback(function (serie, triggerRef) {
if (pinnedSeries !== null) {
return;
}
highlightSerie(serie, triggerRef);
}, [pinnedSeries, highlightSerie]);
var onMouseOut = useCallback(function () {
if (pinnedSeries !== null) {
return;
}
clearHighlightedSeries();
}, [pinnedSeries, clearHighlightedSeries]);
var seriesInteractionProps = {
onClick: onClick,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut
};
var stackedBarOffsetMap = {};
var dataSeries = visibleSeries.map(function (s, i) {
var series = s.series, color = s.color;
var highlighted = series === highlightedSeries;
var dimmed = !!highlightedSeries && !highlighted;
switch (series.type) {
case 'line':
case 'threshold':
return (React.createElement(LineSeries, __assign({ key: "line-series-" + i, series: series, color: color, xScale: xScale, yScale: yScale, xScaleType: xScaleType, yScaleType: yScaleType, highlighted: highlighted, dimmed: dimmed }, seriesInteractionProps)));
case 'bar':
return (React.createElement(BarSeries, __assign({ key: "bar-" + i, series: series, color: color, totalSeriesCount: visibleSeries.length, seriesIndex: i, xScale: xScale, yScale: yScale, innerHeight: innerHeight, highlighted: highlighted, dimmed: dimmed, stackedBarOffsetMap: stackedBars ? stackedBarOffsetMap : undefined }, seriesInteractionProps)));
}
});
return (React.createElement(React.Fragment, null,
React.createElement("svg", { width: width, height: height, ref: svgRef, className: styles.svg },
React.createElement(Grid, { xScale: xScale, yScale: yScale, xScaleType: xScaleType, yScaleType: yScaleType, xTitle: xTitle, yTitle: yTitle, innerWidth: innerWidth, innerHeight: innerHeight }),
React.createElement("g", { transform: "translate(" + margins.left + ", " + margins.top + ")" }, dataSeries),
React.createElement("line", { className: styles.axis, x1: 0, x2: innerWidth, y1: innerHeight, y2: innerHeight, transform: "translate(" + margins.left + ", " + margins.top + ")" }))));
}