@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
58 lines • 6.67 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import AxisLabel from '../internal/components/cartesian-chart/axis-label';
import BlockEndLabels, { useBLockEndLabels } from '../internal/components/cartesian-chart/block-end-labels';
import { CartesianChartContainer } from '../internal/components/cartesian-chart/chart-container';
import EmphasizedBaseline from '../internal/components/cartesian-chart/emphasized-baseline';
import InlineStartLabels from '../internal/components/cartesian-chart/inline-start-labels';
import LabelsMeasure from '../internal/components/cartesian-chart/labels-measure';
import ChartPlot from '../internal/components/chart-plot';
import useContainerWidth from '../internal/utils/use-container-width';
import { useSelector } from './async-store';
import AreaChartPopover from './elements/chart-popover';
import AreaDataSeries from './elements/data-series';
import AreaHighlightedPoint from './elements/highlighted-point';
import useHighlightDetails from './elements/use-highlight-details';
import AreaVerticalMarker from './elements/vertical-marker';
const DEFAULT_CHART_WIDTH = 500;
const INLINE_START_LABELS_MARGIN = 16;
const BLOCK_END_LABELS_OFFSET = 12;
export default memo(ChartContainer);
function ChartContainer({ model, autoWidth, xTitle, yTitle, detailPopoverSize, detailPopoverFooter, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings: { xTickFormatter: deprecatedXTickFormatter, yTickFormatter: deprecatedYTickFormatter, detailTotalFormatter: deprecatedDetailTotalFormatter, detailTotalLabel, chartAriaRoleDescription, xAxisAriaRoleDescription, yAxisAriaRoleDescription, detailPopoverDismissAriaLabel, } = {}, fitHeight, hasFilters, minHeight, xTickFormatter = deprecatedXTickFormatter, yTickFormatter = deprecatedYTickFormatter, detailTotalFormatter = deprecatedDetailTotalFormatter, isRTL, }) {
const [inlineStartLabelsWidth, setInlineStartLabelsWidth] = useState(0);
const [containerWidth, containerWidthRef] = useContainerWidth(DEFAULT_CHART_WIDTH);
const maxInlineStartLabelsWidth = Math.round(containerWidth / 2);
const blockEndLabelsProps = useBLockEndLabels({
ticks: model.computed.xTicks,
scale: model.computed.xScale,
tickFormatter: xTickFormatter,
});
// Calculate the width of the plot area and tell it to the parent.
const plotWidth = Math.max(0, containerWidth - inlineStartLabelsWidth - INLINE_START_LABELS_MARGIN);
useEffect(() => {
autoWidth(plotWidth);
}, [autoWidth, plotWidth]);
const highlightDetails = useHighlightDetails({
model,
xTickFormatter,
yTickFormatter,
detailTotalFormatter,
detailTotalLabel,
});
const highlightedPointRef = useRef(null);
const mergedRef = useMergeRefs(containerWidthRef, model.refs.container);
const isPointHighlighted = model.interactions.get().highlightedPoint !== null;
const highlightedX = useSelector(model.interactions, state => state.highlightedX);
const detailPopoverFooterContent = useMemo(() => (detailPopoverFooter && highlightedX ? detailPopoverFooter(highlightedX[0].x) : null), [detailPopoverFooter, highlightedX]);
return (React.createElement(CartesianChartContainer, { ref: mergedRef, minHeight: minHeight + blockEndLabelsProps.height, fitHeight: !!fitHeight, hasFilters: hasFilters, leftAxisLabel: React.createElement(AxisLabel, { axis: "y", position: "left", title: yTitle }), leftAxisLabelMeasure: React.createElement(LabelsMeasure, { scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, autoWidth: setInlineStartLabelsWidth, maxLabelsWidth: maxInlineStartLabelsWidth }), bottomAxisLabel: React.createElement(AxisLabel, { axis: "x", position: "bottom", title: xTitle }), chartPlot: React.createElement(ChartPlot, { ref: model.refs.plot, width: "100%", height: fitHeight ? `calc(100% - ${blockEndLabelsProps.height}px)` : model.height, offsetBottom: blockEndLabelsProps.height, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: chartAriaRoleDescription, activeElementKey: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned) && (highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel), activeElementRef: isPointHighlighted ? highlightedPointRef : model.refs.verticalMarker, activeElementFocusOffset: isPointHighlighted ? 3 : { x: 8, y: 0 }, isClickable: !(highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.isPopoverPinned), onMouseMove: model.handlers.onSVGMouseMove, onMouseOut: model.handlers.onSVGMouseOut, onClick: model.handlers.onSVGMouseDown, onKeyDown: model.handlers.onSVGKeyDown, onApplicationFocus: model.handlers.onApplicationFocus, onApplicationBlur: model.handlers.onApplicationBlur },
React.createElement("line", { ref: model.refs.plotMeasure, x1: "0", x2: "0", y1: "0", y2: "100%", stroke: "transparent", strokeWidth: 1, style: { pointerEvents: 'none' } }),
React.createElement(InlineStartLabels, { plotWidth: model.width, plotHeight: model.height, scale: model.computed.yScale, ticks: model.computed.yTicks, tickFormatter: yTickFormatter, title: yTitle, ariaRoleDescription: yAxisAriaRoleDescription, maxLabelsWidth: maxInlineStartLabelsWidth }),
React.createElement(AreaDataSeries, { model: model }),
React.createElement(BlockEndLabels, { ...blockEndLabelsProps, width: model.width, height: model.height, scale: model.computed.xScale, title: xTitle, ariaRoleDescription: xAxisAriaRoleDescription, offsetLeft: inlineStartLabelsWidth + BLOCK_END_LABELS_OFFSET, offsetRight: BLOCK_END_LABELS_OFFSET, isRTL: isRTL }),
React.createElement(EmphasizedBaseline, { width: model.width, height: model.height, scale: model.computed.yScale }),
React.createElement(AreaVerticalMarker, { model: model }),
React.createElement(AreaHighlightedPoint, { ref: highlightedPointRef, model: model, ariaLabel: highlightDetails === null || highlightDetails === void 0 ? void 0 : highlightDetails.activeLabel })), popover: React.createElement(AreaChartPopover, { model: model, highlightDetails: highlightDetails, dismissAriaLabel: detailPopoverDismissAriaLabel, size: detailPopoverSize, footer: detailPopoverFooterContent, onBlur: model.handlers.onApplicationBlur }) }));
}
//# sourceMappingURL=chart-container.js.map