reaviz
Version:
Data Visualization using React
16,404 lines • 467 kB
JavaScript
(function() {
"use strict";
try {
if (typeof document != "undefined") {
var elementStyle = document.createElement("style");
elementStyle.appendChild(document.createTextNode("._handle_bk7m7_1 {\n fill: var(--color-handle-fill);\n stroke: var(--color-handle-stroke);\n}\n\n._dragging_bk7m7_6 {\n fill: var(--color-handle-drag-fill);\n}\n\n._dot_bk7m7_10 {\n fill: var(--color-handle-dots);\n}\n\n._line_bk7m7_14 {\n stroke: var(--color-handle-line);\n}\n._slice_1knu8_1 {\n fill: var(--color-primary);\n}\n\n._unsliced_1knu8_5 {\n fill: var(--color-background);\n opacity: 0.5;\n pointer-events: none;\n}\n._container_1u3dt_1 {\n /** Old mappings - to be removed in next major */\n --color-background: rgb(51, 51, 51);\n --color-on-background: #fff;\n\n --color-tooltip: rgba(0, 5, 11, 0.9);\n --color-on-tooltip: #fff;\n\n --color-handle-fill: #2c343a;\n --color-handle-stroke: #67c2e4;\n --color-handle-drag-fill: transparent;\n --color-handle-dots: #67c2e4;\n --color-handle-line: #67c2e4;\n\n /** New mappings */\n --tooltip-background: var(--color-tooltip);\n --tooltip-color: var(--color-on-tooltip);\n --tooltip-border-radius: 5px;\n --tooltip-spacing: 5px;\n\n --chart-background: var(--color-background);\n --chart-color: var(--color-on-background);\n\n --chart-handle-fill: var(--color-handle-fill);\n --chart-handle-stroke: var(--color-handle-stroke);\n --chart-handle-drag-fill: var(--color-handle-drag-fill);\n --chart-handle-dots: var(--color-handle-dots);\n --chart-handle-line: var(--color-handle-line);\n}\n\n ._container_1u3dt_1 ._svg_1u3dt_30:focus {\n outline: none;\n }\n\n ._container_1u3dt_1 ._svg_1u3dt_30:focus-visible {\n outline: auto;\n }\n._container_19vag_1 {\n display: flex;\n overflow: auto;\n}\n\n ._container_19vag_1._horizontal_19vag_5 {\n align-items: center;\n flex-direction: row;\n }\n\n ._container_19vag_1._vertical_19vag_10 {\n flex-direction: column;\n }\n._symbol_f5unn_1 {\n width: 15px;\n height: 3px;\n}\n._entry_1493o_1 {\n display: flex;\n color: var(--color-on-primary);\n padding: 8px;\n will-change: transparency;\n transition: opacity 150ms ease-in;\n}\n\n ._entry_1493o_1._vertical_1493o_8 {\n flex-direction: row;\n align-items: center;\n }\n\n ._entry_1493o_1._vertical_1493o_8:first-child {\n padding-top: 0;\n }\n\n ._entry_1493o_1._vertical_1493o_8:last-child {\n padding-bottom: 0;\n }\n\n ._entry_1493o_1._vertical_1493o_8 ._label_1493o_20 {\n margin-left: 8px;\n }\n\n ._entry_1493o_1._vertical_1493o_8 svg {\n display: block;\n margin: 0 auto;\n }\n\n ._entry_1493o_1._horizontal_1493o_30 {\n align-items: center;\n flex-direction: row;\n }\n\n ._entry_1493o_1._horizontal_1493o_30:first-child {\n padding-left: 0;\n }\n\n ._entry_1493o_1._horizontal_1493o_30:last-child {\n padding-right: 0;\n }\n\n ._entry_1493o_1._horizontal_1493o_30 ._label_1493o_20 {\n margin-left: 8px;\n }\n\n ._entry_1493o_1 ._label_1493o_20 {\n font-size: 12px;\n }\n\n ._entry_1493o_1 svg {\n width: 15px;\n height: 15px;\n }\n._container_1gnp9_1 {\n display: flex;\n height: 100%;\n}\n\n ._container_1gnp9_1._vertical_1gnp9_5 {\n flex-direction: column;\n max-width: 55px;\n }\n\n ._container_1gnp9_1._vertical_1gnp9_5 ._start_1gnp9_9,\n ._container_1gnp9_1._vertical_1gnp9_5 ._end_1gnp9_10 {\n text-align: center;\n padding: 5px 0;\n width: 100%;\n }\n\n ._container_1gnp9_1._vertical_1gnp9_5 ._gradient_1gnp9_16 {\n width: 25px;\n margin: 0 auto;\n }\n\n ._container_1gnp9_1._horizontal_1gnp9_22 {\n flex-direction: row-reverse;\n }\n\n ._container_1gnp9_1._horizontal_1gnp9_22 ._start_1gnp9_9,\n ._container_1gnp9_1._horizontal_1gnp9_22 ._end_1gnp9_10 {\n max-width: 20%;\n }\n\n ._container_1gnp9_1._horizontal_1gnp9_22 ._start_1gnp9_9 {\n text-align: right;\n padding-left: 5px;\n }\n\n ._container_1gnp9_1._horizontal_1gnp9_22 ._end_1gnp9_10 {\n text-align: left;\n padding-right: 5px;\n }\n\n ._container_1gnp9_1 ._gradient_1gnp9_16 {\n flex: 1;\n width: 100%;\n border-radius: 2px;\n }\n\n ._container_1gnp9_1 ._start_1gnp9_9,\n ._container_1gnp9_1 ._end_1gnp9_10 {\n color: var(--color-on-primary);\n font-size: 12px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n._gridLine_5yx3q_1 {\n shape-rendering: crispEdges;\n pointer-events: none;\n}\n._gridStripe_xcrvl_1 {\n pointer-events: none;\n}\n._markLine_1sfls_1 {\n pointer-events: none;\n stroke-dasharray: 4, 4;\n stroke-linecap: round;\n}\n._label_uiu20_1 {\n font-size: 16px;\n margin-bottom: 3px;\n color: var(--color-on-tooltip);\n}\n\n._value_uiu20_7 {\n font-size: 13px;\n color: var(--color-on-tooltip);\n opacity: 0.7;\n}\n\n._subValue_uiu20_13 {\n display: block;\n text-align: left;\n padding: 3px 5px;\n}\n\n._subValue_uiu20_13 ._subValueColor_uiu20_18 {\n width: 5px;\n height: 15px;\n margin-right: 8px;\n display: inline-block;\n }\n\n._subValue_uiu20_13 ._subValueName_uiu20_25 {\n margin-right: 5px;\n }\n._base_b22et_1 {\n white-space: nowrap;\n text-align: center;\n will-change: transform, opacity;\n background-color: var(--tooltip-background);\n color: var(--tooltip-color);\n padding: var(--tooltip-spacing);\n border-radius: var(--tooltip-border-radius);\n}\n\n ._base_b22et_1 ._disablePointer_b22et_10 {\n cursor: not-allowed;\n }\n._inactive_jp2yc_1 {\n opacity: 0.2;\n}\n\n._hidden_jp2yc_5 {\n opacity: 0;\n}\n._scatterPlot_gc5eo_1 {\n overflow: visible;\n}\n._point_u68jv_1 {\n stroke: rgba(255, 255, 255, 0.5);\n stroke-width: 1px;\n}\n._areaChart_yyojn_1 {\n overflow: visible;\n}\n._barChart_sfjii_1 {\n overflow: visible;\n}\n\n ._barChart_sfjii_1._stackedNormalized_sfjii_4 .bar, ._barChart_sfjii_1._stacked_sfjii_4 .bar, ._barChart_sfjii_1._marimekko_sfjii_6 .bar {\n stroke: var(--color-background);\n stroke-width: 0.2;\n }\n._marker_agib4_1 {\n fill: var(--color-primary);\n cursor: pointer;\n}\n._label_qd893_1 {\n font-size: 12px;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n pointer-events: none;\n}\n._link_1oi50_1 {\n fill: none;\n transition: stroke-opacity 100ms ease-in-out, stroke 100ms ease-in-out;\n mix-blend-mode: initial;\n}\n\n._tooltip_1oi50_7 {\n text-align: center;\n pointer-events: none;\n}\n\n._tooltip_1oi50_7 ._tooltipLabel_1oi50_11 {\n font-size: 16px;\n margin-bottom: 3px;\n color: rgba(255, 255, 255, 1);\n text-align: center;\n }\n\n._tooltip_1oi50_7 ._tooltipValue_1oi50_18 {\n font-size: 13px;\n color: rgba(255, 255, 255, 0.7);\n text-align: center;\n }\n._node_oqk6h_1 {\n transition: opacity 100ms ease-in-out, fill-opacity 100ms ease-in-out;\n}\n\n._tooltip_oqk6h_5 {\n text-align: center;\n padding: 0 8px;\n pointer-events: none;\n}\n\n._tooltip_oqk6h_5 ._tooltipLabel_oqk6h_10 {\n font-size: 16px;\n margin-bottom: 3px;\n color: rgba(255, 255, 255, 1);\n text-align: center;\n }\n\n._tooltip_oqk6h_5 ._tooltipValue_oqk6h_17 {\n font-size: 13px;\n color: rgba(255, 255, 255, 0.7);\n text-align: center;\n }\n._inactive_kwc4n_1 {\n opacity: 0.4;\n transition: opacity 200ms ease-in-out;\n}\n\n._hidden_kwc4n_6 {\n opacity: 0;\n}\n._valueLabel_1eyd5_1 {\n font-size: 14px;\n font-weight: 400;\n fill: var(--color-on-background);\n opacity: 0.6;\n}\n._valueLabel_1h164_1 {\n font-size: 18px;\n font-weight: 400;\n fill: var(--color-on-background);\n}\n._stackedValueLabel_1w6zx_1 {\n font-size: 18px;\n font-weight: 400;\n fill: var(--color-on-background);\n}\n._stackedDescriptionLabel_1h95t_1 {\n font-size: 12px;\n font-weight: 400;\n fill: var(--color-on-background);\n}\n._cell_r3f8c_1 {\n transition: stroke 150ms ease-in-out;\n}\n._item_18e6r_1 {\n margin-bottom: 5px;\n align-items: center;\n display: grid;\n grid-column-gap: 5px;\n grid-row-gap: 3px;\n}\n\n ._item_18e6r_1._labelStart_18e6r_8._valueEnd_18e6r_9 {\n grid-template-columns: 2fr 2fr 1fr;\n grid-template-areas: 'label bar value-label';\n }\n\n ._item_18e6r_1._labelBottom_18e6r_15._valueEnd_18e6r_9 {\n grid-template-columns: 1fr 50px;\n grid-template-areas:\n 'bar value-label'\n 'label label';\n }\n\n ._item_18e6r_1._labelNone_18e6r_24 ._label_18e6r_8 {\n display: none;\n }\n\n ._item_18e6r_1._labelNone_18e6r_24._valueEnd_18e6r_9 {\n grid-template-columns: 1fr 50px;\n grid-template-areas: 'bar value-label';\n }\n\n ._item_18e6r_1._labelEnd_18e6r_35._valueStart_18e6r_36 {\n grid-template-columns: 50px 1fr 1fr;\n grid-template-areas: 'value-label bar label';\n }\n\n ._item_18e6r_1._labelTop_18e6r_42._valueStart_18e6r_36 {\n grid-template-columns: 50px 1fr;\n grid-template-areas:\n 'label label'\n 'value-label bar';\n }\n\n ._item_18e6r_1._labelTop_18e6r_42._valueEnd_18e6r_9 {\n grid-template-columns: 1fr 50px;\n grid-template-areas:\n 'label label'\n 'bar value-label';\n }\n\n ._item_18e6r_1._labelTop_18e6r_42._valueBottom_18e6r_57 {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'label'\n 'bar'\n 'value-label';\n }\n\n ._item_18e6r_1._labelTop_18e6r_42._valueNone_18e6r_65 {\n grid-template-columns: 1fr;\n grid-template-areas:\n 'label'\n 'bar';\n }\n\n ._item_18e6r_1._labelTop_18e6r_42._valueNone_18e6r_65 ._valueLabel_18e6r_71 {\n display: none;\n }\n\n ._item_18e6r_1._clickable_18e6r_77 {\n cursor: pointer;\n }\n\n ._item_18e6r_1 ._label_18e6r_8,\n ._item_18e6r_1 ._valueLabel_18e6r_71 {\n cursor: inherit;\n }\n\n ._item_18e6r_1 ._label_18e6r_8 {\n grid-area: label;\n }\n\n ._item_18e6r_1 ._valueLabel_18e6r_71 {\n grid-area: value-label;\n line-height: 10px;\n text-overflow: ellipsis;\n overflow-x: hidden;\n }\n\n ._item_18e6r_1 ._outerBar_18e6r_97 {\n grid-area: bar;\n width: 100%;\n height: 10px;\n display: flex;\n align-items: center;\n }\n\n ._item_18e6r_1 ._bar_18e6r_105 {\n height: 5px;\n }\n._container_13giw_1 {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n ._container_13giw_1 > div {\n flex: 1;\n }\n._wordLabel_uwka2_1 {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n._clickable_uwka2_5 {\n cursor: pointer;\n}"));
document.head.appendChild(elementStyle);
}
} catch (e) {
console.error("vite-plugin-css-injected-by-js", e);
}
})();
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("reablocks"), require("react"), require("human-format"), require("d3-array"), require("d3-shape"), require("transformation-matrix"), require("classnames"), require("ellipsize"), require("d3-scale"), require("big-integer"), require("chroma-js"), require("@floating-ui/dom"), require("react-fast-compare"), require("motion/react"), require("d3-interpolate"), require("safe-identifier"), require("d3-geo"), require("d3-sankey"), require("@upsetjs/venn.js"), require("invert-color"), require("d3-hierarchy"), require("d3-cloud")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "reablocks", "react", "human-format", "d3-array", "d3-shape", "transformation-matrix", "classnames", "ellipsize", "d3-scale", "big-integer", "chroma-js", "@floating-ui/dom", "react-fast-compare", "motion/react", "d3-interpolate", "safe-identifier", "d3-geo", "d3-sankey", "@upsetjs/venn.js", "invert-color", "d3-hierarchy", "d3-cloud"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.reaviz = {}, global.jsxRuntime, global.reablocks, global.react, global.humanFormat, global.d3Array, global.d3Shape, global.transformationMatrix, global.classNames, global.ellipsize, global.d3Scale, global.bigInt, global.chroma, global.dom, global.isEqual, global.react$1, global.d3Interpolate, global.safeIdentifier, global.d3Geo, global.d3Sankey, global.venn_js, global.invert, global.d3Hierarchy, global.cloud));
})(this, function(exports2, jsxRuntime, reablocks, react, humanFormat, d3Array, d3Shape, transformationMatrix, classNames, ellipsize, d3Scale, bigInt, chroma, dom, isEqual, react$1, d3Interpolate, safeIdentifier, d3Geo, d3Sankey, venn_js, invert, d3Hierarchy, cloud) {
"use strict";
const humanFormatScale = new humanFormat.Scale({
k: 1e3,
M: 1e6,
B: 1e9
});
const humanFormatMillionScale = new humanFormat.Scale({
M: 1,
B: 1e3,
T: 1e6
});
const ONE_MILLION = 1e6;
const ONE_BILLION = 1e9;
const humanFormatBigInteger = (bigInteger) => {
if (bigInteger.greater(ONE_BILLION)) {
return humanFormat(bigInteger.divide(ONE_MILLION).toJSNumber(), {
scale: humanFormatMillionScale
});
}
return humanFormat(bigInteger.toJSNumber(), { scale: humanFormatScale });
};
const bigIntegerToLocaleString = (bigInteger) => {
let i = 0;
let formattedString = "";
for (const c of bigInteger.toString().split("").reverse()) {
if (i > 0 && i % 3 === 0) {
formattedString = "," + formattedString;
}
formattedString = c + formattedString;
i++;
}
return formattedString;
};
function parseMargins(margins) {
let top = 0;
let right = 0;
let bottom = 0;
let left = 0;
if (Array.isArray(margins)) {
if (margins.length === 2) {
top = margins[0];
bottom = margins[0];
left = margins[1];
right = margins[1];
} else if (margins.length === 4) {
top = margins[0];
right = margins[1];
bottom = margins[2];
left = margins[3];
}
} else if (margins !== void 0) {
top = margins;
right = margins;
bottom = margins;
left = margins;
}
return {
top,
right,
bottom,
left
};
}
function calculateMarginOffsets(height, width, margins) {
const { left, right, bottom, top } = margins;
const newHeight = height - top - bottom;
const newWidth = width - left - right;
return {
height: newHeight,
width: newWidth
};
}
function getDimension({
xOffset,
yOffset,
height,
width,
margins
}) {
const parsedMargins = parseMargins(margins);
const marginDims = calculateMarginOffsets(height, width, parsedMargins);
const chartWidth = marginDims.width - xOffset;
const chartHeight = marginDims.height - yOffset;
return {
xOffset,
yOffset,
height,
width,
chartWidth,
chartHeight,
xMargin: xOffset + parsedMargins.left,
yMargin: parsedMargins.top
};
}
function extent(data, attr) {
const accessor = (val, fn) => {
if (Array.isArray(val.data)) {
return fn(val.data, (vv) => vv[attr]);
}
return val[attr];
};
const minVal = d3Array.min(data, (d) => accessor(d, d3Array.min));
const maxVal = d3Array.max(data, (d) => accessor(d, d3Array.max));
return [minVal, maxVal];
}
function getYDomain({
data,
scaled = false,
isDiverging = false
}) {
const [startY, endY] = extent(data, "y");
const [startY1, endY1] = extent(data, "y1");
if (startY < 0 || isDiverging) {
const posStart = -startY;
const maxNum = Math.max(posStart, endY);
return [-maxNum, maxNum];
}
if (scaled) {
return [startY1, endY1];
}
return [0, endY1];
}
function getXDomain({
data,
scaled = false,
isDiverging = false
}) {
const startX0 = extent(data, "x0")[0];
const endX1 = extent(data, "x1")[1];
if (typeof startX0 === "number" && typeof endX1 === "number") {
if (startX0 < 0 || isDiverging) {
const posStart = -startX0;
const maxNum = Math.max(posStart, endX1);
return [-maxNum, maxNum];
}
if (!scaled) {
return [0, endX1];
}
}
return [startX0, endX1];
}
const getNavigatorLanguage = () => {
if (typeof window === "undefined") {
return "en";
}
if (navigator.languages && navigator.languages.length) {
return navigator.languages[0];
}
if (navigator.userLanguage || navigator.language || navigator.browserLanguage) {
return "en";
}
};
const locale = getNavigatorLanguage();
const options = {
year: "numeric",
month: "numeric",
day: "numeric",
hour12: true,
formatMatcher: "best fit"
};
function formatValue(value2) {
if (value2 !== void 0) {
if (value2 instanceof Date) {
return value2.toLocaleDateString(locale, options);
} else if (typeof value2 === "number") {
return value2.toLocaleString();
}
return value2;
}
return "No value";
}
function getAriaLabel(datapoint) {
const isArray = Array.isArray(datapoint);
if (isArray) {
return datapoint == null ? void 0 : datapoint.map((row) => getAriaLabel(row)).join(", ");
} else {
const key = (datapoint == null ? void 0 : datapoint.key) || (datapoint == null ? void 0 : datapoint.x);
const value2 = (datapoint == null ? void 0 : datapoint.data) || (datapoint == null ? void 0 : datapoint.y);
return `${key}: ${formatValue(value2)}`;
}
}
function interpolate(type) {
if (type === "smooth") {
return d3Shape.curveMonotoneX;
} else if (type === "step") {
return d3Shape.curveStep;
} else {
return d3Shape.curveLinear;
}
}
const scaleBandInvert = (scale, round = false) => {
const domain = scale.domain();
const paddingOuter = scale(domain[0]);
const eachBand = scale.step();
const [, end2] = scale.range();
return (offset) => {
let band = Math.min(
(offset - paddingOuter) / eachBand,
domain.length - 0.01
);
if (band < 0 && Math.abs(band) > domain.length - 1) {
band = Math.floor(Math.abs(band)) * -1;
}
let index = round ? Math.round(band) % domain.length : Math.floor(band) % domain.length;
if (end2 === 0) {
index = index * -1;
}
return domain[Math.max(0, Math.min(index, domain.length - 1))];
};
};
const getClosestContinousScalePoint = ({
pos,
scale,
data,
attr = "x",
roundDown = false
}) => {
const domain = scale.invert(pos);
const bisect = d3Array.bisector((d) => {
return attr === "i" ? d[attr] + 1 : d[attr];
}).right;
const index = bisect(data, domain);
const minIndex = Math.max(0, index - 1);
const before = data[minIndex];
if (roundDown) {
return before;
}
const maxIndex = Math.min(data.length - 1, index);
const after = data[maxIndex];
let beforeVal = before[attr];
let afterVal = after[attr];
beforeVal = domain - beforeVal;
afterVal = afterVal - domain;
return beforeVal < afterVal ? before : after;
};
const getClosestBandScalePoint = ({
pos,
scale,
data,
roundClosest = false
}) => {
const domain = scale.domain();
let prop;
if (scale.mariemkoInvert) {
prop = scale.mariemkoInvert(pos);
} else {
prop = scaleBandInvert(scale, roundClosest)(pos);
}
const idx = domain.indexOf(prop);
return data[idx];
};
const getParentSVG = (event) => {
let node2 = event.target.ownerSVGElement;
if (node2) {
while (node2.ownerSVGElement) {
node2 = node2.ownerSVGElement;
}
}
return node2;
};
const getPositionForTarget = ({ target, clientX, clientY }) => {
const rect = target.getBoundingClientRect();
return {
x: clientX - ((rect == null ? void 0 : rect.left) || 0) - target.clientLeft,
y: clientY - ((rect == null ? void 0 : rect.top) || 0) - target.clientTop
};
};
const getPointFromMatrix = (event, matrix) => {
const parent = getParentSVG(event);
if (!parent) {
return null;
}
const { top, left } = parent.getBoundingClientRect();
const x = event.clientX - left;
const y = event.clientY - top;
return transformationMatrix.applyToPoint(transformationMatrix.inverse(matrix), { x, y });
};
const getLimitMatrix = (height, width, matrix) => transformationMatrix.applyToPoints(matrix, [
{ x: 0, y: 0 },
{ x: width, y: height }
]);
const constrainMatrix = (height, width, matrix) => {
const [min, max] = getLimitMatrix(height, width, matrix);
if (max.x < width || max.y < height) {
return true;
}
if (min.x > 0 || min.y > 0) {
return true;
}
return false;
};
const lessThanScaleFactorMin = (value2, scaleFactor) => value2.scaleFactorMin && value2.d * scaleFactor <= value2.scaleFactorMin;
const moreThanScaleFactorMax = (value2, scaleFactor) => value2.scaleFactorMax && value2.d * scaleFactor >= value2.scaleFactorMax;
const isZoomLevelGoingOutOfBounds = (value2, scaleFactor) => {
const a = lessThanScaleFactorMin(value2, scaleFactor) && scaleFactor < 1;
const b = moreThanScaleFactorMax(value2, scaleFactor) && scaleFactor > 1;
return a || b;
};
function toggleTextSelection(allowSelection) {
const style = allowSelection ? "" : "none";
[
"-webkit-touch-callout",
"-webkit-user-select",
"-khtml-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select"
].forEach((prop) => document.body.style[prop] = style);
}
function calculateShowStroke(current, data) {
const i = data.indexOf(current);
let showLine = false;
const prev = data[i - 1];
if (i > 0 && prev.y) {
showLine = true;
}
const cur = data[i];
if (cur.y) {
showLine = true;
}
const next = data[i + 1];
if (i < data.length - 1 && next.y) {
showLine = true;
}
return showLine;
}
const ONE_DAY = 60 * 60 * 24;
const DURATION_TICK_STEPS = [
1e-3,
// 1 ms
5e-3,
// 5 ms
0.01,
// 10 ms
0.05,
// 50 ms
0.1,
// 100 ms
0.5,
// 500 ms
1,
// 1 s
5,
// 5 s
10,
// 10 s
15,
// 15 s
60,
// 1 m
60 * 15,
// 15 m
60 * 30,
// 30 m
60 * 60,
// 1 h
60 * 60 * 2,
// 2 h
60 * 60 * 4,
// 4 h
60 * 60 * 6,
// 6 h
60 * 60 * 8,
// 8 h
60 * 60 * 12,
// 12 h
ONE_DAY
// 24 h
];
function reduceTicks(ticks, maxTicks) {
if (ticks.length > maxTicks) {
const reduced = [];
const modulus = Math.floor(ticks.length / maxTicks);
for (let i = 0; i < ticks.length; i++) {
if (i % modulus === 0) {
reduced.push(ticks[i]);
}
}
ticks = reduced;
}
return ticks;
}
function getMaxTicks(size, dimension) {
const tickWidth = Math.max(size, 0);
return Math.floor(dimension / tickWidth);
}
function getDurationTicks(domain, maxTicks) {
const domainWidth = domain[1] - domain[0];
let tickStep = null;
for (const s of DURATION_TICK_STEPS) {
if (domainWidth / s < maxTicks) {
tickStep = s;
break;
}
}
if (tickStep === null) {
const numDayTicks = domainWidth / ONE_DAY;
const dayStep = Math.ceil(numDayTicks / maxTicks);
tickStep = ONE_DAY * dayStep;
}
const ticks = [domain[0]];
while (ticks[ticks.length - 1] + tickStep <= domain[1]) {
ticks.push(ticks[ticks.length - 1] + tickStep);
}
return ticks;
}
function getTicks(scale, tickValues, type, maxTicks = 100, interval) {
let result;
if (tickValues) {
result = tickValues;
} else {
if (scale.ticks) {
if (type === "duration") {
result = getDurationTicks(scale.domain(), maxTicks);
} else if (interval) {
result = scale.ticks(interval);
} else {
if (type === "time") {
result = scale.ticks();
result = reduceTicks(result, maxTicks);
} else {
result = scale.ticks(maxTicks);
}
}
} else {
tickValues = scale.domain();
result = reduceTicks(tickValues, maxTicks);
}
}
return result;
}
const getDegrees = (radians) => radians / Math.PI * 180 - 90;
const roundDecimals = (value2, decimals = 5) => parseFloat(value2.toFixed(decimals));
const functionProps = (prop, val, data) => {
if (typeof val === "function") {
return val(data);
} else if (prop === "className") {
return classNames(val);
} else if (val !== void 0 || val !== null) {
return val;
}
return {};
};
const constructFunctionProps = (props, data) => ({
className: functionProps("className", props.className, data),
style: functionProps("style", props.style, data)
});
function uniqueBy(data, ...accessors) {
const result = [];
const ittr = (arr, depth) => {
for (const a of arr) {
const acc = accessors[depth];
if (acc === void 0) {
throw new Error(`Accessor not found for depth: ${depth}`);
}
const val = acc(a);
if (Array.isArray(val)) {
ittr(val, depth + 1);
} else if (!result.includes(val)) {
result.push(val);
}
}
};
ittr(data, 0);
return result;
}
const cache = {};
const calculateDimensions = (text, fontFamily, fontSize) => {
const key = `${text}_${fontFamily}_${fontSize}`;
if (cache[key]) {
return cache[key];
}
if (typeof window === "undefined" || typeof document === "undefined") {
const height = parseInt(typeof fontSize === "string" ? fontSize : fontSize.toString(), 10);
const dimensions2 = {
height,
// 8 is an approximation of the width of a character
width: text.length * 8
};
cache[key] = dimensions2;
return dimensions2;
}
const element = document.createElement("div");
element.style.fontFamily = fontFamily;
element.style.fontSize = typeof fontSize === "string" ? fontSize : `${fontSize}px`;
element.style.position = "absolute";
element.style.left = "-9999px";
element.style.whiteSpace = "nowrap";
element.style.height = "auto";
element.style.fontWeight = "normal";
element.style.lineHeight = "normal";
element.style.width = "auto";
element.style.wordBreak = "normal";
element.textContent = text;
document.body.appendChild(element);
const dimensions = {
height: element.offsetHeight,
width: element.offsetWidth
};
document.body.removeChild(element);
cache[key] = dimensions;
return dimensions;
};
function wrapText({
key,
x = 0,
size,
paddingY,
wrap = true,
paddingX,
width,
height,
fontFamily,
fontSize,
visibility = "auto"
}) {
size = size || calculateDimensions(key, fontFamily, fontSize);
const words = key.toString().split(/\s+/);
if (words.length > 1 && size.width > width) {
let rows = [];
let maxWidth = 0;
let maxHeight = 0;
let curText = "";
let currWidth = 0;
let nextText = "";
let nextWidth = 0;
for (const word of words) {
nextText = curText === "" ? word : `${curText} ${word}`;
nextWidth = calculateDimensions(nextText, fontFamily, fontSize).width;
if (nextWidth <= width - (paddingX ? 2 * paddingX : 0)) {
curText = nextText;
currWidth = nextWidth;
} else {
rows.push(curText);
maxWidth = Math.max(maxWidth, currWidth);
curText = word;
currWidth = calculateDimensions(curText, fontFamily, fontSize).width;
}
}
rows.push(curText);
maxHeight = rows.length * size.height;
if (visibility !== "always") {
if (height && maxHeight >= height - (paddingY ? 2 * paddingY : 0)) {
return null;
}
if (width && maxWidth >= width - (paddingX ? 2 * paddingX : 0)) {
return null;
}
}
if (!wrap && rows.length > 1) {
return rows[0];
}
return rows.map((r, i) => /* @__PURE__ */ jsxRuntime.jsx(
"tspan",
{
dominantBaseline: "alphabetic",
style: { baselineShift: "0%" },
dy: i > 0 ? size.height : height ? size.height / 2 - 5 : -maxHeight / 2 + size.height,
x,
children: r
},
i
));
}
if (visibility !== "always") {
if (height && size.height + paddingY >= height) {
return null;
}
if (width && size.width + paddingX >= width) {
return null;
}
}
return /* @__PURE__ */ jsxRuntime.jsx(
"tspan",
{
dominantBaseline: "alphabetic",
style: { baselineShift: "0%" },
dy: size.height / 2 - 5,
x,
children: key
}
);
}
const useHoverIntent = ({
sensitivity = 7,
interval = 50,
timeout = 10,
disabled,
onPointerOver,
onPointerOut
}) => {
const mouseOver = react.useRef(false);
const timer = react.useRef(null);
const state = react.useRef(0);
const coords = react.useRef({
x: null,
y: null,
px: null,
py: null
});
const onMouseMove = react.useCallback((event) => {
coords.current.x = event.clientX;
coords.current.y = event.clientY;
}, []);
const comparePosition = react.useCallback(
(event) => {
timer.current = clearTimeout(timer.current);
const { px, x, py, y } = coords.current;
if (Math.abs(px - x) + Math.abs(py - y) < sensitivity) {
state.current = 1;
onPointerOver(event);
} else {
coords.current.px = x;
coords.current.py = y;
timer.current = setTimeout(() => comparePosition(event), interval);
}
},
[interval, onPointerOver, sensitivity]
);
const cleanup = react.useCallback(() => {
clearTimeout(timer.current);
document.removeEventListener("mousemove", onMouseMove, false);
}, [onMouseMove]);
const pointerOver = react.useCallback(
(event) => {
if (!disabled) {
mouseOver.current = true;
cleanup();
if (state.current !== 1) {
coords.current.px = event.nativeEvent.x;
coords.current.py = event.nativeEvent.y;
document.addEventListener("mousemove", onMouseMove, false);
timer.current = setTimeout(() => comparePosition(event), timeout);
}
}
},
[cleanup, comparePosition, disabled, onMouseMove, timeout]
);
const delay = react.useCallback(
(event) => {
timer.current = clearTimeout(timer.current);
state.current = 0;
onPointerOut(event);
},
[onPointerOut]
);
const pointerOut = react.useCallback(
(event) => {
mouseOver.current = false;
cleanup();
if (state.current === 1) {
timer.current = setTimeout(() => delay(event), timeout);
}
},
[cleanup, delay, timeout]
);
return {
pointerOver,
pointerOut
};
};
const useResizeObserver = () => {
const ref = react.useRef(null);
const [size, setSize] = react.useState({
width: void 0,
height: void 0
});
react.useEffect(() => {
const element = ref.current;
if (!element) return;
const resizeObserver = new ResizeObserver((entries) => {
if (entries.length === 0) return;
const entry2 = entries[0];
setSize({
width: entry2.contentRect.width,
height: entry2.contentRect.height
});
});
resizeObserver.observe(element);
return () => {
resizeObserver.unobserve(element);
};
}, []);
return [ref, size];
};
const mergeDefaultProps = (defaultProps, props = {}) => {
const filteredProps = Object.fromEntries(
Object.entries(props).filter(([_, value2]) => value2 !== void 0)
);
return { ...defaultProps, ...filteredProps };
};
const LinearAxisLine = (props) => {
const {
strokeColor,
strokeWidth,
strokeGradient,
scale,
orientation,
className
} = mergeDefaultProps(linearAxisLineDefaultProps, props);
const id = reablocks.useId();
const [range0, range1] = scale.range();
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
"line",
{
className,
x1: orientation === "vertical" ? 0 : range0,
x2: orientation === "vertical" ? 1e-5 : range1,
y1: orientation === "vertical" ? range0 : 0,
y2: orientation === "vertical" ? range1 : 1e-5,
strokeWidth,
stroke: strokeGradient ? `url(#axis-gradient-${id})` : strokeColor
}
),
strokeGradient && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: strokeGradient,
id: `axis-gradient-${id}`
}
)
] });
};
const linearAxisLineDefaultProps = {
strokeColor: "#8F979F",
strokeWidth: 1
};
const LinearAxisTickLine = (props) => {
const { size, position, orientation, strokeColor, strokeWidth, className } = {
...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS,
...props
};
const path2 = react.useMemo(() => {
const isVertical = orientation === "vertical";
const tickSize = size || 0;
const start2 = position === "start" ? tickSize * -1 : position === "center" ? tickSize * -0.5 : 0;
const end2 = start2 + tickSize;
return {
x1: isVertical ? end2 : 0,
x2: isVertical ? start2 : 0,
y1: isVertical ? 0 : start2,
y2: isVertical ? 0 : end2
};
}, [orientation, position, size]);
return /* @__PURE__ */ jsxRuntime.jsx(
"line",
{
className,
strokeWidth,
stroke: strokeColor,
...path2
}
);
};
const LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS = {
strokeColor: "#8F979F",
strokeWidth: 1,
size: 5
};
const LinearAxisTickLabel = (props) => {
const {
text,
fullText,
angle,
orientation,
half,
line: line2,
textAnchor,
position,
className,
fill,
fontSize,
fontFamily,
rotation,
padding,
formatTooltip,
align
} = mergeDefaultProps(LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS, props);
function getAlign() {
if ((align === "inside" || align === "outside") && half === "center") {
return "center";
}
if (align === "inside") {
return half === "start" ? "end" : "start";
}
if (align === "outside") {
return half === "start" ? "start" : "end";
}
return align;
}
function getTickLineSpacing() {
if (!line2) {
return [0, 0];
}
const lineProps = { ...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS, ...line2.props };
const size = lineProps.size ?? 3;
const position2 = lineProps.position ?? "center";
if (position2 === "start") {
return [size * -1, 0];
} else if (position2 === "end") {
return [0, size];
} else {
return [size * -0.5, size * 0.5];
}
}
function getOffset() {
const adjustedPadding = typeof padding === "number" ? { fromAxis: padding, alongAxis: padding } : padding;
const spacing = getTickLineSpacing();
const offset1 = position === "start" ? spacing[0] - adjustedPadding.fromAxis : position === "end" ? spacing[1] + adjustedPadding.fromAxis : 0;
const align2 = getAlign();
let offset2 = 0;
offset2 += align2 === "center" ? 0 : align2 === "start" ? -adjustedPadding.alongAxis : adjustedPadding.alongAxis;
const horz = orientation === "horizontal";
return {
[horz ? "x" : "y"]: offset2,
[horz ? "y" : "x"]: offset1
};
}
function getTextPosition() {
let transform = "";
let newtextAnchor = "";
let alignmentBaseline = "middle";
if (angle !== 0) {
transform = `rotate(${angle})`;
newtextAnchor = "end";
} else {
const align2 = getAlign();
if (orientation === "horizontal") {
newtextAnchor = align2 === "center" ? "middle" : align2 === "start" ? "end" : "start";
if (position === "start") {
alignmentBaseline = "baseline";
} else if (position === "end") {
alignmentBaseline = "hanging";
}
} else {
alignmentBaseline = align2 === "center" ? "middle" : align2 === "start" ? "baseline" : "hanging";
if (position === "start") {
newtextAnchor = "end";
} else if (position === "end") {
newtextAnchor = "start";
} else {
newtextAnchor = "middle";
}
}
}
return {
transform,
textAnchor: textAnchor || newtextAnchor,
alignmentBaseline
};
}
const { x, y } = getOffset();
const textPosition = getTextPosition();
const titleHover = typeof formatTooltip === "function" ? formatTooltip(fullText) : fullText;
return /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
transform: `translate(${x}, ${y})`,
fontSize,
fontFamily,
children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: titleHover }),
/* @__PURE__ */ jsxRuntime.jsx("text", { ...textPosition, fill, className, children: text })
]
}
);
};
const LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS = {
fill: "#8F979F",
fontSize: 11,
fontFamily: "sans-serif",
rotation: true,
padding: 5,
align: "center"
};
const LinearAxisTickSeries = (props) => {
const {
scale,
orientation,
height,
width,
label: label2,
tickSize,
tickValues,
interval,
line: line2,
axis
} = mergeDefaultProps(LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS, props);
const labelProps = react.useMemo(
() => ({
...LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS,
...(label2 == null ? void 0 : label2.props) ?? {}
}),
[label2 == null ? void 0 : label2.props]
);
const getAdjustedScale = react.useCallback(() => {
if (scale.bandwidth) {
let offset = scale.bandwidth() / 2;
if (scale.round()) {
offset = Math.round(offset);
}
return (d) => +scale(d) + offset;
} else {
return (d) => +scale(d);
}
}, [scale]);
const getPosition = react.useCallback(
(scaledTick) => {
if (orientation === "horizontal") {
return { x: scaledTick, y: 0 };
} else {
return { x: 0, y: scaledTick };
}
},
[orientation]
);
const getDimension2 = react.useCallback(() => {
return orientation === "vertical" ? height : width;
}, [height, orientation, width]);
const labelFormatFn = react.useMemo(() => {
if (labelProps.format) {
return labelProps.format;
} else if (scale.tickFormat) {
return scale.tickFormat.apply(scale, [5]);
} else {
return (v) => formatValue(v);
}
}, [labelProps.format, scale]);
const ticks = react.useMemo(() => {
const dimension = getDimension2();
const maxTicks = getMaxTicks(tickSize, dimension);
const ticks2 = getTicks(scale, tickValues, axis.type, maxTicks, interval);
const adjustedScale = getAdjustedScale();
const format = labelFormatFn;
const midpoint = dimension / 2;
return ticks2.map((tick) => {
var _a;
const fullText = format(tick);
const scaledTick = adjustedScale(tick);
const position = getPosition(scaledTick);
const text = ellipsize(fullText, 18);
const size = label2 ? calculateDimensions(
text,
labelProps.fontFamily,
(_a = labelProps.fontSize) == null ? void 0 : _a.toString()
) : {};
return {
...position,
...size,
text,
fullText,
half: scaledTick === midpoint ? "center" : scaledTick < midpoint ? "start" : "end"
};
});
}, [
axis.type,
getAdjustedScale,
getDimension2,
getPosition,
interval,
label2,
labelProps,
labelFormatFn,
scale,
tickSize,
tickValues
]);
const angle = react.useMemo(() => {
if (!label2) {
return 0;
}
const dimension = getDimension2();
const maxTicksLength = d3Array.max(ticks, (tick) => tick.width);
let angle2 = 0;
if (labelProps.rotation) {
if (labelProps.rotation === true) {
let baseWidth = maxTicksLength;
const maxBaseWidth = Math.floor(dimension / ticks.length);
while (baseWidth > maxBaseWidth && angle2 > -90) {
angle2 -= 30;
baseWidth = Math.cos(angle2 * (Math.PI / 180)) * maxTicksLength;
}
} else {
angle2 = labelProps.rotation;
}
}
return angle2;
}, [getDimension2, label2, labelProps, ticks]);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: ticks.map((tick, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${tick.x}, ${tick.y})`, children: [
line2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
height,
width,
orientation
}
),
label2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
text: tick.text,
fullText: tick.fullText,
half: tick.half,
angle,
orientation,
line: line2
}
)
] }, i)) });
};
const LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS = {
line: /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLine,
{
...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS,
height: 10,
width: 10,
orientation: "horizontal",
position: "center"
}
),
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLabel,
{
line: /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLine,
{
...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS,
orientation: "horizontal",
position: "center",
height: 5,
width: 5
}
),
text: "",
fullText: "",
angle: 0,
orientation: "horizontal",
half: "start",
position: "center"
}
),
tickSize: 30
};
const LinearAxis = (props) => {
const {
position,
tickSeries,
axisLine,
height,
width,
scale,
orientation,
visibility = "visible",
onDimensionsChange
} = mergeDefaultProps(LINEAR_AXIS_DEFAULT_PROPS, props);
const tickSeriesProps = react.useMemo(
() => mergeDefaultProps(
LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS,
tickSeries == null ? void 0 : tickSeries.props
),
[tickSeries == null ? void 0 : tickSeries.props]
);
const containerRef = react.createRef();
const [dimensions, setDimensions] = react.useState({
height,
width
});
const updateDimensions = react.useCallback(() => {
const shouldOffset = position !== "center";
let height2;
let width2;
if (shouldOffset) {
const dims = containerRef.current.getBoundingClientRect();
width2 = Math.floor(dims.width);
height2 = Math.floor(dims.height);
}
if (orientation === "vertical") {
if (dimensions.width !== width2) {
setDimensions({ ...dimensions, width: width2 });
onDimensionsChange({ width: width2 });
}
} else {
if (dimensions.height !== height2) {
setDimensions({ ...dimensions, height: height2 });
onDimensionsChange({ height: height2 });
}
}
}, [containerRef, dimensions, onDimensionsChange, orientation, position]);
react.useEffect(() => {
updateDimensions();
}, [updateDimensions, height, width, scale]);
function getPosition() {
let translateY2 = 0;
let translateX2 = 0;
if (position === "end" && orientation === "horizontal") {
translateY2 = height;
} else if (position === "center" && orientation === "horizontal") {
translateY2 = height / 2;
} else if (position === "end" && orientation === "vertical") {
translateX2 = width;
} else if (position === "center" && orientation === "vertical") {
translateX2 = width / 2;
}
return { translateX: translateX2, translateY: translateY2 };
}
const { translateX, translateY } = getPosition();
return /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
transform: `translate(${translateX}, ${translateY})`,
ref: containerRef,
visibility,
children: [
axisLine && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axisLine,
height,
width,
scale,
orientation
}
),
(tickSeriesProps.line || tickSeriesProps.label) && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tickSeries,
height,
width,
scale,
orientation,
axis: props
}
)
]
}
);
};
const LINEAR_AXIS_DEFAULT_PROPS = {
scaled: false,
roundDomains: false,
axisLine: /* @__PURE__ */ jsxRuntime.jsx(LinearAxisLine, {}),
onDimensionsChange: () => void 0
};
const LinearXAxisTickLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLabel,
{
...mergeDefaultProps(LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS, props)
}
);
const LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS,
rotation: true,
position: "end",
align: "center"
};
const LinearXAxisTickLine = (props) => /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLine,
{
...mergeDefaultProps(LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS, props)
}
);
const LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS,
position: "end"
};
const LinearXAxisTickSeries = (props) => {
var _a, _b;
const xTickSeriesProps = mergeDefaultProps(
LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS,
props
);
return /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickSeries,
{
...xTickSeriesProps,
line: (xTickSeriesProps == null ? void 0 : xTickSeriesProps.line) ? /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickLine,
{
...mergeDefaultProps(
LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS,
(_a = props == null ? void 0 : props.line) == null ? void 0 : _a.props
)
}
) : null,
label: (xTickSeriesProps == null ? void 0 : xTickSeriesProps.label) ? /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickLabel,
{
...mergeDefaultProps(
LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS,
(_b = props == null ? void 0 : props.label) == null ? void 0 : _b.props
)
}
) : null
}
);
};
const LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS,
tickSize: 75,
line: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickLine, { ...LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS }),
label: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickLabel, { ...LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS })
};
const LinearXAxis = (props) => {
var _a;
const xAxisProps = react.useMemo(
() => mergeDefaultProps(LINEAR_X_AXIS_DEFAULT_PROPS, props),
[props]
);
return /* @__PURE__ */ jsxRuntime.jsx(
LinearAxis,
{
...xAxisProps,
tickSeries: xAxisProps.tickSeries && /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickSeries,
{
...mergeDefaultProps(
LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS,
(_a = xAxisProps == null ? void 0 : xAxisProps.tickSeries) == null ? void 0 : _a.props
)
}
)
}
);
};
const LINEAR_X_AXIS_DEFAULT_PROPS = {
...LINEAR_AXIS_DEFAULT_PROPS,
position: "end",
roundDomains: false,
scaled: false,
type: "value",
orientation: "horizontal",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, {})
};
const LinearYAxisTickLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLabel,
{
...mergeDefaultProps(LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS, props)
}
);
const LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS,
rotation: false,
position: "start",
align: "center"
};
const LinearYAxisTickLine = (props) => /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickLine,
{
...mergeDefaultProps(LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS, props)
}
);
const LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS,
position: "start"
};
const LinearYAxisTickSeries = (props) => {
var _a, _b;
const yTickSeriesProps = mergeDefaultProps(
LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS,
props
);
return /* @__PURE__ */ jsxRuntime.jsx(
LinearAxisTickSeries,
{
...yTickSeriesProps,
line: (yTickSeriesProps == null ? void 0 : yTickSeriesProps.line) ? /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLine,
{
...mergeDefaultProps(
LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS,
(_a = props == null ? void 0 : props.line) == null ? void 0 : _a.props
)
}
) : null,
label: (yTickSeriesProps == null ? void 0 : yTickSeriesProps.label) ? /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLabel,
{
...mergeDefaultProps(
LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS,
(_b = props == null ? void 0 : props.label) == null ? void 0 : _b.props
)
}
) : null
}
);
};
const LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS = {
...LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS,
tickSize: 30,
line: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickLine, { ...LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS }),
label: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickLabel, { ...LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS })
};
const LinearYAxis = (props) => {
var _a;
const yAxisProps = react.useMemo(
() => mergeDefaultProps(LINEAR_Y_AXIS_DEFAULT_PROPS, props),
[props]
);
return /* @__PURE__ */ jsxRuntime.jsx(
LinearAxis,
{
...yAxisProps,
tickSeries: yAxisProps.tickSeries && /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
...mergeDefaultProps(
LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS,
(_a = yAxisProps == null ? void 0 : yAxisProps.tickSeries) == null ? void 0 : _a.props
)
}
)
}
);
};
const LINEAR_Y_AXIS_DEFAULT_PROPS = {
...LINEAR_AXIS_DEFAULT_PROPS,
orientation: "vertical",
scaled: false,
roundDomains: false,
type: "value",
position: "start",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickSeries, {})
};
const isAxisVisible = (axis) => !!axis.tickSeries.props.label || !!axis.tickSeries.props.line;
const RadialAxisTickLine = (props) => {
const { stroke, size, position, innerRadius, outerRadius } = {
...RADIAL_AXIS_TICK_LINE_DEFAULT_PROPS,
...props
};
const x1 = position === "outside" ? size : -(outerRadius - innerRadius);
return /* @__PURE__ */ jsxRuntime.jsx("line", { x1, x2: 0, stroke, style: { pointerEvents: "none" } });
};
const RADIAL_AXIS_TICK_LINE_DEFAULT_PROPS = {
stroke: "rgba(113, 128, 141, .5)",
size: 10,
position: "inside"
};
const rad2deg = (angle) => angle * 180 / Math.PI;
const RadialAxisTickLabel = ({
point: point2,
autoRotate = true,
rotation,
padding = 15,
data,
fill = "#71808d",
fontFamily = "sans-serif",
fontSize = 11,
format,
lineSize,
index,
formatTooltip,
...rest
}) => {
const { transform, textAnchor } = react.useMemo(() => {
let textAnchor2;
let transform2;
if (autoRotate) {
if (rotation >= 85 && rotation <= 95 || rotation <= -85 && rotation >= -95 || rotation >= 265 && rotation <= 275 || rotation <= -265 && rotation >= -275) {
textAnchor2 = "middle";
} else if (rotation < -85 && rotation > -265 || rotation > 95 && rotation < 265) {
textAnchor2 = "end";
} else {
textAnchor2 = "start";
}
transform2 = `rotate(${90 - rad2deg(point2)}, ${padding}, 0)`;
} else {
const shouldRotate = rotation && (rotation > 100 || rotation < -100);
const rotate = shouldRotate ? 180 : 0;
const translate = shouldRotate ? -30 : 0;
textAnchor2 = shouldRotate ? "end" : "start";
transform2 = `rotate(${rotate}) translate(${translate})`;
}
return {
transform: transform2,
textAnchor: textAnchor2
};
}, [autoRotate, padding, point2, rotation]);
const text = format ? format(data, index) : formatValue(data);
const titleHover = typeof formatTooltip === "function" ? formatTooltip(data, index) : text;
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform, children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: titleHover }),
/* @__PURE__ */ jsxRuntime.jsx(
"text",
{
dy: "0.35em",
x: lineSize + 5,
textAnchor,
fill,
fontFamily,
fontSize,
...rest,
children: text
}
)
] });
};
const RadialAxisTick = ({
line: line2 = /* @__PURE__ */ jsxRuntime.jsx(RadialAxisTickLine, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(RadialAxisTickLabel, {}),
scale,
outerRadius = 0,
data,
index,
padding = 0,
innerRadius
}) => {
const lineProps = react.useMemo(
() => ({ ...RADIAL_AXIS_TICK_LINE_DEFAULT_PROPS, ...(line2 == null ? void 0 : line2.props) ?? {} }),
[line2 == null ? void 0 : line2.props]
);
const point2 = scale(data);
const rotation = point2 * 180 / Math.PI - 90;
const transform = `rotate(${rotation}) translate(${outerRadius + padding},0)`;
const lineSize = line2 ? lineProps.size : 0;
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform, children: [
line2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
innerRadius,
outerRadius
}
),
label2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
index,
point: point2,
rotation,
lineSize,
data
}
)
] });
};
const RadialAxisTickSeries = ({
scale,
count = 12,
outerRadius,
tick = /* @__PURE__ */ jsxRuntime.jsx(RadialAxisTick, {}),
tickValues,
innerRadius,
interval,
type = "time",
startAngle = 0,
endAngle = 2 * Math.PI
}) => {
const ticks = getTicks(scale, tickValues, type, count, interval || count);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: ticks.map((data, i) => {
const tickElement = typeof tick === "function" ? tick({ index: i }) : tick;
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tickElement,
index: i,
scale,
data,
innerRadius,
outerRadius,
startAngle,
endAngle
},
i
);
}) });
};
const RadialAxisArc = (props) => {
var _a, _b, _c, _d;
const { index, stroke, strokeDasharray, scale, startAngle, endAngle } = {
...RADIAL_AXIS_ARC_DEFAULT_PROPS,
...props
};
const r = scale(index);
const strokeColor = typeof stroke === "string" ? stroke : stroke(index);
const strokeDash = typeof strokeDasharray === "string" ? strokeDasharray : strokeDasharray(index);
const isFullCircle = Math.abs(endAngle - startAngle) >= 2 * Math.PI;
const x = d3Shape.arc()({
innerRadius: r,
outerRadius: r,
startAngle,
endAngle
});
const REGEX = /(-?\d+\.?\d*,-?\d+\.?\d*A-?\d+\.?\d*,-?\d+\.?\d*)/gm;
const matches = x.match(REGEX);
const start2 = (_b = (_a = matches == null ? void 0 : matches[0]) == null ? void 0 : _a.split("A", 2)) == null ? void 0 : _b[0];
const end2 = (_d = (_c = matches == null ? void 0 : matches[1]) == null ? void 0 : _c.split("A", 2)) == null ? void 0 : _d[0];
const d = x + ` M ${start2} L 0,0 M ${end2} L 0,0`;
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: isFullCircle ? /* @__PURE__ */ jsxRuntime.jsx(
"circle",
{
fill: "none",
strokeDasharray: strokeDash,
stroke: strokeColor,
style: { pointerEvents: "none" },
cx: "0",
cy: "0",
r
}
) : /* @__PURE__ */ jsxRuntime.jsx(
"path",
{
d,
fill: "none",
strokeDasharray: strokeDash,
stroke: strokeColor,
style: { pointerEvents: "none" }
}
) });
};
const RADIAL_AXIS_ARC_DEFAULT_PROPS = {
stroke: "#71808d",
strokeDasharray: "1,4",
startAngle: 0,
endAngle: 2 * Math.PI
};
const getPointsForLevels = ({ count, outerRadius, ticks, arcs }) => {
const levels = [];
const polyangle = Math.PI * 2 / ticks;
for (const level of arcs) {
const hyp = level / count * outerRadius;
const points = [];
for (let vertex = 0; vertex < ticks; vertex++) {
const theta = vertex * polyangle;
points.push({
x: hyp * Math.sin(Math.PI - theta),
y: hyp * Math.cos(Math.PI - theta)
});
}
levels.push([...points, points[0]]);
}
return levels;
};
const RadialAxisArcSeries = (props) => {
const {
count,
innerRadius,
outerRadius,
line: line2,
arc,
tickValues,
startAngle,
endAngle
} = mergeDefaultProps(RADIAL_AXIS_ARC_SERIES_DEFAULT_PROPS, props);
const scale = d3Scale.scaleLinear().domain([0, count]).range([innerRadius, outerRadius]);
const arcs = scale.ticks(count);
const points = getPointsForLevels({
count,
outerRadius,
ticks: tickValues.length,
arcs
});
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
line2 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: points.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
data: d,
index: i
},
i
)) }),
arc && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: arcs.map((d) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arc,
index: d,
scale,
startAngle,
endAngle
},
d
)) })
] });
};
const RADIAL_AXIS_ARC_SERIES_DEFAULT_PROPS = {
count: 12,
arc: /* @__PURE__ */ jsxRuntime.jsx(RadialAxisArc, {}),
startAngle: 0,
endAngle: 2 * Math.PI
};
const RadialAxisArcLine = (props) => {
const { data, stroke, index } = {
...RADIAL_AXIS_ARC_LINE_DEFAULT_PROPS,
...props
};
const lineGenerator = d3Shape.line().x((d2) => d2.x).y((d2) => d2.y);
const d = lineGenerator(data);
const strokeColor = typeof stroke === "string" ? stroke : stroke(index);
return /* @__PURE__ */ jsxRuntime.jsx(
"path",
{
d,
stroke: strokeColor,
fill: "none",
style: { pointerEvents: "none" }
}
);
};
const RADIAL_AXIS_ARC_LINE_DEFAULT_PROPS = {
stroke: "#71808d"
};
const RadialAxis = (props) => {
const {
arcs,
ticks,
xScale,
height,
width,
innerRadius,
type,
startAngle,
endAngle
} = mergeDefaultProps(RADIAL_AXIS_DEFAULT_PROPS, props);
const outerRadius = Math.min(height, width) / 2;
const tickValues = getTicks(
xScale,
ticks.props.tickValues,
type,
ticks.props.count,
ticks.props.interval || ticks.props.count
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
arcs && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arcs,
outerRadius,
innerRadius,
tickValues,
startAngle,
endAngle
}
),
ticks && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: ticks,
scale: xScale,
type,
innerRadius,
outerRadius,
startAngle,
endAngle
}
)
] });
};
const RADIAL_AXIS_DEFAULT_PROPS = {
innerRadius: 10,
type: "value",
arcs: /* @__PURE__ */ jsxRuntime.jsx(RadialAxisArcSeries, {}),
ticks: /* @__PURE__ */ jsxRuntime.jsx(RadialAxisTickSeries, {}),
startAngle: 0,
endAngle: 2 * Math.PI
};
const Move = ({
cursor,
disabled = false,
preventRightClick = true,
disableText = true,
threshold = 0,
onMoveStart = () => void 0,
onMove = () => void 0,
onMoveCancel = () => void 0,
onMoveEnd = () => void 0,
children
}) => {
let started = false;
let deltaX = 0;
let deltaY = 0;
let prevXPosition = 0;
let prevYPosition = 0;
const rqf = react.useRef();
react.useEffect(() => {
return () => {
cancelAnimationFrame(rqf.current);
disposeHandlers();
};
}, []);
const disposeHandlers = () => {
window.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("mouseup", onMouseUp);
window.removeEventListener("touchmove", onTouchMove);
window.removeEventListener("touchend", onTouchEnd);
setCursor(false);
disableTextSelection(true);
};
const disableTextSelection = (shouldDisable) => {
if (disableText) {
toggleTextSelection(shouldDisable);
}
};
const setCursor = (set) => {
if (cursor) {
document.body.style.cursor = set ? cursor : "inherit";
}
};
const checkThreshold = () => {
return !started && (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold);
};
const getTouchCoords = (event) => {
const { clientX, clientY } = event.touches[0];
return {
clientX,
clientY
};
};
const onMouseDown = (event) => {
const shouldCancel = event.nativeEvent.which === 3 && preventRightClick;
if (shouldCancel || disabled) {
return;
}
event.preventDefault();
event.stopPropagation();
started = false;
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("mouseup", onMouseUp);
};
const onMouseMove = (event) => {
event.preventDefault();
event.stopPropagation();
const { movementX, movementY } = event;
let localDeltaX = deltaX + movementX;
let localDeltaY = deltaY + movementY;
if (checkThreshold()) {
disableTextSelection(true);
setCursor(true);
localDeltaX = 0;
localDeltaY = 0;
started = true;
onMoveStart({
nativeEvent: event,
type: "mouse"
});
} else {
rqf.current = requestAnimationFrame(() => {
onMove({
nativeEvent: event,
type: "mouse",
x: localDeltaX,
y: localDeltaY
});
});
}
deltaX = localDeltaX;
deltaY = localDeltaY;
};
const onMouseUp = (event) => {
event.preventDefault();
event.stopPropagation();
disposeHandlers();
if (started) {
onMoveEnd({
nativeEvent: event,
type: "mouse"
});
} else {
onMoveCancel({
nativeEvent: event,
type: "mouse"
});
}
};
const onTouchStart = (event) => {
if (disabled || event.touches.length !== 1) {
return;
}
event.preventDefault();
event.stopPropagation();
started = false;
prevXPosition = event.touches[0].clientX;
prevYPosition = event.touches[0].clientY;
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("touchend", onTouchEnd);
};
const onTouchMove = (event) => {
event.preventDefault();
event.stopPropagation();
const { clientX, clientY } = getTouchCoords(event);
let localDeltaX = clientX - prevXPosition;
let localDeltaY = clientY - prevYPosition;
localDeltaX = localDeltaX + localDeltaX;
localDeltaY = localDeltaY + localDeltaY;
if (checkThreshold()) {
disableTextSelection(true);
setCursor(true);
localDeltaX = 0;
localDeltaY = 0;
started = true;
onMoveStart({
nativeEvent: { ...event, clientX, clientY },
type: "touch"
});
} else {
rqf.current = requestAnimationFrame(() => {
onMove({
// TODO: Come back and clean this up...
nativeEvent: {
...event,
clientX,
clientY
},
type: "touch",
x: localDeltaX,
y: localDeltaY
});
});
}
prevXPosition = clientX;
prevYPosition = clientY;
};
const onTouchEnd = (event) => {
event.preventDefault();
event.stopPropagation();
disposeHandlers();
if (started) {
onMoveEnd({
nativeEvent: event,
type: "touch"
});
} else {
onMoveCancel({
nativeEvent: event,
type: "touch"
});
}
};
return react.Children.map(
children,
(child) => react.cloneElement(child, {
...child.props,
onMouseDown: (e) => {
onMouseDown(e);
if (child.props.onMouseDown) {
child.props.onMouseDown(e);
}
},
onTouchStart: (e) => {
onTouchStart(e);
if (child.props.onTouchStart) {
child.props.onTouchStart(e);
}
}
})
);
};
const handle = "_handle_bk7m7_1";
const dragging = "_dragging_bk7m7_6";
const dot = "_dot_bk7m7_10";
const line = "_line_bk7m7_14";
const css$t = {
handle,
dragging,
dot,
line
};
const BrushHandle = (props) => {
const { height, onHandleDrag } = props;
const [isDragging, setIsDragging] = react.useState(false);
return /* @__PURE__ */ jsxRuntime.jsx(
Move,
{
cursor: "ew-resize",
onMoveStart: () => setIsDragging(true),
onMove: ({ x }) => onHandleDrag(x),
onMoveEnd: () => setIsDragging(false),
children: /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
/* @__PURE__ */ jsxRuntime.jsx("line", { className: css$t.line, y1: "0", y2: height, x1: "5", x2: "5" }),
/* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
className: classNames(css$t.handle, { [css$t.dragging]: isDragging }),
height: height - 10,
style: { cursor: "ew-resize" },
width: 8,
y: "5",
y1: height - 5
}
),
/* @__PURE__ */ jsxRuntime.jsx(
"g",
{
transform: `translate(-1, ${height / 2 - 10})`,
style: { pointerEvents: "none" },
children: d3Array.range(5).map((i) => /* @__PURE__ */ jsxRuntime.jsx("circle", { cy: i * 5, cx: "5", r: ".5", className: css$t.dot }, i))
}
)
] })
}
);
};
const slice = "_slice_1knu8_1";
const unsliced = "_unsliced_1knu8_5";
const css$s = {
slice,
unsliced
};
const BrushSlice = (props) => {
const { height, start: start2, end: end2, width, onBrushChange } = props;
const [isDragging, setIsDragging] = react.useState(false);
const sliceWidth = Math.max(end2 - start2, 0);
const endSliceWidth = Math.max(width - end2, 0);
const hasNoSlice = start2 === 0 && end2 === width;
const onMoveStart = react.useCallback(() => {
const hasNoSlice2 = start2 === 0 && end2 === width;
if (!hasNoSlice2) {
setIsDragging(true);
}
}, [end2, start2, width]);
const onMove = react.useCallback(
({ x }) => {
const startUpdated = start2 + x;
const endUpdated = end2 + x;
if (startUpdated >= 0 && endUpdated <= width) {
onBrushChange({
start: startUpdated,
end: endUpdated
});
}
},
[start2, end2, width, onBrushChange]
);
const onHandleDrag = react.useCallback(
(direction, deltaX) => {
const startUpdated = direction === "start" ? start2 + deltaX : start2;
const endUpdated = direction !== "start" ? end2 + deltaX : end2;
onBrushChange({
start: startUpdated,
end: endUpdated
});
},
[end2, onBrushChange, start2]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("rect", { className: css$s.unsliced, height, width: start2 }),
/* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
transform: `translate(${end2}, 0)`,
className: css$s.unsliced,
height,
width: endSliceWidth
}
),
/* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${start2}, 0)`, children: [
/* @__PURE__ */ jsxRuntime.jsx(
Move,
{
cursor: "grabbing",
onMoveStart,
onMove,
onMoveEnd: () => setIsDragging(false),
children: /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
className: css$s.slice,
height,
width: sliceWidth,
style: {
cursor: isDragging ? "grabbing" : "grab",
opacity: hasNoSlice ? 0 : 0.1,
pointerEvents: !hasNoSlice ? "initial" : "none"
}
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(-4, 0)", children: /* @__PURE__ */ jsxRuntime.jsx(
BrushHandle,
{
height,
onHandleDrag: (deltaX) => onHandleDrag("start", deltaX)
}
) }),
/* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${sliceWidth - 5}, 0)`, children: /* @__PURE__ */ jsxRuntime.jsx(
BrushHandle,
{
height,
onHandleDrag: (deltaX) => onHandleDrag("end", deltaX)
}
) })
] })
] });
};
const Brush = (props) => {
const {
children,
disabled,
height,
width,
start: startProp,
end: endProp,
onBrushChange
} = props;
const [isSlicing, setIsSlicing] = react.useState(false);
const [initial, setInitial] = react.useState();
const [range, setRange] = react.useState({
start: props.start || 0,
end: props.end || props.width
});
const { start: start2, end: end2 } = range;
const ref = react.useRef();
const ensurePositionInBounds = react.useCallback(
(newStart, newEnd) => {
let startUpdated = newStart;
let endUpdated = newEnd;
if (startUpdated === void 0 || startUpdated <= 0) {
startUpdated = 0;
}
if (end2 === void 0) {
endUpdated = width;
}
if (startUpdated > endUpdated) {
startUpdated = start2;
}
if (endUpdated < startUpdated) {
endUpdated = end2;
}
if (endUpdated >= width) {
endUpdated = width;
}
return { start: startUpdated, end: endUpdated };
},
[end2, start2, width]
);
const getPositionsForPanEvent = react.useCallback((event) => {
const eventObj = {
target: ref.current,
clientX: event.clientX,
clientY: event.clientY
};
return getPositionForTarget(eventObj);
}, []);
const getStartEnd = react.useCallback(
(event) => {
const { x } = getPositionsForPanEvent(event);
if (x < initial) {
return ensurePositionInBounds(x, initial);
} else {
return ensurePositionInBounds(initial, x);
}
},
[ensurePositionInBounds, getPositionsForPanEvent, initial]
);
const onMoveStart = react.useCallback(
(event) => {
if (!disabled) {
const positions = getPositionsForPanEvent(event.nativeEvent);
setIsSlicing(true);
setInitial(positions.x);
}
},
[disabled, getPositionsForPanEvent]
);
const onMove = react.useCallback(
(event) => {
if (!disabled) {
const { start: start22, end: end22 } = getStartEnd(event.nativeEvent);
if (onBrushChange) {
onBrushChange({
start: start22,
end: end22
});
}
setRange({ start: start22, end: end22 });
}
},
[disabled, getStartEnd, onBrushChange]
);
const onMoveEnd = react.useCallback(() => {
setIsSlicing(false);
}, []);
const onMoveCancel = react.useCallback(() => {
const val = {
start: 0,
end: width
};
setRange(val);
if (onBrushChange) {
onBrushChange(val);
}
}, [onBrushChange, width]);
const onSliceChange = react.useCallback(
(event) => {
const val = ensurePositionInBounds(event.start, event.end);
setRange((state) => ({ ...state, ...val }));
if (onBrushChange) {
onBrushChange(val);
}
},
[ensurePositionInBounds, onBrushChange]
);
react.useEffect(() => {
if (end2 === width) {
setRange((prev) => ({
...prev,
end: width
}));
}
}, [end2, width]);
react.useEffect(() => {
if (!isSlicing) {
const startUpdated = startProp !== start2;
const endUpdated = endProp !== end2;
if (startUpdated || endUpdated) {
setRange(ensurePositionInBounds(start2, end2));
}
}
}, [end2, endProp, ensurePositionInBounds, isSlicing, start2, startProp]);
return /* @__PURE__ */ jsxRuntime.jsx(
Move,
{
cursor: "crosshair",
onMoveStart,
onMove,
onMoveEnd,
onMoveCancel,
children: /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
style: {
pointerEvents: isSlicing ? "none" : "auto",
cursor: disabled ? "" : "crosshair"
},
children: [
children,
!disabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("rect", { ref, height, width, opacity: 0 }),
start2 !== void 0 && end2 !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
BrushSlice,
{
start: start2,
end: end2,
height,
width,
onBrushChange: onSliceChange
}
)
] })
]
}
)
}
);
};
const ChartBrush = (props) => {
const { disabled, domain, scale, onBrushChange, width, children } = props;
const getBrushOffset = react.useCallback(() => {
let start2;
let end2;
if (!disabled && domain) {
start2 = scale(domain[0]);
end2 = scale(domain[1]);
}
return { start: start2, end: end2 };
}, [disabled, domain, scale]);
const onBrushChangeHandler = react.useCallback(
(event) => {
if (onBrushChange) {
let domain2;
if (event.start !== void 0 && event.end !== void 0 && (event.start !== 0 || event.end !== width)) {
if (scale.invert) {
const start2 = scale.invert(event.start);
const end2 = scale.invert(event.end);
domain2 = [start2, end2];
} else {
const band = scale.step();
const start2 = Math.ceil((event.start - band / 2) / band);
const end2 = Math.ceil((event.end - band / 2) / band);
domain2 = [scale.domain()[start2], scale.domain()[end2]];
}
}
onBrushChange({
domain: domain2
});
}
},
[onBrushChange, scale, width]
);
return /* @__PURE__ */ jsxRuntime.jsx(
Brush,
{
...props,
...getBrushOffset(),
onBrushChange: onBrushChangeHandler,
children
}
);
};
const ChartContext = react.createContext({});
const { Provider: ChartProvider, Consumer: ChartConsumer } = ChartContext;
const useChart = () => {
const context = react.useContext(ChartContext);
if (context === void 0) {
throw new Error("`useChart` hook must be used within a `ChartProvider`");
}
return context;
};
const container$3 = "_container_1u3dt_1";
const svg = "_svg_1u3dt_30";
const css$r = {
container: container$3,
svg
};
const ChartContainer = ({
className,
children,
center,
centerX,
centerY,
style,
margins,
containerClassName,
xAxisVisible,
yAxisVisible,
id,
...rest
}) => {
const curId = reablocks.useId(id);
const [xAxisSized, setXAxisSized] = react.useState(false);
const [yAxisSized, setYAxisSized] = react.useState(false);
const [xOffset, setXOffset] = react.useState(0);
const [yOffset, setYOffset] = react.useState(0);
const [ref, { width, height }] = useResizeObserver();
const chartSized = react.useMemo(() => {
if (!height || !width) {
return false;
}
if (xAxisVisible && !xAxisSized) {
return false;
}
if (yAxisVisible && !yAxisSized) {
return false;
}
return true;
}, [height, width, xAxisSized, xAxisVisible, yAxisVisible, yAxisSized]);
const onUpdateAxes = react.useCallback(
(orientation, event) => {
if (orientation === "horizontal") {
setXAxisSized(true);
} else {
setYAxisSized(true);
}
if (event.height) {
setYOffset(event.height);
}
if (event.width) {
setXOffset(event.width);
}
},
[]
);
const childProps = react.useMemo(
() => ({
chartSized,
id: curId,
updateAxes: onUpdateAxes,
yAxisSized,
xAxisSized,
...getDimension({
margins,
height,
width,
yOffset,
xOffset
})
}),
[
chartSized,
curId,
onUpdateAxes,
yAxisSized,
xAxisSized,
margins,
height,
width,
yOffset,
xOffset
]
);
const translateX = center || centerX ? width / 2 : childProps.xMargin;
const translateY = center || centerY ? height / 2 : childProps.yMargin;
const styleHeight = rest.height !== void 0 && rest.height !== null ? rest.height : "100%";
const styleWidth = rest.width !== void 0 && rest.width !== null ? rest.width : "100%";
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref,
style: { height: styleHeight, width: styleWidth },
className: classNames(containerClassName, css$r.container),
...rest,
children: /* @__PURE__ */ jsxRuntime.jsx(ChartProvider, { value: childProps, children: height > 0 && width > 0 && /* @__PURE__ */ jsxRuntime.jsx(
"svg",
{
width,
height,
className: classNames(css$r.svg, className),
style,
tabIndex: 0,
children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${translateX}, ${translateY})`, children: children(childProps) })
}
) })
}
);
};
function normalizeValue(value2, maxBigInt) {
if (bigInt.isInstance(value2)) {
if (maxBigInt.greater(1e6)) {
const divideBy = maxBigInt.divide(1e6);
return value2.divide(divideBy).toJSNumber();
} else {
return value2.toJSNumber();
}
} else {
return value2;
}
}
function normalizeValueForFormatting(value2) {
if (bigInt.isInstance(value2)) {
return bigIntegerToLocaleString(value2);
}
return value2;
}
function getMaxBigIntegerForNested(series) {
let maxBigInteger = bigInt.one;
for (const group of series) {
const maxBigIntegerForGroup = getMaxBigIntegerForShallow(group.data);
if (maxBigIntegerForGroup.greater(maxBigInteger)) {
maxBigInteger = maxBigIntegerForGroup;
}
}
return maxBigInteger;
}
function getMaxBigIntegerForShallow(series) {
let maxBigInteger = bigInt.one;
for (const point2 of series) {
if (bigInt.isInstance(point2.data)) {
const bigInteger = point2.data;
if (bigInteger.greater(maxBigInteger)) {
maxBigInteger = bigInteger;
}
}
}
return maxBigInteger;
}
function buildNestedChartData(series, sort = false, direction = "vertical") {
let result = [];
const maxBigInteger = getMaxBigIntegerForNested(series);
const isVertical = direction === "vertical";
for (const point2 of series) {
for (const nestedPoint of point2.data) {
const key = normalizeValueForFormatting(point2.key);
let idx = result.findIndex((r) => {
const left = r.key;
if (left instanceof Date && key instanceof Date) {
return left.getTime() === key.getTime();
}
return left === key;
});
if (idx === -1) {
result.push({
key,
metadata: point2.metadata,
data: []
});
idx = result.length - 1;
}
const x = normalizeValue(
isVertical ? nestedPoint.key : nestedPoint.data,
maxBigInteger
);
const y = normalizeValue(
isVertical ? nestedPoint.data : nestedPoint.key,
maxBigInteger
);
result[idx].data.push({
key,
value: normalizeValueForFormatting(nestedPoint.data),
metadata: nestedPoint.metadata,
id: point2.id,
x,
x0: isVertical ? x : 0,
x1: x,
y,
y0: isVertical ? 0 : y,
y1: y
});
}
}
if (sort) {
result = result.sort((a, b) => {
const aMax = d3Array.median(a.data, (d) => d.y);
const bMax = d3Array.median(b.data, (d) => d.y);
return aMax < bMax ? 1 : -1;
});
}
return result;
}
function addToChartType(a, b) {
if (bigInt.isInstance(a) && bigInt.isInstance(b)) {
return a.add(b);
} else if (a instanceof Date && typeof b === "number") {
return new Date(a.valueOf() + b);
} else if (typeof a === "number" && typeof b === "number") {
return a + b;
} else {
throw new Error("Invalid types to addToChartTypes");
}
}
function buildShallowChartData(series, direction = "vertical", binSize = void 0) {
const result = [];
const maxBigInteger = getMaxBigIntegerForShallow(series);
const isVertical = direction === "vertical";
for (const point2 of series) {
const isTuple = Array.isArray(point2.data);
let k1 = point2.key;
if (binSize) {
k1 = addToChartType(point2.key, binSize);
}
const props = {
k0: normalizeValue(point2.key, maxBigInteger),
k1: normalizeValue(k1, maxBigInteger),
v0: normalizeValue(isTuple ? point2.data[0] : 0, maxBigInteger),
v1: normalizeValue(isTuple ? point2.data[1] : point2.data, maxBigInteger)
};
const xProp = isVertical ? "k" : "v";
const yProp = isVertical ? "v" : "k";
result.push({
key: normalizeValueForFormatting(props.k0),
value: normalizeValueForFormatting(props.v1),
metadata: point2.metadata,
id: point2.id,
x: props[`${xProp}1`],
x0: props[`${xProp}0`],
x1: props[`${xProp}1`],
y: props[`${yProp}1`],
y0: props[`${yProp}0`],
y1: props[`${yProp}1`]
});
}
return result;
}
function buildBins(xScale, thresholds, data) {
const layout = d3Array.histogram().value((d) => d.x).domain(xScale.domain()).thresholds(xScale.ticks(thresholds));
const bins = layout(data);
return bins.map((bin) => ({
x0: bin.x0,
x1: bin.x1,
y: bin.length,
y0: 0,
y1: bin.length
}));
}
function transformDataToStack$1(data) {
const result = [];
const maxBigInteger = getMaxBigIntegerForNested(data);
for (const category of data) {
for (const value2 of category.data) {
let idx = result.findIndex((r) => {
if (r.x instanceof Date && category.key instanceof Date) {
return r.x.getTime() === category.key.getTime();
}
return r.x === category.key;
});
if (idx === -1) {
result.push({
metadata: category.metadata,
x: category.key,
formattedValues: {}
});
idx = result.length - 1;
}
result[idx].metadata = value2.metadata;
result[idx][value2.key] = normalizeValue(
value2.data,
maxBigInteger
);
result[idx].formattedValues[value2.key] = normalizeValueForFormatting(value2.data);
}
}
return result;
}
function transformStackToData$1(stackData, direction = "vertical") {
const result = [];
const isVertical = direction === "vertical";
for (const category of stackData) {
for (const point2 of category) {
const key = point2.data.x;
let idx = result.findIndex((r) => {
if (r.key instanceof Date && key instanceof Date) {
return r.key.getTime() === key.getTime();
}
return r.key === key;
});
if (idx === -1) {
result.push({
key,
data: []
});
idx = result.length - 1;
}
const categoryKey = category.key;
const y = point2.data[categoryKey];
const [y0, y1] = point2;
result[idx].data.push({
metadata: point2.data.metadata,
key,
x: isVertical ? categoryKey : y1,
x0: isVertical ? categoryKey : y0,
x1: isVertical ? categoryKey : y1,
y: isVertical ? y : categoryKey,
y0: isVertical ? y0 : categoryKey,
y1: isVertical ? y1 : categoryKey,
value: point2.data.formattedValues[categoryKey]
});
}
}
return result;
}
function buildBarStackData(data = [], offset = "default", direction = "vertical") {
const keys = uniqueBy(
data,
(d) => d.data,
(d) => d.key
);
const stackData = transformDataToStack$1(data);
let stackFn = d3Shape.stack();
if (offset === "expand") {
stackFn = stackFn.offset(d3Shape.stackOffsetExpand);
} else if (offset === "diverging") {
stackFn = stackFn.offset(d3Shape.stackOffsetDiverging);
}
const result = stackFn.keys(keys)(stackData);
return transformStackToData$1(result, direction);
}
function buildMarimekkoData(data = []) {
const result = buildBarStackData(data, "expand");
const sums = {};
let totalSum = 0;
for (const series of result) {
const sum = series.data.reduce((acc, cur) => acc + cur.y, 0);
sums[series.key] = sum;
totalSum += sum;
}
let prev = 0;
for (const series of result) {
const x0 = prev;
const x1 = prev + sums[series.key] / totalSum;
prev = x1;
for (const point2 of series.data) {
point2.x0 = x0;
point2.x1 = x1;
}
}
return result;
}
function transformDataToStack(data) {
const result = [];
const maxBigInteger = getMaxBigIntegerForNested(data);
for (const category of data) {
for (const value2 of category.data) {
let idx = result.findIndex((r) => {
if (r.x instanceof Date && value2.key instanceof Date) {
return r.x.getTime() === value2.key.getTime();
}
return r.x === value2.key;
});
if (idx === -1) {
result.push({
x: value2.key,
formattedValues: {}
});
idx = result.length - 1;
}
result[idx][category.key] = normalizeValue(
value2.data,
maxBigInteger
);
result[idx].formattedValues[category.key] = normalizeValueForFormatting(value2.data);
}
}
return result;
}
function transformStackToData(stackData) {
const result = [];
for (const category of stackData) {
const series = [];
for (const point2 of category) {
const [y0, y1] = point2;
const x = point2.data.x;
series.push({
key: category.key,
x,
x0: x,
x1: x,
y: y1 - y0,
y0,
y1,
value: point2.data.formattedValues[category.key]
});
}
result.push({
key: category.key,
data: series
});
}
return result;
}
function buildStackData(data, normalized = false) {
const keys = uniqueBy(data, (d) => d.key);
const stackData = transformDataToStack(data);
const stackFn = !normalized ? d3Shape.stack() : d3Shape.stack().offset(d3Shape.stackOffsetExpand);
const result = stackFn.keys(keys)(stackData);
return transformStackToData(result);
}
const buildWaterfall = (series, direction = "vertical", binSize = void 0) => {
const data = buildShallowChartData(series, direction, binSize);
const isVertical = direction === "vertical";
const v = isVertical ? "y" : "x";
let cumulative = 0;
for (const point2 of data) {
point2[`${v}0`] = cumulative;
cumulative += point2[v];
point2[`${v}1`] = cumulative;
point2[v] = cumulative;
}
return data;
};
const _Pan = class _Pan extends react.Component {
constructor() {
super(...arguments);
this.prevXPosition = 0;
this.prevYPosition = 0;
this.started = false;
this.deltaX = 0;
this.deltaY = 0;
this.childRef = react.createRef();
this.onMouseDown = (event) => {
if (this.props.disabled) {
return;
}
if (event.which === 3) {
return;
}
if (!this.props.globalPanning && event.target && !event.target.classList.contains("pan-container")) {
return;
}
event.preventDefault();
event.stopPropagation();
toggleTextSelection(false);
this.started = false;
window.addEventListener("mousemove", this.onMouseMove);
window.addEventListener("mouseup", this.onMouseUp);
};
this.onMouseMove = (event) => {
event.preventDefault();
event.stopPropagation();
this.deltaX = this.deltaX + event.movementX;
this.deltaY = this.deltaY + event.movementY;
if (this.checkThreshold()) {
if (this.props.cursor) {
document.body.style["cursor"] = this.props.cursor;
}
this.deltaX = 0;
this.deltaY = 0;
this.started = true;
this.onPanStart(event, "mouse");
} else {
this.pan(event.movementX, event.movementY, event, "mouse");
}
};
this.onMouseUp = (event) => {
event.preventDefault();
event.stopPropagation();
this.disposeHandlers();
toggleTextSelection(true);
if (this.started) {
this.onPanEnd(event, "mouse");
} else {
this.props.onPanCancel({
nativeEvent: event,
source: "mouse"
});
}
};
this.onTouchStart = (event) => {
if (this.props.disabled) {
return;
}
if (event.touches.length !== 1) {
return;
}
event.preventDefault();
event.stopPropagation();
toggleTextSelection(false);
this.started = false;
this.prevXPosition = event.touches[0].clientX;
this.prevYPosition = event.touches[0].clientY;
window.addEventListener("touchmove", this.onTouchMove);
window.addEventListener("touchend", this.onTouchEnd);
};
this.onTouchMove = (event) => {
event.preventDefault();
event.stopPropagation();
const x = event.touches[0].clientX;
const y = event.touches[0].clientY;
const deltaX = x - this.prevXPosition;
const deltaY = y - this.prevYPosition;
this.deltaX = this.deltaX + deltaX;
this.deltaY = this.deltaY + deltaY;
if (this.checkThreshold()) {
this.deltaX = 0;
this.deltaY = 0;
this.started = true;
this.onPanStart(event, "touch");
} else {
const contrained = this.pan(deltaX, deltaY, event, "touch");
if (!contrained) {
this.prevXPosition = x;
this.prevYPosition = y;
}
}
};
this.onTouchEnd = (event) => {
event.preventDefault();
event.stopPropagation();
this.disposeHandlers();
toggleTextSelection(true);
if (this.started) {
this.onPanEnd(event, "touch");
} else {
this.props.onPanCancel({
nativeEvent: event,
source: "touch"
});
}
};
}
componentDidMount() {
if (this.childRef.current) {
this.childRef.current.addEventListener("mousedown", this.onMouseDown, {
passive: false
});
this.childRef.current.addEventListener("touchstart", this.onTouchStart, {
passive: false
});
}
}
componentWillUnmount() {
this.disposeHandlers();
if (this.childRef.current) {
this.childRef.current.removeEventListener("mousedown", this.onMouseDown);
this.childRef.current.removeEventListener(
"touchstart",
this.onTouchStart
);
}
}
disposeHandlers() {
window.removeEventListener("mousemove", this.onMouseMove);
window.removeEventListener("mouseup", this.onMouseUp);
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onTouchEnd);
document.body.style["cursor"] = "inherit";
toggleTextSelection(true);
}
checkThreshold() {
const { threshold } = this.props;
return !this.started && (Math.abs(this.deltaX) > threshold || Math.abs(this.deltaY) > threshold);
}
onPanStart(nativeEvent, source) {
this.props.onPanStart({
nativeEvent,
source
});
}
onPanMove(x, y, source, nativeEvent) {
this.props.onPanMove({
source,
nativeEvent,
x,
y
});
}
onPanEnd(nativeEvent, source) {
const { onPanEnd } = this.props;
onPanEnd({
nativeEvent,
source
});
}
pan(x, y, nativeEvent, source) {
const { scale, constrain, width, height, matrix } = this.props;
const newMatrix = transformationMatrix.smoothMatrix(
transformationMatrix.transform(matrix, transformationMatrix.translate(x / scale, y / scale)),
100
);
const shouldConstrain = constrain && constrainMatrix(height, width, newMatrix);
if (!shouldConstrain) {
this.onPanMove(newMatrix.e, newMatrix.f, source, nativeEvent);
}
return shouldConstrain;
}
render() {
return /* @__PURE__ */ jsxRuntime.jsx("g", { ref: this.childRef, children: this.props.children });
}
};
_Pan.defaultProps = {
x: 0,
y: 0,
disabled: false,
scale: 1,
threshold: 10,
globalPanning: true,
onPanStart: () => void 0,
onPanMove: () => void 0,
onPanEnd: () => void 0,
onPanCancel: () => void 0
};
let Pan = _Pan;
const getMidpoint = (pointA, pointB) => ({
x: (pointA.x + pointB.x) / 2,
y: (pointA.y + pointB.y) / 2
});
const getDistanceBetweenPoints = (pointA, pointB) => Math.sqrt(
Math.pow(pointB.y - pointA.y, 2) + Math.pow(pointB.x - pointA.x, 2)
);
function getTouchPoints(event, node2) {
const { left, top } = node2.getBoundingClientRect();
const [pointA, pointB] = [...event.touches].map((touch) => ({
x: touch.clientX - Math.round(left),
y: touch.clientY - Math.round(top)
}));
const distance = getDistanceBetweenPoints(pointA, pointB);
const midpoint = getMidpoint(pointA, pointB);
return {
pointA,
pointB,
distance,
midpoint
};
}
const _Zoom = class _Zoom extends react.Component {
constructor() {
super(...arguments);
this.childRef = react.createRef();
this.onMouseWheel = (event) => {
const { disableMouseWheel, requireZoomModifier, matrix, onZoomEnd } = this.props;
if (disableMouseWheel) {
return false;
}
const hasModifier = event.metaKey || event.ctrlKey;
if (requireZoomModifier && !hasModifier) {
return false;
}
event.preventDefault();
event.stopPropagation();
const point2 = getPointFromMatrix(event, matrix);
if (point2) {
const { x, y } = point2;
const step = this.getStep(event.deltaY);
this.scale(x, y, step, event);
clearTimeout(this.timeout);
this.timeout = setTimeout(() => onZoomEnd(), 500);
}
};
this.onTouchStart = (event) => {
if (event.touches.length === 2) {
event.preventDefault();
event.stopPropagation();
toggleTextSelection(false);
this.firstTouch = getTouchPoints(event, this.childRef.current);
this.lastDistance = this.firstTouch.distance;
window.addEventListener("touchmove", this.onTouchMove);
window.addEventListener("touchend", this.onTouchEnd);
}
};
this.onTouchMove = (event) => {
if (event.touches.length === 2) {
event.preventDefault();
event.stopPropagation();
const { distance } = getTouchPoints(event, this.childRef.current);
const distanceFactor = distance / this.lastDistance;
const point2 = transformationMatrix.applyToPoint(transformationMatrix.inverse(this.props.matrix), {
x: this.firstTouch.midpoint.x,
y: this.firstTouch.midpoint.y
});
if (point2.x && point2.y) {
const outside = this.scale(point2.x, point2.y, distanceFactor, event);
if (!outside) {
this.lastDistance = distance;
}
}
}
};
this.onTouchEnd = (event) => {
event.preventDefault();
event.stopPropagation();
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onTouchEnd);
toggleTextSelection(true);
this.props.onZoomEnd();
};
}
componentDidMount() {
const { disabled, disableMouseWheel } = this.props;
const ref = this.childRef.current;
if (!disabled && ref) {
if (!disableMouseWheel) {
ref.addEventListener("mousewheel", this.onMouseWheel, {
passive: false
});
}
ref.addEventListener("touchstart", this.onTouchStart, { passive: false });
}
}
componentWillUnmount() {
window.removeEventListener("touchmove", this.onTouchMove);
window.removeEventListener("touchend", this.onTouchEnd);
cancelAnimationFrame(this.rqf);
clearTimeout(this.timeout);
const ref = this.childRef.current;
if (ref) {
ref.removeEventListener("mousewheel", this.onMouseWheel);
ref.removeEventListener("touchstart", this.onTouchStart);
}
toggleTextSelection(true);
}
getStep(delta) {
const { scaleFactor } = this.props;
return -delta > 0 ? scaleFactor + 1 : 1 - scaleFactor;
}
scale(x, y, step, nativeEvent) {
const { minZoom, maxZoom, onZoom, matrix } = this.props;
const outside = isZoomLevelGoingOutOfBounds(
{
d: matrix.a,
scaleFactorMin: minZoom,
scaleFactorMax: maxZoom
},
step
);
if (!outside) {
const newMatrix = transformationMatrix.smoothMatrix(
transformationMatrix.transform(
matrix,
transformationMatrix.translate(x, y),
transformationMatrix.scale(step, step),
transformationMatrix.translate(-x, -y)
),
100
);
this.rqf = requestAnimationFrame(() => {
onZoom({
scale: newMatrix.a,
x: newMatrix.e,
y: newMatrix.f,
nativeEvent
});
});
}
return outside;
}
render() {
const { style, children } = this.props;
return /* @__PURE__ */ jsxRuntime.jsx("g", { ref: this.childRef, style, children });
}
};
_Zoom.defaultProps = {
x: 0,
y: 0,
scale: 1,
scaleFactor: 0.1,
minZoom: 1,
maxZoom: 10
};
let Zoom = _Zoom;
const container$2 = "_container_19vag_1";
const horizontal$2 = "_horizontal_19vag_5";
const vertical$2 = "_vertical_19vag_10";
const css$q = {
container: container$2,
horizontal: horizontal$2,
vertical: vertical$2
};
const DiscreteLegend = ({
entries,
orientation = "vertical",
style,
className
}) => /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: classNames(css$q.container, className, {
[css$q.horizontal]: orientation === "horizontal",
[css$q.vertical]: orientation === "vertical"
}),
style,
children: entries.map((entry2, index) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: entry2,
orientation
},
`dle-${index}`
))
}
);
const symbol = "_symbol_f5unn_1";
const css$p = {
symbol
};
const DiscreteLegendSymbol = ({
className,
color
}) => /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: classNames(css$p.symbol, className),
style: { background: color }
}
);
const entry = "_entry_1493o_1";
const vertical$1 = "_vertical_1493o_8";
const label$3 = "_label_1493o_20";
const horizontal$1 = "_horizontal_1493o_30";
const css$o = {
entry,
vertical: vertical$1,
label: label$3,
horizontal: horizontal$1
};
const DiscreteLegendEntry = ({
label: label2,
symbol: symbol2 = /* @__PURE__ */ jsxRuntime.jsx(DiscreteLegendSymbol, {}),
title,
className,
color,
style,
orientation = "horizontal",
onMouseEnter,
onMouseLeave,
onClick
}) => /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
title,
className: classNames(css$o.entry, className, {
[css$o.vertical]: orientation === "vertical",
[css$o.horizontal]: orientation === "horizontal"
}),
onClick,
onMouseEnter,
onMouseLeave,
style,
children: [
/* @__PURE__ */ jsxRuntime.jsx(reablocks.CloneElement, { element: symbol2, color }),
/* @__PURE__ */ jsxRuntime.jsx("span", { className: css$o.label, children: label2 })
]
}
);
const container$1 = "_container_1gnp9_1";
const vertical = "_vertical_1gnp9_5";
const start = "_start_1gnp9_9";
const end = "_end_1gnp9_10";
const gradient = "_gradient_1gnp9_16";
const horizontal = "_horizontal_1gnp9_22";
const css$n = {
container: container$1,
vertical,
start,
end,
gradient,
horizontal
};
const SequentialLegend = ({
className,
gradientClassName,
style,
data,
colorScheme = ["rgba(28, 107, 86, 0.5)", "#2da283"],
orientation = "vertical"
}) => {
const color = chroma.scale(colorScheme).colors(10).reverse().map((c, i) => `${c} ${i * 10}%`).join(",");
const [end2, start2] = react.useMemo(
() => d3Array.extent(
uniqueBy(
data,
(d) => d.data,
(d) => d.data
)
),
[data]
);
const gradientDir = orientation === "vertical" ? "" : "to left,";
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
style,
className: classNames(css$n.container, className, {
[css$n.vertical]: orientation === "vertical",
[css$n.horizontal]: orientation === "horizontal"
}),
children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$n.start, children: formatValue(start2) }),
/* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: classNames(css$n.gradient, gradientClassName),
style: {
background: `linear-gradient(${gradientDir}${color})`
}
}
),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$n.end, children: formatValue(end2) })
]
}
);
};
const gridLine = "_gridLine_5yx3q_1";
const css$m = {
gridLine
};
const Gridline = (props) => {
const {
strokeWidth,
direction,
className,
strokeColor,
data,
height,
width,
scale,
strokeDasharray
} = mergeDefaultProps(GRID_LINE_DEFAULT_PROPS, props);
const coords = react.useMemo(() => {
const pos = scale(data);
if (direction === "x") {
return {
x1: pos,
x2: pos,
y1: 0,
y2: height
};
} else {
return {
y1: pos,
y2: pos,
x1: 0,
x2: width
};
}
}, [direction, data, height, width, scale]);
return /* @__PURE__ */ jsxRuntime.jsx(
"line",
{
...coords,
className: classNames(css$m.gridLine, className),
strokeDasharray,
strokeWidth,
stroke: strokeColor,
fill: "none"
}
);
};
const GRID_LINE_DEFAULT_PROPS = {
strokeWidth: 1,
strokeDasharray: "2 5",
direction: "all",
strokeColor: "rgba(153, 153, 153, 0.5)"
};
const gridStripe = "_gridStripe_xcrvl_1";
const css$l = {
gridStripe
};
const GridStripe = (props) => {
const { fill, className, position, data, height, width, scale, index } = {
...GRID_STRIPE_DEFAULT_PROPS,
...props
};
const coords = react.useMemo(() => {
const pos = scale(data);
const stripeFill = index % 2 ? "none" : fill;
const dim = scale.bandwidth();
if (position === "vertical") {
return {
y: 0,
x: pos,
height,
width: dim,
fill: stripeFill
};
} else {
return {
y: pos,
x: 0,
height: dim,
width,
fill: stripeFill
};
}
}, [scale, data, index, height, width, fill, position]);
return /* @__PURE__ */ jsxRuntime.jsx("rect", { className: classNames(css$l.gridStripe, className), ...coords });
};
const GRID_STRIPE_DEFAULT_PROPS = {
fill: "#393c3e"
};
const GridlineSeries = ({
line: line2 = /* @__PURE__ */ jsxRuntime.jsx(Gridline, { direction: "all" }),
stripe,
yScale,
xScale,
yAxis,
xAxis,
height,
width
}) => {
const lineProps = react.useMemo(
() => ({ ...GRID_LINE_DEFAULT_PROPS, ...line2.props }),
[line2.props]
);
const stripeProps = react.useMemo(
() => ({ ...GRID_STRIPE_DEFAULT_PROPS, ...(stripe == null ? void 0 : stripe.props) ?? {} }),
[stripe == null ? void 0 : stripe.props]
);
const shouldRenderY = (direction) => direction === "all" || direction === "y";
const shouldRenderX = (direction) => direction === "all" || direction === "x";
const { yAxisGrid, xAxisGrid } = react.useMemo(() => {
const xTickSeriesProps = {
...LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS,
...xAxis.tickSeries.props
};
const yTickSeriesProps = {
...LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS,
...yAxis.tickSeries.props
};
return {
yAxisGrid: getTicks(
yScale,
yTickSeriesProps.tickValues,
yAxis.type,
getMaxTicks(yTickSeriesProps.tickSize, height),
yTickSeriesProps.interval
),
xAxisGrid: getTicks(
xScale,
xTickSeriesProps.tickValues,
xAxis.type,
getMaxTicks(xTickSeriesProps.tickSize, width),
xTickSeriesProps.interval
)
};
}, [height, width, xAxis, yAxis, yScale, xScale]);
const renderGroup = react.useCallback(
(element, grid, scale, direction, type) => {
return grid.map((point2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element,
index,
scale,
data: point2,
height,
width,
direction
}
) }, `${type}-${direction}-${index}`));
},
[height, width]
);
const renderSeries = react.useCallback(
(yAxisGrid2, xAxisGrid2, element, direction, type) => {
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
shouldRenderY(direction) && renderGroup(element, yAxisGrid2, yScale, "y", type),
shouldRenderX(direction) && renderGroup(element, xAxisGrid2, xScale, "x", type)
] });
},
[renderGroup, xScale, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsxs("g", { style: { pointerEvents: "none" }, children: [
line2 && renderSeries(yAxisGrid, xAxisGrid, line2, lineProps.direction, "line"),
stripe && renderSeries(
yAxisGrid,
xAxisGrid,
stripe,
stripeProps.direction,
"stripe"
)
] });
};
const markLine = "_markLine_1sfls_1";
const css$k = {
markLine
};
const MarkLine = ({
pointX,
height,
strokeWidth = 1,
strokeColor = "#eee"
}) => /* @__PURE__ */ jsxRuntime.jsx(
"line",
{
stroke: strokeColor,
strokeWidth,
y1: "0",
vectorEffect: "non-scaling-stroke",
y2: height,
x1: pointX,
x2: pointX,
className: css$k.markLine
}
);
const GradientStop = ({
color,
offset,
stopOpacity = 1
}) => /* @__PURE__ */ jsxRuntime.jsx("stop", { offset, stopOpacity, stopColor: color });
const Gradient = ({
id,
color,
direction = "vertical",
stops = [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "0%", stopOpacity: 0.3 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "80%", stopOpacity: 1 }, "stop")
]
}) => {
if (direction === "radial") {
return /* @__PURE__ */ jsxRuntime.jsx("radialGradient", { id, children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: stop,
color: stop.props.color || color
},
`gradient-${index}`
)) });
}
const pos = direction === "vertical" ? {
x1: "10%",
x2: "10%",
y1: "100%",
y2: "0%"
} : {
y1: "0%",
y2: "0%",
x1: "0%",
x2: "100%"
};
return /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { spreadMethod: "pad", id, ...pos, children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: stop,
color: stop.props.color || color
},
`gradient-${index}`
)) });
};
const RadialGradient = ({
id,
color,
radius = "30%",
stops = [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "0%", stopOpacity: 0.2 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "80%", stopOpacity: 0.7 }, "stop")
]
}) => /* @__PURE__ */ jsxRuntime.jsx(
"radialGradient",
{
id,
cx: 0,
cy: 0,
r: radius,
gradientUnits: "userSpaceOnUse",
children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: stop,
color
},
`gradient-${index}`
))
}
);
const Mask = ({ id, fill }) => /* @__PURE__ */ jsxRuntime.jsx("mask", { id, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill }) });
const Stripes = ({ id, fill }) => /* @__PURE__ */ jsxRuntime.jsx(
"pattern",
{
id,
width: "4",
height: "4",
patternUnits: "userSpaceOnUse",
patternTransform: "rotate(45)",
children: /* @__PURE__ */ jsxRuntime.jsx("rect", { className: "area-stripe", width: "1", height: "4", fill })
}
);
const label$2 = "_label_uiu20_1";
const value = "_value_uiu20_7";
const subValue = "_subValue_uiu20_13";
const subValueColor = "_subValueColor_uiu20_18";
const subValueName = "_subValueName_uiu20_25";
const css$j = {
label: label$2,
value,
subValue,
subValueColor,
subValueName
};
const TooltipTemplate = ({
value: value2,
color,
className
}) => {
if (!value2) {
return null;
}
const renderValues = (data, index) => {
const fill = color(data, index);
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: css$j.subValue, children: [
/* @__PURE__ */ jsxRuntime.jsx("span", { className: css$j.subValueColor, style: { backgroundColor: fill } }),
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: css$j.subValueName, children: [
formatValue(data.key || data.x),
":"
] }),
/* @__PURE__ */ jsxRuntime.jsx("span", { children: formatValue(data.value || data.y) })
] });
};
const renderMultiple = (value22) => {
const excessCount = value22.data.length - 15;
const pagedValues = value22.data.slice(0, 15);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
pagedValues.map((point2, i) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderValues(point2, i) }, i)),
excessCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
"...",
excessCount,
" more..."
] })
] });
};
const isMultiple = Array.isArray(value2.data);
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, role: "tooltip", children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$j.label, children: formatValue(value2.x) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: css$j.value, children: [
isMultiple && renderMultiple(value2),
!isMultiple && /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: formatValue(
value2.value || value2.y
) })
] })
] });
};
const base = "_base_b22et_1";
const disablePointer = "_disablePointer_b22et_10";
const css$i = {
base,
disablePointer
};
const tooltipTheme = {
base: css$i.base,
disablePointer: css$i.disablePointer
};
const ChartTooltip = ({
content = /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, {}),
value: value2,
data,
color,
...rest
}) => {
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.Tooltip,
{
theme: tooltipTheme,
...rest,
content: () => {
if (!value2 && !data) {
return null;
}
return typeof content === "function" ? content(data || value2, color) : react.cloneElement(content, {
...content.props,
value: value2,
color
});
}
}
);
};
const TooltipArea = react.forwardRef(
({
children,
inverse = true,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
disabled,
color,
isRadial = false,
isContinous = true,
width,
height,
xScale,
yScale,
onValueEnter = () => void 0,
data,
isHorizontal,
innerRadius,
outerRadius,
placement: placementProp,
onValueLeave = () => void 0,
startAngle = 0,
endAngle = 2 * Math.PI
}, childRef) => {
const [visible, setVisible] = react.useState();
const [placement, setPlacement] = react.useState();
const [value2, setValue] = react.useState();
const [offsetX, setOffsetX] = react.useState();
const [offsetY, setOffsetY] = react.useState();
const [prevX, setPrevX] = react.useState();
const [prevY, setPrevY] = react.useState();
const ref = react.useRef();
const fullCircleref = react.useRef(null);
const isFullCircle = Math.abs(endAngle - startAngle) >= 2 * Math.PI;
const range = Math.abs(endAngle - startAngle);
const rotationFactor = 0.5;
const getXCoord = react.useCallback(
(x, y) => {
if (isRadial) {
const outerRadiusNew = outerRadius || Math.min(width, height) / 2;
let rad = Math.atan2(y - outerRadiusNew, x - outerRadiusNew) + rotationFactor * Math.PI;
rad = (rad - startAngle) % (2 * Math.PI);
if (rad < 0) {
rad += Math.PI * 2;
}
const scale = d3Scale.scaleLinear().domain([0, range]).range([startAngle, endAngle]);
rad = scale(rad);
return rad;
}
return x;
},
[endAngle, height, isRadial, outerRadius, range, startAngle, width]
);
const transformData = react.useCallback(
(series) => {
const result = [];
if (inverse) {
for (const point2 of series) {
const seriesPoint = point2;
if (Array.isArray(seriesPoint.data)) {
for (const nestedPoint of seriesPoint.data) {
const right = nestedPoint.x;
let idx = result.findIndex((r) => {
const left = r.x;
if (left instanceof Date && right instanceof Date) {
return left.getTime() === right.getTime();
}
return left === right;
});
if (idx === -1) {
result.push({
x: nestedPoint.x,
data: []
});
idx = result.length - 1;
}
const data2 = result[idx].data;
if (Array.isArray(data2)) {
data2.push(nestedPoint);
}
}
} else {
result.push(point2);
}
}
} else {
for (const point2 of series) {
const nestedPoint = point2;
if (Array.isArray(nestedPoint.data)) {
result.push({
...nestedPoint,
x: nestedPoint.key,
data: nestedPoint.data.map((d) => ({
...d,
key: !isHorizontal ? d.x : d.y,
value: !isHorizontal ? d.y : d.x
}))
});
} else {
const shallowPoint = point2;
result.push({
...shallowPoint,
// Histograms special logic...
x: shallowPoint.key === void 0 ? shallowPoint.x0 : point2.key,
y: shallowPoint.value === void 0 ? shallowPoint.y : shallowPoint.value
});
}
}
}
return result;
},
[inverse, isHorizontal]
);
const onMouseMove = react.useCallback(
(event) => {
const transformed = transformData(data);
let newPlacement = placementProp;
if (!placementProp) {
if (isHorizontal) {
newPlacement = "right";
} else {
newPlacement = "top";
}
}
let target = fullCircleref.current || ref.current;
const { y, x } = getPositionForTarget({
target,
// Manually pass the x/y from the event
clientX: event.clientX,
clientY: event.clientY
});
let keyScale;
let valueScale;
let coord;
let attr = "x";
if (isHorizontal) {
keyScale = yScale;
valueScale = xScale;
coord = y;
} else {
coord = getXCoord(x, y);
keyScale = xScale;
valueScale = yScale;
}
if (typeof transformed[0].i === "number") {
attr = "i";
}
const newValue = keyScale.invert ? getClosestContinousScalePoint({
pos: coord,
scale: keyScale,
data: transformed,
attr,
roundDown: !isContinous
}) : getClosestBandScalePoint({
pos: coord,
scale: keyScale,
data: transformed,
attr,
roundClosest: isRadial
});
if (!isEqual(newValue, value2) && newValue) {
const pointX = keyScale(newValue.x);
let pointY = valueScale(newValue.y);
let marginX = 0;
let marginY = 0;
if (isNaN(pointY)) {
pointY = height / 2;
marginX = 10;
if (!placement) {
newPlacement = "right";
}
} else {
marginY = -10;
}
if (pointX === prevX && pointY === prevY) {
return;
}
setPrevX(pointX);
setPrevY(pointY);
const target2 = event.target;
const { top, left } = target2.getBoundingClientRect();
let offsetX2 = 0;
let offsetY2 = 0;
if (isRadial) {
const outerRadius2 = Math.min(width, height) / 2;
offsetX2 = pointY * Math.cos(pointX - rotationFactor * Math.PI) + outerRadius2;
offsetY2 = pointY * Math.sin(pointX - rotationFactor * Math.PI) + outerRadius2;
} else {
offsetX2 = pointX;
offsetY2 = pointY;
}
offsetX2 += left + marginX;
offsetY2 += top + marginY;
setPlacement(newPlacement);
setVisible(true);
setValue(newValue);
setOffsetX(offsetX2);
setOffsetY(offsetY2);
onValueEnter({
visible: true,
value: newValue,
pointY,
pointX,
offsetX: offsetX2,
offsetY: offsetY2,
nativeEvent: event
});
}
},
[
data,
getXCoord,
height,
isContinous,
isHorizontal,
isRadial,
onValueEnter,
placement,
placementProp,
prevX,
prevY,
transformData,
value2,
width,
xScale,
yScale
]
);
const onMouseLeave = react.useCallback(() => {
setPrevX(void 0);
setPrevY(void 0);
setValue(void 0);
setVisible(false);
onValueLeave();
}, [onValueLeave]);
react.useImperativeHandle(childRef, () => ({
triggerMouseMove(e) {
onMouseMove(e);
}
}));
const tooltipReference = react.useMemo(
() => ({
width: 4,
height: 4,
top: offsetY,
left: offsetX
}),
[offsetX, offsetY]
);
const renderRadial = react.useCallback(() => {
const innerRadiusNew = innerRadius || 0;
const outerRadiusNew = outerRadius || Math.min(width, height) / 2;
const d = d3Shape.arc()({
innerRadius: innerRadiusNew,
outerRadius: outerRadiusNew,
startAngle: isFullCircle ? 0 : startAngle,
endAngle: isFullCircle ? 2 * Math.PI : endAngle
});
const fullCircle = d3Shape.arc()({
innerRadius: innerRadiusNew,
outerRadius: outerRadiusNew,
startAngle: 0,
endAngle: 2 * Math.PI
});
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("path", { d: fullCircle, opacity: "0", cursor: "auto", ref: fullCircleref }),
/* @__PURE__ */ jsxRuntime.jsx(
"path",
{
d,
opacity: "0",
cursor: "auto",
ref,
onMouseMove
}
)
] });
}, [
endAngle,
height,
innerRadius,
isFullCircle,
onMouseMove,
outerRadius,
startAngle,
width
]);
const renderLinear = react.useCallback(() => {
return /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
height,
ref,
width,
opacity: 0,
cursor: "auto",
onMouseMove
}
);
}, [height, onMouseMove, width]);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
disabled && children,
!disabled && /* @__PURE__ */ jsxRuntime.jsxs("g", { onMouseLeave, ref: childRef, children: [
isRadial && renderRadial(),
!isRadial && renderLinear(),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible,
placement,
modifiers: [dom.offset({ mainAxis: 15 }), dom.flip()],
reference: tooltipReference,
color,
value: value2
}
),
children
] })
] });
}
);
const ZoomPan = ({
height = 0,
width = 0,
children,
disabled,
pannable = true,
maxZoom = 10,
minZoom = 0,
zoomable = true,
scale = 1,
x = 0,
y = 0,
disableMouseWheel,
constrain = true,
zoomStep = 0.1,
onPanCancel = () => void 0,
requireZoomModifier,
globalPanning = true,
onPanStart = () => void 0,
onZoomPan = () => void 0,
onPanMove = () => void 0,
onPanEnd = () => void 0,
onZoom = () => void 0,
onZoomEnd = () => void 0
}) => {
const zoomRef = react.useRef();
const panRef = react.useRef();
const [isZooming, setIsZooming] = react.useState();
const [isPanning, setIsPanning] = react.useState();
const [matrix, setMatrix] = react.useState(transformationMatrix.identity());
react.useEffect(() => {
const newMatrix = transformationMatrix.transform(
transformationMatrix.fromDefinition([
{ type: "translate", tx: x, ty: y },
{ type: "scale", sx: scale, sy: scale }
])
);
if (!isEqual(newMatrix, matrix)) {
setMatrix(newMatrix);
}
}, [x, y, scale, matrix]);
const onPanStartHandler = react.useCallback(
(event) => {
setIsPanning(true);
onPanStart(event);
},
[onPanStart]
);
const onPanMoveHandler = react.useCallback(
(event) => {
onZoomPan({
scale,
x: event.x,
y: event.y,
type: "pan",
nativeEvent: event.nativeEvent
});
onPanMove(event);
},
[onPanMove, onZoomPan, scale]
);
const onPanEndHandler = react.useCallback(
(event) => {
setIsPanning(false);
onPanEnd(event);
},
[onPanEnd]
);
const onZoomHandler = react.useCallback(
(event) => {
onZoomPan({
x: event.x,
y: event.y,
scale: event.scale,
nativeEvent: event.nativeEvent,
type: "zoom"
});
onZoom(event);
},
[onZoom, onZoomPan]
);
const onZoomEndHandler = react.useCallback(() => {
setIsZooming(false);
onZoomEnd();
}, [onZoomEnd]);
const cursor = pannable ? "move" : "auto";
const selection = isZooming || isPanning ? "none" : "auto";
const matrixObj = transformationMatrix.fromObject(matrix);
return /* @__PURE__ */ jsxRuntime.jsx(
Pan,
{
x,
y,
scale,
matrix: matrixObj,
constrain,
height,
width,
disabled: !pannable || disabled,
ref: panRef,
globalPanning,
onPanStart: onPanStartHandler,
onPanMove: onPanMoveHandler,
onPanEnd: onPanEndHandler,
onPanCancel,
children: /* @__PURE__ */ jsxRuntime.jsxs(
Zoom,
{
ref: zoomRef,
disabled: !zoomable || disabled,
scaleFactor: zoomStep,
disableMouseWheel,
maxZoom,
minZoom,
scale,
x,
y,
style: { cursor },
requireZoomModifier,
matrix,
onZoom: onZoomHandler,
onZoomEnd: onZoomEndHandler,
children: [
!disabled && /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
height,
width,
opacity: 0,
className: "pan-container"
}
),
/* @__PURE__ */ jsxRuntime.jsx(
"g",
{
style: {
pointerEvents: selection,
userSelect: selection
},
children
}
)
]
}
)
}
);
};
function getXScale({
type,
roundDomains,
data,
width,
domain,
padding,
scaled,
isMultiSeries = false,
isDiverging = false
}) {
let scale;
if (type === "time" || type === "duration" || type === "value") {
if (type === "time") {
scale = d3Scale.scaleTime().rangeRound([0, width]);
} else {
scale = d3Scale.scaleLinear().rangeRound([0, width]);
}
scale = scale.domain(domain || getXDomain({ data, scaled, isDiverging }));
} else {
if (!domain) {
if (isMultiSeries) {
domain = uniqueBy(data, (d) => d.key);
} else {
domain = uniqueBy(data, (d) => d.x);
}
}
scale = d3Scale.scaleBand().rangeRound([0, width]).padding(padding || 0).domain(domain);
}
return roundDomains ? scale.nice() : scale;
}
function getYScale({
type,
height,
data,
domain,
roundDomains = false,
scaled = false,
padding = 0,
isMultiSeries = false,
isDiverging = false
}) {
let scale;
if (type === "time" || type === "value" || type === "duration") {
scale = d3Scale.scaleLinear().range([height, 0]).domain(domain || getYDomain({ data, scaled, isDiverging }));
} else {
if (!domain) {
if (isMultiSeries) {
domain = uniqueBy(
data,
(d) => d.key
);
} else {
domain = uniqueBy(data, (d) => d.y);
}
}
scale = d3Scale.scaleBand().rangeRound([height, 0]).padding(padding).domain(domain);
}
return roundDomains ? scale.nice() : scale;
}
const getMarimekkoScale = (width, roundDomains) => {
const scale = d3Scale.scaleLinear().rangeRound([0, width]);
return roundDomains ? scale.nice() : scale;
};
const getMarimekkoGroupScale = ({
data,
width,
valueScale,
padding
}) => {
const domain = uniqueBy(data, (d) => d.key);
const barCount = data.length;
const widthMinusPadding = width - padding * (barCount - 1);
const xMultiplier = widthMinusPadding / width;
const getXRange = (series) => {
const [val] = series.data;
const x0 = valueScale(val.x0);
const x1 = valueScale(val.x1);
return { x0, x1 };
};
const scale = (arg) => {
let result = 0;
const index = data.findIndex((d) => d.key === arg);
const series = data[index];
if (series && series.data && series.data.length) {
const { x1, x0 } = getXRange(series);
result = (x1 - x0) / 2 + x0;
if (padding) {
result = result * xMultiplier + index * padding;
}
}
return result;
};
scale.range = () => [0, width];
scale.domain = () => domain;
scale.mariemkoInvert = (offset) => {
let found;
for (let i = 0; i < domain.length; i++) {
const attr = domain[i];
const series = data[i];
const { x1, x0 } = getXRange(series);
if (offset >= x0 - padding / 2 && offset <= x1 - padding / 2) {
found = attr;
break;
}
}
return found;
};
return scale;
};
function getGroupScale({
dimension,
padding,
data,
direction = "vertical"
}) {
const domain = uniqueBy(data, (d) => d.key);
const spacing = domain.length / (dimension / padding + 1);
const range = direction === "vertical" ? [0, dimension] : [dimension, 0];
return d3Scale.scaleBand().rangeRound(range).paddingInner(spacing).paddingOuter(spacing / 2).domain(domain);
}
function getInnerScale({ groupScale, padding, data, prop = "x" }) {
const dimension = groupScale.bandwidth();
const domain = uniqueBy(
data,
(d) => d.data,
(d) => d[prop]
);
const spacing = domain.length / (dimension / padding + 1);
return d3Scale.scaleBand().rangeRound([0, dimension]).paddingInner(spacing).domain(domain);
}
const getRadialYScale = (innerRadius, outerRadius, domain) => {
if (domain[0] === 0 && domain[1] === 0) {
domain = [0, 1];
}
const y = d3Scale.scaleLinear().range([innerRadius * innerRadius, outerRadius * outerRadius]).domain(domain);
const yScale = Object.assign((d) => Math.sqrt(y(d)), y);
return yScale;
};
const ChartZoomPan = ({
data,
height,
children,
disabled,
domain,
width,
axisType,
roundDomains,
onZoomPan = () => void 0,
...rest
}) => {
const onZoomPanHandler = react.useCallback(
(event) => {
const can = event.type === "zoom" || event.type === "pan" && event.scale > 1;
if (can) {
const scale = getXScale({
width,
type: axisType,
roundDomains,
data
});
const newScale = scale.copy().domain(
scale.range().map((x) => (x - event.x) / event.scale).map(scale.clamp(true).invert, event.x)
);
onZoomPan({
domain: newScale.domain(),
isZoomed: event.scale !== 1
});
}
},
[axisType, data, onZoomPan, roundDomains, width]
);
const zoomOffset = react.useMemo(() => {
let zoomOffset2 = {
scale: void 0,
x: void 0
};
if (!disabled && domain) {
const xScale = getXScale({
width,
type: axisType,
roundDomains,
data
});
let offset = xScale(domain[0]);
const endOffset = xScale(domain[1]);
const scale = width / (endOffset - offset);
offset = offset * scale;
zoomOffset2 = {
scale,
x: -offset
};
}
return zoomOffset2;
}, [axisType, data, disabled, domain, roundDomains, width]);
return /* @__PURE__ */ jsxRuntime.jsx(
ZoomPan,
{
...rest,
scale: zoomOffset.scale,
x: zoomOffset.x,
height,
width,
pannable: zoomOffset.scale > 1,
onZoomPan: onZoomPanHandler,
children
}
);
};
const DEFAULT_TRANSITION = {
type: "spring",
velocity: 5,
damping: 20,
// https://github.com/framer/motion/issues/1513#issuecomment-1121133717
restDelta: 0.01,
restSpeed: 0.01
};
const MotionPath = ({ custom, transition, ...rest }) => {
const d = react$1.useMotionValue(custom.exit.d);
const spring = react$1.useSpring(0, DEFAULT_TRANSITION);
react.useEffect(() => {
const interpolator = d3Interpolate.interpolate(d.get(), custom.enter.d);
const prevSpring = spring.get();
spring.set(prevSpring + 1);
return spring.on("change", (v) => d.set(interpolator(v - prevSpring)));
}, [custom.enter.d, custom.exit.d, d, spring]);
const { d: enterD, ...enterRest } = custom.enter;
const { d: exitD, ...exitRest } = custom.exit;
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
...rest,
initial: { opacity: 0, ...exitRest },
exit: { opacity: 0, ...exitRest },
animate: { opacity: 1, ...enterRest },
transition,
d: transition.type !== false ? d : enterD
}
);
};
const schemes = {
unifyviz: [
"#4C86FF",
"#40D3F4",
"#40E5D1",
"#9152EE",
"#A840E8",
"#80CE5B",
"#AADC40",
"#D740BE",
"#EE4094",
"#E84045",
"#F8A340",
"#FFD440"
],
unifyvizwarm: ["#FFD440", "#F8A340", "#E84045"],
unify8Colors: chroma.scale(["#4C86FF", "#26efb5"]).correctLightness().colors(8),
cybertron: chroma.scale(["#2d60e8", "#26efb5"]).correctLightness().colors(8),
...chroma.brewer
};
function isColorSchemeStyleArray(colorScheme) {
return Array.isArray(colorScheme) && typeof colorScheme[0] === "object";
}
const rangeHelper = (point2, attribute) => point2.map((r, i) => {
if (r) {
if (r[attribute] !== void 0) {
return r[attribute];
} else if (r.data && r.data[attribute] !== void 0) {
return r.data[attribute];
}
}
return i;
});
const getColor = (props) => {
let {
point: point2,
colorScheme,
attribute,
index,
data,
active,
isMultiSeries,
domain,
key,
scale
} = {
attribute: "key",
isMultiSeries: false,
scale: d3Scale.scaleOrdinal,
...props
};
if (typeof colorScheme === "string" && schemes[colorScheme]) {
colorScheme = schemes[colorScheme];
}
if (Array.isArray(colorScheme)) {
if (!domain) {
if (isMultiSeries && Array.isArray(data)) {
const maxIdx = d3Array.maxIndex(data, (d) => d.data.length);
const maxVal = data[maxIdx];
data = maxVal.data;
}
domain = rangeHelper(data, attribute);
}
key = key !== void 0 ? key : point2[attribute];
return scale(colorScheme).domain(domain)(key);
} else if (typeof colorScheme === "function") {
return colorScheme(point2, index, active);
} else {
return colorScheme;
}
};
const getValueScale = (data, colorScheme, emptyColor, selections) => {
const valueDomain = d3Array.extent(
uniqueBy(
data,
(d) => d.data,
(d) => d.value
)
);
return (point2) => {
if ((point2 == null ? void 0 : point2.value) === void 0 || (point2 == null ? void 0 : point2.value) === null) {
return emptyColor;
}
return getColor({
scale: d3Scale.scaleQuantile,
domain: valueDomain,
key: point2.value,
colorScheme,
point: point2,
active: selections
});
};
};
const getColorSchemeStyles = (point2, valueScales) => Array.from(valueScales).reduce((acc, [key, valueScale]) => {
return { ...acc, [key]: valueScale(point2) };
}, {});
const getColorSchemeForProperty = (colorScheme, colorSchemeProperty) => colorScheme.map(
(schemeItem) => schemeItem == null ? void 0 : schemeItem[colorSchemeProperty]
);
const createColorSchemeValueScales = (data, colorScheme, emptyColor, selections) => {
const valueScales = /* @__PURE__ */ new Map();
if (isColorSchemeStyleArray(colorScheme)) {
const colorSchemeProperties = [
...new Set(colorScheme.flatMap(Object.keys))
];
colorSchemeProperties.forEach((key) => {
const valueScale = getValueScale(
data,
getColorSchemeForProperty(colorScheme, key),
emptyColor,
selections
);
valueScales.set(key, valueScale);
});
} else {
valueScales.set("fill", getValueScale(data, colorScheme, emptyColor, selections));
}
return valueScales;
};
const COUNT_DEFAULTS = {
from: 0,
duration: 1,
delay: 0,
format: true,
decimalPlaces: 0
};
const useCount = ({
from,
to,
duration,
delay,
prefix,
suffix,
decimalPlaces,
format
}) => {
const nodeRef = react.useRef(null);
from = from || COUNT_DEFAULTS.from;
duration = duration || COUNT_DEFAULTS.duration;
delay = delay || COUNT_DEFAULTS.delay;
format = format || COUNT_DEFAULTS.format;
decimalPlaces = decimalPlaces || COUNT_DEFAULTS.decimalPlaces;
react.useEffect(() => {
const node2 = nodeRef.current;
const controls = react$1.animate(from, to, {
duration,
delay,
onUpdate(value2) {
let formatted = value2;
if (decimalPlaces) {
formatted = Number(value2.toFixed(decimalPlaces));
} else {
formatted = Number(value2.toFixed(0));
}
if (format) {
formatted = formatted.toLocaleString();
}
if (node2) {
if (prefix) {
formatted = `${prefix}${formatted}`;
}
if (suffix) {
formatted = `${formatted}${suffix}`;
}
node2.textContent = formatted;
}
}
});
return () => controls.stop();
}, [from, to, duration, delay, decimalPlaces, format, prefix, suffix]);
return nodeRef;
};
const Count = ({ className, ...rest }) => {
const ref = useCount(rest);
return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className });
};
const LinearValueMarker = ({
color,
value: value2,
className,
thickness = 1,
size,
direction = "horizontal"
}) => {
const coordinates = direction === "horizontal" ? { x1: 0, y1: value2, x2: size, y2: value2 } : { x1: value2, y1: 0, x2: value2, y2: size };
return /* @__PURE__ */ jsxRuntime.jsx(
"line",
{
className,
stroke: color,
strokeWidth: thickness,
...coordinates
}
);
};
const RadialValueMarker = ({
color,
value: value2,
className,
thickness = 1
}) => /* @__PURE__ */ jsxRuntime.jsx(
"circle",
{
className,
cx: 0,
cy: 0,
r: value2,
fill: "none",
stroke: color,
strokeWidth: thickness
}
);
const inactive$1 = "_inactive_jp2yc_1";
const hidden$1 = "_hidden_jp2yc_5";
const css$h = {
inactive: inactive$1,
hidden: hidden$1
};
const generateGlowStyles = ({
glow,
colorSchemeColor
}) => {
if (!glow) return {};
let {
x = 0,
y = 0,
blur = 5,
color = colorSchemeColor || "rgb(255, 255, 255, 0.25)",
opacity = 1
} = glow;
color = chroma(color).alpha(opacity).css();
return blur ? { filter: `drop-shadow(${x}px ${y}px ${blur}px ${color})` } : {};
};
const ScatterPoint = (props) => {
const {
symbol: symbol2,
index,
id,
data,
xScale,
yScale,
active,
tooltip: tooltip2,
cursor,
size,
glow,
color,
animated,
onClick,
onMouseEnter,
onMouseLeave,
visible,
...rest
} = mergeDefaultProps(SCATTER_POINT_DEFAULT_PROPS, props);
const rectRef = react.useRef(null);
const [tooltipVisible, setTooltipVisible] = react.useState(false);
const extras = react.useMemo(
() => constructFunctionProps(rest, data),
[rest, data]
);
const r = react.useMemo(
() => typeof size === "function" ? size(data) : size,
[size, data]
);
const renderedSymbol = react.useMemo(
() => symbol2 ? symbol2(data) : null,
[data, symbol2]
);
const transitionProps = react.useMemo(
() => animated ? {
...DEFAULT_TRANSITION,
delay: index * 5e-3
} : {
type: false,
delay: 0
},
[index, animated]
);
const enterProps = react.useMemo(() => {
let cy = yScale(data.y1);
if (yScale.bandwidth) {
const width = yScale.bandwidth();
cy = cy + width / 2;
}
return {
x: xScale(data.x),
y: cy
};
}, [data, yScale]);
const exitProps = react.useMemo(() => {
const [yStartDomain] = yScale.domain();
return {
y: yScale(yStartDomain),
x: xScale(data.x)
};
}, [data, yScale]);
const fill = react.useMemo(
() => getColor({
colorScheme: color,
index,
point: data
}),
[data, color, index]
);
const key = `symbol-${id}-${safeIdentifier.identifier(`${data.id}`)}`;
const ariaLabelData = react.useMemo(() => getAriaLabel(data), [data]);
const isVisible = visible ? visible == null ? void 0 : visible(data, index) : active;
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
"g",
{
ref: rectRef,
className: classNames({
[css$h.inactive]: !active,
[css$h.hidden]: !isVisible
}),
onMouseEnter: () => {
setTooltipVisible(true);
onMouseEnter(data);
},
onMouseLeave: () => {
setTooltipVisible(false);
onMouseLeave(data);
},
onClick: () => onClick(data),
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: symbol2 ? /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.g,
{
...extras,
initial: {
translateX: exitProps.x,
translateY: exitProps.y,
opacity: 0
},
animate: {
translateX: enterProps.x,
translateY: enterProps.y,
opacity: 1
},
exit: {
translateX: exitProps.x,
translateY: exitProps.y,
opacity: 0
},
transition: transitionProps,
children: renderedSymbol
},
key
) : /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.circle,
{
className: extras.className,
style: {
...extras.style,
...generateGlowStyles({ glow }),
cursor
},
fill,
initial: {
cx: exitProps.x,
cy: exitProps.y,
r,
opacity: 0
},
animate: {
cx: enterProps.x,
cy: enterProps.y,
opacity: 1,
r
},
exit: {
cx: exitProps.x,
cy: exitProps.y,
r,
opacity: 0
},
transition: transitionProps
},
key
)
}
),
tooltip2 && !tooltip2.props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: tooltipVisible,
reference: rectRef,
value: data
}
)
] });
};
const SCATTER_POINT_DEFAULT_PROPS = {
active: true,
tooltip: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
cursor: "pointer",
size: 4,
color: schemes.cybertron[0],
animated: true,
onClick: () => void 0,
onMouseEnter: () => void 0,
onMouseLeave: () => void 0
};
const PADDING$1 = 25;
const ScatterSeries = ({
data,
height,
width,
id,
isZoomed,
activeIds,
point: point2 = /* @__PURE__ */ jsxRuntime.jsx(ScatterPoint, {}),
valueMarkers,
xScale,
yScale,
...rest
}) => {
const renderPoint = react.useCallback(
(pointData, index) => {
let pointId;
if (pointData.id) {
pointId = pointData.id;
}
const key = safeIdentifier.identifier(`${pointId || index}`);
const active = !(activeIds && activeIds.length) || activeIds.includes(pointId);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: point2,
xScale,
yScale,
...rest,
id,
data: pointData,
index,
active
},
key
);
},
[activeIds, point2, xScale, yScale, rest, id]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => {
var _a;
const isVertical = ((_a = marker2 == null ? void 0 : marker2.props) == null ? void 0 : _a.direction) === "vertical";
const size = isVertical ? height : width;
const value2 = isVertical ? xScale(marker2.props.value) : yScale(marker2.props.value);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
size,
value: value2
},
marker2.key
);
}) }),
[height, valueMarkers, width, xScale, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${id}-path`, children: /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
width: isZoomed ? width : width + PADDING$1,
height: height + PADDING$1,
x: isZoomed ? 0 : -12.5,
y: -12.5
}
) }) }),
renderValueMarkers(),
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${id}-path)`, children: data.map(renderPoint) })
] });
};
const scatterPlot = "_scatterPlot_gc5eo_1";
const css$g = {
scatterPlot
};
const ScatterPlot = ({
id,
width,
height,
margins,
className,
series = /* @__PURE__ */ jsxRuntime.jsx(ScatterSeries, {}),
xAxis = /* @__PURE__ */ jsxRuntime.jsx(LinearXAxis, { type: "time" }),
yAxis = /* @__PURE__ */ jsxRuntime.jsx(LinearYAxis, { type: "value" }),
data = [],
gridlines = /* @__PURE__ */ jsxRuntime.jsx(GridlineSeries, {}),
containerClassName,
brush = null,
zoomPan = null,
secondaryAxis
}) => {
const xAxisProps = react.useMemo(
() => ({ ...LINEAR_X_AXIS_DEFAULT_PROPS, ...xAxis.props }),
[xAxis.props]
);
const yAxisProps = react.useMemo(
() => ({ ...LINEAR_Y_AXIS_DEFAULT_PROPS, ...yAxis.props }),
[yAxis.props]
);
const zoomControlled = react.useMemo(
() => {
var _a, _b;
return (
// eslint-disable-next-line
!((_b = (_a = zoomPan == null ? void 0 : zoomPan.props) == null ? void 0 : _a.domain) == null ? void 0 : _b.hasOwnProperty("domain"))
);
},
[zoomPan]
);
const timeout = react.useRef(null);
const [preventAnimation, setPreventAnimation] = react.useState(false);
const [zoomDomain, setZoomDomain] = react.useState(null);
const [isZoomed, setIsZoomed] = react.useState(false);
const aggregatedData = react.useMemo(() => buildShallowChartData(data), [data]);
const getScales = react.useCallback(
(chartHeight, chartWidth) => {
const yScale = getYScale({
roundDomains: yAxisProps.roundDomains,
type: yAxisProps.type,
height: chartHeight,
data: aggregatedData,
domain: yAxisProps.domain
});
const xScale = getXScale({
width: chartWidth,
type: xAxisProps.type,
roundDomains: xAxisProps.roundDomains,
data: aggregatedData,
domain: zoomDomain || xAxisProps.domain
});
return {
yScale,
xScale
};
},
[yAxisProps, xAxisProps, aggregatedData, zoomDomain]
);
const onZoomPan = react.useCallback(
(event) => {
if (zoomControlled) {
setPreventAnimation(true);
setZoomDomain(event.domain);
setIsZoomed(event.isZoomed);
clearTimeout(timeout.current);
timeout.current = setTimeout(() => setPreventAnimation(true), 500);
}
},
[zoomControlled]
);
const renderChart = react.useCallback(
({
chartHeight,
chartWidth,
id: id2,
updateAxes,
chartSized
}) => {
const { yScale, xScale } = getScales(chartHeight, chartWidth);
const animated = preventAnimation === true ? false : series.props.animated;
const disableBrush = aggregatedData.length <= 1;
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
chartSized && gridlines && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gridlines,
height: chartHeight,
width: chartWidth,
yScale,
xScale,
yAxis: yAxisProps,
xAxis: xAxisProps
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: xAxis,
height: chartHeight,
width: chartWidth,
scale: xScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (e) => updateAxes("horizontal", e)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: yAxis,
height: chartHeight,
width: chartWidth,
scale: yScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (e) => updateAxes("vertical", e)
}
),
secondaryAxis && secondaryAxis.map((axis, i) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
height: chartHeight,
width: chartWidth,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (e) => updateAxes("horizontal", e)
},
i
)),
chartSized && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
disabled: disableBrush,
element: brush,
height: chartHeight,
width: chartWidth,
scale: xScale,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: zoomPan,
onZoomPan,
height: chartHeight,
width: chartWidth,
axisType: xAxis.props.type,
roundDomains: xAxis.props.roundDomains,
data: aggregatedData,
domain: zoomDomain,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `area-series-${id2}`,
data: aggregatedData,
height: chartHeight,
width: chartWidth,
yScale,
xScale,
isZoomed,
animated
}
)
}
)
}
)
] });
},
[
getScales,
preventAnimation,
series,
gridlines,
yAxis,
xAxis,
xAxisProps,
yAxisProps,
secondaryAxis,
brush,
zoomPan,
onZoomPan,
aggregatedData,
zoomDomain,
isZoomed
]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
containerClassName,
margins,
xAxisVisible: isAxisVisible(xAxisProps),
yAxisVisible: isAxisVisible(yAxisProps),
className: classNames(css$g.scatterPlot, className),
children: renderChart
}
);
};
const point = "_point_u68jv_1";
const css$f = {
point
};
const PointSeries = (props) => {
const {
data,
xScale,
yScale,
animated,
point: point2,
color,
height,
width,
id,
activeValues,
show
} = mergeDefaultProps(POINT_SERIES_DEFAULT_PROPS, props);
const getIsVisible = react.useCallback(
(point22, index) => {
const isActive = activeValues && point22 && isEqual(activeValues.x, point22.x);
if (show === "hover") {
return isActive;
} else if (show === "first") {
if (activeValues) {
return isActive;
} else {
return index === 0;
}
} else if (show === "last") {
if (activeValues) {
return isActive;
} else {
return index === data.length - 1;
}
}
return Boolean(show);
},
[activeValues, data.length, show]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ScatterSeries,
{
height,
width,
id,
animated,
data,
xScale,
yScale,
point: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: point2,
color,
className: css$f.point,
size: 4,
tooltip: null,
visible: getIsVisible
}
)
}
);
};
const POINT_SERIES_DEFAULT_PROPS = {
show: "hover",
point: /* @__PURE__ */ jsxRuntime.jsx(ScatterPoint, {})
};
const Area = (props) => {
const {
id,
gradient: gradient2,
glow,
mask,
data,
color,
index,
total,
xScale,
yScale,
animated,
interpolation,
pointerEvents = "none",
...rest
} = mergeDefaultProps(AREA_DEFAULT_PROPS, props);
const stroke = color(data, index);
const coords = react.useMemo(() => {
return data.map((item2) => ({
x: xScale(item2.x),
x1: xScale(item2.x) - xScale(item2.x1),
y: yScale(item2.y),
y0: yScale(item2.y0),
y1: yScale(item2.y1)
}));
}, [data, xScale, yScale]);
const getAreaPath = react.useCallback(
(d) => {
if (d.length === 1 && total === 1) {
const [point2] = d;
const midpoint = roundDecimals(point2.x);
d = [{ ...point2 }, { ...point2 }];
const [start2, end2] = d;
start2.x = 0;
end2.x = midpoint * 2;
}
const fn = d3Shape.area().x((d2) => roundDecimals(d2.x)).y0((d2) => roundDecimals(d2.y0)).y1((d2) => roundDecimals(d2.y1)).curve(interpolate(interpolation));
return fn(d);
},
[interpolation, total]
);
const enter = react.useMemo(() => {
const areaPath = getAreaPath(coords);
return {
d: areaPath === null ? void 0 : areaPath
};
}, [coords, getAreaPath]);
const exit = react.useMemo(() => {
const maxY = Math.max(...yScale.range());
const coords2 = data.map((item2) => ({
x: xScale(item2.x),
x1: 0,
y: 0,
y1: maxY,
y0: maxY
}));
const areaPath = getAreaPath(coords2);
return {
d: areaPath === null ? void 0 : areaPath
};
}, [data, getAreaPath, xScale, yScale]);
const fill = react.useMemo(() => {
if (mask) {
return `url(#mask-pattern-${id})`;
} else {
if (gradient2) {
return `url(#gradient-${id})`;
}
return "";
}
}, [gradient2, id, mask]);
const transition = react.useMemo(() => {
if (animated) {
return {
...DEFAULT_TRANSITION,
delay: index * 0.05
};
} else {
return {
type: false,
delay: 0
};
}
}, [animated, index]);
const renderArea = react.useCallback(() => {
const maskPath = mask ? `url(#mask-${id})` : "";
const extras = constructFunctionProps(rest, data);
return /* @__PURE__ */ jsxRuntime.jsx(
MotionPath,
{
...extras,
pointerEvents,
mask: maskPath,
fill,
transition,
custom: {
enter,
exit
},
style: {
...extras.style,
...generateGlowStyles({ glow, colorSchemeColor: stroke })
}
}
);
}, [
data,
enter,
exit,
fill,
glow,
id,
mask,
rest,
stroke,
transition,
pointerEvents
]);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderArea(),
mask && /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Mask, { id: `mask-${id}`, fill: `url(#gradient-${id})` }),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: mask,
id: `mask-pattern-${id}`,
fill: stroke
}
)
] }),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
color: stroke
}
)
] });
};
const AREA_DEFAULT_PROPS = {
gradient: /* @__PURE__ */ jsxRuntime.jsx(Gradient, {}),
interpolation: "linear"
};
const Line = ({
id,
width,
data,
color,
index,
strokeWidth = 3,
hasArea,
animated,
yScale,
xScale,
showZeroStroke = true,
interpolation,
gradient: gradient2,
glow,
...rest
}) => {
const [pathLength, setPathLength] = react.useState(null);
const ghostPathRef = react.useRef(null);
react.useEffect(() => {
if (ghostPathRef.current) {
setPathLength(roundDecimals(ghostPathRef.current.getTotalLength()));
}
}, [data, xScale, yScale, width]);
const getLinePath = react.useCallback(
(point2) => {
const fn = d3Shape.line().x((d) => roundDecimals(d.x)).y((d) => roundDecimals(d.y1)).defined((d) => showZeroStroke || calculateShowStroke(d, point2)).curve(interpolate(interpolation));
return fn(point2);
},
[interpolation, showZeroStroke]
);
const transition = react.useMemo(() => {
if (animated) {
return {
...DEFAULT_TRANSITION,
delay: hasArea ? 0 : index * 0.05
};
} else {
return {
type: false,
delay: 0
};
}
}, [animated, hasArea, index]);
const coords = react.useMemo(() => {
return data.map((item2) => ({
x: xScale(item2.x),
x1: xScale(item2.x) - xScale(item2.x1),
y: yScale(item2.y),
y0: yScale(item2.y0),
y1: yScale(item2.y1)
}));
}, [data, xScale, yScale]);
const enter = react.useMemo(() => {
const linePath = getLinePath(coords);
let strokeDasharray = "";
if (!hasArea && pathLength !== null) {
strokeDasharray = `${pathLength} ${pathLength}`;
}
return {
d: linePath === null ? void 0 : linePath,
strokeDashoffset: 0,
strokeDasharray
};
}, [coords, getLinePath, hasArea, pathLength]);
const exit = react.useMemo(() => {
let newCoords = coords;
if (hasArea) {
const maxY = Math.max(...yScale.range());
newCoords = data.map((item2) => ({
x: xScale(item2.x),
x1: 0,
y: maxY,
y1: maxY,
y0: maxY
}));
}
const linePath = getLinePath(newCoords);
let strokeDasharray = "";
let strokeDashoffset = 0;
if (!hasArea && pathLength !== null) {
strokeDasharray = `${pathLength} ${pathLength}`;
strokeDashoffset = pathLength;
}
return {
d: linePath === null ? void 0 : linePath,
strokeDasharray,
strokeDashoffset
};
}, [coords, data, getLinePath, hasArea, pathLength, xScale, yScale]);
const stroke = color(data, index);
const extras = constructFunctionProps(rest, data);
const showLine = hasArea || pathLength !== null;
const strokeFill = react.useMemo(() => {
if (gradient2) {
return `url(#gradient-${id})`;
}
return stroke;
}, [gradient2, id]);
if (hasArea) {
delete enter.strokeDashoffset;
delete exit.strokeDashoffset;
}
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
showLine && /* @__PURE__ */ jsxRuntime.jsx(
MotionPath,
{
...extras,
pointerEvents: "none",
stroke: strokeFill,
strokeWidth,
fill: "none",
transition,
custom: {
enter,
exit
},
style: {
...extras.style,
...generateGlowStyles({ glow, colorSchemeColor: strokeFill })
}
}
),
!hasArea && /* @__PURE__ */ jsxRuntime.jsx("path", { opacity: "0", d: enter.d, ref: ghostPathRef, pointerEvents: "none" }),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
color: stroke
}
)
] });
};
const PADDING = 25;
const AreaSeries = (props) => {
const {
data,
height,
id,
width,
isZoomed,
tooltip: tooltip2,
xScale,
yScale,
type,
markLine: markLine2,
symbols,
animated,
area,
interpolation,
line: line2,
colorScheme,
valueMarkers
} = mergeDefaultProps(AREA_SERIES_DEFAULT_PROPS, props);
const symbolsProps = react.useMemo(
() => ({
...POINT_SERIES_DEFAULT_PROPS,
...(symbols == null ? void 0 : symbols.props) ?? {}
}),
[symbols]
);
const [activeValues, setActiveValues] = react.useState(null);
const [activePoint, setActivePoint] = react.useState(null);
const onValueEnter = react.useCallback((event) => {
setActivePoint(event.pointX);
setActiveValues(event.value);
}, []);
const onValueLeave = react.useCallback(() => {
setActivePoint(void 0);
setActiveValues(void 0);
}, []);
const isMulti = type === "grouped" || type === "stacked" || type === "stackedNormalized";
const getPointColor = react.useCallback(
(point2, index) => {
var _a;
const key = Array.isArray(point2) ? (_a = point2 == null ? void 0 : point2[0]) == null ? void 0 : _a.key : point2 == null ? void 0 : point2.key;
return getColor({
data,
colorScheme,
active: activeValues,
point: point2,
index,
key
});
},
[activeValues, colorScheme, data]
);
const renderArea = react.useCallback(
(data2, index = 0, total = 1) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
line2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
xScale,
yScale,
data: data2,
width,
index,
hasArea: area !== null,
animated,
interpolation,
color: getPointColor
}
),
area && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: area,
id: `${id}-area-${index}`,
xScale,
yScale,
data: data2,
index,
total,
animated,
interpolation,
color: getPointColor
}
)
] }),
[
animated,
area,
getPointColor,
id,
interpolation,
line2,
width,
xScale,
yScale
]
);
const renderSymbols = react.useCallback(
(data2, index = 0) => {
const visible = symbols !== null;
const activeSymbols = symbols && symbolsProps.activeValues || activeValues;
const isAnimated = area !== void 0 && animated && !activeSymbols;
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: visible && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbols,
id,
height,
width,
activeValues: activeSymbols,
xScale,
yScale,
index,
data: data2,
animated: isAnimated,
color: () => getPointColor(data2, index)
},
`point-series-${id}`
) });
},
[
activeValues,
animated,
area,
getPointColor,
height,
id,
symbols,
width,
xScale,
yScale
]
);
const renderMarkLine = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: activeValues && markLine2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: markLine2,
height,
pointX: activePoint
}
) }),
[activePoint, activeValues, height, markLine2]
);
const renderSingleSeries = react.useCallback(
(data2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderArea(data2),
renderMarkLine(),
renderSymbols(data2)
] }),
[renderArea, renderMarkLine, renderSymbols]
);
const renderMultiSeries = react.useCallback(
(data2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
data2.map((point2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderArea(point2.data, index, data2.length) }, safeIdentifier.identifier(`${point2.key}`))).reverse(),
renderMarkLine(),
data2.map((point2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderSymbols(point2.data, index) }, safeIdentifier.identifier(`${point2.key}`))).reverse()
] }),
[renderArea, renderMarkLine, renderSymbols]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => {
var _a;
const isVertical = ((_a = marker2 == null ? void 0 : marker2.props) == null ? void 0 : _a.direction) === "vertical";
const size = isVertical ? height : width;
const value2 = isVertical ? xScale(marker2.props.value) : yScale(marker2.props.value);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
size,
value: value2
},
marker2.key
);
}) }),
[valueMarkers, width, yScale, xScale, height]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: `${id}-path`, children: /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
width: isZoomed ? width : width + PADDING,
height: height + PADDING,
x: isZoomed ? 0 : -12.5,
y: -12.5
}
) }) }),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
xScale,
yScale,
data,
height,
width,
color: getPointColor,
onValueEnter,
onValueLeave,
children: /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${id}-path)`, children: [
isMulti && renderMultiSeries(data),
!isMulti && renderSingleSeries(data),
renderValueMarkers()
] })
}
)
] });
};
const AREA_SERIES_DEFAULT_PROPS = {
colorScheme: "cybertron",
animated: true,
interpolation: "linear",
type: "standard",
line: /* @__PURE__ */ jsxRuntime.jsx(Line, {}),
area: /* @__PURE__ */ jsxRuntime.jsx(Area, {}),
markLine: /* @__PURE__ */ jsxRuntime.jsx(MarkLine, {}),
tooltip: /* @__PURE__ */ jsxRuntime.jsx(TooltipArea, {}),
symbols: /* @__PURE__ */ jsxRuntime.jsx(PointSeries, {})
};
const StackedNormalizedAreaSeries = (props) => {
const { interpolation, symbols, ...rest } = {
...AREA_SERIES_DEFAULT_PROPS,
...props
};
const symbolsProps = react.useMemo(
() => ({
...POINT_SERIES_DEFAULT_PROPS,
...symbols == null ? void 0 : symbols.props
}),
[symbols]
);
return /* @__PURE__ */ jsxRuntime.jsx(
AreaSeries,
{
...rest,
interpolation,
type: "stackedNormalized",
symbols: symbols && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbols,
...symbols.props,
point: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbolsProps.point,
...symbolsProps.point.props,
tooltip: null
}
)
}
),
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
content: (series, color) => {
if (!series) {
return null;
}
const value2 = {
...series,
data: series.data.map((d) => ({
...d,
value: `${formatValue(d.value)} ∙ ${formatValue(
Math.floor((d.y1 - d.y0) * 100)
)}%`
}))
};
return /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { color, value: value2 });
}
}
)
}
)
}
);
};
const StackedAreaSeries = (props) => {
const { symbols, interpolation, ...rest } = {
...AREA_SERIES_DEFAULT_PROPS,
...props
};
const symbolsProps = react.useMemo(
() => ({
...POINT_SERIES_DEFAULT_PROPS,
...symbols == null ? void 0 : symbols.props
}),
[symbols]
);
const pointProps = react.useMemo(
() => {
var _a;
return {
...SCATTER_POINT_DEFAULT_PROPS,
...(_a = symbolsProps.point) == null ? void 0 : _a.props
};
},
[symbolsProps]
);
return /* @__PURE__ */ jsxRuntime.jsx(
AreaSeries,
{
...rest,
interpolation,
type: "stacked",
symbols: symbols && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbols,
...symbolsProps,
point: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbolsProps.point,
...pointProps,
tooltip: null
}
)
}
)
}
);
};
const areaChart = "_areaChart_yyojn_1";
const css$e = {
areaChart
};
const AreaChart = (props) => {
const {
xAxis,
yAxis,
id,
data,
width,
height,
margins,
className,
containerClassName,
series,
gridlines,
brush,
zoomPan,
secondaryAxis
} = mergeDefaultProps(AREA_CHART_DEFAULT_PROPS, props);
const zoom = zoomPan ? zoomPan.props : {};
const [zoomDomain, setZoomDomain] = react.useState(zoom.domain);
const [preventAnimation, setPreventAnimation] = react.useState(false);
const [isZoomed, setIsZoomed] = react.useState(!!zoom.domain);
const [zoomControlled] = react.useState(!zoom.hasOwnProperty("domain"));
const xAxisProps = react.useMemo(
() => ({ ...LINEAR_X_AXIS_DEFAULT_PROPS, ...xAxis.props }),
[xAxis.props]
);
const yAxisProps = react.useMemo(
() => ({ ...LINEAR_Y_AXIS_DEFAULT_PROPS, ...yAxis.props }),
[yAxis.props]
);
const seriesProps = react.useMemo(
() => ({ ...AREA_SERIES_DEFAULT_PROPS, ...series.props }),
[series.props]
);
const timeoutRef = react.useRef(null);
const seriesType = seriesProps.type;
const isMultiSeries = seriesType === "stacked" || seriesType === "stackedNormalized" || seriesType === "grouped";
const animated = preventAnimation === true ? false : seriesProps.animated;
react.useEffect(() => {
if (zoomPan) {
const zoom2 = zoomPan.props;
if (!zoomControlled && zoom2.domain !== zoomDomain) {
setZoomDomain(zoom2.domain);
setIsZoomed(!!zoom2.domain);
}
}
}, [zoomControlled, zoomDomain, zoomPan]);
const aggregatedData = react.useMemo(() => {
if (seriesType === "stacked" || seriesType === "stackedNormalized") {
return buildStackData(
data,
seriesType === "stackedNormalized"
);
} else if (seriesType === "grouped") {
return buildNestedChartData(data, true);
} else {
return buildShallowChartData(data);
}
}, [data, seriesType]);
const getScales = react.useCallback(
(chartWidth, chartHeight) => {
const xScale = getXScale({
width: chartWidth,
type: xAxisProps.type,
roundDomains: xAxisProps.roundDomains,
data: aggregatedData,
domain: zoomDomain || xAxisProps.domain,
isMultiSeries
});
const yScale = getYScale({
roundDomains: yAxisProps.roundDomains,
type: yAxisProps.type,
height: chartHeight,
data: aggregatedData,
domain: yAxisProps.domain,
isMultiSeries
});
return { xScale, yScale };
},
[
aggregatedData,
isMultiSeries,
xAxisProps.domain,
xAxisProps.roundDomains,
xAxisProps.type,
yAxisProps.domain,
yAxisProps.roundDomains,
yAxisProps.type,
zoomDomain
]
);
const onZoomPan = react.useCallback(
(event) => {
if (zoomControlled) {
setZoomDomain(event.domain);
setIsZoomed(event.isZoomed);
setPreventAnimation(true);
clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => setPreventAnimation(false));
}
},
[zoomControlled]
);
const renderChart = react.useCallback(
({
chartHeight,
chartWidth,
id: id2,
updateAxes,
chartSized
}) => {
const { xScale, yScale } = getScales(chartWidth, chartHeight);
const disableBrush = aggregatedData.length <= 1;
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
chartSized && gridlines && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gridlines,
height: chartHeight,
width: chartWidth,
yScale,
xScale,
yAxis: yAxisProps,
xAxis: xAxisProps
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: xAxis,
height: chartHeight,
width: chartWidth,
scale: xScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("horizontal", event)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: yAxis,
height: chartHeight,
width: chartWidth,
scale: yScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("vertical", event)
}
),
secondaryAxis && secondaryAxis.map((axis, i) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
height: chartHeight,
width: chartWidth,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("horizontal", event)
},
i
)),
chartSized && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
disabled: disableBrush,
element: brush,
height: chartHeight,
width: chartWidth,
scale: xScale,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: zoomPan,
onZoomPan,
height: chartHeight,
width: chartWidth,
axisType: xAxisProps.type,
roundDomains: xAxisProps.roundDomains,
data: aggregatedData,
domain: zoomDomain,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `area-series-${id2}`,
data: aggregatedData,
height: chartHeight,
width: chartWidth,
yScale,
xScale,
isZoomed,
animated
}
)
}
)
}
)
] });
},
[
aggregatedData,
animated,
brush,
getScales,
gridlines,
isZoomed,
onZoomPan,
secondaryAxis,
series,
xAxis,
yAxis,
xAxisProps,
yAxisProps,
zoomDomain,
zoomPan
]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: isAxisVisible(xAxisProps),
yAxisVisible: isAxisVisible(yAxisProps),
className: classNames(
css$e.areaChart,
className,
series.type
),
children: renderChart
}
);
};
const AREA_CHART_DEFAULT_PROPS = {
data: [],
xAxis: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxis, { type: "time" }),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxis, { type: "value" }),
series: /* @__PURE__ */ jsxRuntime.jsx(AreaSeries, {}),
gridlines: /* @__PURE__ */ jsxRuntime.jsx(GridlineSeries, {}),
brush: null,
zoomPan: null
};
const StackedAreaChart = (props) => {
var _a;
return /* @__PURE__ */ jsxRuntime.jsx(
AreaChart,
{
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(StackedAreaSeries, { ...(_a = props.series) == null ? void 0 : _a.props, type: "stacked" })
}
);
};
const StackedNormalizedAreaChart = (props) => {
var _a, _b;
return /* @__PURE__ */ jsxRuntime.jsx(
AreaChart,
{
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
StackedNormalizedAreaSeries,
{
...(_a = props.series) == null ? void 0 : _a.props,
type: "stackedNormalized"
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLabel,
{
...LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS,
rotation: false,
format: (data) => `${data * 100}%`
}
)
}
),
...(_b = props.yAxis) == null ? void 0 : _b.props
}
)
}
);
};
const BarLabel = (props) => {
const {
fontSize,
fontFamily,
fill,
layout,
className,
text,
x,
y,
height,
position,
width,
data,
padding,
scale,
type,
animated,
index,
barCount
} = mergeDefaultProps(BAR_LABEL_DEFAULT_PROPS, props);
const isVertical = react.useMemo(() => layout === "vertical", [layout]);
const textAnchor = isVertical ? "middle" : "start";
const enterProps = react.useMemo(() => {
let newY = y;
let newX = x;
const isTop = position === "top";
const direction = isVertical ? data.y < 0 && isTop ? "bottom" : position : data.x0 < 0 && isTop ? "bottom" : position;
if (isVertical) {
if (direction === "top") {
newY = y - padding;
} else if (direction === "center") {
newY = y + height / 2;
} else if (direction === "bottom") {
newY = y + height - padding;
}
newX = newX + width / 2;
} else {
if (direction === "top") {
newX = x + width + padding;
} else if (direction === "center") {
newX = x + width / 2;
} else if (direction === "bottom") {
newX = x + padding;
}
newY = newY + height / 2;
}
return {
translateX: newX,
translateY: newY,
opacity: 1
};
}, [data.x0, data.y, height, isVertical, padding, position, width, x, y]);
const exitProps = react.useMemo(() => {
let newY = y;
let newX = x;
if (isVertical) {
const maxY = Math.max(...scale.range());
if (position === "top") {
newY = maxY;
} else {
newY = maxY + height + padding;
}
newX = newX + width / 2;
} else {
const minX = Math.min(...scale.range());
if (position === "top") {
newX = minX;
} else {
newX = minX + width + padding;
}
newY = newY + height / 2;
}
if (type === "stackedDiverging") {
if (isVertical) {
newY = newY / 2;
} else {
newX = newX / 2;
}
}
return {
translateY: newY,
translateX: newX,
opacity: 0
};
}, [height, isVertical, padding, position, scale, type, width, x, y]);
const delay = react.useMemo(() => {
let delay2 = 0;
if (animated) {
if (layout === "vertical") {
return index / barCount * 0.5;
} else {
return (barCount - index) / barCount * 0.5;
}
}
return delay2;
}, [animated, barCount, index, layout]);
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.g,
{
initial: exitProps,
animate: enterProps,
exit: exitProps,
transition: {
...DEFAULT_TRANSITION,
delay
},
fontSize,
fontFamily,
children: /* @__PURE__ */ jsxRuntime.jsx("text", { fill, className, textAnchor, children: text })
}
);
};
const BAR_LABEL_DEFAULT_PROPS = {
position: "top",
layout: "vertical",
fontSize: 13,
padding: 5,
fontFamily: "sans-serif",
fill: "#000"
};
const Bar = (props) => {
const {
activeBrightness,
id,
gradient: gradient2,
data,
barIndex,
color,
yScale,
barCount,
glow,
xScale,
groupIndex,
minHeight,
rangeLines,
animated,
active,
type,
tooltip: tooltip2,
layout,
mask,
label: label2,
cursor,
rx,
ry,
isCategorical,
className,
style,
width,
padding,
guide,
xScale1,
onMouseEnter,
onClick,
onMouseMove,
onMouseLeave
} = mergeDefaultProps(BAR_DEFAULT_PROPS, props);
const labelProps = react.useMemo(
() => ({ ...BAR_LABEL_DEFAULT_PROPS, ...label2 == null ? void 0 : label2.props }),
[label2 == null ? void 0 : label2.props]
);
const isVertical = react.useMemo(() => layout === "vertical", [layout]);
const rect = react.useRef(null);
const [internalActive, setInternalActive] = react.useState(active);
const calculateLinearScalePadding = react.useCallback(
(scale2, offset, size) => {
const totalSize = scale2.range()[1];
const sizeMinusPadding = totalSize - padding * (barCount - 1);
const multiplier = sizeMinusPadding / totalSize;
offset = offset * multiplier + groupIndex * padding;
size = size * multiplier;
return { size, offset };
},
[barCount, groupIndex, padding]
);
const getExit = react.useCallback(
({ x, y, width: width2, height }) => {
let newX = isVertical ? x : Math.min(...xScale.range());
let newY = isVertical ? Math.max(...yScale.range()) : y;
const newHeight = isVertical ? 0 : height;
const newWidth = isVertical ? width2 : 0;
if (type === "stackedDiverging") {
if (isVertical) {
newY = newY / 2;
} else {
newX = newX / 2;
}
}
return {
x: newX,
y: newY,
height: newHeight,
width: newWidth
};
},
[isVertical, type, xScale, yScale]
);
const getKeyCoords = react.useCallback(
(v, v0, v1, scale2, sizeOverride, isCategorical2, padding2) => {
let offset;
let size;
if (isCategorical2) {
if (scale2.bandwidth) {
offset = scale2(v);
size = scale2.bandwidth();
if (sizeOverride) {
if (offset) {
offset = offset + size / 2 - sizeOverride / 2;
} else {
offset = size / 2 - sizeOverride / 2;
}
size = sizeOverride;
}
} else {
if (sizeOverride) {
throw new Error("Not a valid option for this scale type");
}
offset = scale2(v0);
size = scale2(v1 - v0);
if (padding2) {
const calc = calculateLinearScalePadding(scale2, offset, size);
offset = calc.offset;
size = calc.size;
}
}
} else {
if (sizeOverride) {
throw new Error("Not a valid option for this scale type");
}
const c0 = scale2(v0);
const c1 = scale2(v1);
const delta = c1 - c0;
offset = c0;
size = Math.max(delta - 1, 0);
}
return {
offset: isNaN(offset) ? 0 : offset,
size: isNaN(size) ? 0 : size
};
},
[calculateLinearScalePadding]
);
const getValueCoords = react.useCallback(
(v0, v1, scale2) => {
const c0 = scale2(v0);
const c1 = scale2(v1);
const size = Math.abs(c0 - c1);
const minSize = Math.max(minHeight || 0, size);
const offset = Math.min(c0, c1);
return {
offset: isNaN(offset) ? 0 : offset,
size: isNaN(minSize) ? 0 : minSize
};
},
[minHeight]
);
const getCoords = react.useCallback(
(data2) => {
let newYScale = yScale;
let newXScale = xScale;
if (xScale1) {
if (isVertical) {
newXScale = xScale1;
} else {
newYScale = xScale1;
}
}
if (isVertical) {
const xCoords = getKeyCoords(
data2.x,
data2.x0,
data2.x1,
newXScale,
width,
isCategorical,
padding
);
const yCoords = getValueCoords(data2.y0, data2.y1, newYScale);
return {
x: xCoords.offset,
width: xCoords.size,
y: yCoords.offset,
height: yCoords.size
};
} else {
const yCoords = getKeyCoords(
data2.y,
data2.y0,
data2.y1,
newYScale,
width,
isCategorical,
padding
);
const xCoords = getValueCoords(data2.x0, data2.x1, newXScale);
return {
x: xCoords.offset,
width: xCoords.size,
y: yCoords.offset,
height: yCoords.size
};
}
},
[
getKeyCoords,
getValueCoords,
isCategorical,
isVertical,
padding,
width,
xScale,
xScale1,
yScale
]
);
const onMouseEnterInternal = react.useCallback(
(event) => {
if (tooltip2) {
setInternalActive(true);
}
onMouseEnter == null ? void 0 : onMouseEnter({
value: data,
nativeEvent: event
});
},
[data, onMouseEnter, tooltip2]
);
const onMouseLeaveInternal = react.useCallback(
(event) => {
if (tooltip2) {
setInternalActive(false);
}
onMouseLeave == null ? void 0 : onMouseLeave({
value: data,
nativeEvent: event
});
},
[data, onMouseLeave, tooltip2]
);
const onMouseClick = react.useCallback(
(event) => {
onClick == null ? void 0 : onClick({
value: data,
nativeEvent: event
});
},
[data, onClick]
);
const getFill = react.useCallback(
(color2) => {
if (mask) {
return `url(#mask-pattern-${id})`;
} else {
if (gradient2) {
return `url(#gradient-${id})`;
}
return color2;
}
},
[gradient2, id, mask]
);
const tooltipData = react.useMemo(() => {
const xAttr = isCategorical ? "x" : "x0";
let x = data[xAttr];
if (data.x0 < 0) {
x = data.x0;
}
const matches = isVertical ? data.key && data.key !== x : data.key && data.key !== data.y;
if (matches) {
x = `${data.key} ∙ ${x}`;
}
return {
y: data.y,
x
};
}, [data, isCategorical, isVertical]);
const ariaLabelData = react.useMemo(() => getAriaLabel(tooltipData), [tooltipData]);
const getTransition = react.useCallback(
(index2) => {
if (animated) {
let delay = 0;
if (layout === "vertical") {
delay = index2 / barCount * 0.5;
} else {
delay = (barCount - index2) / barCount * 0.5;
}
return {
...DEFAULT_TRANSITION,
delay
};
} else {
return {
type: false,
delay: 0
};
}
},
[animated, barCount, layout]
);
const renderBar = react.useCallback(
(currentColorShade2, coords2, index2) => {
const maskPath = mask ? `url(#mask-${id})` : "";
const fill = getFill(currentColorShade2);
const initialExit = getExit(coords2);
const extras = constructFunctionProps({ className, style }, data);
const transition = getTransition(index2);
const initial = {
...initialExit,
attrX: initialExit.x,
attrY: initialExit.y,
fill
};
delete initial.x;
delete initial.y;
const animate = {
...coords2,
attrX: coords2.x,
attrY: coords2.y,
fill
};
delete animate.x;
delete animate.y;
const extra = {};
if (fill.includes("url")) {
delete initial.fill;
delete animate.fill;
extra.fill = fill;
}
return /* @__PURE__ */ jsxRuntime.jsx("g", { ref: rect, children: /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
className: classNames(extras.className),
style: {
...extras.style,
...generateGlowStyles({
glow,
colorSchemeColor: currentColorShade2
}),
cursor
},
...extra,
mask: maskPath,
rx,
ry,
initial,
animate,
exit: initial,
transition,
onMouseEnter: onMouseEnterInternal,
onMouseLeave: onMouseLeaveInternal,
onClick: onMouseClick,
onMouseMove,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document"
}
) });
},
[
className,
cursor,
data,
getExit,
getFill,
getTransition,
glow,
id,
mask,
onMouseClick,
onMouseEnterInternal,
onMouseLeaveInternal,
onMouseMove,
rx,
ry,
style,
ariaLabelData
]
);
const renderGuideBar = react.useCallback(() => {
if (!guide) {
return null;
}
if (type === "stacked" && barIndex !== 0) {
return null;
}
if (type === "stackedNormalized" || type === "marimekko") {
console.error("Guide bars are not supported for these chart types");
return null;
}
const valueScale = isVertical ? yScale : xScale;
const [start2, end2] = valueScale.domain();
const attr = isVertical ? "y" : "x";
const attrStart = type === "stackedDiverging" ? "0" : "1";
const endPoint = type === "stackedDiverging" ? start2 : end2;
const startPoint = type === "stackedDiverging" && data[attr] > 0 ? end2 : endPoint;
const coords2 = getCoords({
...data,
[attr]: endPoint,
[`${attr}${attrStart}`]: startPoint
});
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: guide,
...coords2,
active
}
);
}, [
active,
barIndex,
data,
getCoords,
guide,
isVertical,
type,
xScale,
yScale
]);
const isActive = tooltip2 ? internalActive : active;
const stroke = color(data, barIndex);
const coords = getCoords(data);
const currentColorShade = active ? chroma(stroke).brighten(activeBrightness).hex() : stroke;
const rangeLineColor = rangeLines && rangeLines.props.color || stroke;
const rangeLineColorShade = active ? chroma(rangeLineColor).brighten(activeBrightness) : rangeLineColor;
const index = groupIndex !== void 0 ? groupIndex : barIndex;
const scale = isVertical ? yScale : xScale;
const barLabel = isVertical ? tooltipData.y : tooltipData.x;
const placement = layout === "vertical" ? "top" : "right";
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderGuideBar(),
renderBar(currentColorShade, coords, index),
rangeLines && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: rangeLines,
...coords,
index,
data,
scale,
color: rangeLineColorShade,
barCount,
animated,
layout,
type
}
),
mask && /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Mask, { id: `mask-${id}`, fill: `url(#gradient-${id})` }),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: mask,
id: `mask-pattern-${id}`,
fill: stroke
}
)
] }),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
direction: layout,
color: currentColorShade
}
),
label2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
...coords,
text: formatValue(barLabel),
index,
data,
scale,
fill: labelProps.fill || currentColorShade,
barCount,
animated,
layout,
type
}
),
tooltip2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!isActive,
reference: rect,
color,
value: tooltipData,
placement: tooltip2.props.placement || placement,
data
}
)
] });
};
const BAR_DEFAULT_PROPS = {
activeBrightness: 0.5,
rx: 0,
ry: 0,
cursor: "auto",
rangeLines: null,
label: null,
tooltip: null,
layout: "vertical",
guide: null,
gradient: /* @__PURE__ */ jsxRuntime.jsx(Gradient, {})
};
const BarSeries = (props) => {
const {
data,
tooltip: tooltip2,
xScale,
yScale,
height,
width,
colorScheme,
xScale1,
bar: bar2,
padding,
animated,
isCategorical,
layout,
type,
id,
valueMarkers
} = mergeDefaultProps(BAR_SERIES_DEFAULT_PROPS, props);
const ref = react.useRef(null);
const [activeValues, setActiveValues] = react.useState(null);
const isVertical = react.useMemo(() => layout === "vertical", [layout]);
const isMultiSeries = react.useMemo(() => {
return type === "grouped" || type === "stacked" || type === "marimekko" || type === "stackedNormalized" || type === "stackedDiverging";
}, [type]);
const getTransform = react.useCallback(
(data2) => {
let xPos = 0;
let yPos = 0;
if (type !== "marimekko") {
if (layout === "vertical") {
xPos = xScale(data2.key);
} else {
yPos = yScale(data2.key);
}
}
return `translate(${xPos}, ${yPos})`;
},
[layout, type, xScale, yScale]
);
const getBarColor = react.useCallback(
(point2, index) => {
let key = "key";
if (isMultiSeries) {
if (layout === "vertical") {
key = "x";
} else {
key = "y";
}
}
if (point2[key] === void 0) {
key = "x0";
}
return getColor({
colorScheme,
point: point2,
index,
data,
isMultiSeries,
attribute: key
});
},
[colorScheme, data, isMultiSeries, layout]
);
const onMouseMove = react.useCallback((event) => {
var _a;
(_a = ref.current) == null ? void 0 : _a.triggerMouseMove(event);
}, []);
const onValueEnter = react.useCallback((event) => {
setActiveValues(event.value);
}, []);
const onValueLeave = react.useCallback(() => {
setActiveValues(null);
}, []);
const renderBar = react.useCallback(
(data2, barIndex, barCount, groupIndex) => {
const active = activeValues && activeValues.x === data2.key;
let newYScale = yScale;
let newXScale = xScale;
if (xScale1) {
if (isVertical) {
newXScale = xScale1;
} else {
newYScale = xScale1;
}
}
let key = barIndex.toString();
if (data2.key) {
key = `${data2.key.toString()}-${groupIndex}-${data2.x}`;
}
let barElements = Array.isArray(bar2) ? bar2[barIndex] : bar2;
if (!bar2) {
barElements = /* @__PURE__ */ jsxRuntime.jsx(Bar, { ...BAR_DEFAULT_PROPS });
}
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: barElements,
id: `${id}-bar-${groupIndex}-${barIndex}`,
animated,
active,
xScale: newXScale,
xScale1,
yScale: newYScale,
padding,
barCount,
groupIndex,
barIndex,
data: data2,
isCategorical,
color: getBarColor,
layout,
type,
onMouseMove
}
) }, key);
},
[
activeValues,
animated,
bar2,
getBarColor,
id,
isCategorical,
isVertical,
layout,
onMouseMove,
padding,
type,
xScale,
xScale1,
yScale
]
);
const renderBarGroup = react.useCallback(
(data2, barCount, groupIndex) => {
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data2.map(
(barData, barIndex) => renderBar(barData, barIndex, barCount, groupIndex)
) });
},
[renderBar]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
size: layout === "vertical" ? width : height,
value: layout === "vertical" ? yScale(marker2.props.value) : xScale(marker2.props.value),
direction: layout === "vertical" ? "horizontal" : "vertical"
},
marker2.key
)) }),
[height, layout, valueMarkers, width, xScale, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsxs(
reablocks.CloneElement,
{
element: tooltip2,
childRef: ref,
xScale,
yScale,
data,
height,
width,
inverse: false,
isHorizontal: layout === "horizontal",
color: getBarColor,
onValueEnter,
onValueLeave,
isContinous: false,
children: [
isMultiSeries && data.map((groupData, index) => /* @__PURE__ */ jsxRuntime.jsx("g", { transform: getTransform(groupData), children: renderBarGroup(
groupData.data,
data.length,
index
) }, `bar-group-${index}`)),
!isMultiSeries && renderBarGroup(data, data.length),
renderValueMarkers()
]
}
);
};
const BAR_SERIES_DEFAULT_PROPS = {
type: "standard",
padding: 0.1,
groupPadding: 16,
animated: true,
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { followCursor: true, modifiers: [dom.offset(5)] })
}
),
colorScheme: "cybertron",
bar: /* @__PURE__ */ jsxRuntime.jsx(Bar, {}),
layout: "vertical"
};
const RangeLines = ({
layout = "vertical",
color,
x,
y,
scale,
type,
height,
position = "top",
strokeWidth = 1,
width,
animated,
index,
barCount,
data
}) => {
const isVertical = react.useMemo(() => layout === "vertical", [layout]);
const rangeLineHeight = react.useMemo(
() => Math.min(strokeWidth, isVertical ? height : width),
[height, isVertical, strokeWidth, width]
);
const [newWidth, newHeight] = react.useMemo(
() => [
isVertical ? width : rangeLineHeight,
isVertical ? rangeLineHeight : height
],
[height, isVertical, rangeLineHeight, width]
);
const enterProps = react.useMemo(() => {
let newY = y;
let newX = x;
const isTop = position === "top";
const direction = isVertical ? data.y < 0 && isTop ? "bottom" : position : data.x0 < 0 && isTop ? "bottom" : position;
if (isVertical) {
if (direction === "top") {
newY = y;
} else {
newY = y + height - rangeLineHeight;
}
} else {
if (direction === "top") {
newX = x + width - rangeLineHeight;
} else {
newX = x;
}
}
return {
x: newX,
y: newY,
opacity: 1
};
}, [
data.x0,
data.y,
height,
isVertical,
position,
rangeLineHeight,
width,
x,
y
]);
const exitProps = react.useMemo(() => {
let newY = y;
let newX = x;
if (isVertical) {
const maxY = Math.max(...scale.range());
if (position === "top") {
newY = maxY;
} else {
newY = maxY + height - rangeLineHeight;
}
} else {
const minX = Math.min(...scale.range());
if (position === "top") {
newX = minX;
} else {
newX = minX + width - rangeLineHeight;
}
}
if (type === "stackedDiverging") {
if (isVertical) {
newY = newY / 2;
} else {
newX = newX / 2;
}
}
return {
y: newY,
x: newX,
opacity: 0
};
}, [height, isVertical, position, rangeLineHeight, scale, type, width, x, y]);
const delay = react.useMemo(() => {
let delay2 = 0;
if (animated) {
if (layout === "vertical") {
return index / barCount * 0.5;
} else {
return (barCount - index) / barCount * 0.5;
}
}
return delay2;
}, [animated, barCount, index, layout]);
const initial = react.useMemo(() => {
const r = {
...exitProps,
attrX: exitProps.x,
attrY: exitProps.y
};
delete r.x;
delete r.y;
return r;
}, [exitProps]);
const animate = react.useMemo(() => {
const r = {
...enterProps,
attrX: enterProps.x,
attrY: enterProps.y
};
delete r.x;
delete r.y;
return r;
}, [enterProps]);
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
pointerEvents: "none",
fill: color,
width: newWidth,
height: newHeight,
initial,
animate,
exit: initial,
transition: {
...DEFAULT_TRANSITION,
delay
}
}
);
};
const StackedBarSeries = (props) => /* @__PURE__ */ jsxRuntime.jsx(BarSeries, { ...STACKED_BAR_SERIES_DEFAULT_PROPS, ...props });
const STACKED_BAR_SERIES_DEFAULT_PROPS = {
...BAR_SERIES_DEFAULT_PROPS,
type: "stacked",
bar: /* @__PURE__ */ jsxRuntime.jsx(
Bar,
{
...BAR_DEFAULT_PROPS,
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "5%", stopOpacity: 0.1 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "90%", stopOpacity: 0.7 }, "stop")
]
}
),
rangeLines: /* @__PURE__ */ jsxRuntime.jsx(RangeLines, { position: "top", strokeWidth: 3 })
}
)
};
const StackedNormalizedBarSeries = (props) => /* @__PURE__ */ jsxRuntime.jsx(BarSeries, { ...STACKED_NORMALIZED_BAR_SERIES_DEFAULT_PROPS, ...props });
const STACKED_NORMALIZED_BAR_SERIES_DEFAULT_PROPS = {
...BAR_SERIES_DEFAULT_PROPS,
type: "stackedNormalized",
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
followCursor: true,
modifiers: [dom.offset(5)],
content: (point2, color) => {
point2.data = point2.data.map((d) => {
const start2 = isNaN(d.y0) ? d.x0 : d.y0;
const end2 = isNaN(d.y1) ? d.x1 : d.y1;
return {
...d,
value: `${formatValue(Math.floor((end2 - start2) * 100))}%`
};
});
return /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { value: point2, color });
}
}
)
}
),
bar: /* @__PURE__ */ jsxRuntime.jsx(
Bar,
{
...BAR_DEFAULT_PROPS,
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "5%", stopOpacity: 0.1 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "90%", stopOpacity: 0.7 }, "stop")
]
}
),
rangeLines: /* @__PURE__ */ jsxRuntime.jsx(RangeLines, { position: "top", strokeWidth: 3 })
}
)
};
const MarimekkoBarSeries = (props) => /* @__PURE__ */ jsxRuntime.jsx(BarSeries, { ...MARIMEKKO_BAR_SERIES_DEFAULT_PROPS, ...props });
const MARIMEKKO_BAR_SERIES_DEFAULT_PROPS = {
...BAR_SERIES_DEFAULT_PROPS,
type: "marimekko",
padding: 10,
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
followCursor: true,
modifiers: [dom.offset(5)],
content: (point2, color) => {
const data = {
...point2,
data: point2.data.map((d) => ({
...d,
value: `${formatValue(d.value)} ∙ ${formatValue(
Math.floor((d.y1 - d.y0) * 100)
)}%`
}))
};
return /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { value: data, color });
}
}
)
}
),
bar: /* @__PURE__ */ jsxRuntime.jsx(
Bar,
{
...BAR_DEFAULT_PROPS,
padding: 10,
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "5%", stopOpacity: 0.1 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "90%", stopOpacity: 0.7 }, "stop")
]
}
),
rangeLines: /* @__PURE__ */ jsxRuntime.jsx(RangeLines, { position: "top", strokeWidth: 3 })
}
)
};
const HistogramBarSeries = ({
type,
...rest
}) => /* @__PURE__ */ jsxRuntime.jsx(BarSeries, { ...HISTOGRAM_BAR_SERIES_DEFAULT_PROPS, ...rest });
const HISTOGRAM_BAR_SERIES_DEFAULT_PROPS = {
...BAR_SERIES_DEFAULT_PROPS,
colorScheme: schemes.cybertron[0],
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
followCursor: true,
modifiers: [dom.offset(5)],
content: (point2, color) => {
const data = {
...point2,
x: `${formatValue(point2.x0)} - ${formatValue(point2.x1)}`,
value: point2.y
};
return /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { value: data, color });
}
}
)
}
)
};
const GuideBar = ({
fill = "#eee",
active,
opacity = 0.15,
...rest
}) => {
const { x, y, ...other } = rest;
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
fill,
...other,
pointerEvents: "none",
initial: "hidden",
animate: active ? "visible" : "hidden",
variants: {
hidden: { opacity: 0, attrX: x, attrY: y },
visible: { opacity, attrX: x, attrY: y }
}
}
);
};
const barChart = "_barChart_sfjii_1";
const stackedNormalized = "_stackedNormalized_sfjii_4";
const stacked = "_stacked_sfjii_4";
const marimekko = "_marimekko_sfjii_6";
const css$d = {
barChart,
stackedNormalized,
stacked,
marimekko
};
const BarChart = (props) => {
const {
id,
width,
height,
margins,
className,
data,
xAxis,
yAxis,
series,
brush,
gridlines,
secondaryAxis,
containerClassName
} = mergeDefaultProps(BAR_CHART_DEFAULT_PROPS, props);
const seriesProps = react.useMemo(
() => ({ ...BAR_SERIES_DEFAULT_PROPS, ...series == null ? void 0 : series.props }),
[series == null ? void 0 : series.props]
);
const xAxisProps = react.useMemo(
() => ({ ...LINEAR_X_AXIS_DEFAULT_PROPS, ...xAxis.props }),
[xAxis.props]
);
const yAxisProps = react.useMemo(
() => ({ ...LINEAR_Y_AXIS_DEFAULT_PROPS, ...yAxis.props }),
[yAxis.props]
);
const isVertical = react.useMemo(
() => seriesProps.layout === "vertical",
[seriesProps]
);
const keyAxisProps = react.useMemo(
() => isVertical ? xAxisProps : yAxisProps,
[isVertical, xAxisProps, yAxisProps]
);
const isDiverging = react.useMemo(
() => seriesProps.type === "stackedDiverging",
[seriesProps.type]
);
const getMarimekkoGroupScales = react.useCallback(
(aggregatedData, axisProps, width2) => {
const keyScale = getMarimekkoScale(width2, axisProps.roundDomains);
const groupScale = getMarimekkoGroupScale({
width: width2,
padding: seriesProps.padding,
data: aggregatedData,
valueScale: keyScale
});
return {
keyScale,
groupScale
};
},
[seriesProps.padding]
);
const getMultiGroupScales = react.useCallback(
(aggregatedData, height2, width2) => {
const { groupPadding, layout } = seriesProps;
const groupScale = getGroupScale({
dimension: isVertical ? width2 : height2,
direction: layout,
padding: groupPadding,
data: aggregatedData
});
const keyScale = getInnerScale({
groupScale,
padding: seriesProps.padding,
data: aggregatedData,
prop: isVertical ? "x" : "y"
});
return {
groupScale,
keyScale
};
},
[isVertical, seriesProps]
);
const getKeyScale = react.useCallback(
(aggregatedData, axisProps, isMultiSeries, width2) => {
return getXScale({
width: width2,
type: axisProps.type,
roundDomains: axisProps.roundDomains,
data: aggregatedData,
padding: seriesProps.padding,
domain: axisProps.domain,
isMultiSeries,
isDiverging
});
},
[isDiverging, seriesProps]
);
const getValueScale2 = react.useCallback(
(aggregatedData, axisProps, isMultiSeries, height2) => {
return getYScale({
roundDomains: axisProps.roundDomains,
padding: seriesProps.padding,
type: axisProps.type,
height: height2,
data: aggregatedData,
domain: axisProps.domain,
isMultiSeries,
isDiverging
});
},
[isDiverging, seriesProps]
);
const getScalesAndData = react.useCallback(
(chartHeight, chartWidth) => {
const { type, layout } = seriesProps;
const isMarimekko = type === "marimekko";
const isGrouped = type === "grouped";
const isStacked = type === "stacked" || type === "stackedNormalized" || type === "stackedDiverging";
const isMultiSeries = isGrouped || isStacked;
let aggregatedData;
if (isStacked) {
let distroType = "default";
if (type === "stackedNormalized") {
distroType = "expand";
} else if (type === "stackedDiverging") {
distroType = "diverging";
}
aggregatedData = buildBarStackData(
data,
distroType,
layout
);
} else if (type === "waterfall") {
aggregatedData = buildWaterfall(
data,
layout,
seriesProps.binSize
);
} else if (isMarimekko) {
aggregatedData = buildMarimekkoData(data);
} else if (isGrouped) {
aggregatedData = buildNestedChartData(
data,
false,
layout
);
} else {
aggregatedData = buildShallowChartData(
data,
layout,
seriesProps.binSize
);
}
let yScale;
let xScale;
let xScale1;
if (isVertical) {
if (isGrouped) {
const { keyScale, groupScale } = getMultiGroupScales(
aggregatedData,
chartHeight,
chartWidth
);
xScale = groupScale;
xScale1 = keyScale;
} else if (isMarimekko) {
const { keyScale, groupScale } = getMarimekkoGroupScales(
aggregatedData,
xAxisProps,
chartWidth
);
xScale = groupScale;
xScale1 = keyScale;
} else {
xScale = getKeyScale(
aggregatedData,
xAxisProps,
isMultiSeries,
chartWidth
);
}
yScale = getValueScale2(
aggregatedData,
yAxisProps,
isMultiSeries,
chartHeight
);
} else {
if (isGrouped) {
const { keyScale, groupScale } = getMultiGroupScales(
aggregatedData,
chartHeight,
chartWidth
);
yScale = groupScale;
xScale1 = keyScale;
xScale = getKeyScale(
aggregatedData,
xAxisProps,
isMultiSeries,
chartWidth
);
} else if (isMarimekko) {
throw new Error(
"Marimekko is currently not supported for horizontal layouts"
);
} else {
xScale = getKeyScale(
aggregatedData,
xAxisProps,
isMultiSeries,
chartWidth
);
yScale = getValueScale2(
aggregatedData,
yAxisProps,
isMultiSeries,
chartHeight
);
}
}
return { xScale, xScale1, yScale, aggregatedData };
},
[
getKeyScale,
data,
getMarimekkoGroupScales,
getMultiGroupScales,
getValueScale2,
isVertical,
seriesProps,
xAxisProps,
yAxisProps
]
);
const renderChart = react.useCallback(
(containerProps) => {
const { chartHeight, chartWidth, id: id2, updateAxes, chartSized } = containerProps;
const { xScale, xScale1, yScale, aggregatedData } = getScalesAndData(
chartHeight,
chartWidth
);
const isCategorical = keyAxisProps.type === "category";
const disableBrush = aggregatedData.length <= 1;
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
chartSized && gridlines && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gridlines,
height: chartHeight,
width: chartWidth,
yScale,
xScale,
yAxis: yAxisProps,
xAxis: xAxisProps
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: xAxis,
height: chartHeight,
width: chartWidth,
scale: xScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes(isVertical ? "horizontal" : "vertical", event)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: yAxis,
height: chartHeight,
width: chartWidth,
scale: yScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes(isVertical ? "vertical" : "horizontal", event)
}
),
secondaryAxis && secondaryAxis.map((axis, i) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
height: chartHeight,
width: chartWidth,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("horizontal", event)
},
i
)),
chartSized && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
disabled: disableBrush,
element: brush,
height: chartHeight,
width: chartWidth,
scale: xScale,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `bar-series-${id2}`,
data: aggregatedData,
height: chartHeight,
width: chartWidth,
isCategorical,
xScale,
xScale1,
yScale
}
)
}
)
] });
},
[
brush,
getScalesAndData,
gridlines,
isVertical,
keyAxisProps,
secondaryAxis,
series,
xAxis,
yAxis,
xAxisProps,
yAxisProps
]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: isAxisVisible(xAxisProps),
yAxisVisible: isAxisVisible(yAxisProps),
className: classNames(css$d.barChart, className, css$d[seriesProps.type]),
children: renderChart
}
);
};
const BAR_CHART_DEFAULT_PROPS = {
data: [],
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { tickSize: 20 })
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxis, { type: "value" }),
series: /* @__PURE__ */ jsxRuntime.jsx(BarSeries, {}),
gridlines: /* @__PURE__ */ jsxRuntime.jsx(GridlineSeries, {}),
brush: null
};
const MarimekkoChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
BarChart,
{
...MARIMEKKO_CHART_DEFAULT_PROPS,
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
MarimekkoBarSeries,
{
...MARIMEKKO_BAR_SERIES_DEFAULT_PROPS,
...props.series.props
}
)
}
);
const MARIMEKKO_CHART_DEFAULT_PROPS = {
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { tickSize: 15 })
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLabel,
{
...LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS,
rotation: false,
format: (data) => `${data * 100}%`
}
)
}
)
}
)
};
const StackedBarChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
BarChart,
{
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
StackedBarSeries,
{
...STACKED_BAR_SERIES_DEFAULT_PROPS,
...props.series.props
}
)
}
);
const StackedNormalizedBarChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
BarChart,
{
...STACKED_NORMALIZED_BAR_CHART_DEFAULT_PROPS,
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
StackedNormalizedBarSeries,
{
...STACKED_NORMALIZED_BAR_SERIES_DEFAULT_PROPS,
...props.series.props
}
)
}
);
const STACKED_NORMALIZED_BAR_CHART_DEFAULT_PROPS = {
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLabel,
{
...LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS,
rotation: false,
format: (data) => `${data * 100}%`
}
)
}
)
}
)
};
const HistogramBarChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
BarChart,
{
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
HistogramBarSeries,
{
...HISTOGRAM_BAR_SERIES_DEFAULT_PROPS,
...props.series.props
}
)
}
);
const LineSeries = (props) => /* @__PURE__ */ jsxRuntime.jsx(AreaSeries, { area: null, line: /* @__PURE__ */ jsxRuntime.jsx(Line, { strokeWidth: 3 }), ...props });
const LineChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(AreaChart, { series: /* @__PURE__ */ jsxRuntime.jsx(LineSeries, {}), ...props });
const Map$1 = ({
id,
width,
height,
margins,
className,
containerClassName,
markers,
data,
fill = "rgba(255, 255, 255, 0.3)",
projection = "mercator"
}) => {
const getProjection = react.useCallback(
({ chartWidth, chartHeight }) => {
if (projection === "natural-earth") {
return d3Geo.geoNaturalEarth1().fitSize([chartWidth, chartHeight], data).center([0, 0]);
}
return d3Geo.geoMercator().fitSize([chartWidth, chartHeight], data).center([0, 35]);
},
[data, projection]
);
const renderMarker = react.useCallback(
(marker2, index, projection2) => {
const position = projection2(marker2.props.coordinates);
if (!position) {
console.warn(
`Position for ${marker2.props.coordinates.toString()} not found.`
);
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
cx: position[0],
cy: position[1],
index
}
);
},
[]
);
const renderCountry = react.useCallback(
(point2, index, path2) => {
if (point2.id === "010") {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx("path", { d: path2(point2), fill }, `path-${index}`);
},
[fill]
);
const renderChart = react.useCallback(
(containerProps) => {
if (!data) {
return null;
}
const geoProjection = getProjection(containerProps);
const path2 = d3Geo.geoPath().projection(geoProjection);
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: {
opacity: 0
},
animate: {
opacity: 1
},
children: [
data.features.map(
(point2, index) => renderCountry(point2, index, path2)
),
markers && markers.map((marker2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderMarker(marker2, index, geoProjection) }, `marker-${index}`))
]
}
);
},
[data, getProjection, markers, renderCountry, renderMarker]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: false,
yAxisVisible: false,
className,
children: (props) => renderChart(props)
}
);
};
const marker = "_marker_agib4_1";
const css$c = {
marker
};
const MapMarker = ({
size = 3,
index,
tooltip: tooltip2,
cx,
cy,
onClick = () => void 0
}) => {
const ref = react.useRef(null);
const [active, setActive] = react.useState(false);
const ariaLabelData = react.useMemo(
() => typeof tooltip2 === "string" ? tooltip2 : "map marker",
[tooltip2]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.circle,
{
initial: {
opacity: 0,
scale: 0.02
},
animate: {
opacity: 1,
scale: 1
},
transition: {
delay: index * 0.3
},
ref,
className: css$c.marker,
cx,
cy,
r: size,
onMouseEnter: () => setActive(true),
onMouseLeave: () => setActive(false),
onClick,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document"
}
),
tooltip2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.Tooltip,
{
theme: tooltipTheme,
visible: active,
reference: ref,
modifiers: [dom.offset({ mainAxis: 0, crossAxis: 3 })],
content: tooltip2
}
)
] });
};
const useInterpolate$2 = ({ data, animated, arc }) => {
const exit = react.useMemo(() => {
const startAngle = data.startAngle;
const endAngle = animated ? startAngle : data.endAngle;
return {
...data,
startAngle,
endAngle
};
}, [data, animated]);
const prevData = react.useRef(exit);
const d = react$1.useMotionValue(exit);
const spring = react$1.useSpring(0, DEFAULT_TRANSITION);
react.useEffect(() => {
const interpolator = d3Interpolate.interpolate(prevData.current, data);
const prevSpring = spring.get();
spring.set(prevSpring + 1);
return spring.on("change", (v) => {
const newData = interpolator(v - prevSpring);
prevData.current = newData;
d.set(arc(newData));
});
}, [arc, d, data, exit, spring]);
return d;
};
const PieArc = ({
id,
color,
data,
arc,
style = {},
cursor = "initial",
animated = true,
gradient: gradient2,
disabled = false,
onClick,
onMouseEnter,
onMouseLeave,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {})
}) => {
var _a;
const arcRef = react.useRef(null);
const d = useInterpolate$2({ animated, arc, data });
const [active, setActive] = react.useState(false);
const fill = react.useMemo(
() => active ? chroma(color).brighten(0.5) : color,
[color, active]
);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
if (!disabled) {
setActive(true);
onMouseEnter == null ? void 0 : onMouseEnter({
value: data.data,
nativeEvent: event
});
}
},
onPointerOut: (event) => {
if (!disabled) {
setActive(false);
onMouseLeave == null ? void 0 : onMouseLeave({
value: data.data,
nativeEvent: event
});
}
}
});
const internalFill = react.useMemo(() => {
if (gradient2) {
return `url(#gradient-${id})`;
}
return color;
}, [gradient2, id, color]);
const tooltipData = react.useMemo(
() => ({ y: data.data.data, x: data.data.key }),
[data]
);
const ariaLabelData = react.useMemo(() => getAriaLabel(tooltipData), [tooltipData]);
return /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
ref: arcRef,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
role: "graphics-symbol",
d,
style: { cursor, ...style },
fill: internalFill,
onPointerOver: pointerOver,
onPointerOut: pointerOut,
onClick: (event) => {
if (!disabled) {
onClick == null ? void 0 : onClick({
value: data.data,
nativeEvent: event
});
}
}
}
),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
direction: "horizontal",
color: fill
}
),
!((_a = tooltip2 == null ? void 0 : tooltip2.props) == null ? void 0 : _a.disabled) && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!active,
reference: arcRef,
value: tooltipData
}
)
]
}
);
};
function findBreakPoint([startX, startY], [endX, endY]) {
let breakPoint = [0, 0];
const breakPointCondition = (endY - startY) * Math.sign(startY) >= 0;
if (breakPointCondition) {
let scale = Math.abs(endY / startY) || 1;
const minScale = 1;
const maxScale = Math.abs(endX / startX) || 1;
scale = Math.max(Math.min(maxScale, scale), minScale);
breakPoint = [startX * scale, endY];
} else {
let scale = 0.85;
const minScale = Math.abs(startX / endX) || 1;
const maxScale = 1;
scale = Math.max(Math.min(maxScale, scale), minScale);
breakPoint = [endX * scale, startY];
}
return breakPoint;
}
const getTextAnchor = ({ startAngle, endAngle }) => (
// we could also use the sign of position[0]
startAngle + (endAngle - startAngle) / 2 < Math.PI ? "start" : "end"
);
const PieArcLabel = (props) => {
const {
centroid,
data,
lineStroke,
padding,
fontSize,
fontFill,
format,
fontFamily,
position,
outerRadius,
width,
height
} = mergeDefaultProps(PIE_ARC_LABEL_DEFAULT_PROPS, props);
const textAnchor = getTextAnchor(data);
const text = format ? format({ ...data.data, textAnchor }) : formatValue(data.data.key);
const [posX, posY] = position;
const minRadius = outerRadius + 4;
const startPoint = centroid(data);
const innerPoint = d3Shape.arc().innerRadius(minRadius).outerRadius(minRadius).centroid(data);
const breakPoint = findBreakPoint(innerPoint, position);
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: {
duration: 0.1
},
children: [
typeof text === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: text }),
/* @__PURE__ */ jsxRuntime.jsx(
"text",
{
dy: padding,
fill: fontFill,
fontSize,
fontFamily,
textAnchor,
style: {
shapeRendering: "crispEdges",
transform: `translate3d(${posX}px,${posY}px, 0)`
},
children: text
}
)
] }) : /* @__PURE__ */ jsxRuntime.jsx(
"foreignObject",
{
width,
height,
style: {
transform: `translate3d(${textAnchor === "start" ? posX : posX - width}px,${posY - height / 2}px, 0)`,
color: fontFill,
fontFamily,
fontSize
},
children: text
}
),
/* @__PURE__ */ jsxRuntime.jsx(
"polyline",
{
fill: "none",
stroke: lineStroke,
points: `${startPoint},${innerPoint},${breakPoint},${position}`
}
)
]
}
);
};
const PIE_ARC_LABEL_DEFAULT_PROPS = {
format: void 0,
lineStroke: "rgba(127,127,127,0.5)",
fontFill: "#8F979F",
fontSize: 11,
fontFamily: "sans-serif",
padding: ".35em",
height: 11
};
const factor = 1.2;
const midAngle = (d) => d.startAngle + (d.endAngle - d.startAngle) / 2;
const labelVisible = (arc2) => arc2.endAngle - arc2.startAngle > Math.PI / 30;
function shouldDisplayLabel(displayAllLabels, arcData) {
return displayAllLabels || labelVisible(arcData);
}
function calculateOuterRadius(outerRadius, data, point2, explode) {
if (!explode || data === void 0) {
return outerRadius;
}
const maxVal = d3Array.max(data, (d) => d.value);
return outerRadius * point2.value / maxVal;
}
function calculateCentroid(data, innerRadius, outerRadius, explode) {
return (point2) => {
const newOuter = calculateOuterRadius(outerRadius, data, point2, explode);
return d3Shape.arc().innerRadius(innerRadius).outerRadius(newOuter).centroid(point2);
};
}
function calculateRadius(height, width, label2, arcWidth, doughnut) {
const minDimension = Math.min(width, height);
let outerRadius = minDimension / 2;
let labelWidth = 0;
if (label2) {
labelWidth = label2.props.width;
if (labelWidth) {
const outerArcRadius = width / 2 - labelWidth;
outerRadius = Math.min(outerArcRadius / factor, height / 2);
} else {
outerRadius = minDimension / 3;
labelWidth = width / 2 - outerRadius * factor;
}
}
const innerRadius = doughnut ? outerRadius * (1 - arcWidth) : 0;
return {
outerRadius,
innerRadius,
labelWidth
};
}
function calculateInnerArc(data, innerRadius, outerRadius, cornerRadius, padAngle, padRadius, explode) {
return (point2) => {
const newOuter = calculateOuterRadius(outerRadius, data, point2, explode);
return d3Shape.arc().innerRadius(innerRadius).outerRadius(newOuter).cornerRadius(cornerRadius).padRadius(padRadius).padAngle(padAngle)(point2);
};
}
function calculateLabelPositions(data, outerRadius, minDistance, cornerRadius, padAngle, padRadius, displayAllLabels) {
const outerArcRadius = outerRadius * factor;
const outerArc = d3Shape.arc().innerRadius(outerArcRadius).outerRadius(outerArcRadius).cornerRadius(cornerRadius).padAngle(padAngle).padRadius(padRadius);
const positions = data.map((d) => {
if (!shouldDisplayLabel(displayAllLabels, d)) {
return null;
}
const pos = outerArc.centroid(d);
pos[0] = outerArcRadius * (midAngle(d) < Math.PI ? 1 : -1);
return pos;
});
for (let i = 0; i < data.length - 1; i++) {
if (!positions[i]) {
continue;
}
const [aPosX, aPosY] = positions[i];
for (let j = i + 1; j < data.length; j++) {
if (!positions[j]) {
continue;
}
const [bPosX, bPosY] = positions[j];
if (bPosX * aPosX > 0) {
const overlap = minDistance - Math.abs(bPosY - aPosY);
if (overlap > 0) {
positions[j][1] += Math.sign(bPosX) * overlap;
}
}
}
}
return positions;
}
const PieArcSeries = (props) => {
const {
doughnut,
arcWidth,
label: label2,
colorScheme,
width,
displayAllLabels,
height,
explode,
id,
animated,
cornerRadius,
padAngle,
padRadius,
arc,
data
} = mergeDefaultProps(PIE_ARC_SERIES_DEFAULT_PROPS, props);
const labelProps = react.useMemo(
() => ({ ...PIE_ARC_LABEL_DEFAULT_PROPS, ...label2 == null ? void 0 : label2.props }),
[label2]
);
const { outerRadius, innerRadius, labelWidth } = calculateRadius(
height,
width,
label2,
arcWidth,
doughnut
);
const innerArc = calculateInnerArc(
data,
innerRadius,
outerRadius,
cornerRadius,
padAngle,
padRadius,
explode
);
const positions = label2 ? calculateLabelPositions(
data,
outerRadius,
// 4 is for vertical margins between labels
labelProps.height + 4,
cornerRadius,
padAngle,
padRadius,
displayAllLabels
) : [];
const centroid = calculateCentroid(data, innerRadius, outerRadius, explode);
function renderItem(arcData, index) {
const safeKey = safeIdentifier.identifier(arcData.data.key.toString());
const color = getColor({
data,
colorScheme,
point: arcData.data,
index
});
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
positions[index] && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
id,
element: label2,
data: arcData,
centroid,
outerRadius,
width: labelWidth,
position: positions[index]
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arc,
id: `${id}-arc-${safeKey}`,
data: arcData,
animated,
arc: innerArc,
color
}
)
] }, safeKey);
}
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map(renderItem) });
};
const PIE_ARC_SERIES_DEFAULT_PROPS = {
animated: true,
colorScheme: "cybertron",
innerRadius: 0,
cornerRadius: 0,
padAngle: 0,
padRadius: 0,
explode: false,
displayAllLabels: false,
arcWidth: 0.25,
label: /* @__PURE__ */ jsxRuntime.jsx(PieArcLabel, {}),
arc: /* @__PURE__ */ jsxRuntime.jsx(PieArc, {})
};
const PieChart = ({
id,
width,
height,
className,
containerClassName,
displayAllLabels,
data = [],
margins = 10,
series = /* @__PURE__ */ jsxRuntime.jsx(PieArcSeries, {})
}) => {
const newId = reablocks.useId(id);
const internalData = react.useMemo(() => {
const pieLayout = d3Shape.pie().value(
(d) => Number(d.data)
);
if (!series.props.explode) {
pieLayout.sort(null);
}
return pieLayout(data);
}, [data, series]);
const renderSeries = react.useCallback(
({ chartWidth, chartHeight }) => {
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: newId,
data: internalData,
height: chartHeight,
width: chartWidth,
displayAllLabels
}
);
},
[displayAllLabels, internalData, newId, series]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: false,
yAxisVisible: false,
center: true,
className: classNames(className),
children: renderSeries
}
);
};
const DEFAULT_COLOR = "rgba(255, 255, 255, 0.2)";
const LABEL_PADDING_PERCENT = 0.1;
const JUSTIFICATION = {
justify: d3Sankey.sankeyJustify,
center: d3Sankey.sankeyCenter,
left: d3Sankey.sankeyLeft,
right: d3Sankey.sankeyRight
};
const Sankey = ({
width,
height,
margins,
className,
animated = true,
links,
justification = "justify",
nodeWidth = 15,
nodePadding = 10,
labelPosition = "inside",
nodeSort,
colorScheme,
nodes,
containerClassName,
...rest
}) => {
const id = reablocks.useId(rest.id);
const [activeNodes, setActiveNodes] = react.useState([]);
const [activeLinks, setActiveLinks] = react.useState([]);
const getNodeColor = react.useCallback(
(node2, index) => {
if (colorScheme) {
return getColor({
data: nodes,
colorScheme,
point: nodes[index],
index
});
} else {
return node2.props.color;
}
},
[colorScheme, nodes]
);
const onNodeActive = react.useCallback((node2) => {
const activeNodes2 = [node2];
const activeLinks2 = [];
if (node2.sourceLinks) {
activeLinks2.push(...node2.sourceLinks);
node2.sourceLinks.forEach((sourceLink) => {
const sourceLinkTarget = sourceLink.target;
if (sourceLinkTarget.index !== node2.index) {
activeNodes2.push(sourceLinkTarget);
}
});
}
if (node2.targetLinks) {
activeLinks2.push(...node2.targetLinks);
node2.targetLinks.forEach((targetLink) => {
const targetLinkSource = targetLink.source;
if (targetLinkSource.index !== node2.index) {
activeNodes2.push(targetLinkSource);
}
});
}
setActiveNodes(activeNodes2);
setActiveLinks(activeLinks2);
}, []);
const onLinkActive = react.useCallback((link2) => {
const activeNodes2 = [
link2.source,
link2.target
];
const activeLinks2 = [link2];
setActiveNodes(activeNodes2);
setActiveLinks(activeLinks2);
}, []);
const onInactive = react.useCallback(() => {
setActiveNodes([]);
setActiveLinks([]);
}, []);
const nodeMap = react.useMemo(() => {
const nodeMap2 = /* @__PURE__ */ new Map();
nodes.forEach((node2) => node2 && nodeMap2.set(node2.props.title, node2));
return nodeMap2;
}, [nodes]);
const renderNode = react.useCallback(
(computedNode, index, chartWidth, node2) => {
const active = activeNodes.some(
(node22) => node22.index === computedNode.index
);
const disabled = activeNodes.length > 0 && !active;
const labelPadding = labelPosition === "outside" ? LABEL_PADDING_PERCENT : 0;
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: node2,
active,
animated,
disabled,
chartWidth,
onMouseEnter: () => onNodeActive(computedNode),
onMouseLeave: () => onInactive(),
labelPosition,
labelPadding,
...computedNode
},
`node-${index}`
);
},
[activeNodes, animated, onInactive, onNodeActive, labelPosition]
);
const renderLink = react.useCallback(
(computedLink, index) => {
const active = activeLinks.some(
(link2) => link2.index === computedLink.index
);
const disabled = activeLinks.length > 0 && !active;
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: links[index],
active,
animated,
chartId: `sankey-${id}`,
disabled,
...computedLink,
onMouseEnter: () => onLinkActive(computedLink),
onMouseLeave: () => onInactive()
},
`link-${index}`
);
},
[activeLinks, id, animated, links, onInactive, onLinkActive]
);
const getNodesAndLinks = react.useCallback(
(chartWidth, chartHeight) => {
const labelPadding = labelPosition === "outside" ? LABEL_PADDING_PERCENT : 0;
const padding = labelPadding * chartWidth;
const sankeyChart = d3Sankey.sankey().extent([
[1 + padding, 1],
[chartWidth - padding, chartHeight]
]).nodeWidth(nodeWidth).nodePadding(nodePadding).nodeSort(nodeSort).nodeAlign(JUSTIFICATION[justification]).nodeId((node2) => node2.id || node2.index);
const nodesCopy = nodes.map((node2, index) => ({
id: node2.props.id,
title: node2.props.title,
color: getNodeColor(node2, index)
}));
const linksCopy = links.map((link2) => ({
source: link2.props.source,
target: link2.props.target,
value: link2.props.value
}));
const { nodes: sankeyNodes, links: sankeyLinks } = sankeyChart({
nodes: nodesCopy,
links: linksCopy
});
return { sankeyNodes, sankeyLinks };
},
[
getNodeColor,
nodeSort,
justification,
links,
nodePadding,
nodeWidth,
nodes,
labelPosition
]
);
const renderChart = react.useCallback(
({ id: id2, chartWidth, chartHeight, chartSized }) => {
if (!chartSized) {
return null;
}
const { sankeyNodes, sankeyLinks } = getNodesAndLinks(
chartWidth,
chartHeight
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
sankeyLinks.map(
(link2, index) => renderLink(link2, index)
),
sankeyNodes.map(
(node2, index) => renderNode(node2, index, chartWidth, nodeMap.get(node2.title))
)
] }, "group");
},
[getNodesAndLinks, nodeMap, renderLink, renderNode]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
containerClassName,
height,
margins,
className,
children: renderChart
}
);
};
const label$1 = "_label_qd893_1";
const css$b = {
label: label$1
};
const LABEL_PADDING = 5;
const LABEL_TRUNCATE_LENGTH = 10;
const SankeyLabel = ({
active = false,
chartWidth,
className,
nodeWidth,
disabled,
fill = "#fff",
format,
node: node2,
position = "inside",
opacity = (active2, disabled2) => active2 ? 1 : disabled2 ? 0.2 : 0.9,
padding,
visible = true,
ellipsis = "auto",
labelPadding
}) => {
const x0 = (node2 == null ? void 0 : node2.x0) || 0;
const x1 = (node2 == null ? void 0 : node2.x1) || 0;
const y0 = (node2 == null ? void 0 : node2.y0) || 0;
const y1 = (node2 == null ? void 0 : node2.y1) || 0;
const paddedWidth = nodeWidth + LABEL_PADDING;
const width = chartWidth || 0;
const showRightSide = x0 < width / 2;
let x = showRightSide ? x1 + paddedWidth : x0 - paddedWidth;
const y = (y1 + y0) / 2;
let textAnchor = showRightSide ? "start" : "end";
if (position === "outside") {
textAnchor = showRightSide ? "end" : "start";
x = showRightSide ? x1 - paddedWidth : x0 + paddedWidth;
}
if (!visible || !node2) {
return null;
}
let truncatedTitle = "";
if (ellipsis === "auto") {
const avaialableWidth = showRightSide ? x : width - x;
truncatedTitle = ellipsize(
node2.title,
Math.min(LABEL_TRUNCATE_LENGTH, avaialableWidth / (labelPadding * 100))
);
} else if (ellipsis === "none") {
truncatedTitle = node2.title;
} else {
truncatedTitle = ellipsize(node2.title, ellipsis);
}
return /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
className: classNames(css$b.label, className),
x,
y,
dy: "0.35em",
textAnchor,
fill,
opacity: opacity(active, disabled),
style: { padding },
children: typeof format === "function" ? format({ x, y, textAnchor, node: node2 }) : truncatedTitle
}
);
};
const link = "_link_1oi50_1";
const tooltip$1 = "_tooltip_1oi50_7";
const tooltipLabel$1 = "_tooltipLabel_1oi50_11";
const tooltipValue$1 = "_tooltipValue_1oi50_18";
const css$a = {
link,
tooltip: tooltip$1,
tooltipLabel: tooltipLabel$1,
tooltipValue: tooltipValue$1
};
const SankeyLink = ({
gradient: gradient2 = true,
index,
source,
target,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(reablocks.Tooltip, { theme: tooltipTheme, followCursor: true, modifiers: [dom.offset(5)] }),
chartId,
value: value2,
active = false,
animated = true,
className,
disabled = false,
opacity = (active2, disabled2) => active2 ? 0.5 : disabled2 ? 0.1 : 0.35,
style,
width = 0,
color,
y0,
y1,
onClick,
onMouseEnter,
onMouseLeave
}) => {
var _a;
const linkSource = source;
const linkTarget = target;
const [hovered, setHovered] = react.useState(false);
const linkRef = react.useRef(null);
const getLink = react.useCallback(() => {
return { index, y0, y1, value: value2, width, source, target };
}, [index, source, target, value2, width, y0, y1]);
const stroke = react.useMemo(() => {
if (gradient2) {
return `url(#${chartId}-gradient-${index})`;
} else if (color) {
return color;
}
return DEFAULT_COLOR;
}, [chartId, gradient2, index, color]);
const enterProps = react.useMemo(() => {
const path2 = d3Sankey.sankeyLinkHorizontal();
const d = path2(getLink());
const strokeWidth = Math.max(1, width);
return { d, strokeWidth };
}, [getLink, width]);
const exitProps = react.useMemo(() => {
const path2 = d3Sankey.sankeyLinkHorizontal();
const d = path2({ ...getLink(), width: 0 });
return { d, strokeWidth: 0 };
}, [getLink]);
const renderTooltipContent = react.useCallback(() => {
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css$a.tooltip, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$a.tooltipLabel, children: `${source.title} → ${target.title}` }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$a.tooltipValue, children: formatValue(value2) })
] });
}, [source, target, value2]);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setHovered(true);
onMouseEnter == null ? void 0 : onMouseEnter(event);
},
onPointerOut: (event) => {
setHovered(false);
onMouseLeave == null ? void 0 : onMouseLeave(event);
}
});
const ariaLabelData = react.useMemo(
() => `${source.title} → ${target.title}: ${formatValue(value2)}`,
[source, target, value2]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
gradient2 && /* @__PURE__ */ jsxRuntime.jsxs(
"linearGradient",
{
id: `${chartId}-gradient-${index}`,
gradientUnits: "userSpaceOnUse",
x1: linkSource.x1,
x2: linkTarget.x0,
children: [
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: linkSource.color }),
/* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: linkTarget.color })
]
}
),
/* @__PURE__ */ jsxRuntime.jsx("g", { ref: linkRef, children: /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
className: classNames(css$a.link, className),
style,
initial: exitProps,
animate: enterProps,
exit: exitProps,
transition: {
duration: animated ? 0.5 : 0
},
stroke,
strokeOpacity: opacity(active, disabled),
onClick,
onPointerOver: pointerOver,
onPointerOut: pointerOut,
"aria-label": ariaLabelData,
role: "graphics-document"
},
`sankey-link-${enterProps.d}-${index}`
) }),
!((_a = tooltip2 == null ? void 0 : tooltip2.props) == null ? void 0 : _a.disabled) && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
content: renderTooltipContent,
element: tooltip2,
visible: hovered,
reference: linkRef
}
)
] });
};
const node = "_node_oqk6h_1";
const tooltip = "_tooltip_oqk6h_5";
const tooltipLabel = "_tooltipLabel_oqk6h_10";
const tooltipValue = "_tooltipValue_oqk6h_17";
const css$9 = {
node,
tooltip,
tooltipLabel,
tooltipValue
};
const SankeyNode = ({
active = false,
animated = true,
chartWidth,
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(SankeyLabel, {}),
labelPosition,
labelPadding,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(reablocks.Tooltip, { theme: tooltipTheme, followCursor: true, modifiers: [dom.offset(5)] }),
title,
value: value2,
className,
color = DEFAULT_COLOR,
disabled = false,
index,
opacity = (active2, disabled2) => active2 ? 1 : disabled2 ? 0.2 : 0.9,
style,
width,
x0,
x1,
y0,
y1,
id,
sourceLinks,
targetLinks,
onClick,
onMouseEnter,
onMouseLeave
}) => {
var _a;
const node2 = {
id,
title,
color,
sourceLinks,
targetLinks,
value: value2,
index,
x0,
x1,
y0,
y1
};
const nodeWidth = width || (x1 && x0 && x1 - x0 > 0 ? x1 - x0 : 0);
const nodeHeight = y1 && y0 && y1 - y0 > 0 ? y1 - y0 : 0;
const [hovered, setHovered] = react.useState(false);
const rectRef = react.useRef(null);
const renderTooltipContent = react.useCallback(() => {
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css$9.tooltip, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$9.tooltipLabel, children: title }),
/* @__PURE__ */ jsxRuntime.jsx("div", { className: css$9.tooltipValue, children: formatValue(value2) })
] });
}, [title, value2]);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setHovered(true);
onMouseEnter == null ? void 0 : onMouseEnter(event);
},
onPointerOut: (event) => {
setHovered(false);
onMouseLeave == null ? void 0 : onMouseLeave(event);
}
});
const ariaLabelData = react.useMemo(
() => `${title}: ${formatValue(value2)}`,
[title, value2]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.g,
{
ref: rectRef,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
className: classNames(css$9.node, className),
fillOpacity: opacity(active, disabled),
style,
width: nodeWidth,
height: nodeHeight,
fill: color,
initial: {
opacity: 0,
attrX: x0,
attrY: y0
},
animate: {
opacity: 1,
attrX: x0,
attrY: y0
},
exit: {
opacity: 0,
attrX: x0,
attrY: y0
},
transition: {
duration: animated ? 0.1 : 0
},
onClick,
onPointerOver: pointerOver,
onPointerOut: pointerOut
},
`sankey-node-${x0}-${x1}-${y0}-${y1}-${index}`
)
}
),
label2 !== null && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
active,
element: label2,
disabled,
chartWidth,
nodeWidth,
node: node2,
position: labelPosition,
labelPadding
}
),
!((_a = tooltip2 == null ? void 0 : tooltip2.props) == null ? void 0 : _a.disabled) && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
content: renderTooltipContent,
element: tooltip2,
visible: hovered,
reference: rectRef
}
)
] });
};
const SparklineChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
LineChart,
{
gridlines: null,
series: /* @__PURE__ */ jsxRuntime.jsx(
AreaSeries,
{
symbols: /* @__PURE__ */ jsxRuntime.jsx(PointSeries, { show: "hover" }),
interpolation: "smooth",
markLine: null,
area: null,
line: /* @__PURE__ */ jsxRuntime.jsx(Line, { strokeWidth: 2 })
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
scaled: true,
type: "value",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickSeries, { line: null, label: null })
}
),
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "time",
scaled: true,
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { line: null, label: null })
}
),
...props
}
);
const AreaSparklineChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
AreaChart,
{
gridlines: null,
series: /* @__PURE__ */ jsxRuntime.jsx(
AreaSeries,
{
symbols: /* @__PURE__ */ jsxRuntime.jsx(PointSeries, { show: "hover" }),
interpolation: "smooth",
markLine: null,
area: /* @__PURE__ */ jsxRuntime.jsx(
Area,
{
mask: /* @__PURE__ */ jsxRuntime.jsx(Stripes, {}),
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "10%", stopOpacity: 0 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "80%", stopOpacity: 1 }, "stop")
]
}
)
}
),
line: /* @__PURE__ */ jsxRuntime.jsx(Line, { strokeWidth: 3 })
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
scaled: true,
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickSeries, { line: null, label: null })
}
),
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "time",
scaled: true,
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { line: null, label: null })
}
),
...props
}
);
const BarSparklineChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
BarChart,
{
gridlines: null,
series: /* @__PURE__ */ jsxRuntime.jsx(BarSeries, { colorScheme: schemes.cybertron[0] }),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickSeries, { line: null, label: null })
}
),
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { line: null, label: null })
}
),
...props
}
);
const SonarChart = (props) => /* @__PURE__ */ jsxRuntime.jsx(
StackedBarChart,
{
...props,
margins: 0,
gridlines: null,
series: /* @__PURE__ */ jsxRuntime.jsx(
StackedBarSeries,
{
type: "stackedDiverging",
colorScheme: "rgb(17, 207, 247)",
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
TooltipArea,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
followCursor: true,
modifiers: [dom.offset(5)],
content: (data, color) => /* @__PURE__ */ jsxRuntime.jsx(
TooltipTemplate,
{
color,
value: {
x: formatValue(data.x),
y: `${formatValue(Math.abs(data.data[0].y))}`
}
}
)
}
)
}
),
bar: [
/* @__PURE__ */ react.createElement(
Bar,
{
...BAR_DEFAULT_PROPS,
key: "first",
width: 1,
rangeLines: null,
minHeight: 1,
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "5%", stopOpacity: 0.7 }, "start"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "90%", stopOpacity: 1 }, "stop")
]
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Bar,
{
width: 1,
rangeLines: null,
minHeight: 1,
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "5%", stopOpacity: 1 }, "stop"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "90%", stopOpacity: 0.7 }, "start")
]
}
)
},
"second"
)
]
}
),
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "value",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickSeries, { line: null, label: null })
}
),
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(LinearXAxisTickSeries, { line: null, label: null })
}
)
}
);
const RadialArea = ({
id,
data,
className,
yScale,
color,
animated,
index,
outerRadius,
xScale,
innerRadius,
interpolation,
gradient: gradient2 = /* @__PURE__ */ jsxRuntime.jsx(RadialGradient, {}),
isClosedCurve = true
}) => {
const transition = react.useMemo(
() => animated ? {
...DEFAULT_TRANSITION,
delay: index * 0.05
} : {
type: false,
delay: 0
},
[animated, index]
);
const getFill = react.useCallback(
(c) => {
if (!gradient2) {
return c;
}
return `url(#${id}-gradient)`;
},
[id, gradient2]
);
const getPath = react.useCallback(
(d) => {
const curve = interpolation === "smooth" ? isClosedCurve ? d3Shape.curveCardinalClosed : d3Shape.curveCardinal : isClosedCurve ? d3Shape.curveLinearClosed : d3Shape.curveLinear;
const radialFn = d3Shape.radialArea().angle((dd) => xScale(dd.x)).innerRadius((_) => innerRadius).outerRadius((d2) => yScale(d2.y)).curve(curve);
return radialFn(d);
},
[interpolation, isClosedCurve, xScale, innerRadius, yScale]
);
const enter = react.useMemo(
() => ({
d: getPath(data),
opacity: 1
}),
[data, getPath]
);
const exit = react.useMemo(() => {
const [yStart] = yScale.domain();
return {
d: getPath(data.map((d) => ({ ...d, y: yStart }))),
opacity: 0
};
}, [data, getPath, yScale]);
const fill = color(data, 0);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
MotionPath,
{
custom: {
enter,
exit
},
transition,
pointerEvents: "none",
className,
fill: getFill(color)
}
),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `${id}-gradient`,
radius: outerRadius,
color: fill
}
)
] });
};
const RadialLine = ({
xScale,
yScale,
className,
index,
hasArea,
color,
data,
interpolation,
strokeWidth = 2,
animated = true,
isClosedCurve = true
}) => {
const fill = color(data, index);
const getPath = react.useCallback(
(preData) => {
const curve = interpolation === "smooth" ? isClosedCurve ? d3Shape.curveCardinalClosed : d3Shape.curveCardinal : isClosedCurve ? d3Shape.curveLinearClosed : d3Shape.curveLinear;
const radialFn = d3Shape.radialLine().angle((d) => xScale(d.x)).radius((d) => yScale(d.y)).curve(curve);
return radialFn(preData);
},
[interpolation, isClosedCurve, xScale, yScale]
);
const transition = react.useMemo(
() => animated ? {
...DEFAULT_TRANSITION,
delay: hasArea ? 0 : index * 0.05
} : {
type: false,
delay: 0
},
[animated, index, hasArea]
);
const enter = react.useMemo(
() => ({
d: getPath(data),
opacity: 1
}),
[data, getPath]
);
const exit = react.useMemo(() => {
const [yStart] = yScale.domain();
return {
d: getPath(data.map((d) => ({ ...d, y: yStart }))),
opacity: 0
};
}, [data, yScale, getPath]);
return /* @__PURE__ */ jsxRuntime.jsx(
MotionPath,
{
custom: {
enter,
exit
},
transition,
className,
pointerEvents: "none",
stroke: fill,
fill: "none",
strokeWidth
}
);
};
const RadialScatterPlot = ({
id,
width,
height,
margins,
className,
containerClassName,
innerRadius,
series,
axis,
data
}) => {
const getScales = react.useCallback(
(aggregatedData, outer, inner) => {
let xScale;
if ((axis == null ? void 0 : axis.props.type) === "category") {
const xDomain = uniqueBy(
aggregatedData,
(dd) => dd.x
);
xScale = d3Scale.scaleBand().range([0, 2 * Math.PI]).domain(xDomain);
} else {
const xDomain = getXDomain({ data: aggregatedData });
xScale = d3Scale.scaleTime().range([0, 2 * Math.PI]).domain(xDomain);
}
const yDomain = getYDomain({ data: aggregatedData, scaled: false });
const yScale = getRadialYScale(inner, outer, yDomain);
return {
yScale,
xScale
};
},
[]
);
const renderChart = react.useCallback(
(containerProps) => {
const { chartWidth, chartHeight, id: id2 } = containerProps;
const outerRadius = Math.min(chartWidth, chartHeight) / 2;
const aggregatedData = buildShallowChartData(data);
const { yScale, xScale } = getScales(
aggregatedData,
outerRadius,
innerRadius
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
axis && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
xScale,
height: chartHeight,
width: chartWidth,
innerRadius
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: id2,
data: aggregatedData,
xScale,
yScale
}
)
] });
},
[data, getScales, innerRadius, series, axis]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
containerClassName,
width,
height,
margins,
xAxisVisible: false,
yAxisVisible: false,
center: true,
className,
children: renderChart
}
);
};
const inactive = "_inactive_kwc4n_1";
const hidden = "_hidden_kwc4n_6";
const css$8 = {
inactive,
hidden
};
const RadialScatterPoint = (props) => {
const {
size,
data,
color,
index,
symbol: symbol2,
active,
tooltip: tooltip2,
yScale,
xScale,
animated,
className,
visible,
...rest
} = mergeDefaultProps(RADIAL_SCATTER_POINT_DEFAULT_PROPS, props);
const ref = react.useRef(null);
const [hovered, setHovered] = react.useState(false);
function onMouseEnter(event) {
setHovered(true);
rest.onMouseEnter({
value: data,
nativeEvent: event
});
}
function onMouseLeave(event) {
setHovered(false);
rest.onMouseLeave({
value: data,
nativeEvent: event
});
}
function onClick(event) {
rest.onClick({
value: data,
nativeEvent: event
});
}
function getTranslate(data2) {
const fn = d3Shape.radialLine().radius((d) => yScale(d.y)).angle((d) => xScale(d.x));
const path2 = fn([data2]);
if (path2) {
const [translateX, translateY] = path2.slice(1).slice(0, -1).split(",");
return {
translateX: parseFloat(translateX),
translateY: parseFloat(translateY)
};
}
}
function getTransition() {
if (animated) {
return {
...DEFAULT_TRANSITION,
delay: index * 5e-3
};
} else {
return {
type: false,
delay: 0
};
}
}
const fill = typeof color === "function" ? color(data, index) : color;
const transform = getTranslate(data);
const sizeVal = typeof size === "function" ? size(data) : size;
const transition = getTransition();
const [yStart] = yScale.domain();
const exitTransform = getTranslate({ ...data, y: yStart });
const ariaLabelData = react.useMemo(() => getAriaLabel(data), [data]);
const isVisible = visible ? visible == null ? void 0 : visible(data, index) : active;
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: { ...exitTransform, opacity: 0 },
animate: { ...transform, opacity: 1 },
exit: { ...exitTransform, opacity: 0 },
transition,
ref,
onMouseEnter,
onMouseLeave,
onClick,
className: classNames(className, {
[css$8.inactive]: !active,
[css$8.hidden]: !isVisible
}),
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: [
symbol2 && symbol2(data),
!symbol2 && /* @__PURE__ */ jsxRuntime.jsx("circle", { r: sizeVal, fill })
]
}
),
tooltip2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: hovered,
reference: ref,
value: data
}
)
] });
};
const RADIAL_SCATTER_POINT_DEFAULT_PROPS = {
size: 3,
color: schemes.cybertron[0],
tooltip: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
active: true,
onClick: () => void 0,
onMouseEnter: () => void 0,
onMouseLeave: () => void 0
};
const RadialScatterSeries = ({
data,
point: point2 = /* @__PURE__ */ jsxRuntime.jsx(RadialScatterPoint, {}),
xScale,
yScale,
animated = true,
activeIds,
show = true,
valueMarkers
}) => {
const pointProps = react.useMemo(
() => ({ ...RADIAL_SCATTER_POINT_DEFAULT_PROPS, ...(point2 == null ? void 0 : point2.props) ?? {} }),
[point2 == null ? void 0 : point2.props]
);
const [internalActiveIds, setInternalActiveIds] = react.useState(
activeIds
);
react.useEffect(() => {
setInternalActiveIds(activeIds || []);
}, [activeIds]);
const onMouseEnter = react.useCallback(
({ value: value2 }) => {
if (!activeIds) {
setInternalActiveIds([value2.id]);
}
},
[activeIds]
);
const onMouseLeave = react.useCallback(() => {
if (!activeIds) {
setInternalActiveIds([]);
}
}, [activeIds]);
const isVisible = react.useCallback(() => show, [show]);
const renderPoint = react.useCallback(
(d, index) => {
let dataId;
if (d.id) {
dataId = d.id;
} else {
console.warn(
"No 'id' property provided for scatter point; provide one via 'id'."
);
}
const key = safeIdentifier.identifier(`${dataId || index}`);
const active = !(internalActiveIds && internalActiveIds.length) || internalActiveIds.includes(dataId);
const pointVisible = pointProps == null ? void 0 : pointProps.visible;
return /* @__PURE__ */ react.createElement(
reablocks.CloneElement,
{
...pointVisible ? {} : { visible: isVisible },
element: point2,
key,
data: d,
index,
active,
xScale,
yScale,
animated,
onMouseEnter,
onMouseLeave
}
);
},
[
isVisible,
point2,
pointProps,
internalActiveIds,
xScale,
yScale,
animated,
onMouseEnter,
onMouseLeave
]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
value: yScale(marker2.props.value)
},
marker2.key
)) }),
[valueMarkers, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderValueMarkers(),
data.map(renderPoint)
] });
};
const RadialPointSeries = (props) => {
const { data, xScale, yScale, animated, color, activeValues, show, point: point2 } = {
...RADIAL_POINT_SERIES_DEFAULT_PROPS,
...props
};
const isVisible = react.useCallback(
(point22, index) => {
const isActive = activeValues && point22 && isEqual(activeValues.x, point22.x);
if (show === "hover") {
return isActive;
} else if (show === "first") {
if (activeValues) {
return isActive;
} else {
return index === 0;
}
} else if (show === "last") {
if (activeValues) {
return isActive;
} else {
return index === data.length - 1;
}
}
return Boolean(show);
},
[data, activeValues, show]
);
return /* @__PURE__ */ jsxRuntime.jsx(
RadialScatterSeries,
{
animated,
data,
xScale,
yScale,
point: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: point2,
color,
tooltip: null,
visible: isVisible
}
)
}
);
};
const RADIAL_POINT_SERIES_DEFAULT_PROPS = {
show: "hover",
point: /* @__PURE__ */ jsxRuntime.jsx(RadialScatterPoint, {})
};
const RadialAreaSeries = (props) => {
const {
area,
line: line2,
symbols,
tooltip: tooltip2,
xScale,
yScale,
data,
id,
animated,
width,
height,
innerRadius,
outerRadius,
type,
colorScheme,
interpolation,
startAngle,
endAngle,
isClosedCurve,
valueMarkers
} = mergeDefaultProps(RADIAL_AREA_SERIES_DEFAULT_PROPS, props);
const symbolsProps = react.useMemo(
() => ({
...RADIAL_POINT_SERIES_DEFAULT_PROPS,
...symbols == null ? void 0 : symbols.props
}),
[symbols]
);
const [activeValues, setActiveValues] = react.useState(null);
const isMulti = type === "grouped";
const getColorForPoint = react.useCallback(
(point2, index) => {
var _a;
const key = Array.isArray(point2) ? (_a = point2 == null ? void 0 : point2[0]) == null ? void 0 : _a.key : point2 == null ? void 0 : point2.key;
return getColor({
colorScheme,
data,
index,
point: point2,
key
});
},
[colorScheme, data]
);
const renderArea = react.useCallback(
(point2, index = 0) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
area && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: area,
id: `${id}-radial-area-${index}`,
xScale,
yScale,
animated,
color: getColorForPoint,
index,
data: point2,
interpolation,
outerRadius,
innerRadius,
isClosedCurve
}
),
line2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
xScale,
yScale,
hasArea: area !== null,
index,
animated,
interpolation,
color: getColorForPoint,
data: point2,
isClosedCurve
}
)
] }),
[
animated,
area,
getColorForPoint,
id,
innerRadius,
interpolation,
isClosedCurve,
line2,
outerRadius,
xScale,
yScale
]
);
const renderSymbols = react.useCallback(
(data2, index = 0) => {
const activeSymbols = symbols && symbolsProps.activeValues || activeValues;
const isAnimated = area !== void 0 && animated && !activeSymbols;
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: symbols,
activeValues,
xScale,
index,
yScale,
data: data2,
animated: isAnimated,
color: getColorForPoint
}
);
},
[
activeValues,
animated,
area,
getColorForPoint,
symbols,
symbolsProps,
xScale,
yScale
]
);
const renderSingleSeries = react.useCallback(
(points) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderArea(points),
symbols && renderSymbols(points)
] }),
[renderArea, renderSymbols, symbols]
);
const renderMultiSeries = react.useCallback(
(points) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
points.map((point2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderArea(point2.data, index) }, `${point2.key.toString()}`)).reverse(),
points.map((point2, index) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: renderSymbols(point2.data, index) }, `${point2.key.toString()}`)).reverse()
] }),
[renderArea, renderSymbols]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
value: yScale(marker2.props.value)
},
marker2.key
)) }),
[valueMarkers, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
xScale,
yScale,
data,
height,
width,
isRadial: true,
innerRadius,
outerRadius,
color: getColorForPoint,
onValueEnter: (event) => setActiveValues(event.value),
onValueLeave: () => setActiveValues(null),
startAngle,
endAngle,
children: /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${id}-path)`, children: [
isMulti && renderMultiSeries(data),
!isMulti && renderSingleSeries(data),
renderValueMarkers()
] })
}
);
};
const RADIAL_AREA_SERIES_DEFAULT_PROPS = {
colorScheme: schemes.cybertron,
interpolation: "smooth",
type: "standard",
animated: true,
area: /* @__PURE__ */ jsxRuntime.jsx(RadialArea, {}),
line: /* @__PURE__ */ jsxRuntime.jsx(RadialLine, {}),
symbols: /* @__PURE__ */ jsxRuntime.jsx(RadialPointSeries, {}),
tooltip: /* @__PURE__ */ jsxRuntime.jsx(TooltipArea, {}),
startAngle: 0,
endAngle: 2 * Math.PI,
isClosedCurve: true
};
const RadialAreaChart = ({
id,
width,
height,
className,
data,
containerClassName,
innerRadius = 0.1,
series = /* @__PURE__ */ jsxRuntime.jsx(RadialAreaSeries, {}),
axis = /* @__PURE__ */ jsxRuntime.jsx(RadialAxis, {}),
margins = 75,
startAngle = 0,
endAngle = 2 * Math.PI,
isClosedCurve = true
}) => {
const seriesProps = react.useMemo(
() => ({ ...RADIAL_AREA_SERIES_DEFAULT_PROPS, ...series.props }),
[series.props]
);
const axisProps = react.useMemo(
() => ({ ...RADIAL_AXIS_DEFAULT_PROPS, ...(axis == null ? void 0 : axis.props) ?? {} }),
[axis == null ? void 0 : axis.props]
);
const getXScale2 = react.useCallback(
(points) => {
const isFullCircle = Math.abs(endAngle - startAngle) >= 2 * Math.PI;
let xScale;
if (axisProps.type === "category") {
const isMultiSeries = seriesProps.type === "grouped";
let xDomain;
if (isMultiSeries) {
xDomain = uniqueBy(
points,
(dd) => dd.data,
(dd) => dd.x
);
} else {
xDomain = uniqueBy(
points,
(dd) => dd.x
);
}
if (isFullCircle) {
xScale = d3Scale.scaleBand().range([0, 2 * Math.PI]).domain(xDomain);
} else {
xScale = d3Scale.scalePoint().range([startAngle, endAngle]).domain(xDomain);
}
} else {
const xDomain = getXDomain({ data: points });
xScale = d3Scale.scaleTime().range([startAngle, endAngle]).domain(xDomain);
}
return xScale;
},
[axisProps.type, endAngle, seriesProps.type, startAngle]
);
const getScales = react.useCallback(
(preData, outerRadius, innerRadius2) => {
const isMultiSeries = seriesProps.type === "grouped";
let d;
if (isMultiSeries) {
d = buildNestedChartData(preData, true);
} else {
d = buildShallowChartData(preData);
}
const xScale = getXScale2(d);
const yDomain = getYDomain({ data: d, scaled: false });
const yScale = getRadialYScale(innerRadius2, outerRadius, yDomain);
return {
yScale,
xScale,
result: d
};
},
[getXScale2, seriesProps.type]
);
const renderChart = react.useCallback(
(containerProps) => {
const { chartWidth, chartHeight, id: id2 } = containerProps;
const outerRadius = Math.min(chartWidth, chartHeight) / 2;
const { yScale, xScale, result } = getScales(
data,
outerRadius,
innerRadius
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
axis && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
xScale,
height: chartHeight,
width: chartWidth,
innerRadius,
startAngle,
endAngle
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: id2,
data: result,
xScale,
yScale,
height: chartHeight,
width: chartWidth,
outerRadius,
innerRadius,
startAngle,
endAngle,
isClosedCurve
}
)
] });
},
[
getScales,
data,
innerRadius,
axis,
startAngle,
endAngle,
series,
isClosedCurve
]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
containerClassName,
margins,
xAxisVisible: false,
yAxisVisible: false,
center: true,
className,
children: renderChart
}
);
};
const pi = Math.PI, tau = 2 * pi, epsilon = 1e-6, tauEpsilon = tau - epsilon;
function append(strings) {
this._ += strings[0];
for (let i = 1, n = strings.length; i < n; ++i) {
this._ += arguments[i] + strings[i];
}
}
function appendRound(digits) {
let d = Math.floor(digits);
if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
if (d > 15) return append;
const k = 10 ** d;
return function(strings) {
this._ += strings[0];
for (let i = 1, n = strings.length; i < n; ++i) {
this._ += Math.round(arguments[i] * k) / k + strings[i];
}
};
}
class Path {
constructor(digits) {
this._x0 = this._y0 = // start of current subpath
this._x1 = this._y1 = null;
this._ = "";
this._append = digits == null ? append : appendRound(digits);
}
moveTo(x, y) {
this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
}
closePath() {
if (this._x1 !== null) {
this._x1 = this._x0, this._y1 = this._y0;
this._append`Z`;
}
}
lineTo(x, y) {
this._append`L${this._x1 = +x},${this._y1 = +y}`;
}
quadraticCurveTo(x1, y1, x, y) {
this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
}
bezierCurveTo(x1, y1, x2, y2, x, y) {
this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
}
arcTo(x1, y1, x2, y2, r) {
x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
if (r < 0) throw new Error(`negative radius: ${r}`);
let x0 = this._x1, y0 = this._y1, x21 = x2 - x1, y21 = y2 - y1, x01 = x0 - x1, y01 = y0 - y1, l01_2 = x01 * x01 + y01 * y01;
if (this._x1 === null) {
this._append`M${this._x1 = x1},${this._y1 = y1}`;
} else if (!(l01_2 > epsilon)) ;
else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon) || !r) {
this._append`L${this._x1 = x1},${this._y1 = y1}`;
} else {
let x20 = x2 - x0, y20 = y2 - y0, l21_2 = x21 * x21 + y21 * y21, l20_2 = x20 * x20 + y20 * y20, l21 = Math.sqrt(l21_2), l01 = Math.sqrt(l01_2), l = r * Math.tan((pi - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2), t01 = l / l01, t21 = l / l21;
if (Math.abs(t01 - 1) > epsilon) {
this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
}
this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
}
}
arc(x, y, r, a0, a1, ccw) {
x = +x, y = +y, r = +r, ccw = !!ccw;
if (r < 0) throw new Error(`negative radius: ${r}`);
let dx = r * Math.cos(a0), dy = r * Math.sin(a0), x0 = x + dx, y0 = y + dy, cw = 1 ^ ccw, da = ccw ? a0 - a1 : a1 - a0;
if (this._x1 === null) {
this._append`M${x0},${y0}`;
} else if (Math.abs(this._x1 - x0) > epsilon || Math.abs(this._y1 - y0) > epsilon) {
this._append`L${x0},${y0}`;
}
if (!r) return;
if (da < 0) da = da % tau + tau;
if (da > tauEpsilon) {
this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
} else if (da > epsilon) {
this._append`A${r},${r},0,${+(da >= pi)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
}
}
rect(x, y, w, h) {
this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
}
toString() {
return this._;
}
}
function path() {
return new Path();
}
path.prototype = Path.prototype;
const MotionBar = ({ custom, transition, arc, ...rest }) => {
const d = react$1.useMotionValue("");
const currentYRef = react.useRef(custom.exit.y);
const spring = react$1.useSpring(0, DEFAULT_TRANSITION);
react.useEffect(() => {
const interpolator = d3Interpolate.interpolate(currentYRef.current, custom.enter.y);
const prevSpring = spring.get();
let timeoutId;
if (transition == null ? void 0 : transition.delay) {
timeoutId = setTimeout(() => {
spring.set(prevSpring + 1);
}, transition.delay * 1e3);
} else {
spring.set(prevSpring + 1);
}
const unsubscribe = spring.onChange((v) => {
currentYRef.current = interpolator(v - prevSpring);
d.set(arc({ ...custom.enter, y: currentYRef.current }));
});
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
unsubscribe();
};
}, [arc, custom.enter, d, spring, transition.delay]);
const { d: enterD, ...enterRest } = custom.enter;
const { d: exitD, ...exitRest } = custom.exit;
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
...rest,
initial: exitRest,
exit: exitRest,
animate: enterRest,
transition,
d: transition.type !== false ? d : enterD,
tabIndex: 0
}
);
};
const RadialGuideBar = ({
active,
path: path2,
fill = "#eee",
opacity = 0.2
}) => /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
d: path2,
fill,
pointerEvents: "none",
initial: "hidden",
animate: active ? "visible" : "hidden",
variants: {
hidden: { opacity: 0 },
visible: { opacity }
}
}
);
const RadialBar = ({
animated,
innerRadius,
xScale,
yScale,
curved = false,
id,
gradient: gradient2 = true,
barCount,
innerBarCount,
groupIndex,
className,
data,
active,
guide = /* @__PURE__ */ jsxRuntime.jsx(RadialGuideBar, {}),
index,
color,
onClick = () => void 0,
onMouseEnter = () => void 0,
onMouseLeave = () => void 0
}) => {
const previousEnter = react.useRef(null);
const fill = color(data, index);
const currentColorShade = active ? chroma(fill).brighten(0.5) : fill;
const transition = react.useMemo(() => {
if (animated) {
return {
...DEFAULT_TRANSITION,
delay: index / barCount * 0.9
};
} else {
return {
type: false,
delay: 0
};
}
}, [animated, barCount, index]);
const getFill = react.useCallback(
(color2) => {
if (!gradient2) {
return color2;
}
return `url(#${id}-gradient)`;
},
[gradient2, id]
);
const getArc = react.useCallback(
(data2) => {
const outerRadius = yScale(data2.y);
if (curved) {
const startAngle = xScale(data2.x);
const endAngle = startAngle + xScale.bandwidth();
const arcFn = d3Shape.arc().innerRadius(innerRadius).outerRadius(outerRadius).startAngle(startAngle).endAngle(endAngle).padAngle(0.01).padRadius(innerRadius);
return arcFn(data2);
} else {
const isMultiSeries = groupIndex !== void 0;
const xScaleDomain = xScale.domain();
const xScaleRange = xScale.range();
const isFullCircle = Math.abs(xScaleRange[1] - xScaleRange[0]) >= 2 * Math.PI;
let xScaleBandwidth;
let rotateMid;
let startAngle;
let endAngle;
if (isFullCircle) {
xScaleBandwidth = xScale.bandwidth();
rotateMid = isMultiSeries && xScaleBandwidth ? xScaleBandwidth / 2 : 0;
startAngle = xScale(data2.x) - Math.PI * 0.5 - rotateMid;
endAngle = startAngle + xScaleBandwidth;
} else {
xScaleBandwidth = d3Scale.scaleBand().domain(xScaleDomain).range(xScaleRange).bandwidth();
rotateMid = isMultiSeries && xScaleBandwidth ? xScaleBandwidth / 2 : 0;
if (index === 0) {
startAngle = xScale(data2.x) - Math.PI * 0.5;
endAngle = startAngle + xScaleBandwidth - rotateMid;
} else if (index === barCount - 1) {
endAngle = xScaleRange[1] - Math.PI * 0.5;
startAngle = endAngle - xScaleBandwidth + rotateMid;
} else {
startAngle = xScale(data2.x) - Math.PI * 0.5 - rotateMid;
endAngle = startAngle + xScaleBandwidth;
}
}
const innerAngleDistance = endAngle - startAngle;
const arcLength = innerRadius * innerAngleDistance;
const outerAngleDistance = arcLength / outerRadius;
const halfAngleDistanceDelta = (innerAngleDistance - outerAngleDistance) / 2;
const innerDiff = innerAngleDistance / innerBarCount;
const innerStart = isMultiSeries ? startAngle + groupIndex * innerDiff : startAngle;
const innerEnd = isMultiSeries ? innerStart + innerDiff : endAngle;
const outerDiff = outerAngleDistance / innerBarCount;
const halfAngleDiffDistanceDelta = isMultiSeries ? (innerDiff - outerDiff) / 2 : halfAngleDistanceDelta;
const pathFn = path();
pathFn.arc(0, 0, innerRadius, innerStart, innerEnd);
pathFn.arc(
0,
0,
outerRadius,
innerEnd - halfAngleDiffDistanceDelta,
innerStart + halfAngleDiffDistanceDelta,
true
);
return pathFn.toString();
}
},
[
barCount,
curved,
groupIndex,
index,
innerBarCount,
innerRadius,
xScale,
yScale
]
);
const renderBar = react.useCallback(
(color2) => {
const fill2 = getFill(color2);
const prev = previousEnter.current ? { ...previousEnter.current } : void 0;
previousEnter.current = { ...data };
const [yStart, yEnd] = yScale.domain();
const exit = {
...data,
y: yStart
};
const guidePath = getArc({
...data,
y: yEnd
});
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
guide && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: guide,
active,
path: guidePath
}
),
/* @__PURE__ */ jsxRuntime.jsx(
MotionBar,
{
arc: getArc,
custom: {
enter: data,
exit,
previousEnter: prev
},
transition,
fill: fill2,
className,
onMouseEnter: (event) => onMouseEnter == null ? void 0 : onMouseEnter({
value: data,
nativeEvent: event
}),
onMouseLeave: (event) => onMouseLeave == null ? void 0 : onMouseLeave({
value: data,
nativeEvent: event
}),
onClick: (event) => onClick == null ? void 0 : onClick({
value: data,
nativeEvent: event
})
}
)
] });
},
[
active,
className,
data,
getArc,
getFill,
guide,
onClick,
onMouseEnter,
onMouseLeave,
transition,
yScale
]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
renderBar(currentColorShade),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(Gradient, { id: `${id}-gradient`, color: currentColorShade })
] });
};
const RadialBarSeries = ({
data,
id,
innerRadius,
outerRadius,
xScale,
yScale,
height,
width,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(TooltipArea, { tooltip: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, { followCursor: true }) }),
colorScheme = schemes.cybertron[0],
bar: bar2 = /* @__PURE__ */ jsxRuntime.jsx(RadialBar, {}),
animated = true,
startAngle = 0,
endAngle = 2 * Math.PI,
type = "standard",
valueMarkers
}) => {
const [activeValues, setActiveValues] = react.useState(null);
const isMultiSeries = react.useMemo(() => type === "grouped", [type]);
const renderBar = react.useCallback(
(point2, innerBarCount, index, barCount, groupIndex) => {
const active = activeValues && data && isEqual(activeValues.x, point2.x);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: bar2,
id: `radialbar-${id}-${index}`,
index,
data: point2,
xScale,
active,
yScale,
innerRadius,
color: (point22) => getColor({ data, point: point22, index: 0, colorScheme }),
barCount,
innerBarCount,
groupIndex,
animated,
startAngle,
endAngle
}
) }, index);
},
[
activeValues,
animated,
bar2,
colorScheme,
data,
endAngle,
id,
innerRadius,
startAngle,
xScale,
yScale
]
);
const renderBarGroup = react.useCallback(
(data2, innerBarCount, barCount, groupIndex) => {
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data2.map(
(barData, barIndex) => renderBar(barData, innerBarCount, barIndex, barCount, groupIndex)
) });
},
[renderBar]
);
const renderValueMarkers = react.useCallback(
() => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (valueMarkers == null ? void 0 : valueMarkers.length) && valueMarkers.map((marker2) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: marker2,
value: yScale(marker2.props.value)
},
marker2.key
)) }),
[valueMarkers, yScale]
);
return /* @__PURE__ */ jsxRuntime.jsxs(
reablocks.CloneElement,
{
element: tooltip2,
xScale,
yScale,
data,
height,
width,
isRadial: true,
innerRadius,
outerRadius,
onValueEnter: (event) => setActiveValues(event.value),
onValueLeave: () => setActiveValues(null),
color: (point2, index) => getColor({ data, point: point2, index, colorScheme }),
startAngle,
endAngle,
children: [
isMultiSeries ? data.map((groupData, index) => /* @__PURE__ */ jsxRuntime.jsx("g", { children: renderBarGroup(
groupData.data,
data.length,
groupData.data.length,
index
) }, `bar-group-${index}`)) : renderBarGroup(
data,
1,
data.length
),
renderValueMarkers()
]
}
);
};
const RadialBarChart = ({
id,
width,
height,
margins = 75,
className,
containerClassName,
data,
innerRadius = 10,
series = /* @__PURE__ */ jsxRuntime.jsx(RadialBarSeries, {}),
axis = /* @__PURE__ */ jsxRuntime.jsx(RadialAxis, {}),
startAngle = 0,
endAngle = 2 * Math.PI
}) => {
const axisProps = react.useMemo(
() => ({ ...RADIAL_AXIS_DEFAULT_PROPS, ...(axis == null ? void 0 : axis.props) ?? {} }),
[axis == null ? void 0 : axis.props]
);
const seriesProps = react.useMemo(
() => ({ ...RADIAL_AXIS_DEFAULT_PROPS, ...(series == null ? void 0 : series.props) ?? {} }),
[series == null ? void 0 : series.props]
);
const getXScale2 = react.useCallback(
(points) => {
const isFullCircle = Math.abs(endAngle - startAngle) >= 2 * Math.PI;
let xScale;
if (axisProps.type === "category") {
const isMultiSeries = seriesProps.type === "grouped";
let xDomain;
if (isMultiSeries) {
xDomain = uniqueBy(
points,
(dd) => dd.data,
(dd) => dd.x
);
} else {
xDomain = uniqueBy(
points,
(dd) => dd.x
);
}
if (isFullCircle) {
xScale = d3Scale.scaleBand().range([0, 2 * Math.PI]).domain(xDomain);
} else {
xScale = d3Scale.scalePoint().range([startAngle, endAngle]).domain(xDomain);
}
} else {
const xDomain = uniqueBy(points, (d) => d.x);
xScale = d3Scale.scaleBand().range([startAngle, endAngle]).domain(xDomain);
}
return xScale;
},
[axisProps.type, endAngle, seriesProps.type, startAngle]
);
const getScales = react.useCallback(
(preData, innerRadius2, outerRadius) => {
const isMultiSeries = seriesProps.type === "grouped";
let newData;
if (isMultiSeries) {
newData = buildNestedChartData(preData, true);
} else {
newData = buildShallowChartData(preData);
}
const yDomain = getYDomain({ data: newData, scaled: false });
const yScale = getRadialYScale(innerRadius2, outerRadius, yDomain);
const xScale = getXScale2(newData);
return {
xScale,
yScale,
newData
};
},
[getXScale2, seriesProps.type]
);
const renderChart = react.useCallback(
({ chartWidth, chartHeight, id: id2 }) => {
const outerRadius = Math.min(chartWidth, chartHeight) / 2;
const { yScale, xScale, newData } = getScales(
data,
innerRadius,
outerRadius
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
axis && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
xScale,
height: chartHeight,
width: chartWidth,
innerRadius,
startAngle,
endAngle
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: id2,
data: newData,
height: chartHeight,
width: chartWidth,
xScale,
yScale,
innerRadius,
outerRadius,
startAngle,
endAngle
}
)
] });
},
[axis, data, endAngle, getScales, innerRadius, series, startAngle]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
xAxisVisible: false,
yAxisVisible: false,
center: true,
className,
containerClassName,
children: renderChart
}
);
};
const RadialGaugeArc = ({
data,
gradient: gradient2,
startAngle,
id,
endAngle,
innerRadius,
outerRadius,
cornerRadius = 0,
padAngle = 0,
color = "#353d44",
animated = true,
disabled = false,
fill,
onClick,
onMouseEnter,
onMouseLeave,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {})
}) => {
const arcGenerator = react.useMemo(() => {
return d3Shape.arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius);
}, [innerRadius, outerRadius, cornerRadius]);
const arcElement = react.useMemo(() => {
const arcData = {
// @ts-ignore Data must be passed
data: data || {},
startAngle,
endAngle,
padAngle
};
return /* @__PURE__ */ jsxRuntime.jsx(
PieArc,
{
id,
arc: arcGenerator,
data: arcData,
animated,
color,
gradient: gradient2,
disabled,
tooltip: tooltip2,
onClick,
onMouseEnter,
onMouseLeave
}
);
}, [
id,
arcGenerator,
startAngle,
endAngle,
padAngle,
data,
animated,
color,
gradient2,
disabled,
tooltip2,
onClick,
onMouseEnter,
onMouseLeave
]);
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
fill && /* @__PURE__ */ jsxRuntime.jsx("circle", { fill, r: outerRadius }),
arcElement
] });
};
const valueLabel$2 = "_valueLabel_1eyd5_1";
const css$7 = {
valueLabel: valueLabel$2
};
const RadialGaugeLabel = ({
data,
className,
offset,
onClick = () => void 0
}) => {
const label2 = formatValue(data.key);
return /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
x: "0",
y: offset,
textAnchor: "middle",
alignmentBaseline: "text-after-edge",
onClick: (nativeEvent) => onClick({ data, nativeEvent }),
className: classNames(className, css$7.valueLabel),
children: label2
}
);
};
const valueLabel$1 = "_valueLabel_1h164_1";
const css$6 = {
valueLabel: valueLabel$1
};
const RadialGaugeValueLabel = ({
data,
className
}) => {
const ref = useCount({
to: data.data
});
return /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
dy: "-0.5em",
x: "0",
y: "15",
textAnchor: "middle",
className: classNames(className, css$6.valueLabel),
ref
}
);
};
const RadialGaugeOuterArc = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeArc, { animated: false, disabled: true, ...props });
const RadialGaugeSeries = ({
data,
scale,
startAngle,
endAngle,
arcWidth = 5,
outerArc = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeOuterArc, {}),
innerArc = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeArc, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeLabel, {}),
valueLabel: valueLabel2 = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeValueLabel, {}),
colorScheme = ["#00ECB1"],
id,
padding = 20,
minGaugeWidth = 50,
...props
}) => {
const { columns, width, height, xScale, yScale } = react.useMemo(() => {
let rows = 1;
let columns2 = data.length;
if (props.width / data.length < minGaugeWidth) {
while (props.width / columns2 < minGaugeWidth) {
rows += 1;
columns2 = Math.ceil(data.length / rows);
}
}
const xScale2 = d3Scale.scaleBand();
xScale2.domain(d3Array.range(columns2));
xScale2.rangeRound([0, props.width], 0.1);
const yScale2 = d3Scale.scaleBand();
yScale2.domain(d3Array.range(rows));
yScale2.rangeRound([0, props.height], 0.1);
return {
columns: columns2,
xScale: xScale2,
yScale: yScale2,
width: xScale2.bandwidth(),
height: yScale2.bandwidth()
};
}, [data.length, minGaugeWidth, props.height, props.width]);
const renderGauge = react.useCallback(
(point2, index) => {
var _a;
const dataEndAngle = scale(point2.data);
const outerRadius = d3Array.min([width - padding * 2, height - padding * 2]) / 2;
const innerRadius = outerRadius - arcWidth;
const labelOffset = height / 2;
const x = xScale(index % columns);
const y = yScale(Math.floor(index / columns));
const xOffset = x + width / 2;
const yOffset = y + height / 2;
const key = safeIdentifier.identifier((_a = point2.key) == null ? void 0 : _a.toLocaleString());
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${xOffset}, ${yOffset})`, children: [
outerArc && react.cloneElement(outerArc, {
id: `${id}-${key}-outer`,
outerRadius,
innerRadius,
startAngle,
endAngle
}),
innerArc && react.cloneElement(innerArc, {
id: `${id}-${key}-inner`,
outerRadius,
innerRadius,
startAngle,
endAngle: dataEndAngle,
data: point2,
color: getColor({
data,
colorScheme,
point: point2,
index
})
}),
valueLabel2 && react.cloneElement(valueLabel2, { data: point2 }),
label2 && react.cloneElement(label2, { data: point2, offset: labelOffset })
] }, key);
},
[
id,
arcWidth,
colorScheme,
columns,
data,
endAngle,
height,
innerArc,
label2,
outerArc,
padding,
scale,
startAngle,
valueLabel2,
width,
xScale,
yScale
]
);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data.map(renderGauge) });
};
const RadialGaugeStackedArc = ({
id,
data,
scale,
innerRadius,
outerRadius,
cornerRadius = 0,
padAngle = 0,
padRadius = 0,
startAngle,
colorScheme,
animated = true,
disabled = false,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
...restProps
}) => {
const arcGenerator = react.useMemo(() => {
return d3Shape.arc().innerRadius(innerRadius).outerRadius(outerRadius).cornerRadius(cornerRadius);
}, [innerRadius, outerRadius, cornerRadius]);
const stackedArcs = react.useMemo(() => {
let prevEndAngle = startAngle;
function renderArc(point2, index) {
const value2 = point2.data;
const startArcAngle = prevEndAngle;
const endArcAngle = startArcAngle + scale(value2) - startAngle;
prevEndAngle = endArcAngle;
const arcData = {
data: point2,
startAngle: startArcAngle,
endAngle: endArcAngle,
padAngle,
value: value2,
index
};
const color = getColor({
colorScheme,
data: [data],
point: point2,
index,
active: [data],
isMultiSeries: true
});
return /* @__PURE__ */ react.createElement(
PieArc,
{
animated,
disabled,
tooltip: tooltip2,
...restProps,
id: point2.key.toLocaleString(),
key: point2.key.toLocaleString(),
arc: arcGenerator,
data: arcData,
color
}
);
}
return data.data.map(renderArc);
}, [
animated,
arcGenerator,
colorScheme,
data,
disabled,
padAngle,
restProps,
scale,
startAngle,
tooltip2
]);
return /* @__PURE__ */ jsxRuntime.jsx("g", { children: stackedArcs }, id);
};
const stackedValueLabel = "_stackedValueLabel_1w6zx_1";
const css$5 = {
stackedValueLabel
};
const StackedRadialGaugeValueLabel = ({ label: label2, className, yOffset = 0 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: label2 && /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
x: "0",
y: yOffset,
textAnchor: "middle",
alignmentBaseline: "middle",
className: classNames(className, css$5.stackedValueLabel),
children: label2
}
) });
const isChartNestedData = (point2) => {
return Array.isArray(point2.data);
};
const StackedRadialGaugeSeries = ({
data,
width,
height,
scale,
startAngle,
endAngle,
outerArc = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeArc, { disabled: true, animated: false }),
innerArc = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeArc, { animated: true }),
stackedInnerArc = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeStackedArc, { animated: true }),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(StackedRadialGaugeValueLabel, {}),
descriptionLabel,
colorScheme = ["#00ECB1"],
fillFactor = 0.2,
arcPadding = 0.15
}) => {
const radius = Math.min(width, height) / 2;
const innerRadius = radius * (1 - Math.min(fillFactor, 1));
const rAxis = d3Scale.scaleBand().domain(d3Array.range(data.length)).range([innerRadius, radius]).paddingInner(arcPadding);
const renderOuterArc = react.useCallback(
(outerRadius, innerRadius2) => {
return outerArc && react.cloneElement(outerArc, {
outerRadius,
innerRadius: innerRadius2,
startAngle,
endAngle
});
},
[outerArc, startAngle, endAngle]
);
const renderInnerArc = react.useCallback(
(outerRadius, innerRadius2, dataEndAngle, point2, index) => {
const color = getColor({ data, colorScheme, point: point2, index });
return innerArc && react.cloneElement(innerArc, {
outerRadius,
innerRadius: innerRadius2,
startAngle,
endAngle: dataEndAngle,
data: point2,
color
});
},
[innerArc, startAngle, data, colorScheme]
);
const renderStackedArc = react.useCallback(
(outerRadius, innerRadius2, point2, index) => {
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: stackedInnerArc && react.cloneElement(stackedInnerArc, {
outerRadius,
innerRadius: innerRadius2,
colorScheme,
startAngle,
scale: (scale == null ? void 0 : scale[index]) ?? (scale == null ? void 0 : scale[index]) ?? scale,
data: point2
}) });
},
[stackedInnerArc, colorScheme, startAngle, scale]
);
const renderStackedGauges = react.useCallback(
(point2, index) => {
var _a, _b;
const outerRadius = rAxis(index);
const innerRadius2 = outerRadius - rAxis.bandwidth();
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
renderOuterArc(outerRadius, innerRadius2),
isChartNestedData(point2) ? renderStackedArc(outerRadius, innerRadius2, point2, index) : renderInnerArc(
outerRadius,
innerRadius2,
((_a = scale == null ? void 0 : scale[index]) == null ? void 0 : _a.call(scale, point2.data)) ?? ((_b = scale == null ? void 0 : scale[0]) == null ? void 0 : _b.call(scale, point2.data)) ?? scale(point2.data),
point2,
index
)
] }, point2.key.toLocaleString());
},
[rAxis, renderOuterArc, renderStackedArc, renderInnerArc, scale]
);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${width / 2}, ${height / 2})`, children: [
data.map(renderStackedGauges),
descriptionLabel,
label2
] }) });
};
const stackedDescriptionLabel = "_stackedDescriptionLabel_1h95t_1";
const css$4 = {
stackedDescriptionLabel
};
const StackedRadialGaugeDescriptionLabel = ({ label: label2, className, yOffset = 0 }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: label2 && /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
x: "0",
y: yOffset - 20,
textAnchor: "middle",
alignmentBaseline: "middle",
className: classNames(className, css$4.stackedDescriptionLabel),
children: label2
}
) });
const RadialGauge = ({
id,
width,
height,
margins,
className,
data,
minValue = 0,
maxValue = 100,
startAngle = 0,
endAngle = Math.PI * 2,
series = /* @__PURE__ */ jsxRuntime.jsx(RadialGaugeSeries, {}),
containerClassName
}) => {
const newId = reablocks.useId(id);
const renderSeries = react.useCallback(
({ chartHeight, chartWidth }) => {
let scale;
if (Array.isArray(maxValue)) {
scale = maxValue.map(
(max, index) => d3Scale.scaleLinear().domain([(minValue == null ? void 0 : minValue[index]) ?? (minValue == null ? void 0 : minValue[0]) ?? minValue, max]).range([startAngle, endAngle])
);
} else if (Array.isArray(minValue)) {
scale = minValue.map(
(min, index) => d3Scale.scaleLinear().domain([min, (maxValue == null ? void 0 : maxValue[index]) ?? (maxValue == null ? void 0 : maxValue[0]) ?? maxValue]).range([startAngle, endAngle])
);
} else {
scale = d3Scale.scaleLinear().domain([minValue, maxValue]).range([startAngle, endAngle]);
}
return react.cloneElement(series, {
id: newId,
scale,
data,
startAngle,
endAngle,
width: chartWidth,
height: chartHeight
});
},
[data, endAngle, maxValue, minValue, series, startAngle, newId]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
xAxisVisible: false,
yAxisVisible: false,
className,
containerClassName,
children: renderSeries
}
);
};
const cell = "_cell_r3f8c_1";
const css$3 = {
cell
};
const modifiers = [dom.offset({ mainAxis: 0, crossAxis: 3 })];
const HeatmapCell = ({
rx = 2,
ry = 2,
cursor = "auto",
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
onClick,
onMouseEnter,
onMouseLeave,
data,
animated,
cellIndex,
cellCount,
fill,
stroke,
symbol: symbol2,
x,
y,
style,
className,
...rest
}) => {
const [active, setActive] = react.useState(false);
const rect = react.useRef(null);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setActive(true);
onMouseEnter({
value: data,
nativeEvent: event
});
},
onPointerOut: (event) => {
setActive(false);
onMouseLeave({
value: data,
nativeEvent: event
});
}
});
const onMouseClick = (event) => {
onClick({
value: data,
nativeEvent: event
});
};
const tooltipData = react.useMemo(
() => ({
y: data.value,
x: `${data.key} ∙ ${data.x}`,
data
}),
[data]
);
const transition = react.useMemo(() => {
if (animated) {
return {
...DEFAULT_TRANSITION,
delay: cellIndex / cellCount * 5e-3
};
} else {
return {
type: false,
delay: 0
};
}
}, [animated, cellIndex, cellCount]);
const extras = constructFunctionProps({ style, className }, data);
const isTransparent = fill === "transparent";
const appliedStroke = active && !isTransparent ? chroma(stroke || fill).brighten(1) : stroke || fill;
const ariaLabelData = react.useMemo(
() => getAriaLabel({ ...tooltipData, data: null }),
[tooltipData]
);
const renderedSymbol = react.useMemo(
() => symbol2 ? symbol2(data) : null,
[data, symbol2]
);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx("g", { ref: rect, children: renderedSymbol ? /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.g,
{
...rest,
fill,
stroke: appliedStroke,
style: { ...extras.style, cursor },
className: extras == null ? void 0 : extras.className,
transform: `translate(${x}, ${y})`,
initial: {
opacity: 0
},
animate: {
opacity: 1
},
exit: {
opacity: 0
},
transition,
onPointerOver: pointerOver,
onPointerOut: pointerOut,
onClick: onMouseClick,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: renderedSymbol
}
) : /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
...rest,
fill,
stroke: appliedStroke,
x,
y,
rx,
ry,
style: { ...extras.style, cursor },
className: classNames(css$3.cell, extras.className),
initial: {
opacity: 0
},
animate: {
opacity: 1
},
exit: {
opacity: 0
},
transition,
onPointerOver: pointerOver,
onPointerOut: pointerOut,
onClick: onMouseClick,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document"
}
) }),
tooltip2 && !tooltip2.props.disabled && !isTransparent && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: active,
modifiers: tooltip2.props.modifiers || modifiers,
reference: rect,
value: tooltipData
}
)
] });
};
const HeatmapSeries = (props) => {
const {
animated,
emptyColor,
colorScheme,
cell: cellElement,
xScale,
yScale,
data,
id,
selections
} = mergeDefaultProps(HEATMAP_SERIES_DEFAULT_PROPS, props);
const valueScales = createColorSchemeValueScales(
data,
colorScheme,
emptyColor,
selections
);
const height = yScale.bandwidth();
const width = xScale.bandwidth();
const cellCount = [...yScale.domain(), ...xScale.domain()].length;
const renderCell = ({
row,
cell: cell2,
rowIndex,
cellIndex,
width: width2,
height: height2,
cellCount: cellCount2
}) => {
const x = xScale(row.key);
const y = yScale(cell2.x);
const style = getColorSchemeStyles(cell2, valueScales);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: cellElement,
animated,
cellIndex: rowIndex + cellIndex,
cellCount: cellCount2,
x,
y,
fill: style == null ? void 0 : style.fill,
stroke: style == null ? void 0 : style.stroke,
width: width2,
height: height2,
data: cell2,
style
},
`${id}-${rowIndex}-${cellIndex}`
);
};
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data.map(
(row, rowIndex) => row.data.map(
(cell2, cellIndex) => renderCell({
height,
width,
cellCount,
row,
cell: cell2,
rowIndex,
cellIndex
})
)
) });
};
const HEATMAP_SERIES_DEFAULT_PROPS = {
padding: 0.1,
animated: true,
emptyColor: "rgba(200,200,200,0.08)",
colorScheme: ["rgba(28, 107, 86, 0.5)", "#2da283"],
cell: /* @__PURE__ */ jsxRuntime.jsx(HeatmapCell, {})
};
const Heatmap = ({
data = [],
margins = 10,
series = /* @__PURE__ */ jsxRuntime.jsx(HeatmapSeries, { padding: 0.3 }),
yAxis = /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "category",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
line: null,
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickLabel,
{
...LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS,
padding: 5
}
)
}
)
}
),
xAxis = /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
axisLine: null,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickSeries,
{
line: null,
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickLabel,
{
...LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS,
padding: 5
}
)
}
)
}
),
secondaryAxis,
id,
width,
height,
className,
containerClassName
}) => {
const xAxisProps = react.useMemo(
() => ({ ...LINEAR_X_AXIS_DEFAULT_PROPS, ...xAxis.props }),
[xAxis.props]
);
const yAxisProps = react.useMemo(
() => ({ ...LINEAR_Y_AXIS_DEFAULT_PROPS, ...yAxis.props }),
[yAxis.props]
);
const seriesProps = react.useMemo(
() => ({ ...HEATMAP_SERIES_DEFAULT_PROPS, ...series.props }),
[series.props]
);
const getScalesData = react.useCallback(
(chartHeight, chartWidth) => {
const nestedData = buildNestedChartData(data);
const xDomain = xAxisProps.domain || uniqueBy(nestedData, (d) => d.key);
const xScale = d3Scale.scaleBand().range([0, chartWidth]).domain(xDomain).paddingInner(seriesProps.padding || 0.1);
const yDomain = yAxisProps.domain || uniqueBy(
nestedData,
(d) => d.data,
(d) => d.x
);
const yScale = d3Scale.scaleBand().domain(yDomain).range([chartHeight, 0]).paddingInner(seriesProps.padding || 0.1);
return {
yScale,
xScale,
data: nestedData
};
},
[data, xAxisProps.domain, seriesProps.padding, yAxisProps.domain]
);
const renderChart = react.useCallback(
(containerProps) => {
const { chartWidth, chartHeight, updateAxes, id: id2, chartSized } = containerProps;
const {
xScale,
yScale,
data: scalesData
} = getScalesData(chartHeight, chartWidth);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: xAxis,
height: chartHeight,
width: chartWidth,
scale: xScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("horizontal", event)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: yAxis,
height: chartHeight,
width: chartWidth,
scale: yScale,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("vertical", event)
}
),
secondaryAxis && secondaryAxis.map((axis, i) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
height: chartHeight,
width: chartWidth,
visibility: chartSized ? "visible" : "hidden",
onDimensionsChange: (event) => updateAxes("horizontal", event)
},
i
)),
chartSized && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `heat-series-${id2}`,
data: scalesData,
xScale,
yScale
}
)
] });
},
[getScalesData, secondaryAxis, series, xAxis, yAxis]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: isAxisVisible(xAxisProps),
yAxisVisible: isAxisVisible(yAxisProps),
className,
children: renderChart
}
);
};
function toDate(argument) {
const argStr = Object.prototype.toString.call(argument);
if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
return new argument.constructor(+argument);
} else if (typeof argument === "number" || argStr === "[object Number]" || typeof argument === "string" || argStr === "[object String]") {
return new Date(argument);
} else {
return /* @__PURE__ */ new Date(NaN);
}
}
function constructFrom(date, value2) {
if (date instanceof Date) {
return new date.constructor(value2);
} else {
return new Date(value2);
}
}
function addDays(date, amount) {
const _date = toDate(date);
if (isNaN(amount)) return constructFrom(date, NaN);
_date.setDate(_date.getDate() + amount);
return _date;
}
function subDays(date, amount) {
return addDays(date, -365);
}
const getFirstOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
const addWeeksToDate = (date, weeks) => {
const d = new Date(date.getTime());
d.setDate(d.getDate() + weeks * 7);
return d;
};
const getStartOfDay = (date) => {
const d = new Date(date.getTime());
d.setHours(0, 0, 0, 0);
return d;
};
const getNewDayFromDay = (date, num) => {
const d = new Date(date.getTime());
d.setDate(d.getDate() + num);
return d;
};
const weekDays = (() => {
const base2 = new Date(Date.UTC(2017, 0, 2));
return d3Array.range(7).map(() => {
const name = base2.toLocaleDateString("default", { weekday: "short" });
base2.setDate(base2.getDate() + 1);
return name;
});
})();
const buildDataScales = (rawData, view) => {
const startDate = d3Array.min(rawData, (d) => d.key) || /* @__PURE__ */ new Date();
const endDomain = view === "year" ? 53 : 5;
let end2, start2;
if (view === "year") {
end2 = getStartOfDay(d3Array.max(rawData, (d) => d.key) || /* @__PURE__ */ new Date());
start2 = getStartOfDay(subDays(end2));
} else {
start2 = getFirstOfMonth(startDate);
end2 = addWeeksToDate(start2, endDomain);
}
const xDomainRange = view === "year" ? 53 : 5;
const yDomain = d3Array.range(7).reverse();
const xDomain = d3Array.range(xDomainRange);
const dates = rawData.filter(
(d) => d.key.getTime() > start2.getTime() || d.key.getTime() < end2.getTime()
).map((d) => ({
key: getStartOfDay(d.key),
data: d.data
}));
const firstDayOfStart = start2.getDay();
const curDate = getNewDayFromDay(start2, -firstDayOfStart);
const rows = [];
for (let week = 0; week < xDomainRange; week++) {
const row = {
key: week,
data: []
};
for (let day = 0; day <= 6; day++) {
const dayValue = dates.find((d) => d.key.getTime() === curDate.getTime());
row.data.push({
key: day,
data: (dayValue == null ? void 0 : dayValue.data) ?? void 0,
metadata: {
date: new Date(curDate.getTime()),
start: start2,
end: end2
}
});
curDate.setDate(curDate.getDate() + 1);
}
rows.push(row);
}
return {
data: rows,
yDomain,
xDomain,
start: start2
};
};
const CalendarHeatmap = ({
view = "year",
data,
series = /* @__PURE__ */ jsxRuntime.jsx(
HeatmapSeries,
{
padding: 0.3,
emptyColor: "transparent",
cell: /* @__PURE__ */ jsxRuntime.jsx(
HeatmapCell,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
content: (d) => `${formatValue(d.data.metadata.date)} ∙ ${formatValue(
d.data.value
)}`
}
)
}
)
}
),
...rest
}) => {
const {
data: domainData,
yDomain,
xDomain,
start: start2
} = react.useMemo(() => buildDataScales(data, view), [data, view]);
const xTickValues = view === "year" ? void 0 : [1];
const getDayOfWeek = react.useCallback((day) => weekDays[day], []);
const yAxisLabelFormat = react.useMemo(
() => view === "year" ? getDayOfWeek : () => null,
[getDayOfWeek, view]
);
const xAxisLabelFormat = react.useCallback(
(weeks) => addWeeksToDate(start2, weeks).toLocaleString("default", { month: "long" }),
[start2]
);
return /* @__PURE__ */ jsxRuntime.jsx(
Heatmap,
{
...rest,
series,
data: domainData,
yAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxis,
{
type: "category",
axisLine: null,
domain: yDomain,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearYAxisTickSeries,
{
tickSize: 20,
line: null,
label: /* @__PURE__ */ jsxRuntime.jsx(LinearYAxisTickLabel, { padding: 5, format: yAxisLabelFormat })
}
)
}
),
xAxis: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxis,
{
type: "category",
axisLine: null,
domain: xDomain,
tickSeries: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickSeries,
{
line: null,
tickValues: xTickValues,
label: /* @__PURE__ */ jsxRuntime.jsx(
LinearXAxisTickLabel,
{
padding: 5,
align: "end",
format: xAxisLabelFormat
}
)
}
)
}
)
}
);
};
const LinearGaugeBar = (props) => /* @__PURE__ */ jsxRuntime.jsx(
Bar,
{
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
placement: "top",
content: (data) => /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { value: { y: data.value, x: data.y } })
}
),
...props
}
);
const LinearGaugeOuterBar = ({
height,
width,
fill = "#484848",
...rest
}) => /* @__PURE__ */ jsxRuntime.jsx(
"rect",
{
...rest,
fill,
width: Math.max(width, 0),
height: Math.max(height, 0)
}
);
const LinearGaugeSeries = ({
height,
width,
bar: bar2 = /* @__PURE__ */ jsxRuntime.jsx(LinearGaugeBar, {}),
outerBar: outerBar2 = /* @__PURE__ */ jsxRuntime.jsx(LinearGaugeOuterBar, {}),
isMultiSeries,
...rest
}) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
!isMultiSeries && outerBar2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: outerBar2,
height,
width
}
),
/* @__PURE__ */ jsxRuntime.jsx(
BarSeries,
{
...rest,
layout: "horizontal",
tooltip: null,
bar: /* @__PURE__ */ jsxRuntime.jsx(reablocks.CloneElement, { element: bar2 })
}
)
] });
const LinearGauge = ({
id,
width,
height,
margins,
className,
containerClassName,
series = /* @__PURE__ */ jsxRuntime.jsx(LinearGaugeSeries, {}),
data,
minValue = 0,
maxValue = 100
}) => {
const transformedData = react.useMemo(() => {
if (Array.isArray(data)) {
return buildBarStackData(
[
{
key: "default",
data
}
],
"expand",
"horizontal"
);
} else {
return buildShallowChartData([data], "horizontal");
}
}, [data]);
const getScales = react.useCallback(
(isMultiSeries, data2, width2, height2, minValue2, maxValue2) => {
const domain = !isMultiSeries ? [minValue2, maxValue2] : void 0;
const keyScale = getXScale({
width: width2,
type: "value",
data: data2,
domain,
isMultiSeries
});
const valueScale = getYScale({
type: "category",
height: height2,
data: data2,
isMultiSeries
});
return {
keyScale,
valueScale
};
},
[]
);
const renderChart = react.useCallback(
({ chartHeight, chartWidth, id: id2, chartSized }) => {
const isMultiSeries = Array.isArray(data);
const type = isMultiSeries ? "stackedNormalized" : "standard";
const { keyScale, valueScale } = getScales(
isMultiSeries,
transformedData,
chartWidth,
chartHeight,
minValue,
maxValue
);
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: chartSized && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `linear-gauge-series-${id2}`,
data: transformedData,
isCategorical: true,
xScale: keyScale,
yScale: valueScale,
type,
height: chartHeight,
width: chartWidth,
isMultiSeries
}
) });
},
[data, getScales, maxValue, minValue, series, transformedData]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
className,
containerClassName,
children: renderChart
}
);
};
const useInterpolate$1 = ({ data, animated }) => {
const transition = animated ? { ...DEFAULT_TRANSITION } : {
delay: 0,
type: false
};
const d = react$1.useMotionValue(data.path);
const spring = react$1.useSpring(0, { stiffness: 300, damping: 30 });
react.useEffect(() => {
const interpolator = d3Interpolate.interpolate(d.get(), data.path);
const prevSpring = spring.get();
spring.set(1 + prevSpring);
return spring.on("change", (v) => d.set(interpolator(v - prevSpring)));
}, [d, data.path, spring]);
return { transition, d };
};
const VennArc = ({
data,
fill,
disabled,
animated,
stroke,
mask,
id,
style,
active = false,
inactiveStyle = { opacity: 0.3 },
activeStyle = { opacity: 0.8 },
initialStyle = { opacity: 0.6 },
strokeWidth = 3,
gradient: gradient2 = /* @__PURE__ */ jsxRuntime.jsx(Gradient, {}),
glow,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
onClick = () => void 0,
onMouseEnter = () => void 0,
onMouseLeave = () => void 0
}) => {
const [internalActive, setInternalActive] = react.useState(false);
const arcRef = react.useRef(null);
const { transition, d } = useInterpolate$1({ animated, data });
const currentStyle = active ? activeStyle : active === null ? inactiveStyle : initialStyle;
const arcFill = gradient2 && !mask ? `url(#gradient-${id})` : mask ? `url(#mask-pattern-${id})` : fill;
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
if (!disabled) {
setInternalActive(true);
onMouseEnter == null ? void 0 : onMouseEnter({
value: data.data,
nativeEvent: event
});
}
},
onPointerOut: (event) => {
if (!disabled) {
setInternalActive(false);
onMouseLeave == null ? void 0 : onMouseLeave({
value: data.data,
nativeEvent: event
});
}
}
});
const tooltipData = react.useMemo(
() => {
var _a, _b;
return { y: data.data.size, x: (_b = (_a = data.data) == null ? void 0 : _a.sets) == null ? void 0 : _b.join(" | ") };
},
[data]
);
const ariaLabelData = react.useMemo(() => getAriaLabel(tooltipData), [tooltipData]);
return /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
title: data.data.key,
onPointerOver: pointerOver,
onPointerOut: pointerOut,
onClick: (event) => {
if (!disabled) {
onClick == null ? void 0 : onClick({
value: data.data,
nativeEvent: event
});
}
},
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
ref: arcRef,
fill: arcFill,
id: `${id}-arc`,
strokeWidth,
stroke,
transition,
d,
initial: initialStyle,
animate: currentStyle,
style: {
...style,
...generateGlowStyles({
glow,
colorSchemeColor: typeof stroke === "string" ? stroke : null
})
}
}
),
mask && /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Mask, { id: `mask-${id}`, fill: `url(#gradient-${id})` }),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: mask,
id: `mask-pattern-${id}`,
fill
}
)
] }),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
color: fill
}
),
tooltip2 && !tooltip2.props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!internalActive,
reference: arcRef,
value: tooltipData
}
)
]
}
);
};
const VennLabel = ({
data,
format,
id,
active,
labelType = "key",
showAll = false,
wrap = true,
animated = true,
fill,
fontSize = 11,
fontFamily = "sans-serif"
}) => {
var _a, _b, _c, _d, _e;
if (!showAll && !((_a = data.arcs) == null ? void 0 : _a.filter((a) => a.large).length)) {
return null;
}
const key = labelType === "key" ? (_c = (_b = data.data) == null ? void 0 : _b.sets) == null ? void 0 : _c.join(" | ") : data.data.size;
const transition = animated ? DEFAULT_TRANSITION : { delay: 0, type: false };
const text = wrap ? wrapText({
key,
x: data.text.x,
fontFamily,
fontSize,
width: (_e = (_d = data == null ? void 0 : data.circles) == null ? void 0 : _d[0]) == null ? void 0 : _e.radius
}) : key;
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.text,
{
id: `${id}-text`,
fill,
pointerEvents: "none",
fontFamily,
fontSize,
initial: {
attrX: data.text.x,
attrY: data.text.y,
opacity: 1
},
animate: {
attrX: data.text.x,
attrY: data.text.y,
opacity: active === null ? 0.3 : 1
},
transition,
textAnchor: "middle",
children: format ? format(data) : text
}
);
};
const VennOuterLabel = ({
data,
format,
animated = true,
fill = "#000",
fontSize = 14,
fontFamily = "sans-serif"
}) => {
const transition = animated ? DEFAULT_TRANSITION : { delay: 0, type: false };
const text = data.set.data.key;
const label2 = format ? format(data) : text;
const isElement = react.isValidElement(label2);
const showIcon = isElement && data.set.icon;
const pos = {
x: showIcon ? data.set.icon.x : data.set.text.x,
y: showIcon ? data.set.icon.y : data.set.text.y
};
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: isElement ? /* @__PURE__ */ jsxRuntime.jsx("g", { style: { transform: `translate(${pos.x}px, ${pos.y}px)` }, children: label2 }) : /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.text,
{
fill,
style: { pointerEvents: "none", fontFamily, fontSize },
textAnchor: data.set.align === "middle" ? "center" : data.set.align,
alignmentBaseline: data.set.verticalAlign,
initial: {
attrX: pos.x,
attrY: pos.y
},
animate: {
attrX: pos.x,
attrY: pos.y
},
transition,
children: label2
}
) });
};
const VennSeries = ({
data,
id,
selections,
animated = true,
disabled = false,
colorScheme = "cybertron",
outerLabel = /* @__PURE__ */ jsxRuntime.jsx(VennOuterLabel, {}),
arc = /* @__PURE__ */ jsxRuntime.jsx(VennArc, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(VennLabel, {})
}) => {
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
const [actives, setActives] = react.useState([]);
const [hovered, setHovered] = react.useState(null);
const onActivate = react.useCallback(
(point2) => {
setHovered(point2);
setActives(
data.filter((d) => {
var _a;
return ((_a = d.data) == null ? void 0 : _a.key.indexOf(point2)) > -1;
}).map((d) => {
var _a;
return (_a = d.data) == null ? void 0 : _a.key;
})
);
},
[data]
);
const renderArc = react.useCallback(
(d, index) => {
var _a, _b;
const fill = getColor({
data,
colorScheme,
point: d.data,
index
});
const textFill = fill ? invert(chroma(fill).darken(0.5).hex(), true) : "white";
const arcFill = arc.props.fill || fill;
const key = (_a = d == null ? void 0 : d.data) == null ? void 0 : _a.key;
const safeKey = safeIdentifier.identifier((_b = d.data) == null ? void 0 : _b.key);
const isSelected = selections == null ? void 0 : selections.includes(key);
const isHovered = hovered === key || isSelected;
const isActive = isSelected || actives.includes(key) || (actives.length > 0 ? null : false);
const getStrokeColor = () => {
if (typeof arc.props.stroke === "function") {
return arc.props.stroke(data, index, isActive, isHovered);
}
if (arc.props.stroke !== void 0) {
return arc.props.stroke;
}
return fill;
};
const stroke = getStrokeColor();
const arcStroke = stroke || chroma(arcFill).darken(isActive ? 0.8 : 0.5).hex();
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arc,
id: `${id}-${safeKey}`,
data: d,
fill: arcFill,
stroke: arcStroke,
disabled,
animated,
active: isActive,
onMouseEnter: () => onActivate(key),
onMouseLeave: () => {
setActives([]);
setHovered(null);
}
}
),
label2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
data: d,
id: `${id}-${safeKey}`,
active: isActive,
animated,
fill: textFill,
...label2.props
}
),
d.set && outerLabel && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: outerLabel,
data: d,
animated
}
)
] }, safeKey);
},
[
data,
colorScheme,
arc,
selections,
hovered,
actives,
id,
disabled,
animated,
label2,
outerLabel,
onActivate
]
);
const topArcs = react.useMemo(() => {
const result = [];
if (actives.length > 0) {
result.push(...actives.filter((s) => s !== hovered));
}
if (selections == null ? void 0 : selections.length) {
result.push(
...selections.filter((s) => !actives.includes(s) && s !== hovered)
);
}
if (hovered) {
result.push(hovered);
}
return result;
}, [hovered, actives, selections]);
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: { opacity: 0, scale: 0 },
animate: { opacity: 1, scale: 1 },
transition,
children: [
data.map(renderArc),
topArcs.length > 0 && topArcs.map((a) => /* @__PURE__ */ jsxRuntime.jsx(
"use",
{
xlinkHref: `#${id}-${a}-arc`,
style: { pointerEvents: "none" }
},
a
)),
data.map((d, index) => {
var _a;
return /* @__PURE__ */ jsxRuntime.jsx(
"use",
{
xlinkHref: `#${id}-${safeIdentifier.identifier((_a = d.data) == null ? void 0 : _a.key)}-text`,
style: { pointerEvents: "none" }
},
index
);
})
]
}
);
};
const sets$5 = [];
const intersections$5 = [];
const bb$5 = {
x: 0,
y: 0,
width: 10,
height: 10
};
const venn0 = {
sets: sets$5,
intersections: intersections$5,
bb: bb$5
};
const sets$4 = [
{
cx: 0,
cy: 0,
r: 5,
text: {
x: 3.5,
y: -4
},
align: "start",
verticalAlign: "bottom"
}
];
const intersections$4 = [
{
sets: [
0
],
x1: 0,
y1: 5,
arcs: [
{
mode: "i",
ref: 0,
x2: 0,
y2: -5,
sweep: false,
large: false
},
{
mode: "i",
ref: 0,
x2: 0,
y2: 5,
sweep: false,
large: false
}
],
text: {
x: 0,
y: 0
}
}
];
const bb$4 = {
x: -5,
y: -5,
width: 10,
height: 10
};
const venn1 = {
sets: sets$4,
intersections: intersections$4,
bb: bb$4
};
const sets$3 = [
{
cx: -4,
cy: 0,
r: 5,
text: {
x: -7.5,
y: 4
},
align: "end",
verticalAlign: "top"
},
{
cx: 4,
cy: 0,
r: 5,
text: {
x: 7.5,
y: -4
},
align: "start",
verticalAlign: "bottom"
}
];
const intersections$3 = [
{
sets: [
0
],
x1: 0,
y1: -3,
arcs: [
{
mode: "i",
ref: 0,
x2: 0,
y2: 3,
sweep: false,
large: true
},
{
mode: "o",
ref: 1,
x2: 0,
y2: -3,
sweep: true,
large: false
}
],
text: {
x: -4,
y: 0
}
},
{
sets: [
1
],
x1: 0,
y1: 3,
arcs: [
{
mode: "i",
ref: 1,
x2: 0,
y2: -3,
sweep: false,
large: true
},
{
mode: "o",
ref: 0,
x2: 0,
y2: 3,
sweep: true,
large: false
}
],
text: {
x: 4,
y: 0
}
},
{
sets: [
0,
1
],
x1: 0,
y1: 3,
arcs: [
{
mode: "i",
ref: 0,
x2: 0,
y2: -3,
sweep: false,
large: false
},
{
mode: "i",
ref: 1,
x2: 0,
y2: 3,
sweep: false,
large: false
}
],
text: {
x: 0,
y: 0
}
}
];
const bb$3 = {
x: -9,
y: -5,
width: 18,
height: 10
};
const venn2 = {
sets: sets$3,
intersections: intersections$3,
bb: bb$3
};
const sets$2 = [
{
cx: -3.464,
cy: -2,
r: 5,
text: {
x: -7,
y: -6
},
align: "end"
},
{
cx: 3.464,
cy: -2,
r: 5,
text: {
x: 7,
y: -6
},
align: "start"
},
{
cx: 0,
cy: 4,
r: 5,
text: {
x: 4,
y: 7.5
},
align: "start",
verticalAlign: "top"
}
];
const intersections$2 = [
{
sets: [
0
],
x1: -4.855,
y1: 2.803,
arcs: [
{
mode: "o",
ref: 2,
x2: -1.39,
y2: -0.803,
sweep: true,
large: false
},
{
mode: "o",
ref: 1,
x2: 0,
y2: -5.606,
sweep: true,
large: false
},
{
mode: "i",
ref: 0,
x2: -4.855,
y2: 2.803,
sweep: false,
large: true
}
],
text: {
x: -4.216,
y: -2.434
}
},
{
sets: [
1
],
x1: 0,
y1: -5.606,
arcs: [
{
mode: "o",
ref: 0,
x2: 1.39,
y2: -0.803,
sweep: true,
large: false
},
{
mode: "o",
ref: 2,
x2: 4.855,
y2: 2.803,
sweep: true,
large: false
},
{
mode: "i",
ref: 1,
x2: 0,
y2: -5.606,
sweep: false,
large: true
}
],
text: {
x: 4.216,
y: -2.434
}
},
{
sets: [
2
],
x1: -4.855,
y1: 2.803,
arcs: [
{
mode: "o",
ref: 0,
x2: 0,
y2: 1.606,
sweep: false,
large: false
},
{
mode: "o",
ref: 1,
x2: 4.855,
y2: 2.803,
sweep: false,
large: false
},
{
mode: "i",
ref: 2,
x2: -4.855,
y2: 2.803,
sweep: true,
large: true
}
],
text: {
x: 0,
y: 4.869
}
},
{
sets: [
0,
1
],
x1: 0,
y1: -5.606,
arcs: [
{
mode: "i",
ref: 1,
x2: -1.39,
y2: -0.803,
sweep: false,
large: false
},
{
mode: "o",
ref: 2,
x2: 1.39,
y2: -0.803,
sweep: true,
large: false
},
{
mode: "i",
ref: 0,
x2: 0,
y2: -5.606,
sweep: false,
large: false
}
],
text: {
x: 0,
y: -2.404
}
},
{
sets: [
0,
2
],
x1: -4.855,
y1: 2.803,
arcs: [
{
mode: "i",
ref: 2,
x2: -1.39,
y2: -0.803,
sweep: true,
large: false
},
{
mode: "o",
ref: 1,
x2: 0,
y2: 1.606,
sweep: false,
large: false
},
{
mode: "i",
ref: 0,
x2: -4.855,
y2: 2.803,
sweep: true,
large: false
}
],
text: {
x: -2.082,
y: 1.202
}
},
{
sets: [
1,
2
],
x1: 4.855,
y1: 2.803,
arcs: [
{
mode: "i",
ref: 2,
x2: 1.39,
y2: -0.803,
sweep: false,
large: false
},
{
mode: "o",
ref: 0,
x2: 0,
y2: 1.606,
sweep: true,
large: false
},
{
mode: "i",
ref: 1,
x2: 4.855,
y2: 2.803,
sweep: false,
large: false
}
],
text: {
x: 2.082,
y: 1.202
}
},
{
sets: [
0,
1,
2
],
x1: 1.39,
y1: -0.803,
arcs: [
{
mode: "i",
ref: 0,
x2: 0,
y2: 1.606,
sweep: true,
large: false
},
{
mode: "i",
ref: 1,
x2: -1.39,
y2: -0.803,
sweep: true,
large: false
},
{
mode: "i",
ref: 2,
x2: 1.39,
y2: -0.803,
sweep: true,
large: false
}
],
text: {
x: 0,
y: 0
}
}
];
const bb$2 = {
x: -8.464,
y: -7,
width: 16.928,
height: 16
};
const venn3 = {
sets: sets$2,
intersections: intersections$2,
bb: bb$2
};
const sets$1 = [
{
cx: 0.439,
cy: -1.061,
rx: 2.5,
ry: 5,
rotation: 45,
text: {
x: 4.5,
y: -4.5
},
align: "start",
verticalAlign: "bottom"
},
{
cx: 2.561,
cy: 1.061,
rx: 2.5,
ry: 5,
rotation: 45,
text: {
x: 4,
y: 3.75
},
align: "start",
verticalAlign: "top"
},
{
cx: -2.561,
cy: 1.061,
rx: 2.5,
ry: 5,
rotation: -45,
text: {
x: -4,
y: 3.7
},
align: "end",
verticalAlign: "top"
},
{
cx: -0.439,
cy: -1.061,
rx: 2.5,
ry: 5,
rotation: -45,
text: {
x: -4.5,
y: -4.5
},
align: "end",
verticalAlign: "bottom"
}
];
const intersections$1 = [
{
sets: [
0
],
x1: 0,
y1: -3.94,
arcs: [
{
ref: 0,
mode: "i",
x2: 4.328,
y2: -2.828,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 2.179,
y2: -1.858,
large: false
},
{
ref: 3,
mode: "o",
x2: 0,
y2: -3.94,
large: false
}
],
text: {
x: 2.914,
y: -3.536
}
},
{
sets: [
1
],
x1: 4.328,
y1: -2.828,
arcs: [
{
ref: 1,
mode: "i",
x2: 0,
y2: 5.006,
sweep: true,
large: true
},
{
ref: 2,
mode: "o",
x2: 1.328,
y2: 2.828
},
{
ref: 3,
mode: "o",
x2: 3.108,
y2: -0.328
},
{
ref: 0,
mode: "o",
x2: 4.328,
y2: -2.828
}
],
text: {
x: 5.036,
y: -1.414
}
},
{
sets: [
2
],
x1: 0,
y1: 5.006,
arcs: [
{
ref: 2,
mode: "i",
x2: -4.328,
y2: -2.828,
sweep: true,
large: true
},
{
ref: 3,
mode: "o",
x2: -3.108,
y2: -0.328
},
{
ref: 0,
mode: "o",
x2: -1.328,
y2: 2.828
},
{
ref: 1,
mode: "o",
x2: 0,
y2: 5.006
}
],
text: {
x: -5.036,
y: -1.414
}
},
{
sets: [
3
],
x1: -4.328,
y1: -2.828,
arcs: [
{
ref: 3,
mode: "i",
x2: 0,
y2: -3.94,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: -2.179,
y2: -1.858,
large: false
},
{
ref: 2,
mode: "o",
x2: -4.328,
y2: -2.828,
large: false
}
],
text: {
x: -2.914,
y: -3.536
}
},
{
sets: [
0,
1
],
x1: 4.328,
y1: -2.828,
arcs: [
{
ref: 1,
mode: "i",
x2: 3.108,
y2: -0.328,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: 2.179,
y2: -1.858,
sweep: false,
large: false
},
{
ref: 0,
mode: "i",
x2: 4.328,
y2: -2.828,
sweep: true,
large: false
}
],
text: {
x: 3.205,
y: -1.672
}
},
{
sets: [
0,
2
],
x1: -1.328,
y1: 2.828,
arcs: [
{
ref: 0,
mode: "i",
x2: -3.108,
y2: -0.328,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: -0.969,
y2: 1.755,
large: false
},
{
ref: 1,
mode: "o",
x2: -1.328,
y2: 2.828,
large: false
}
],
text: {
x: -2.212,
y: 1.591
}
},
{
sets: [
0,
3
],
x1: 0,
y1: -3.94,
arcs: [
{
ref: 3,
mode: "i",
x2: 2.179,
y2: -1.858,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 0,
y2: 0.188,
sweep: false,
large: false
},
{
ref: 2,
mode: "o",
x2: -2.179,
y2: -1.858,
sweep: false,
large: false
},
{
ref: 0,
mode: "i",
x2: 0,
y2: -3.94,
sweep: true
}
],
text: {
x: 0,
y: -1.87
}
},
{
sets: [
1,
2
],
x1: 1.328,
y1: 2.828,
arcs: [
{
ref: 2,
mode: "i",
x2: 0,
y2: 5.006,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: -1.328,
y2: 2.828,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: 0,
y2: 2.346,
large: false
},
{
ref: 3,
mode: "o",
x2: 1.328,
y2: 2.828
}
],
text: {
x: 0,
y: 3.393
}
},
{
sets: [
1,
3
],
x1: 3.108,
y1: -0.328,
arcs: [
{
ref: 3,
mode: "i",
x2: 1.328,
y2: 2.828,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 0.969,
y2: 1.755,
large: false
},
{
ref: 1,
mode: "i",
x2: 3.108,
y2: -0.328,
large: false
}
],
text: {
x: 2.212,
y: 1.591
}
},
{
sets: [
2,
3
],
x1: -3.108,
y1: -0.328,
arcs: [
{
ref: 3,
mode: "i",
x2: -4.328,
y2: -2.828,
sweep: true,
large: false
},
{
ref: 2,
mode: "i",
x2: -2.179,
y2: -1.858,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: -3.108,
y2: -0.328,
large: false
}
],
text: {
x: -3.205,
y: -1.672
}
},
{
sets: [
0,
1,
2
],
x1: 0,
y1: 2.346,
arcs: [
{
ref: 0,
mode: "i",
x2: -1.328,
y2: 2.828,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: -0.969,
y2: 1.755,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: 0,
y2: 2.346,
large: false
}
],
text: {
x: -0.766,
y: 2.31
}
},
{
sets: [
0,
1,
3
],
x1: 2.179,
y1: -1.858,
arcs: [
{
ref: 3,
mode: "i",
x2: 3.108,
y2: -0.328,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: 0.969,
y2: 1.755,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 0,
y2: 0.188,
sweep: false,
large: false
},
{
ref: 1,
mode: "i",
x2: 2.179,
y2: -1.858,
sweep: true
}
],
text: {
x: 1.558,
y: -0.056
}
},
{
sets: [
0,
2,
3
],
x1: -0.969,
y1: 1.755,
arcs: [
{
ref: 3,
mode: "i",
x2: -3.108,
y2: -0.328,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: -2.179,
y2: -1.858,
sweep: true,
large: false
},
{
ref: 2,
mode: "i",
x2: 0,
y2: 0.188,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: -0.969,
y2: 1.755
}
],
text: {
x: -1.558,
y: -0.056
}
},
{
sets: [
1,
2,
3
],
x1: 1.328,
y1: 2.828,
arcs: [
{
ref: 3,
mode: "i",
x2: 0,
y2: 2.346,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: 0.969,
y2: 1.755,
sweep: false,
large: false
},
{
ref: 2,
mode: "i",
x2: 1.328,
y2: 2.828,
sweep: true,
large: false
}
],
text: {
x: 0.766,
y: 2.31
}
},
{
sets: [
0,
1,
2,
3
],
x1: 0,
y1: 0.188,
arcs: [
{
ref: 2,
mode: "i",
x2: 0.969,
y2: 1.755,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: 0,
y2: 2.346,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: -0.969,
y2: 1.755,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: 0,
y2: 0.188,
sweep: true
}
],
text: {
x: 0,
y: 1.43
}
}
];
const bb$1 = {
x: -6.5,
y: -5,
width: 13,
height: 10
};
const venn4 = {
sets: sets$1,
intersections: intersections$1,
bb: bb$1
};
const sets = [
{
cx: 0.5,
cy: -1,
rx: 2.5,
ry: 5,
rotation: 0,
text: {
x: 2.25,
y: -5
},
icon: {
x: 0,
y: -6.3
},
align: "start",
verticalAlign: "bottom"
},
{
cx: 1.106,
cy: 0.167,
rx: 2.5,
ry: 5,
rotation: 72,
text: {
x: 4.5,
y: 1.5
},
icon: {
x: 6.2,
y: -1.9
},
align: "start",
verticalAlign: "top"
},
{
cx: 0.183,
cy: 1.103,
rx: 2.5,
ry: 5,
rotation: 144,
icon: {
x: 3.2,
y: 6
},
text: {
x: 4,
y: 4
},
align: "start",
verticalAlign: "bottom"
},
{
cx: -0.992,
cy: 0.515,
rx: 2.5,
ry: 5,
rotation: 216,
icon: {
x: -4.4,
y: 5.2
},
text: {
x: -4.7,
y: 2
},
align: "end",
verticalAlign: "bottom"
},
{
cx: -0.797,
cy: -0.785,
rx: 2.5,
ry: 5,
rotation: 288,
icon: {
x: -6,
y: -2
},
text: {
x: -4,
y: -3.6
},
align: "end",
verticalAlign: "bottom"
}
];
const intersections = [
{
sets: [
0
],
x1: -1.653,
y1: -3.541,
arcs: [
{
ref: 0,
mode: "i",
x2: 2.857,
y2: -2.666,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 2.5,
y2: -2.648,
large: false
},
{
ref: 3,
mode: "o",
x2: -0.495,
y2: -3.303,
large: false
},
{
ref: 4,
mode: "o",
x2: -1.653,
y2: -3.541
}
],
text: {
x: 0.5,
y: -5
}
},
{
sets: [
1
],
x1: 2.857,
y1: -2.666,
arcs: [
{
ref: 1,
mode: "i",
x2: 3.419,
y2: 1.893,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 3.291,
y2: 1.559,
large: false
},
{
ref: 4,
mode: "o",
x2: 2.988,
y2: -1.492,
large: false
},
{
ref: 0,
mode: "o",
x2: 2.857,
y2: -2.666
}
],
text: {
x: 4.91,
y: -1.07
}
},
{
sets: [
2
],
x1: 3.419,
y1: 1.893,
arcs: [
{
ref: 2,
mode: "i",
x2: -0.744,
y2: 3.837,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: -0.466,
y2: 3.612,
large: false
},
{
ref: 0,
mode: "o",
x2: 2.342,
y2: 2.381,
large: false
},
{
ref: 1,
mode: "o",
x2: 3.419,
y2: 1.893
}
],
text: {
x: 2.534,
y: 4.339
}
},
{
sets: [
3
],
x1: -0.744,
y1: 3.837,
arcs: [
{
ref: 3,
mode: "i",
x2: -3.879,
y2: 0.478,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: -3.579,
y2: 0.673,
large: false
},
{
ref: 1,
mode: "o",
x2: -1.54,
y2: 2.963,
large: false
},
{
ref: 2,
mode: "o",
x2: -0.744,
y2: 3.837
}
],
text: {
x: -3.343,
y: 3.751
}
},
{
sets: [
4
],
x1: -3.879,
y1: 0.478,
arcs: [
{
ref: 4,
mode: "i",
x2: -1.653,
y2: -3.541,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: -1.746,
y2: -3.196,
large: false
},
{
ref: 2,
mode: "o",
x2: -3.294,
y2: -0.549,
large: false
},
{
ref: 3,
mode: "o",
x2: -3.879,
y2: 0.478
}
],
text: {
x: -4.601,
y: -2.021
}
},
{
sets: [
0,
1
],
x1: 2.5,
y1: -2.648,
arcs: [
{
ref: 1,
mode: "i",
x2: 2.857,
y2: -2.666,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: 2.988,
y2: -1.492,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: 2.572,
y2: -1.839,
large: false
},
{
ref: 3,
mode: "o",
x2: 2.5,
y2: -2.648
}
],
text: {
x: 2.741,
y: -2.152
}
},
{
sets: [
0,
2
],
x1: 2.342,
y1: 2.381,
arcs: [
{
ref: 0,
mode: "i",
x2: -0.466,
y2: 3.612,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: 0.257,
y2: 2.922,
large: false
},
{
ref: 1,
mode: "o",
x2: 2.342,
y2: 2.381,
large: false
}
],
text: {
x: 0.5,
y: 3.5
}
},
{
sets: [
0,
3
],
x1: -0.495,
y1: -3.303,
arcs: [
{
ref: 3,
mode: "i",
x2: 2.5,
y2: -2.648,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 1.51,
y2: -2.515,
large: false
},
{
ref: 4,
mode: "o",
x2: -0.495,
y2: -3.303,
large: false
}
],
text: {
x: 1.653,
y: -3.125
}
},
{
sets: [
0,
4
],
x1: -1.653,
y1: -3.541,
arcs: [
{
ref: 4,
mode: "i",
x2: -0.495,
y2: -3.303,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: -0.954,
y2: -3.015,
large: false
},
{
ref: 2,
mode: "o",
x2: -1.746,
y2: -3.196,
large: false
},
{
ref: 0,
mode: "i",
x2: -1.653,
y2: -3.541
}
],
text: {
x: -1.199,
y: -3.272
}
},
{
sets: [
1,
2
],
x1: 3.291,
y1: 1.559,
arcs: [
{
ref: 2,
mode: "i",
x2: 3.419,
y2: 1.893,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: 2.342,
y2: 2.381,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: 2.544,
y2: 1.878,
large: false
},
{
ref: 4,
mode: "o",
x2: 3.291,
y2: 1.559
}
],
text: {
x: 2.894,
y: 1.942
}
},
{
sets: [
1,
3
],
x1: -1.54,
y1: 2.963,
arcs: [
{
ref: 1,
mode: "i",
x2: -3.579,
y2: 0.673,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: -2.7,
y2: 1.147,
large: false
},
{
ref: 2,
mode: "o",
x2: -1.54,
y2: 2.963,
large: false
}
],
text: {
x: -3.174,
y: 1.557
}
},
{
sets: [
1,
4
],
x1: 2.988,
y1: -1.492,
arcs: [
{
ref: 4,
mode: "i",
x2: 3.291,
y2: 1.559,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 2.858,
y2: 0.659,
large: false
},
{
ref: 0,
mode: "o",
x2: 2.988,
y2: -1.492,
large: false
}
],
text: {
x: 3.483,
y: 0.606
}
},
{
sets: [
2,
3
],
x1: -0.466,
y1: 3.612,
arcs: [
{
ref: 3,
mode: "i",
x2: -0.744,
y2: 3.837,
sweep: true,
large: false
},
{
ref: 2,
mode: "i",
x2: -1.54,
y2: 2.963,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: -1,
y2: 3,
large: false
},
{
ref: 0,
mode: "o",
x2: -0.466,
y2: 3.612
}
],
text: {
x: -0.953,
y: 3.352
}
},
{
sets: [
2,
4
],
x1: -3.294,
y1: -0.549,
arcs: [
{
ref: 2,
mode: "i",
x2: -1.746,
y2: -3.196,
sweep: true
},
{
ref: 0,
mode: "o",
x2: -1.925,
y2: -2.213
},
{
ref: 3,
mode: "o",
x2: -3.294,
y2: -0.549
}
],
text: {
x: -2.462,
y: -2.538
}
},
{
sets: [
3,
4
],
x1: -3.579,
y1: 0.673,
arcs: [
{
ref: 4,
mode: "i",
x2: -3.879,
y2: 0.478,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: -3.294,
y2: -0.549,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: -3.162,
y2: -0.024,
large: false
},
{
ref: 1,
mode: "o",
x2: -3.579,
y2: 0.673
}
],
text: {
x: -3.483,
y: 0.13
}
},
{
sets: [
0,
1,
2
],
x1: 2.544,
y1: 1.878,
arcs: [
{
ref: 0,
mode: "i",
x2: 2.342,
y2: 2.381,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: 0.257,
y2: 2.922,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: 0.983,
y2: 2.049,
large: false
},
{
ref: 4,
mode: "o",
x2: 2.544,
y2: 1.878
}
],
text: {
x: 1.457,
y: 2.331
}
},
{
sets: [
0,
1,
3
],
x1: 1.51,
y1: -2.515,
arcs: [
{
ref: 1,
mode: "i",
x2: 2.5,
y2: -2.648,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: 2.572,
y2: -1.839,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: 1.51,
y2: -2.515,
large: false
}
],
text: {
x: 2.194,
y: -2.334
}
},
{
sets: [
0,
1,
4
],
x1: 2.572,
y1: -1.839,
arcs: [
{
ref: 4,
mode: "i",
x2: 2.988,
y2: -1.492,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: 2.858,
y2: 0.659,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 2.253,
y2: -0.302,
large: false
},
{
ref: 3,
mode: "o",
x2: 2.572,
y2: -1.839
}
],
text: {
x: 2.667,
y: -0.665
}
},
{
sets: [
0,
2,
3
],
x1: 0.257,
y1: 2.922,
arcs: [
{
ref: 3,
mode: "i",
x2: -0.466,
y2: 3.612,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: -1,
y2: 3,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 0.257,
y2: 2.922,
large: false
}
],
text: {
x: -0.403,
y: 3.178
}
},
{
sets: [
0,
2,
4
],
x1: -1.746,
y1: -3.196,
arcs: [
{
ref: 2,
mode: "i",
x2: -0.954,
y2: -3.015,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: -1.925,
y2: -2.213,
sweep: false,
large: false
},
{
ref: 0,
mode: "i",
x2: -1.746,
y2: -3.196,
sweep: true,
large: false
}
],
text: {
x: -1.542,
y: -2.808
}
},
{
sets: [
0,
3,
4
],
x1: -0.495,
y1: -3.303,
arcs: [
{
ref: 4,
mode: "i",
x2: 1.51,
y2: -2.515,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: 0.409,
y2: -2.236,
large: false
},
{
ref: 2,
mode: "o",
x2: -0.954,
y2: -3.015,
large: false
},
{
ref: 3,
mode: "i",
x2: -0.495,
y2: -3.303
}
],
text: {
x: 0.192,
y: -2.742
}
},
{
sets: [
1,
2,
3
],
x1: -1.54,
y1: 2.963,
arcs: [
{
ref: 2,
mode: "i",
x2: -2.7,
y2: 1.147,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: -1.645,
y2: 1.568,
large: false
},
{
ref: 0,
mode: "o",
x2: -1,
y2: 3,
large: false
},
{
ref: 1,
mode: "i",
x2: -1.54,
y2: 2.963
}
],
text: {
x: -1.767,
y: 2.106
}
},
{
sets: [
1,
2,
4
],
x1: 2.858,
y1: 0.659,
arcs: [
{
ref: 2,
mode: "i",
x2: 3.291,
y2: 1.559,
sweep: true,
large: false
},
{
ref: 4,
mode: "i",
x2: 2.544,
y2: 1.878,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: 2.858,
y2: 0.659,
large: false
}
],
text: {
x: 2.898,
y: 1.365
}
},
{
sets: [
1,
3,
4
],
x1: -2.7,
y1: 1.147,
arcs: [
{
ref: 4,
mode: "i",
x2: -3.579,
y2: 0.673,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: -3.162,
y2: -0.024,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: -2.7,
y2: 1.147,
large: false
}
],
text: {
x: -3.147,
y: 0.599
}
},
{
sets: [
2,
3,
4
],
x1: -3.294,
y1: -0.549,
arcs: [
{
ref: 3,
mode: "i",
x2: -1.925,
y2: -2.213,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: -2,
y2: -1.08,
large: false
},
{
ref: 1,
mode: "o",
x2: -3.162,
y2: -0.024,
large: false
},
{
ref: 2,
mode: "i",
x2: -3.294,
y2: -0.549
}
],
text: {
x: -2.548,
y: -1.029
}
},
{
sets: [
0,
1,
2,
3
],
x1: 0.983,
y1: 2.049,
arcs: [
{
ref: 3,
mode: "i",
x2: 0.257,
y2: 2.922,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: -1,
y2: 3,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: -1.645,
y2: 1.568,
sweep: true,
large: false
},
{
ref: 4,
mode: "o",
x2: 0.983,
y2: 2.049
}
],
text: {
x: -0.407,
y: 2.31
}
},
{
sets: [
0,
1,
2,
4
],
x1: 2.253,
y1: -0.302,
arcs: [
{
ref: 2,
mode: "i",
x2: 2.858,
y2: 0.659,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: 2.544,
y2: 1.878,
sweep: true,
large: false
},
{
ref: 4,
mode: "i",
x2: 0.983,
y2: 2.049,
sweep: true,
large: false
},
{
ref: 3,
mode: "o",
x2: 2.253,
y2: -0.302
}
],
text: {
x: 2.071,
y: 1.101
}
},
{
sets: [
0,
1,
3,
4
],
x1: 1.51,
y1: -2.515,
arcs: [
{
ref: 4,
mode: "i",
x2: 2.572,
y2: -1.839,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: 2.253,
y2: -0.302,
sweep: true,
large: false
},
{
ref: 2,
mode: "o",
x2: 0.409,
y2: -2.236,
sweep: false,
large: false
},
{
ref: 1,
mode: "i",
x2: 1.51,
y2: -2.515,
sweep: true
}
],
text: {
x: 1.687,
y: -1.63
}
},
{
sets: [
0,
2,
3,
4
],
x1: -2,
y1: -1.08,
arcs: [
{
ref: 0,
mode: "i",
x2: -1.925,
y2: -2.213,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: -0.954,
y2: -3.015,
sweep: true,
large: false
},
{
ref: 2,
mode: "i",
x2: 0.409,
y2: -2.236,
sweep: true,
large: false
},
{
ref: 1,
mode: "o",
x2: -2,
y2: -1.08
}
],
text: {
x: -1.028,
y: -2.108
}
},
{
sets: [
1,
2,
3,
4
],
x1: -1.645,
y1: 1.568,
arcs: [
{
ref: 4,
mode: "i",
x2: -2.7,
y2: 1.147,
sweep: true,
large: false
},
{
ref: 2,
mode: "i",
x2: -3.162,
y2: -0.024,
sweep: true,
large: false
},
{
ref: 1,
mode: "i",
x2: -2,
y2: -1.08,
sweep: true,
large: false
},
{
ref: 0,
mode: "o",
x2: -1.645,
y2: 1.568
}
],
text: {
x: -2.323,
y: 0.327
}
},
{
sets: [
0,
1,
2,
3,
4
],
x1: 0.409,
y1: -2.236,
arcs: [
{
ref: 2,
mode: "i",
x2: 2.253,
y2: -0.302,
sweep: true,
large: false
},
{
ref: 3,
mode: "i",
x2: 0.983,
y2: 2.049,
sweep: true,
large: false
},
{
ref: 4,
mode: "i",
x2: -1.645,
y2: 1.568,
sweep: true,
large: false
},
{
ref: 0,
mode: "i",
x2: -2,
y2: -1.08,
sweep: true
},
{
ref: 1,
mode: "i",
x2: 0.409,
y2: -2.236,
sweep: true
}
],
text: {
x: 0,
y: 0
}
}
];
const bb = {
x: -5.5,
y: -6,
width: 11.6,
height: 11.8
};
const venn5 = {
sets,
intersections,
bb
};
const shapes = [venn0, venn1, venn2, venn3, venn4, venn5];
const upto = (limit) => Array.from({ length: limit }, (_, i) => i);
function isEllipse(d) {
return typeof d.rx === "number";
}
function combinations(array) {
return new Array(1 << array.length).fill().map((_e1, i) => array.filter((_e2, j) => i & 1 << j));
}
function lookup(combo, data) {
const key = combo.join("|");
const found = data.find((d) => d.key === key);
return {
key,
sets: combo,
size: (found == null ? void 0 : found.size) || 0
};
}
function buildData(data) {
const uniqueSets = data.filter((d) => d.sets.length === 1).sort((a, b) => b.size - a.size);
const uniqueSetKeys = uniqueSets.map((u) => u.key);
const sets2 = combinations(uniqueSetKeys);
const filteredSets = sets2.slice(1, sets2.length);
const result = filteredSets.map(
(d) => [...d].sort((a, b) => uniqueSetKeys.indexOf(a) - uniqueSetKeys.indexOf(b))
);
result.sort(
(a, b) => a.length - b.length || upto(a.length).reduce(
(diff, i) => diff || uniqueSetKeys.indexOf(a[i]) - uniqueSetKeys.indexOf(b[i]),
0
)
);
const keyedData = data.map((d) => {
const sets22 = [...d.sets].sort(
(a, b) => uniqueSetKeys.indexOf(a) - uniqueSetKeys.indexOf(b)
);
const key = sets22.join("|");
return {
size: d.size,
sets: sets22,
key
};
});
return {
uniqueCount: uniqueSets.length,
data: result.map((r) => lookup(r, keyedData))
};
}
function generateArcSlicePath(s, refs) {
return `M ${s.x1},${s.y1} ${s.arcs.map((arc) => {
const ref = refs[arc.ref];
const rx = isEllipse(ref) ? ref.rx : ref.r;
const ry = isEllipse(ref) ? ref.ry : ref.r;
const rot = isEllipse(ref) ? ref.rotation : 0;
return `A ${rx} ${ry} ${rot} ${arc.large ? 1 : 0} ${arc.sweep ? 1 : 0} ${arc.x2} ${arc.y2}`;
}).join(" ")}`;
}
function buildLayout({ data, uniqueCount }, box) {
const shape = shapes[Math.min(shapes.length - 1, uniqueCount)];
const f = Math.min(box.width / shape.bb.width, box.height / shape.bb.height);
const x = f * -shape.bb.x + (box.width - f * shape.bb.width) / 2 + 0;
const y = f * -shape.bb.y + (box.height - f * shape.bb.height) / 2 + 0;
const mx = (v) => x + f * v;
const my = (v) => y + f * v;
const shapeSets = shape.sets.map((c, i) => ({
...c,
...{
data: data[i],
cx: mx(c.cx),
cy: my(c.cy),
text: {
x: mx(c.text.x),
y: my(c.text.y)
},
...c.icon ? {
icon: {
x: mx(c.icon.x),
y: my(c.icon.y)
}
} : {}
},
...isEllipse(c) ? {
rx: c.rx * f,
ry: c.ry * f
} : {
r: c.r * f
}
}));
const intersections2 = shape.intersections.map((c, i) => ({
text: {
x: mx(c.text.x),
y: my(c.text.y)
},
x1: mx(c.x1),
y1: my(c.y1),
data: data[i],
set: shapeSets[i],
arcs: c.arcs.map((a) => ({
...a,
x2: mx(a.x2),
y2: my(a.y2)
}))
}));
return intersections2.map((i) => ({
...i,
path: generateArcSlicePath(i, shapeSets)
}));
}
function starEulerLayout(data, bb2) {
return buildLayout(buildData(data), bb2);
}
const VennDiagram = ({
id,
type = "venn",
width,
height,
margins,
className,
containerClassName,
data,
disabled,
series = /* @__PURE__ */ jsxRuntime.jsx(VennSeries, {})
}) => {
const renderChart = react.useCallback(
(containerProps) => {
const normalized = data.map((d) => ({
key: d.key.join("|"),
sets: d.key,
size: d.data
}));
let layoutData;
if (type === "starEuler") {
layoutData = starEulerLayout(normalized, {
height: containerProps.height,
width: containerProps.width
});
} else {
layoutData = venn_js.layout(normalized, {
height: containerProps.height,
width: containerProps.width,
distinct: type !== "euler"
});
}
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
data: layoutData,
disabled,
id: containerProps.id
}
);
},
[data, disabled, series, type]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
xAxisVisible: false,
yAxisVisible: false,
center: false,
className,
children: renderChart
}
);
};
const Bubble = ({
id,
data,
fill,
mask,
gradient: gradient2,
glow,
onClick,
onMouseEnter,
onMouseLeave,
animated,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {})
}) => {
const [internalActive, setInternalActive] = react.useState(false);
const bubbleRef = react.useRef(null);
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setInternalActive(true);
onMouseEnter == null ? void 0 : onMouseEnter(event);
},
onPointerOut: (event) => {
setInternalActive(false);
onMouseLeave == null ? void 0 : onMouseLeave(event);
}
});
const arcFill = gradient2 && !mask ? `url(#gradient-${id})` : mask ? `url(#mask-pattern-${id})` : fill;
const tooltipData = react.useMemo(
() => ({ y: data.data.data, x: data.data.key }),
[data]
);
const ariaLabelData = react.useMemo(() => getAriaLabel(tooltipData), [tooltipData]);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.circle,
{
id: `${id}-bubble`,
ref: bubbleRef,
fill: arcFill,
style: generateGlowStyles({ glow }),
initial: {
r: data.r,
cx: data.x,
cy: data.y
},
animate: {
r: data.r,
cx: data.x,
cy: data.y
},
transition,
onClick: (event) => onClick && onClick(event, data),
onPointerOver: pointerOver,
onPointerOut: pointerOut,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document"
}
),
mask && /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(Mask, { id: `mask-${id}`, fill: `url(#gradient-${id})` }),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: mask,
id: `mask-pattern-${id}`,
fill
}
)
] }),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
color: fill
}
),
tooltip2 && !tooltip2.props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!internalActive,
reference: bubbleRef,
value: tooltipData
}
)
] });
};
const BubbleLabel = ({
id,
data,
format,
wrap = true,
fill,
fontSize = 14,
fontFamily = "sans-serif",
animated
}) => {
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
let isElement = false;
let label2;
if (format) {
label2 = format(data);
isElement = react.isValidElement(label2);
}
if (!isElement) {
const text = wrap ? wrapText({
key: data.data.key,
fontFamily,
fontSize,
width: data.r
}) : data.data.key;
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.text,
{
initial: {
x: data.x,
y: data.y
},
animate: {
x: data.x,
y: data.y
},
transition,
id: `${id}-text`,
style: { pointerEvents: "none", fontFamily, fontSize },
fill,
textAnchor: "middle",
children: text
}
);
}
return /* @__PURE__ */ jsxRuntime.jsx("g", { style: { transform: `translate(${data.x}px, ${data.y}px)` }, children: label2 });
};
const BubbleSeries = ({
id,
data,
colorScheme = "cybertron",
animated = true,
bubble = /* @__PURE__ */ jsxRuntime.jsx(Bubble, {}),
format,
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(BubbleLabel, {})
}) => {
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
const renderBubble = (item2, index) => {
const fill = getColor({
data,
colorScheme,
point: item2.data,
index
});
const textFill = fill ? invert(chroma(fill).darken(0.5).hex(), true) : "white";
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: {
scale: 0.5,
opacity: 0
},
animate: {
scale: 1,
opacity: 1
},
transition,
children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: format ? format(item2) : bubble,
id: safeIdentifier.identifier(`${id}-${item2.data.key}-bubble`),
animated,
data: item2,
fill
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
id: safeIdentifier.identifier(`${id}-${item2.data.key}-label`),
animated,
data: item2,
fill: textFill
}
)
]
},
item2.data.key
);
};
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data.map(renderBubble) });
};
const BubbleChart = ({
data = [],
id,
width,
height,
className,
containerClassName,
margins = 10,
series = /* @__PURE__ */ jsxRuntime.jsx(BubbleSeries, {})
}) => {
const getData = react.useCallback(
(cw, ch) => {
const bubble = d3Hierarchy.pack().size([cw, ch]).padding(3);
const root = d3Hierarchy.hierarchy({ children: data }).sum((d) => d.data).sort((a, b) => b.data - a.data);
return bubble(root).leaves();
},
[data]
);
const renderChart = react.useCallback(
({ chartWidth, chartHeight, ...rest }) => {
const circles = getData(chartWidth, chartHeight);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `${rest.id}-series`,
data: circles
}
);
},
[series, getData]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
containerClassName,
margins,
xAxisVisible: false,
yAxisVisible: false,
className,
children: renderChart
}
);
};
const TreeMapLabel = ({
id,
data,
fill = "#FFF",
wrap = true,
placement = "start",
fontSize = 14,
fontFamily = "sans-serif"
}) => {
const key = data.data.key;
const width = data.x1 - data.x0;
const text = wrapText({
key,
fontFamily,
fontSize,
paddingX: 10,
wrap,
paddingY: 10,
width,
height: data.y1 - data.y0
});
const size = calculateDimensions(
typeof text === "string" ? text : key,
fontFamily,
fontSize
);
const offsetX = placement === "start" ? 10 : placement === "middle" ? (width - size.width) / 2 : width - size.width - 10;
return /* @__PURE__ */ jsxRuntime.jsx("g", { style: { transform: `translate(${offsetX}px, 15px)` }, children: /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
id: `${id}-text`,
style: { pointerEvents: "none", fontFamily, fontSize },
fill,
children: text
}
) });
};
const TreeMapRect = ({
data,
fill,
animated,
cursor = "pointer",
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
onMouseEnter,
onMouseLeave,
onClick
}) => {
const [internalActive, setInternalActive] = react.useState(false);
const rectRef = react.useRef(null);
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
const currentFill = internalActive ? chroma(fill).darken(0.8).hex() : fill;
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setInternalActive(true);
onMouseEnter == null ? void 0 : onMouseEnter(event, data);
},
onPointerOut: (event) => {
setInternalActive(false);
onMouseLeave == null ? void 0 : onMouseLeave(event, data);
}
});
const tooltipLabel2 = react.useMemo(() => {
const getKey = (node2) => {
if (!node2.parent) {
return [];
}
return [...getKey(node2.parent), node2.data.key];
};
return getKey(data).join(" → ");
}, [data]);
const tooltipData = react.useMemo(
() => ({ y: data.value, x: tooltipLabel2 }),
[data, tooltipLabel2]
);
const ariaLabelData = react.useMemo(() => getAriaLabel(tooltipData), [tooltipData]);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.rect,
{
ref: rectRef,
initial: {
fill: currentFill,
width: data.x1 - data.x0,
height: data.y1 - data.y0
},
animate: {
fill: currentFill,
width: data.x1 - data.x0,
height: data.y1 - data.y0
},
style: { cursor },
transition,
onClick: (event) => {
onClick == null ? void 0 : onClick(event, data);
},
onPointerOver: pointerOver,
onPointerOut: pointerOut,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document"
}
),
tooltip2 && !tooltip2.props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!internalActive,
reference: rectRef,
value: tooltipData
}
)
] });
};
const TreeMapSeries = ({
id,
data,
colorScheme = "cybertron",
animated = true,
rect = /* @__PURE__ */ jsxRuntime.jsx(TreeMapRect, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(TreeMapLabel, {})
}) => {
const transition = animated ? DEFAULT_TRANSITION : { type: false, delay: 0 };
const renderItem = (item2, index) => {
const fill = getColor({
data,
colorScheme,
point: item2.data,
index
});
const textFill = fill ? invert(chroma(fill).darken(0.5).hex(), true) : "white";
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: {
scale: 0.5,
opacity: 0,
x: item2.x0,
y: item2.y0
},
animate: {
scale: 1,
opacity: 1,
x: item2.x0,
y: item2.y0
},
transition,
children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: rect,
id: `${id}-${item2.data.key}-rect`,
animated,
data: item2,
fill
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
id: `${id}-${item2.data.key}-label`,
data: item2,
fill: textFill
}
)
]
},
item2.data.key
);
};
return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: data.map((d, index) => renderItem(d, index)) });
};
const TreeMap = ({
data = [],
id,
containerClassName,
paddingInner = 5,
paddingTop = 30,
paddingOuter = 5,
width,
height,
className,
margins = 0,
series = /* @__PURE__ */ jsxRuntime.jsx(TreeMapSeries, {})
}) => {
const getData = react.useCallback(
(cw, ch) => {
const root = d3Hierarchy.hierarchy({ data }, (d) => d.data).sum((d) => d.data).sort((a, b) => b.data - a.data);
const t = d3Hierarchy.treemap().size([cw, ch]).tile(d3Hierarchy.treemapSquarify).round(true).paddingInner(paddingInner).paddingOuter(paddingOuter).paddingTop(paddingTop);
const tree = t(root);
const nodes = [];
const getAllNodes = (node2) => {
if (node2 == null ? void 0 : node2.parent) {
nodes.push(node2);
}
for (let child of (node2 == null ? void 0 : node2.children) || []) {
getAllNodes(child);
}
};
getAllNodes(tree);
return nodes;
},
[data, paddingInner, paddingOuter, paddingTop]
);
const renderChart = react.useCallback(
({ chartWidth, chartHeight, ...rest }) => {
const datas = getData(chartWidth, chartHeight);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
...rest,
id: `${id || rest.id}-series`,
data: datas
}
);
},
[series, getData, id]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
containerClassName,
margins,
xAxisVisible: false,
yAxisVisible: false,
className,
children: renderChart
}
);
};
const item = "_item_18e6r_1";
const labelStart = "_labelStart_18e6r_8";
const valueEnd = "_valueEnd_18e6r_9";
const labelBottom = "_labelBottom_18e6r_15";
const labelNone = "_labelNone_18e6r_24";
const label = "_label_18e6r_8";
const labelEnd = "_labelEnd_18e6r_35";
const valueStart = "_valueStart_18e6r_36";
const labelTop = "_labelTop_18e6r_42";
const valueBottom = "_valueBottom_18e6r_57";
const valueNone = "_valueNone_18e6r_65";
const valueLabel = "_valueLabel_18e6r_71";
const clickable$1 = "_clickable_18e6r_77";
const outerBar = "_outerBar_18e6r_97";
const bar = "_bar_18e6r_105";
const css$2 = {
item,
labelStart,
valueEnd,
labelBottom,
labelNone,
label,
labelEnd,
valueStart,
labelTop,
valueBottom,
valueNone,
valueLabel,
clickable: clickable$1,
outerBar,
bar
};
const BarListSeries = ({
data,
colorScheme = "cybertron",
itemClassName,
labelClassName,
outerBarClassName,
valueClassName,
labelFormat,
barClassName,
labelPosition = "top",
valuePosition = "none",
valueFormat,
onItemClick,
onItemMouseEnter,
onItemMouseLeave
}) => {
const renderBar = react.useCallback(
(item2, index) => {
const fill = getColor({
data,
colorScheme,
point: item2.data,
index
});
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(css$2.outerBar, outerBarClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.div,
{
transition: DEFAULT_TRANSITION,
className: classNames(css$2.bar, barClassName),
initial: { width: "0%" },
animate: { width: `${item2.data}%` },
style: { background: fill },
tabIndex: 0,
"aria-label": getAriaLabel(item2),
role: "graphics-document"
}
) });
},
[barClassName, outerBarClassName, colorScheme, data]
);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map((d, i) => {
const label2 = labelFormat ? labelFormat(d.key, i) : d.key;
const valueLabel2 = valueFormat ? valueFormat(d.metadata.value, i) : formatValue(d.metadata.value);
return /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
role: "listitem",
className: classNames(css$2.item, itemClassName, {
[css$2.clickable]: onItemClick,
[css$2.valueBottom]: valuePosition === "bottom",
[css$2.valueStart]: valuePosition === "start",
[css$2.valueEnd]: valuePosition === "end",
[css$2.valueNone]: valuePosition === "none",
[css$2.labelBottom]: labelPosition === "bottom",
[css$2.labelTop]: labelPosition === "top",
[css$2.labelStart]: labelPosition === "start",
[css$2.labelEnd]: labelPosition === "end",
[css$2.labelNone]: labelPosition === "none"
}),
onMouseEnter: () => onItemMouseEnter == null ? void 0 : onItemMouseEnter(d),
onMouseLeave: () => onItemMouseLeave == null ? void 0 : onItemMouseLeave(d),
onClick: () => onItemClick == null ? void 0 : onItemClick(d),
children: [
/* @__PURE__ */ jsxRuntime.jsx(
"label",
{
title: label2,
className: classNames(css$2.label, labelClassName),
children: label2
}
),
renderBar(d, i),
/* @__PURE__ */ jsxRuntime.jsx(
"label",
{
title: valueLabel2,
className: classNames(css$2.valueLabel, valueClassName),
children: /* @__PURE__ */ jsxRuntime.jsx("small", { children: valueLabel2 })
}
)
]
},
d.key
);
}) });
};
const BarList = ({
id,
className,
style,
data = [],
sortDirection = "desc",
series = /* @__PURE__ */ jsxRuntime.jsx(BarListSeries, {}),
type = "count"
}) => {
const curId = reablocks.useId(id);
const mashedData = react.useMemo(() => {
const maxVal = type === "count" ? d3Array.max(data, (d) => d.data) : 100;
const domainVal = maxVal == 0 ? [0] : [0, maxVal];
const groupScale = d3Scale.scaleLinear().domain(domainVal).rangeRound([0, 100]);
const mashed = data.map((d) => ({
...d,
data: groupScale(d.data),
metadata: {
value: d.data,
percent: data.length * d.data / 100
}
}));
if (sortDirection === "asc") {
mashed.sort((a, b) => a.data - b.data);
} else if (sortDirection === "desc") {
mashed.sort((a, b) => b.data - a.data);
}
return mashed;
}, [data, sortDirection]);
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.section,
{
role: "list",
variants: {
initial: {
transition: {
staggerChildren: 0.05,
staggerDirection: -1
}
},
animate: {
transition: {
staggerChildren: 0.07,
delayChildren: 0.2
}
}
},
id: curId,
className,
style,
children: /* @__PURE__ */ jsxRuntime.jsx(reablocks.CloneElement, { element: series, data: mashedData })
}
);
};
const MeterColumn = ({
index,
scale,
value: value2,
count,
height = 32,
className,
animated = true,
activeFill = schemes.cybertron[0],
inActiveFill = "#414242"
}) => {
const isActive = scale(index) <= scale(value2);
const fill = isActive ? activeFill : inActiveFill;
const transition = animated ? {
...DEFAULT_TRANSITION,
delay: index / count * 0.5
} : {
type: false,
delay: 0
};
return /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.div,
{
initial: {
background: inActiveFill,
height
},
animate: {
background: fill,
height
},
tranisition: transition,
className
},
index
);
};
const container = "_container_13giw_1";
const css$1 = {
container
};
const Meter = ({
min = 0,
max = 100,
className,
column = /* @__PURE__ */ jsxRuntime.jsx(MeterColumn, {}),
gap = 15,
style = {},
value: value2,
columns = 10
}) => {
const scale = d3Scale.scaleLinear().domain([min, max]).range([0, 100]);
const cols = scale.ticks(columns);
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
className: classNames(css$1.container, className),
style: { gap: `${gap}px`, ...style },
children: cols.map((index) => /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: column,
count: cols.length,
index,
scale,
value: value2
},
index
))
}
);
};
const RadarChartSeries = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadialAreaSeries, { ...RADAR_CHART_SERIES_DEFAULT_PROPS, ...props });
const RADAR_CHART_SERIES_DEFAULT_PROPS = {
area: null,
type: "grouped",
symbols: /* @__PURE__ */ jsxRuntime.jsx(RadialPointSeries, { show: true })
};
const RadarChart = (props) => {
var _a;
return /* @__PURE__ */ jsxRuntime.jsx(
RadialAreaChart,
{
...props,
series: /* @__PURE__ */ jsxRuntime.jsx(
RadarChartSeries,
{
...RADAR_CHART_SERIES_DEFAULT_PROPS,
...(_a = props == null ? void 0 : props.series) == null ? void 0 : _a.props
}
),
axis: /* @__PURE__ */ jsxRuntime.jsx(
RadialAxis,
{
type: "category",
arcs: /* @__PURE__ */ jsxRuntime.jsx(
RadialAxisArcSeries,
{
count: 5,
arc: null,
line: /* @__PURE__ */ jsxRuntime.jsx(RadialAxisArcLine, {})
}
)
}
)
}
);
};
const FunnelArc = (props) => {
const {
data,
id,
xScale,
opacity,
index,
variant,
yScale,
interpolation,
colorScheme,
gradient: gradient2,
glow,
tooltip: tooltip2
} = mergeDefaultProps(FUNNEL_ARC_DEFAULT_PROPS, props);
const internalData = [...data, data[data.length - 1]];
const areaGenerator = d3Shape.area().curve(interpolate(interpolation)).x((_d, i) => xScale(i)).y0(yScale(0)).y1(({ data: data2 }) => yScale(data2));
const areaMirrorGenerator = d3Shape.area().curve(interpolate(interpolation)).x((_d, i) => xScale(i)).y0(yScale(0)).y1(({ data: data2 }) => yScale(-data2));
const fillColor = getColor({
data,
domain: [0, 1, 2, 3],
colorScheme,
key: index
});
const fillTop = gradient2 ? `url(#gradient-${id}-top)` : fillColor;
const fillBottom = gradient2 ? `url(#gradient-${id}-bottom)` : fillColor;
const [height] = yScale.range();
const [_, width] = xScale.range();
const ariaLabelData = react.useMemo(() => getAriaLabel(data), [data]);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
xScale,
yScale,
data,
height,
width,
tooltip: /* @__PURE__ */ jsxRuntime.jsx(
ChartTooltip,
{
followCursor: true,
content: (data2, color) => {
const value2 = {
x: data2.key,
y: data2.data,
value: data2.data
};
return /* @__PURE__ */ jsxRuntime.jsx(TooltipTemplate, { value: value2, color });
}
}
),
children: /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
pointerEvents: tooltip2 ? "none" : "auto",
style: generateGlowStyles({ glow }),
"aria-label": ariaLabelData,
role: "graphics-document",
children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
d: areaGenerator(internalData),
fill: fillTop,
stroke: "none",
initial: {
opacity: 0
},
animate: {
opacity
}
}
),
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
d: areaMirrorGenerator(internalData),
fill: fillBottom,
stroke: "none",
initial: {
opacity: 0
},
animate: {
opacity
}
}
),
gradient2 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}-top`,
color: fillColor
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}-bottom`,
color: fillColor
}
)
] })
]
}
)
}
);
};
const FUNNEL_ARC_DEFAULT_PROPS = {
gradient: /* @__PURE__ */ jsxRuntime.jsx(
Gradient,
{
direction: "horizontal",
stops: [
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "0%", stopOpacity: 1 }, "stop"),
/* @__PURE__ */ jsxRuntime.jsx(GradientStop, { offset: "80%", stopOpacity: 0.5 }, "start")
]
}
),
interpolation: "smooth",
colorScheme: schemes.cybertron[0],
variant: "default",
opacity: 1,
tooltip: null
};
const FunnelAxisLabel = ({
data,
index,
xScale,
yScale,
fontFamily = "sans-serif",
padding = 10,
fontSize = 13,
fill = "#fff",
className,
position = "middle",
showValue = true,
labelVisibility = "auto"
}) => {
const x = xScale(index) + padding;
const [height] = yScale.range();
const y = height / 2 + padding;
const label2 = data.key;
const nextOffset = xScale(index + 1);
const width = (nextOffset ? nextOffset - xScale(index) : 0) - padding;
const size = calculateDimensions(label2, fontFamily, fontSize);
const text = wrapText({
key: label2,
size,
paddingY: padding,
paddingX: padding,
width,
height,
fontFamily,
fontSize,
visibility: labelVisibility
});
const getTransformString = react.useCallback(() => {
let transform;
switch (position) {
case "top":
transform = `translate(${x}, ${fontSize * 3})`;
break;
case "middle":
transform = `translate(${x}, ${y})`;
break;
case "bottom":
{
const textWrapHeight = Array.isArray(text) ? text.slice(1).reduce((acc, curr) => acc + curr.props.dy, 0) : 0;
transform = `translate(${x}, ${height - padding - textWrapHeight})`;
}
break;
}
return transform;
}, [position, x, fontSize, y, text, height, padding]);
if (labelVisibility !== "always" && size.width > width) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
transform: getTransformString(),
initial: { opacity: 0 },
animate: { opacity: 1 },
children: [
showValue && /* @__PURE__ */ jsxRuntime.jsx(
"text",
{
pointerEvents: "none",
fill,
y: -(fontSize + padding),
className,
dominantBaseline: "middle",
fontFamily,
fontSize: fontSize * 2,
children: formatValue(data.data)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
"text",
{
pointerEvents: "none",
fill,
className,
dominantBaseline: "middle",
fontFamily,
fontSize,
children: text
}
)
]
}
);
};
const FunnelAxisLine = ({
strokeColor = "#333",
strokeWidth = 2,
yScale,
xScale,
index
}) => {
const [height] = yScale.range();
return /* @__PURE__ */ jsxRuntime.jsx(
"line",
{
x1: xScale(index),
y1: 0,
x2: xScale(index),
y2: height,
stroke: strokeColor,
strokeWidth,
pointerEvents: "none"
}
);
};
const FunnelAxis = ({
data,
xScale,
yScale,
line: line2 = /* @__PURE__ */ jsxRuntime.jsx(FunnelAxisLine, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(FunnelAxisLabel, {})
}) => {
const lines = d3Array.range(0, data.length);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lines.map((index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
line2 && index !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: line2,
index,
xScale,
yScale
}
),
label2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
index,
data: data[index],
xScale,
yScale
}
)
] }, index)) });
};
const FunnelSeries = ({
data,
id,
arc = /* @__PURE__ */ jsxRuntime.jsx(FunnelArc, {}),
axis = /* @__PURE__ */ jsxRuntime.jsx(FunnelAxis, {}),
height,
width,
onSegmentClick
}) => {
const arcProps = react.useMemo(
() => ({ ...FUNNEL_ARC_DEFAULT_PROPS, ...(arc == null ? void 0 : arc.props) ?? {} }),
[arc == null ? void 0 : arc.props]
);
const getScales = react.useCallback(
(height2, width2) => {
const yScale = d3Scale.scaleLinear().domain([-d3Array.max(data, ({ data: data2 }) => data2), d3Array.max(data, ({ data: data2 }) => data2)]).nice().range([height2, 0]);
const xScale = d3Scale.scaleLinear().domain([0, data.length]).range([0, width2]);
const transformedData = data.map((d, i) => ({
...d,
key: d.key,
x: xScale(i),
i
}));
return {
data: transformedData,
yScale,
xScale
};
},
[data]
);
const { datas, halfOffset } = react.useMemo(() => {
if (arcProps.variant === "layered") {
const offset = height / 4;
const halfOffset2 = offset / 2;
return {
halfOffset: halfOffset2,
datas: [
{ data, ...getScales(height, width) },
{ data, ...getScales(height - offset, width) },
{ data, ...getScales(height - offset * 2, width) }
]
};
} else {
return {
halfOffset: 0,
datas: [{ data, ...getScales(height, width) }]
};
}
}, [data, arcProps, height, width, getScales]);
const handleSegmentClick = react.useCallback(
(e) => {
if (onSegmentClick) {
const { xScale, data: data2 } = datas[0];
const { clientX, clientY, target } = e;
const position = getPositionForTarget({ target, clientX, clientY });
const value2 = getClosestContinousScalePoint({
pos: position.x,
scale: xScale,
data: data2,
attr: "i"
});
onSegmentClick({
value: { key: value2.key, data: value2.data },
nativeEvent: e
});
}
},
[datas, onSegmentClick]
);
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
datas.map((d, i) => /* @__PURE__ */ jsxRuntime.jsx(
"g",
{
style: { transform: `translate(0, ${i * halfOffset}px)` },
onClick: handleSegmentClick,
children: /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arc,
...d,
id: `${id}-arc-${i}`,
index: i
}
)
},
i
)),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: axis,
data,
xScale: datas[0].xScale,
yScale: datas[0].yScale
}
)
] });
};
const FunnelChart = ({
data,
width,
margins = 0,
height,
className,
containerClassName,
series = /* @__PURE__ */ jsxRuntime.jsx(FunnelSeries, {}),
...rest
}) => {
const id = reablocks.useId(rest.id);
const renderChart = react.useCallback(
({ id: id2, chartWidth, chartHeight, chartSized }) => {
if (!chartSized) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `funnel-series-${id2}`,
data,
height: chartHeight,
width: chartWidth
}
);
},
[data, series]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id,
width,
height,
margins,
containerClassName,
className,
children: renderChart
}
);
};
const useInterpolate = ({ animated, initial, path: path2 }) => {
const transition = animated ? { ...DEFAULT_TRANSITION } : {
delay: 0,
type: false
};
const d = react$1.useMotionValue(initial);
const spring = react$1.useSpring(0, { stiffness: 300, damping: 30 });
react.useEffect(() => {
const interpolator = d3Interpolate.interpolate(d.get(), path2);
const prevSpring = spring.get();
spring.set(1 + prevSpring);
return spring.on("change", (v) => d.set(interpolator(v - prevSpring)));
}, [d, path2, spring]);
return { transition, d: animated ? d : path2 };
};
const SunburstArc = ({
id,
radius,
fill,
data,
cursor = "pointer",
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {}),
animated,
gradient: gradient2,
onClick,
onMouseEnter,
onMouseLeave
}) => {
const [internalActive, setInternalActive] = react.useState(false);
const arcRef = react.useRef(null);
const getPath = react.useCallback(
(item2) => {
return d3Shape.arc().startAngle((d2) => d2.x0).endAngle((d2) => d2.x1).padAngle((d2) => Math.min((d2.x1 - d2.x0) / 2, 5e-3)).padRadius(radius / 2).innerRadius((d2) => d2.y0).outerRadius((d2) => d2.y1 - 1)(item2);
},
[radius]
);
const p = data.parent || { x0: 0, x1: 0, y0: 0, y1: 0 };
const initial = getPath({
x0: (data.x0 - p.x0) / (p.x1 - p.x0) * 2 * Math.PI,
x1: (data.x1 - p.x0) / (p.x1 - p.x0) * 2 * Math.PI,
y0: 0,
y1: 0
});
const animate = getPath(data);
const ariaLabelData = getAriaLabel(data.data);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setInternalActive(true);
onMouseEnter == null ? void 0 : onMouseEnter(event, data);
},
onPointerOut: (event) => {
setInternalActive(false);
onMouseLeave == null ? void 0 : onMouseLeave(event, data);
}
});
const tooltipLabel2 = react.useMemo(() => {
const getKey = (node2) => {
if (!node2.parent) {
return [];
}
return [...getKey(node2.parent), node2.data.key];
};
return getKey(data).join(" → ");
}, [data]);
const tooltipData = react.useMemo(
() => ({ y: data.value, x: tooltipLabel2 }),
[data, tooltipLabel2]
);
const currentFill = react.useMemo(
() => internalActive ? chroma(fill).brighten(0.5).hex() : fill,
[fill, internalActive]
);
const pathFill = gradient2 ? `url(#gradient-${id})` : currentFill;
const { transition, d } = useInterpolate({
animated,
path: animate,
initial
});
return /* @__PURE__ */ jsxRuntime.jsxs(
"g",
{
ref: arcRef,
tabIndex: 0,
"aria-label": ariaLabelData,
role: "graphics-document",
children: [
/* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.path,
{
id,
fill: pathFill,
d,
initial: { opacity: 0 },
animate: { opacity: 1 },
role: "graphics-symbol",
tabIndex: 0,
style: { cursor },
transition,
"aria-label": ariaLabelData,
onClick: (event) => onClick == null ? void 0 : onClick(event, data),
onPointerOver: pointerOver,
onPointerOut: pointerOut
}
),
gradient2 && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: gradient2,
id: `gradient-${id}`,
direction: "vertical",
color: currentFill
}
),
tooltip2 && !tooltip2.props.disabled && /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: !!internalActive,
reference: arcRef,
value: tooltipData
}
)
]
}
);
};
const SunburstArcLabel = ({
data,
animated,
fill = "black",
fontSize = 14,
fontFamily = "sans-serif",
radius
}) => {
const fullText = data.data.key;
const text = ellipsize(fullText, 10);
fill = invert(fill, true);
function labelTransform(d) {
const x = (data.x0 + data.x1) / 2 * 180 / Math.PI;
const y = (data.y0 + data.y1) / 2;
return `rotate(${x - 90}deg) translate(${y}px,0) rotate(${x < 180 ? 0 : 180}deg)`;
}
function labelVisible2(d) {
return (d.y1 - d.y0) * (d.x1 - d.x0) > 0.05;
}
const transition = react.useMemo(() => {
if (animated) {
return {
...DEFAULT_TRANSITION
};
} else {
return {
type: false,
delay: 0
};
}
}, [animated]);
if (!labelVisible2(data)) {
return null;
}
return /* @__PURE__ */ jsxRuntime.jsxs(
react$1.motion.g,
{
initial: { opacity: 0 },
animate: { opacity: 1 },
style: { transform: labelTransform() },
fontFamily,
fontSize,
transition,
children: [
/* @__PURE__ */ jsxRuntime.jsx("title", { children: fullText }),
/* @__PURE__ */ jsxRuntime.jsx(
"text",
{
style: {
pointerEvents: "none",
userSelect: "none"
},
fill,
dy: "0.35em",
textAnchor: "middle",
children: text
}
)
]
}
);
};
const SunburstSeries = ({
id,
data,
radius,
colorScheme = "cybertron",
animated = true,
arc = /* @__PURE__ */ jsxRuntime.jsx(SunburstArc, {}),
label: label2 = /* @__PURE__ */ jsxRuntime.jsx(SunburstArcLabel, {})
}) => {
const getFill = react.useCallback(
(item2, index) => {
let parent = item2;
while (parent.depth > 1) {
parent = parent.parent;
}
let fill = getColor({
data,
colorScheme,
point: parent.data,
index
});
fill = chroma(fill).darken((item2.depth - 1) * 0.5).hex();
return fill;
},
[colorScheme, data]
);
const renderItem = react.useCallback(
(item2, index) => {
const fill = getFill(item2, index);
const getItemId = (item22) => {
if (item22.parent) {
return `${getItemId(item22.parent)}-${item22.data.key}`;
}
return `${item22.data.key}`;
};
const itemId = getItemId(item2);
const safeKey = safeIdentifier.identifier(itemId);
return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: arc,
id: `${id}-${safeKey}-arc`,
fill,
radius,
animated,
data: item2
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: label2,
id: `${id}-${safeKey}-label`,
fill,
data: item2,
radius,
animated
}
)
] }, safeKey);
},
[animated, arc, getFill, id, label2, radius]
);
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.map(renderItem) });
};
const SunburstChart = ({
data = [],
id,
series = /* @__PURE__ */ jsxRuntime.jsx(SunburstSeries, {}),
containerClassName,
width,
height,
className,
margins = 0
}) => {
const newId = reablocks.useId(id);
const getData = react.useCallback(
(radius) => {
const rootHierarchy = d3Hierarchy.hierarchy({ data }, (d) => d.data).sum((d) => d.data).sort((a, b) => b.data - a.data);
const root = d3Hierarchy.partition().size([2 * Math.PI, radius])(rootHierarchy);
const nodes = [];
const getAllNodes = (node2) => {
if (node2 == null ? void 0 : node2.parent) {
nodes.push(node2);
}
for (let child of (node2 == null ? void 0 : node2.children) || []) {
getAllNodes(child);
}
};
getAllNodes(root);
return nodes;
},
[data]
);
const renderChart = react.useCallback(
({ chartWidth, chartHeight, ...rest }) => {
const radius = Math.min(chartWidth, chartHeight) / 2;
const root = getData(radius);
return /* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: series,
id: `${newId}-series`,
data: root,
radius
}
);
},
[getData, newId, series]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
id: newId,
width,
height,
containerClassName,
margins,
xAxisVisible: false,
yAxisVisible: false,
center: true,
className,
children: renderChart
}
);
};
const wordLabel = "_wordLabel_uwka2_1";
const clickable = "_clickable_uwka2_5";
const css = {
wordLabel,
clickable
};
const WordCloudLabel = ({
text,
fontSize,
fontFamily,
fill,
x,
y,
rotate,
data,
onClick,
className,
onMouseEnter,
onMouseLeave,
tooltip: tooltip2 = /* @__PURE__ */ jsxRuntime.jsx(ChartTooltip, {})
}) => {
const [tooltipVisible, setTooltipVisible] = react.useState(false);
const labelRef = react.useRef(null);
const { pointerOut, pointerOver } = useHoverIntent({
onPointerOver: (event) => {
setTooltipVisible(true);
onMouseEnter == null ? void 0 : onMouseEnter(event, data);
},
onPointerOut: (event) => {
setTooltipVisible(false);
onMouseLeave == null ? void 0 : onMouseLeave(event, data);
}
});
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(
"g",
{
ref: labelRef,
className: classNames(css.wordLabel, className, {
[css.clickable]: !!onClick
}),
onPointerOut: pointerOut,
onPointerOver: pointerOver,
onClick: (event) => onClick == null ? void 0 : onClick(event, data),
children: /* @__PURE__ */ jsxRuntime.jsx(
react$1.motion.text,
{
style: {
fontSize: `${fontSize}px`,
fontFamily,
fill,
cursor: onClick ? "pointer" : "default"
},
textAnchor: "middle",
initial: {
opacity: 0,
x,
y,
rotate
},
animate: {
opacity: 1,
x,
y,
rotate
},
exit: {
opacity: 0,
x,
y,
rotate
},
whileHover: {
opacity: 0.7,
transition: { duration: 0.2 }
},
children: text
}
)
}
),
/* @__PURE__ */ jsxRuntime.jsx(
reablocks.CloneElement,
{
element: tooltip2,
visible: tooltipVisible,
reference: labelRef,
value: {
x: text,
value: data.data
}
}
)
] });
};
const WordCloud = ({
data = [],
width,
height,
fontSizeRange = [12, 50],
fontFamily = "Arial",
padding = 3,
rotationAngles = [-30, 30],
rotations = 2,
colorScheme = schemes.cybertron,
onLabelClick,
onLabelMouseEnter,
onLabelMouseLeave,
margins,
className,
containerClassName
}) => {
const buildData2 = react.useCallback(
(chartWidth, chartHeight) => {
const sizeScale = d3Scale.scaleLinear().domain([0, d3Array.max(data, (d) => Number(d.data)) || 0]).range(fontSizeRange);
const layout = cloud().size([chartWidth, chartHeight]).words(
data.map((d, index) => ({
text: String(d.key),
size: sizeScale(Number(d.data)),
color: getColor({
colorScheme,
index,
point: d,
data
}),
data: d
}))
).padding(padding).font(fontFamily).fontSize((d) => d.size).rotate(
() => rotations > 0 ? Math.floor(Math.random() * rotations) * (rotationAngles[1] - rotationAngles[0]) / (rotations - 1) + rotationAngles[0] : 0
);
layout.start();
const words = layout.words();
return words;
},
[
colorScheme,
data,
fontFamily,
fontSizeRange,
padding,
rotationAngles,
rotations
]
);
const renderChart = react.useCallback(
({ chartHeight, chartWidth }) => {
const words = buildData2(chartWidth, chartHeight);
return words.map((word, i) => /* @__PURE__ */ jsxRuntime.jsx(
WordCloudLabel,
{
text: word.text,
fontSize: word.size,
fontFamily,
fill: word.color,
x: word.x || 0,
y: word.y || 0,
rotate: word.rotate || 0,
data: word.data,
onClick: onLabelClick,
onMouseEnter: onLabelMouseEnter,
onMouseLeave: onLabelMouseLeave
},
`${word.text}-${i}`
));
},
[buildData2, fontFamily, onLabelClick, onLabelMouseEnter, onLabelMouseLeave]
);
return /* @__PURE__ */ jsxRuntime.jsx(
ChartContainer,
{
width,
height,
margins,
className,
containerClassName,
center: true,
children: renderChart
}
);
};
exports2.AREA_CHART_DEFAULT_PROPS = AREA_CHART_DEFAULT_PROPS;
exports2.AREA_DEFAULT_PROPS = AREA_DEFAULT_PROPS;
exports2.AREA_SERIES_DEFAULT_PROPS = AREA_SERIES_DEFAULT_PROPS;
exports2.Area = Area;
exports2.AreaChart = AreaChart;
exports2.AreaSeries = AreaSeries;
exports2.AreaSparklineChart = AreaSparklineChart;
exports2.BAR_DEFAULT_PROPS = BAR_DEFAULT_PROPS;
exports2.BAR_LABEL_DEFAULT_PROPS = BAR_LABEL_DEFAULT_PROPS;
exports2.BAR_SERIES_DEFAULT_PROPS = BAR_SERIES_DEFAULT_PROPS;
exports2.Bar = Bar;
exports2.BarChart = BarChart;
exports2.BarLabel = BarLabel;
exports2.BarList = BarList;
exports2.BarListSeries = BarListSeries;
exports2.BarSeries = BarSeries;
exports2.BarSparklineChart = BarSparklineChart;
exports2.Brush = Brush;
exports2.BrushHandle = BrushHandle;
exports2.BrushSlice = BrushSlice;
exports2.Bubble = Bubble;
exports2.BubbleChart = BubbleChart;
exports2.BubbleLabel = BubbleLabel;
exports2.BubbleSeries = BubbleSeries;
exports2.COUNT_DEFAULTS = COUNT_DEFAULTS;
exports2.CalendarHeatmap = CalendarHeatmap;
exports2.ChartBrush = ChartBrush;
exports2.ChartConsumer = ChartConsumer;
exports2.ChartContainer = ChartContainer;
exports2.ChartContext = ChartContext;
exports2.ChartProvider = ChartProvider;
exports2.ChartTooltip = ChartTooltip;
exports2.ChartZoomPan = ChartZoomPan;
exports2.Count = Count;
exports2.DEFAULT_TRANSITION = DEFAULT_TRANSITION;
exports2.DiscreteLegend = DiscreteLegend;
exports2.DiscreteLegendEntry = DiscreteLegendEntry;
exports2.DiscreteLegendSymbol = DiscreteLegendSymbol;
exports2.FUNNEL_ARC_DEFAULT_PROPS = FUNNEL_ARC_DEFAULT_PROPS;
exports2.FunnelArc = FunnelArc;
exports2.FunnelAxis = FunnelAxis;
exports2.FunnelAxisLabel = FunnelAxisLabel;
exports2.FunnelAxisLine = FunnelAxisLine;
exports2.FunnelChart = FunnelChart;
exports2.FunnelSeries = FunnelSeries;
exports2.GRID_LINE_DEFAULT_PROPS = GRID_LINE_DEFAULT_PROPS;
exports2.GRID_STRIPE_DEFAULT_PROPS = GRID_STRIPE_DEFAULT_PROPS;
exports2.Gradient = Gradient;
exports2.GradientStop = GradientStop;
exports2.GridStripe = GridStripe;
exports2.Gridline = Gridline;
exports2.GridlineSeries = GridlineSeries;
exports2.GuideBar = GuideBar;
exports2.HEATMAP_SERIES_DEFAULT_PROPS = HEATMAP_SERIES_DEFAULT_PROPS;
exports2.HISTOGRAM_BAR_SERIES_DEFAULT_PROPS = HISTOGRAM_BAR_SERIES_DEFAULT_PROPS;
exports2.Heatmap = Heatmap;
exports2.HeatmapCell = HeatmapCell;
exports2.HeatmapSeries = HeatmapSeries;
exports2.HistogramBarChart = HistogramBarChart;
exports2.HistogramBarSeries = HistogramBarSeries;
exports2.LINEAR_AXIS_DEFAULT_PROPS = LINEAR_AXIS_DEFAULT_PROPS;
exports2.LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS = LINEAR_AXIS_TICK_LABEL_DEFAULT_PROPS;
exports2.LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS = LINEAR_AXIS_TICK_LINE_DEFAULT_PROPS;
exports2.LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS = LINEAR_AXIS_TICK_SERIES_DEFAULT_PROPS;
exports2.LINEAR_X_AXIS_DEFAULT_PROPS = LINEAR_X_AXIS_DEFAULT_PROPS;
exports2.LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS = LINEAR_X_AXIS_TICK_LABEL_DEFAULT_PROPS;
exports2.LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS = LINEAR_X_AXIS_TICK_LINE_DEFAULT_PROPS;
exports2.LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS = LINEAR_X_AXIS_TICK_SERIES_DEFAULT_PROPS;
exports2.LINEAR_Y_AXIS_DEFAULT_PROPS = LINEAR_Y_AXIS_DEFAULT_PROPS;
exports2.LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS = LINEAR_Y_AXIS_TICK_LABEL_DEFAULT_PROPS;
exports2.LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS = LINEAR_Y_AXIS_TICK_LINE_DEFAULT_PROPS;
exports2.LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS = LINEAR_Y_AXIS_TICK_SERIES_DEFAULT_PROPS;
exports2.Line = Line;
exports2.LineChart = LineChart;
exports2.LineSeries = LineSeries;
exports2.LinearAxis = LinearAxis;
exports2.LinearAxisLine = LinearAxisLine;
exports2.LinearAxisTickLabel = LinearAxisTickLabel;
exports2.LinearAxisTickLine = LinearAxisTickLine;
exports2.LinearAxisTickSeries = LinearAxisTickSeries;
exports2.LinearGauge = LinearGauge;
exports2.LinearGaugeBar = LinearGaugeBar;
exports2.LinearGaugeOuterBar = LinearGaugeOuterBar;
exports2.LinearGaugeSeries = LinearGaugeSeries;
exports2.LinearValueMarker = LinearValueMarker;
exports2.LinearXAxis = LinearXAxis;
exports2.LinearXAxisTickLabel = LinearXAxisTickLabel;
exports2.LinearXAxisTickLine = LinearXAxisTickLine;
exports2.LinearXAxisTickSeries = LinearXAxisTickSeries;
exports2.LinearYAxis = LinearYAxis;
exports2.LinearYAxisTickLabel = LinearYAxisTickLabel;
exports2.LinearYAxisTickLine = LinearYAxisTickLine;
exports2.LinearYAxisTickSeries = LinearYAxisTickSeries;
exports2.MARIMEKKO_BAR_SERIES_DEFAULT_PROPS = MARIMEKKO_BAR_SERIES_DEFAULT_PROPS;
exports2.Map = Map$1;
exports2.MapMarker = MapMarker;
exports2.MarimekkoBarSeries = MarimekkoBarSeries;
exports2.MarimekkoChart = MarimekkoChart;
exports2.MarkLine = MarkLine;
exports2.Mask = Mask;
exports2.Meter = Meter;
exports2.MeterColumn = MeterColumn;
exports2.MotionPath = MotionPath;
exports2.Move = Move;
exports2.PIE_ARC_LABEL_DEFAULT_PROPS = PIE_ARC_LABEL_DEFAULT_PROPS;
exports2.PIE_ARC_SERIES_DEFAULT_PROPS = PIE_ARC_SERIES_DEFAULT_PROPS;
exports2.POINT_SERIES_DEFAULT_PROPS = POINT_SERIES_DEFAULT_PROPS;
exports2.Pan = Pan;
exports2.PieArc = PieArc;
exports2.PieArcLabel = PieArcLabel;
exports2.PieArcSeries = PieArcSeries;
exports2.PieChart = PieChart;
exports2.PointSeries = PointSeries;
exports2.RADAR_CHART_SERIES_DEFAULT_PROPS = RADAR_CHART_SERIES_DEFAULT_PROPS;
exports2.RADIAL_AREA_SERIES_DEFAULT_PROPS = RADIAL_AREA_SERIES_DEFAULT_PROPS;
exports2.RADIAL_AXIS_ARC_DEFAULT_PROPS = RADIAL_AXIS_ARC_DEFAULT_PROPS;
exports2.RADIAL_AXIS_ARC_LINE_DEFAULT_PROPS = RADIAL_AXIS_ARC_LINE_DEFAULT_PROPS;
exports2.RADIAL_AXIS_ARC_SERIES_DEFAULT_PROPS = RADIAL_AXIS_ARC_SERIES_DEFAULT_PROPS;
exports2.RADIAL_AXIS_DEFAULT_PROPS = RADIAL_AXIS_DEFAULT_PROPS;
exports2.RADIAL_AXIS_TICK_LINE_DEFAULT_PROPS = RADIAL_AXIS_TICK_LINE_DEFAULT_PROPS;
exports2.RADIAL_POINT_SERIES_DEFAULT_PROPS = RADIAL_POINT_SERIES_DEFAULT_PROPS;
exports2.RADIAL_SCATTER_POINT_DEFAULT_PROPS = RADIAL_SCATTER_POINT_DEFAULT_PROPS;
exports2.RadarChart = RadarChart;
exports2.RadarChartSeries = RadarChartSeries;
exports2.RadialArea = RadialArea;
exports2.RadialAreaChart = RadialAreaChart;
exports2.RadialAreaSeries = RadialAreaSeries;
exports2.RadialAxis = RadialAxis;
exports2.RadialAxisArc = RadialAxisArc;
exports2.RadialAxisArcLine = RadialAxisArcLine;
exports2.RadialAxisArcSeries = RadialAxisArcSeries;
exports2.RadialAxisTick = RadialAxisTick;
exports2.RadialAxisTickLabel = RadialAxisTickLabel;
exports2.RadialAxisTickLine = RadialAxisTickLine;
exports2.RadialAxisTickSeries = RadialAxisTickSeries;
exports2.RadialBar = RadialBar;
exports2.RadialBarChart = RadialBarChart;
exports2.RadialBarSeries = RadialBarSeries;
exports2.RadialGauge = RadialGauge;
exports2.RadialGaugeArc = RadialGaugeArc;
exports2.RadialGaugeLabel = RadialGaugeLabel;
exports2.RadialGaugeOuterArc = RadialGaugeOuterArc;
exports2.RadialGaugeSeries = RadialGaugeSeries;
exports2.RadialGaugeStackedArc = RadialGaugeStackedArc;
exports2.RadialGaugeValueLabel = RadialGaugeValueLabel;
exports2.RadialGradient = RadialGradient;
exports2.RadialGuideBar = RadialGuideBar;
exports2.RadialLine = RadialLine;
exports2.RadialPointSeries = RadialPointSeries;
exports2.RadialScatterPlot = RadialScatterPlot;
exports2.RadialScatterPoint = RadialScatterPoint;
exports2.RadialScatterSeries = RadialScatterSeries;
exports2.RadialValueMarker = RadialValueMarker;
exports2.RangeLines = RangeLines;
exports2.SCATTER_POINT_DEFAULT_PROPS = SCATTER_POINT_DEFAULT_PROPS;
exports2.STACKED_BAR_SERIES_DEFAULT_PROPS = STACKED_BAR_SERIES_DEFAULT_PROPS;
exports2.STACKED_NORMALIZED_BAR_SERIES_DEFAULT_PROPS = STACKED_NORMALIZED_BAR_SERIES_DEFAULT_PROPS;
exports2.Sankey = Sankey;
exports2.SankeyLabel = SankeyLabel;
exports2.SankeyLink = SankeyLink;
exports2.SankeyNode = SankeyNode;
exports2.ScatterPlot = ScatterPlot;
exports2.ScatterPoint = ScatterPoint;
exports2.ScatterSeries = ScatterSeries;
exports2.SequentialLegend = SequentialLegend;
exports2.SonarChart = SonarChart;
exports2.SparklineChart = SparklineChart;
exports2.StackedAreaChart = StackedAreaChart;
exports2.StackedAreaSeries = StackedAreaSeries;
exports2.StackedBarChart = StackedBarChart;
exports2.StackedBarSeries = StackedBarSeries;
exports2.StackedNormalizedAreaChart = StackedNormalizedAreaChart;
exports2.StackedNormalizedAreaSeries = StackedNormalizedAreaSeries;
exports2.StackedNormalizedBarChart = StackedNormalizedBarChart;
exports2.StackedNormalizedBarSeries = StackedNormalizedBarSeries;
exports2.StackedRadialGaugeDescriptionLabel = StackedRadialGaugeDescriptionLabel;
exports2.StackedRadialGaugeSeries = StackedRadialGaugeSeries;
exports2.StackedRadialGaugeValueLabel = StackedRadialGaugeValueLabel;
exports2.Stripes = Stripes;
exports2.SunburstArc = SunburstArc;
exports2.SunburstArcLabel = SunburstArcLabel;
exports2.SunburstChart = SunburstChart;
exports2.SunburstSeries = SunburstSeries;
exports2.TooltipArea = TooltipArea;
exports2.TooltipTemplate = TooltipTemplate;
exports2.TreeMap = TreeMap;
exports2.TreeMapLabel = TreeMapLabel;
exports2.TreeMapRect = TreeMapRect;
exports2.TreeMapSeries = TreeMapSeries;
exports2.VennArc = VennArc;
exports2.VennDiagram = VennDiagram;
exports2.VennLabel = VennLabel;
exports2.VennOuterLabel = VennOuterLabel;
exports2.VennSeries = VennSeries;
exports2.WordCloud = WordCloud;
exports2.WordCloudLabel = WordCloudLabel;
exports2.Zoom = Zoom;
exports2.ZoomPan = ZoomPan;
exports2.addWeeksToDate = addWeeksToDate;
exports2.bigIntegerToLocaleString = bigIntegerToLocaleString;
exports2.buildBarStackData = buildBarStackData;
exports2.buildBins = buildBins;
exports2.buildDataScales = buildDataScales;
exports2.buildMarimekkoData = buildMarimekkoData;
exports2.buildNestedChartData = buildNestedChartData;
exports2.buildShallowChartData = buildShallowChartData;
exports2.buildStackData = buildStackData;
exports2.buildWaterfall = buildWaterfall;
exports2.calculateDimensions = calculateDimensions;
exports2.calculateShowStroke = calculateShowStroke;
exports2.constrainMatrix = constrainMatrix;
exports2.constructFunctionProps = constructFunctionProps;
exports2.createColorSchemeValueScales = createColorSchemeValueScales;
exports2.extent = extent;
exports2.formatValue = formatValue;
exports2.functionProps = functionProps;
exports2.getAriaLabel = getAriaLabel;
exports2.getClosestBandScalePoint = getClosestBandScalePoint;
exports2.getClosestContinousScalePoint = getClosestContinousScalePoint;
exports2.getColor = getColor;
exports2.getColorSchemeStyles = getColorSchemeStyles;
exports2.getDegrees = getDegrees;
exports2.getDimension = getDimension;
exports2.getDurationTicks = getDurationTicks;
exports2.getGroupScale = getGroupScale;
exports2.getInnerScale = getInnerScale;
exports2.getLimitMatrix = getLimitMatrix;
exports2.getMarimekkoGroupScale = getMarimekkoGroupScale;
exports2.getMarimekkoScale = getMarimekkoScale;
exports2.getMaxBigIntegerForNested = getMaxBigIntegerForNested;
exports2.getMaxBigIntegerForShallow = getMaxBigIntegerForShallow;
exports2.getMaxTicks = getMaxTicks;
exports2.getParentSVG = getParentSVG;
exports2.getPointFromMatrix = getPointFromMatrix;
exports2.getPositionForTarget = getPositionForTarget;
exports2.getRadialYScale = getRadialYScale;
exports2.getTicks = getTicks;
exports2.getXDomain = getXDomain;
exports2.getXScale = getXScale;
exports2.getYDomain = getYDomain;
exports2.getYScale = getYScale;
exports2.humanFormatBigInteger = humanFormatBigInteger;
exports2.interpolate = interpolate;
exports2.isAxisVisible = isAxisVisible;
exports2.isZoomLevelGoingOutOfBounds = isZoomLevelGoingOutOfBounds;
exports2.linearAxisLineDefaultProps = linearAxisLineDefaultProps;
exports2.mergeDefaultProps = mergeDefaultProps;
exports2.normalizeValue = normalizeValue;
exports2.normalizeValueForFormatting = normalizeValueForFormatting;
exports2.reduceTicks = reduceTicks;
exports2.roundDecimals = roundDecimals;
exports2.schemes = schemes;
exports2.toggleTextSelection = toggleTextSelection;
exports2.tooltipTheme = tooltipTheme;
exports2.uniqueBy = uniqueBy;
exports2.useChart = useChart;
exports2.useCount = useCount;
exports2.useHoverIntent = useHoverIntent;
exports2.useResizeObserver = useResizeObserver;
exports2.weekDays = weekDays;
exports2.wrapText = wrapText;
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});
//# sourceMappingURL=index.umd.cjs.map