@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
118 lines • 5.5 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
import clsx from 'clsx';
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
import { createOneSideRoundedRectPath } from './create-one-side-rounded-rect-path';
import { getKeyValue, matchesX } from './utils';
import styles from './styles.css.js';
export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, stackedBarValues, isRtl, }) {
const isRefresh = useVisualRefresh();
const isStacked = !!stackedBarValues;
const isVertical = axis === 'x';
const xCoordinates = (() => {
var _a;
if (series.type !== 'bar' || !xScale.isCategorical()) {
return [];
}
const yContinuosScale = yScale.d3Scale;
const xPoints = series.data.map(({ x }) => xScale.d3Scale(x) || NaN);
const zeroY = (_a = yScale.d3Scale(0)) !== null && _a !== void 0 ? _a : NaN;
const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;
let barWidth = xScale.d3Scale.bandwidth();
const PADDING = 4;
const MINWIDTH = 4;
if (!isStacked && totalSeriesCount > 1) {
// Regular grouped bars
barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;
barWidth = Math.max(barWidth, MINWIDTH);
}
return xPoints.map((x, i) => {
var _a, _b, _c, _d;
const d = series.data[i];
const key = getKeyValue(d.x);
let barX = x;
let yValue = d.y;
let isRoundedStart = !isStacked;
let isRoundedEnd = !isStacked;
// Stacked bars
if (isStacked) {
const allXValues = (_a = stackedBarValues.get(key)) !== null && _a !== void 0 ? _a : new Map();
yValue = (_b = allXValues.get(seriesIndex)) !== null && _b !== void 0 ? _b : 0;
const allXValuesSorted = Array.from(allXValues.values()).sort((a, b) => a - b);
isRoundedStart = yValue === allXValuesSorted[0];
isRoundedEnd = yValue === allXValuesSorted[allXValuesSorted.length - 1];
}
// Regular grouped bars
else if (totalSeriesCount > 1) {
barX += seriesIndex * (barWidth + PADDING);
}
// Account for negative values growing "down" instead of "up"
yValue = yValue < 0 ? yValue - d.y : yValue;
return {
x: barX,
y: (_c = yContinuosScale(yValue)) !== null && _c !== void 0 ? _c : NaN,
width: barWidth,
height: Math.abs(((_d = yContinuosScale(d.y)) !== null && _d !== void 0 ? _d : NaN) - baseY),
isRoundedStart,
isRoundedEnd,
};
});
})();
const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;
return (React.createElement("g", { "aria-label": series.title, clipPath: `url(#${chartAreaClipPath})`, className: clsx(styles.series, styles['series--bar'], {
[styles['series--highlighted']]: highlighted,
[styles['series--dimmed']]: dimmed,
}) }, xCoordinates.map(({ x, y, width, height, isRoundedStart, isRoundedEnd }, i) => {
if (!isFinite(x) || !isFinite(height)) {
return;
}
// Create margins between stacked series but only when series data is not too small.
const baseHeightOffset = isStacked ? 3 : 0;
const isSmallBar = height < 4;
const heightOffset = isSmallBar ? 0 : baseHeightOffset;
const widthOffset = 2;
const rx = isRefresh ? (isSmallBar ? 2 : 4) : 0;
const placement = isVertical
? {
x: x + widthOffset / 2,
y: y + heightOffset / 2,
width: width - widthOffset,
height: height - heightOffset,
}
: {
x: y - (!isRtl ? height : 0) + heightOffset / 2,
y: x + widthOffset / 2,
width: height - heightOffset,
height: width - widthOffset,
};
const className = clsx(styles.series__rect, {
[styles['series--dimmed']]: highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),
});
const styleProps = { fill: color, className };
let side = 'none';
if (isRoundedStart && isRoundedEnd) {
side = 'all';
}
else if (!isRoundedStart && !isRoundedEnd) {
side = 'none';
}
else if (isVertical) {
side = isRoundedStart ? 'bottom' : 'top';
}
else if (!isRtl) {
side = isRoundedStart ? 'left' : 'right';
}
else {
side = isRoundedStart ? 'right' : 'left';
}
if (side === 'all') {
return React.createElement("rect", { key: i, ...placement, ...styleProps, rx: rx });
}
if (side === 'none') {
return React.createElement("rect", { key: i, ...placement, ...styleProps, rx: 0 });
}
return React.createElement("path", { key: i, d: createOneSideRoundedRectPath(placement, rx, side), ...styleProps });
})));
}
//# sourceMappingURL=bar-series.js.map