@synergy-design-system/components
Version:
247 lines (244 loc) • 8.2 kB
JavaScript
import {
getRealStyleValue,
getRealValueWithoutUnit,
normalizeArray,
setDefaultValueIfNotAvailable
} from "./chunk.DKVCRWJF.js";
import {
mergeConfigs
} from "./chunk.T3OQKYCT.js";
import {
__spreadProps,
__spreadValues
} from "./chunk.VK2FVWOF.js";
// src/components/chart/configs/axes/utilities.ts
function colorSvgDataUrl(dataUrl, color) {
try {
const [, base64] = dataUrl.split(",");
if (!base64) return dataUrl;
const svg = atob(base64).replace(/currentColor/gi, color);
return `data:image/svg+xml;base64,${btoa(svg)}`;
} catch (e) {
return dataUrl;
}
}
var getDataFromAxis = (axis) => {
if (axis && typeof axis === "object" && "data" in axis && Array.isArray(axis.data)) {
return axis.data.map(String);
}
return [];
};
function extractYAxisLabelTexts(config) {
const { yAxis } = config;
const fromAxis = Array.isArray(yAxis) ? yAxis.flatMap(getDataFromAxis) : getDataFromAxis(yAxis);
if (fromAxis.length) return fromAxis;
const { series } = config;
if (Array.isArray(series)) {
const values = series.flatMap((item) => {
if (item && typeof item === "object" && "data" in item && Array.isArray(item.data)) {
return item.data.filter(
(v) => typeof v === "number"
);
}
return [];
});
if (values.length) {
return [String(Math.min(...values)), String(Math.max(...values))];
}
}
return [];
}
function measureMaxTextWidth(texts, font) {
if (texts.length === 0) return 0;
try {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
if (!ctx) return 0;
ctx.font = font;
return Math.ceil(Math.max(...texts.map((t) => ctx.measureText(t).width)));
} catch (e) {
return 0;
}
}
var updateAxisConfig = (config, axisKey, patch, options = {}) => {
const { axisIndex } = options;
const shouldUpdateIndex = (index) => {
if (axisIndex === void 0) return true;
if (Array.isArray(axisIndex)) return axisIndex.includes(index);
return axisIndex === index;
};
const mergeSingleAxis = (axisOption) => {
const merged = mergeConfigs(
{ [axisKey]: axisOption },
{ [axisKey]: patch }
);
return merged[axisKey];
};
const axisConfig = config[axisKey];
if (Array.isArray(axisConfig)) {
return axisConfig.map((axis, index) => {
if (!shouldUpdateIndex(index)) return axis;
return mergeSingleAxis(axis);
});
}
if (!shouldUpdateIndex(0)) return axisConfig;
return mergeSingleAxis(axisConfig != null ? axisConfig : {});
};
var getDefaultAxisLabelStyle = () => ({
color: getRealStyleValue("--syn-typography-color-text-quiet"),
fontFamily: getRealStyleValue("--syn-font-sans"),
fontSize: getRealStyleValue("--syn-font-size-x-small"),
fontWeight: getRealStyleValue("--syn-font-weight-normal")
});
var getDefaultAxisIconStyle = () => ({
height: getRealValueWithoutUnit("--syn-spacing-large"),
width: getRealValueWithoutUnit("--syn-spacing-large")
});
var getFontShorthand = (labelsStyle) => {
var _a, _b, _c;
const defaultAxisLabelStyle = getDefaultAxisLabelStyle();
const fontSizeValue = (_a = labelsStyle == null ? void 0 : labelsStyle.fontSize) != null ? _a : defaultAxisLabelStyle.fontSize;
const fontSize = typeof fontSizeValue === "number" ? `${fontSizeValue}px` : String(fontSizeValue);
const fontFamily = String((_b = labelsStyle == null ? void 0 : labelsStyle.fontFamily) != null ? _b : defaultAxisLabelStyle.fontFamily);
const fontWeight = String((_c = labelsStyle == null ? void 0 : labelsStyle.fontWeight) != null ? _c : defaultAxisLabelStyle.fontWeight);
return `${fontWeight} ${fontSize} ${fontFamily}`;
};
var getYAxisLabelEffectiveWidth = (labelsStyle, config) => {
if ((labelsStyle == null ? void 0 : labelsStyle.width) !== void 0) return labelsStyle.width;
const texts = extractYAxisLabelTexts(config);
const measured = texts.length > 0 ? measureMaxTextWidth(texts, getFontShorthand(labelsStyle)) : 0;
return measured > 0 ? measured : 30;
};
var createPositionConfig = (iconPosition, labelsStyle, config) => {
switch (iconPosition) {
case "bottom":
return {
formatter: (value, i) => `{label|${value}}
{icon_${i}|}`,
padding: [0, 0, 4, 0],
width: void 0
};
case "right":
return {
formatter: (value, i) => `{label|${value}}{icon_${i}|}`,
padding: [0, 4, 0, 0],
width: void 0
};
case "top":
return {
formatter: (value, i) => `{icon_${i}|}
{label|${value}}`,
padding: [4, 0, 0, 0],
width: void 0
};
default:
return {
align: "left",
formatter: (value, i) => `{icon_${i}|}{label|${value}}`,
padding: [0, 0, 0, 4],
width: getYAxisLabelEffectiveWidth(labelsStyle, config)
};
}
};
var buildAxisLabelConfigWithIcon = ({
config,
iconColor,
iconPosition,
iconsStyle,
iconUrls,
labelsStyle
}) => {
const positionConfig = createPositionConfig(iconPosition, labelsStyle, config);
const mergedLabelsStyle = __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, getDefaultAxisLabelStyle()), {
padding: positionConfig.padding,
width: positionConfig.width
}), positionConfig.align ? { align: positionConfig.align } : {}), labelsStyle);
const mergedIconsStyle = __spreadValues(__spreadValues(__spreadValues({}, getDefaultAxisIconStyle()), positionConfig.align ? { align: positionConfig.align } : {}), iconsStyle);
return {
formatter: positionConfig.formatter,
rich: __spreadValues({
label: mergedLabelsStyle
}, Object.fromEntries(
iconUrls.flatMap((url, index) => {
if (url == null) return [];
return [[
`icon_${index}`,
__spreadProps(__spreadValues({}, mergedIconsStyle), {
backgroundColor: { image: colorSvgDataUrl(url, iconColor) }
})
]];
})
))
};
};
var getDefaultXAxisStyle = () => ({
"axisLabel.margin": getRealValueWithoutUnit("--syn-spacing-small"),
nameGap: 32,
nameLocation: "center"
});
var getDefaultYAxisStyle = () => ({
"axisLabel.margin": getRealValueWithoutUnit("--syn-spacing-medium"),
nameGap: getRealValueWithoutUnit("--syn-spacing-medium"),
"nameTextStyle.align": "right",
"nameTextStyle.padding": [0, getRealValueWithoutUnit("--syn-spacing-medium"), 0, 0]
});
var applyAxisDefaults = (axisKey, axisOption) => {
if (!axisOption) return;
const axes = normalizeArray(axisOption);
const axisDefaults = axisKey === "xAxis" ? getDefaultXAxisStyle() : getDefaultYAxisStyle();
axes.forEach((axis) => {
Object.entries(axisDefaults).forEach(([keyPath, value]) => {
setDefaultValueIfNotAvailable(axis, keyPath, value);
});
});
};
var applyAxisDefaultsPreprocessor = (option) => {
if (!option || !option.xAxis && !option.yAxis) return;
if (option.xAxis) {
applyAxisDefaults("xAxis", option.xAxis);
}
if (option.yAxis) {
applyAxisDefaults("yAxis", option.yAxis);
}
};
var axisCommonStyles = () => ({
// This ensures that the number of ticks on multiple axes are the same
alignTicks: true,
axisLabel: {
color: getRealStyleValue("--syn-typography-color-text-quiet"),
fontFamily: getRealStyleValue("--syn-font-sans"),
fontSize: getRealStyleValue("--syn-font-size-x-small"),
fontWeight: getRealStyleValue("--syn-font-weight-normal")
},
axisLine: {
lineStyle: {
color: getRealStyleValue("--syn-chart-grid-lines-color-emphasize"),
width: getRealValueWithoutUnit("--syn-border-width-medium")
},
show: false
},
minorSplitLine: {
lineStyle: {}
},
nameTextStyle: {
color: getRealStyleValue("--syn-typography-color-text"),
fontSize: getRealStyleValue("--syn-font-size-small"),
fontWeight: getRealStyleValue("--syn-font-weight-bold")
},
splitLine: {
lineStyle: {
color: getRealStyleValue("--syn-chart-grid-lines-color")
},
show: false
}
});
export {
colorSvgDataUrl,
extractYAxisLabelTexts,
measureMaxTextWidth,
updateAxisConfig,
buildAxisLabelConfigWithIcon,
applyAxisDefaultsPreprocessor,
axisCommonStyles
};
//# sourceMappingURL=chunk.KMZLWOXI.js.map