@synergy-design-system/components
Version:
118 lines (117 loc) • 4.85 kB
TypeScript
import type { ECConfig } from '../../types.js';
import type { AxisKey, AxisLabel, AxisLabelIconsConfig, AxisOption, AxisUpdateOptions } from './types.js';
/**
* Colors an SVG data URL by replacing `currentColor` with the provided color string.
* Returns the original data URL unchanged if decoding or re-encoding fails.
*
* @param dataUrl - A data URL containing a base64-encoded SVG image.
* @param color - The replacement color (e.g. `#ff0000` or `red`).
* @returns A new SVG data URL with `currentColor` substituted.
*/
export declare function colorSvgDataUrl(dataUrl: string, color: string): string;
/**
* Extracts the strings that will appear as y-axis labels from the current config.
*
* - Category axes: uses the explicit `yAxis.data` array.
* - Value axes: approximates with the min/max of all numeric series data points,
* which tends to represent the widest labels ECharts will render.
* - Multiple y-axes: combines label candidates from all configured y-axis entries.
*
* @param config - The current chart config.
* @returns Label texts that can be used for width estimation of rich y-axis labels.
*/
export declare function extractYAxisLabelTexts(config: ECConfig): string[];
/**
* Measures the maximum rendered pixel width of the given strings using a canvas.
* Returns `0` if the canvas API is unavailable (e.g. SSR or test environments).
*
* @param texts - The strings to measure.
* @param font - A CSS font string (e.g. `'12px sans-serif'`) matching the target rendering context.
* @returns The ceiling of the widest measured text in CSS pixels.
*/
export declare function measureMaxTextWidth(texts: string[], font: string): number;
/**
* Merges a partial patch into one axis config (`xAxis` or `yAxis`) and returns
* the updated value for that axis key.
*
* Supports both single-axis objects and axis arrays. When `axisIndex` is set,
* only the selected axis entries are updated. For non-array axis configs,
* index `0` is used.
*
* @param config - ECharts config object.
* @param axisKey - Axis key to update (`xAxis` or `yAxis`).
* @param patch - Partial axis config merged into the selected axis entries.
* @param options - Optional axis selection settings.
* @returns The updated axis config at `config[axisKey]`, preserving its original shape.
*
* @example
* ```ts
* const nextXAxis = updateAxisConfig(
* config,
* 'xAxis',
* { axisLabel: { show: false } },
* { axisIndex: [0, 2] },
* );
*
* // nextXAxis
* [
* { ...config.xAxis[0], axisLabel: { ...config.xAxis[0].axisLabel, show: false } },
* config.xAxis[1],
* { ...config.xAxis[2], axisLabel: { ...config.xAxis[2].axisLabel, show: false } },
* ]
* ```
*/
export declare const updateAxisConfig: <T extends AxisKey>(config: ECConfig, axisKey: T, patch: AxisOption<T>, options?: AxisUpdateOptions) => ECConfig[T];
/**
* Builds an ECharts `axisLabel` config that renders a per-tick SVG icon next to the label text.
*
* The function merges Synergy defaults with caller overrides, colorizes each icon by replacing
* `currentColor` in the provided SVG data URLs, and emits a rich-text configuration compatible
* with ECharts axis label formatting.
*
* @param options - Fully resolved icon-label configuration, including chart config and position.
* @returns An `axisLabel` object ready to be merged into an x-axis or y-axis config.
*/
export declare const buildAxisLabelConfigWithIcon: ({ config, iconColor, iconPosition, iconsStyle, iconUrls, labelsStyle, }: AxisLabelIconsConfig) => AxisLabel;
/**
* Preprocessor to apply default styles to x and y axes based on the Synergy theme.
* This is needed because ECharts does not provide a way to set specific styles for x and y axis, only for axis types.
* If the user already provided specific styles for these properties, those will be respected and not overridden.
*
* @param option - The ECharts config option object that is being processed before rendering.
*/
export declare const applyAxisDefaultsPreprocessor: (option: ECConfig) => void;
/**
* Default styling for all axes.
* This is done as function to ensure that the real style values are read at runtime and not at build time, which allows them to be dynamic based on the current theme.
*/
export declare const axisCommonStyles: () => {
alignTicks: boolean;
axisLabel: {
color: string;
fontFamily: string;
fontSize: string;
fontWeight: string;
};
axisLine: {
lineStyle: {
color: string;
width: number;
};
show: boolean;
};
minorSplitLine: {
lineStyle: {};
};
nameTextStyle: {
color: string;
fontSize: string;
fontWeight: string;
};
splitLine: {
lineStyle: {
color: string;
};
show: boolean;
};
};